2390 lines
214 KiB
JavaScript
2390 lines
214 KiB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,58829,e=>{"use strict";var t=e.i(43476),s=e.i(71645),i=e.i(74080);function r({from:e,to:i,duration:a=2e3,decimals:o=0,suffix:n=""}){let[l,d]=(0,s.useState)(e);return(0,s.useEffect)(()=>{let t=null,s=r=>{t||(t=r);let o=Math.min((r-t)/a,1);d(o*(i-e)+e),o<1&&window.requestAnimationFrame(s)};window.requestAnimationFrame(s)},[e,i,a]),(0,t.jsxs)(t.Fragment,{children:[l.toFixed(o),n]})}e.s(["default",0,function(){(0,i.preload)("/images/miletruth-bg.webp",{as:"image"});let[e,a]=(0,s.useState)(!1);return(0,s.useEffect)(()=>{requestAnimationFrame(()=>a(!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.webp') !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 0;
|
||
}
|
||
.miletruth-hero-container::before {
|
||
display: none !important;
|
||
}
|
||
.miletruth-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
padding: 0 !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 15px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
.miletruth-hero .slide-content,
|
||
.miletruth-hero .slide-content-inner {
|
||
/* These carry inherited 20px padding from the slider theme with
|
||
content-box sizing, so width:100% + padding overflowed the viewport
|
||
by ~40px and pushed the hero off-center. Force border-box so the
|
||
padding is contained and the block stays centered. */
|
||
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: 80px 0 !important;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
/* Horizontal inset switches to 10px here (not at 1024px) to match the
|
||
breakpoint every other MileTruth section (Intro, Workflow1/2/4) uses
|
||
for the same 20px -> 10px step, so the Hero's left/right edges stay
|
||
aligned with the rest of the page through the whole 768-1024px range. */
|
||
@media (max-width: 767px) {
|
||
.miletruth-hero .elementor-element-86f3204 {
|
||
padding: 0 10px !important;
|
||
}
|
||
}
|
||
@media (max-width: 580px) {
|
||
.miletruth-hero-container {
|
||
min-height: 500px;
|
||
padding: 60px 0 !important;
|
||
}
|
||
.miletruth-hero .elementor-element-86f3204 {
|
||
padding: 0 10px !important;
|
||
}
|
||
/* Collapse the nested horizontal padding (was 40px + 40px on top of the
|
||
12px wrapper) — at 320px that left only ~136px for text and the long
|
||
heading words overflowed, causing horizontal scroll + off-center look. */
|
||
.miletruth-content {
|
||
padding: 0 !important;
|
||
}
|
||
.miletruth-hero .slide-content {
|
||
padding: 0 15px !important;
|
||
}
|
||
.miletruth-hero .elementor-element-8e5c81e {
|
||
padding: 30px 0 !important;
|
||
border-radius: 20px !important;
|
||
}
|
||
.miletruth-hero .elementor-element-8e5c81e > .e-con-inner {
|
||
padding: 0 20px !important;
|
||
}
|
||
.miletruth-hero .elementor-element-628123a {
|
||
grid-template-columns: 1fr !important;
|
||
gap: 36px !important;
|
||
/* Single column on mobile → center each stat in the card */
|
||
justify-items: center !important;
|
||
}
|
||
.miletruth-hero .elementor-counter {
|
||
align-items: center !important;
|
||
text-align: center !important;
|
||
}
|
||
.miletruth-hero .elementor-counter-number-wrapper {
|
||
justify-content: center !important;
|
||
}
|
||
.miletruth-hero .content-slider-item-heading,
|
||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||
font-size: clamp(26px, 8vw, 32px) !important;
|
||
letter-spacing: -0.5px !important;
|
||
/* never let a single long word push past the viewport */
|
||
overflow-wrap: break-word;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
`}}),(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 logistics 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)(r,{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)(r,{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)(r,{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)(r,{from:1,to:45,decimals:0,suffix:""}):"45"}),(0,t.jsx)("span",{className:"elementor-counter-number-suffix",children:"ms"})]})]})})})]})})})]})})]})}])},25751,e=>{"use strict";var t=e.i(43476);let s=[{icon:(0,t.jsx)("svg",{className:"mti-icon",width:"38",height:"38",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:(0,t.jsx)("path",{d:"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"})}),value:"100+",label:"parallel route permutations evaluated per order"},{icon:(0,t.jsxs)("svg",{className:"mti-icon",width:"38",height:"38",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,t.jsx)("polyline",{points:"12 6 12 12 16 14"})]}),value:"38ms",label:"decision latency before instant auto-dispatch"},{icon:(0,t.jsxs)("svg",{className:"mti-icon",width:"38",height:"38",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"}),(0,t.jsx)("polyline",{points:"9 12 11 14 15 10"})]}),value:"99.9%",label:"guaranteed on-time SLA delivery accuracy"},{icon:(0,t.jsxs)("svg",{className:"mti-icon",width:"38",height:"38",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,t.jsx)("path",{d:"M23 18l-9.5-9.5-5 5L1 6"}),(0,t.jsx)("polyline",{points:"17 18 23 18 23 12"})]}),value:"-22%",label:"reduction in total fuel & operational costs"}];e.s(["default",0,function(){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
|
||
.mti-shell {
|
||
width: calc(100% - 40px);
|
||
margin: 40px 20px clamp(36px, 4vw, 56px);
|
||
}
|
||
.mti {
|
||
background: #ffffff;
|
||
border-radius: 24px;
|
||
padding: clamp(36px, 4.5vw, 56px) clamp(24px, 4vw, 48px);
|
||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
|
||
}
|
||
.mti__inner {
|
||
max-width: 1240px;
|
||
margin: 0 auto;
|
||
}
|
||
.mti__head {
|
||
max-width: 860px;
|
||
margin-bottom: clamp(36px, 4.5vw, 52px);
|
||
}
|
||
.mti__eyebrow {
|
||
font-size: 13.5px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
color: #6b7280;
|
||
margin-bottom: 14px;
|
||
text-transform: uppercase;
|
||
display: block;
|
||
}
|
||
.mti__divider {
|
||
border: 0;
|
||
height: 1px;
|
||
background: rgba(0, 0, 0, 0.12);
|
||
margin: 0 0 clamp(20px, 2.4vw, 28px);
|
||
width: 100%;
|
||
}
|
||
.mti__heading {
|
||
margin: 0 0 clamp(16px, 2vw, 24px);
|
||
color: #111827 !important;
|
||
font-weight: 800 !important;
|
||
font-size: clamp(32px, 4.2vw, 56px) !important;
|
||
line-height: 1.12 !important;
|
||
letter-spacing: -0.025em;
|
||
text-transform: none !important;
|
||
}
|
||
.mti__accent {
|
||
color: #dc2626 !important;
|
||
}
|
||
.mti__desc {
|
||
font-size: clamp(16px, 1.15vw, 18px);
|
||
line-height: 1.65;
|
||
color: #4b5563;
|
||
font-weight: 400;
|
||
margin: 0;
|
||
max-width: 780px;
|
||
}
|
||
.mti-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: clamp(20px, 3vw, 36px);
|
||
padding-top: clamp(28px, 3.5vw, 40px);
|
||
}
|
||
.mti-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
padding-right: 12px;
|
||
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.mti-card:last-child {
|
||
border-right: none;
|
||
padding-right: 0;
|
||
}
|
||
.mti-card-icon {
|
||
color: #111827;
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.35s ease, color 0.35s ease;
|
||
}
|
||
.mti-card:hover .mti-card-icon {
|
||
transform: translateY(-4px) scale(1.08);
|
||
color: #dc2626;
|
||
}
|
||
.mti-icon {
|
||
transition: stroke 0.35s ease;
|
||
}
|
||
|
||
.mti-card-val {
|
||
font-size: clamp(32px, 3.2vw, 46px);
|
||
font-weight: 800;
|
||
color: #111827;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 8px;
|
||
}
|
||
.mti-card-label {
|
||
font-size: 14.5px;
|
||
line-height: 1.5;
|
||
color: #4b5563;
|
||
font-weight: 450;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.mti-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 28px;
|
||
}
|
||
.mti-card {
|
||
border-right: none;
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
@media (max-width: 540px) {
|
||
.mti-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 24px;
|
||
}
|
||
}
|
||
@media (max-width: 767px) {
|
||
.mti-shell {
|
||
width: calc(100% - 20px);
|
||
margin: 24px 10px 32px;
|
||
}
|
||
.mti {
|
||
padding: 28px 20px;
|
||
}
|
||
}
|
||
`}}),(0,t.jsx)("div",{className:"mti-shell",children:(0,t.jsx)("section",{className:"mti","aria-label":"MileTruth AI introduction",children:(0,t.jsxs)("div",{className:"mti__inner",children:[(0,t.jsxs)("div",{className:"mti__head",children:[(0,t.jsx)("span",{className:"mti__eyebrow",children:"/ MileTruth AI /"}),(0,t.jsx)("hr",{className:"mti__divider"}),(0,t.jsxs)("h2",{className:"mti__heading",children:["Routing is a ",(0,t.jsx)("span",{className:"mti__accent",children:"Decision Problem."})]}),(0,t.jsx)("p",{className:"mti__desc",children:"Routing is not simply one static line between two points. Orders change, vehicles have strict capacity limits, and traffic dictates what is possible. MileTruth evaluates every option in real time to commit to the single strongest plan."})]}),(0,t.jsx)("div",{className:"mti-grid",children:s.map(e=>(0,t.jsxs)("div",{className:"mti-card",children:[(0,t.jsx)("div",{className:"mti-card-icon",children:e.icon}),(0,t.jsx)("div",{className:"mti-card-val",children:e.value}),(0,t.jsx)("div",{className:"mti-card-label",children:e.label})]},e.value))})]})})})]})}])},16971,e=>{"use strict";var t=e.i(43476),s=e.i(71645),i=e.i(70703);let r=(0,i.default)(()=>e.A(49712),{loadableGenerated:{modules:[29539]},ssr:!1}),a=(0,i.default)(()=>e.A(40999),{loadableGenerated:{modules:[39184]},ssr:!1}),o={optimization:"#020617",logistics:"#08080c"},n={optimization:{center:.78,amp:.14,speed:.5,still:.85},logistics:{center:.5,amp:.13,speed:.4,still:.52}};e.s(["default",0,function({variant:e,ariaLabel:i}){let l=(0,s.useRef)(null),d=(0,s.useRef)(n[e].still),[c,p]=(0,s.useState)(!1),[h,w]=(0,s.useState)(!1),[m,x]=(0,s.useState)(!1),[g,f]=(0,s.useState)(!1),[u,b]=(0,s.useState)(!1);return(0,s.useEffect)(()=>{let e=window.matchMedia("(max-width: 767px)"),t=window.matchMedia("(min-width: 768px) and (max-width: 1024px)"),s=window.matchMedia("(prefers-reduced-motion: reduce)"),i=()=>{x(e.matches),f(t.matches),b(s.matches)};return i(),e.addEventListener("change",i),t.addEventListener("change",i),s.addEventListener("change",i),()=>{e.removeEventListener("change",i),t.removeEventListener("change",i),s.removeEventListener("change",i)}},[]),(0,s.useEffect)(()=>{let e=l.current;if(!e)return;let t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(p(!0),w(!0),t.disconnect())},{rootMargin:"60% 0px"}),s=new IntersectionObserver(e=>w(e.some(e=>e.isIntersecting)),{rootMargin:"10% 0px"});return t.observe(e),s.observe(e),()=>{t.disconnect(),s.disconnect()}},[]),(0,s.useEffect)(()=>{let t=n[e];if(u){d.current=t.still;return}if(!h)return;let s=0,i=()=>{let e=performance.now()/1e3;d.current=t.center+Math.sin(e*t.speed)*t.amp,s=requestAnimationFrame(i)};return s=requestAnimationFrame(i),()=>cancelAnimationFrame(s)},[e,u,h]),(0,t.jsxs)("div",{ref:l,className:"wf-scene",role:"img","aria-label":i??"DoorMile 3D logistics scene",style:{background:o[e]},children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
|
||
.wf-scene {
|
||
position: relative;
|
||
width: 100%;
|
||
/* Compact, fixed-ratio media panel — replaces the multi-viewport pinned
|
||
scroll experience so the workflow is dramatically shorter. */
|
||
aspect-ratio: 4 / 3;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
.wf-scene__canvas { position: absolute; inset: 0; }
|
||
.wf-scene__canvas canvas { display: block; width: 100% !important; height: 100% !important; }
|
||
@media (max-width: 991px) {
|
||
.wf-scene { aspect-ratio: 16 / 10; }
|
||
}
|
||
/* Phones: shorter scene panel (~17% less tall than the old 4/3) so the
|
||
card + KPI bar are reached sooner. The closer mobile camera framing
|
||
keeps the depot/routes/vehicles readable in the reduced height. */
|
||
@media (max-width: 480px) {
|
||
.wf-scene { aspect-ratio: 16 / 10; }
|
||
}
|
||
`}}),(0,t.jsx)("div",{className:"wf-scene__canvas",children:c&&("optimization"===e?(0,t.jsx)(r,{progress:d,reduced:u,isMobile:m,isTablet:g,active:h}):(0,t.jsx)(a,{progress:d,reduced:u,isMobile:m,active:h}))})]})}])},76756,e=>{"use strict";var t=e.i(43476),s=e.i(14224),i=e.i(16971);let r={accent:"#00E5FF",accent2:"#14B8A6",glow:"rgba(0,229,255,0.18)"},a=[{value:42,suffix:"%",label:"Distance Saved"},{value:28,suffix:"%",label:"Faster Routes"},{value:31,suffix:"%",label:"Lower Cost"},{value:99.9,decimals:1,suffix:"%",label:"On-Time"}],o=e=>(0,t.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e}),n=[{icon:o((0,t.jsx)("polygon",{points:"3 11 22 2 13 21 11 13 3 11"})),title:"Route Optimization",desc:"AI selects the most efficient path across every zone."},{icon:o((0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("polyline",{points:"22 17 13.5 8.5 8.5 13.5 2 7"}),(0,t.jsx)("polyline",{points:"16 17 22 17 22 11"})]})),title:"Distance Reduction",desc:"Same volume moved with a leaner, better-used fleet."},{icon:o((0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("path",{d:"M12 14l4-4"}),(0,t.jsx)("path",{d:"M3.34 19a10 10 0 1 1 17.32 0"})]})),title:"Fleet Efficiency",desc:"Higher utilisation and lower operating cost."},{icon:o((0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"}),(0,t.jsx)("polyline",{points:"9 12 11 14 15 10"})]})),title:"SLA Performance",desc:"Real-time correction keeps shipments on time."}],l=[{value:"-42%",label:"DISTANCE SAVED"},{value:"-37%",label:"FEWER VEHICLES"}];e.s(["default",0,function(){return(0,t.jsx)(s.default,{ariaLabel:"Workflow 1 — Performance",gapTop:!0,gapBottom:!0,bannerImage:"/images/mile-1.webp",cardTitle:"OPTIMIZE EVERY MILE",cardSubtitle:"Cut travel distance, reduce operating cost, and improve fleet productivity across every route.",eyebrow:"/ Performance /",titleLead:"SMARTER ROUTES. ",titleAccent:"LOWER COSTS.",mediaSlot:(0,t.jsx)(i.default,{variant:"optimization",ariaLabel:"Live route optimization engine"}),metrics:a,features:n,cardsHeading:"Performance Insight",cardsTheme:r,badges:l})}])},38730,e=>{"use strict";var t=e.i(43476),s=e.i(14224);let i={accent:"#E2354A",accent2:"#C01227",glow:"rgba(226,53,74,0.2)"},r=[{value:45,suffix:"ms",label:"Inference"},{value:12,suffix:"+",label:"Strategies"},{value:99.9,decimals:1,suffix:"%",label:"SLA Met"},{value:24,suffix:"/7",label:"Adaptive"}],a=e=>(0,t.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e}),o=[{icon:a((0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("polygon",{points:"12 2 2 7 12 12 22 7 12 2"}),(0,t.jsx)("polyline",{points:"2 17 12 22 22 17"}),(0,t.jsx)("polyline",{points:"2 12 12 17 22 12"})]})),title:"Generate Routes",desc:"Many strategies explored per dispatch window."},{icon:a((0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),(0,t.jsx)("polyline",{points:"22 4 12 14.01 9 11.01"})]})),title:"Check Constraints",desc:"Battery, capacity, distance and time validated."},{icon:a((0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("line",{x1:"6",y1:"20",x2:"6",y2:"14"}),(0,t.jsx)("line",{x1:"12",y1:"20",x2:"12",y2:"4"}),(0,t.jsx)("line",{x1:"18",y1:"20",x2:"18",y2:"10"})]})),title:"Score & Compare",desc:"Plans ranked by total cost in parallel."},{icon:a((0,t.jsx)("polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2"})),title:"Select Best Plan",desc:"SLA-first plan locked in and dispatched."}],n=[{value:"45ms",label:"INFERENCE"},{value:"100%",label:"SLA-FIRST"}];e.s(["default",0,function(){return(0,t.jsx)(s.default,{ariaLabel:"Workflow 2 — Innovation",gapBottom:!0,bannerImage:"/images/mid-mile-approach.webp",cardTitle:"BEST PLAN",cardSubtitle:"Analyze thousands of route possibilities and automatically select the most efficient routing strategy.",eyebrow:"/ Innovation /",titleLead:"MANY STRATEGIES. ",titleAccent:"ONE BEST PLAN.",image:"/videos/workflow-2-routing.mp4",imageAlt:"AI route-planning engine selecting the best route plan",metrics:r,features:o,cardsHeading:"AI Decision Engine",cardsTheme:i,badges:n})}])},27698,e=>{"use strict";var t=e.i(43476),s=e.i(14224);let i={accent:"#7C5CFF",accent2:"#4C3AE3",glow:"rgba(124,92,255,0.20)"},r=[{text:"QUBO",value:0,suffix:"",label:"Problem Model"},{text:"GLOBAL",value:0,suffix:"",label:"Minimum Search"},{text:"HYBRID",value:0,suffix:"",label:"Intelligence"},{text:"MULTI",value:0,suffix:"",label:"Objective"}],a=[{text:"Multi-Driver",value:0,suffix:"",label:"Dynamic Routing"},{text:"Optimized",value:0,suffix:"",label:"Time Windows"},{text:"Real-Time",value:0,suffix:"",label:"Fleet Balancing"},{text:"Cost + Distance + SLA",value:0,suffix:"",label:"Objectives"}],o=e=>(0,t.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e}),n=[{icon:o((0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("rect",{x:"3",y:"3",width:"7",height:"7"}),(0,t.jsx)("rect",{x:"14",y:"3",width:"7",height:"7"}),(0,t.jsx)("rect",{x:"14",y:"14",width:"7",height:"7"}),(0,t.jsx)("rect",{x:"3",y:"14",width:"7",height:"7"})]})),title:"Encode the Problem",desc:"Fleet driver assignments, stop sequences, capacity, traffic, service time, and SLA constraints become part of one mathematical optimization model."},{icon:o((0,t.jsx)("path",{d:"m8 3 4 8 5-5 5 15H2L8 3z"})),title:"Build the Energy Landscape",desc:"Each feasible routing solution is represented as a state with its own energy through a QUBO formulation."},{icon:o((0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,t.jsx)("circle",{cx:"12",cy:"12",r:"5"}),(0,t.jsx)("circle",{cx:"12",cy:"12",r:"1"})]})),title:"Search the Global Minimum",desc:"Optimization becomes the search for the lowest-energy state instead of evaluating route combinations one by one."},{icon:o((0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("polygon",{points:"12 2 2 7 12 12 22 7 12 2"}),(0,t.jsx)("polyline",{points:"2 17 12 22 22 17"}),(0,t.jsx)("polyline",{points:"2 12 12 17 22 12"})]})),title:"Hybrid Intelligence",desc:"Classical algorithms, AI models, and quantum optimization work together using the right computational model for each problem."}],l=[{value:"QUBO",label:"PROBLEM MODEL"},{value:"HYBRID",label:"INTELLIGENCE"}];e.s(["default",0,function(){return(0,t.jsx)(s.default,{ariaLabel:"Workflow 4 — Quantum Intelligence",gapBottom:!0,bannerImage:"/images/workflow4.png",image:"/videos/Doormile-quantum-video3.mp4",cardTitle:"QUANTUM INTELLIGENCE",cardSubtitle:"Exploring a hybrid optimization layer that treats routing as an energy landscape, not a search problem.",eyebrow:"/ Quantum Intelligence /",titleLead:"FROM ROUTE SEARCH. ",titleAccent:"TO ENERGY MINIMIZATION.",imageAlt:"Hybrid quantum-classical optimization engine visualizing an energy landscape",metrics:r,barStats:a,features:n,cardsHeading:"Quantum Intelligence",sysLabel:"HYBRID ENGINE",cardsTheme:i,badges:l,mediaClassName:"evnd__imgwrap--wf4"})}])},33016,e=>{"use strict";var t=e.i(43476),s=e.i(71645);let i=(0,e.i(70703).default)(()=>e.A(15756),{loadableGenerated:{modules:[55819]},ssr:!1,loading:()=>null});e.s(["default",0,function(){let e=(0,s.useRef)(null),[r,a]=(0,s.useState)(!1);return((0,s.useEffect)(()=>{let t=e.current;if(!t)return;let s=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(a(!0),s.disconnect())},{rootMargin:"150% 0px"});return s.observe(t),()=>s.disconnect()},[]),r)?(0,t.jsx)("div",{ref:e,style:{display:"contents"},children:(0,t.jsx)(i,{})}):(0,t.jsx)("div",{ref:e,"aria-hidden":!0,style:{minHeight:"100vh"}})}])},56530,e=>{"use strict";var t=e.i(43476),s=e.i(71645),i=e.i(89970),r=e.i(83495),a=e.i(46932);e.i(47167);var o=e.i(31178),n=e.i(47414),l=e.i(74008),d=e.i(21476),c=e.i(72846),p=s,h=e.i(37806);function w(e,t){if("function"==typeof e)return e(t);null!=e&&(e.current=t)}class m extends p.Component{getSnapshotBeforeUpdate(e){let t=this.props.childRef.current;if((0,c.isHTMLElement)(t)&&e.isPresent&&!this.props.isPresent&&!1!==this.props.pop){let e=t.offsetParent,s=(0,c.isHTMLElement)(e)&&e.offsetWidth||0,i=(0,c.isHTMLElement)(e)&&e.offsetHeight||0,r=getComputedStyle(t),a=this.props.sizeRef.current;a.height=parseFloat(r.height),a.width=parseFloat(r.width),a.top=t.offsetTop,a.left=t.offsetLeft,a.right=s-a.width-a.left,a.bottom=i-a.height-a.top,a.direction=r.direction}return null}componentDidUpdate(){}render(){return this.props.children}}function x({children:e,isPresent:i,anchorX:r,anchorY:a,root:o,pop:n}){let l=(0,p.useId)(),d=(0,p.useRef)(null),c=(0,p.useRef)({width:0,height:0,top:0,left:0,right:0,bottom:0,direction:"ltr"}),{nonce:g}=(0,p.useContext)(h.MotionConfigContext),f=function(...e){return s.useCallback(function(...e){return t=>{let s=!1,i=e.map(e=>{let i=w(e,t);return s||"function"!=typeof i||(s=!0),i});if(s)return()=>{for(let t=0;t<i.length;t++){let s=i[t];"function"==typeof s?s():w(e[t],null)}}}}(...e),e)}(d,e.props?.ref??e?.ref);return(0,p.useInsertionEffect)(()=>{let{width:e,height:t,top:s,left:p,right:h,bottom:w,direction:m}=c.current;if(i||!1===n||!d.current||!e||!t)return;let x="rtl"===m,f="left"===r?x?`right: ${h}`:`left: ${p}`:x?`left: ${p}`:`right: ${h}`,u="bottom"===a?`bottom: ${w}`:`top: ${s}`;d.current.dataset.motionPopId=l;let b=document.createElement("style");g&&(b.nonce=g);let v=o??document.head;return v.appendChild(b),b.sheet&&b.sheet.insertRule(`
|
||
[data-motion-pop-id="${l}"] {
|
||
position: absolute !important;
|
||
width: ${e}px !important;
|
||
height: ${t}px !important;
|
||
${f}px !important;
|
||
${u}px !important;
|
||
}
|
||
`),()=>{d.current?.removeAttribute("data-motion-pop-id"),v.contains(b)&&v.removeChild(b)}},[i]),(0,t.jsx)(m,{isPresent:i,childRef:d,sizeRef:c,pop:n,children:!1===n?e:p.cloneElement(e,{ref:f})})}let g=({children:e,initial:i,isPresent:r,onExitComplete:a,custom:o,presenceAffectsLayout:l,mode:c,anchorX:p,anchorY:h,root:w})=>{let m=(0,n.useConstant)(f),g=(0,s.useId)(),u=!0,b=(0,s.useMemo)(()=>(u=!1,{id:g,initial:i,isPresent:r,custom:o,onExitComplete:e=>{for(let t of(m.set(e,!0),m.values()))if(!t)return;a&&a()},register:e=>(m.set(e,!1),()=>m.delete(e))}),[r,m,a]);return l&&u&&(b={...b}),(0,s.useMemo)(()=>{m.forEach((e,t)=>m.set(t,!1))},[r]),s.useEffect(()=>{r||m.size||!a||a()},[r]),e=(0,t.jsx)(x,{pop:"popLayout"===c,isPresent:r,anchorX:p,anchorY:h,root:w,children:e}),(0,t.jsx)(d.PresenceContext.Provider,{value:b,children:e})};function f(){return new Map}var u=e.i(64978);let b=e=>e.key||"";function v(e){let t=[];return s.Children.forEach(e,e=>{(0,s.isValidElement)(e)&&t.push(e)}),t}let y=({children:e,custom:i,initial:r=!0,onExitComplete:a,presenceAffectsLayout:d=!0,mode:c="sync",propagate:p=!1,anchorX:h="left",anchorY:w="top",root:m})=>{let[x,f]=(0,u.usePresence)(p),y=(0,s.useMemo)(()=>v(e),[e]),j=p&&!x?[]:y.map(b),k=(0,s.useRef)(!0),N=(0,s.useRef)(y),M=(0,n.useConstant)(()=>new Map),q=(0,s.useRef)(new Set),[S,z]=(0,s.useState)(y),[L,C]=(0,s.useState)(y);(0,l.useIsomorphicLayoutEffect)(()=>{k.current=!1,N.current=y;for(let e=0;e<L.length;e++){let t=b(L[e]);j.includes(t)?(M.delete(t),q.current.delete(t)):!0!==M.get(t)&&M.set(t,!1)}},[L,j.length,j.join("-")]);let I=[];if(y!==S){let e=[...y];for(let t=0;t<L.length;t++){let s=L[t],i=b(s);j.includes(i)||(e.splice(t,0,s),I.push(s))}return"wait"===c&&I.length&&(e=I),C(v(e)),z(y),null}let{forceRender:E}=(0,s.useContext)(o.LayoutGroupContext);return(0,t.jsx)(t.Fragment,{children:L.map(e=>{let s=b(e),o=(!p||!!x)&&(y===L||j.includes(s));return(0,t.jsx)(g,{isPresent:o,initial:(!k.current||!!r)&&void 0,custom:i,presenceAffectsLayout:d,mode:c,root:m,onExitComplete:o?void 0:()=>{if(q.current.has(s)||!M.has(s))return;q.current.add(s),M.set(s,!0);let e=!0;M.forEach(t=>{t||(e=!1)}),e&&(E?.(),C(N.current),p&&f?.(),a&&a())},anchorX:h,anchorY:w,children:e},s)})})};var j=e.i(87652),k=e.i(35382),N=e.i(95420),M=e.i(91994),q=e.i(49492),S=e.i(72328),z=e.i(2018),L=e.i(16971);function C({children:e,size:s=18}){return(0,t.jsx)("svg",{viewBox:"0 0 24 24",width:s,height:s,fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:e})}i.default.registerPlugin(r.ScrollTrigger);let I=(0,t.jsxs)(C,{children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,t.jsx)("path",{d:"M12 7v5l3 3"})]}),E=(0,t.jsxs)(C,{children:[(0,t.jsx)("rect",{x:"4",y:"4",width:"16",height:"16",rx:"2"}),(0,t.jsx)("rect",{x:"9",y:"9",width:"6",height:"6"}),(0,t.jsx)("path",{d:"M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"})]}),A=(0,t.jsxs)(C,{children:[(0,t.jsx)("path",{d:"M12 2a9 9 0 019 9c0 5-4 9-9 9s-9-4-9-9a9 9 0 019-9z"}),(0,t.jsx)("path",{d:"M12 8v8M8 12h8"})]}),T=(0,t.jsxs)(C,{children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,t.jsx)("circle",{cx:"12",cy:"12",r:"6"}),(0,t.jsx)("circle",{cx:"12",cy:"12",r:"2"})]}),R=(0,t.jsx)(C,{children:(0,t.jsx)("path",{d:"M13 2L3 14h9l-1 8 10-12h-9l1-8z"})});function D(){let e=(0,s.useRef)(null),[a,o]=(0,s.useState)(0),[n,l]=(0,s.useState)(148);(0,s.useEffect)(()=>{let e=setInterval(()=>{o(e=>{let t=(e+1)%4;return 0===t&&l(Math.floor(140+90*Math.random())),t})},2200);return()=>clearInterval(e)},[]),(0,s.useEffect)(()=>{let t=e.current;if(!t)return;let s=t.querySelector(".qs-frame"),a=t.querySelector(".qs-col--trad"),o=Array.from(t.querySelectorAll(".qs-qstep")),n=t.querySelector(".qs-qdot");if(!s||!a||0===o.length)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return void i.default.set([s,a,...o],{opacity:1,y:0,scale:1});i.default.set(s,{opacity:0,y:26}),i.default.set(a,{opacity:0,y:26}),i.default.set(o,{opacity:.2,y:14,scale:.96}),n&&i.default.set(n,{scale:.5,opacity:0});let l=r.ScrollTrigger.create({trigger:t,start:"top 78%",once:!0,onEnter:()=>{let e=i.default.timeline();e.to(s,{opacity:1,y:0,duration:.8,ease:"power3.out"},0).to(a,{opacity:1,y:0,duration:.6,ease:"power3.out"},.15),o.forEach((t,s)=>{e.to(t,{opacity:1,y:0,scale:1,duration:.4,ease:"back.out(1.4)"},.6+.22*s)}),n&&e.to(n,{opacity:1,scale:1,duration:.4,ease:"back.out(2)"},.6+.22*o.length)}});return()=>l.kill()},[]);let d=[`⚡ RUNNING ${n} PARALLEL PERMUTATIONS`,`🧠 SCORING SLA, TRAFFIC & FUEL COSTS`,`🎯 OPTIMAL ROUTE MATCH LOCKED (99.8% EFFICIENCY)`,`🚀 INSTANT AUTO-DISPATCH EXECUTED (0.02s)`];return(0,t.jsxs)("div",{ref:e,className:"qs",children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:O}}),(0,t.jsx)("div",{className:"qs-frame",children:(0,t.jsx)(L.default,{variant:"logistics",ariaLabel:"Quantum decision engine — parallel route simulation"})}),(0,t.jsxs)("div",{className:"qs-compare",children:[(0,t.jsxs)("div",{className:"qs-col qs-col--trad",children:[(0,t.jsxs)("div",{className:"qs-col-head",children:[(0,t.jsxs)("span",{className:"qs-col-tag",children:[(0,t.jsx)("span",{className:"qs-tag-dot qs-tag-dot--muted"}),"Traditional Approach"]}),(0,t.jsx)("span",{className:"qs-col-subtag",children:"Legacy Sequential"})]}),(0,t.jsxs)("div",{className:"qs-col-steps qs-col-steps--trad",children:[(0,t.jsxs)("div",{className:"qs-step-pill qs-step-pill--trad",children:[(0,t.jsx)("span",{className:"qs-step-ic",children:I}),(0,t.jsxs)("div",{className:"qs-step-txt",children:[(0,t.jsx)("b",{children:"Single Route Calculation"}),(0,t.jsx)("span",{children:"Linear, non-simulated path"})]})]}),(0,t.jsx)("span",{className:"qs-col-arrow-v",children:"↓"}),(0,t.jsxs)("div",{className:"qs-step-pill qs-step-pill--trad",children:[(0,t.jsx)("span",{className:"qs-step-ic",children:R}),(0,t.jsxs)("div",{className:"qs-step-txt",children:[(0,t.jsx)("b",{children:"Manual Dispatch"}),(0,t.jsx)("span",{children:"Static SLA execution"})]})]})]}),(0,t.jsxs)("div",{className:"qs-col-foot",children:[(0,t.jsx)("span",{className:"qs-metric-chip",children:"1 Route Evaluated"}),(0,t.jsx)("span",{className:"qs-metric-chip qs-metric-chip--warn",children:"High Exception Risk"})]})]}),(0,t.jsxs)("div",{className:"qs-col qs-col--q",children:[(0,t.jsxs)("div",{className:"qs-col-head",children:[(0,t.jsxs)("span",{className:"qs-col-tag qs-col-tag--accent",children:[(0,t.jsx)("span",{className:"qs-tag-dot qs-tag-dot--active"}),"Quantum Engine"]}),(0,t.jsx)("span",{className:"qs-col-sys",children:d[a]})]}),(0,t.jsxs)("div",{className:"qs-col-steps qs-col-steps--accent",children:[(0,t.jsxs)("div",{className:`qs-qstep qs-step-pill qs-step-pill--q ${0===a?"qs-step-pill--active":""}`,onClick:()=>o(0),children:[(0,t.jsx)("div",{className:"qs-step-head",children:(0,t.jsx)("span",{className:"qs-step-ic qs-step-ic--accent",children:E})}),(0,t.jsxs)("div",{className:"qs-step-txt",children:[(0,t.jsxs)("b",{children:[n,"+ Parallel Simulations"]}),(0,t.jsx)("span",{children:"Instant route permutations"})]}),0===a&&(0,t.jsx)("div",{className:"qs-step-bar"})]}),(0,t.jsxs)("div",{className:`qs-qstep qs-step-pill qs-step-pill--q ${1===a?"qs-step-pill--active":""}`,onClick:()=>o(1),children:[(0,t.jsx)("div",{className:"qs-step-head",children:(0,t.jsx)("span",{className:"qs-step-ic qs-step-ic--accent",children:A})}),(0,t.jsxs)("div",{className:"qs-step-txt",children:[(0,t.jsx)("b",{children:"AI Outcome Scoring"}),(0,t.jsx)("span",{children:"Evaluates SLA, traffic & cost"})]}),1===a&&(0,t.jsx)("div",{className:"qs-step-bar"})]}),(0,t.jsxs)("div",{className:`qs-qstep qs-step-pill qs-step-pill--q ${2===a?"qs-step-pill--active":""}`,onClick:()=>o(2),children:[(0,t.jsx)("div",{className:"qs-step-head",children:(0,t.jsx)("span",{className:"qs-step-ic qs-step-ic--accent",children:T})}),(0,t.jsxs)("div",{className:"qs-step-txt",children:[(0,t.jsx)("b",{children:"Optimal Route Match"}),(0,t.jsx)("span",{children:"Highest efficiency path"})]}),2===a&&(0,t.jsx)("div",{className:"qs-step-bar"})]}),(0,t.jsxs)("div",{className:`qs-qstep qs-step-pill qs-step-pill--q qs-col-final ${3===a?"qs-step-pill--active":""}`,onClick:()=>o(3),children:[(0,t.jsxs)("div",{className:"qs-step-head",children:[(0,t.jsx)("span",{className:"qs-step-ic qs-step-ic--live",children:R}),(0,t.jsx)("span",{className:"qs-qdot","aria-hidden":"true"})]}),(0,t.jsxs)("div",{className:"qs-step-txt",children:[(0,t.jsx)("b",{children:"Instant Auto-Dispatch"}),(0,t.jsx)("span",{children:"Optimized in real time"})]}),3===a&&(0,t.jsx)("div",{className:"qs-step-bar"})]})]}),(0,t.jsxs)("div",{className:"qs-col-foot",children:[(0,t.jsxs)("span",{className:"qs-metric-chip qs-metric-chip--good",children:["✓ ",n,"+ Scenarios Checked"]}),(0,t.jsx)("span",{className:"qs-metric-chip qs-metric-chip--good",children:"✓ Zero SLA Risk"}),(0,t.jsx)("span",{className:"qs-metric-chip qs-metric-chip--good",children:"✓ Real-Time Sync"})]})]})]})]})}let O=`
|
||
.qs { position: relative; }
|
||
|
||
#sw-root #quantum h2,
|
||
#sw-root #quantum .sw-h,
|
||
#quantum h2,
|
||
#quantum .sw-h { color: #111827 !important; }
|
||
|
||
#sw-root #quantum h2 .accent,
|
||
#sw-root #quantum .sw-h .accent,
|
||
#quantum h2 .accent,
|
||
#quantum .sw-h .accent { color: #dc2626 !important; }
|
||
|
||
#sw-root #quantum p,
|
||
#sw-root #quantum .sw-lede,
|
||
#quantum p,
|
||
#quantum .sw-lede { color: #4b5563 !important; }
|
||
|
||
.qs-frame {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: auto;
|
||
min-height: min(84vh, 900px);
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
background: #0d0d11;
|
||
border: 1px solid rgba(0,0,0,0.1);
|
||
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.15);
|
||
}
|
||
.qs-frame .wf-scene {
|
||
position: absolute;
|
||
inset: clamp(16px, 3vw, 32px);
|
||
width: auto;
|
||
height: auto;
|
||
aspect-ratio: auto;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
/* ---- Redesigned Comparison Grid (White & Red Theme with Tight Bottom Padding) ---- */
|
||
.qs-compare {
|
||
position: relative;
|
||
margin-top: 24px;
|
||
margin-bottom: 0px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 2.2fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
/* Card Base */
|
||
.qs-col {
|
||
padding: 20px 22px;
|
||
border-radius: 22px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Traditional Card - Muted Off-White */
|
||
.qs-col--trad {
|
||
background: #f8f9fa;
|
||
border: 1px solid #e5e7eb;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.03);
|
||
}
|
||
|
||
/* Quantum Card - White & Soft Crimson Gradient */
|
||
.qs-col--q {
|
||
background: linear-gradient(135deg, #ffffff 0%, #fff6f6 100%);
|
||
border: 1.5px solid rgba(220,38,38,0.22);
|
||
box-shadow: 0 14px 36px -8px rgba(220,38,38,0.08), 0 2px 6px rgba(0,0,0,0.02);
|
||
}
|
||
|
||
/* Header strip */
|
||
.qs-col-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
.qs-col-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: #4b5563;
|
||
}
|
||
.qs-col-tag--accent {
|
||
color: #dc2626;
|
||
}
|
||
.qs-tag-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
.qs-tag-dot--muted {
|
||
background: #9ca3af;
|
||
}
|
||
.qs-tag-dot--active {
|
||
background: #dc2626;
|
||
box-shadow: 0 0 10px rgba(220,38,38,0.6);
|
||
animation: qsPulse 2s infinite ease-in-out;
|
||
}
|
||
@keyframes qsPulse {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.5; transform: scale(0.85); }
|
||
}
|
||
|
||
.qs-col-subtag, .qs-col-sys {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: #9ca3af;
|
||
}
|
||
.qs-col-sys {
|
||
color: #dc2626;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* Steps Pipeline Layout */
|
||
.qs-col-steps {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
width: 100%;
|
||
}
|
||
.qs-col-steps--trad {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.qs-col-steps--accent {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 10px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
/* Step Pills */
|
||
.qs-step-pill {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 14px 16px;
|
||
border-radius: 16px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
|
||
}
|
||
.qs-step-pill--trad {
|
||
background: #ffffff;
|
||
border: 1px solid #e5e7eb;
|
||
width: 100%;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
cursor: default;
|
||
}
|
||
.qs-step-pill--q {
|
||
background: #ffffff;
|
||
border: 1.5px solid #f3f4f6;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
|
||
height: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
.qs-step-pill--q:hover {
|
||
border-color: rgba(220,38,38,0.3);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 20px rgba(220,38,38,0.08);
|
||
}
|
||
.qs-step-pill--active {
|
||
border-color: #dc2626 !important;
|
||
background: #ffffff !important;
|
||
box-shadow: 0 8px 24px rgba(220,38,38,0.18) !important;
|
||
transform: translateY(-3px) !important;
|
||
}
|
||
.qs-col-final {
|
||
background: rgba(220,38,38,0.04) !important;
|
||
border-color: rgba(220,38,38,0.3) !important;
|
||
}
|
||
|
||
/* Animated active step progress bar */
|
||
.qs-step-bar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 3px;
|
||
background: #dc2626;
|
||
width: 100%;
|
||
animation: qsBar 2.4s linear infinite;
|
||
}
|
||
@keyframes qsBar {
|
||
0% { width: 0%; }
|
||
100% { width: 100%; }
|
||
}
|
||
|
||
.qs-step-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
.qs-step-num {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.qs-step-ic {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 10px;
|
||
background: #f3f4f6;
|
||
color: #4b5563;
|
||
flex-shrink: 0;
|
||
}
|
||
.qs-step-ic--accent {
|
||
background: #fef2f2;
|
||
color: #dc2626;
|
||
}
|
||
.qs-step-ic--live {
|
||
background: #dc2626;
|
||
color: #ffffff;
|
||
box-shadow: 0 4px 12px rgba(220,38,38,0.4);
|
||
}
|
||
|
||
.qs-step-txt {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
text-align: left;
|
||
}
|
||
.qs-step-txt b {
|
||
color: #111827;
|
||
font-size: 12.5px;
|
||
font-weight: 700;
|
||
line-height: 1.25;
|
||
}
|
||
.qs-step-txt span {
|
||
color: #6b7280;
|
||
font-size: 11px;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.qs-col-arrow-v {
|
||
color: #d1d5db;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Radar pulse dot on final step */
|
||
.qs-qdot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: #dc2626;
|
||
box-shadow: 0 0 10px rgba(220,38,38,0.8);
|
||
}
|
||
|
||
/* Footer chips */
|
||
.qs-col-foot {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.qs-metric-chip {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 5px 12px;
|
||
border-radius: 999px;
|
||
background: #ffffff;
|
||
border: 1px solid #e5e7eb;
|
||
color: #4b5563;
|
||
}
|
||
.qs-metric-chip--warn {
|
||
background: #fffbe6;
|
||
border-color: #fef08a;
|
||
color: #b45309;
|
||
}
|
||
.qs-metric-chip--good {
|
||
background: #ecfdf5;
|
||
border-color: #a7f3d0;
|
||
color: #047857;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.qs-compare {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.qs-col-steps--accent {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
@media (max-width: 640px) {
|
||
.qs-col-steps--accent {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.qs-frame { min-height: 52vh; border-radius: 20px; }
|
||
}
|
||
`,F=(0,e.i(70703).default)(()=>e.A(43809),{loadableGenerated:{modules:[52893]},ssr:!1});function P({ariaLabel:e}){let i=(0,s.useRef)(null),[r,a]=(0,s.useState)(!1),[o,n]=(0,s.useState)(!1),[l,d]=(0,s.useState)(!1),[c,p]=(0,s.useState)(!1);return(0,s.useEffect)(()=>{let e=window.matchMedia("(max-width: 767px)"),t=window.matchMedia("(prefers-reduced-motion: reduce)"),s=()=>{d(e.matches),p(t.matches)};return s(),e.addEventListener("change",s),t.addEventListener("change",s),()=>{e.removeEventListener("change",s),t.removeEventListener("change",s)}},[]),(0,s.useEffect)(()=>{let e=i.current;if(!e)return;let t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(a(!0),n(!0),t.disconnect())},{rootMargin:"50% 0px"});return t.observe(e),()=>t.disconnect()},[]),(0,t.jsxs)("div",{ref:i,className:"mtn-scene",role:"img","aria-label":e??"MileTruth AI network",children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
|
||
.mtn-scene { position: relative; width: 100%; height: 100%; min-height: 360px; }
|
||
.mtn-scene canvas { display: block; width: 100% !important; height: 100% !important; }
|
||
|
||
/* Station labels. Rendered as DOM by drei <Html> inside the canvas
|
||
wrapper, so the text stays crisp at any DPR and can use the
|
||
site's own type scale. */
|
||
.mtn-lbl { display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; text-align: center; user-select: none; pointer-events: none; }
|
||
.mtn-lbl-n { font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; color: #E2354A; line-height: 1; }
|
||
.mtn-lbl-name { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.2; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
|
||
.mtn-lbl-fig { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.6); line-height: 1.2; }
|
||
|
||
/* Sample-data marker — these figures are illustrative, not audited. */
|
||
.mtn-tag { position: absolute; right: 12px; bottom: 12px; z-index: 13; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(12,12,16,0.72); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; pointer-events: none; }
|
||
.mtn-tag i { width: 4px; height: 4px; border-radius: 50%; background: #E2354A; display: block; }
|
||
|
||
@media (max-width: 767px) {
|
||
.mtn-scene { min-height: 300px; }
|
||
.mtn-lbl-name { font-size: 11px; }
|
||
.mtn-tag { right: 8px; bottom: 8px; font-size: 9px; padding: 4px 8px; }
|
||
}
|
||
`}}),r&&(0,t.jsx)(F,{reduced:c,isMobile:l,active:o}),r&&(0,t.jsxs)("span",{className:"mtn-tag","aria-hidden":"true",children:[(0,t.jsx)("i",{}),"Illustrative — sample insight cycle"]})]})}var B=e.i(22016),_=e.i(57688);let V=[{title:"Real-Time Visibility",text:"See every shipment, every vehicle, every handoff—live. No blind spots."},{title:"Dynamic Route Adjustment",text:"AI continuously optimizes routes based on traffic, weather, and real-world conditions."},{title:"Proactive Delay Prevention",text:"Detect SLA risks hours before they become problems. Act, don't react."},{title:"Execution Intelligence",text:"Learn from every shipment. Get smarter with every mile traveled."}];function $({id:e="vehicle-ai",eyebrow:i="/ Connected Logistics /",title:r="Smart logistics solutions we deliver for modern supply chains",imageSrc:a="/images/ev solution 4.png",imageAlt:o="Connected Logistics",items:n=V,showButton:l=!1}){let d=(0,s.useRef)(null),c=(0,j.useInView)(d,{once:!0,margin:"-50px"});return(0,t.jsx)("div",{ref:d,className:"elementor elementor-61","data-elementor-type":"wp-page","data-elementor-id":"61",id:e,style:{width:"100%",scrollMarginTop:"100px"},children:(0,t.jsxs)("div",{className:"elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent","data-id":"89a0ca1","data-element_type":"container","data-e-type":"container",children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
|
||
/* Ensure the inner content wrapper is responsive and never overflows */
|
||
.elementor-element-fdb2e58 {
|
||
width: 100% !important;
|
||
max-width: 650px !important;
|
||
}
|
||
|
||
/* Make heading font size fluid and responsive */
|
||
.elementor-element-7500280 .logico-title {
|
||
font-size: clamp(26px, 3.5vw, 54px) !important;
|
||
line-height: 1.25em !important;
|
||
word-wrap: break-word !important;
|
||
overflow-wrap: break-word !important;
|
||
}
|
||
|
||
/* Fix text colors for the dark background */
|
||
.elementor-element-71c3e1d .logico-title {
|
||
color: #ffffff !important;
|
||
}
|
||
.elementor-element-71c3e1d p {
|
||
color: rgba(255, 255, 255, 0.85) !important;
|
||
}
|
||
|
||
/* Make sure paragraphs are responsive on all screen widths */
|
||
.elementor-element-165dfa5 {
|
||
width: 100% !important;
|
||
max-width: min(619px, 100%) !important;
|
||
}
|
||
.elementor-element-3888a1e {
|
||
width: 100% !important;
|
||
max-width: min(526px, 100%) !important;
|
||
}
|
||
|
||
/* Sizing and identical padding on all 4 sides for Connected Logistics Image container */
|
||
.elementor-element-99768ba .elementor-widget-container {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
padding: 40px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
.elementor-element-99768ba img.wp-image-4481 {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
height: auto !important;
|
||
object-fit: cover !important;
|
||
border-radius: 25px !important;
|
||
margin: 0 auto !important;
|
||
display: block !important;
|
||
}
|
||
|
||
/* ── Left image: fill the row instead of floating centred in it ──
|
||
The two columns are 50/50 and the row is align-items:center. The
|
||
image is width:100%/height:auto, so its height is fixed by the
|
||
file's aspect ratio (ev solution 4.png is 1426x1103 landscape,
|
||
1.29:1) — at a 1440px viewport that is a 555x429 box inside a
|
||
705px-tall row. The 276px left over was split evenly by
|
||
align-items:center, giving ~98px of dead space above AND below,
|
||
on top of the widget-container's intentional 40px inset — 163px
|
||
of gap at each end, and it grows as the viewport narrows (190px
|
||
at 1280px) because the image shrinks with the column while the
|
||
text column's height stays put.
|
||
|
||
Stretching the image column to the row height and letting the
|
||
image fill it (object-fit:cover, already the declared value) makes
|
||
the picture 625px instead of 429px, so it now tracks the 705px
|
||
text column and the dead space collapses to the intended 40px
|
||
inset. cover scales without distorting; because the source is
|
||
landscape in a now-portrait slot it crops horizontally rather
|
||
than letter-boxing.
|
||
|
||
Everything here is scoped to #${e} because ConnectedLogistics.tsx
|
||
(Home) reuses these exact Elementor class names with no wrapping
|
||
id — unscoped rules would move Home's section too. Desktop only;
|
||
the stacked <=1024px layout is untouched. */
|
||
@media (min-width: 1025px) {
|
||
#${e} .elementor-element-9ffed33 {
|
||
align-items: stretch !important;
|
||
}
|
||
|
||
#${e} .elementor-element-96343ba > div,
|
||
#${e} .elementor-element-99768ba,
|
||
#${e} .elementor-element-99768ba .elementor-widget-container {
|
||
height: 100% !important;
|
||
}
|
||
|
||
#${e} .elementor-element-99768ba img.wp-image-4481 {
|
||
height: 100% !important;
|
||
object-fit: cover !important;
|
||
object-position: center !important;
|
||
}
|
||
}
|
||
|
||
/* Desktop/Laptop (min-width: 1025px) column width and flex rules */
|
||
@media (min-width: 1025px) {
|
||
.elementor-element-9ffed33 {
|
||
display: flex !important;
|
||
flex-direction: row !important;
|
||
flex-wrap: nowrap !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
.elementor-element-96343ba,
|
||
.elementor-element-71c3e1d {
|
||
width: 50% !important;
|
||
max-width: 50% !important;
|
||
flex: 1 1 50% !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.elementor-element-9ffed33 {
|
||
flex-direction: column !important;
|
||
align-items: stretch !important;
|
||
}
|
||
|
||
.elementor-element-96343ba,
|
||
.elementor-element-71c3e1d {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
padding-left: 0 !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
.elementor-element-96343ba > div {
|
||
width: 100% !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
.elementor-element-96343ba {
|
||
margin-top: 0px !important;
|
||
}
|
||
|
||
.elementor-element-71c3e1d {
|
||
padding-bottom: 24px !important;
|
||
}
|
||
|
||
.elementor-element-165dfa5,
|
||
.elementor-element-3888a1e {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.elementor-element-99768ba {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.elementor-element-99768ba .elementor-widget-container {
|
||
padding: 10px !important;
|
||
display: block !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
|
||
width: 100% !important;
|
||
max-width: 600px !important;
|
||
border-radius: 25px !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.elementor-element-99768ba {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.elementor-element-71c3e1d {
|
||
padding-bottom: 12px !important;
|
||
}
|
||
|
||
.elementor-element-99768ba .elementor-widget-container {
|
||
padding: 0px !important;
|
||
display: block !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
|
||
width: 100% !important;
|
||
max-width: 100% !important;
|
||
height: auto !important;
|
||
object-fit: cover !important;
|
||
border-radius: 25px !important;
|
||
}
|
||
}
|
||
`}}),(0,t.jsxs)("div",{className:"elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child","data-id":"9ffed33","data-element_type":"container","data-e-type":"container","data-settings":'{"background_background":"classic"}',children:[(0,t.jsx)("div",{className:"elementor-element elementor-element-96343ba e-con-full e-flex cut-corner-no sticky-container-off e-con e-child","data-id":"96343ba","data-element_type":"container",children:(0,t.jsx)(z.ScrollReveal,{delay:.1,duration:.9,yOffset:30,className:"w-full h-full",children:(0,t.jsx)("div",{className:"elementor-element elementor-element-99768ba elementor-widget elementor-widget-image","data-id":"99768ba","data-element_type":"widget","data-e-type":"widget","data-widget_type":"image.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsx)(_.default,{fetchPriority:"high",priority:!0,width:578,height:790,src:a,className:"attachment-full size-full wp-image-4481",alt:o,style:{width:"100%",height:"auto",objectFit:"cover",borderRadius:"25px"}})})})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-71c3e1d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child","data-id":"71c3e1d","data-element_type":"container","data-e-type":"container",children:(0,t.jsxs)("div",{className:"elementor-element elementor-element-fdb2e58 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child","data-id":"fdb2e58","data-element_type":"container","data-e-type":"container",children:[(0,t.jsx)(z.ScrollReveal,{delay:.1,duration:.8,yOffset:20,children:(0,t.jsx)("div",{className:"elementor-element elementor-element-0136e6e elementor-widget elementor-widget-logico_heading","data-id":"0136e6e","data-element_type":"widget","data-e-type":"widget","data-widget_type":"logico_heading.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsx)("div",{className:"logico-title",children:i})})})}),(0,t.jsx)(z.ScrollReveal,{delay:.2,duration:.85,yOffset:25,children:(0,t.jsx)("div",{className:"elementor-element elementor-element-7500280 elementor-widget elementor-widget-logico_heading","data-id":"7500280","data-element_type":"widget","data-e-type":"widget","data-widget_type":"logico_heading.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsx)("h2",{className:"logico-title",children:r})})})}),n.map((e,s)=>(0,t.jsxs)(z.ScrollReveal,{delay:.25+.1*s,duration:.8,yOffset:25,children:[(0,t.jsx)("div",{className:"elementor-element elementor-element-4cc07a7 elementor-widget elementor-widget-logico_heading","data-id":"4cc07a7","data-element_type":"widget","data-e-type":"widget","data-widget_type":"logico_heading.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsx)("div",{className:"logico-title",children:e.title})})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-165dfa5 elementor-widget__width-initial elementor-widget elementor-widget-text-editor","data-id":"165dfa5","data-element_type":"widget","data-e-type":"widget","data-widget_type":"text-editor.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsx)("p",{children:e.text})})})]},s)),l&&(0,t.jsx)(z.ScrollReveal,{delay:.65,duration:.8,yOffset:20,children:(0,t.jsx)("div",{className:"elementor-element elementor-element-c0a45e4 elementor-widget elementor-widget-logico_button","data-id":"c0a45e4","data-element_type":"widget","data-e-type":"widget","data-widget_type":"logico_button.default",children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsx)("div",{className:"button-widget",children:(0,t.jsx)("div",{className:"button-container",children:(0,t.jsx)(z.Magnetic,{children:(0,t.jsx)(B.default,{href:"/solutions",className:"logico-alter-button",children:"Explore more"})})})})})})})]})}),(0,t.jsx)("div",{className:"elementor-element elementor-element-0efc59e elementor-absolute elementor-widget elementor-widget-logico_block_decoration","data-id":"0efc59e","data-element_type":"widget","data-settings":'{"_position":"absolute"}',"data-widget_type":"logico_block_decoration.default",style:{position:"absolute"},children:(0,t.jsx)("div",{className:"elementor-widget-container",children:(0,t.jsx)("div",{className:`block-decoration animation-enable block-decoration-style-1 ${c?"animated":""}`,children:(0,t.jsx)("div",{className:"block-decoration-item"})})})})]})]})})}function H({children:e}){return(0,t.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:e})}i.default.registerPlugin(r.ScrollTrigger);let W=(0,t.jsxs)(H,{children:[(0,t.jsx)("path",{d:"M6 8h12l-1 12.5a1.5 1.5 0 01-1.5 1.5H8.5A1.5 1.5 0 017 20.5L6 8z"}),(0,t.jsx)("path",{d:"M9 8V6a3 3 0 016 0v2"})]}),G=(0,t.jsxs)(H,{children:[(0,t.jsx)("circle",{cx:"12",cy:"7",r:"3"}),(0,t.jsx)("path",{d:"M5 21c0-4 3-6.5 7-6.5s7 2.5 7 6.5"})]}),Y=(0,t.jsx)(H,{children:(0,t.jsx)("path",{d:"M3 17l5-10 4 6 4-8 5 12"})}),U=(0,t.jsxs)(H,{children:[(0,t.jsx)("path",{d:"M12 2a6 6 0 00-6 6c0 4.5 6 12 6 12s6-7.5 6-12a6 6 0 00-6-6z"}),(0,t.jsx)("circle",{cx:"12",cy:"8",r:"2"})]}),Q=(0,t.jsxs)(H,{children:[(0,t.jsx)("rect",{x:"4",y:"8",width:"16",height:"12",rx:"1.5"}),(0,t.jsx)("path",{d:"M4 8l8-4 8 4"}),(0,t.jsx)("path",{d:"M9 14l2 2 4-4"})]}),X=(0,t.jsxs)(H,{children:[(0,t.jsx)("rect",{x:"4",y:"8",width:"16",height:"12",rx:"1.5"}),(0,t.jsx)("path",{d:"M4 8l8-4 8 4"})]}),Z=(0,t.jsxs)(H,{children:[(0,t.jsx)("path",{d:"M12 2l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V5l7-3z"}),(0,t.jsx)("path",{d:"M9.3 12l2 2 3.6-4.2"})]}),J=(0,t.jsxs)(H,{children:[(0,t.jsx)("rect",{x:"1",y:"7",width:"13",height:"10",rx:"1"}),(0,t.jsx)("path",{d:"M14 11h4l3 3v3h-3"}),(0,t.jsx)("circle",{cx:"5",cy:"19",r:"2"}),(0,t.jsx)("circle",{cx:"17",cy:"19",r:"2"})]}),K=(0,t.jsxs)(H,{children:[(0,t.jsx)("path",{d:"M12 3l8 4-8 4-8-4 8-4z"}),(0,t.jsx)("path",{d:"M4 13l8 4 8-4"})]}),ee=(0,t.jsxs)(H,{children:[(0,t.jsx)("ellipse",{cx:"12",cy:"5",rx:"8",ry:"3"}),(0,t.jsx)("path",{d:"M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5"}),(0,t.jsx)("path",{d:"M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"})]}),et=(0,t.jsxs)(H,{children:[(0,t.jsx)("rect",{x:"7",y:"7",width:"10",height:"10",rx:"1.5"}),(0,t.jsx)("path",{d:"M7 3v3M12 3v3M17 3v3M7 18v3M12 18v3M17 18v3M3 7h3M3 12h3M3 17h3M18 7h3M18 12h3M18 17h3"})]}),es=(0,t.jsxs)(H,{children:[(0,t.jsx)("path",{d:"M9 18h6"}),(0,t.jsx)("path",{d:"M10 21h4"}),(0,t.jsx)("path",{d:"M12 3a6 6 0 00-3 11.2c.6.4 1 1.1 1 1.8h4c0-.7.4-1.4 1-1.8A6 6 0 0012 3z"})]}),ei=(0,t.jsxs)(H,{children:[(0,t.jsx)("path",{d:"M3 17l6-6 4 4 8-8"}),(0,t.jsx)("path",{d:"M15 7h6v6"})]}),er=(0,t.jsxs)(H,{children:[(0,t.jsx)("path",{d:"M3 7l6 6 4-4 8 8"}),(0,t.jsx)("path",{d:"M15 17h6v-6"})]}),ea=(0,t.jsxs)(H,{children:[(0,t.jsx)("path",{d:"M12 3l9 16H3L12 3z"}),(0,t.jsx)("path",{d:"M12 9v5M12 17h.01"})]}),eo=(0,t.jsxs)(H,{children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"8.5"}),(0,t.jsx)("circle",{cx:"12",cy:"12",r:"4.5"}),(0,t.jsx)("circle",{cx:"12",cy:"12",r:"1",fill:"currentColor"})]}),en=(0,t.jsxs)(H,{children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"8.5"}),(0,t.jsx)("path",{d:"M12 7v5l3.2 2"})]}),el=(0,t.jsx)(H,{children:(0,t.jsx)("path",{d:"M13 2 4 14h6l-1 8 9-12h-6l1-8z"})}),ed=(0,t.jsxs)(H,{children:[(0,t.jsx)("circle",{cx:"12",cy:"12",r:"8.5"}),(0,t.jsx)("path",{d:"M3.5 12h17M12 3.5c2.6 2.4 2.6 14.6 0 17M12 3.5c-2.6 2.4-2.6 14.6 0 17"})]}),ec=(0,t.jsx)(H,{children:(0,t.jsx)("path",{d:"M4 12l6 6L20 6"})}),ep=(0,t.jsx)(H,{children:(0,t.jsx)("path",{d:"M6 6l12 12M18 6L6 18"})});function eh({variant:e}){return(0,t.jsx)("div",{className:`sw-bg sw-bg--${e}`,"aria-hidden":"true"})}function ew({id:e,bg:s,className:i="",children:r}){return(0,t.jsxs)("section",{id:e,className:`sw-sec sw-sec--${s}${i?` ${i}`:""}`,children:[(0,t.jsx)(eh,{variant:s}),(0,t.jsx)("div",{className:"sw-in",children:r})]})}function em({children:e,className:a="",style:o,tag:n="div",delay:l=0}){let d=(0,s.useRef)(null);(0,s.useEffect)(()=>{let e=d.current;if(!e||window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;let t=e.querySelectorAll(".gsap-word-inner");if(!t.length)return;i.default.set(t,{y:"115%",opacity:0});let s=r.ScrollTrigger.create({trigger:e,start:"top 88%",once:!0,onEnter:()=>{i.default.to(t,{y:"0%",opacity:1,duration:.75,stagger:.035,ease:"power3.out",delay:l})}});return()=>s.kill()},[e,l]);let c=(e,i="w")=>{if("string"==typeof e)return e.split(" ").map((e,s)=>e?(0,t.jsx)("span",{className:"gsap-word-outer",style:{display:"inline-block",overflow:"hidden",verticalAlign:"bottom",paddingBottom:"0.08em",marginBottom:"-0.08em",marginRight:"0.28em"},children:(0,t.jsx)("span",{className:"gsap-word-inner",style:{display:"inline-block"},children:e})},`${i}-${s}`):null);if(s.default.isValidElement(e)){let t=s.default.Children.map(e.props.children,(e,t)=>c(e,`${i}-${t}`));return s.default.cloneElement(e,{...e.props,children:t})}return Array.isArray(e)?e.map((e,t)=>c(e,`${i}-${t}`)):e};return(0,t.jsx)(n,{ref:d,className:a,style:o,children:c(e)})}function ex({n:e,eyebrow:s="Solutions",title:i,lede:r,className:o="",darkText:n=!1}){let l=o.includes("sw-head--center"),d=s.replace(/^\/|\/$/g,"").trim();return(0,t.jsxs)("div",{className:`sw-head ${o}`,children:[(0,t.jsx)(z.ScrollReveal,{yOffset:16,triggerOnce:!0,children:(0,t.jsxs)("span",{className:"sw-eyebrow sw-eyebrow--slash",children:["/ ",d," /"]})}),(0,t.jsx)(a.motion.h2,{className:"sw-h",style:n?{color:"#111827"}:void 0,initial:{opacity:0,y:22,filter:"blur(10px)"},whileInView:{opacity:1,y:0,filter:"blur(0px)"},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.65,delay:.08,ease:[.16,1,.3,1]},children:i}),(0,t.jsx)(em,{tag:"p",className:"sw-lede",style:{...n?{color:"#4b5563"}:{},...l?{marginLeft:"auto",marginRight:"auto",textAlign:"center"}:{}},children:r})]})}function eg({className:e="",children:s}){let i=(0,S.useReducedMotion)(),r=(0,k.useMotionValue)(0),o=(0,k.useMotionValue)(0),n=(0,M.useSpring)((0,N.useTransform)(o,[-40,40],[7,-7]),{stiffness:240,damping:22}),l=(0,M.useSpring)((0,N.useTransform)(r,[-40,40],[-7,7]),{stiffness:240,damping:22});return(0,t.jsx)(a.motion.div,{className:`sw-tilt ${e}`,style:i?void 0:{rotateX:n,rotateY:l,transformPerspective:900},onMouseMove:e=>{if(i)return;let t=e.currentTarget.getBoundingClientRect();r.set(e.clientX-t.left-t.width/2),o.set(e.clientY-t.top-t.height/2)},onMouseLeave:()=>{r.set(0),o.set(0)},whileHover:{y:-4},transition:{type:"spring",stiffness:260,damping:22},children:s})}function ef({to:e,decimals:i=0,suffix:r=""}){let a=(0,s.useRef)(null),o=(0,j.useInView)(a,{once:!0,margin:"-10% 0px"}),n=(0,k.useMotionValue)(0),[l,d]=(0,s.useState)(0..toFixed(i)+r);return(0,s.useEffect)(()=>n.on("change",e=>d(e.toFixed(i)+r)),[n,i,r]),(0,s.useEffect)(()=>{if(o)return(0,q.animate)(n,e,{duration:1.5,ease:[.16,1,.3,1]}).stop},[o,e,n]),(0,t.jsx)("span",{ref:a,children:l})}function eu(){let e=[{icon:G,label:"Fleet Driver",note:"Nearest available operator"},{icon:J,label:"Vehicle",note:"Bike, EV, van or truck"},{icon:Y,label:"Route",note:"Optimized for time & cost"}],a=["Reads the order","Picks the fleet driver & vehicle","Plans the best route"],o=(0,s.useRef)(null),n=(0,s.useRef)(null),l=(0,s.useRef)(null),d=(0,s.useRef)(null),c=(0,s.useRef)(null),p=(0,s.useRef)([]),h=(0,s.useRef)([]),w=(0,s.useRef)([]),m=(0,s.useRef)([]),x=(0,s.useRef)([]),g=(0,s.useRef)(null),f=(0,s.useRef)(null),u=(0,s.useRef)(null),b=(0,s.useRef)(null);return(0,s.useEffect)(()=>{let e=o.current,t=n.current,s=l.current,a=d.current,v=c.current,y=p.current.filter(Boolean),j=h.current.filter(Boolean),k=w.current.filter(Boolean),N=m.current.filter(Boolean),M=x.current.filter(Boolean),q=g.current,S=f.current,z=u.current,L=b.current;if(!e||!t||!s||!a||!v||0===N.length||!q||!S||!z||!L)return;let C=["READING…","CHOOSING…","PLANNING…"],I=N.map(e=>e.getTotalLength());if(i.default.set(N,{strokeDasharray:e=>I[e],strokeDashoffset:e=>I[e]}),i.default.set(t,{opacity:0,y:-14,scale:.9}),i.default.set([s,q,z],{"--fill":0}),i.default.set(y,{opacity:1}),i.default.set(j,{opacity:0,scale:.4}),i.default.set(k,{opacity:.4}),i.default.set(M,{opacity:.28,y:10,scale:.94}),i.default.set(S,{opacity:.28,y:10,scale:.94}),i.default.set(L,{opacity:0,scale:.7}),window.matchMedia?.("(prefers-reduced-motion: reduce)").matches){i.default.set(t,{opacity:1,y:0,scale:1}),i.default.set([s,q,z],{"--fill":1}),i.default.set(N,{strokeDashoffset:0}),i.default.set(y,{opacity:0}),i.default.set(j,{opacity:1,scale:1}),i.default.set(k,{opacity:1}),i.default.set(M,{opacity:1,y:0,scale:1}),i.default.set(S,{opacity:1,y:0,scale:1}),i.default.set(L,{opacity:1,scale:1});return}let E=r.ScrollTrigger.create({trigger:e,start:"top 75%",once:!0,onEnter:()=>{let e=i.default.timeline();e.to(t,{opacity:1,y:0,scale:1,duration:.45,ease:"back.out(2)"},0).to(s,{"--fill":1,duration:.5,ease:"power2.in"},.5).add(()=>a.classList.add("is-active"),1.05),k.forEach((t,s)=>{let i=1.2+.4*s;e.call(()=>{v.textContent=C[s]??C[C.length-1]},[],i).to(t,{opacity:1,duration:.2},i).to(y[s],{opacity:0,scale:.4,duration:.18},i+.16).to(j[s],{opacity:1,scale:1,duration:.3,ease:"back.out(3)"},i+.16)});let r=1.2+.4*k.length+.3;e.call(()=>{v.textContent="DECIDED"},[],r-.15).call(()=>{v.textContent="Doormile AI"},[],r+.5).add(()=>a.classList.remove("is-active"),r).to(N,{strokeDashoffset:0,duration:.5,stagger:.14,ease:"power2.out"},r+.1).to(M,{opacity:1,y:0,scale:1,duration:.4,stagger:.14,ease:"back.out(2.2)"},r+.1).to(q,{"--fill":1,duration:.4,ease:"power2.inOut"},r+.75).to(S,{opacity:1,y:0,scale:1,duration:.4,ease:"back.out(2.2)"},r+.95).to(z,{"--fill":1,duration:.35,ease:"power2.inOut"},r+1.4).to(L,{opacity:1,scale:1,duration:.4,ease:"back.out(2.4)"},r+1.65)}});return()=>E.kill()},[e.length,a.length]),(0,t.jsxs)(ew,{id:"platform",bg:"engine",children:[(0,t.jsx)(ex,{n:"01",eyebrow:"Order Processing",title:(0,t.jsxs)(t.Fragment,{children:["What happens after a customer ",(0,t.jsx)("span",{className:"accent",children:"places an order"})]}),lede:"One AI engine reads every order, decides the fleet driver, the vehicle and the route, then stays with the shipment until it's signed for."}),(0,t.jsxs)("div",{className:"sw-eng",ref:o,children:[(0,t.jsxs)("div",{className:"sw-eng-order",ref:n,children:[(0,t.jsx)("span",{className:"sw-eng-order-ic",children:W}),(0,t.jsx)("span",{className:"sw-eng-order-label",children:"Customer Places Order"}),(0,t.jsx)("span",{className:"sw-eng-order-note",children:"Any channel, one order"})]}),(0,t.jsx)("span",{className:"sw-eng-connector",ref:l,children:(0,t.jsx)("span",{className:"sw-eng-connector-fill"})}),(0,t.jsxs)("div",{className:"sw-eng-engine-row",ref:d,children:[(0,t.jsx)("div",{className:"sw-eng-core",children:(0,t.jsxs)("div",{className:"sw-eng-core-inner",children:[(0,t.jsx)("img",{src:"/images/doormile-mark.png",alt:"",className:"sw-eng-core-logo",loading:"lazy",decoding:"async"}),(0,t.jsx)("span",{className:"sw-eng-core-tag",ref:c,children:"Doormile AI"})]})}),(0,t.jsxs)("div",{className:"sw-eng-readout",children:[(0,t.jsx)("span",{className:"sw-eng-readout-title",children:"Doormile AI Logistics Engine"}),a.map((e,s)=>(0,t.jsxs)("div",{className:"sw-eng-readout-row",ref:e=>{w.current[s]=e},children:[(0,t.jsxs)("span",{className:"sw-eng-readout-indicator",children:[(0,t.jsx)("span",{className:"sw-eng-readout-dot",ref:e=>{p.current[s]=e}}),(0,t.jsx)("span",{className:"sw-eng-readout-check",ref:e=>{h.current[s]=e},children:ec})]}),(0,t.jsx)("span",{className:"sw-eng-readout-label",children:e})]},e))]})]}),(0,t.jsxs)("svg",{className:"sw-eng-fan",viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true",children:[(0,t.jsx)("path",{ref:e=>{m.current[0]=e},d:"M 50 0 Q 28 55 15 100",className:"sw-eng-line--out"}),(0,t.jsx)("path",{ref:e=>{m.current[1]=e},d:"M 50 0 L 50 100",className:"sw-eng-line--out"}),(0,t.jsx)("path",{ref:e=>{m.current[2]=e},d:"M 50 0 Q 72 55 85 100",className:"sw-eng-line--out"})]}),(0,t.jsx)("div",{className:"sw-eng-outputs",children:e.map((e,s)=>(0,t.jsxs)("div",{className:"sw-eng-out",ref:e=>{x.current[s]=e},children:[(0,t.jsx)("span",{className:"sw-eng-out-ic",children:e.icon}),(0,t.jsx)("span",{className:"sw-eng-out-label",children:e.label}),(0,t.jsx)("span",{className:"sw-eng-out-note",children:e.note})]},e.label))}),(0,t.jsx)("span",{className:"sw-eng-connector",ref:g,children:(0,t.jsx)("span",{className:"sw-eng-connector-fill"})}),(0,t.jsxs)("div",{className:"sw-eng-tracking",ref:f,children:[(0,t.jsx)("span",{className:"sw-eng-out-ic",children:U}),(0,t.jsx)("span",{className:"sw-eng-out-label",children:"Live Tracking"}),(0,t.jsx)("span",{className:"sw-eng-out-note",children:"Visible to everyone, live"})]}),(0,t.jsx)("span",{className:"sw-eng-connector",ref:u,children:(0,t.jsx)("span",{className:"sw-eng-connector-fill"})}),(0,t.jsxs)("div",{className:"sw-eng-delivered",ref:b,children:[(0,t.jsx)("span",{className:"sw-eng-delivered-ic",children:Q}),(0,t.jsx)("span",{children:"Delivered"}),(0,t.jsx)("em",{children:"Confirmed at the door"})]})]})]})}function eb({kind:e}){return"request"===e?(0,t.jsxs)("svg",{viewBox:"0 0 32 32",children:[(0,t.jsx)("rect",{x:"5",y:"12",width:"22",height:"15",rx:"2",fill:"#C01227"}),(0,t.jsx)("path",{d:"M5 12l11-6 11 6",fill:"none",stroke:"#fff",strokeWidth:"1.6",strokeLinejoin:"round"}),(0,t.jsx)("rect",{x:"14",y:"12",width:"4",height:"15",fill:"rgba(255,255,255,0.5)"})]}):"driver"===e?(0,t.jsxs)("svg",{viewBox:"0 0 32 32",children:[(0,t.jsx)("path",{d:"M16 4a8 8 0 00-8 8c0 6 8 16 8 16s8-10 8-16a8 8 0 00-8-8z",fill:"#C01227"}),(0,t.jsx)("circle",{cx:"16",cy:"12",r:"3.4",fill:"#fff"})]}):"arrival"===e?(0,t.jsxs)("svg",{viewBox:"0 0 32 32",children:[(0,t.jsx)("path",{d:"M5 15l11-9 11 9",fill:"none",stroke:"#C01227",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),(0,t.jsx)("rect",{x:"8",y:"14",width:"16",height:"13",rx:"1.5",fill:"#1c1c1c",stroke:"rgba(255,255,255,0.2)"}),(0,t.jsx)("rect",{x:"14",y:"19",width:"4",height:"8",fill:"#C01227"})]}):"otp"===e?(0,t.jsxs)("svg",{viewBox:"0 0 32 32",children:[(0,t.jsx)("rect",{x:"9",y:"4",width:"14",height:"24",rx:"3",fill:"#1c1c1c",stroke:"rgba(255,255,255,0.25)"}),(0,t.jsx)("circle",{cx:"12.5",cy:"16",r:"1.4",fill:"#E2354A"}),(0,t.jsx)("circle",{cx:"16",cy:"16",r:"1.4",fill:"#E2354A"}),(0,t.jsx)("circle",{cx:"19.5",cy:"16",r:"1.4",fill:"#E2354A"})]}):(0,t.jsxs)("svg",{viewBox:"0 0 32 32",children:[(0,t.jsx)("rect",{x:"5",y:"12",width:"22",height:"15",rx:"2",fill:"#3a3a3a"}),(0,t.jsx)("path",{d:"M5 12l11-6 11 6",fill:"none",stroke:"rgba(255,255,255,0.3)",strokeWidth:"1.6"}),(0,t.jsx)("circle",{cx:"24",cy:"10",r:"7",fill:"#C01227"}),(0,t.jsx)("path",{d:"M21 10l2 2 4-4",stroke:"#fff",strokeWidth:"1.8",fill:"none",strokeLinecap:"round",strokeLinejoin:"round"})]})}function ev({cx:e,front:s}){return(0,t.jsxs)("g",{className:`sw-van-wheel${s?" sw-van-wheel--front":""}`,style:{transformBox:"fill-box",transformOrigin:"center"},children:[(0,t.jsx)("circle",{cx:e,cy:"50",r:"12",fill:"#0a0a0a"}),(0,t.jsx)("circle",{cx:e,cy:"50",r:"12",fill:"none",stroke:"url(#swVanRim)",strokeWidth:"2"}),(0,t.jsx)("circle",{cx:e,cy:"50",r:"7.4",fill:"#1b1b1e",stroke:"rgba(255,255,255,0.28)",strokeWidth:"0.8"}),[{dx:6.6,dy:0},{dx:2.04,dy:6.28},{dx:-5.34,dy:3.88},{dx:-5.34,dy:-3.88},{dx:2.04,dy:-6.28}].map(({dx:s,dy:i})=>(0,t.jsx)("line",{x1:e,y1:"50",x2:e+s,y2:50+i,stroke:"rgba(220,222,228,0.85)",strokeWidth:"1.6",strokeLinecap:"round"},`${s}-${i}`)),(0,t.jsx)("circle",{cx:e,cy:"50",r:"2.1",fill:"#4a4a50"})]})}function ey(){return(0,t.jsxs)("defs",{children:[(0,t.jsxs)("linearGradient",{id:"swVanBody",x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"#ff5166"}),(0,t.jsx)("stop",{offset:"0.45",stopColor:"#d81b32"}),(0,t.jsx)("stop",{offset:"1",stopColor:"#8c0f1f"})]}),(0,t.jsxs)("linearGradient",{id:"swVanCab",x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"#f6f6f8"}),(0,t.jsx)("stop",{offset:"0.55",stopColor:"#dcdce0"}),(0,t.jsx)("stop",{offset:"1",stopColor:"#aeaeb6"})]}),(0,t.jsxs)("linearGradient",{id:"swVanGlass",x1:"0",y1:"0",x2:"1",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"rgba(255,255,255,0.9)"}),(0,t.jsx)("stop",{offset:"0.5",stopColor:"rgba(150,185,210,0.45)"}),(0,t.jsx)("stop",{offset:"1",stopColor:"rgba(18,26,34,0.65)"})]}),(0,t.jsxs)("linearGradient",{id:"swVanRim",x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"#e8e9ee"}),(0,t.jsx)("stop",{offset:"1",stopColor:"#8a8a92"})]}),(0,t.jsxs)("radialGradient",{id:"swVanHeadlight",cx:"0.5",cy:"0.5",r:"0.5",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"#fff9e0"}),(0,t.jsx)("stop",{offset:"1",stopColor:"#ffd66b"})]})]})}function ej(){return(0,t.jsxs)("svg",{viewBox:"0 0 130 66",className:"sw-van-svg",children:[(0,t.jsx)(ey,{}),(0,t.jsx)("rect",{x:"6",y:"10",width:"76",height:"40",rx:"4",fill:"url(#swVanBody)"}),(0,t.jsx)("rect",{x:"8",y:"11.5",width:"72",height:"3.5",rx:"1.75",fill:"rgba(255,255,255,0.22)"}),(0,t.jsx)("rect",{x:"6",y:"30",width:"76",height:"6",fill:"rgba(255,255,255,0.94)"}),(0,t.jsx)("line",{x1:"14",y1:"16",x2:"14",y2:"49",stroke:"rgba(0,0,0,0.32)",strokeWidth:"1.1"}),(0,t.jsx)("rect",{x:"10.5",y:"30.8",width:"2.6",height:"4.4",rx:"1.1",fill:"rgba(0,0,0,0.4)"}),(0,t.jsx)("rect",{x:"6",y:"15",width:"4.2",height:"8.5",rx:"1.6",fill:"#7a0e1a"}),(0,t.jsx)("path",{d:"M82 14 C93 14.5 101 17.5 108 22 C114.5 26 118.5 32 120.5 40 L120.5 50 L82 50 Z",fill:"url(#swVanCab)"}),(0,t.jsx)("path",{d:"M91 21.5 C97.5 23.4 103 26.6 107.2 31.5 L106 38 L88.5 38 L88 25 Z",fill:"url(#swVanGlass)"}),(0,t.jsx)("path",{d:"M92 23.5 L96.5 22.4 L100 27.5 L94.5 29.5 Z",fill:"rgba(255,255,255,0.55)"}),(0,t.jsx)("rect",{x:"103.5",y:"24",width:"6.5",height:"3.2",rx:"1.4",fill:"#2a2a2e",transform:"rotate(18 103.5 24)"}),(0,t.jsx)("rect",{x:"6",y:"44",width:"115",height:"6",rx:"2.4",fill:"rgba(14,14,16,0.88)"}),(0,t.jsx)("rect",{x:"113",y:"40.5",width:"8",height:"9.5",rx:"2",fill:"#161618"}),(0,t.jsx)("ellipse",{className:"sw-van-headlight",cx:"119.5",cy:"42.5",rx:"3.1",ry:"3.6",fill:"url(#swVanHeadlight)"}),(0,t.jsx)(ev,{cx:26}),(0,t.jsx)(ev,{cx:100,front:!0})]})}let ek=[{x:18,y:68},{x:31,y:64},{x:49,y:59},{x:70,y:53},{x:91,y:47}],eN={x:ek[0].x,y:ek[0].y-15},eM=function(e){if(e.length<3)return"M "+e.map(e=>`${e.x} ${e.y}`).join(" L ");let t=`M ${e[0].x} ${e[0].y} `;for(let s=1;s<e.length-1;s++){let i=e[s-1],r=e[s],a=e[s+1],o=r.x-i.x,n=r.y-i.y,l=a.x-r.x,d=a.y-r.y,c=Math.hypot(o,n),p=Math.hypot(l,d),h=Math.min(4.5,.42*c,.42*p),w=r.x-o/c*h,m=r.y-n/c*h,x=r.x+l/p*h,g=r.y+d/p*h;t+=`L ${w} ${m} Q ${r.x} ${r.y} ${x} ${g} `}let s=e[e.length-1];return t+`L ${s.x} ${s.y}`}(ek);function eq(){let e=[{icon:(0,t.jsx)(eb,{kind:"request"}),label:"Pickup Request",note:"Order raised from any source"},{icon:(0,t.jsx)(eb,{kind:"driver"}),label:"Nearest Driver",note:"AI matches the closest rider"},{icon:(0,t.jsx)(eb,{kind:"arrival"}),label:"Driver Arrival",note:"Real-time ETA to origin"},{icon:(0,t.jsx)(eb,{kind:"otp"}),label:"OTP Verification",note:"Secure, tamper-proof handoff"},{icon:(0,t.jsx)(eb,{kind:"collected"}),label:"Package Collected",note:"Delivery lifecycle begins"}],r=(0,s.useRef)(null),a=(0,s.useRef)(null),o=(0,s.useRef)(null),n=(0,s.useRef)(null),l=(0,s.useRef)(null),d=(0,s.useRef)(null),c=(0,s.useRef)(null),p=(0,s.useRef)([]),h=(0,s.useRef)(null),w=(0,s.useRef)(null),m=(0,s.useRef)(null),x=(0,s.useRef)(null),g=(0,s.useRef)(null),f=(0,s.useRef)(null);return(0,s.useEffect)(()=>{let t=r.current,s=a.current,u=o.current,b=n.current,v=l.current,y=d.current,j=c.current,k=h.current,N=w.current,M=m.current,q=x.current,S=g.current,z=f.current,L=p.current.filter(Boolean),C=u?Array.from(u.querySelectorAll(".sw-van-wheel")):[],I=u?u.querySelector(".sw-van-wheel--front"):null;if(!t||!s||!u||!b||!v||!y||!j||!k||!N||!M||!q||!S||!z||0===L.length)return;let E=j.getTotalLength();i.default.set(j,{strokeDasharray:E,strokeDashoffset:E});let A=e=>{L.forEach((t,s)=>t.classList.toggle("is-active",s<=e))},T=0,R="u">typeof performance?performance.now():0,D=0,O=0,F=0,P=e=>{let t,s,i,r,a,o,n,l="u">typeof performance?performance.now():R+16,d=e-T,c=Math.abs(d)/Math.max(1,l-R);T=e,R=l;let p=(t=Math.max(0,Math.min(100,e))/100*E,s=Math.max(.4,.015*E),i=j.getPointAtLength(Math.max(0,t-s)),r=j.getPointAtLength(Math.min(E,t+s)),a=j.getPointAtLength(t),o=r.x-i.x,n=180/Math.PI*Math.atan2(r.y-i.y,Math.abs(o)),{x:a.x,y:a.y,tilt:n,flip:o<0?-1:1});u.style.left=`${p.x}%`,u.style.top=`${p.y}%`,v.style.transform=`scaleX(${p.flip}) rotate(${p.flip*p.tilt}deg)`,O+=22*d;let h=p.tilt-D;D=p.tilt;let w=Math.max(-16,Math.min(16,5*h));for(let e of C)e.style.transform=`rotate(${O}deg)`;I&&(I.style.transform=`rotate(${O+w}deg)`),c>.0015&&(F=l+160);let m=l<F;b.classList.toggle("is-moving",m),u.classList.toggle("is-moving",m);let x=Math.min(.3,6*c);y.style.opacity=String(.85-x),y.style.transform=`scaleX(${1+x})`,j.style.strokeDashoffset=`${E*(1-e/100)}`},B=e=>{N.textContent=e,i.default.fromTo(k,{opacity:0,scale:.4},{opacity:1,scale:1,duration:.2,ease:"back.out(3)"})},_=()=>{S.textContent="AI Coordinated Pickup",i.default.to(M,{opacity:0,duration:.2}),i.default.to(q,{opacity:1,scale:1,duration:.35,ease:"back.out(3)"}),b.classList.remove("is-moving"),u.classList.remove("is-moving"),i.default.fromTo(z,{opacity:0},{opacity:1,duration:.25,ease:"power1.out",yoyo:!0,repeat:1})},V=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;if(i.default.set(k,{opacity:0,scale:.4}),i.default.set(q,{opacity:0,scale:.4}),i.default.set(z,{opacity:0}),P(0),V){P(100),A(e.length-1),_();return}let $={v:0},H=i.default.timeline({scrollTrigger:{trigger:t,start:"top 82%",end:"bottom 84%",scrub:.7}});return H.call(()=>A(0),[],0),[{from:0,to:25,start:2,dur:2,hold:0},{from:25,to:50,start:4,dur:2,hold:.3},{from:50,to:75,start:6,dur:2,hold:.3},{from:75,to:100,start:8,dur:1.5,hold:.3}].forEach((e,t)=>{let s=e.start+e.hold,i=e.dur-e.hold,r=.32*i,a=.36*i,o=e.from+(e.to-e.from)*.28,n=e.from+(e.to-e.from)*.72,l=e.start+e.dur;H.to($,{v:o,duration:r,ease:"power2.in",onUpdate:()=>P($.v)},s).to($,{v:n,duration:a,ease:"none",onUpdate:()=>P($.v)},s+r).to($,{v:e.to,duration:.32*i,ease:"power2.out",onUpdate:()=>P($.v)},s+r+a).call(()=>A(t+1),[],l),2===t&&H.call(()=>B("OTP Verified"),[],l).to(k,{opacity:0,duration:.2},l+.25)}),H.call(()=>B("Scanning package…"),[],9.5).call(()=>B("Package Loaded"),[],9.65).to(k,{opacity:0,duration:.15},9.8).call(_,[],9.8).to(u,{opacity:0,duration:.2,ease:"power1.in"},9.8),H.to(s,{scale:1.07,ease:"none",duration:H.duration()},0),()=>{H.scrollTrigger?.kill(),H.kill()}},[e.length]),(0,t.jsxs)(ew,{id:"pickup",bg:"charcoal",children:[(0,t.jsx)(ex,{n:"02",eyebrow:"First Mile Pickup",title:(0,t.jsxs)(t.Fragment,{children:["Smart ",(0,t.jsx)("span",{className:"accent",children:"pickup"})," management"]}),lede:"Every pickup request is received, validated, assigned and confirmed before a single mile is driven — so deliveries start the right way, every time."}),(0,t.jsxs)("div",{className:"sw-edge sw-pickup",ref:r,children:[(0,t.jsx)("img",{ref:a,src:"/images/tab-pic-1.webp",alt:"Doormile pickup in progress",className:"sw-pickup-img",loading:"lazy",decoding:"async"}),(0,t.jsx)("div",{className:"sw-pickup-overlay","aria-hidden":"true"}),(0,t.jsxs)("span",{className:"sw-pickup-ai-badge",children:[(0,t.jsxs)("span",{className:"sw-pickup-ai-indicator",children:[(0,t.jsx)("span",{className:"sw-livedot",ref:m}),(0,t.jsx)("span",{className:"sw-pickup-ai-check",ref:x,children:ec})]}),(0,t.jsx)("span",{ref:g,children:"AI Coordinating Pickup"})]}),(0,t.jsxs)("div",{className:"sw-pickup-confirm",ref:h,"aria-hidden":"true",children:[ec,(0,t.jsx)("span",{ref:w,children:"Verified"})]}),(0,t.jsxs)("svg",{className:"sw-pickup-road",viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true",children:[(0,t.jsx)("path",{d:eM,className:"sw-pickup-road-shadow"}),(0,t.jsx)("path",{d:eM,className:"sw-pickup-road-path"}),(0,t.jsx)("path",{d:eM,className:"sw-pickup-road-lane"}),(0,t.jsx)("path",{d:eM,className:"sw-pickup-road-remaining"}),(0,t.jsx)("path",{ref:c,d:eM,className:"sw-pickup-road-progress"})]}),(0,t.jsxs)("div",{className:"sw-pickup-dest",style:{left:`${eN.x}%`,top:`${eN.y}%`},children:[U,(0,t.jsx)("span",{children:"Pickup Point"})]}),(0,t.jsxs)("div",{className:"sw-pickup-van",ref:o,style:{left:`${ek[0].x}%`,top:`${ek[0].y}%`},children:[(0,t.jsx)("span",{className:"sw-pickup-van-shadow",ref:d,"aria-hidden":"true"}),(0,t.jsxs)("span",{className:"sw-pickup-van-speedlines","aria-hidden":"true",children:[(0,t.jsx)("i",{}),(0,t.jsx)("i",{}),(0,t.jsx)("i",{})]}),(0,t.jsx)("div",{className:"sw-pickup-van-bounce",ref:n,children:(0,t.jsx)("div",{className:"sw-pickup-van-rot",ref:l,children:(0,t.jsx)(ej,{})})})]}),(0,t.jsx)("span",{className:"sw-pickup-success-glow",ref:f,"aria-hidden":"true"}),e.map((e,s)=>(0,t.jsxs)("div",{className:"sw-pickup-stop",style:{left:`${ek[s].x}%`,top:`${ek[s].y}%`},ref:e=>{p.current[s]=e},children:[(0,t.jsxs)("span",{className:"sw-pickup-stop-icwrap",children:[(0,t.jsx)("span",{className:"sw-pickup-stop-ripple","aria-hidden":"true"}),(0,t.jsx)("span",{className:"sw-pickup-stop-ic",children:e.icon}),(0,t.jsx)("span",{className:"sw-pickup-stop-badge","aria-hidden":"true",children:ec})]}),(0,t.jsx)("span",{className:"sw-pickup-stop-label",children:e.label}),(0,t.jsx)("span",{className:"sw-pickup-stop-note",children:e.note})]},e.label))]})]})}let eS=[{title:"Small Parcel",text:"Instantly routed to agile urban two-wheeler & EV bike fleets for zero-delay last-mile delivery. (2 kg · 4 km)"},{title:"Retail Restock",text:"Optimized for mid-capacity electric vans and urban cargo units with strict SLA time windows. (80 kg · 12 km)"},{title:"Bulk Pallet",text:"Matched to heavy-duty mini trucks and multi-pallet freight vehicles with route weight clearance. (600 kg · 30 km)"},{title:"Long Haul",text:"Assigned to primary long-distance transport trucks with real-time driver & route monitoring. (2 t · 140 km)"}];function ez(){return(0,t.jsx)($,{id:"vehicle-ai",eyebrow:"/ Vehicle Selection /",title:"AI vehicle selection",imageSrc:"/images/ev solution 4.png",imageAlt:"AI Vehicle Selection",items:eS})}let eL=[{id:"A",name:"Route A",eta:22,dist:19.8,fuel:71,traffic:"Heavy",score:64,reason:"Heavy traffic"},{id:"B",name:"Route B",eta:18,dist:22.4,fuel:66,traffic:"Moderate",score:73,reason:"Longer distance"},{id:"C",name:"Route C",eta:16,dist:17.1,fuel:70,traffic:"Light",score:81,reason:"Higher fuel cost"},{id:"D",name:"Route D",eta:13,dist:15.6,fuel:52,traffic:"Light",score:97,reason:null,winner:!0}],eC=eL.findIndex(e=>e.winner);function eI(){let e=(0,s.useRef)(null),a=(0,s.useRef)(null),o=(0,s.useRef)([]),n=(0,s.useRef)(null),l=(0,s.useRef)(null),d=(0,s.useRef)(null),c=(0,s.useRef)(null);return(0,s.useEffect)(()=>{let t=e.current,s=a.current,p=o.current.filter(Boolean),h=n.current,w=l.current,m=d.current,x=c.current;if(!t||!s||0===p.length||!h||!w||!m||!x)return;let g=p.map(e=>({card:e,eta:e.querySelector('[data-k="eta"]'),dist:e.querySelector('[data-k="dist"]'),fuel:e.querySelector('[data-k="fuel"]'),fuelBar:e.querySelector(".sw-ade-fuel-bar > i"),scoreVal:e.querySelector(".sw-ade-score-val"),scoreBar:e.querySelector(".sw-ade-score-bar > i"),traffic:e.querySelector(".sw-ade-traffic"),verdict:e.querySelector(".sw-ade-verdict")}));if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches){i.default.set(p,{opacity:1,y:0}),g.forEach((e,t)=>{let s=eL[t];e.eta.textContent=`${s.eta}`,e.dist.textContent=s.dist.toFixed(1),e.fuel.textContent=`${s.fuel}`,e.scoreVal.textContent=`${s.score}`,i.default.set(e.fuelBar,{width:`${s.fuel}%`}),i.default.set(e.scoreBar,{width:`${s.score}%`}),i.default.set([e.traffic,e.verdict],{opacity:1,y:0}),e.card.classList.toggle("is-winner",t===eC),e.card.classList.toggle("is-muted",t!==eC)}),i.default.set([h,w,m],{opacity:1,y:0}),i.default.set(x,{width:"100%"}),s.textContent="Best route selected";return}let f=[[0,"Initializing decision engine…"],[.6,"Generating route options…"],[1.9,"Reading live traffic & road data…"],[3,"Calculating fuel, distance & ETA…"],[4.2,"Scoring 4 candidate routes…"],[5.6,"Comparing against optimal thresholds…"],[6.6,"Best route selected"],[7.6,"Dispatching vehicle…"],[8.9,"Shipment in transit"]],u=i.default.timeline({paused:!0,repeat:-1,repeatDelay:1.1});u.eventCallback("onUpdate",()=>{let e=u.time(),t=f[0][1];for(let[s,i]of f)if(e>=s)t=i;else break;s.textContent=t;let i=e>=1.9&&e<5.5;p.forEach(e=>e.classList.toggle("is-scoring",i))});let b=(e,t,s,i,r=0)=>{let a={v:0};u.fromTo(a,{v:0},{v:t,duration:i,ease:"power2.out",onUpdate:()=>{e.textContent=r?a.v.toFixed(r):`${Math.round(a.v)}`}},s)};u.call(()=>{p.forEach(e=>e.classList.remove("is-scoring","is-muted","is-winner")),g.forEach(e=>{e.eta.textContent="—",e.dist.textContent="—",e.fuel.textContent="—",e.scoreVal.textContent="0"})},[],0),u.fromTo(p,{opacity:0,y:16},{opacity:1,y:0,duration:.5,stagger:.12,ease:"power3.out"},.5),g.forEach((e,t)=>{let s=eL[t],i=1.9+.22*t;u.fromTo(e.traffic,{opacity:0},{opacity:1,duration:.3},i),b(e.eta,s.eta,i,1),b(e.dist,s.dist,i,1,1),b(e.fuel,s.fuel,i,1),u.fromTo(e.fuelBar,{width:"0%"},{width:`${s.fuel}%`,duration:1,ease:"power2.out"},i),b(e.scoreVal,s.score,i+.3,1.3),u.fromTo(e.scoreBar,{width:"0%"},{width:`${s.score}%`,duration:1.3,ease:"power2.out"},i+.3)}),u.fromTo(h,{opacity:0},{opacity:1,duration:.4},5.3),u.call(()=>{p.forEach((e,t)=>{e.classList.toggle("is-winner",t===eC),e.classList.toggle("is-muted",t!==eC)})},[],5.6),g.forEach((e,t)=>{u.fromTo(e.verdict,{opacity:0,y:4},{opacity:1,y:0,duration:.4,ease:"power2.out"},5.7+.1*t)}),u.fromTo(w,{opacity:0,y:12},{opacity:1,y:0,duration:.5,ease:"back.out(1.4)"},6.6),u.fromTo(m,{opacity:0,y:10},{opacity:1,y:0,duration:.45,ease:"power2.out"},7.6),u.fromTo(x,{width:"0%"},{width:"100%",duration:1.4,ease:"power2.inOut"},7.8);let v=r.ScrollTrigger.create({trigger:t,start:"top 80%",once:!0,onEnter:()=>u.play(0)});return()=>{v.kill(),u.kill()}},[]),(0,t.jsxs)(ew,{id:"routing",bg:"white",children:[(0,t.jsxs)("div",{className:"sw-qhead",children:[(0,t.jsx)(z.ScrollReveal,{yOffset:16,triggerOnce:!0,children:(0,t.jsxs)("div",{className:"sw-qhead-kicker",children:[(0,t.jsx)("span",{className:"sw-qhead-eyebrow",children:"/ Smart Route Intelligence /"}),(0,t.jsx)("hr",{className:"sw-qhead-divider"})]})}),(0,t.jsx)(z.ScrollReveal,{yOffset:20,delay:.05,triggerOnce:!0,children:(0,t.jsx)("div",{className:"sw-qhead-stroke-title",children:"Smart Route Intelligence"})}),(0,t.jsxs)("div",{className:"sw-qhead-split",children:[(0,t.jsx)(em,{tag:"h2",className:"sw-qhead-h2",style:{textTransform:"none"},delay:.08,children:"Parallel Evaluation & Instant AI Dispatch"}),(0,t.jsxs)("div",{className:"sw-qhead-desc",children:[(0,t.jsx)(em,{tag:"p",delay:.16,children:"Before a single dispatch is made, Doormile generates every possible route and lets the AI decide in real time."}),(0,t.jsx)(em,{tag:"p",delay:.24,children:"Scoring each option on live traffic, fuel, distance, and ETA guarantees every order is committed to the single path that wins."})]})]})]}),(0,t.jsxs)("div",{className:"sw-ade",ref:e,children:[(0,t.jsxs)("div",{className:"sw-ade-bar",children:[(0,t.jsxs)("span",{className:"sw-ade-brand",children:[(0,t.jsx)("span",{className:"sw-ade-brand-ic",children:et}),"AI Decision Engine"]}),(0,t.jsxs)("span",{className:"sw-ade-live",children:[(0,t.jsx)("span",{className:"sw-ade-livedot","aria-hidden":"true"}),"LIVE"]})]}),(0,t.jsx)("div",{className:"sw-ade-status-row",children:(0,t.jsx)("span",{className:"sw-ade-status",ref:a})}),(0,t.jsx)("div",{className:"sw-ade-grid",children:eL.map((e,s)=>(0,t.jsxs)("div",{className:"sw-ade-card",ref:e=>{o.current[s]=e},children:[(0,t.jsxs)("div",{className:"sw-ade-card-top",children:[(0,t.jsx)("span",{className:"sw-ade-card-name",children:e.name}),(0,t.jsx)("span",{className:`sw-ade-traffic sw-ade-traffic--${e.traffic.toLowerCase()}`,children:e.traffic})]}),(0,t.jsxs)("div",{className:"sw-ade-rows",children:[(0,t.jsxs)("div",{className:"sw-ade-row",children:[(0,t.jsx)("span",{className:"sw-ade-row-l",children:"ETA"}),(0,t.jsxs)("span",{className:"sw-ade-row-v",children:[(0,t.jsx)("b",{"data-k":"eta",children:"—"})," min"]})]}),(0,t.jsxs)("div",{className:"sw-ade-row",children:[(0,t.jsx)("span",{className:"sw-ade-row-l",children:"Distance"}),(0,t.jsxs)("span",{className:"sw-ade-row-v",children:[(0,t.jsx)("b",{"data-k":"dist",children:"—"})," km"]})]}),(0,t.jsxs)("div",{className:"sw-ade-row",children:[(0,t.jsx)("span",{className:"sw-ade-row-l",children:"Fuel"}),(0,t.jsxs)("span",{className:"sw-ade-row-v",children:[(0,t.jsx)("b",{"data-k":"fuel",children:"—"})," %"]})]}),(0,t.jsx)("div",{className:"sw-ade-fuel-bar",children:(0,t.jsx)("i",{})})]}),(0,t.jsxs)("div",{className:"sw-ade-score",children:[(0,t.jsxs)("div",{className:"sw-ade-score-head",children:[(0,t.jsx)("span",{children:"AI Score"}),(0,t.jsx)("span",{className:"sw-ade-score-val",children:"0"})]}),(0,t.jsx)("div",{className:"sw-ade-score-bar",children:(0,t.jsx)("i",{})})]}),(0,t.jsx)("div",{className:"sw-ade-verdict",children:e.winner?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("span",{className:"sw-ade-verdict-ic sw-ade-verdict-ic--win",children:ec}),"Best match"]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("span",{className:"sw-ade-verdict-ic",children:ep}),e.reason]})})]},e.id))}),(0,t.jsxs)("div",{className:"sw-ade-flow",ref:n,children:[(0,t.jsx)("span",{className:"sw-ade-flow-arrow","aria-hidden":"true"}),(0,t.jsxs)("span",{className:"sw-ade-flow-chip",children:[et,"AI Analysis"]}),(0,t.jsx)("span",{className:"sw-ade-flow-arrow","aria-hidden":"true"})]}),(0,t.jsxs)("div",{className:"sw-ade-result",ref:l,children:[(0,t.jsxs)("span",{className:"sw-ade-result-badge",children:[(0,t.jsx)("span",{className:"sw-ade-livedot sw-ade-livedot--green","aria-hidden":"true"}),ec,"Best Route Selected"]}),(0,t.jsx)("span",{className:"sw-ade-result-sub",children:"Route D · 13 min ETA · 52% fuel · Light traffic"})]}),(0,t.jsxs)("div",{className:"sw-ade-dispatch",ref:d,children:[(0,t.jsx)("span",{className:"sw-ade-dispatch-ic",children:J}),(0,t.jsxs)("div",{className:"sw-ade-dispatch-body",children:[(0,t.jsx)("span",{className:"sw-ade-dispatch-text",children:"Shipment In Transit"}),(0,t.jsx)("span",{className:"sw-ade-dispatch-bar",children:(0,t.jsx)("i",{ref:c})})]}),(0,t.jsx)("span",{className:"sw-ade-dispatch-eta",children:"ETA 13 min"})]})]})]})}function eE(){return(0,t.jsxs)(ew,{id:"quantum",bg:"white",children:[(0,t.jsxs)("div",{className:"sw-qhead",children:[(0,t.jsx)(z.ScrollReveal,{yOffset:16,triggerOnce:!0,children:(0,t.jsxs)("div",{className:"sw-qhead-kicker",children:[(0,t.jsx)("span",{className:"sw-qhead-eyebrow",children:"/ Quantum Decision Engine /"}),(0,t.jsx)("hr",{className:"sw-qhead-divider"})]})}),(0,t.jsx)(z.ScrollReveal,{yOffset:20,delay:.05,triggerOnce:!0,children:(0,t.jsx)("div",{className:"sw-qhead-stroke-title",children:"Quantum Decision Engine"})}),(0,t.jsxs)("div",{className:"sw-qhead-split",children:[(0,t.jsx)(em,{tag:"h2",className:"sw-qhead-h2",style:{textTransform:"none"},delay:.08,children:"Simulating Hundreds of Parallel Possibilities in Real Time"}),(0,t.jsxs)("div",{className:"sw-qhead-desc",children:[(0,t.jsx)(em,{tag:"p",delay:.16,children:"Traditional systems calculate one static route and dispatch it sequentially. Doormile Quantum evaluates hundreds of route possibilities simultaneously in milliseconds."}),(0,t.jsx)(em,{tag:"p",delay:.24,children:"Simulating every traffic, SLA, and fuel cost outcome in parallel guarantees every order is auto-dispatched along the single most efficient path."})]})]})]}),(0,t.jsx)(D,{})]})}function eA(){let[e,i]=(0,s.useState)("");return(0,s.useEffect)(()=>{let e,t=()=>{let e=new Date,t=e.getHours()%12;return 0===t&&(t=12),`${t}:${e.getMinutes().toString().padStart(2,"0")}`};i(t());let s=new Date,r=setTimeout(()=>{i(t()),e=setInterval(()=>i(t()),6e4)},(60-s.getSeconds())*1e3-s.getMilliseconds());return()=>{clearTimeout(r),e&&clearInterval(e)}},[]),(0,t.jsxs)("div",{className:"sw-phone-statusbar","aria-hidden":"true",children:[(0,t.jsx)("span",{className:"sw-phone-time",children:e}),(0,t.jsxs)("span",{className:"sw-phone-status-icons",children:[(0,t.jsxs)("svg",{className:"sw-phone-ic",viewBox:"0 0 18 12",fill:"currentColor",children:[(0,t.jsx)("rect",{x:"0",y:"8",width:"3",height:"4",rx:"1"}),(0,t.jsx)("rect",{x:"5",y:"5.5",width:"3",height:"6.5",rx:"1"}),(0,t.jsx)("rect",{x:"10",y:"3",width:"3",height:"9",rx:"1"}),(0,t.jsx)("rect",{x:"15",y:"0.5",width:"3",height:"11.5",rx:"1"})]}),(0,t.jsx)("span",{className:"sw-phone-5g",children:"5G"}),(0,t.jsxs)("svg",{className:"sw-phone-ic sw-phone-ic-wifi",viewBox:"0 0 16 12",fill:"currentColor",children:[(0,t.jsx)("path",{d:"M8 2.4c2.7 0 5.2 1 7.1 2.8L13.5 6.9C12 5.5 10.1 4.7 8 4.7S4 5.5 2.5 6.9L.9 5.2C2.8 3.4 5.3 2.4 8 2.4z"}),(0,t.jsx)("path",{d:"M8 6.6c1.5 0 2.9.6 3.9 1.6L8 12 4.1 8.2C5.1 7.2 6.5 6.6 8 6.6z"})]}),(0,t.jsxs)("svg",{className:"sw-phone-ic sw-phone-ic-batt",viewBox:"0 0 27 13",fill:"none",children:[(0,t.jsx)("rect",{x:"0.6",y:"0.6",width:"22",height:"11.8",rx:"3.4",stroke:"currentColor",strokeOpacity:"0.4",strokeWidth:"1.1"}),(0,t.jsx)("rect",{x:"2.2",y:"2.2",width:"17.5",height:"8.6",rx:"2",fill:"currentColor"}),(0,t.jsx)("path",{d:"M24.6 4.2c1 .5 1 3.6 0 4.1z",fill:"currentColor",fillOpacity:"0.5"})]})]})]})}function eT(){return(0,t.jsxs)("div",{className:"sw-phone-notif",children:[(0,t.jsx)("img",{src:"/images/cropped-image-2.png",alt:"Doormile Logo",className:"sw-phone-notif-ic",loading:"lazy",decoding:"async"}),(0,t.jsxs)("div",{className:"sw-phone-notif-body",children:[(0,t.jsxs)("div",{className:"sw-phone-notif-top",children:[(0,t.jsx)("span",{className:"sw-phone-notif-app",children:"Doormile"}),(0,t.jsx)("span",{className:"sw-phone-notif-time",children:"now"})]}),(0,t.jsx)("span",{className:"sw-phone-notif-title",children:"Your shipment is on the way"}),(0,t.jsx)("span",{className:"sw-phone-notif-sub",children:"Arriving in 12 min"})]})]})}function eR(){return(0,t.jsxs)("svg",{viewBox:"0 0 340 200",className:"sw-ldi-svg",role:"img","aria-label":"Live map tracking",children:[(0,t.jsxs)("defs",{children:[(0,t.jsxs)("linearGradient",{id:"ldiTrackBg",x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"rgba(255,255,255,0.07)"}),(0,t.jsx)("stop",{offset:"1",stopColor:"rgba(255,255,255,0.015)"})]}),(0,t.jsxs)("linearGradient",{id:"ldiRoute",x1:"0",y1:"1",x2:"1",y2:"0",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"#C01227"}),(0,t.jsx)("stop",{offset:"1",stopColor:"#ff6a7d"})]}),(0,t.jsxs)("radialGradient",{id:"ldiPulse",cx:"0.5",cy:"0.5",r:"0.5",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"rgba(226,53,74,0.55)"}),(0,t.jsx)("stop",{offset:"1",stopColor:"rgba(226,53,74,0)"})]})]}),(0,t.jsx)("rect",{x:"0.5",y:"0.5",width:"339",height:"199",rx:"18",fill:"url(#ldiTrackBg)",stroke:"rgba(255,255,255,0.08)"}),(0,t.jsx)("g",{stroke:"rgba(255,255,255,0.05)",strokeWidth:"1",children:(0,t.jsx)("path",{d:"M0 50h340M0 100h340M0 150h340M85 0v200M170 0v200M255 0v200"})}),(0,t.jsxs)("g",{stroke:"rgba(255,255,255,0.06)",strokeWidth:"9",strokeLinecap:"round",fill:"none",children:[(0,t.jsx)("path",{d:"M-10 130 H120 V-10"}),(0,t.jsx)("path",{d:"M255 210 V70 H360"})]}),(0,t.jsx)("path",{d:"M42 162 C 96 150 96 96 150 96 S 232 66 300 40",fill:"none",stroke:"url(#ldiRoute)",strokeWidth:"5",strokeLinecap:"round"}),(0,t.jsx)("path",{d:"M42 162 C 96 150 96 96 150 96 S 232 66 300 40",fill:"none",stroke:"rgba(255,255,255,0.5)",strokeWidth:"5",strokeLinecap:"round",strokeDasharray:"1 15",opacity:"0.5"}),(0,t.jsx)("circle",{cx:"42",cy:"162",r:"7",fill:"#0e0f12",stroke:"#E2354A",strokeWidth:"2.5"}),(0,t.jsx)("circle",{cx:"150",cy:"96",r:"28",fill:"url(#ldiPulse)"}),(0,t.jsx)("circle",{cx:"150",cy:"96",r:"9.5",fill:"#E2354A",stroke:"#fff",strokeWidth:"2.6"}),(0,t.jsx)("path",{d:"M300 20a17 17 0 00-17 17c0 12 17 27 17 27s17-15 17-27a17 17 0 00-17-17z",fill:"#fff"}),(0,t.jsx)("circle",{cx:"300",cy:"37",r:"6.2",fill:"#C01227"})]})}function eD(){let e=[{x:46,y:40},{x:294,y:40},{x:46,y:160},{x:294,y:160}];return(0,t.jsxs)("svg",{viewBox:"0 0 340 200",className:"sw-ldi-svg",role:"img","aria-label":"Shared operational visibility",children:[(0,t.jsxs)("defs",{children:[(0,t.jsxs)("linearGradient",{id:"ldiVisBg",x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"rgba(255,255,255,0.07)"}),(0,t.jsx)("stop",{offset:"1",stopColor:"rgba(255,255,255,0.015)"})]}),(0,t.jsxs)("radialGradient",{id:"ldiHub",cx:"0.5",cy:"0.5",r:"0.5",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"#ff6a7d"}),(0,t.jsx)("stop",{offset:"1",stopColor:"#C01227"})]}),(0,t.jsxs)("radialGradient",{id:"ldiHubGlow",cx:"0.5",cy:"0.5",r:"0.5",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"rgba(226,53,74,0.5)"}),(0,t.jsx)("stop",{offset:"1",stopColor:"rgba(226,53,74,0)"})]})]}),(0,t.jsx)("rect",{x:"0.5",y:"0.5",width:"339",height:"199",rx:"18",fill:"url(#ldiVisBg)",stroke:"rgba(255,255,255,0.08)"}),(0,t.jsx)("g",{stroke:"rgba(226,53,74,0.4)",strokeWidth:"1.6",strokeDasharray:"2 6",children:e.map((e,s)=>(0,t.jsx)("line",{x1:"170",y1:"100",x2:e.x,y2:e.y},s))}),e.map((e,s)=>(0,t.jsxs)("g",{children:[(0,t.jsx)("circle",{cx:e.x,cy:e.y,r:"20",fill:"rgba(255,255,255,0.05)",stroke:"rgba(255,255,255,0.12)"}),(0,t.jsx)("circle",{cx:e.x,cy:e.y-5,r:"6",fill:"rgba(255,255,255,0.55)"}),(0,t.jsx)("path",{d:`M${e.x-10} ${e.y+13}c0 -7 4.5 -11 10 -11s10 4 10 11z`,fill:"rgba(255,255,255,0.35)"})]},s)),(0,t.jsx)("circle",{cx:"170",cy:"100",r:"52",fill:"url(#ldiHubGlow)"}),(0,t.jsx)("circle",{cx:"170",cy:"100",r:"30",fill:"url(#ldiHub)"}),(0,t.jsx)("circle",{cx:"170",cy:"100",r:"30",fill:"none",stroke:"rgba(255,255,255,0.5)",strokeWidth:"1.5"}),(0,t.jsx)("circle",{cx:"158",cy:"100",r:"3.4",fill:"#fff"}),(0,t.jsx)("circle",{cx:"170",cy:"100",r:"3.4",fill:"#fff"}),(0,t.jsx)("circle",{cx:"182",cy:"100",r:"3.4",fill:"#fff"})]})}function eO(){return(0,t.jsxs)("svg",{viewBox:"0 0 340 200",className:"sw-ldi-svg",role:"img","aria-label":"Verified proof of delivery",children:[(0,t.jsxs)("defs",{children:[(0,t.jsxs)("linearGradient",{id:"ldiProofBg",x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"rgba(255,255,255,0.07)"}),(0,t.jsx)("stop",{offset:"1",stopColor:"rgba(255,255,255,0.015)"})]}),(0,t.jsxs)("linearGradient",{id:"ldiBox",x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"#e8e9ee"}),(0,t.jsx)("stop",{offset:"1",stopColor:"#b7b9c2"})]}),(0,t.jsxs)("linearGradient",{id:"ldiBoxTop",x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"#f6f6f8"}),(0,t.jsx)("stop",{offset:"1",stopColor:"#d5d6dc"})]}),(0,t.jsxs)("linearGradient",{id:"ldiShield",x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,t.jsx)("stop",{offset:"0",stopColor:"#ff6a7d"}),(0,t.jsx)("stop",{offset:"1",stopColor:"#C01227"})]})]}),(0,t.jsx)("rect",{x:"0.5",y:"0.5",width:"339",height:"199",rx:"18",fill:"url(#ldiProofBg)",stroke:"rgba(255,255,255,0.08)"}),(0,t.jsx)("path",{d:"M78 92 L128 74 L188 92 L138 112 Z",fill:"url(#ldiBoxTop)"}),(0,t.jsx)("path",{d:"M78 92 L138 112 L138 166 L78 146 Z",fill:"url(#ldiBox)"}),(0,t.jsx)("path",{d:"M188 92 L138 112 L138 166 L188 146 Z",fill:"#9a9ca6"}),(0,t.jsx)("path",{d:"M128 74 L128 128 L138 112 Z",fill:"rgba(192,18,39,0.85)"}),(0,t.jsx)("path",{d:"M78 92 L138 112 L128 128 L78 108 Z",fill:"rgba(0,0,0,0.08)"}),(0,t.jsxs)("g",{children:[(0,t.jsx)("rect",{x:"196",y:"150",width:"86",height:"26",rx:"8",fill:"rgba(255,255,255,0.05)",stroke:"rgba(255,255,255,0.1)"}),(0,t.jsx)("circle",{cx:"212",cy:"163",r:"4",fill:"#E2354A"}),(0,t.jsx)("circle",{cx:"228",cy:"163",r:"4",fill:"#E2354A"}),(0,t.jsx)("circle",{cx:"244",cy:"163",r:"4",fill:"rgba(255,255,255,0.3)"}),(0,t.jsx)("circle",{cx:"260",cy:"163",r:"4",fill:"rgba(255,255,255,0.3)"})]}),(0,t.jsx)("path",{d:"M228 40l30 11v22c0 20-13 31-30 37-17-6-30-17-30-37V51l30-11z",fill:"url(#ldiShield)"}),(0,t.jsx)("path",{d:"M228 40l30 11v22c0 20-13 31-30 37-17-6-30-17-30-37V51l30-11z",fill:"none",stroke:"rgba(255,255,255,0.4)",strokeWidth:"1.4"}),(0,t.jsx)("path",{d:"M216 74l9 9 16-19",fill:"none",stroke:"#fff",strokeWidth:"4.4",strokeLinecap:"round",strokeLinejoin:"round"})]})}function eF(){let[e,i]=(0,s.useState)(24);(0,s.useEffect)(()=>{let e=setInterval(()=>i(e=>e<=4?24:e-1),1400);return()=>clearInterval(e)},[]);let r=[(0,t.jsx)(t.Fragment,{children:"Every shipment."}),(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("span",{className:"accent",children:"Visible."})}),(0,t.jsxs)(t.Fragment,{children:["In ",(0,t.jsx)("span",{className:"accent",children:"real time."})]})],o=[{art:(0,t.jsx)(eR,{}),title:"Live Tracking",desc:"Follow every fleet driver on a live map from pickup to drop, with the exact location and route updating second by second."},{art:(0,t.jsx)("div",{className:"sw-ldi-card-art-stage",children:(0,t.jsx)("img",{className:"sw-ldi-svg-img",src:"/doorven.svg",alt:"Shipment journey — pickup request, fleet driver assignment, OTP verification and package collection"})}),title:"Shipment Journey",desc:"Track every milestone — from pickup request and fleet driver assignment to OTP verification and successful package collection — with complete real-time visibility."},{art:(0,t.jsx)(eD,{}),title:"Shared Visibility",desc:"Merchants, fleet drivers, operations teams and clients all watch the same shipment journey from a single source of truth."},{art:(0,t.jsx)(eO,{}),title:"Proof of Delivery",desc:"Secure OTP and photo confirmation close every shipment at the doorstep, giving tamper-proof evidence the parcel arrived."}];return(0,t.jsx)(ew,{id:"tracking",bg:"grey",children:(0,t.jsxs)("div",{className:"sw-ldi",children:[(0,t.jsxs)("div",{className:"sw-ldi-head",children:[(0,t.jsx)(a.motion.span,{className:"sw-eyebrow sw-ldi-eyebrow",initial:{opacity:0,y:16,filter:"blur(8px)"},whileInView:{opacity:1,y:0,filter:"blur(0px)"},viewport:{once:!0,margin:"-12% 0px"},transition:{duration:.6,ease:[.16,1,.3,1]},children:"/ Live Logistics Intelligence /"}),(0,t.jsx)("h2",{className:"sw-ldi-h",children:r.map((e,s)=>(0,t.jsx)(a.motion.span,{className:"sw-ldi-line",initial:{opacity:0,y:26,filter:"blur(14px)"},whileInView:{opacity:1,y:0,filter:"blur(0px)"},viewport:{once:!0,margin:"-12% 0px"},transition:{duration:.7,delay:.15+.12*s,ease:[.16,1,.3,1]},children:e},s))}),(0,t.jsx)(a.motion.p,{className:"sw-ldi-lede",initial:{opacity:0,y:18,filter:"blur(8px)"},whileInView:{opacity:1,y:0,filter:"blur(0px)"},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.7,delay:.5,ease:[.16,1,.3,1]},children:"Every stakeholder sees the same shipment journey in real time — from dispatch to doorstep — with live tracking, intelligent updates and complete operational visibility."})]}),(0,t.jsxs)("div",{className:"sw-ldi-grid",children:[(0,t.jsx)("div",{className:"sw-ldi-phone-col",children:(0,t.jsx)("div",{className:"sw-ldi-phone-sticky",children:(0,t.jsx)("div",{className:"sw-phone",children:(0,t.jsxs)("div",{className:"sw-phone-screen",children:[(0,t.jsx)("div",{className:"sw-phone-island"}),(0,t.jsx)(eA,{}),(0,t.jsx)(eT,{}),(0,t.jsxs)("div",{className:"sw-phone-map",children:[(0,t.jsx)("img",{className:"sw-phone-track-svg",src:"/live-track.svg",alt:"Live shipment route with the fleet driver moving along the tracked path"}),(0,t.jsxs)("div",{className:"sw-phone-badge",children:[(0,t.jsx)(a.motion.span,{className:"sw-phone-badge-dot",animate:{scale:[1,1.35,1],opacity:[.65,1,.65]},transition:{duration:1.6,repeat:1/0,ease:"easeInOut"}}),"LIVE"]})]}),(0,t.jsxs)("div",{className:"sw-phone-card",children:[(0,t.jsx)("span",{className:"sw-phone-card-label",children:"Arriving in"}),(0,t.jsxs)("span",{className:"sw-phone-card-eta",children:[e,(0,t.jsx)("em",{children:"min"})]})]})]})})})}),(0,t.jsx)("div",{className:"sw-ldi-cards",children:o.map((e,s)=>(0,t.jsxs)(a.motion.article,{className:"sw-ldi-card",initial:{opacity:0,y:40,scale:.96},whileInView:{opacity:1,y:0,scale:1},viewport:{once:!0,margin:"-12% 0px"},transition:{duration:.8,delay:.08*s,ease:[.16,1,.3,1]},children:[(0,t.jsx)("div",{className:"sw-ldi-card-art",children:e.art}),(0,t.jsx)("h3",{className:"sw-ldi-card-title",children:e.title}),(0,t.jsx)("p",{className:"sw-ldi-card-desc",children:e.desc})]},e.title))})]})]})})}function eP(){let e=[{icon:X,label:"Pickup",note:"Order collected from source"},{icon:K,label:"Sorting",note:"Smart sorting at hubs"},{icon:Y,label:"Route Assignment",note:"AI assigns best route & vehicle"},{icon:J,label:"Transit",note:"Real-time monitoring"},{icon:U,label:"Out For Delivery",note:"Fleet driver reaches destination"},{icon:Q,label:"Delivered",note:"Proof of delivery & confirmation"}],a=(0,s.useRef)(null),o=(0,s.useRef)([]);return(0,s.useEffect)(()=>{let t=a.current;if(!t)return;let s=o.current.filter(Boolean),n=e=>{s.forEach((t,s)=>t.classList.toggle("is-active",s<=e))},l=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;if(i.default.set(t,{"--fill":0}),l){i.default.set(t,{"--fill":1}),n(e.length-1);return}let d=r.ScrollTrigger.create({trigger:t,start:"top 80%",end:"bottom 45%",scrub:.6,onUpdate:s=>{i.default.set(t,{"--fill":s.progress}),n(Math.min(e.length-1,Math.floor(s.progress*e.length)))}});return()=>d.kill()},[e.length]),(0,t.jsxs)(ew,{id:"delivery-flow",bg:"charcoal",children:[(0,t.jsx)(ex,{n:"07",eyebrow:"Door to Door Delivery",title:(0,t.jsxs)(t.Fragment,{children:["Door-to-door ",(0,t.jsx)("span",{className:"accent",children:"logistics"}),", simplified"]}),lede:"One continuous lifecycle — from the moment an order is picked up to the moment it's signed for at the door — visible at every stage, for every stakeholder."}),(0,t.jsxs)("div",{className:"sw-edge sw-flow",ref:a,children:[(0,t.jsx)("div",{className:"sw-flow-bg","aria-hidden":"true",children:(0,t.jsx)("img",{src:"/images/miletruth-bg.webp",alt:"",loading:"lazy",decoding:"async"})}),(0,t.jsxs)("div",{className:"sw-flow-rail",children:[e.map((e,s)=>(0,t.jsxs)("div",{className:"sw-flow-stage",ref:e=>{o.current[s]=e},children:[(0,t.jsx)("span",{className:"sw-flow-num",children:String(s+1).padStart(2,"0")}),(0,t.jsx)("span",{className:"sw-flow-ic",children:e.icon}),(0,t.jsx)("span",{className:"sw-flow-label",children:e.label}),(0,t.jsx)("span",{className:"sw-flow-note",children:e.note})]},e.label)),(0,t.jsxs)("div",{className:"sw-flow-track","aria-hidden":"true",children:[(0,t.jsx)("span",{className:"sw-flow-track-fill"}),(0,t.jsx)("span",{className:"sw-flow-marker"})]})]})]})]})}function eB({sectionId:e="miletruth"}={}){let i=[{icon:ee,label:"Logistics Data",note:"Every completed trip"},{icon:et,label:"MileTruth AI",note:"Patterns & anomalies"},{icon:es,label:"Recommendations",note:"What to change"},{icon:ei,label:"Improvement",note:"Measured lift"}];return(0,t.jsx)(ew,{id:e,bg:"mesh",children:(0,t.jsxs)("div",{className:"sw-split",children:[(0,t.jsxs)("div",{className:"sw-mt-copy",children:[(0,t.jsx)(ex,{n:"08",eyebrow:"MileTruth AI",title:(0,t.jsxs)(t.Fragment,{children:["MileTruth",(0,t.jsx)("span",{className:"sw-tm",children:"™"})," ",(0,t.jsx)("span",{className:"accent",children:"AI"})]}),lede:"MileTruth continuously analyzes every completed shipment — turning raw operational data into recommendations that make the next mile faster, cheaper and more reliable.",className:"sw-head--split"}),(0,t.jsx)("div",{className:"sw-mt-flow",children:i.map((e,r)=>(0,t.jsxs)(s.default.Fragment,{children:[(0,t.jsxs)(a.motion.div,{className:"sw-mt-step",initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.5,delay:.12*r},children:[(0,t.jsx)("span",{className:"sw-mt-step-ic",children:e.icon}),(0,t.jsx)("span",{className:"sw-mt-step-label",children:e.label}),(0,t.jsx)("span",{className:"sw-mt-step-note",children:e.note})]}),r<i.length-1&&(0,t.jsx)("span",{className:"sw-veh-arrow","aria-hidden":"true",children:"→"})]},e.label))}),(0,t.jsx)("div",{className:"sw-mt-feats",children:[{icon:Z,label:"SLA Monitoring"},{icon:eo,label:"Demand Forecasting"},{icon:Y,label:"Route & Fleet Optimization"},{icon:ea,label:"Anomaly Detection"},{icon:ei,label:"Performance Insights"}].map(e=>(0,t.jsxs)("span",{className:"sw-mt-feat",children:[(0,t.jsx)("span",{className:"sw-mt-feat-ic",children:e.icon}),e.label]},e.label))})]}),(0,t.jsx)("div",{className:"sw-mt-canvas-col",children:(0,t.jsx)("div",{className:"sw-mt-canvas",children:(0,t.jsx)(P,{ariaLabel:"MileTruth AI learning loop — shipment data feeds the AI core, which issues recommendations whose measured results feed the next shipment"})})})]})})}let e_=["Order #48213 delivered — Chennai Zone 4","Fleet driver assigned — TN 09 CD 7790","SLA risk flagged — Route 12, rerouting","Pickup confirmed — OTP verified, Anna Nagar","EV charging stop scheduled — Fleet 3","98.5% on-time — last 24 hours"];function eV(){let[e,i]=(0,s.useState)(()=>e_.slice(0,4)),r=(0,s.useRef)(4),o=(0,s.useRef)(0);return(0,s.useEffect)(()=>{let e=setInterval(()=>{let e=o.current,t=r.current;i(s=>{let i=[...s];return i[e]=e_[t%e_.length],i}),o.current=(e+1)%4,r.current=t+1},2500);return()=>clearInterval(e)},[]),(0,t.jsx)("div",{className:"sw-feed",children:e.map((e,s)=>(0,t.jsx)("div",{className:"sw-feed-slot",children:(0,t.jsx)(y,{initial:!1,mode:"wait",children:(0,t.jsxs)(a.motion.div,{className:"sw-feed-row",initial:{opacity:0,y:8},animate:{opacity:1,y:0},exit:{opacity:0,y:-8},transition:{duration:.32,ease:[.16,1,.3,1]},children:[(0,t.jsx)("span",{className:"sw-livedot"}),e]},e)})},s))})}function e$(){let[e,i]=(0,s.useState)({activeFleet:482,shipments:3140,sla:98.5,exceptions:12}),[r,o]=(0,s.useState)([68,22,10]),[n,l]=(0,s.useState)([38,52,46,61,58,72,66]),[d,c]=(0,s.useState)([12,34,62,48,20,8,44,70,58,30,16,52,66,40,22,10,36,60,54,28,14,46,64,38,20,8,30,56]),[p,h]=(0,s.useState)([]),[w,m]=(0,s.useState)([{id:"TN 01 EV 1234",status:"On Route",eta:"12 min",tone:"moving"},{id:"TN 04 AB 5521",status:"Delayed",eta:"28 min",tone:"delayed"},{id:"TN 09 CD 7790",status:"Loading",eta:"—",tone:"loading"},{id:"TN 02 XY 3348",status:"Idle",eta:"—",tone:"idle"}]);(0,s.useEffect)(()=>{if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;let e=setInterval(()=>{i(e=>({activeFleet:Math.max(476,Math.min(489,e.activeFleet+(Math.random()>.5?1:-1)*(Math.random()>.72?2:1))),shipments:e.shipments+1+Math.floor(3*Math.random()),sla:Math.max(98.3,Math.min(98.7,Number((e.sla+(Math.random()>.5?.1:-.1)).toFixed(1)))),exceptions:Math.max(9,Math.min(15,e.exceptions+(Math.random()>.72?Math.random()>.5?1:-1:0)))}))},2600),t=setInterval(()=>{let e=66+Math.round(4*Math.random()),t=9+Math.round(2*Math.random());o([e,100-e-t,t])},4200),s=setInterval(()=>{l(e=>e.map(e=>Math.max(32,Math.min(78,e+Math.round(6*Math.random()-3)))))},3200),r=setInterval(()=>{let e=Array.from({length:4},()=>Math.floor(28*Math.random()));h(e),c(t=>t.map((t,s)=>e.includes(s)?Math.max(8,Math.min(72,t+Math.round(18*Math.random()-9))):t)),window.setTimeout(()=>h([]),900)},2100),a=[{status:"On Route",tone:"moving"},{status:"Loading",tone:"loading"},{status:"Delayed",tone:"delayed"},{status:"Idle",tone:"idle"}],n=setInterval(()=>{m(e=>{let t=Math.floor(Math.random()*e.length),s=a[Math.floor(Math.random()*a.length)];return e.map((e,i)=>{if(i!==t)return e;let r="idle"===s.tone||"loading"===s.tone?"—":`${6+Math.floor(24*Math.random())} min`;return{...e,...s,eta:r}})})},5200);return()=>{clearInterval(e),clearInterval(t),clearInterval(s),clearInterval(r),clearInterval(n)}},[]);let x=[{icon:J,value:e.activeFleet,label:"Active Fleet"},{icon:X,value:e.shipments,label:"Shipments Today"},{icon:eo,value:e.sla,decimals:1,suffix:"%",label:"SLA Compliance"},{icon:ea,value:e.exceptions,label:"Open Exceptions"}],g=[{pct:r[0],color:"var(--sw-red)"},{pct:r[1],color:"rgba(17,24,39,0.3)"},{pct:r[2],color:"rgba(17,24,39,0.12)"}],f=2*Math.PI*15.9155,u=0;return(0,t.jsxs)(ew,{id:"ops-dashboard",bg:"white",children:[(0,t.jsx)(ex,{n:"09",eyebrow:"Operations Dashboard",title:(0,t.jsxs)(t.Fragment,{children:["Operations ",(0,t.jsx)("span",{className:"accent",children:"dashboard"})]}),lede:"One control tower for every operations team — fleet, drivers, shipments, exceptions, analytics and reports, all live in a single view."}),(0,t.jsxs)("div",{className:"sw-panel sw-dash",children:[(0,t.jsxs)("div",{className:"sw-dash-chrome",children:[(0,t.jsxs)("span",{className:"sw-dash-brand",children:[(0,t.jsx)("span",{className:"sw-livedot"}),"Doormile Operations"]}),(0,t.jsx)("span",{className:"sw-dash-live",children:"LIVE · Updated just now"})]}),(0,t.jsx)("div",{className:"sw-dash-kpis",children:x.map((e,s)=>(0,t.jsxs)(a.motion.div,{className:"sw-kpi-tile",initial:{opacity:0,y:18},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.5,delay:.08*s},children:[(0,t.jsx)("span",{className:"sw-kpi-tile-ic",children:e.icon}),(0,t.jsx)("b",{className:"sw-kpi-val",children:(0,t.jsx)(ef,{to:e.value,decimals:e.decimals??0,suffix:e.suffix??""})}),(0,t.jsx)("span",{className:"sw-kpi-label",children:e.label})]},e.label))}),(0,t.jsxs)("div",{className:"sw-dash-body",children:[(0,t.jsxs)(a.motion.div,{className:"sw-dash-panel",initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.5},children:[(0,t.jsx)("span",{className:"sw-dash-panel-h",children:"Shipment Status Mix"}),(0,t.jsxs)("div",{className:"sw-ring-wrap",children:[(0,t.jsxs)("svg",{viewBox:"0 0 36 36",className:"sw-ring",children:[(0,t.jsx)("circle",{cx:"18",cy:"18",r:"15.9155",className:"sw-ring-track"}),g.map((e,s)=>{let i=e.pct/100*f,r=`${i} ${f-i}`,o=-u;return u+=i,(0,t.jsx)(a.motion.circle,{cx:"18",cy:"18",r:"15.9155",fill:"none",stroke:e.color,strokeWidth:"3.2",animate:{strokeDasharray:r,strokeDashoffset:o},transition:{duration:.75,ease:[.16,1,.3,1]},transform:"rotate(-90 18 18)"},s)})]}),(0,t.jsxs)("div",{className:"sw-ring-center",children:[(0,t.jsxs)("b",{children:[e.sla.toFixed(1),"%"]}),(0,t.jsx)("span",{children:"On-Time"})]})]}),(0,t.jsxs)("div",{className:"sw-ring-legend",children:[(0,t.jsxs)("span",{children:[(0,t.jsx)("i",{style:{background:"var(--sw-red)"}}),"Delivered"]}),(0,t.jsxs)("span",{children:[(0,t.jsx)("i",{style:{background:"rgba(17,24,39,0.3)"}}),"In Transit"]}),(0,t.jsxs)("span",{children:[(0,t.jsx)("i",{style:{background:"rgba(17,24,39,0.12)"}}),"Delayed"]})]})]}),(0,t.jsxs)(a.motion.div,{className:"sw-dash-panel",initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.5,delay:.08},children:[(0,t.jsx)("span",{className:"sw-dash-panel-h",children:"Weekly Shipment Volume"}),(0,t.jsx)("div",{className:"sw-bars",children:n.map((e,s)=>(0,t.jsx)(a.motion.span,{className:"sw-bar",animate:{height:`${e}%`},initial:{scaleY:0},whileInView:{scaleY:1},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.75,delay:.04*s,ease:[.16,1,.3,1]}},s))})]}),(0,t.jsxs)(a.motion.div,{className:"sw-dash-panel",initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.5,delay:.16},children:[(0,t.jsx)("span",{className:"sw-dash-panel-h",children:"Zone Demand Heatmap"}),(0,t.jsx)("div",{className:"sw-heat",children:d.map((e,s)=>(0,t.jsx)(a.motion.span,{className:`sw-heat-cell${p.includes(s)?" is-hot":""}`,animate:{backgroundColor:`rgba(192,18,39,${.08+e/70*.6})`,opacity:1,scale:p.includes(s)?1.12:1},initial:{opacity:0,scale:.5},whileInView:{opacity:1,scale:1},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.45,delay:.006*s}},s))})]}),(0,t.jsxs)(a.motion.div,{className:"sw-dash-panel sw-dash-panel--fleet",initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.5,delay:.24},children:[(0,t.jsx)("span",{className:"sw-dash-panel-h",children:"Fleet Status"}),(0,t.jsx)("div",{className:"sw-fleet-list",children:w.map(e=>(0,t.jsxs)("div",{className:"sw-fleet-row",children:[(0,t.jsx)("span",{className:`sw-fleet-dot sw-fleet-dot--${e.tone}`}),(0,t.jsx)("span",{className:"sw-fleet-id",children:e.id}),(0,t.jsx)("span",{className:"sw-fleet-status",children:e.status}),(0,t.jsx)("span",{className:"sw-fleet-eta",children:e.eta})]},e.id))})]}),(0,t.jsxs)(a.motion.div,{className:"sw-dash-panel sw-dash-panel--wide",initial:{opacity:0,y:16},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-10% 0px"},transition:{duration:.5,delay:.3},children:[(0,t.jsx)("span",{className:"sw-dash-panel-h",children:"Live Activity"}),(0,t.jsx)(eV,{})]})]})]})]})}function eH(){return(0,t.jsxs)(ew,{id:"why-doormile",bg:"grey",children:[(0,t.jsx)(ex,{n:"10",eyebrow:"Enterprise Growth",title:(0,t.jsxs)(t.Fragment,{children:["Why businesses choose ",(0,t.jsx)("span",{className:"accent",children:"Doormile"})]}),lede:"An AI decision engine, SLA-first operations and enterprise-grade scale — built to move from pickup to doorstep without the guesswork."}),(0,t.jsx)("div",{className:"sw-kpi10-grid",children:[{icon:eo,value:99.9,decimals:1,suffix:"%",label:"Dispatch Accuracy"},{icon:el,value:45,suffix:"ms",label:"Decision Time"},{icon:en,text:"24/7",label:"Live Monitoring"},{icon:Z,value:100,suffix:"%",label:"SLA First"},{icon:er,text:"Lower",label:"Operational Cost"},{icon:ed,text:"Enterprise",label:"Scale-Ready"}].map(e=>(0,t.jsxs)(eg,{className:"sw-kpi10-card",children:[(0,t.jsx)("span",{className:"sw-kpi10-shine","aria-hidden":"true"}),(0,t.jsx)("span",{className:"sw-kpi10-ic",children:e.icon}),(0,t.jsx)("b",{className:"sw-kpi10-val",children:e.text??(0,t.jsx)(z.CountUp,{end:e.value,decimals:e.decimals,suffix:e.suffix})}),(0,t.jsx)("span",{className:"sw-kpi10-label",children:e.label})]},e.label))})]})}function eW({children:e}){return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:eY}}),(0,t.jsxs)("div",{id:"sw-root",children:[(0,t.jsx)("div",{className:"sw-noise","aria-hidden":"true"}),e]})]})}function eG({children:e}){return(0,t.jsx)(eW,{children:e})}let eY=`
|
||
#sw-root {
|
||
--sw-red: #C01227;
|
||
--sw-red-bright: #E2354A;
|
||
--sw-line: rgba(255,255,255,0.09);
|
||
--sw-text-dim: rgba(255,255,255,0.68);
|
||
/* Shared inner-card padding — the same clamp() token .sw-panel already
|
||
uses for its own interior. Applied to .sw-in so every section's title,
|
||
heading, subtitle and other loose content sits clear of the card's
|
||
rounded edge instead of touching it, on the same single value site-wide
|
||
(see .sw-in and .sw-edge below). */
|
||
--sw-in-pad: clamp(16px, 3vw, 32px);
|
||
--fill: 0;
|
||
position: relative;
|
||
/* clip (not hidden) so it still contains horizontal overflow from the
|
||
section animations without creating a scroll container — the latter
|
||
would break the Sec06 sticky phone. */
|
||
overflow: clip;
|
||
/* No background color here: each section now paints its own colour
|
||
entirely within its inset, rounded .sw-bg card (see the section-rhythm
|
||
rule below), so the page's own white canvas shows through in the
|
||
gutters/gaps between cards — the same way it shows around the Hero
|
||
and Footer cards, instead of a dark fill masking the new spacing. */
|
||
}
|
||
#sw-root, #sw-root * { font-family: var(--font-manrope), "Manrope", sans-serif; box-sizing: border-box; }
|
||
|
||
#sw-root .sw-noise {
|
||
position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
||
background-size: 180px 180px;
|
||
}
|
||
|
||
/* ---- Section rhythm + width (one shared card system, matching Hero/Footer) ----
|
||
Every section is its own floating card, using EXACTLY the outer-spacing
|
||
system Hero and Footer already use: a 20px (10px ≤1024px) left/right inset
|
||
+ a 24px (20px ≤767px) corner radius on the coloured surface (.sw-bg),
|
||
plus a single 40/32/24px (desktop/≤1024/≤767) gap between every stacked
|
||
card — Hero-to-Section-1, Section-to-Section, and Section-10-to-Footer
|
||
alike. One token pair drives all 10 sections; nothing here is
|
||
section-specific, so every section's outer spacing is identical. */
|
||
#sw-root .sw-sec { position: relative; padding: 96px 0; margin-top: 40px; overflow: clip; }
|
||
/* Left/right margin measured directly off the live Hero and Footer
|
||
containers (20px above the 1024px breakpoint, 10px at/below) — one
|
||
shared horizontal margin every section inherits through .sw-in, never
|
||
overridden per-section, so every section's edges land on the same
|
||
vertical grid as the Hero and Footer. */
|
||
#sw-root .sw-in { position: relative; z-index: 1; width: calc(100% - 40px); margin: 0 auto; padding: 0 var(--sw-in-pad); }
|
||
#sw-root .sw-bg { position: absolute; left: 20px; right: 20px; top: 0; bottom: 0; z-index: 0; border-radius: 24px; overflow: hidden; }
|
||
#sw-root #routing.sw-sec,
|
||
#sw-root #quantum.sw-sec { padding-top: clamp(24px, 3.5vw, 44px) !important; padding-bottom: clamp(24px, 3.5vw, 44px) !important; margin-top: 24px !important; }
|
||
#sw-root #quantum .sw-head,
|
||
#sw-root #routing .sw-head { margin-bottom: 24px !important; }
|
||
|
||
/* Poster-scale Header Layout for Quantum Engine (Matching "The Doormile Way") */
|
||
#sw-root .sw-qhead {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
margin-bottom: clamp(24px, 3vw, 36px);
|
||
width: 100%;
|
||
}
|
||
#sw-root .sw-qhead-kicker {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
}
|
||
#sw-root .sw-qhead-eyebrow {
|
||
font-size: 13.5px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
color: #6b7280;
|
||
margin-bottom: 14px;
|
||
text-transform: uppercase;
|
||
}
|
||
#sw-root .sw-qhead-divider {
|
||
width: 100%;
|
||
height: 1px;
|
||
border: none;
|
||
background-color: rgba(0, 0, 0, 0.12);
|
||
margin: 0 0 24px 0;
|
||
}
|
||
#sw-root .sw-qhead-stroke-title {
|
||
margin: 0 0 24px 0;
|
||
font-weight: 800;
|
||
letter-spacing: -0.01em !important;
|
||
line-height: 1.1;
|
||
color: #ffffff !important;
|
||
-webkit-text-stroke: 2px #dc2626;
|
||
font-size: clamp(34px, 4.8vw, 68px);
|
||
text-transform: none;
|
||
}
|
||
#sw-root .sw-qhead-split {
|
||
display: grid;
|
||
grid-template-columns: 1.15fr 1fr;
|
||
gap: clamp(28px, 4.5vw, 56px);
|
||
align-items: flex-start;
|
||
margin-top: 8px;
|
||
}
|
||
#sw-root .sw-qhead-h2 {
|
||
font-size: clamp(24px, 2.8vw, 36px);
|
||
font-weight: 800;
|
||
line-height: 1.35;
|
||
letter-spacing: -0.015em;
|
||
color: #111827;
|
||
margin: 0;
|
||
text-transform: none !important;
|
||
}
|
||
#sw-root .sw-qhead-desc {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
#sw-root .sw-qhead-desc p {
|
||
font-size: 15px;
|
||
line-height: 1.7;
|
||
color: #4b5563;
|
||
margin: 0;
|
||
font-weight: 450;
|
||
}
|
||
@media (max-width: 900px) {
|
||
#sw-root .sw-qhead-split {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
}
|
||
#sw-root .sw-bg--grey { background: #121212; }
|
||
#sw-root .sw-bg--charcoal { background: #171717; }
|
||
#sw-root .sw-bg--charcoal::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: radial-gradient(90% 60% at 50% 0%, rgba(255,255,255,0.035) 0%, transparent 60%);
|
||
}
|
||
/* The grid-line pattern fades out in a vignette (via mask-image on its own
|
||
::before layer, not on .sw-bg itself) so only the pattern softens toward
|
||
the edges — the card's own #141414 fill stays fully opaque right up to
|
||
its rounded corners, same as every other section's card. Masking .sw-bg
|
||
directly would fade the fill too, showing the page's white canvas through
|
||
the middle of the card instead of a clean rounded edge. */
|
||
#sw-root .sw-bg--graph { background: #141414; }
|
||
#sw-root .sw-bg--graph::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
|
||
background-size: 54px 54px;
|
||
-webkit-mask-image: radial-gradient(85% 75% at 50% 35%, #000 45%, transparent 100%);
|
||
mask-image: radial-gradient(85% 75% at 50% 35%, #000 45%, transparent 100%);
|
||
}
|
||
#sw-root .sw-bg--mesh { background: #141414; }
|
||
#sw-root .sw-bg--mesh::before, #sw-root .sw-bg--mesh::after { content: ''; position: absolute; border-radius: 50%; }
|
||
#sw-root .sw-bg--mesh::before { width: 62vw; height: 62vw; left: -16vw; top: -20vw; background: radial-gradient(circle, rgba(192,18,39,0.26) 0%, transparent 70%); }
|
||
#sw-root .sw-bg--mesh::after { width: 48vw; height: 48vw; right: -12vw; bottom: -18vw; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%); }
|
||
#sw-root .sw-bg--redglow { background: #121212; }
|
||
#sw-root .sw-bg--redglow::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background: radial-gradient(65% 60% at 50% 12%, rgba(226,53,74,0.36) 0%, transparent 70%),
|
||
radial-gradient(45% 45% at 85% 92%, rgba(192,18,39,0.2) 0%, transparent 70%);
|
||
}
|
||
/* Smooth, non-repeating "engine" ground — a soft vignette + a single
|
||
ambient glow centered behind the core. No grid, no tiling, no pattern. */
|
||
#sw-root .sw-bg--engine {
|
||
background:
|
||
radial-gradient(46% 40% at 50% 40%, rgba(226,53,74,0.16) 0%, transparent 72%),
|
||
radial-gradient(120% 90% at 50% 0%, #171414 0%, #101010 55%, #0c0c0c 100%);
|
||
}
|
||
/* A faint diagonal texture — just enough "logistics grid" ground under
|
||
Sec04's AI Decision Engine panel without competing with the glass cards
|
||
and animated metrics that sit on top of it. */
|
||
#sw-root .sw-bg--logisticsgrid {
|
||
background: #141414;
|
||
background-image:
|
||
repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 26px),
|
||
repeating-linear-gradient(-45deg, rgba(192,18,39,0.028) 0 2px, transparent 2px 26px);
|
||
}
|
||
|
||
/* ---- Head ---- */
|
||
#sw-root .sw-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 820px; }
|
||
#sw-root .sw-head--center { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
|
||
#sw-root .sw-head--split { max-width: none; margin-bottom: clamp(30px, 3.4vw, 42px); }
|
||
#sw-root .sw-eyebrow {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
color: var(--sw-red-bright) !important; font-weight: 800; text-transform: uppercase;
|
||
letter-spacing: 0.16em; font-size: 12.5px; margin-bottom: 20px;
|
||
}
|
||
#sw-root .sw-head--center .sw-eyebrow { justify-content: center; }
|
||
#sw-root .sw-eyebrow b {
|
||
color: #fff !important; background: var(--sw-red); border-radius: 6px;
|
||
padding: 2px 7px; font-size: 11.5px; letter-spacing: 0.04em;
|
||
}
|
||
#sw-root .sw-eyebrow--slash {
|
||
color: #6b7280 !important;
|
||
font-weight: 500 !important;
|
||
font-size: 13.5px !important;
|
||
letter-spacing: 0.05em !important;
|
||
background: none !important;
|
||
padding: 0 !important;
|
||
}
|
||
#sw-root .sw-h {
|
||
color: #fff !important; font-weight: 800 !important;
|
||
font-size: clamp(30px, 4vw, 52px) !important; line-height: 1.14 !important;
|
||
letter-spacing: -0.02em; margin: 0 0 18px !important;
|
||
}
|
||
#sw-root .sw-h .accent { color: var(--sw-red-bright) !important; }
|
||
#sw-root .sw-tm { font-size: 0.5em; vertical-align: super; }
|
||
#sw-root .sw-lede { color: var(--sw-text-dim) !important; font-size: clamp(15.5px, 1.15vw, 19px) !important; line-height: 1.65 !important; margin: 0 !important; font-weight: 400 !important; max-width: 620px; }
|
||
#sw-root .sw-head--center .sw-lede,
|
||
#quantum .sw-head--center .sw-lede,
|
||
.sw-head--center .sw-lede {
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
text-align: center !important;
|
||
}
|
||
|
||
/* ---- White section overrides ---- */
|
||
#sw-root .sw-sec--white .sw-eyebrow,
|
||
#sw-root #quantum .sw-eyebrow,
|
||
#quantum .sw-eyebrow { color: var(--sw-red-bright) !important; }
|
||
#sw-root .sw-sec--white .sw-eyebrow b,
|
||
#sw-root #quantum .sw-eyebrow b,
|
||
#quantum .sw-eyebrow b { background: var(--sw-red); color: #fff !important; }
|
||
|
||
#sw-root .sw-sec--white h2,
|
||
#sw-root .sw-sec--white .sw-h,
|
||
#sw-root #quantum h2,
|
||
#sw-root #quantum .sw-h,
|
||
#quantum h2,
|
||
#quantum .sw-h,
|
||
div#sw-root section#quantum h2.sw-h,
|
||
.logico-front-end #quantum h2,
|
||
.elementor-59 #quantum h2 { color: #111827 !important; }
|
||
|
||
#sw-root .sw-sec--white h2 .accent,
|
||
#sw-root .sw-sec--white .sw-h .accent,
|
||
#sw-root #quantum h2 .accent,
|
||
#sw-root #quantum .sw-h .accent,
|
||
#quantum h2 .accent,
|
||
#quantum .sw-h .accent,
|
||
div#sw-root section#quantum h2.sw-h .accent,
|
||
.logico-front-end #quantum h2 .accent,
|
||
.elementor-59 #quantum h2 .accent { color: var(--sw-red-bright) !important; }
|
||
|
||
#sw-root .sw-sec--white p,
|
||
#sw-root .sw-sec--white .sw-lede,
|
||
#sw-root #quantum p,
|
||
#sw-root #quantum .sw-lede,
|
||
#quantum p,
|
||
#quantum .sw-lede,
|
||
div#sw-root section#quantum p.sw-lede,
|
||
.logico-front-end #quantum p,
|
||
.elementor-59 #quantum p { color: #4b5563 !important; }
|
||
|
||
/* ---- Split layout ---- */
|
||
#sw-root .sw-split { display: grid; grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.4fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
|
||
#sw-root .sw-split--reverse { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr); }
|
||
#sw-root #miletruth .sw-split { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.25fr); }
|
||
|
||
/* ---- Floating panel ---- */
|
||
#sw-root .sw-panel {
|
||
position: relative; width: 100%; border-radius: 24px;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
|
||
border: 1px solid var(--sw-line);
|
||
box-shadow: 0 50px 100px -50px rgba(0,0,0,0.7);
|
||
padding: clamp(16px, 3vw, 32px);
|
||
}
|
||
|
||
/* ---- Edge-to-edge (Hero-language) frame ----
|
||
These banners/media are deliberately meant to run flush to the section
|
||
card's own rounded edge (matching how Hero's banner image touches its own
|
||
card edge) — so they cancel out .sw-in's new inner padding with an equal
|
||
negative margin + width expansion, on the same --sw-in-pad token, instead
|
||
of adopting a padded, narrower frame like the rest of a section's content. */
|
||
#sw-root .sw-edge { position: relative; width: calc(100% + var(--sw-in-pad) * 2); margin: 0 calc(var(--sw-in-pad) * -1); border-radius: 24px; overflow: hidden; }
|
||
|
||
/* ---- Shared chip / arrow / livedot primitives ---- */
|
||
#sw-root .sw-veh-chip {
|
||
display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
|
||
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.11);
|
||
color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
|
||
}
|
||
#sw-root .sw-veh-arrow { color: rgba(255,255,255,0.28); font-size: 20px; flex-shrink: 0; align-self: center; }
|
||
#sw-root .sw-livedot {
|
||
width: 8px; height: 8px; border-radius: 50%; background: var(--sw-red-bright);
|
||
box-shadow: 0 0 0 0 rgba(226,53,74,0.55); animation: swPulse 1.8s ease-out infinite; flex-shrink: 0; display: inline-block;
|
||
}
|
||
@keyframes swPulse { 0% { box-shadow: 0 0 0 0 rgba(226,53,74,0.55); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
|
||
@keyframes swSpin { to { transform: rotate(360deg); } }
|
||
|
||
/* ================= SECTION 01 — AI Logistics Engine ================= */
|
||
/* A robust flex-column stack (no fixed min-height, no absolute-% guessing) so
|
||
the diagram's height always matches its content — no dead space. */
|
||
#sw-root .sw-eng { display: flex; flex-direction: column; align-items: center; }
|
||
|
||
#sw-root .sw-eng-order {
|
||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||
padding: 14px 24px; border-radius: 16px;
|
||
background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.14);
|
||
}
|
||
#sw-root .sw-eng-order-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(226,53,74,0.14); border: 1px solid rgba(226,53,74,0.35); color: var(--sw-red-bright); }
|
||
#sw-root .sw-eng-order-ic svg { width: 17px; height: 17px; }
|
||
#sw-root .sw-eng-order-label { color: #fff; font-weight: 700; font-size: 13.5px; }
|
||
#sw-root .sw-eng-order-note { color: rgba(255,255,255,0.5); font-size: 11px; }
|
||
|
||
/* Vertical connector: a short filled rail (no forced min-height container to fight). */
|
||
#sw-root .sw-eng-connector { position: relative; display: block; width: 2px; height: clamp(34px, 3.6vw, 52px); background: rgba(255,255,255,0.14); border-radius: 2px; margin: 6px 0; }
|
||
#sw-root .sw-eng-connector-fill { position: absolute; inset: 0; height: calc(var(--fill, 0) * 100%); background: linear-gradient(180deg, var(--sw-red), var(--sw-red-bright)); box-shadow: 0 0 10px rgba(226,53,74,0.7); border-radius: 2px; }
|
||
|
||
/* Engine row: core (processor panel, not a plain circle) + live decision readout. */
|
||
#sw-root .sw-eng-engine-row { display: flex; align-items: center; gap: clamp(24px, 3.2vw, 44px); margin: clamp(18px, 2.2vw, 26px) 0; }
|
||
|
||
#sw-root .sw-eng-core {
|
||
position: relative; flex-shrink: 0;
|
||
width: clamp(150px, 14vw, 188px); height: clamp(150px, 14vw, 188px); border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: radial-gradient(120% 120% at 50% 22%, rgba(192,18,39,0.22), rgba(12,12,12,0.97) 72%);
|
||
border: 1px solid rgba(226,53,74,0.35);
|
||
box-shadow: 0 0 40px -14px rgba(192,18,39,0.45), inset 0 0 26px rgba(0,0,0,0.5);
|
||
transition: box-shadow 0.6s ease, border-color 0.6s ease;
|
||
}
|
||
/* A gentle brighten while the AI is "deciding" — a calm cue, not a strobe. */
|
||
#sw-root .sw-eng-engine-row.is-active .sw-eng-core { border-color: rgba(226,53,74,0.6); box-shadow: 0 0 56px -10px rgba(192,18,39,0.6), inset 0 0 26px rgba(0,0,0,0.5); }
|
||
/* A radar-style scan sweep inside the core — always turning slowly at
|
||
rest, spinning up sharply while "is-active" — so the core itself visibly
|
||
computes instead of just glowing brighter. Clipped to the core's own
|
||
rounded shape via overflow:hidden on this wrapper. */
|
||
#sw-root .sw-eng-core-scan { position: absolute; inset: 2px; border-radius: 25px; overflow: hidden; z-index: 1; opacity: 0.55; }
|
||
#sw-root .sw-eng-core-scan::before {
|
||
content: ''; position: absolute; inset: -60%;
|
||
background: conic-gradient(from 0deg, transparent 0deg, rgba(226,53,74,0.65) 28deg, transparent 68deg, transparent 360deg);
|
||
animation: swCoreScan 5s linear infinite;
|
||
}
|
||
#sw-root .sw-eng-engine-row.is-active .sw-eng-core-scan { opacity: 0.95; }
|
||
#sw-root .sw-eng-engine-row.is-active .sw-eng-core-scan::before { animation-duration: 0.9s; }
|
||
@keyframes swCoreScan { to { transform: rotate(360deg); } }
|
||
#sw-root .sw-eng-core-bracket { position: absolute; width: 22px; height: 22px; border-color: rgba(226,53,74,0.55); border-style: solid; border-width: 0; z-index: 2; }
|
||
#sw-root .sw-eng-core-bracket--tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
|
||
#sw-root .sw-eng-core-bracket--tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
|
||
#sw-root .sw-eng-core-bracket--bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
|
||
#sw-root .sw-eng-core-bracket--br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
|
||
|
||
#sw-root .sw-eng-orbit { position: absolute; inset: 0; animation: swSpin 12s linear infinite; }
|
||
#sw-root .sw-eng-engine-row.is-active .sw-eng-orbit { animation-duration: 2.6s; }
|
||
#sw-root .sw-eng-orbit-dot {
|
||
position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px;
|
||
border-radius: 50%; background: var(--sw-red-bright); box-shadow: 0 0 8px rgba(226,53,74,0.8); opacity: 0.7;
|
||
transform: rotate(calc(var(--i) * 45deg)) translateX(clamp(84px, 8vw, 104px));
|
||
}
|
||
|
||
#sw-root .sw-eng-core-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 9px; }
|
||
#sw-root .sw-eng-core-logo { width: clamp(52px, 4.6vw, 66px); height: auto; filter: drop-shadow(0 0 10px rgba(226,53,74,0.5)); }
|
||
#sw-root .sw-eng-core-wave { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
|
||
#sw-root .sw-eng-core-wave span { width: 3px; border-radius: 2px; background: var(--sw-red-bright); animation: swWave 1.3s ease-in-out infinite; }
|
||
#sw-root .sw-eng-core-wave span:nth-child(1) { height: 40%; animation-delay: 0s; }
|
||
#sw-root .sw-eng-core-wave span:nth-child(2) { height: 80%; animation-delay: 0.12s; }
|
||
#sw-root .sw-eng-core-wave span:nth-child(3) { height: 100%; animation-delay: 0.24s; }
|
||
#sw-root .sw-eng-core-wave span:nth-child(4) { height: 65%; animation-delay: 0.36s; }
|
||
#sw-root .sw-eng-core-wave span:nth-child(5) { height: 45%; animation-delay: 0.48s; }
|
||
#sw-root .sw-eng-engine-row.is-active .sw-eng-core-wave span { animation-duration: 0.5s; }
|
||
@keyframes swWave { 0%, 100% { transform: scaleY(0.4); opacity: 0.6; } 50% { transform: scaleY(1); opacity: 1; } }
|
||
#sw-root .sw-eng-core-tag { color: rgba(255,255,255,0.5); font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; }
|
||
|
||
#sw-root .sw-eng-readout { display: flex; flex-direction: column; gap: 11px; padding: 18px 22px; border-radius: 16px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); min-width: clamp(200px, 20vw, 240px); }
|
||
#sw-root .sw-eng-readout-title { color: rgba(255,255,255,0.45); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
|
||
#sw-root .sw-eng-readout-row { display: flex; align-items: center; gap: 11px; opacity: 0.4; transition: opacity 0.3s ease; }
|
||
#sw-root .sw-eng-readout-indicator { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
|
||
#sw-root .sw-eng-readout-dot { position: absolute; top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); }
|
||
#sw-root .sw-eng-readout-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(226,53,74,0.5); animation: swReadoutPulse 1.3s ease-out infinite; }
|
||
@keyframes swReadoutPulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } }
|
||
#sw-root .sw-eng-readout-check { position: absolute; inset: 0; border-radius: 50%; background: var(--sw-red); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; }
|
||
#sw-root .sw-eng-readout-check svg { width: 10px; height: 10px; stroke-width: 3; }
|
||
#sw-root .sw-eng-readout-label { color: #fff; font-size: 13px; font-weight: 600; }
|
||
|
||
/* Fan-out: a small, self-sized SVG (not a full-height overlay) linking the
|
||
engine to its three simultaneous outputs. */
|
||
#sw-root .sw-eng-fan { display: block; width: min(360px, 78%); height: clamp(44px, 4.6vw, 60px); }
|
||
#sw-root .sw-eng-fan path { fill: none; stroke: rgba(226,53,74,0.45); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
|
||
|
||
#sw-root .sw-eng-outputs { display: flex; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; justify-content: center; }
|
||
#sw-root .sw-eng-out {
|
||
display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
|
||
width: 148px; padding: 16px 14px; border-radius: 16px;
|
||
background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
#sw-root .sw-eng-out-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(226,53,74,0.12); border: 1px solid rgba(226,53,74,0.3); color: var(--sw-red-bright); }
|
||
#sw-root .sw-eng-out-ic svg { width: 20px; height: 20px; }
|
||
#sw-root .sw-eng-out-label { color: #fff; font-weight: 700; font-size: 13px; }
|
||
#sw-root .sw-eng-out-note { color: rgba(255,255,255,0.55); font-size: 11px; line-height: 1.35; }
|
||
|
||
#sw-root .sw-eng-tracking { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 16px 26px; border-radius: 16px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); }
|
||
|
||
#sw-root .sw-eng-delivered {
|
||
display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
|
||
background: rgba(10,10,10,0.85); border: 1px solid rgba(226,53,74,0.5); color: #fff; font-weight: 700; font-size: 13px;
|
||
}
|
||
#sw-root .sw-eng-delivered-ic { color: var(--sw-red-bright); display: flex; }
|
||
#sw-root .sw-eng-delivered-ic svg { width: 16px; height: 16px; }
|
||
#sw-root .sw-eng-delivered em { font-style: normal; color: rgba(255,255,255,0.55); font-weight: 500; }
|
||
|
||
@media (max-width: 767px) {
|
||
#sw-root .sw-eng-engine-row { flex-direction: column; gap: 20px; }
|
||
#sw-root .sw-eng-fan { display: none; }
|
||
}
|
||
|
||
/* ================= SECTION 02 — Pickup (van-driven) ================= */
|
||
/* Flush with the shared .sw-edge (width: 100%) — the same outer frame
|
||
every other full-width section's primary panel uses (01, 04, 05, 07,
|
||
09, 10). This used to carry its own margin + compensating width
|
||
reduction to inset the whole layered scene, which broke alignment with
|
||
every other section's outer edge. Section 05's canvas gets breathing
|
||
room at its own inner layer (.wf-scene), not on its outer frame
|
||
(.qs-frame) — that's a per-scene styling choice, not part of the
|
||
shared container, so it isn't reproduced here. */
|
||
#sw-root .sw-pickup { position: relative; min-height: clamp(460px, 44vw, 600px); overflow: hidden; border-radius: 16px; }
|
||
/* The source photo is square and the section is always wider than tall, so
|
||
object-fit: cover never crops horizontally here — only object-position's Y
|
||
matters. Biased down so the frame keeps the storefront (origin), the
|
||
parked van's open door (pickup point) AND the open pavement the animated
|
||
van actually drives across, instead of a crop that shows only the cargo
|
||
shelves. */
|
||
#sw-root .sw-pickup-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; transform-origin: 45% 78%; will-change: transform; }
|
||
#sw-root .sw-pickup-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.42) 40%, rgba(0,0,0,0.9) 100%); }
|
||
|
||
#sw-root .sw-pickup-ai-badge {
|
||
position: absolute; top: 20px; left: 20px; z-index: 4; display: inline-flex; align-items: center; gap: 9px;
|
||
padding: 8px 14px; border-radius: 999px; background: rgba(10,10,10,0.72); border: 1px solid rgba(255,255,255,0.16);
|
||
color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; backdrop-filter: blur(8px);
|
||
}
|
||
#sw-root .sw-pickup-ai-indicator { position: relative; width: 8px; height: 8px; }
|
||
#sw-root .sw-pickup-ai-check { position: absolute; top: -5px; left: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--sw-red); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; }
|
||
#sw-root .sw-pickup-ai-check svg { width: 10px; height: 10px; stroke-width: 3; }
|
||
#sw-root .sw-pickup-confirm { position: absolute; top: 18px; right: 20px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(10,10,10,0.88); border: 1px solid rgba(226,53,74,0.5); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
|
||
#sw-root .sw-pickup-confirm svg { width: 16px; height: 16px; color: var(--sw-red-bright); flex-shrink: 0; }
|
||
|
||
/* A real road, not an abstract line: a dark asphalt band (with contact
|
||
shadow) carries a static white dashed lane marking, and the bright red
|
||
GPS-style route draws on top of it as the van advances — same shape
|
||
the reviewer asked for (subtle road texture + nav polyline). All strokes
|
||
use non-scaling-stroke so their screen-pixel width stays constant despite
|
||
the viewBox being stretched non-uniformly (preserveAspectRatio="none") to
|
||
the section's wide, short aspect ratio. */
|
||
#sw-root .sw-pickup-road { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
|
||
#sw-root .sw-pickup-road-shadow { fill: none; stroke: rgba(0,0,0,0.5); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: blur(2px); }
|
||
#sw-root .sw-pickup-road-path { fill: none; stroke: rgba(12,12,14,0.62); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
|
||
#sw-root .sw-pickup-road-lane { fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 8; vector-effect: non-scaling-stroke; }
|
||
/* Nav-style route: the full path stays neutral grey (untravelled), and the
|
||
red progress line is drawn exactly on top of it up to the van's current
|
||
position only — so the road ahead of the van is always visibly "not
|
||
done yet" instead of the whole route reading as complete at once. */
|
||
#sw-root .sw-pickup-road-remaining { fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
|
||
/* No vector-effect here, unlike the other road layers: non-scaling-stroke
|
||
makes Chromium interpret stroke-dasharray/-dashoffset in screen-space
|
||
rather than the userspace units getTotalLength() returns, so the "fully
|
||
drawn" dash only ever covered a fraction of the path (invisible against
|
||
the dark asphalt before the grey remaining-route layer existed to expose
|
||
it). Plain scaling stroke keeps dasharray math and rendering in the same
|
||
coordinate space, so the small width below is in viewBox units, not px. */
|
||
#sw-root .sw-pickup-road-progress { fill: none; stroke: var(--sw-red-bright); stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(226,53,74,0.9)); }
|
||
|
||
#sw-root .sw-pickup-dest { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
|
||
#sw-root .sw-pickup-dest svg { width: 26px; height: 26px; color: var(--sw-red-bright); filter: drop-shadow(0 0 8px rgba(226,53,74,0.7)); }
|
||
#sw-root .sw-pickup-dest span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(10,10,10,0.7); padding: 2px 8px; border-radius: 999px; }
|
||
|
||
/* The anchor point (left/top, set per-frame in JS) must land where the
|
||
wheels TOUCH the road — their bottom tangent, not the wheel's own center
|
||
— or the road line cuts through the middle of the wheels instead of
|
||
sitting under them. Wheel hubs are at y=50 with r=12 in a 66-tall
|
||
viewBox, so the contact line is y=62, i.e. 93.9% down — the transform
|
||
below (relative to the element's own box) does that lift and the
|
||
horizontal centering, instead of a negative-px margin, since the box is
|
||
now sized in %, not px. Sized to ~7% of the section width — proportional
|
||
to the real van visible in the background photo, not an oversized focal
|
||
prop. */
|
||
#sw-root .sw-pickup-van { position: absolute; top: 0; left: 0; width: 7%; aspect-ratio: 130 / 66; transform: translate(-50%, -93.9%); z-index: 6; }
|
||
/* A dedicated contact shadow, separate from the van body's rotate/bounce
|
||
chain, so it stays flat on the road while the body leans and bobs above
|
||
it — JS modulates opacity/scaleX with speed for a "following" feel.
|
||
Positioned right at the wheel-contact line (93.9%, see above). */
|
||
#sw-root .sw-pickup-van-shadow {
|
||
position: absolute; left: 4%; right: 4%; top: 90%; height: 12%;
|
||
background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.28) 55%, transparent 78%);
|
||
filter: blur(2.5px); opacity: 0.85; transform-origin: center; z-index: 0;
|
||
}
|
||
/* A trailing streak, not a blur on the sprite itself — sense of speed
|
||
without ever softening the van's own silhouette. Anchored to the
|
||
trailing (left) edge since the route runs left-to-right and the sprite
|
||
noses right to match (see the flip logic in Sec02); fades in only while
|
||
actually moving. */
|
||
#sw-root .sw-pickup-van-speedlines { position: absolute; top: 34%; left: -10%; width: 26%; height: 30%; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 0; }
|
||
#sw-root .sw-pickup-van.is-moving .sw-pickup-van-speedlines { opacity: 1; }
|
||
#sw-root .sw-pickup-van-speedlines i { position: absolute; right: 0; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65)); font-style: normal; }
|
||
#sw-root .sw-pickup-van-speedlines i:nth-child(1) { top: 0; width: 100%; }
|
||
#sw-root .sw-pickup-van-speedlines i:nth-child(2) { top: 45%; width: 72%; opacity: 0.75; }
|
||
#sw-root .sw-pickup-van-speedlines i:nth-child(3) { top: 88%; width: 48%; opacity: 0.55; }
|
||
/* Suspension bounce: a small continuous vertical oscillation, only while
|
||
the van is actually moving (toggled in JS from real frame-to-frame
|
||
speed) — stops cleanly at rest instead of looping forever. */
|
||
#sw-root .sw-pickup-van-bounce { position: relative; z-index: 1; width: 100%; height: 100%; }
|
||
#sw-root .sw-pickup-van-bounce.is-moving { animation: swVanBounce 0.38s ease-in-out infinite; }
|
||
@keyframes swVanBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
|
||
/* Idle "alive" state — plain CSS, not JS/scroll-driven, so it plays the
|
||
instant the van's markup paints (even before hydration) and during every
|
||
checkpoint dwell, not just the very first wait at Pickup Request: a
|
||
slow breathing bob plus a headlight blink give the van presence before
|
||
it starts moving, instead of it looking like a static, inert sticker
|
||
parked on the road. */
|
||
#sw-root .sw-pickup-van:not(.is-moving) .sw-pickup-van-bounce { animation: swVanIdleBob 3.2s ease-in-out infinite; }
|
||
@keyframes swVanIdleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6px); } }
|
||
#sw-root .sw-pickup-van:not(.is-moving) .sw-van-headlight { animation: swVanHeadlightBlink 2.6s ease-in-out infinite; }
|
||
@keyframes swVanHeadlightBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
|
||
/* Heading changes (set imperatively in JS) ease through this transition
|
||
instead of snapping — the overshoot in the curve reads as the van
|
||
banking into the turn before it settles straight. */
|
||
#sw-root .sw-pickup-van-rot { width: 100%; height: 100%; transition: transform 0.45s cubic-bezier(0.32, 1.45, 0.6, 1); }
|
||
/* Rim-light + contact shadow via filter (not per-shape outlines) so the
|
||
whole silhouette gets a consistent bright edge that separates it from
|
||
both the dark asphalt and the busy photo behind it. */
|
||
#sw-root .sw-van-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.95)) drop-shadow(0 0 4px rgba(255,255,255,0.35)) drop-shadow(0 4px 8px rgba(0,0,0,0.75)); }
|
||
/* A brief full-frame flash at "Package Collected" — punctuates the finish
|
||
without adding new persistent UI. */
|
||
#sw-root .sw-pickup-success-glow { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(60% 60% at 18% 84%, rgba(226,53,74,0.4) 0%, transparent 70%); }
|
||
|
||
/* The card's own top:0 is pinned 24px above its waypoint (half the 48px icon
|
||
height) so the checkpoint icon's CENTER lands exactly on the path — not the
|
||
card's bottom edge, which would leave the icon floating well above it.
|
||
z-index sits above .sw-pickup-van (6): the van's body reaches upward from
|
||
its wheel-contact point, the same point each checkpoint icon is centered
|
||
on, so the two necessarily share screen space right as the van arrives —
|
||
the checkpoint card stays on top through that moment instead of getting
|
||
covered. */
|
||
#sw-root .sw-pickup-stop {
|
||
position: absolute; transform: translate(-50%, -24px); z-index: 7; width: 148px; padding-top: 58px;
|
||
display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
|
||
opacity: 0.34; transition: opacity 0.45s ease;
|
||
}
|
||
#sw-root .sw-pickup-stop.is-active { opacity: 1; }
|
||
#sw-root .sw-pickup-stop-icwrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; }
|
||
#sw-root .sw-pickup-stop-ic {
|
||
position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
|
||
background: rgba(255,255,255,0.09); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.18);
|
||
transition: border-color 0.4s ease, box-shadow 0.4s ease;
|
||
}
|
||
#sw-root .sw-pickup-stop-ic svg { width: 24px; height: 24px; }
|
||
#sw-root .sw-pickup-stop.is-active .sw-pickup-stop-ic { border-color: rgba(226,53,74,0.6); box-shadow: 0 0 24px -6px rgba(192,18,39,0.85); animation: swCheckpointPop 0.5s ease-out; }
|
||
#sw-root .sw-pickup-stop-ripple { position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 14px; border: 2px solid rgba(226,53,74,0.6); opacity: 0; pointer-events: none; }
|
||
#sw-root .sw-pickup-stop.is-active .sw-pickup-stop-ripple { animation: swCheckpointRipple 0.7s ease-out; }
|
||
#sw-root .sw-pickup-stop-badge {
|
||
position: absolute; top: -5px; right: -5px; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
|
||
background: var(--sw-red); color: #fff; display: flex; align-items: center; justify-content: center;
|
||
opacity: 0; transform: scale(0.4); transition: opacity 0.25s ease, transform 0.25s ease;
|
||
}
|
||
#sw-root .sw-pickup-stop-badge svg { width: 10px; height: 10px; stroke-width: 3; }
|
||
#sw-root .sw-pickup-stop.is-active .sw-pickup-stop-badge { opacity: 1; transform: scale(1); }
|
||
@keyframes swCheckpointPop { 0% { transform: scale(1); } 45% { transform: scale(1.26); } 100% { transform: scale(1); } }
|
||
@keyframes swCheckpointRipple { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
|
||
#sw-root .sw-pickup-stop-label { color: #fff; font-weight: 700; font-size: 13px; }
|
||
#sw-root .sw-pickup-stop-note { color: rgba(255,255,255,0.55); font-size: 11.5px; line-height: 1.4; }
|
||
|
||
@media (max-width: 700px) {
|
||
#sw-root .sw-pickup-confirm, #sw-root .sw-pickup-road, #sw-root .sw-pickup-van, #sw-root .sw-pickup-dest { display: none; }
|
||
#sw-root .sw-pickup { min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 16px; padding: 56px 16px 24px; width: 100%; margin: 0; }
|
||
#sw-root .sw-pickup-stop { position: relative; top: auto !important; left: auto !important; transform: none !important; padding-top: 0; width: 44%; opacity: 1 !important; }
|
||
#sw-root .sw-pickup-stop-icwrap { position: relative; margin: 0 auto; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
#sw-root .sw-pickup-stop.is-active .sw-pickup-stop-ic, #sw-root .sw-pickup-stop.is-active .sw-pickup-stop-ripple { animation: none; }
|
||
}
|
||
|
||
/* ================= SECTION 03 — Vehicle AI (split) ================= */
|
||
#sw-root #vehicle-ai { padding-top: clamp(24px, 3vw, 40px) !important; padding-bottom: clamp(24px, 3vw, 40px) !important; }
|
||
#sw-root #vehicle-ai .sw-split { align-items: stretch; gap: clamp(24px, 3.5vw, 48px); }
|
||
#sw-root .sw-veh-stage { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--sw-line); background: #0b0f17; padding: clamp(20px, 2.5vw, 32px) clamp(14px, 2vw, 24px); display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
|
||
#sw-root .sw-veh-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.14; pointer-events: none; }
|
||
#sw-root .sw-veh-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85) contrast(1.1); }
|
||
#sw-root .sw-veh-scan { position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(226,53,74,0.35), transparent); pointer-events: none; }
|
||
/* Decision timeline — Analysing -> Comparing -> Filtering -> Selecting ->
|
||
Dispatch Ready — advanced imperatively (see Sec03's evaluate()) so the
|
||
overall stage of the AI's reasoning is always legible above the
|
||
moment-to-moment status line and card choreography below it. */
|
||
#sw-root .sw-veh-timeline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
|
||
#sw-root .sw-veh-tl-step { display: flex; align-items: center; gap: 6px; opacity: 0.38; transition: opacity 0.3s ease; }
|
||
#sw-root .sw-veh-tl-step:not(:last-child)::after { content: ''; width: 14px; height: 1px; background: rgba(255,255,255,0.18); margin-left: 6px; }
|
||
#sw-root .sw-veh-tl-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
|
||
#sw-root .sw-veh-tl-label { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
|
||
#sw-root .sw-veh-tl-step.is-done { opacity: 0.75; }
|
||
#sw-root .sw-veh-tl-step.is-done .sw-veh-tl-dot { background: rgba(226,53,74,0.65); }
|
||
#sw-root .sw-veh-tl-step.is-active { opacity: 1; }
|
||
#sw-root .sw-veh-tl-step.is-active .sw-veh-tl-dot { background: var(--sw-red-bright); box-shadow: 0 0 8px rgba(226,53,74,0.85); }
|
||
#sw-root .sw-veh-tl-step.is-active .sw-veh-tl-label { color: #fff; }
|
||
#sw-root .sw-veh-status { position: relative; z-index: 1; display: block; text-align: center; color: var(--sw-red-bright); font-weight: 700; font-size: 13.5px; letter-spacing: 0.02em; margin-bottom: clamp(22px, 2.6vw, 32px); min-height: 18px; }
|
||
#sw-root .sw-veh-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
|
||
#sw-root .sw-veh-card {
|
||
position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 18px;
|
||
background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); min-width: 106px; cursor: default;
|
||
transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
|
||
}
|
||
/* Rejection: a dark scrim + red X + reason ("Too Small", "Capacity"...)
|
||
pop in over the card and the whole card desaturates — each non-winner
|
||
gets this individually, staggered in evaluate(), so every rejection
|
||
reads as its own deliberate beat instead of five cards dimming at once. */
|
||
#sw-root .sw-veh-card-reject {
|
||
position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
gap: 5px; border-radius: 18px; background: rgba(8,8,9,0.62); opacity: 0; pointer-events: none;
|
||
}
|
||
#sw-root .sw-veh-card.is-rejected { filter: grayscale(0.9); }
|
||
#sw-root .sw-veh-card.is-rejected .sw-veh-card-reject { opacity: 1; animation: swVehRejectPop 0.35s ease-out; }
|
||
#sw-root .sw-veh-card-x { width: 20px; height: 20px; border-radius: 50%; background: rgba(226,53,74,0.2); border: 1px solid rgba(226,53,74,0.55); color: #ff5a6e; display: flex; align-items: center; justify-content: center; }
|
||
#sw-root .sw-veh-card-x svg { width: 10px; height: 10px; stroke-width: 3.4; }
|
||
#sw-root .sw-veh-card-reason { font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #ff8a96; text-align: center; }
|
||
@keyframes swVehRejectPop { 0% { opacity: 0; transform: scale(0.72); } 65% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
|
||
/* Winner: glow -> expand -> settle pulse (handled as GSAP scale tweens on
|
||
the card itself) -> lock, with this border/background/ring as the
|
||
persistent "selected" state once the pulse settles. */
|
||
#sw-root .sw-veh-card.is-winner {
|
||
border-color: rgba(226,53,74,0.55); background: rgba(192,18,39,0.12);
|
||
box-shadow: 0 0 0 1px rgba(226,53,74,0.25), 0 18px 40px -18px rgba(192,18,39,0.6);
|
||
animation: swVehWinnerRing 1.4s ease-out 1;
|
||
}
|
||
@keyframes swVehWinnerRing { 0% { box-shadow: 0 0 0 0 rgba(226,53,74,0.5), 0 18px 40px -18px rgba(192,18,39,0.6); } 100% { box-shadow: 0 0 0 16px rgba(226,53,74,0), 0 18px 40px -18px rgba(192,18,39,0.6); } }
|
||
#sw-root .sw-veh-art { width: 74px; height: 44px; display: block; }
|
||
#sw-root .sw-veh-label { font-size: 13px; font-weight: 700; color: #fff; }
|
||
#sw-root .sw-veh-check {
|
||
display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
|
||
text-transform: uppercase; color: var(--sw-red-bright); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
#sw-root .sw-veh-card.is-winner .sw-veh-check { opacity: 1; transform: scale(1); }
|
||
#sw-root .sw-veh-lock { display: flex; }
|
||
#sw-root .sw-veh-lock svg { width: 11px; height: 11px; stroke-width: 2.2; }
|
||
#sw-root .sw-veh-profiles-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 14px; }
|
||
#sw-root .sw-veh-profiles-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(22px, 2.6vw, 30px); }
|
||
#sw-root .sw-veh-chip--profile { flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; border: none; transition: border-color 0.25s ease, background-color 0.25s ease; }
|
||
#sw-root .sw-veh-chip--profile em { font-style: normal; font-weight: 500; color: rgba(255,255,255,0.45); font-size: 11px; }
|
||
#sw-root .sw-veh-chip--profile.is-active { border: 1px solid rgba(226,53,74,0.5); background: rgba(192,18,39,0.14); color: #fff; }
|
||
#sw-root .sw-veh-factors { display: flex; gap: 10px; flex-wrap: wrap; }
|
||
/* Parameter chips (Weight, Dimensions, Distance...) light up one at a
|
||
time as the AI "checks" each one — glow while checking, a small
|
||
checkmark badge stays once checked — synced to evaluate()'s timeline
|
||
so the left-column chips and the right-column stage tell one story. */
|
||
#sw-root .sw-veh-chip--factor { position: relative; padding-right: 30px; }
|
||
#sw-root .sw-veh-chip--factor.is-checking { border-color: rgba(226,53,74,0.5); background: rgba(192,18,39,0.16); }
|
||
#sw-root .sw-veh-chip--factor.is-checked { border-color: rgba(226,53,74,0.32); }
|
||
#sw-root .sw-veh-chip-check {
|
||
position: absolute; right: 8px; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--sw-red); color: #fff;
|
||
display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-50%) scale(0.4);
|
||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||
}
|
||
#sw-root .sw-veh-chip-check svg { width: 9px; height: 9px; stroke-width: 3.4; }
|
||
#sw-root .sw-veh-chip--factor.is-checked .sw-veh-chip-check { opacity: 1; transform: translateY(-50%) scale(1); }
|
||
@media (max-width: 991px) { #sw-root .sw-veh-row { overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; } }
|
||
|
||
|
||
/* ================= SECTION 04 — AI Decision Engine ================= */
|
||
/* A complete replacement for the old map: an enterprise AI decision
|
||
dashboard. Dark glass cards on the section frame, live count-up metrics,
|
||
score bars, a winner-highlight compare beat, a confirmation banner and a
|
||
small dispatch step — all self-looping. */
|
||
#sw-root .sw-ade {
|
||
position: relative; border-radius: 24px; padding: clamp(18px, 2.6vw, 30px); overflow: hidden;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
|
||
border: 1px solid rgba(255,255,255,0.09);
|
||
box-shadow: 0 30px 70px -40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
|
||
}
|
||
/* A faint red glow anchored to the top edge so the panel reads as a lit
|
||
control surface, not a flat box. */
|
||
#sw-root .sw-ade::before {
|
||
content: ''; position: absolute; inset: 0; pointer-events: none;
|
||
background: radial-gradient(120% 80% at 50% -12%, rgba(226,53,74,0.12), transparent 58%);
|
||
}
|
||
#sw-root .sw-ade > * { position: relative; z-index: 1; }
|
||
|
||
#sw-root .sw-ade-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
|
||
#sw-root .sw-ade-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: clamp(13px, 1.4vw, 15px); letter-spacing: 0.02em; color: #fff; }
|
||
#sw-root .sw-ade-brand-ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--sw-red-bright); background: rgba(226,53,74,0.14); border: 1px solid rgba(226,53,74,0.32); }
|
||
#sw-root .sw-ade-brand-ic svg { width: 15px; height: 15px; }
|
||
#sw-root .sw-ade-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); }
|
||
#sw-root .sw-ade-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-red-bright); box-shadow: 0 0 0 0 rgba(226,53,74,0.5); animation: swPulse 1.8s ease-out infinite; flex-shrink: 0; }
|
||
#sw-root .sw-ade-livedot--green { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); animation: swLiveGreen 1.8s ease-out infinite; }
|
||
@keyframes swLiveGreen { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
|
||
|
||
#sw-root .sw-ade-status-row { min-height: 18px; margin-bottom: 16px; }
|
||
#sw-root .sw-ade-status { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--sw-red-bright); }
|
||
|
||
#sw-root .sw-ade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 16px); }
|
||
/* Each candidate is a dark glass card. Smooth transitions on every
|
||
property the compare beat touches (opacity/filter/border/shadow/
|
||
transform) so muting a loser and lifting the winner both glide. */
|
||
#sw-root .sw-ade-card {
|
||
display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px;
|
||
background: rgba(255,255,255,0.045); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
box-shadow: 0 14px 30px -18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
|
||
transition: opacity 0.5s ease, filter 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease, background 0.5s ease;
|
||
}
|
||
#sw-root .sw-ade-card.is-scoring { border-color: rgba(226,53,74,0.32); box-shadow: 0 16px 34px -16px rgba(226,53,74,0.4), inset 0 1px 0 rgba(255,255,255,0.08); }
|
||
#sw-root .sw-ade-card.is-muted { opacity: 0.4; filter: saturate(0.55); }
|
||
#sw-root .sw-ade-card.is-winner {
|
||
border-color: rgba(226,53,74,0.7); transform: translateY(-4px);
|
||
background: linear-gradient(180deg, rgba(226,53,74,0.15), rgba(226,53,74,0.035));
|
||
box-shadow: 0 24px 46px -18px rgba(226,53,74,0.55), 0 0 0 1px rgba(226,53,74,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
|
||
}
|
||
|
||
#sw-root .sw-ade-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
|
||
#sw-root .sw-ade-card-name { font-weight: 800; font-size: 14px; color: #fff; }
|
||
#sw-root .sw-ade-traffic { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
|
||
#sw-root .sw-ade-traffic--light { color: #4ade80; background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.3); }
|
||
#sw-root .sw-ade-traffic--moderate { color: #fbbf24; background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.3); }
|
||
#sw-root .sw-ade-traffic--heavy { color: #f87171; background: rgba(248,113,113,0.14); border: 1px solid rgba(248,113,113,0.3); }
|
||
|
||
#sw-root .sw-ade-rows { display: flex; flex-direction: column; gap: 7px; }
|
||
#sw-root .sw-ade-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
|
||
#sw-root .sw-ade-row-l { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
|
||
#sw-root .sw-ade-row-v { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||
#sw-root .sw-ade-row-v b { font-size: 15px; font-weight: 800; color: #fff; }
|
||
#sw-root .sw-ade-fuel-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 3px; }
|
||
#sw-root .sw-ade-fuel-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sw-red), var(--sw-red-bright)); }
|
||
|
||
#sw-root .sw-ade-score { display: flex; flex-direction: column; gap: 6px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.09); margin-top: auto; }
|
||
#sw-root .sw-ade-score-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||
#sw-root .sw-ade-score-val { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; transition: color 0.5s ease; }
|
||
#sw-root .sw-ade-card.is-winner .sw-ade-score-val { color: var(--sw-red-bright); }
|
||
#sw-root .sw-ade-score-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
|
||
#sw-root .sw-ade-score-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.72)); transition: background 0.5s ease; }
|
||
#sw-root .sw-ade-card.is-winner .sw-ade-score-bar > i { background: linear-gradient(90deg, var(--sw-red), var(--sw-red-bright)); box-shadow: 0 0 12px rgba(226,53,74,0.6); }
|
||
|
||
#sw-root .sw-ade-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: rgba(255,255,255,0.5); transition: color 0.5s ease; }
|
||
#sw-root .sw-ade-verdict-ic { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); flex-shrink: 0; }
|
||
#sw-root .sw-ade-verdict-ic svg { width: 8px; height: 8px; stroke-width: 3.4; }
|
||
#sw-root .sw-ade-verdict-ic--win { background: rgba(226,53,74,0.18); color: var(--sw-red-bright); }
|
||
#sw-root .sw-ade-card.is-winner .sw-ade-verdict { color: var(--sw-red-bright); }
|
||
|
||
/* The AI-analysis connector between the candidate grid and the result. */
|
||
#sw-root .sw-ade-flow { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px 0 18px; }
|
||
#sw-root .sw-ade-flow-arrow { flex: 1; max-width: 200px; height: 1px; background: linear-gradient(90deg, transparent, rgba(226,53,74,0.5), transparent); }
|
||
#sw-root .sw-ade-flow-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #fff; padding: 7px 14px; border-radius: 999px; background: rgba(226,53,74,0.12); border: 1px solid rgba(226,53,74,0.3); white-space: nowrap; }
|
||
#sw-root .sw-ade-flow-chip svg { width: 14px; height: 14px; color: var(--sw-red-bright); }
|
||
|
||
/* The confirmation banner — the decision the whole section builds to. */
|
||
#sw-root .sw-ade-result { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(226,53,74,0.14), rgba(226,53,74,0.035)); border: 1px solid rgba(226,53,74,0.3); box-shadow: 0 18px 40px -22px rgba(226,53,74,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
|
||
#sw-root .sw-ade-result-badge { display: inline-flex; align-items: center; gap: 9px; font-size: clamp(14px, 1.6vw, 17px); font-weight: 800; color: #fff; }
|
||
#sw-root .sw-ade-result-badge svg { width: 18px; height: 18px; color: var(--sw-red-bright); }
|
||
#sw-root .sw-ade-result-sub { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
|
||
|
||
/* The dispatch beat — arrow → vehicle → delivery started. */
|
||
#sw-root .sw-ade-dispatch { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
|
||
#sw-root .sw-ade-dispatch-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, var(--sw-red-bright), #8c0f1f); box-shadow: 0 8px 18px -8px rgba(226,53,74,0.7); }
|
||
#sw-root .sw-ade-dispatch-ic svg { width: 20px; height: 20px; }
|
||
#sw-root .sw-ade-dispatch-body { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
|
||
#sw-root .sw-ade-dispatch-text { font-size: 13px; font-weight: 800; color: #fff; }
|
||
#sw-root .sw-ade-dispatch-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
|
||
#sw-root .sw-ade-dispatch-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sw-red), var(--sw-red-bright)); box-shadow: 0 0 10px rgba(226,53,74,0.6); }
|
||
#sw-root .sw-ade-dispatch-eta { font-size: 11px; font-weight: 800; letter-spacing: 0.03em; color: rgba(255,255,255,0.55); white-space: nowrap; }
|
||
|
||
/* White & Red theme overrides for Sec04 (#routing inside white card) */
|
||
#sw-root .sw-sec--white h2,
|
||
#sw-root .sw-sec--white h2 *,
|
||
#sw-root .sw-sec--white .sw-h,
|
||
#sw-root .sw-sec--white .sw-h *,
|
||
#sw-root .sw-sec--white .gsap-word-outer,
|
||
#sw-root .sw-sec--white .gsap-word-inner,
|
||
#sw-root #routing h2,
|
||
#sw-root #routing h2 *,
|
||
#sw-root #routing .sw-h,
|
||
#sw-root #routing .sw-h *,
|
||
#sw-root #routing .gsap-word-outer,
|
||
#sw-root #routing .gsap-word-inner {
|
||
color: #111827 !important;
|
||
}
|
||
|
||
#sw-root .sw-sec--white h2 .accent,
|
||
#sw-root .sw-sec--white h2 *.accent,
|
||
#sw-root .sw-sec--white .sw-h .accent,
|
||
#sw-root .sw-sec--white .sw-h *.accent,
|
||
#sw-root .sw-sec--white .gsap-word-inner .accent,
|
||
#sw-root #routing h2 .accent,
|
||
#sw-root #routing h2 *.accent,
|
||
#sw-root #routing .sw-h .accent,
|
||
#sw-root #routing .sw-h *.accent,
|
||
#sw-root #routing .gsap-word-inner .accent {
|
||
color: #dc2626 !important;
|
||
}
|
||
|
||
#sw-root .sw-sec--white .sw-lede,
|
||
#sw-root .sw-sec--white .sw-lede *,
|
||
#sw-root #routing .sw-lede,
|
||
#sw-root #routing .sw-lede * {
|
||
color: #4b5563 !important;
|
||
}
|
||
|
||
#sw-root .sw-sec--white .sw-eyebrow,
|
||
#sw-root #routing .sw-eyebrow {
|
||
color: #6b7280 !important;
|
||
}
|
||
|
||
#sw-root #routing .sw-ade {
|
||
background: #f8fafc !important;
|
||
border: 1px solid #e2e8f0 !important;
|
||
box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.06) !important;
|
||
}
|
||
#sw-root #routing .sw-ade::before {
|
||
background: radial-gradient(120% 80% at 50% -12%, rgba(220, 38, 38, 0.08), transparent 60%) !important;
|
||
}
|
||
#sw-root #routing .sw-ade-brand,
|
||
#sw-root #routing .sw-ade-brand * {
|
||
color: #0f172a !important;
|
||
}
|
||
#sw-root #routing .sw-ade-live,
|
||
#sw-root #routing .sw-ade-live * {
|
||
color: #475569 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-status {
|
||
color: #dc2626 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-card {
|
||
background: #ffffff !important;
|
||
border: 1px solid #cbd5e1 !important;
|
||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04) !important;
|
||
opacity: 1 !important;
|
||
filter: none !important;
|
||
}
|
||
#sw-root #routing .sw-ade-card.is-muted {
|
||
background: #f1f5f9 !important;
|
||
border-color: #e2e8f0 !important;
|
||
opacity: 0.85 !important;
|
||
filter: none !important;
|
||
}
|
||
#sw-root #routing .sw-ade-card-name,
|
||
#sw-root #routing .sw-ade-card-name * {
|
||
color: #0f172a !important;
|
||
}
|
||
#sw-root #routing .sw-ade-row-l,
|
||
#sw-root #routing .sw-ade-row-l * {
|
||
color: #64748b !important;
|
||
}
|
||
#sw-root #routing .sw-ade-row-v,
|
||
#sw-root #routing .sw-ade-row-v * {
|
||
color: #334155 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-row-v b,
|
||
#sw-root #routing .sw-ade-row-v b * {
|
||
color: #0f172a !important;
|
||
}
|
||
#sw-root #routing .sw-ade-fuel-bar {
|
||
background: #e2e8f0 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-score {
|
||
border-top-color: #e2e8f0 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-score-head,
|
||
#sw-root #routing .sw-ade-score-head * {
|
||
color: #64748b !important;
|
||
}
|
||
#sw-root #routing .sw-ade-score-val {
|
||
color: #0f172a !important;
|
||
}
|
||
#sw-root #routing .sw-ade-card.is-winner {
|
||
border: 2px solid #dc2626 !important;
|
||
background: #fff5f5 !important;
|
||
box-shadow: 0 14px 32px -10px rgba(220, 38, 38, 0.3) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-card.is-winner .sw-ade-card-name,
|
||
#sw-root #routing .sw-ade-card.is-winner .sw-ade-card-name * {
|
||
color: #0f172a !important;
|
||
}
|
||
#sw-root #routing .sw-ade-card.is-winner .sw-ade-score-val {
|
||
color: #dc2626 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-verdict,
|
||
#sw-root #routing .sw-ade-verdict * {
|
||
color: #64748b !important;
|
||
}
|
||
#sw-root #routing .sw-ade-verdict-ic {
|
||
background: #e2e8f0 !important;
|
||
color: #475569 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-verdict-ic--win {
|
||
background: #fee2e2 !important;
|
||
color: #dc2626 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-card.is-winner .sw-ade-verdict,
|
||
#sw-root #routing .sw-ade-card.is-winner .sw-ade-verdict * {
|
||
color: #dc2626 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-flow-arrow {
|
||
background: linear-gradient(90deg, transparent, rgba(220,38,38,0.4), transparent) !important;
|
||
}
|
||
#sw-root #routing .sw-ade-flow-chip {
|
||
background: #fee2e2 !important;
|
||
border: 1px solid #fca5a5 !important;
|
||
color: #dc2626 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-flow-chip * {
|
||
color: #dc2626 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-result {
|
||
background: #fef2f2 !important;
|
||
border: 1px solid #fca5a5 !important;
|
||
box-shadow: 0 10px 24px -10px rgba(220, 38, 38, 0.2) !important;
|
||
}
|
||
#sw-root #routing .sw-ade-result-badge,
|
||
#sw-root #routing .sw-ade-result-badge * {
|
||
color: #0f172a !important;
|
||
}
|
||
#sw-root #routing .sw-ade-result-sub,
|
||
#sw-root #routing .sw-ade-result-sub * {
|
||
color: #475569 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-dispatch {
|
||
background: #ffffff !important;
|
||
border: 1px solid #cbd5e1 !important;
|
||
box-shadow: 0 4px 14px rgba(0,0,0,0.04) !important;
|
||
}
|
||
#sw-root #routing .sw-ade-dispatch-text,
|
||
#sw-root #routing .sw-ade-dispatch-text * {
|
||
color: #0f172a !important;
|
||
}
|
||
#sw-root #routing .sw-ade-dispatch-bar {
|
||
background: #e2e8f0 !important;
|
||
}
|
||
#sw-root #routing .sw-ade-dispatch-eta,
|
||
#sw-root #routing .sw-ade-dispatch-eta * {
|
||
color: #64748b !important;
|
||
}
|
||
|
||
@media (max-width: 860px) {
|
||
#sw-root .sw-ade-grid { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
@media (max-width: 520px) {
|
||
#sw-root .sw-ade-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
|
||
/* ================= SECTION 06 — Live Tracking (split) =================
|
||
Premium white iPhone-style live-tracking mockup. The device frame keeps
|
||
realistic proportions (thin bezels, Dynamic Island, soft shadow) and the
|
||
screen is pure white with soft radial lighting. The supplied SVG is a
|
||
self-animating map — its marker follows the route natively, so no JS path
|
||
animation is needed. */
|
||
#sw-root .sw-phone-col { display: flex; justify-content: center; }
|
||
#sw-root .sw-phone {
|
||
width: clamp(268px, 27vw, 326px); aspect-ratio: 300 / 652; flex-shrink: 0;
|
||
border-radius: clamp(44px, 4.4vw, 56px); padding: clamp(9px, 0.9vw, 12px);
|
||
background: linear-gradient(155deg, #24262b 0%, #0c0d10 46%, #050506 100%);
|
||
box-shadow:
|
||
0 70px 120px -46px rgba(0,0,0,0.78),
|
||
0 28px 50px -30px rgba(0,0,0,0.62),
|
||
inset 0 0 0 1.5px rgba(255,255,255,0.08),
|
||
inset 0 1px 1px rgba(255,255,255,0.14);
|
||
}
|
||
#sw-root .sw-phone-screen {
|
||
position: relative; width: 100%; height: 100%; overflow: hidden;
|
||
border-radius: clamp(34px, 3.5vw, 46px);
|
||
display: flex; flex-direction: column;
|
||
background:
|
||
radial-gradient(120% 78% at 50% 0%, #ffffff 0%, #f6f7f9 58%, #eef0f3 100%);
|
||
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
|
||
}
|
||
#sw-root .sw-phone-island {
|
||
position: absolute; top: clamp(11px, 1.2vw, 15px); left: 50%; transform: translateX(-50%);
|
||
width: clamp(80px, 28%, 100px); height: clamp(24px, 2.5vw, 30px);
|
||
border-radius: 999px; background: #060607; z-index: 6;
|
||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
|
||
}
|
||
/* iOS status bar — live JS clock at left, static radios at right, flanking
|
||
the Dynamic Island. */
|
||
#sw-root .sw-phone-statusbar {
|
||
position: relative; z-index: 5; flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: clamp(15px, 1.7vw, 19px) clamp(20px, 2.3vw, 26px) clamp(3px, 0.5vw, 6px);
|
||
color: #0a0a0b;
|
||
}
|
||
#sw-root .sw-phone-time {
|
||
font-size: clamp(14px, 1.4vw, 16px); font-weight: 600; letter-spacing: 0.01em;
|
||
font-variant-numeric: tabular-nums; min-width: 3ch;
|
||
}
|
||
#sw-root .sw-phone-status-icons { display: inline-flex; align-items: center; gap: clamp(5px, 0.6vw, 7px); }
|
||
#sw-root .sw-phone-ic { display: block; height: clamp(10px, 1.05vw, 12px); width: auto; color: #0a0a0b; }
|
||
#sw-root .sw-phone-ic-wifi { height: clamp(11px, 1.1vw, 13px); }
|
||
#sw-root .sw-phone-ic-batt { height: clamp(12px, 1.2vw, 14px); }
|
||
#sw-root .sw-phone-5g { font-size: clamp(11px, 1.1vw, 12.5px); font-weight: 600; letter-spacing: 0.01em; }
|
||
/* Glass notification banner. */
|
||
#sw-root .sw-phone-notif {
|
||
flex-shrink: 0; z-index: 3;
|
||
margin: clamp(6px, 0.8vw, 9px) clamp(10px, 1.2vw, 14px) 0;
|
||
padding: clamp(9px, 1.05vw, 12px) clamp(11px, 1.25vw, 14px);
|
||
display: flex; align-items: center; gap: clamp(9px, 1vw, 12px);
|
||
border-radius: clamp(17px, 1.9vw, 22px);
|
||
background: rgba(255,255,255,0.72);
|
||
-webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
|
||
border: 1px solid rgba(255,255,255,0.7);
|
||
box-shadow: 0 12px 28px -14px rgba(15,20,30,0.3), 0 2px 6px -2px rgba(15,20,30,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
|
||
}
|
||
#sw-root .sw-phone-notif-ic {
|
||
width: clamp(30px, 3.2vw, 38px); height: clamp(30px, 3.2vw, 38px); flex-shrink: 0;
|
||
border-radius: clamp(8px, 0.9vw, 11px); object-fit: contain; padding: 4px;
|
||
background: #fff; border: 1px solid rgba(0,0,0,0.06);
|
||
box-shadow: 0 2px 5px -2px rgba(15,20,30,0.25);
|
||
}
|
||
#sw-root .sw-phone-notif-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
|
||
#sw-root .sw-phone-notif-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||
#sw-root .sw-phone-notif-app { font-size: clamp(11.5px, 1.15vw, 13px); font-weight: 700; color: #0a0a0b; letter-spacing: 0.005em; }
|
||
#sw-root .sw-phone-notif-time { font-size: clamp(10.5px, 1vw, 11.5px); font-weight: 500; color: #9aa1ac; }
|
||
#sw-root .sw-phone-notif-title { font-size: clamp(11.5px, 1.15vw, 13px); font-weight: 600; color: #1c1f24; line-height: 1.2; }
|
||
#sw-root .sw-phone-notif-sub { font-size: clamp(10.5px, 1.05vw, 12px); font-weight: 500; color: #6b7280; line-height: 1.2; }
|
||
#sw-root .sw-phone-map {
|
||
position: relative; flex: 1; min-height: 0; overflow: hidden;
|
||
display: flex; align-items: stretch; justify-content: center;
|
||
padding: clamp(9px, 1.1vw, 13px) clamp(10px, 1.2vw, 14px) clamp(8px, 1vw, 12px);
|
||
}
|
||
#sw-root .sw-phone-track-svg {
|
||
display: block; width: 100%; height: 100%; object-fit: cover;
|
||
border-radius: clamp(15px, 1.7vw, 20px);
|
||
background: linear-gradient(162deg, #f7f9fc 0%, #eceff4 100%);
|
||
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
|
||
}
|
||
#sw-root .sw-phone-badge {
|
||
position: absolute; top: clamp(13px, 1.6vw, 18px); left: clamp(15px, 1.7vw, 20px);
|
||
display: inline-flex; align-items: center; gap: 7px; z-index: 3;
|
||
padding: 6px 12px 6px 10px; border-radius: 999px;
|
||
background: rgba(255,255,255,0.94);
|
||
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(0,0,0,0.06);
|
||
color: #0a0a0b; font-size: 11px; font-weight: 800; letter-spacing: 0.09em;
|
||
box-shadow: 0 8px 20px -8px rgba(15,20,30,0.35), 0 2px 6px -2px rgba(15,20,30,0.14);
|
||
}
|
||
#sw-root .sw-phone-badge-dot {
|
||
width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; flex-shrink: 0;
|
||
box-shadow: 0 0 0 3px rgba(255,59,48,0.18), 0 0 8px 1px rgba(255,59,48,0.75);
|
||
}
|
||
#sw-root .sw-phone-card {
|
||
margin: clamp(2px, 0.4vw, 5px) clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 18px);
|
||
padding: clamp(15px, 1.7vw, 19px) clamp(16px, 1.9vw, 20px);
|
||
border-radius: clamp(22px, 2.4vw, 28px);
|
||
background: #ffffff; border: 1px solid rgba(0,0,0,0.07);
|
||
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
|
||
box-shadow: 0 12px 30px -16px rgba(15,20,30,0.28), inset 0 1px 0 rgba(255,255,255,0.9);
|
||
}
|
||
#sw-root .sw-phone-card-label { color: #6b7280; font-size: clamp(12px, 1.2vw, 13.5px); font-weight: 600; letter-spacing: 0.01em; }
|
||
#sw-root .sw-phone-card-eta { color: #0a0a0b; font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
|
||
#sw-root .sw-phone-card-eta em { font-style: normal; font-size: clamp(12px, 1.2vw, 14px); font-weight: 600; color: #9aa1ac; margin-left: 5px; }
|
||
#sw-root .sw-track-cards { display: flex; flex-direction: column; gap: 14px; }
|
||
#sw-root .sw-track-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
|
||
#sw-root .sw-track-card-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(226,53,74,0.12); border: 1px solid rgba(226,53,74,0.3); color: var(--sw-red-bright); flex-shrink: 0; }
|
||
#sw-root .sw-track-card-ic svg { width: 20px; height: 20px; }
|
||
#sw-root .sw-track-card-label { display: block; color: #fff; font-weight: 700; font-size: 14px; }
|
||
#sw-root .sw-track-card-note { display: block; color: rgba(255,255,255,0.55); font-size: 12.5px; margin-top: 2px; }
|
||
|
||
/* ---- Section 06 rebuild: top heading + sticky phone / feature cards ---- */
|
||
#sw-root .sw-ldi-head { max-width: 1040px; margin-bottom: clamp(40px, 5vw, 64px); }
|
||
#sw-root .sw-ldi-eyebrow { margin-bottom: clamp(16px, 2vw, 22px); }
|
||
#sw-root .sw-ldi-h {
|
||
color: #fff; font-weight: 900; letter-spacing: -0.03em;
|
||
font-size: clamp(34px, 4.5vw, 64px); line-height: 1.15; margin: 0 0 clamp(16px, 2vw, 24px);
|
||
max-width: 1000px;
|
||
}
|
||
#sw-root .sw-ldi-line { display: inline-block; margin-right: 0.28em; }
|
||
#sw-root .sw-ldi-h .accent { color: var(--sw-red-bright); }
|
||
#sw-root .sw-ldi-lede {
|
||
color: var(--sw-text-dim); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.65;
|
||
font-weight: 400; margin: 0; max-width: 780px;
|
||
}
|
||
#sw-root .sw-ldi-grid {
|
||
display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
|
||
gap: clamp(36px, 5vw, 80px); align-items: stretch;
|
||
}
|
||
#sw-root .sw-ldi-phone-col { position: relative; display: flex; justify-content: center; }
|
||
#sw-root .sw-ldi-phone-sticky {
|
||
position: sticky; top: clamp(88px, 12vh, 132px); align-self: start;
|
||
display: flex; justify-content: center; width: 100%;
|
||
}
|
||
#sw-root .sw-ldi-cards { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 38px); }
|
||
#sw-root .sw-ldi-card {
|
||
position: relative; border-radius: clamp(22px, 2.4vw, 28px);
|
||
padding: clamp(20px, 2.2vw, 28px);
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
box-shadow: 0 24px 50px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
|
||
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
|
||
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, box-shadow 0.4s ease;
|
||
}
|
||
#sw-root .sw-ldi-card::after {
|
||
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
|
||
background: radial-gradient(120% 80% at 50% 0%, rgba(226,53,74,0.12) 0%, rgba(226,53,74,0) 60%);
|
||
opacity: 0; transition: opacity 0.4s ease;
|
||
}
|
||
#sw-root .sw-ldi-card:hover {
|
||
transform: translateY(-6px);
|
||
border-color: rgba(226,53,74,0.4);
|
||
box-shadow: 0 34px 70px -34px rgba(0,0,0,0.8), 0 0 0 1px rgba(226,53,74,0.2), 0 18px 60px -30px rgba(226,53,74,0.35);
|
||
}
|
||
#sw-root .sw-ldi-card:hover::after { opacity: 1; }
|
||
#sw-root .sw-ldi-card-art {
|
||
position: relative; z-index: 1; width: 100%; margin-bottom: clamp(16px, 1.8vw, 22px);
|
||
border-radius: clamp(16px, 1.8vw, 20px); overflow: hidden;
|
||
}
|
||
#sw-root .sw-ldi-svg { display: block; width: 100%; height: auto; }
|
||
/* Supplied doorven.svg hero — a square SVG shown large and centered on its
|
||
own stage, contained (never cropped or distorted), with generous padding.
|
||
Loaded as <img> so its embedded SMIL animations keep running. */
|
||
#sw-root .sw-ldi-card-art-stage {
|
||
aspect-ratio: 4 / 3; width: 100%; overflow: hidden;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: clamp(10px, 2vw, 22px);
|
||
border-radius: inherit;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 100%);
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
}
|
||
#sw-root .sw-ldi-svg-img {
|
||
display: block; width: 100%; height: 100%;
|
||
object-fit: contain; object-position: center;
|
||
/* The artwork sits inside a large transparent 1080\xb2 canvas; zoom past the
|
||
built-in margin so the van itself is the hero (~60% of card height). The
|
||
empty margins overflow and are clipped by the stage. */
|
||
transform: scale(2.15); transform-origin: center;
|
||
}
|
||
#sw-root .sw-ldi-card-title {
|
||
position: relative; z-index: 1; color: #fff; font-weight: 800;
|
||
font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.01em; margin: 0 0 8px;
|
||
}
|
||
#sw-root .sw-ldi-card-desc {
|
||
position: relative; z-index: 1; color: var(--sw-text-dim);
|
||
font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.55; margin: 0; max-width: 46ch;
|
||
}
|
||
@media (max-width: 991px) {
|
||
#sw-root .sw-ldi-grid { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
|
||
#sw-root .sw-ldi-phone-sticky { position: static; top: auto; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
#sw-root .sw-ldi-cards { gap: 24px; }
|
||
}
|
||
|
||
/* ================= SECTION 07 — Delivery Flow ================= */
|
||
#sw-root .sw-flow { position: relative; min-height: clamp(380px, 30vw, 460px); }
|
||
/* Inset by the same clamp(16px, 3vw, 32px) every section's primary media
|
||
panel uses (see Section 05's canvas inset), instead of bleeding to the
|
||
section's own edge. */
|
||
#sw-root .sw-flow-bg { position: absolute; inset: clamp(16px, 3vw, 32px); border-radius: 16px; overflow: hidden; }
|
||
#sw-root .sw-flow-bg img { width: 100%; height: 100%; object-fit: cover; }
|
||
#sw-root .sw-flow-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.93)); }
|
||
#sw-root .sw-flow-rail { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: clamp(36px, 5vw, 60px) clamp(16px, 3vw, 32px); flex-wrap: wrap; row-gap: 30px; }
|
||
#sw-root .sw-flow-track { position: absolute; left: 4%; right: 4%; top: calc(clamp(36px, 5vw, 60px) + 22px); height: 2px; background: rgba(255,255,255,0.14); z-index: 0; border-radius: 2px; overflow: visible; }
|
||
#sw-root .sw-flow-track-fill { position: absolute; inset: 0; width: calc(var(--fill, 0) * 100%); background: linear-gradient(90deg, var(--sw-red), var(--sw-red-bright)); box-shadow: 0 0 10px rgba(226,53,74,0.7); border-radius: 2px; }
|
||
#sw-root .sw-flow-marker { position: absolute; top: 50%; left: calc(var(--fill, 0) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(226,53,74,0.85); }
|
||
#sw-root .sw-flow-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; width: 148px; opacity: 0.55; transition: opacity 0.4s ease; }
|
||
#sw-root .sw-flow-stage.is-active { opacity: 1; }
|
||
#sw-root .sw-flow-num { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.35); letter-spacing: 0.08em; }
|
||
#sw-root .sw-flow-ic {
|
||
width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||
background: #0a0a0a; border: 1.5px solid rgba(226,53,74,0.4); color: rgba(226,53,74,0.7);
|
||
box-shadow: 0 0 0 5px #000; transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
|
||
}
|
||
#sw-root .sw-flow-stage.is-active .sw-flow-ic { border-color: var(--sw-red); color: var(--sw-red-bright); box-shadow: 0 0 0 5px #000, 0 0 24px -4px rgba(192,18,39,0.9); transform: scale(1.08); }
|
||
#sw-root .sw-flow-ic svg { width: 21px; height: 21px; }
|
||
#sw-root .sw-flow-label { color: #fff; font-weight: 700; font-size: 13.5px; }
|
||
#sw-root .sw-flow-note { color: rgba(255,255,255,0.55); font-size: 12px; line-height: 1.4; }
|
||
@media (max-width: 900px) { #sw-root .sw-flow-track { display: none; } }
|
||
|
||
/* ================= SECTION 08 — MileTruth AI (split + R3F) ================= */
|
||
/* One card, not three: the scene fills the frame directly, so there is no
|
||
inner rounded box nested inside the outer rounded box. */
|
||
#sw-root .sw-mt-canvas { position: relative; height: clamp(360px, 40vw, 520px); border-radius: 24px; overflow: hidden; border: 1px solid var(--sw-line); }
|
||
#sw-root .sw-mt-canvas .mtn-scene { border-radius: 0; height: 100%; min-height: 0; }
|
||
/* Grid, not wrapping flex — the arrows are real grid items in fixed tracks,
|
||
so a step can never drop to a second row and strand its arrow behind it. */
|
||
#sw-root .sw-mt-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr) auto) minmax(0, 1fr); align-items: start; gap: 6px; margin-bottom: clamp(24px, 2.8vw, 32px); }
|
||
#sw-root .sw-mt-step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
|
||
#sw-root .sw-mt-flow .sw-veh-arrow { align-self: start; margin-top: 13px; }
|
||
#sw-root .sw-mt-step-note { font-size: 11px; font-weight: 500; color: var(--sw-text-dim); line-height: 1.35; }
|
||
/* Four steps abreast need ~548px: "Recommendations" alone is 114px and
|
||
cannot hyphenate. The copy column doesn't narrow with the viewport
|
||
(the split flips to one column at 991px, which makes it wider again),
|
||
so this keys off the column's own width rather than the screen's. */
|
||
#sw-root .sw-mt-copy { container-type: inline-size; }
|
||
@container (max-width: 548px) {
|
||
#sw-root .sw-mt-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
|
||
#sw-root .sw-mt-flow .sw-veh-arrow { display: none; }
|
||
#sw-root .sw-mt-step { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic label" "ic note"; column-gap: 10px; row-gap: 2px; text-align: left; }
|
||
#sw-root .sw-mt-step-ic { grid-area: ic; align-self: center; width: 42px; height: 42px; border-radius: 12px; }
|
||
#sw-root .sw-mt-step-label { grid-area: label; align-self: end; }
|
||
#sw-root .sw-mt-step-note { grid-area: note; align-self: start; }
|
||
}
|
||
@container (max-width: 360px) {
|
||
#sw-root .sw-mt-flow { grid-template-columns: 1fr; }
|
||
}
|
||
#sw-root .sw-mt-step-ic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--sw-red-bright); }
|
||
#sw-root .sw-mt-step-ic svg { width: 22px; height: 22px; }
|
||
#sw-root .sw-mt-step-label { font-size: 12.5px; font-weight: 700; color: #fff; }
|
||
#sw-root .sw-mt-feats { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.08); padding-top: clamp(20px, 2.5vw, 28px); }
|
||
#sw-root .sw-mt-feat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); font-size: 12.5px; font-weight: 600; }
|
||
#sw-root .sw-mt-feat-ic { color: var(--sw-red-bright); display: flex; }
|
||
#sw-root .sw-mt-feat-ic svg { width: 15px; height: 15px; }
|
||
|
||
/* ================= SECTION 09 — Ops Dashboard (White & Red Theme) ================= */
|
||
#sw-root .sw-bg--white {
|
||
background: #ffffff;
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
}
|
||
#sw-root .sw-bg--white::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background:
|
||
radial-gradient(65% 55% at 50% 0%, rgba(226, 53, 74, 0.08) 0%, transparent 70%),
|
||
radial-gradient(45% 45% at 90% 90%, rgba(192, 18, 39, 0.04) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
#sw-root #ops-dashboard .sw-eyebrow--slash {
|
||
color: #dc2626 !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
#sw-root #ops-dashboard .sw-h {
|
||
color: #111827 !important;
|
||
}
|
||
#sw-root #ops-dashboard .sw-h .accent {
|
||
color: #dc2626 !important;
|
||
}
|
||
#sw-root #ops-dashboard .sw-lede {
|
||
color: #4b5563 !important;
|
||
}
|
||
|
||
#sw-root #ops-dashboard .sw-dash {
|
||
background: #ffffff;
|
||
border: 1px solid rgba(220, 38, 38, 0.14);
|
||
box-shadow: 0 20px 40px -15px rgba(220, 38, 38, 0.07), 0 10px 25px -10px rgba(0, 0, 0, 0.05);
|
||
}
|
||
#sw-root #ops-dashboard .sw-dash-chrome {
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||
}
|
||
#sw-root #ops-dashboard .sw-dash-brand {
|
||
color: #111827;
|
||
}
|
||
#sw-root #ops-dashboard .sw-dash-live {
|
||
color: #6b7280;
|
||
}
|
||
#sw-root #ops-dashboard .sw-livedot {
|
||
background: #dc2626;
|
||
box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
|
||
}
|
||
|
||
#sw-root #ops-dashboard .sw-kpi-tile {
|
||
background: #fef2f2;
|
||
border: 1px solid rgba(220, 38, 38, 0.12);
|
||
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
#sw-root #ops-dashboard .sw-kpi-tile:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(220, 38, 38, 0.3);
|
||
box-shadow: 0 8px 20px -6px rgba(220, 38, 38, 0.15);
|
||
}
|
||
#sw-root #ops-dashboard .sw-kpi-tile-ic {
|
||
color: #dc2626;
|
||
}
|
||
#sw-root #ops-dashboard .sw-kpi-val {
|
||
color: #111827;
|
||
}
|
||
#sw-root #ops-dashboard .sw-kpi-label {
|
||
color: #6b7280;
|
||
}
|
||
|
||
#sw-root #ops-dashboard .sw-dash-panel {
|
||
background: #ffffff;
|
||
border: 1px solid rgba(0, 0, 0, 0.07);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
|
||
}
|
||
#sw-root #ops-dashboard .sw-dash-panel-h {
|
||
color: #4b5563;
|
||
}
|
||
|
||
#sw-root #ops-dashboard .sw-ring-track {
|
||
stroke: rgba(0, 0, 0, 0.08);
|
||
}
|
||
#sw-root #ops-dashboard .sw-ring-center b {
|
||
color: #111827;
|
||
}
|
||
#sw-root #ops-dashboard .sw-ring-center span {
|
||
color: #6b7280;
|
||
}
|
||
#sw-root #ops-dashboard .sw-ring-legend span {
|
||
color: #374151;
|
||
}
|
||
|
||
#sw-root #ops-dashboard .sw-bar {
|
||
background: linear-gradient(180deg, #ef4444, #dc2626);
|
||
}
|
||
|
||
#sw-root #ops-dashboard .sw-fleet-id {
|
||
color: #111827;
|
||
}
|
||
#sw-root #ops-dashboard .sw-fleet-status {
|
||
color: #4b5563;
|
||
}
|
||
#sw-root #ops-dashboard .sw-fleet-eta {
|
||
color: #6b7280;
|
||
}
|
||
#sw-root #ops-dashboard .sw-fleet-dot--moving {
|
||
background: #2563eb;
|
||
box-shadow: 0 0 8px rgba(37, 99, 235, 0.35);
|
||
}
|
||
#sw-root #ops-dashboard .sw-fleet-dot--idle {
|
||
background: #9ca3af;
|
||
box-shadow: none;
|
||
}
|
||
|
||
#sw-root #ops-dashboard .sw-feed-row {
|
||
background: #fdf2f2;
|
||
border: 1px solid rgba(220, 38, 38, 0.08);
|
||
color: #1f2937;
|
||
}
|
||
|
||
#sw-root .sw-dash-chrome { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: clamp(20px, 2.4vw, 28px); margin-bottom: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||
#sw-root .sw-dash-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 14px; font-weight: 700; }
|
||
#sw-root .sw-dash-live { color: rgba(255,255,255,0.45); font-size: 12px; font-weight: 600; }
|
||
#sw-root .sw-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: clamp(24px, 2.8vw, 32px); }
|
||
#sw-root .sw-kpi-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
|
||
#sw-root .sw-kpi-tile-ic { color: var(--sw-red-bright); }
|
||
#sw-root .sw-kpi-tile-ic svg { width: 18px; height: 18px; }
|
||
#sw-root .sw-kpi-val { color: #fff; font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.01em; }
|
||
#sw-root .sw-kpi-label { color: rgba(255,255,255,0.55); font-size: 12px; font-weight: 600; }
|
||
#sw-root .sw-dash-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
|
||
#sw-root .sw-dash-panel { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 16px; }
|
||
#sw-root .sw-dash-panel--wide { grid-column: span 2; }
|
||
#sw-root .sw-dash-panel-h { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
|
||
#sw-root .sw-ring-wrap { position: relative; width: 128px; height: 128px; margin: 0 auto; }
|
||
#sw-root .sw-ring { width: 100%; height: 100%; }
|
||
#sw-root .sw-ring-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 3.2; }
|
||
#sw-root .sw-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||
#sw-root .sw-ring-center b { color: #fff; font-size: 17px; font-weight: 800; }
|
||
#sw-root .sw-ring-center span { color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
|
||
#sw-root .sw-ring-legend { display: flex; flex-direction: column; gap: 8px; }
|
||
#sw-root .sw-ring-legend span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.65); font-weight: 600; }
|
||
#sw-root .sw-ring-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||
#sw-root .sw-bars { display: flex; align-items: flex-end; gap: 10px; height: 128px; }
|
||
#sw-root .sw-bar { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--sw-red-bright), var(--sw-red)); opacity: 0.9; transform-origin: bottom; display: block; }
|
||
#sw-root .sw-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
|
||
#sw-root .sw-heat-cell { aspect-ratio: 1; border-radius: 5px; }
|
||
#sw-root .sw-heat-cell.is-hot { box-shadow: 0 0 14px rgba(226,53,74,0.35); }
|
||
#sw-root .sw-fleet-list { display: flex; flex-direction: column; gap: 10px; }
|
||
#sw-root .sw-fleet-row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 10px; min-height: 24px; font-size: 12.5px; }
|
||
#sw-root .sw-fleet-dot { width: 8px; height: 8px; border-radius: 50%; animation: swFleetPulse 2.4s ease-in-out infinite; }
|
||
#sw-root .sw-fleet-dot--moving { background: #f4f4f6; box-shadow: 0 0 8px rgba(255,255,255,0.45); }
|
||
#sw-root .sw-fleet-dot--loading { background: #f1b84b; box-shadow: 0 0 8px rgba(241,184,75,0.48); animation-duration: 1.7s; }
|
||
#sw-root .sw-fleet-dot--delayed { background: var(--sw-red-bright); box-shadow: 0 0 9px rgba(226,53,74,0.7); animation-duration: 1.4s; }
|
||
#sw-root .sw-fleet-dot--idle { background: rgba(255,255,255,0.35); box-shadow: none; animation-duration: 3.2s; }
|
||
#sw-root .sw-fleet-id { color: #fff; font-weight: 700; }
|
||
#sw-root .sw-fleet-status { color: rgba(255,255,255,0.6); }
|
||
#sw-root .sw-fleet-eta { color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; }
|
||
#sw-root .sw-feed { display: grid; grid-template-rows: repeat(4, 38px); gap: 10px; height: 182px; overflow: hidden; }
|
||
#sw-root .sw-feed-slot { position: relative; min-height: 38px; }
|
||
#sw-root .sw-feed-row { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.75); padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.03); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
@keyframes swFleetPulse {
|
||
0%, 100% { transform: scale(1); opacity: 0.72; }
|
||
50% { transform: scale(1.25); opacity: 1; }
|
||
}
|
||
@media (max-width: 1200px) { #sw-root .sw-dash-kpis { grid-template-columns: repeat(2, 1fr); } #sw-root .sw-dash-body { grid-template-columns: 1fr 1fr; } #sw-root .sw-dash-panel--wide, #sw-root .sw-dash-panel--fleet { grid-column: span 2; } }
|
||
|
||
/* ================= SECTION 10 — Why Doormile ================= */
|
||
#sw-root .sw-kpi10-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 22px); }
|
||
#sw-root .sw-tilt { will-change: transform; }
|
||
#sw-root .sw-kpi10-card {
|
||
position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.8vw, 32px); border-radius: 22px;
|
||
background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09);
|
||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
#sw-root .sw-kpi10-card:hover { border-color: rgba(226,53,74,0.45); box-shadow: 0 24px 60px -30px rgba(192,18,39,0.55); }
|
||
#sw-root .sw-kpi10-shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
|
||
#sw-root .sw-kpi10-card:hover .sw-kpi10-shine { opacity: 1; }
|
||
#sw-root .sw-kpi10-ic { color: var(--sw-red-bright); position: relative; }
|
||
#sw-root .sw-kpi10-ic svg { width: 26px; height: 26px; }
|
||
#sw-root .sw-kpi10-val { color: #fff; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.01em; position: relative; }
|
||
#sw-root .sw-kpi10-label { color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 600; position: relative; }
|
||
@media (max-width: 860px) { #sw-root .sw-kpi10-grid { grid-template-columns: repeat(2, 1fr); } }
|
||
@media (max-width: 520px) { #sw-root .sw-kpi10-grid { grid-template-columns: 1fr; } }
|
||
|
||
/* ================= Mobile: dedicated per-section rework ================= */
|
||
@media (max-width: 1024px) {
|
||
#sw-root .sw-sec { padding: 72px 0; margin-top: 32px; }
|
||
#sw-root .sw-in { width: calc(100% - 20px); }
|
||
#sw-root .sw-bg { left: 10px; right: 10px; }
|
||
#sw-root { margin-bottom: 32px; }
|
||
}
|
||
@media (max-width: 991px) {
|
||
#sw-root .sw-split, #sw-root .sw-split--reverse { grid-template-columns: 1fr; gap: 32px; }
|
||
#sw-root .sw-split--reverse .sw-mt-canvas-col { order: -1; }
|
||
#sw-root .sw-veh-stage { order: -1; }
|
||
#sw-root .sw-dash-body { grid-template-columns: 1fr; }
|
||
#sw-root .sw-dash-panel--wide, #sw-root .sw-dash-panel--fleet { grid-column: span 1 !important; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
#sw-root { margin-bottom: 24px; --sw-in-pad: 16px; }
|
||
#sw-root .sw-sec { padding: 56px 0; margin-top: 24px; }
|
||
#sw-root .sw-panel, #sw-root .sw-edge, #sw-root .sw-ade, #sw-root .sw-veh-stage, #sw-root .sw-bg { border-radius: 20px; }
|
||
#sw-root .sw-panel { padding: 16px; }
|
||
#sw-root .sw-ade { padding: 16px; }
|
||
#sw-root .sw-dash { overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box; }
|
||
#sw-root .sw-dash-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
|
||
#sw-root .sw-kpi-tile { padding: 12px 14px; gap: 4px; }
|
||
#sw-root .sw-kpi-val { font-size: clamp(18px, 4.5vw, 24px); }
|
||
#sw-root .sw-kpi-label { font-size: 11px; }
|
||
#sw-root .sw-dash-body { grid-template-columns: 1fr !important; gap: 12px; }
|
||
#sw-root .sw-dash-panel, #sw-root .sw-dash-panel--wide, #sw-root .sw-dash-panel--fleet { grid-column: span 1 !important; padding: 16px 14px; gap: 14px; max-width: 100%; box-sizing: border-box; overflow: hidden; }
|
||
#sw-root .sw-bars { gap: 6px; max-width: 100%; }
|
||
#sw-root .sw-fleet-row { grid-template-columns: 8px 1fr auto auto; gap: 6px; font-size: 11.5px; }
|
||
#sw-root .sw-fleet-id, #sw-root .sw-fleet-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
#sw-root .sw-fleet-eta { white-space: nowrap; }
|
||
#sw-root .sw-feed-row { font-size: 12px; padding: 8px 10px; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
#sw-root .sw-h { font-size: clamp(26px, 8vw, 34px) !important; }
|
||
#sw-root .sw-lede { max-width: none; }
|
||
/* The map fills via object-fit:cover, so the phone can keep realistic
|
||
tall proportions on mobile without the old square-art overflow hack. */
|
||
#sw-root .sw-phone { width: clamp(258px, 80vw, 320px); aspect-ratio: 300 / 624; }
|
||
#sw-root .sw-phone-map { padding: clamp(8px, 2.4vw, 12px) clamp(9px, 2.6vw, 13px) clamp(8px, 2.2vw, 11px); }
|
||
}
|
||
@media (max-width: 640px) {
|
||
#sw-root .sw-mt-canvas { height: clamp(300px, 62vw, 380px); }
|
||
}
|
||
@media (max-width: 480px) {
|
||
#sw-root .sw-dash-chrome { flex-wrap: wrap; gap: 6px; padding-bottom: 12px; margin-bottom: 16px; }
|
||
#sw-root .sw-dash-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
||
#sw-root .sw-kpi-tile { padding: 10px 12px; }
|
||
#sw-root .sw-ring-wrap { width: 108px; height: 108px; }
|
||
#sw-root .sw-heat { gap: 3px; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
#sw-root .sw-jnode-hero-ring, #sw-root .sw-livedot, #sw-root .sw-phone-badge-dot, #sw-root .sw-ade-livedot { animation: none !important; }
|
||
}
|
||
`;e.s(["MigratedSolutionSections",0,function(){return(0,t.jsxs)(eW,{children:[(0,t.jsx)(ez,{}),(0,t.jsx)(eI,{}),(0,t.jsx)(eE,{}),(0,t.jsx)(eF,{}),(0,t.jsx)(eB,{sectionId:"solution-miletruth-ai"}),(0,t.jsx)(e$,{})]})},"SolutionAIVehicleSelection",0,function(){return(0,t.jsx)(eG,{children:(0,t.jsx)(ez,{})})},"SolutionLiveLogisticsIntelligence",0,function(){return(0,t.jsx)(eG,{children:(0,t.jsx)(eF,{})})},"SolutionMileTruthAI",0,function(){return(0,t.jsx)(eG,{children:(0,t.jsx)(eB,{sectionId:"solution-miletruth-ai"})})},"SolutionOperationsDashboard",0,function(){return(0,t.jsx)(eG,{children:(0,t.jsx)(e$,{})})},"SolutionQuantumDecisionEngine",0,function(){return(0,t.jsx)(eG,{children:(0,t.jsx)(eE,{})})},"SolutionSmartRouteIntelligence",0,function(){return(0,t.jsx)(eG,{children:(0,t.jsx)(eI,{})})},"default",0,function(){return(0,t.jsxs)(eW,{children:[(0,t.jsx)(eu,{}),(0,t.jsx)(eq,{}),(0,t.jsx)(eP,{}),(0,t.jsx)(eH,{})]})}],56530)}]); |