1825 lines
230 KiB
JavaScript
1825 lines
230 KiB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,71886,e=>{"use strict";var s=e.i(43476),o=e.i(71645),t=e.i(57688),r=e.i(22016);function a({dir:e}){return(0,s.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.9",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:"next"===e?(0,s.jsx)("path",{d:"M5 12h13M12.5 5.5L19 12l-6.5 6.5"}):(0,s.jsx)("path",{d:"M19 12H6M11.5 5.5L5 12l6.5 6.5"})})}let i=[{id:"route",title:"AI Route Optimization",blurb:"The best route, planned before the driver ever pulls out of the depot.",desc:"MileTruth™ plans every run before the day starts — sequencing drops, respecting capacity and reading traffic, so the route the driver gets is already the best one available.",benefits:["Multi-stop sequencing solved in milliseconds, not on a whiteboard","Live traffic and road conditions folded back into the plan mid-trip","Capacity and SLA constraints respected on every candidate route","42% average distance saved against manually planned runs"],cta:{label:"See how MileTruth™ plans",href:"/miletruth"},photo:{src:"/images/miletruth-bg.webp",alt:"Doormile trucks running an expressway corridor, seen from above",pos:"50% 50%",cover:3.6},ui:{live:"ROUTE SOLVER",metric:"45ms",metricLabel:"Plan latency",rows:[{k:"Candidates evaluated",v:"47"},{k:"Chosen route",v:"4B"},{k:"Distance saved",v:"42%"}],stamp:"Route 4B locked"}},{id:"pickup",title:"Smart Pickup Management",blurb:"Every pickup booked, batched and sent to the nearest available unit.",desc:"Pickups are booked, batched and assigned to the nearest available unit automatically — no phone tree, no guessing who is closest to your dock.",benefits:["Nearest-unit assignment with skill and vehicle matching","Pickup windows confirmed to the shipper before the driver moves","Geofenced arrival and departure, timestamped on the record","Failed-pickup exceptions escalated the moment they happen"],cta:{label:"Book a pickup demo",href:"/contact"},photo:{src:"/images/card%203.png",alt:"Doormile crew loading a truck at a dispatch dock",pos:"50% 50%",cover:1.8},ui:{live:"DISPATCH QUEUE",metric:"4 min",metricLabel:"ETA to origin",rows:[{k:"Driver",v:"#481 · EV Van"},{k:"Distance",v:"1.2 km"},{k:"Window",v:"09:00 – 10:00"}],stamp:"Unit #481 assigned"}},{id:"fleet",title:"Fleet Intelligence",blurb:"Position, load, charge and health for every vehicle on one live canvas.",desc:"Every vehicle reports position, load and health continuously, so utilisation, charge state and maintenance stop being a monthly spreadsheet exercise.",benefits:["Live position, speed and load for every unit on one canvas","Charge and range planned into the day before the vehicle leaves","Utilisation and idle time surfaced per vehicle, not per depot","Maintenance flags raised from telemetry, ahead of a breakdown"],cta:{label:"Explore fleet intelligence",href:"/miletruth"},photo:{src:"/images/mid-mile-approach.webp",alt:"A line of Doormile vans staged at a mid-mile hub",pos:"50% 55%",cover:1.45},ui:{live:"FLEET TELEMETRY",metric:"94%",metricLabel:"Capacity fill",bars:[46,72,58,88,64,94,76],progress:{label:"Charge across fleet",value:78},stamp:"GPS · 128 units reporting",note:"Illustrative console data"}},{id:"warehouse",title:"Warehouse Coordination",blurb:"Dock time booked against the plan the road is already running on.",desc:"Inbound and outbound are sequenced against the same plan the road runs on, so dock time is booked rather than queued for and nothing waits on a phone call.",benefits:["Dock slots allocated against the actual arrival plan","Inbound manifests matched and validated before the truck lands","Put-away and pick lists driven off the live order record","Cross-dock handovers tracked as one movement, not two"],cta:{label:"Talk to our team",href:"/contact"},photo:{src:"/images/card6.png",alt:"Sorting floor of a Doormile fulfilment centre",pos:"50% 50%",cover:1.8},ui:{live:"DOCK SCHEDULE",metric:"0",metricLabel:"Unplanned waits",rows:[{k:"Bay 03 · Inbound",v:"11:40"},{k:"Bay 07 · Cross-dock",v:"12:15"},{k:"Bay 09 · Outbound",v:"13:05"}],stamp:"Shift tasks 82% complete"}},{id:"control",title:"Live Operations Control",blurb:"One control-room view — the trips at risk find you, not the other way round.",desc:"One control room view of every shipment in motion. Exceptions come to you — you are alerted to the three trips at risk, not the fourteen hundred that are fine.",benefits:["Every order, driver and shipment on a single live map","Delay risk flagged around 30 minutes before it becomes a breach","3x faster response to exceptions than reactive dispatch","One source of status for ops, sales and the customer"],cta:{label:"See it on your operation",href:"/contact"},photo:{src:"/images/first-mile-approach.webp",alt:"Doormile dispatch area with a live operations wall",pos:"34% 50%",cover:1.45},ui:{live:"CONTROL ROOM",metric:"3",metricLabel:"Trips at risk",rows:[{k:"Corridor E-3",v:"68% risk"},{k:"Corridor S-2",v:"34% risk"},{k:"Corridor N-1",v:"22% risk"}],stamp:"2 alerts acknowledged",note:"Illustrative console data"}},{id:"pod",title:"Proof of Delivery",blurb:"OTP, signature and photo at the door, in billing the same second.",desc:"Delivery is confirmed at the door with OTP, signature and photo — and that proof reaches billing the same second, not three days later in a paper envelope.",benefits:["OTP-verified handover with digital signature and photo capture","Proof attached to the shipment record, permanently auditable","Billing triggered on delivery, so invoicing runs same-day","Disputes answered with the timestamped record, not recollection"],cta:{label:"See digital POD",href:"/contact"},photo:{src:"/images/last-mile-approach.webp",alt:"Doormile driver handing a parcel to a customer at the door",pos:"50% 50%",cover:1.45},ui:{live:"POD CAPTURE",metric:"99.2%",metricLabel:"On-time delivery",rows:[{k:"OTP",v:"Verified"},{k:"Signature",v:"Captured"},{k:"Pushed to billing",v:"Instant"}],stamp:"Delivered 14:22 · signed"}},{id:"cx",title:"Customer Experience",blurb:"Your customer watches the same live link your control room does.",desc:"Your customer watches the same live link your control room is watching. The status call stops happening because the answer is already on their screen.",benefits:["One shared tracking link, from first mile to the door","ETAs recalculated live and pushed, not requested","Proactive delay notice before the customer notices","Branded tracking that stays yours end to end"],cta:{label:"Improve your CX",href:"/contact"},photo:{src:"/images/workflow4.png",alt:"Customer following a Doormile delivery on a live tracking link",pos:"50% 50%",cover:2.8},ui:{live:"CUSTOMER TRACKING",metric:"14:22",metricLabel:"Live ETA",rows:[{k:"Link status",v:"Customer viewing"},{k:"ETA updates",v:"Automatic"},{k:"Status calls",v:"0"}],stamp:"★ 4.9 satisfaction"}},{id:"analytics",title:"Analytics & Reports",blurb:"Cost, SLA and utilisation straight from the records the operation ran on.",desc:"Cost per kilometre, SLA performance and utilisation come out of the same records the operation ran on — so the monthly review argues about decisions, not about numbers.",benefits:["Cost per km, per route, per client — from live operational data","SLA and on-time performance tracked continuously, not sampled","Emissions and EV utilisation ready for sustainability reporting","Scheduled exports and API access into your own BI stack"],cta:{label:"See the reporting layer",href:"/miletruth"},photo:{src:"/images/blog-post-pic-15.webp",alt:"A line haul fleet staged overnight before dispatch",pos:"50% 45%",cover:1},ui:{live:"PERFORMANCE",metric:"40%",metricLabel:"Manual tasks removed",bars:[38,52,47,66,71,84,92],progress:{label:"SLA attainment",value:96},stamp:"Q3 · exported to your BI",note:"Illustrative console data"}}];function l({index:e}){let{ui:o}=i[e],t=o.bars;return(0,s.jsxs)("span",{className:"pcap-ui","aria-hidden":"true",children:[0===e&&(0,s.jsxs)("svg",{className:"pg-route",viewBox:"0 0 100 140",preserveAspectRatio:"none",children:[(0,s.jsx)("path",{className:"pg-route-base",d:"M12 132 C 34 104, 20 74, 44 56 S 80 32, 92 6"}),(0,s.jsx)("path",{className:"pg-route-live",d:"M12 132 C 34 104, 20 74, 44 56 S 80 32, 92 6"})]}),(0,s.jsxs)("span",{className:"pg-top",children:[0===e&&(0,s.jsx)("span",{className:"pg-chip pg-chip--ai",children:"AI"}),(0,s.jsxs)("span",{className:"pg-live",children:[(0,s.jsx)("i",{}),o.live]})]}),(0,s.jsxs)("span",{className:"pg-panel",children:[(0,s.jsxs)("span",{className:"pg-metric",children:[(0,s.jsx)("b",{children:o.metric}),(0,s.jsx)("em",{children:o.metricLabel})]}),o.rows&&(0,s.jsx)("span",{className:"pg-rows",children:o.rows.map(e=>(0,s.jsxs)("span",{className:"pg-row",children:[(0,s.jsx)("span",{className:"pg-k",children:e.k}),(0,s.jsx)("span",{className:"pg-v",children:e.v})]},e.k))}),t&&(0,s.jsx)("span",{className:"pg-bars",children:t.map((e,o)=>(0,s.jsx)("i",{className:o===t.length-1?"is-hi":void 0,style:{height:`${e}%`}},o))}),o.progress&&(0,s.jsxs)("span",{className:"pg-progwrap",children:[(0,s.jsxs)("span",{className:"pg-progrow",children:[(0,s.jsx)("span",{className:"pg-k",children:o.progress.label}),(0,s.jsxs)("span",{className:"pg-v",children:[o.progress.value,"%"]})]}),(0,s.jsx)("span",{className:"pg-prog",children:(0,s.jsx)("i",{style:{width:`${o.progress.value}%`}})})]}),o.stamp&&(0,s.jsxs)("span",{className:"pg-stamp",children:[(0,s.jsx)("svg",{viewBox:"0 0 24 24","aria-hidden":"true",children:(0,s.jsx)("path",{d:"M20 6L9 17l-5-5"})}),o.stamp]})]})]})}let n=`
|
||
#pcap-root {
|
||
--pc-red: #C01227;
|
||
--pc-red-bright: #E2354A;
|
||
--pc-line: rgba(255,255,255,0.10);
|
||
--pc-dim: rgba(255,255,255,0.62);
|
||
--pcap-gap: 24px;
|
||
position: relative;
|
||
/* The theme's global "section { padding: 6rem 0 }" (site.css) would add 96px
|
||
top/bottom here; this block is spaced by .miles3-continue + the divider
|
||
instead, so zero it out — the vertical rhythm must be content-driven. */
|
||
padding: 0;
|
||
}
|
||
#pcap-root, #pcap-root * { font-family: var(--font-manrope), "Manrope", sans-serif; box-sizing: border-box; }
|
||
|
||
/* The theme kit decorates EVERY list item globally (padding + a fontello
|
||
check via ::before). Neutralise it inside this section. */
|
||
#pcap-root ul { list-style: none; margin: 0; padding: 0; }
|
||
#pcap-root ul li { position: relative; padding: 0; }
|
||
#pcap-root ul li::before { content: none !important; display: none !important; }
|
||
|
||
#pcap-root .pcap-in { position: relative; width: 100%; min-width: 0; max-width: 100%; }
|
||
#pcap-root .pcap-stage, #pcap-root .pcap-viewport { max-width: 100%; min-width: 0; }
|
||
|
||
/* A hairline above the block ties it to the mile cards without splitting the
|
||
dark surface into two sections. */
|
||
#pcap-root .pcap-in::before {
|
||
content: ''; display: block; height: 1px; width: 100%;
|
||
background: linear-gradient(90deg, transparent, var(--pc-line) 18%, var(--pc-line) 82%, transparent);
|
||
margin-bottom: clamp(14px, 1.8vw, 22px);
|
||
}
|
||
|
||
/* ---------- Header (centered) ---------- */
|
||
#pcap-root .pcap-head { max-width: 760px; margin: 0 auto clamp(38px, 4vw, 60px); text-align: center; }
|
||
#pcap-root .pcap-eyebrow {
|
||
display: inline-block; color: var(--pc-red-bright); font-weight: 800;
|
||
text-transform: uppercase; letter-spacing: 0.16em; font-size: 12.5px; margin-bottom: 16px;
|
||
}
|
||
#pcap-root .pcap-h {
|
||
margin: 0; color: #fff; font-size: clamp(28px, 3.4vw, 52px); font-weight: 500;
|
||
line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase;
|
||
}
|
||
#pcap-root .pcap-h .accent { color: var(--pc-red-bright); }
|
||
#pcap-root .pcap-lede { margin: 18px auto 0; max-width: 640px; color: var(--pc-dim); font-size: 16px; line-height: 1.72; }
|
||
|
||
/* ---------- Stage (viewport + floating nav) ---------- */
|
||
#pcap-root .pcap-stage { position: relative; }
|
||
|
||
/* ---------- Viewport + track ---------- */
|
||
#pcap-root .pcap-viewport {
|
||
overflow: hidden; outline: none; cursor: grab;
|
||
touch-action: pan-y; margin: 0 -2px; padding: 12px 2px;
|
||
}
|
||
#pcap-root .pcap-viewport:active { cursor: grabbing; }
|
||
#pcap-root .pcap-viewport:focus-visible { border-radius: 24px; box-shadow: 0 0 0 2px var(--pc-red-bright); }
|
||
#pcap-root .pcap-track {
|
||
display: flex; align-items: stretch; will-change: transform;
|
||
transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
#pcap-root .pcap-track.is-dragging { transition: none; }
|
||
|
||
/* Fallback widths before JS measures (and if JS never runs) */
|
||
#pcap-root .pcap-card { flex: 0 0 calc((100% - 2 * var(--pcap-gap)) / 3); }
|
||
@media (max-width: 1023px) { #pcap-root .pcap-card { flex: 0 0 calc((100% - var(--pcap-gap)) / 2); } }
|
||
@media (max-width: 639px) { #pcap-root .pcap-card { flex: 0 0 100%; } }
|
||
|
||
/* ---------- Card: full-bleed portrait image card ---------- */
|
||
#pcap-root .pcap-card {
|
||
transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.4s;
|
||
}
|
||
#pcap-root .pcap-card:not(.is-active) { opacity: 0.42; }
|
||
#pcap-root .pcap-card.is-active:hover { transform: translateY(-10px); }
|
||
|
||
#pcap-root .pcap-card-inner {
|
||
position: relative; display: block; aspect-ratio: 63 / 90; overflow: hidden;
|
||
border-radius: 26px; text-decoration: none;
|
||
background: linear-gradient(160deg, #26262b 0%, #16161a 100%);
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
box-shadow: 0 34px 80px -46px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,255,255,0.05);
|
||
transition: border-color 0.45s, box-shadow 0.45s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
#pcap-root .pcap-card.is-active:hover .pcap-card-inner {
|
||
border-color: rgba(226,53,74,0.55);
|
||
box-shadow: 0 48px 100px -42px rgba(0,0,0,0.96), 0 0 0 1px rgba(226,53,74,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
|
||
}
|
||
#pcap-root .pcap-card-inner:focus-visible { outline: 2px solid var(--pc-red-bright); outline-offset: 3px; }
|
||
|
||
/* The photograph — full-bleed, filling the frame, zooming gently on hover. */
|
||
#pcap-root .pcap-card-scene {
|
||
position: absolute; inset: 0; z-index: 0; overflow: hidden;
|
||
background: #101014;
|
||
}
|
||
#pcap-root .pcap-photo {
|
||
position: absolute; inset: 0; width: 100%; height: 100%;
|
||
object-fit: cover; display: block; user-select: none;
|
||
/* Shared cinematic grade. Eight different source photographs have to read as
|
||
one set, so they are pulled to the same darkness and saturation here rather
|
||
than being re-exported. */
|
||
filter: saturate(0.94) contrast(1.06) brightness(0.92);
|
||
transform: scale(1.005);
|
||
transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.5s ease;
|
||
}
|
||
#pcap-root .pcap-card.is-active:hover .pcap-photo {
|
||
transform: scale(1.03);
|
||
filter: saturate(1.04) contrast(1.07) brightness(1.02);
|
||
}
|
||
/* Grade + vignette: darkens the top so the live pill and index chip read, and
|
||
closes the corners so the photo sits inside the card rather than escaping it. */
|
||
#pcap-root .pcap-grade {
|
||
position: absolute; inset: 0; z-index: 1; pointer-events: none;
|
||
background:
|
||
linear-gradient(to bottom, rgba(10,10,13,0.6) 0%, rgba(10,10,13,0.16) 22%, transparent 42%),
|
||
radial-gradient(120% 86% at 50% 38%, transparent 44%, rgba(0,0,0,0.5) 100%);
|
||
}
|
||
/* Brand wash — off at rest, warms the frame on hover. */
|
||
#pcap-root .pcap-tint {
|
||
position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
|
||
background: radial-gradient(96% 62% at 50% 4%, rgba(226,53,74,0.36), transparent 70%);
|
||
mix-blend-mode: screen;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
#pcap-root .pcap-card.is-active:hover .pcap-tint { opacity: 1; }
|
||
|
||
/* ---------- Glass UI overlays ---------- */
|
||
#pcap-root .pcap-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
|
||
|
||
/* Shared glass surface */
|
||
#pcap-root .pg-live,
|
||
#pcap-root .pg-chip,
|
||
#pcap-root .pg-panel {
|
||
-webkit-backdrop-filter: blur(16px) saturate(1.4);
|
||
backdrop-filter: blur(16px) saturate(1.4);
|
||
background: rgba(17,17,21,0.44);
|
||
border: 1px solid rgba(255,255,255,0.16);
|
||
box-shadow: 0 12px 34px -16px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,255,255,0.10);
|
||
}
|
||
|
||
/* Live pill + optional AI chip, top-right (the index chip owns top-left) */
|
||
#pcap-root .pg-top {
|
||
position: absolute; top: 15px; right: 16px;
|
||
display: flex; align-items: center; gap: 7px;
|
||
}
|
||
#pcap-root .pg-live {
|
||
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
|
||
padding: 5px 10px 5px 8px; border-radius: 999px;
|
||
color: rgba(255,255,255,0.92); font-size: 9px; font-weight: 800;
|
||
letter-spacing: 0.13em; text-transform: uppercase;
|
||
}
|
||
#pcap-root .pg-live i {
|
||
width: 5px; height: 5px; border-radius: 50%; flex: none;
|
||
background: var(--pc-red-bright); box-shadow: 0 0 0 3px rgba(226,53,74,0.22);
|
||
animation: pcap-pulse 2.4s ease-in-out infinite;
|
||
}
|
||
#pcap-root .pg-chip {
|
||
padding: 5px 9px; border-radius: 9px; color: #ff93a0;
|
||
border-color: rgba(226,53,74,0.5);
|
||
font-size: 9px; font-weight: 800; letter-spacing: 0.14em;
|
||
}
|
||
|
||
/* Main metric widget. Deliberately a CARD, not a band: capped in width so the
|
||
photograph still reads down the right-hand side, and anchored as a fraction
|
||
of card height so it holds its place at every card width and clears the
|
||
caption even when the blurb expands on hover. */
|
||
#pcap-root .pg-panel {
|
||
position: absolute; left: 16px; top: 26%;
|
||
width: calc(100% - 32px); max-width: 268px;
|
||
border-radius: 16px; padding: 12px 13px 13px;
|
||
display: flex; flex-direction: column; gap: 9px;
|
||
transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
|
||
}
|
||
#pcap-root .pcap-card.is-active:hover .pg-panel { transform: translateY(-6px); }
|
||
|
||
#pcap-root .pg-metric { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
|
||
#pcap-root .pg-metric b {
|
||
color: #fff; font-size: clamp(19px, 1.85vw, 26px); font-weight: 700;
|
||
letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums;
|
||
}
|
||
#pcap-root .pg-metric em {
|
||
font-style: normal; color: rgba(255,255,255,0.58); font-size: 9.5px; font-weight: 700;
|
||
letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
|
||
}
|
||
|
||
#pcap-root .pg-rows { display: flex; flex-direction: column; gap: 6px; }
|
||
#pcap-root .pg-row,
|
||
#pcap-root .pg-progrow {
|
||
display: flex; align-items: center; justify-content: space-between; gap: 10px;
|
||
font-size: 10.5px; line-height: 1.3;
|
||
}
|
||
#pcap-root .pg-row + .pg-row { padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.09); }
|
||
#pcap-root .pg-k {
|
||
color: rgba(255,255,255,0.56); font-weight: 600;
|
||
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
#pcap-root .pg-v { color: #fff; font-weight: 700; white-space: nowrap; flex: none; }
|
||
|
||
#pcap-root .pg-bars { display: flex; align-items: flex-end; gap: 5px; height: 38px; }
|
||
#pcap-root .pg-bars i {
|
||
flex: 1; min-height: 4px; border-radius: 3px 3px 1px 1px;
|
||
background: linear-gradient(to top, rgba(255,255,255,0.14), rgba(255,255,255,0.44));
|
||
}
|
||
#pcap-root .pg-bars i.is-hi {
|
||
background: linear-gradient(to top, var(--pc-red), var(--pc-red-bright));
|
||
box-shadow: 0 0 12px rgba(226,53,74,0.55);
|
||
}
|
||
|
||
#pcap-root .pg-progwrap { display: flex; flex-direction: column; gap: 6px; }
|
||
#pcap-root .pg-prog {
|
||
display: block; height: 4px; border-radius: 999px;
|
||
background: rgba(255,255,255,0.14); overflow: hidden;
|
||
}
|
||
#pcap-root .pg-prog i {
|
||
display: block; height: 100%; border-radius: 999px;
|
||
background: linear-gradient(90deg, var(--pc-red), var(--pc-red-bright));
|
||
}
|
||
|
||
#pcap-root .pg-stamp {
|
||
display: flex; align-items: center; gap: 7px;
|
||
padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.09);
|
||
color: rgba(255,255,255,0.74); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
|
||
}
|
||
#pcap-root .pg-stamp svg {
|
||
width: 11px; height: 11px; flex: none;
|
||
fill: none; stroke: var(--pc-red-bright); stroke-width: 3;
|
||
stroke-linecap: round; stroke-linejoin: round;
|
||
}
|
||
|
||
/* Routing card only — the chosen line tracing the corridor in the photo */
|
||
#pcap-root .pg-route {
|
||
position: absolute; left: 0; top: 0; width: 100%; height: 64%; z-index: 1;
|
||
pointer-events: none; overflow: visible;
|
||
}
|
||
#pcap-root .pg-route-base {
|
||
fill: none; stroke: rgba(255,255,255,0.44); stroke-width: 1.5;
|
||
stroke-dasharray: 4 5; vector-effect: non-scaling-stroke;
|
||
}
|
||
/* A long lit segment running the corridor, rather than a short tick that reads
|
||
as a stray mark over the photograph. */
|
||
#pcap-root .pg-route-live {
|
||
fill: none; stroke: var(--pc-red-bright); stroke-width: 2.8; stroke-linecap: round;
|
||
vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 7px rgba(226,53,74,0.85));
|
||
stroke-dasharray: 62 138; animation: pcap-draw 3.8s linear infinite;
|
||
}
|
||
@keyframes pcap-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
|
||
|
||
/* Bottom scrim so the overlaid title always reads */
|
||
#pcap-root .pcap-scrim {
|
||
position: absolute; inset: 0; z-index: 1; pointer-events: none;
|
||
background: linear-gradient(to top, rgba(9,9,11,0.92) 6%, rgba(9,9,11,0.6) 34%, rgba(9,9,11,0.05) 62%, transparent 78%);
|
||
transition: opacity 0.45s; opacity: 0.9;
|
||
}
|
||
#pcap-root .pcap-card.is-active:hover .pcap-scrim { opacity: 1; }
|
||
|
||
/* Small index chip, top-left */
|
||
#pcap-root .pcap-card-num {
|
||
position: absolute; top: 18px; left: 20px; z-index: 3;
|
||
color: rgba(255,255,255,0.9); font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em;
|
||
}
|
||
#pcap-root .pcap-card-num::before {
|
||
content: ''; display: inline-block; width: 20px; height: 2px; margin-right: 8px;
|
||
background: var(--pc-red-bright); vertical-align: middle;
|
||
}
|
||
|
||
/* Overlaid caption: title + arrow, bottom row */
|
||
#pcap-root .pcap-card-cap {
|
||
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
|
||
display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
|
||
padding: 24px 22px 26px;
|
||
}
|
||
#pcap-root .pcap-card-text { min-width: 0; }
|
||
#pcap-root .pcap-card-kicker {
|
||
display: block; color: var(--pc-red-bright); font-size: 10.5px; font-weight: 800;
|
||
text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 9px;
|
||
}
|
||
#pcap-root .pcap-card-title {
|
||
display: block; color: #fff; font-size: clamp(19px, 1.5vw, 23px); font-weight: 700;
|
||
letter-spacing: -0.02em; line-height: 1.18;
|
||
}
|
||
/* Blurb reveals on hover, mirroring the reference's quiet-until-hover cards */
|
||
#pcap-root .pcap-card-blurb {
|
||
display: block; color: rgba(255,255,255,0.72); font-size: 13.5px; line-height: 1.55;
|
||
max-width: 92%;
|
||
max-height: 0; opacity: 0; margin-top: 0;
|
||
overflow: hidden; transform: translateY(6px);
|
||
transition: max-height 0.45s ease, opacity 0.4s ease, margin-top 0.45s ease, transform 0.45s ease;
|
||
}
|
||
#pcap-root .pcap-card.is-active:hover .pcap-card-blurb {
|
||
max-height: 84px; opacity: 1; margin-top: 11px; transform: translateY(0);
|
||
}
|
||
#pcap-root .pcap-card-arrow {
|
||
flex: none; width: 44px; height: 44px; border-radius: 50%;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.24); color: #fff;
|
||
transition: background 0.35s, border-color 0.35s, transform 0.35s;
|
||
}
|
||
#pcap-root .pcap-card-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||
#pcap-root .pcap-card.is-active:hover .pcap-card-arrow {
|
||
background: var(--pc-red); border-color: var(--pc-red-bright); transform: translate(2px,-2px) rotate(0deg);
|
||
}
|
||
|
||
/* ---------- Carousel navigation pill in footer ---------- */
|
||
#pcap-root .pcap-nav-btns {
|
||
display: flex; align-items: center; gap: 2px;
|
||
width: 92px; height: 42px; border-radius: 999px; flex: none;
|
||
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
|
||
backdrop-filter: blur(8px);
|
||
transition: background 0.3s, border-color 0.3s, transform 0.3s;
|
||
}
|
||
#pcap-root .pcap-nav-btns:hover {
|
||
border-color: rgba(226,53,74,0.45);
|
||
background: rgba(255,255,255,0.09);
|
||
}
|
||
#pcap-root .pcap-float-div { width: 1px; height: 20px; background: rgba(255,255,255,0.16); flex: none; }
|
||
#pcap-root .pcap-fbtn {
|
||
flex: 1; height: 100%; border: 0; background: none; color: #fff; cursor: pointer;
|
||
display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
|
||
transition: color 0.25s, transform 0.25s;
|
||
}
|
||
#pcap-root .pcap-fbtn:first-child { padding-right: 2px; }
|
||
#pcap-root .pcap-fbtn:last-child { padding-left: 2px; }
|
||
#pcap-root .pcap-fbtn svg { width: 18px; height: 18px; transition: transform 0.25s; }
|
||
#pcap-root .pcap-fbtn:hover { color: var(--pc-red-bright); }
|
||
#pcap-root .pcap-fbtn:first-child:hover svg { transform: translateX(-3px); }
|
||
#pcap-root .pcap-fbtn:last-child:hover svg { transform: translateX(3px); }
|
||
#pcap-root .pcap-fbtn:focus-visible { outline: 2px solid var(--pc-red-bright); outline-offset: 2px; }
|
||
|
||
@keyframes pcap-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.35); } }
|
||
|
||
/* ---------- Footer: Explore (left) + segmented progress (right) ---------- */
|
||
#pcap-root .pcap-foot {
|
||
display: flex; align-items: center; justify-content: space-between; gap: 24px;
|
||
margin-top: clamp(30px, 3.4vw, 48px);
|
||
}
|
||
|
||
/* Explore-more pill */
|
||
#pcap-root .pcap-explore {
|
||
display: inline-flex; align-items: center; gap: 14px; flex: none;
|
||
padding: 13px 15px 13px 26px; border-radius: 999px;
|
||
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.18);
|
||
color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.05em;
|
||
text-transform: uppercase; text-decoration: none;
|
||
transition: background 0.3s, border-color 0.3s, transform 0.3s;
|
||
}
|
||
#pcap-root .pcap-explore-ic {
|
||
width: 34px; height: 34px; border-radius: 50%; flex: none;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
background: var(--pc-red); color: #fff; transition: background 0.3s, transform 0.3s;
|
||
}
|
||
#pcap-root .pcap-explore-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||
#pcap-root .pcap-explore:hover { border-color: rgba(226,53,74,0.45); transform: translateY(-2px); }
|
||
#pcap-root .pcap-explore:hover .pcap-explore-ic { background: var(--pc-red-bright); transform: translate(2px,-2px); }
|
||
#pcap-root .pcap-explore:focus-visible { outline: 2px solid var(--pc-red-bright); outline-offset: 3px; }
|
||
|
||
/* Counter + segmented indicator */
|
||
#pcap-root .pcap-progress { display: flex; align-items: center; gap: 20px; flex: none; }
|
||
#pcap-root .pcap-count { color: rgba(255,255,255,0.55); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
|
||
#pcap-root .pcap-count b { color: #fff; font-size: 20px; }
|
||
|
||
#pcap-root .pcap-segs { display: flex; align-items: center; gap: 9px; }
|
||
/* 24px tall tap target with a 2px line drawn via ::after */
|
||
#pcap-root .pcap-seg {
|
||
position: relative; width: 30px; height: 24px; padding: 0; border: 0; background: none;
|
||
cursor: pointer; display: flex; align-items: center;
|
||
}
|
||
#pcap-root .pcap-seg::after {
|
||
content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
|
||
height: 2px; border-radius: 2px; background: rgba(255,255,255,0.16); transition: background 0.25s;
|
||
}
|
||
#pcap-root .pcap-seg.is-lit::after { background: rgba(255,255,255,0.34); }
|
||
#pcap-root .pcap-seg:hover::after { background: rgba(255,255,255,0.5); }
|
||
#pcap-root .pcap-seg-fill {
|
||
position: relative; z-index: 1; display: block;
|
||
width: 0; height: 2px; border-radius: 2px; background: var(--pc-red-bright);
|
||
}
|
||
#pcap-root .pcap-seg.is-active > .pcap-seg-fill { width: 100%; animation: pcap-seg 5200ms linear forwards; }
|
||
#pcap-root .pcap-seg:focus-visible { outline: 2px solid var(--pc-red-bright); outline-offset: 2px; border-radius: 4px; }
|
||
@keyframes pcap-seg { from { width: 0; } to { width: 100%; } }
|
||
|
||
/* ---------- Responsive ---------- */
|
||
@media (max-width: 1023px) {
|
||
#pcap-root .pcap-card-cap { padding: 20px 18px 22px; }
|
||
}
|
||
@media (max-width: 639px) {
|
||
#pcap-root .pcap-foot { flex-direction: column; align-items: stretch; gap: 18px; }
|
||
#pcap-root .pcap-explore { justify-content: center; }
|
||
#pcap-root .pcap-progress { justify-content: space-between; gap: 12px; }
|
||
#pcap-root .pcap-segs { flex: 1; justify-content: space-between; gap: 6px; }
|
||
#pcap-root .pcap-seg { flex: 1; width: auto; }
|
||
#pcap-root .pcap-count b { font-size: 18px; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
#pcap-root .pcap-track { transition: none; }
|
||
#pcap-root .pg-live i,
|
||
#pcap-root .pg-route-live { animation: none !important; }
|
||
#pcap-root .pg-route-live { stroke-dasharray: none; }
|
||
#pcap-root .pcap-photo { transition: none; }
|
||
#pcap-root .pcap-card.is-active:hover { transform: none; }
|
||
#pcap-root .pcap-card.is-active:hover .pcap-photo { transform: scale(1.005); }
|
||
#pcap-root .pcap-card.is-active:hover .pg-panel { transform: none; }
|
||
#pcap-root .pcap-seg.is-active > .pcap-seg-fill { width: 100%; animation: none; }
|
||
}
|
||
`;e.s(["default",0,function(){let e=(0,o.useRef)(null),[c,d]=(0,o.useState)(3),[p,h]=(0,o.useState)(0),[x,m]=(0,o.useState)(0),[g,f]=(0,o.useState)(0),[b,u]=(0,o.useState)(!1),[v,y]=(0,o.useState)(!1),[w,j]=(0,o.useState)(!1),k=(0,o.useRef)(0),N=i.length,M=Math.max(0,N-c);(0,o.useEffect)(()=>{let s=e.current;if(!s)return;let o=()=>{let e=s.clientWidth;h(e),d(e<640?1:e<1024?2:3)};o();let t=new ResizeObserver(o);return t.observe(s),()=>t.disconnect()},[]),(0,o.useEffect)(()=>{let e=window.matchMedia("(prefers-reduced-motion: reduce)"),s=()=>j(e.matches);return s(),e.addEventListener?.("change",s),()=>e.removeEventListener?.("change",s)},[]),(0,o.useEffect)(()=>{m(e=>Math.min(e,Math.max(0,N-c)))},[c,N]);let S=p>0?(p-(c-1)*24)/c:0,T=S+24,E=(0,o.useCallback)(e=>Math.max(0,Math.min(e,M)),[M]),z=(0,o.useCallback)(e=>m(E(e)),[E]),O=(0,o.useCallback)(()=>m(e=>e<=0?M:e-1),[M]),C=(0,o.useCallback)(()=>m(e=>e>=M?0:e+1),[M]);(0,o.useEffect)(()=>{if(w||v||b||0===M)return;let e=window.setInterval(()=>{m(e=>e>=M?0:e+1)},5200);return()=>window.clearInterval(e)},[w,v,b,M]);let L=(0,o.useCallback)(e=>{(null==e.button||0===e.button)&&(u(!0),y(!0),k.current=e.clientX,e.currentTarget.setPointerCapture?.(e.pointerId))},[]),R=(0,o.useCallback)(e=>{b&&f(e.clientX-k.current)},[b]),A=(0,o.useCallback)(e=>{if(!b)return;let s=e.clientX-k.current;if(u(!1),f(0),T>0&&Math.abs(s)>8){let e=Math.round(-s/T)||(s<0?1:-1);(Math.abs(s)>40||Math.abs(e)>=1)&&z(x+e)}window.setTimeout(()=>y(!1),350)},[b,T,x,z]),F=(0,o.useCallback)(e=>{"ArrowRight"===e.key&&(e.preventDefault(),C()),"ArrowLeft"===e.key&&(e.preventDefault(),O())},[C,O]),D=(0,o.useMemo)(()=>{let e=-M*T,s=-x*T+(b?g:0);return b&&(s>0?s*=.35:s<e&&(s=e+(s-e)*.35)),s},[x,T,b,g,M]),I=String(Math.min(x+1,N)).padStart(2,"0"),P=String(N).padStart(2,"0");return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:n}}),(0,s.jsx)("section",{id:"pcap-root","aria-labelledby":"pcap-heading",children:(0,s.jsxs)("div",{className:"pcap-in",children:[(0,s.jsxs)("div",{className:"pcap-head",children:[(0,s.jsx)("span",{className:"pcap-eyebrow",children:"/ Platform Capabilities /"}),(0,s.jsxs)("h2",{className:"pcap-h",id:"pcap-heading",children:["EVERYTHING THE PLATFORM",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"DOES FOR YOUR OPERATION."})]}),(0,s.jsx)("p",{className:"pcap-lede",children:"The services above are what we move. This is what runs underneath them — eight capabilities working on the same shipment record, from the route being planned to the report being signed off."})]}),(0,s.jsx)("div",{className:"pcap-stage",children:(0,s.jsx)("div",{className:"pcap-viewport",ref:e,role:"group","aria-roledescription":"carousel","aria-label":"Platform capabilities",tabIndex:0,onKeyDown:F,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),onFocus:()=>y(!0),onBlur:()=>y(!1),onPointerDown:L,onPointerMove:R,onPointerUp:A,onPointerCancel:A,children:(0,s.jsx)("ul",{className:`pcap-track${b?" is-dragging":""}`,style:{transform:`translate3d(${D}px,0,0)`,gap:"24px"},children:i.map((e,o)=>{var a;let i,n=o>=x&&o<x+c,d=String(o+1).padStart(2,"0");return(0,s.jsx)("li",{className:`pcap-card${n?" is-active":""}`,style:S?{flex:`0 0 ${S}px`}:void 0,"aria-hidden":!n||void 0,children:(0,s.jsxs)(r.default,{href:e.cta.href,className:"pcap-card-inner","aria-label":`${e.title} — ${e.cta.label}`,tabIndex:n?void 0:-1,draggable:!1,onClick:e=>{Math.abs(g)>6&&e.preventDefault()},children:[(0,s.jsxs)("span",{className:"pcap-card-scene",children:[(0,s.jsx)(t.default,{className:"pcap-photo",src:e.photo.src,alt:e.photo.alt,fill:!0,sizes:(a=e.photo.cover,i=e=>Math.round(e*a),`(max-width: 639px) ${i(92)}vw, (max-width: 1023px) ${i(46)}vw, ${i(31)}vw`),style:e.photo.pos?{objectPosition:e.photo.pos}:void 0,draggable:!1}),(0,s.jsx)("span",{className:"pcap-grade","aria-hidden":"true"}),(0,s.jsx)("span",{className:"pcap-tint","aria-hidden":"true"})]}),(0,s.jsx)(l,{index:o}),(0,s.jsx)("span",{className:"pcap-scrim","aria-hidden":"true"}),(0,s.jsx)("span",{className:"pcap-card-num","aria-hidden":"true",children:d}),(0,s.jsxs)("span",{className:"pcap-card-cap",children:[(0,s.jsxs)("span",{className:"pcap-card-text",children:[(0,s.jsxs)("span",{className:"pcap-card-kicker",children:["Capability ",d]}),(0,s.jsx)("span",{className:"pcap-card-title",children:e.title}),(0,s.jsx)("span",{className:"pcap-card-blurb",children:e.blurb})]}),(0,s.jsx)("span",{className:"pcap-card-arrow","aria-hidden":"true",children:(0,s.jsx)("svg",{viewBox:"0 0 24 24",children:(0,s.jsx)("path",{d:"M7 17L17 7M17 7H8.5M17 7V15.5"})})})]})]})},e.id)})})})}),(0,s.jsxs)("div",{className:"pcap-foot",children:[(0,s.jsxs)(r.default,{href:"/miletruth",className:"pcap-explore",children:[(0,s.jsx)("span",{children:"Explore more"}),(0,s.jsx)("span",{className:"pcap-explore-ic","aria-hidden":"true",children:(0,s.jsx)("svg",{viewBox:"0 0 24 24",children:(0,s.jsx)("path",{d:"M7 17L17 7M17 7H8.5M17 7V15.5"})})})]}),(0,s.jsxs)("div",{className:"pcap-progress",children:[(0,s.jsxs)("div",{className:"pcap-nav-btns","aria-label":"Carousel navigation",children:[(0,s.jsx)("button",{type:"button",className:"pcap-fbtn",onClick:O,"aria-label":"Previous capabilities",children:(0,s.jsx)(a,{dir:"prev"})}),(0,s.jsx)("span",{className:"pcap-float-div","aria-hidden":"true"}),(0,s.jsx)("button",{type:"button",className:"pcap-fbtn",onClick:C,"aria-label":"Next capabilities",children:(0,s.jsx)(a,{dir:"next"})})]}),(0,s.jsxs)("span",{className:"pcap-count","aria-hidden":"true",children:[(0,s.jsx)("b",{children:I})," / ",P]}),(0,s.jsx)("div",{className:"pcap-segs",role:"tablist","aria-label":"Choose a capability",children:i.map((e,o)=>(0,s.jsx)("button",{type:"button",role:"tab","aria-selected":o===x,"aria-label":e.title,className:`pcap-seg${o===x?" is-active":""}${o>=x&&o<x+c?" is-lit":""}`,onClick:()=>z(o),children:(0,s.jsx)("span",{className:"pcap-seg-fill",style:o!==x||w||v||!(M>0)?void 0:{animationDuration:"5200ms"}})},e.id))})]})]})]})})]})}])},20597,e=>{"use strict";var s=e.i(43476),o=e.i(71645);function t(e){return Math.round(e).toLocaleString("de-DE")}let r=`
|
||
#dcount-root {
|
||
--pc-red-bright: #E2354A;
|
||
position: relative;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 20px 0;
|
||
margin: 0;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
#dcount-root, #dcount-root * { font-family: var(--font-manrope), "Manrope", sans-serif; box-sizing: border-box; }
|
||
|
||
/* Dotted world map backdrop — naturally overlays the statistic counter */
|
||
#dcount-root .dc-map {
|
||
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
|
||
width: min(1300px, 98%); height: 100%; min-height: 380px; z-index: 0; pointer-events: none;
|
||
background: url(/images/bg-map.png) center / contain no-repeat;
|
||
filter: invert(1) brightness(2.2);
|
||
opacity: 0.18;
|
||
-webkit-mask-image: radial-gradient(85% 85% at 50% 50%, #000 50%, transparent 100%);
|
||
mask-image: radial-gradient(85% 85% at 50% 50%, #000 50%, transparent 100%);
|
||
}
|
||
|
||
#dcount-root .dc-fig {
|
||
position: relative; z-index: 1;
|
||
display: inline-flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 30px);
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
/* Big outlined numeral, red stroke, transparent fill */
|
||
#dcount-root .dc-num {
|
||
color: transparent;
|
||
-webkit-text-stroke: 2px var(--pc-red-bright);
|
||
font-size: clamp(52px, 11vw, 180px);
|
||
font-weight: 500; line-height: 0.95; letter-spacing: -0.015em;
|
||
font-variant-numeric: tabular-nums; white-space: nowrap;
|
||
text-shadow: 0 0 40px rgba(226,53,74,0.18);
|
||
max-width: 100%;
|
||
}
|
||
/* Firefox/older engines without text-stroke: fall back to a faint red fill so
|
||
the number never disappears. */
|
||
@supports not ((-webkit-text-stroke: 2px red)) {
|
||
#dcount-root .dc-num { color: rgba(226,53,74,0.85); }
|
||
}
|
||
|
||
/* Rotated caption, reading bottom-to-top like the reference */
|
||
#dcount-root .dc-label {
|
||
writing-mode: vertical-rl; transform: rotate(180deg);
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
color: #fff; line-height: 1.15; padding-bottom: 4px;
|
||
}
|
||
#dcount-root .dc-label b { font-size: clamp(12px, 1.1vw, 15px); font-weight: 700; letter-spacing: 0.02em; }
|
||
#dcount-root .dc-label i { font-style: normal; color: rgba(255,255,255,0.5); font-size: clamp(11px, 1vw, 14px); font-weight: 600; }
|
||
|
||
/* Screen-reader-only final figure (the visible number animates via aria-hidden fig) */
|
||
#dcount-root .dc-sr {
|
||
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
||
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
#dcount-root .dc-num { font-size: clamp(40px, 9vw, 110px); -webkit-text-stroke-width: 1.8px; }
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
#dcount-root { padding: 24px 0 20px; }
|
||
#dcount-root .dc-fig {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 0 10px;
|
||
}
|
||
#dcount-root .dc-num {
|
||
font-size: clamp(30px, 8.8vw, 48px);
|
||
-webkit-text-stroke-width: 1.5px;
|
||
letter-spacing: -0.02em;
|
||
text-align: center;
|
||
}
|
||
#dcount-root .dc-label {
|
||
writing-mode: horizontal-tb;
|
||
transform: none;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
padding-bottom: 0;
|
||
}
|
||
#dcount-root .dc-label b { font-size: 12.5px; opacity: 0.95; }
|
||
#dcount-root .dc-label i { font-size: 11.5px; opacity: 0.65; }
|
||
#dcount-root .dc-label i::before { content: "\xb7"; margin-right: 6px; color: rgba(226,53,74,0.8); }
|
||
}
|
||
|
||
@media (max-width: 360px) {
|
||
#dcount-root .dc-num {
|
||
font-size: clamp(26px, 8.2vw, 36px);
|
||
-webkit-text-stroke-width: 1.3px;
|
||
}
|
||
}
|
||
`;e.s(["default",0,function(){let e=(0,o.useRef)(null),[a,i]=(0,o.useState)(0);return(0,o.useEffect)(()=>{let s=e.current;if(!s)return;let o=window.matchMedia("(prefers-reduced-motion: reduce)").matches,t=0,r=!1,a=new IntersectionObserver(e=>{if(!e[0].isIntersecting||r)return;if(r=!0,a.disconnect(),o)return void i(0x17af9a5);let s=performance.now(),l=e=>{let o=Math.min(1,(e-s)/2200);i(0x17af9a5*(1-Math.pow(1-o,3))),o<1&&(t=requestAnimationFrame(l))};t=requestAnimationFrame(l)},{threshold:.35});return a.observe(s),()=>{a.disconnect(),cancelAnimationFrame(t)}},[]),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:r}}),(0,s.jsxs)("section",{id:"dcount-root",ref:e,"aria-label":"Deliveries completed to date",children:[(0,s.jsx)("span",{className:"dc-map","aria-hidden":"true"}),(0,s.jsxs)("div",{className:"dc-fig",children:[(0,s.jsx)("span",{className:"dc-num",children:t(a)}),(0,s.jsxs)("span",{className:"dc-label","aria-hidden":"true",children:[(0,s.jsx)("b",{children:"Parcels delivered"}),(0,s.jsx)("i",{children:"end to end"})]}),(0,s.jsxs)("span",{className:"dc-sr",children:[t(0x17af9a5)," parcels delivered end to end"]})]})]})]})}])},32850,e=>{"use strict";var s=e.i(43476),o=e.i(71645),t=e.i(22016),r=e.i(46932),a=e.i(35382),i=e.i(95420),l=e.i(91994),n=e.i(72328),c=e.i(49492),d=e.i(87652),p=e.i(2018),h=e.i(5074);function x({accent:e="#E2354A",tone:t="dark",className:r}){let a=(0,o.useRef)(null);return(0,o.useEffect)(()=>{let s,o,r=a.current,i=r?.parentElement;if(!r||!i)return;let l=r.getContext("2d",{alpha:!0});if(!l)return;let[n,c,d]=[(o=parseInt(3===(s=e.replace("#","")).length?s.split("").map(e=>e+e).join(""):s,16))>>16&255,o>>8&255,255&o],p="light"===t,[h,x,m]=p?[17,17,17]:[255,255,255],g=window.matchMedia("(prefers-reduced-motion: reduce)").matches,f=0,b=0,u=[],v=[],y=[],w=0,j=!0,k=!1,N=0,M=600,S={x:-9999,y:-9999},T=(e,s)=>e+Math.random()*(s-e);function E(){let e,s=i.getBoundingClientRect();if(!s.width||!s.height)return;let o=Math.min(2,window.devicePixelRatio||1);f=s.width,b=s.height,r.width=Math.round(f*o),r.height=Math.round(b*o),r.style.width=f+"px",r.style.height=b+"px",l.setTransform(o,0,0,o,0,0),u=Array.from({length:Math.max(16,Math.min(72,Math.round((e=f*b)/24e3)))},(e,s)=>({x:Math.random()*f,y:Math.random()*b,vx:T(-.14,.14),vy:T(-.11,.11),r:T(1.1,2.3),hub:s%9==0,ph:Math.random()*Math.PI*2})),v=Array.from({length:Math.min(140,Math.round(e/9e3))},()=>({x:Math.random()*f,y:Math.random()*b,vy:T(-.22,-.06),sway:T(6,20),ph:Math.random()*Math.PI*2,a:T(.06,.28)})),y=[],g&&z(0,0)}function z(e,s){for(let e of(l.clearRect(0,0,f,b),v))l.beginPath(),l.arc(e.x+Math.sin(4e-4*s+e.ph)*e.sway,e.y,.9,0,2*Math.PI),l.fillStyle="rgba("+h+","+x+","+m+","+e.a*(p?.4:.55)+")",l.fill();l.lineWidth=1;for(let e=0;e<u.length;e++){let s=u[e];for(let o=e+1;o<u.length;o++){let e=u[o],t=s.x-e.x,r=s.y-e.y,a=t*t+r*r;if(a>17424)continue;let i=1-Math.sqrt(a)/132,g=(s.x+e.x)*.5,f=(s.y+e.y)*.5,b=Math.max(0,1-Math.hypot(g-S.x,f-S.y)/170),v=Math.min(1,.85*i+.6*b);l.strokeStyle="rgba("+Math.round(h+(n-h)*v)+","+Math.round(x+(c-x)*v)+","+Math.round(m+(d-m)*v)+","+((.3*i+.35*b)*(p?.6:1)).toFixed(3)+")",l.beginPath(),l.moveTo(s.x,s.y),l.lineTo(e.x,e.y),l.stroke()}}for(let e of u){let o=Math.max(0,1-Math.hypot(e.x-S.x,e.y-S.y)/170);if(e.hub){let o=.5+.5*Math.sin(.0016*s+e.ph);l.save(),p||(l.shadowColor="rgba("+n+","+c+","+d+",0.9)",l.shadowBlur=10+12*o),l.beginPath(),l.arc(e.x,e.y,e.r+.7+.6*o,0,2*Math.PI),l.fillStyle="rgba("+n+","+c+","+d+","+(.5+.35*o)*(p?.7:1)+")",l.fill(),l.restore()}else l.beginPath(),l.arc(e.x,e.y,e.r,0,2*Math.PI),l.fillStyle="rgba("+h+","+x+","+m+","+(.16+.4*o)*(p?.55:1)+")",l.fill()}for(let e of y){let s=u[e.a],o=u[e.b];if(!s||!o)continue;let t=s.x+(o.x-s.x)*e.t,r=s.y+(o.y-s.y)*e.t,a=Math.sin(e.t*Math.PI);l.save(),p||(l.shadowColor="rgba("+n+","+c+","+d+",1)",l.shadowBlur=14),l.beginPath(),l.arc(t,r,1.9,0,2*Math.PI),l.fillStyle=p?"rgba("+n+","+c+","+d+","+a+")":"rgba(255,"+Math.round(.7*c+90)+","+Math.round(.7*d+90)+","+a+")",l.fill(),l.restore()}if(g)return;let o=Math.min(3,e/16.67);for(let e of u)e.x+=e.vx*o,e.y+=e.vy*o,e.x<-20&&(e.x=f+20),e.x>f+20&&(e.x=-20),e.y<-20&&(e.y=b+20),e.y>b+20&&(e.y=-20);for(let e of v)e.y+=e.vy*o,e.y<-10&&(e.y=b+10,e.x=Math.random()*f);for(let e=y.length-1;e>=0;e--)y[e].t+=y[e].sp*o/60,y[e].t>=1&&y.splice(e,1);(M-=e)<=0&&(!function(){if(u.length<2||y.length>=3)return;let e=Math.floor(Math.random()*u.length),s=-1,o=1/0;for(let t=0;t<u.length;t++){if(t===e)continue;let r=Math.hypot(u[t].x-u[e].x,u[t].y-u[e].y);r<132&&r<o&&Math.random()>.45&&(o=r,s=t)}s<0||y.push({a:e,b:s,t:0,sp:T(.5,.95)})}(),M=T(700,1800))}function O(e){let s=N?e-N:16.67;N=e,z(s,e),w=requestAnimationFrame(O)}function C(){k||g||(k=!0,N=0,w=requestAnimationFrame(O))}function L(){k=!1,cancelAnimationFrame(w)}let R=new ResizeObserver(E);R.observe(i),E();let A=new IntersectionObserver(e=>{(j=e.some(e=>e.isIntersecting))&&!document.hidden?C():L()},{rootMargin:"120px 0px"});A.observe(r);let F=()=>{document.hidden?L():j&&C()},D=e=>{let s=r.getBoundingClientRect();S.x=e.clientX-s.left,S.y=e.clientY-s.top},I=()=>{S.x=-9999,S.y=-9999};document.addEventListener("visibilitychange",F);let P=i.closest("section")??i;return P.addEventListener("pointermove",D),P.addEventListener("pointerleave",I),()=>{L(),R.disconnect(),A.disconnect(),document.removeEventListener("visibilitychange",F),P.removeEventListener("pointermove",D),P.removeEventListener("pointerleave",I)}},[e,t]),(0,s.jsx)("canvas",{ref:a,className:r,"aria-hidden":"true"})}var m=e.i(37902);let g="#0E0E12",f="#E2354A",b="#C01227",u=[{label:"Fleet GPS",icon:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("path",{d:"M8 13.2C8 13.2 12.6 9.3 12.6 6.5A4.6 4.6 0 1 0 3.4 6.5C3.4 9.3 8 13.2 8 13.2Z"}),(0,s.jsx)("circle",{cx:"8",cy:"6.4",r:"1.6"})]})},{label:"Traffic flow",icon:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("rect",{x:"4.6",y:"2.4",width:"6.8",height:"11.2",rx:"2.4"}),(0,s.jsx)("circle",{cx:"8",cy:"5.4",r:"0.9"}),(0,s.jsx)("circle",{cx:"8",cy:"8",r:"0.9"}),(0,s.jsx)("circle",{cx:"8",cy:"10.6",r:"0.9"})]})},{label:"Weather",icon:(0,s.jsx)("path",{d:"M4.8 11.6A2.6 2.6 0 0 1 5.4 6.5 3.6 3.6 0 0 1 12 7.1 2.4 2.4 0 0 1 11.7 11.6Z"})},{label:"Order load",icon:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("path",{d:"M3 5.4 8 2.8 13 5.4V11L8 13.6 3 11Z"}),(0,s.jsx)("path",{d:"M3 5.4 8 8m0 0 5-2.6M8 8v5.6"})]})},{label:"Driver status",icon:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("circle",{cx:"8",cy:"5.6",r:"2.2"}),(0,s.jsx)("path",{d:"M3.9 13.2a4.1 4.1 0 0 1 8.2 0"})]})},{label:"Vehicle health",icon:(0,s.jsx)("path",{d:"M2.8 8h2.6L7 4.8 9.2 11.6 10.7 8h2.5"})}],v=[[152,200,248],[132,178,222,268],[132,178,222,268],[168,232]],y=[236,288,346,400],w=[[0,1,1],[0,0,0],[1,1,2],[1,0,1],[2,2,0],[2,1,0]],j=(e,s,o)=>`${e}-${s}-${o}`,k=new Set(w.map(([e,s,o])=>j(e,s,o))),N=new Set(["0-1","1-1","2-2","3-0"]),M=["Delay avoided","SLA protected","Driver updated","Customer notified"],S=["Analysing","Correlating","Deciding","Optimised"],T="(prefers-reduced-motion: reduce)",E=e=>{let s=window.matchMedia(T);return s.addEventListener("change",e),()=>s.removeEventListener("change",e)};function z({variant:e="full",className:t=""}){let r="compact"===e,[a,i]=(0,o.useState)(0),[l,n]=(0,o.useState)(247),c=o.default.useSyncExternalStore(E,()=>window.matchMedia(T).matches,()=>!1);return((0,o.useEffect)(()=>{if(r||c)return;let e=setInterval(()=>i(e=>(e+1)%S.length),2400);return()=>clearInterval(e)},[r,c]),(0,o.useEffect)(()=>{if(r||c)return;let e=setInterval(()=>n(244+Math.floor(8*Math.random())),1600);return()=>clearInterval(e)},[r,c]),r)?(0,s.jsxs)("div",{style:{width:"100%",height:"100%",position:"relative"},className:`jsx-1281bf6c9f0af93a sol-s05-svg-core ${t}`,children:[(0,s.jsx)(m.default,{id:"1281bf6c9f0af93a",children:".sol-compact-route-dash.jsx-1281bf6c9f0af93a{stroke-dasharray:4 6;animation:2s linear infinite solCDashFlow}@keyframes solCDashFlow{to{stroke-dashoffset:-20px}}@media (prefers-reduced-motion:reduce){.sol-compact-route-dash.jsx-1281bf6c9f0af93a{animation:none}}"}),(0,s.jsxs)("svg",{viewBox:"0 0 100 100",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"100%",height:"100%"},className:"jsx-1281bf6c9f0af93a",children:[(0,s.jsx)("path",{d:"M 10 30 H 90 M 10 70 H 90 M 30 10 V 90 M 70 10 V 90",stroke:"rgba(14,14,16,0.1)",strokeWidth:"1.5",className:"jsx-1281bf6c9f0af93a"}),(0,s.jsx)("path",{d:"M 30 70 C 45 30, 55 30, 70 30",stroke:f,strokeWidth:"2.5",strokeLinecap:"round",className:"jsx-1281bf6c9f0af93a sol-compact-route-dash"}),(0,s.jsx)("circle",{cx:"30",cy:"70",r:"4",fill:g,className:"jsx-1281bf6c9f0af93a"}),(0,s.jsx)("circle",{cx:"70",cy:"30",r:"4",fill:f,className:"jsx-1281bf6c9f0af93a"})]})]}):(0,s.jsxs)("div",{style:{position:"relative",width:"100%",height:"100%"},className:`jsx-3db6e4799c65164d sol-mt-console ${t}`,children:[(0,s.jsx)(m.default,{id:"3db6e4799c65164d",children:".sol-mtc-svg.jsx-3db6e4799c65164d{width:100%;height:100%;display:block;overflow:visible}.sol-mtc-feed.jsx-3db6e4799c65164d{stroke-dasharray:13 42;animation:2.6s linear infinite solMtcFeed}@keyframes solMtcFeed{to{stroke-dashoffset:-55px}}.sol-mtc-synapse.jsx-3db6e4799c65164d{stroke-dasharray:9 34;animation:1.5s linear infinite solMtcFeed}.sol-mtc-route-flow.jsx-3db6e4799c65164d{stroke-dasharray:10 20;animation:1.6s linear infinite solMtcRouteFlow}@keyframes solMtcRouteFlow{to{stroke-dashoffset:-30px}}.sol-mtc-ring.jsx-3db6e4799c65164d{transform-origin:318px 200px;animation:34s linear infinite solMtcSpin}.sol-mtc-ring--b.jsx-3db6e4799c65164d{animation-duration:22s;animation-direction:reverse}@keyframes solMtcSpin{to{transform:rotate(360deg)}}.sol-mtc-glow.jsx-3db6e4799c65164d{transform-box:fill-box;transform-origin:50%;animation:6s ease-in-out infinite solMtcGlow}@keyframes solMtcGlow{0%,to{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}.sol-mtc-fire.jsx-3db6e4799c65164d{transform-box:fill-box;transform-origin:50%;animation:2.4s ease-out infinite solMtcFire}@keyframes solMtcFire{0%{opacity:.55;transform:scale(.5)}60%,to{opacity:0;transform:scale(2.1)}}.sol-mtc-live.jsx-3db6e4799c65164d{transform-box:fill-box;transform-origin:50%;animation:2.2s ease-in-out infinite solMtcLive}@keyframes solMtcLive{0%,to{opacity:.3}50%{opacity:1}}.sol-mtc-tick.jsx-3db6e4799c65164d{transform-box:fill-box;transform-origin:50%;animation:4.8s ease-out infinite solMtcTick}@keyframes solMtcTick{0%{opacity:.5;transform:scale(.7)}35%,to{opacity:0;transform:scale(1.9)}}.sol-mtc-phase.jsx-3db6e4799c65164d{transition:fill .25s,stroke .25s}@media (prefers-reduced-motion:reduce){.sol-mtc-feed.jsx-3db6e4799c65164d,.sol-mtc-synapse.jsx-3db6e4799c65164d,.sol-mtc-route-flow.jsx-3db6e4799c65164d,.sol-mtc-ring.jsx-3db6e4799c65164d,.sol-mtc-glow.jsx-3db6e4799c65164d,.sol-mtc-fire.jsx-3db6e4799c65164d,.sol-mtc-live.jsx-3db6e4799c65164d,.sol-mtc-tick.jsx-3db6e4799c65164d{animation:none}}"}),(0,s.jsxs)("svg",{viewBox:"0 0 680 400",fill:"none",xmlns:"http://www.w3.org/2000/svg",role:"img","aria-label":"MileTruth AI decision engine: live telemetry feeds — fleet GPS, traffic, weather, order load, driver status and vehicle health — flow into a neural decision core, which returns an optimised route that avoids delay and holds the 99.2% SLA at a 41-minute ETA.",className:"jsx-3db6e4799c65164d sol-mtc-svg",children:[(0,s.jsxs)("defs",{className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("clipPath",{id:"solMtcClip",className:"jsx-3db6e4799c65164d",children:(0,s.jsx)("rect",{x:"8",y:"8",width:"664",height:"384",rx:"26",className:"jsx-3db6e4799c65164d"})}),(0,s.jsx)("pattern",{id:"solMtcDots",width:"28",height:"28",patternUnits:"userSpaceOnUse",className:"jsx-3db6e4799c65164d",children:(0,s.jsx)("circle",{cx:"14",cy:"14",r:"0.85",fill:"rgba(14,14,16,0.055)",className:"jsx-3db6e4799c65164d"})}),(0,s.jsxs)("linearGradient",{id:"solMtcGlass",x1:"0",y1:"0",x2:"0",y2:"1",className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("stop",{offset:"0%",stopColor:"#FFFFFF",stopOpacity:"0.9",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("stop",{offset:"60%",stopColor:"#FFFFFF",stopOpacity:"0",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("stop",{offset:"100%",stopColor:g,stopOpacity:"0.022",className:"jsx-3db6e4799c65164d"})]}),(0,s.jsxs)("radialGradient",{id:"solMtcCoreGlow",className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("stop",{offset:"0%",stopColor:f,stopOpacity:"0.16",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("stop",{offset:"45%",stopColor:f,stopOpacity:"0.06",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("stop",{offset:"100%",stopColor:f,stopOpacity:"0",className:"jsx-3db6e4799c65164d"})]}),(0,s.jsxs)("linearGradient",{id:"solMtcRouteGrad",x1:"0",y1:"0",x2:"1",y2:"0",className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("stop",{offset:"0%",stopColor:b,className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("stop",{offset:"100%",stopColor:f,className:"jsx-3db6e4799c65164d"})]}),(0,s.jsxs)("filter",{id:"solMtcCardShadow",x:"-12%",y:"-14%",width:"124%",height:"132%",className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("feDropShadow",{dx:"0",dy:"12",stdDeviation:"16",floodColor:g,floodOpacity:"0.07",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("feDropShadow",{dx:"0",dy:"2",stdDeviation:"2",floodColor:g,floodOpacity:"0.05",className:"jsx-3db6e4799c65164d"})]}),(0,s.jsx)("filter",{id:"solMtcChipShadow",x:"-25%",y:"-55%",width:"150%",height:"210%",className:"jsx-3db6e4799c65164d",children:(0,s.jsx)("feDropShadow",{dx:"0",dy:"1.5",stdDeviation:"2.5",floodColor:g,floodOpacity:"0.07",className:"jsx-3db6e4799c65164d"})}),(0,s.jsx)("filter",{id:"solMtcNodeGlow",x:"-160%",y:"-160%",width:"420%",height:"420%",className:"jsx-3db6e4799c65164d",children:(0,s.jsx)("feGaussianBlur",{stdDeviation:"2.4",className:"jsx-3db6e4799c65164d"})})]}),(0,s.jsx)("rect",{x:"8",y:"8",width:"664",height:"384",rx:"26",fill:"#FFFFFF",stroke:"rgba(14,14,16,0.09)",strokeWidth:"1",filter:"url(#solMtcCardShadow)",className:"jsx-3db6e4799c65164d"}),(0,s.jsxs)("g",{clipPath:"url(#solMtcClip)",className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("rect",{x:"8",y:"60",width:"664",height:"266",fill:"url(#solMtcDots)",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("rect",{x:"8",y:"8",width:"664",height:"384",fill:"url(#solMtcGlass)",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("circle",{cx:"34",cy:"34",r:"4",fill:f,className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("circle",{cx:"34",cy:"34",r:"4",fill:f,className:"jsx-3db6e4799c65164d sol-mtc-fire"}),(0,s.jsx)("text",{x:"47",y:"38",fill:"rgba(14,14,16,0.6)",fontSize:"11",fontWeight:"800",letterSpacing:"1.35",fontFamily:"Manrope, sans-serif",className:"jsx-3db6e4799c65164d",children:"MILETRUTH™ AI DECISION ENGINE"}),(0,s.jsx)("g",{filter:"url(#solMtcChipShadow)",className:"jsx-3db6e4799c65164d",children:(0,s.jsx)("rect",{x:"438",y:"20",width:"214",height:"28",rx:"14",fill:"#FFFFFF",stroke:"rgba(226,53,74,0.35)",strokeWidth:"1.1",className:"jsx-3db6e4799c65164d"})}),(0,s.jsx)("circle",{cx:"456",cy:"34",r:"4",fill:f,className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("circle",{cx:"456",cy:"34",r:"4",fill:f,className:"jsx-3db6e4799c65164d sol-mtc-live"}),(0,s.jsxs)("text",{x:"470",y:"38",fill:g,fontSize:"10.5",fontWeight:"800",fontFamily:"Manrope, sans-serif",className:"jsx-3db6e4799c65164d",children:[S[a],(0,s.jsx)("tspan",{fill:"rgba(14,14,16,0.4)",className:"jsx-3db6e4799c65164d",children:" · "}),l," live signals"]}),(0,s.jsx)("line",{x1:"8",y1:"60",x2:"672",y2:"60",stroke:"rgba(14,14,16,0.07)",strokeWidth:"1",className:"jsx-3db6e4799c65164d"}),[{x:91,t:"LIVE INPUTS"},{x:318,t:"NEURAL CORE"},{x:555,t:"PROTECTED OUTCOME"}].map(e=>(0,s.jsx)("text",{x:e.x,y:"84",textAnchor:"middle",fill:"rgba(14,14,16,0.38)",fontSize:"9.5",fontWeight:"800",letterSpacing:"1.25",fontFamily:"Manrope, sans-serif",className:"jsx-3db6e4799c65164d",children:e.t},e.t)),u.map((e,o)=>{let t=96+37*o;return(0,s.jsxs)("g",{className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("g",{filter:"url(#solMtcChipShadow)",className:"jsx-3db6e4799c65164d",children:(0,s.jsx)("rect",{x:"24",y:t,width:"134",height:"26",rx:"9",fill:"#FFFFFF",stroke:"rgba(14,14,16,0.085)",strokeWidth:"1",className:"jsx-3db6e4799c65164d"})}),(0,s.jsx)("rect",{x:"32",y:t+5,width:"16",height:"16",rx:"5.5",fill:"rgba(226,53,74,0.08)",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("g",{transform:`translate(32, ${t+5})`,stroke:b,strokeWidth:"1.15",strokeLinecap:"round",strokeLinejoin:"round",fill:"none",className:"jsx-3db6e4799c65164d",children:e.icon}),(0,s.jsx)("text",{x:"56",y:t+17,fill:"rgba(14,14,16,0.78)",fontSize:"9.5",fontWeight:"700",fontFamily:"Manrope, sans-serif",className:"jsx-3db6e4799c65164d",children:e.label}),(0,s.jsx)("circle",{cx:"147",cy:t+13,r:"2.6",fill:f,fillOpacity:"0.25",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("circle",{cx:"147",cy:t+13,r:"2.6",fill:f,style:{animationDelay:`${.32*o}s`},className:"jsx-3db6e4799c65164d sol-mtc-live"})]},e.label)}),u.map((e,o)=>{let t=96+37*o+13,r=v[0][Math.floor(o/2)],a=`M 160 ${t} C 190 ${t}, 202 ${r}, ${y[0]-5} ${r}`;return(0,s.jsxs)("g",{className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("path",{d:a,stroke:g,strokeOpacity:"0.13",strokeWidth:"1",fill:"none",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("path",{d:a,stroke:f,strokeOpacity:"0.75",strokeWidth:"1.3",strokeLinecap:"round",fill:"none",style:{animationDelay:`${.4*o}s`},className:"jsx-3db6e4799c65164d sol-mtc-feed"})]},`feed-${e.label}`)}),(0,s.jsx)("ellipse",{cx:318,cy:200,rx:"116",ry:"108",fill:"url(#solMtcCoreGlow)",className:"jsx-3db6e4799c65164d sol-mtc-glow"}),(0,s.jsx)("circle",{cx:318,cy:200,r:"110",fill:"none",stroke:"rgba(14,14,16,0.13)",strokeWidth:"1",strokeDasharray:"2 11",className:"jsx-3db6e4799c65164d sol-mtc-ring"}),(0,s.jsx)("circle",{cx:318,cy:200,r:"97",fill:"none",stroke:"rgba(226,53,74,0.3)",strokeWidth:"1",strokeDasharray:"3 15",className:"jsx-3db6e4799c65164d sol-mtc-ring sol-mtc-ring--b"}),v.slice(0,-1).map((e,o)=>e.map((e,t)=>v[o+1].map((r,a)=>{let i=k.has(j(o,t,a));return(0,s.jsx)("line",{x1:y[o],y1:e,x2:y[o+1],y2:r,stroke:i?f:g,strokeOpacity:i?.55:.1,strokeWidth:i?1.4:.8,className:"jsx-3db6e4799c65164d"},`e-${o}-${t}-${a}`)}))),w.map(([e,o,t])=>(0,s.jsx)("line",{x1:y[e],y1:v[e][o],x2:y[e+1],y2:v[e+1][t],stroke:"#FFFFFF",strokeOpacity:"0.85",strokeWidth:"1.5",strokeLinecap:"round",style:{animationDelay:`${.3*e}s`},className:"jsx-3db6e4799c65164d sol-mtc-synapse"},`live-${e}-${o}-${t}`)),v.map((e,o)=>e.map((e,t)=>{let r=N.has(`${o}-${t}`);return(0,s.jsxs)("g",{className:"jsx-3db6e4799c65164d",children:[r&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("circle",{cx:y[o],cy:e,r:"5",fill:f,fillOpacity:"0.45",filter:"url(#solMtcNodeGlow)",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("circle",{cx:y[o],cy:e,r:"6",fill:"none",stroke:f,strokeWidth:"1.4",style:{animationDelay:`${.28*o}s`},className:"jsx-3db6e4799c65164d sol-mtc-fire"})]}),(0,s.jsx)("circle",{cx:y[o],cy:e,r:r?4.6:3.6,fill:r?f:"#FFFFFF",stroke:r?f:"rgba(14,14,16,0.28)",strokeWidth:"1.3",className:"jsx-3db6e4799c65164d"})]},`n-${o}-${t}`)})),[{d:"M 406 168 C 428 168, 432 138, 449 132"},{d:"M 406 232 C 428 232, 432 252, 449 258"}].map((e,o)=>(0,s.jsxs)("g",{className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("path",{d:e.d,stroke:f,strokeOpacity:"0.28",strokeWidth:"1.3",fill:"none",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("path",{d:e.d,stroke:f,strokeWidth:"1.5",strokeLinecap:"round",fill:"none",style:{animationDelay:`${.5*o}s`},className:"jsx-3db6e4799c65164d sol-mtc-feed"})]},`out-${o}`)),(0,s.jsx)("rect",{x:"452",y:"94",width:"206",height:"80",rx:"13",fill:"rgba(14,14,16,0.02)",stroke:"rgba(14,14,16,0.06)",strokeWidth:"1",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("path",{d:"M 472 148 C 492 167, 524 169, 546 156 C 568 143, 572 112, 598 110 C 616 108, 626 118, 638 124",stroke:"rgba(14,14,16,0.24)",strokeWidth:"1.8",strokeDasharray:"4 5",strokeLinecap:"round",fill:"none",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("path",{id:"solMtcAiRoute",d:"M 472 148 C 520 143, 580 130, 638 124",stroke:"url(#solMtcRouteGrad)",strokeWidth:"7",strokeOpacity:"0.14",strokeLinecap:"round",fill:"none",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("path",{d:"M 472 148 C 520 143, 580 130, 638 124",stroke:"url(#solMtcRouteGrad)",strokeWidth:"2.6",strokeLinecap:"round",fill:"none",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("path",{d:"M 472 148 C 520 143, 580 130, 638 124",stroke:"#FFFFFF",strokeOpacity:"0.55",strokeWidth:"1.2",strokeLinecap:"round",fill:"none",className:"jsx-3db6e4799c65164d sol-mtc-route-flow"}),(0,s.jsx)("circle",{cx:"472",cy:"148",r:"4",fill:g,className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("circle",{cx:"638",cy:"124",r:"5.5",fill:"#FFFFFF",stroke:f,strokeWidth:"2",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("circle",{cx:"638",cy:"124",r:"2",fill:f,className:"jsx-3db6e4799c65164d"}),!c&&(0,s.jsxs)("g",{className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("circle",{cx:"0",cy:"0",r:"5",fill:f,fillOpacity:"0.4",filter:"url(#solMtcNodeGlow)",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("circle",{cx:"0",cy:"0",r:"3.2",fill:f,className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("animateMotion",{dur:"4.6s",repeatCount:"indefinite",className:"jsx-3db6e4799c65164d",children:(0,s.jsx)("mpath",{href:"#solMtcAiRoute",xlinkHref:"#solMtcAiRoute",className:"jsx-3db6e4799c65164d"})})]}),(0,s.jsxs)("g",{className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("line",{x1:"454",y1:"188",x2:"468",y2:"188",stroke:"rgba(14,14,16,0.3)",strokeWidth:"1.8",strokeDasharray:"4 4",strokeLinecap:"round",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("text",{x:"474",y:"191",fill:"rgba(14,14,16,0.42)",fontSize:"9.5",fontWeight:"800",letterSpacing:"0.5",fontFamily:"Manrope, sans-serif",className:"jsx-3db6e4799c65164d",children:"Original 58m"}),(0,s.jsx)("line",{x1:"556",y1:"188",x2:"570",y2:"188",stroke:f,strokeWidth:"2.2",strokeLinecap:"round",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("text",{x:"576",y:"191",fill:b,fontSize:"9.5",fontWeight:"800",letterSpacing:"0.5",fontFamily:"Manrope, sans-serif",className:"jsx-3db6e4799c65164d",children:"MileTruth 41m"})]}),M.map((e,o)=>{let t=212+28*o;return(0,s.jsxs)("g",{className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("circle",{cx:"462",cy:t,r:"7",fill:f,fillOpacity:"0.18",style:{animationDelay:`${.55*o}s`},className:"jsx-3db6e4799c65164d sol-mtc-tick"}),(0,s.jsx)("circle",{cx:"462",cy:t,r:"7",fill:"#FFFFFF",stroke:f,strokeWidth:"1.4",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("path",{d:`M 458.8 ${t} 461.2 ${t+2.4} 465.4 ${t-2.6}`,stroke:b,strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",fill:"none",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("text",{x:"478",y:t+3.6,fill:"rgba(14,14,16,0.8)",fontSize:"10.5",fontWeight:"700",fontFamily:"Manrope, sans-serif",className:"jsx-3db6e4799c65164d",children:e})]},e)}),(0,s.jsx)("line",{x1:"8",y1:"326",x2:"672",y2:"326",stroke:"rgba(14,14,16,0.07)",strokeWidth:"1",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("rect",{x:"8",y:"326",width:"664",height:"66",fill:"rgba(14,14,16,0.018)",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("line",{x1:"230",y1:"342",x2:"230",y2:"376",stroke:"rgba(14,14,16,0.085)",strokeWidth:"1",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("line",{x1:"450",y1:"342",x2:"450",y2:"376",stroke:"rgba(14,14,16,0.085)",strokeWidth:"1",className:"jsx-3db6e4799c65164d"}),[{x:54,v:"41 min",l:"OPTIMISED ETA",ic:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("circle",{cx:"13",cy:"13",r:"6.6",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("path",{d:"M13 8.8V13l3 2",className:"jsx-3db6e4799c65164d"})]})},{x:275,v:"17 min",l:"TIME SAVED",ic:(0,s.jsx)("path",{d:"M14.2 5.6 8 13.6h4.2L11.4 20.4 17.6 12.4h-4.2Z",className:"jsx-3db6e4799c65164d"})},{x:496,v:"99.2%",l:"SLA PROTECTED",ic:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("path",{d:"M13 5.4 19 8v5c0 4.1-3 6.6-6 7.6-3-1-6-3.5-6-7.6V8Z",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("path",{d:"m10.4 12.9 2 2 3.4-3.6",className:"jsx-3db6e4799c65164d"})]})}].map(e=>(0,s.jsxs)("g",{className:"jsx-3db6e4799c65164d",children:[(0,s.jsx)("rect",{x:e.x,y:"337",width:"26",height:"26",rx:"8.5",fill:"rgba(226,53,74,0.08)",className:"jsx-3db6e4799c65164d"}),(0,s.jsx)("g",{transform:`translate(${e.x}, 337)`,stroke:b,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none",className:"jsx-3db6e4799c65164d",children:e.ic}),(0,s.jsx)("text",{x:e.x+36,y:"355",fill:g,fontSize:"17",fontWeight:"800",letterSpacing:"-0.3",fontFamily:"Manrope, sans-serif",className:"jsx-3db6e4799c65164d",children:e.v}),(0,s.jsx)("text",{x:e.x+36,y:"371",fill:"rgba(14,14,16,0.45)",fontSize:"9.5",fontWeight:"800",letterSpacing:"1.15",fontFamily:"Manrope, sans-serif",className:"jsx-3db6e4799c65164d",children:e.l})]},e.l))]})]})]})}function O({children:e,size:o=24}){return(0,s.jsx)("svg",{viewBox:"0 0 24 24",width:o,height:o,fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:e})}let C=(0,s.jsx)(O,{children:(0,s.jsx)("path",{d:"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"})}),L=(0,s.jsx)(O,{children:(0,s.jsx)("path",{d:"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"})}),R=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),(0,s.jsx)("path",{d:"M3 9h18M9 3v18M15 3v18"})]}),A=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M12 2L2 19h20L12 2z"}),(0,s.jsx)("path",{d:"M12 9v4M12 16h.01"})]}),F=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"3",y:"4",width:"18",height:"16",rx:"2"}),(0,s.jsx)("path",{d:"M3 10h18"}),(0,s.jsx)("path",{d:"M10 4v6"}),(0,s.jsx)("circle",{cx:"7",cy:"7",r:"1",fill:"currentColor"})]}),D=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"1",y:"11",width:"15",height:"8",rx:"1.5"}),(0,s.jsx)("path",{d:"M16 15h4l2 2v2h-6"}),(0,s.jsx)("circle",{cx:"6",cy:"21",r:"2"}),(0,s.jsx)("circle",{cx:"18",cy:"21",r:"2"})]}),I=(0,s.jsxs)(O,{children:[(0,s.jsx)("circle",{cx:"12",cy:"7",r:"3.5"}),(0,s.jsx)("path",{d:"M5.5 21c0-3.5 2.9-6 6.5-6s6.5 2.5 6.5 6"})]}),P=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"4",y:"8",width:"16",height:"12",rx:"1.5"}),(0,s.jsx)("path",{d:"M4 8l8-4 8 4"}),(0,s.jsx)("path",{d:"M12 8v12"})]}),W=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7z"}),(0,s.jsx)("circle",{cx:"12",cy:"9",r:"2.5"})]}),$=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M12 5v14M5 12h14"}),(0,s.jsx)("rect",{x:"3",y:"3",width:"18",height:"18",rx:"3"})]}),V=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"3",y:"4",width:"18",height:"16",rx:"2"}),(0,s.jsx)("path",{d:"M3 10h18"}),(0,s.jsx)("path",{d:"M8 14h2M14 14h2"})]}),B=(0,s.jsxs)(O,{children:[(0,s.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,s.jsx)("circle",{cx:"12",cy:"8",r:"2"})]}),H=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"1",y:"11",width:"13",height:"8",rx:"1"}),(0,s.jsx)("path",{d:"M14 15h4l3 2v2h-3"}),(0,s.jsx)("circle",{cx:"5",cy:"21",r:"2"}),(0,s.jsx)("circle",{cx:"17",cy:"21",r:"2"})]}),G=(0,s.jsxs)(O,{children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,s.jsx)("circle",{cx:"12",cy:"12",r:"4"}),(0,s.jsx)("circle",{cx:"12",cy:"12",r:"1",fill:"currentColor"})]}),Y=(0,s.jsx)(O,{children:(0,s.jsx)("path",{d:"M4 12l6 6L20 6"})}),q=(0,s.jsxs)(O,{children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,s.jsx)("path",{d:"M12 7v5l3 3"})]}),U=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M12 2l7 3v6c0 5-3 8-7 9-4-1-7-4-7-9V5l7-3z"}),(0,s.jsx)("path",{d:"M9.3 12l2 2 3.6-4.2"})]}),X=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"4",y:"2",width:"16",height:"20",rx:"3"}),(0,s.jsx)("path",{d:"M9 6h6M9 10h4M9 14h6"}),(0,s.jsx)("circle",{cx:"15",cy:"14",r:"1",fill:"currentColor"})]}),Q=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M6 2L2 8h20l-4-6H6z"}),(0,s.jsx)("rect",{x:"2",y:"8",width:"20",height:"13",rx:"1"}),(0,s.jsx)("rect",{x:"9",y:"14",width:"6",height:"7"})]}),Z=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"2",y:"10",width:"8",height:"12",rx:"1"}),(0,s.jsx)("rect",{x:"14",y:"6",width:"8",height:"16",rx:"1"}),(0,s.jsx)("path",{d:"M6 2v8M18 2v4"}),(0,s.jsx)("circle",{cx:"6",cy:"2",r:"1",fill:"currentColor"}),(0,s.jsx)("circle",{cx:"18",cy:"2",r:"1",fill:"currentColor"})]}),K=(0,s.jsxs)(O,{children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"3"}),(0,s.jsx)("circle",{cx:"5",cy:"5",r:"2"}),(0,s.jsx)("circle",{cx:"19",cy:"5",r:"2"}),(0,s.jsx)("circle",{cx:"5",cy:"19",r:"2"}),(0,s.jsx)("circle",{cx:"19",cy:"19",r:"2"}),(0,s.jsx)("path",{d:"M9.5 9.5l-3-3M14.5 9.5l3-3M9.5 14.5l-3 3M14.5 14.5l3 3"})]}),_=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M12 2v20M2 12h20"}),(0,s.jsx)("path",{d:"M12 2l4 4M12 2l-4 4M12 22l4-4M12 22l-4-4M2 12l4 4M2 12l4-4M22 12l-4-4"})]}),J=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"2",y:"4",width:"20",height:"16",rx:"2"}),(0,s.jsx)("path",{d:"M2 10h20"}),(0,s.jsx)("path",{d:"M8 10v10M16 10v10"})]}),ee=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M3 7l6 6 4-4 8 8"}),(0,s.jsx)("path",{d:"M15 17h6v-6"})]}),es=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"}),(0,s.jsx)("circle",{cx:"12",cy:"12",r:"3"})]}),eo=(0,s.jsx)(O,{children:(0,s.jsx)("path",{d:"M13 2L4 14h6l-1 8 9-12h-6l1-8z"})}),et=(0,s.jsxs)(O,{children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,s.jsx)("path",{d:"M12 3a9 9 0 019 9"}),(0,s.jsx)("path",{d:"M9 12a3 3 0 106 0"})]}),er=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"}),(0,s.jsx)("path",{d:"M9 12l2 2 4-4"})]}),ea=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M21 12a9 9 0 01-9 9 9 9 0 01-7.4-3.9"}),(0,s.jsx)("path",{d:"M3 12a9 9 0 019-9 9 9 0 017.4 3.9"}),(0,s.jsx)("path",{d:"M20 3v5h-5M4 21v-5h5"})]}),ei=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M12 2l9 5-9 5-9-5 9-5z"}),(0,s.jsx)("path",{d:"M3 12l9 5 9-5M3 17l9 5 9-5"})]}),el=(0,s.jsx)(O,{children:(0,s.jsx)("path",{d:"M4 20V10M10 20V4M16 20v-7M22 20v-12"})}),en=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"3",y:"4",width:"18",height:"5",rx:"1"}),(0,s.jsx)("path",{d:"M5 9v10a1 1 0 001 1h12a1 1 0 001-1V9"}),(0,s.jsx)("path",{d:"M10 13h4"})]}),ec=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z"}),(0,s.jsx)("circle",{cx:"12",cy:"12",r:"2.5"})]}),ed=(0,s.jsxs)(O,{children:[(0,s.jsx)("circle",{cx:"11",cy:"11",r:"7"}),(0,s.jsx)("path",{d:"M20 20l-4.5-4.5"})]}),ep=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M3 12h13"}),(0,s.jsx)("path",{d:"M12 6l6 6-6 6"}),(0,s.jsx)("path",{d:"M21 4v16"})]}),eh=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M8 3H5a2 2 0 00-2 2v3M16 3h3a2 2 0 012 2v3M8 21H5a2 2 0 01-2-2v-3M16 21h3a2 2 0 002-2v-3"}),(0,s.jsx)("circle",{cx:"12",cy:"12",r:"3"})]}),ex=(0,s.jsxs)(O,{children:[(0,s.jsx)("path",{d:"M2 13l19-8-6 17-3.5-6.5L2 13z"}),(0,s.jsx)("path",{d:"M11.5 15.5L21 5"})]}),em=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"1",y:"11",width:"14",height:"8",rx:"1.5"}),(0,s.jsx)("path",{d:"M15 15h4l2 2v2h-6"}),(0,s.jsx)("circle",{cx:"5.5",cy:"21",r:"2"}),(0,s.jsx)("circle",{cx:"17.5",cy:"21",r:"2"}),(0,s.jsx)("path",{d:"M7 8l2-5-1 3.5h2L8 8"})]}),eg=(0,s.jsxs)(O,{children:[(0,s.jsx)("rect",{x:"3",y:"5",width:"18",height:"14",rx:"2"}),(0,s.jsx)("path",{d:"M3 10h18"}),(0,s.jsx)("path",{d:"M7 15h4"})]}),ef=(0,s.jsxs)(O,{children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,s.jsx)("path",{d:"M12 7v5l3.5 2"})]});function eb({children:e,className:t}){let r=(0,o.useRef)(null),a=(0,d.useInView)(r,{margin:"250px 0px"});return(0,s.jsx)("div",{ref:r,className:t,"aria-hidden":"true",children:a?e:null})}function eu({accent:e="#E2354A"}){return(0,s.jsx)(eb,{className:"sol-map",children:(0,s.jsx)(h.default,{accent:e})})}function ev({variant:e,map:o,field:t}){return(0,s.jsxs)("div",{className:`sol-bg sol-bg--${e}`,"aria-hidden":"true",children:[o?(0,s.jsx)(eu,{accent:o}):null,t?(0,s.jsx)(eb,{className:"sol-field",children:(0,s.jsx)(x,{accent:"#E2354A",tone:"paper"===e?"light":"dark"})}):null]})}let ey=["white","white-red","paper"];function ew({id:e,bg:o,map:t,field:r,className:a="",children:i}){return(0,s.jsxs)("section",{id:e,className:`sol-sec${ey.includes(o)?" sol-sec--white":""}${"white-red"===o?" sol-sec--white-red":""}${a?` ${a}`:""}`,children:[(0,s.jsx)(ev,{variant:o,map:t,field:r}),(0,s.jsx)("div",{className:"sol-in",children:i})]})}function ej({n:e,label:o,title:t,lede:r,sub:a,chips:i,center:l}){let n=o.replace(/^\/|\/$/g,"").trim();return(0,s.jsxs)(p.ScrollReveal,{yOffset:22,className:`sol-head${l?" sol-head--center":""}`,triggerOnce:!0,children:[(0,s.jsxs)("span",{className:"sol-eyebrow sol-eyebrow--slash",children:["/ ",n," /"]}),(0,s.jsx)("h2",{className:"sol-h",children:t}),(0,s.jsx)("p",{className:"sol-lede",children:r}),a?(0,s.jsx)("p",{className:"sol-sub",children:a}):null,i?(0,s.jsx)("div",{className:`sol-chiprow${l?" sol-chiprow--center":""}`,children:i.map(e=>(0,s.jsx)("span",{className:"sol-chip",children:e},e))}):null]})}function ek({className:e="",children:o}){let t=(0,n.useReducedMotion)(),c=(0,a.useMotionValue)(0),d=(0,a.useMotionValue)(0),p=(0,l.useSpring)((0,i.useTransform)(d,[-40,40],[6,-6]),{stiffness:240,damping:22}),h=(0,l.useSpring)((0,i.useTransform)(c,[-40,40],[-6,6]),{stiffness:240,damping:22});return(0,s.jsx)(r.motion.div,{className:`sol-tilt ${e}`,style:t?void 0:{rotateX:p,rotateY:h,transformPerspective:900},onMouseMove:e=>{if(t)return;let s=e.currentTarget.getBoundingClientRect();c.set(e.clientX-s.left-s.width/2),d.set(e.clientY-s.top-s.height/2)},onMouseLeave:()=>{c.set(0),d.set(0)},whileHover:{y:-4},transition:{type:"spring",stiffness:260,damping:22},children:o})}function eN({to:e,decimals:t=0,suffix:r="",prefix:i=""}){let l=(0,o.useRef)(null),n=(0,d.useInView)(l,{once:!0,margin:"-10% 0px"}),p=(0,a.useMotionValue)(0),[h,x]=(0,o.useState)(i+0..toFixed(t)+r);return(0,o.useEffect)(()=>p.on("change",e=>x(i+e.toFixed(t)+r)),[p,t,r,i]),(0,o.useEffect)(()=>{if(n)return(0,c.animate)(p,e,{duration:1.5,ease:[.16,1,.3,1]}).stop},[n,e,p]),(0,s.jsx)("span",{ref:l,children:h})}function eM({items:e,heading:o,sys:t}){return(0,s.jsxs)("div",{className:"sol-kpis",children:[o?(0,s.jsxs)("div",{className:"sol-kpis-head",children:[(0,s.jsxs)("span",{className:"sol-kpis-live",children:[(0,s.jsx)("span",{className:"sol-livedot"}),o]}),t?(0,s.jsx)("span",{className:"sol-kpis-sys",children:t}):null]}):null,(0,s.jsx)("div",{className:"sol-kpis-grid",children:e.map(e=>(0,s.jsxs)("div",{className:"sol-kpi",children:[(0,s.jsx)("b",{className:"sol-kpi-val",children:e.text?e.text:(0,s.jsx)(eN,{to:e.value??0,decimals:e.decimals,suffix:e.suffix,prefix:e.prefix})}),(0,s.jsx)("span",{className:"sol-kpi-lbl",children:e.label})]},e.label))})]})}function eS({items:e}){return(0,s.jsx)("div",{className:"sol-bar",children:e.map(e=>(0,s.jsxs)("div",{className:"sol-bar-item",children:[(0,s.jsx)("span",{className:"sol-bar-lbl",children:e.label}),(0,s.jsx)("b",{className:"sol-bar-val",children:e.text?e.text:(0,s.jsx)(eN,{to:e.value??0,decimals:e.decimals,suffix:e.suffix,prefix:e.prefix})})]},e.label))})}function eT({label:e="Operator insight",children:o}){return(0,s.jsxs)(p.ScrollReveal,{yOffset:18,triggerOnce:!0,className:"sol-insight",children:[(0,s.jsx)("span",{className:"sol-insight-lbl",children:e}),(0,s.jsx)("p",{className:"sol-insight-txt",children:o})]})}function eE({items:e,center:o=!1,tone:t}){return(0,s.jsx)("div",{className:`sol-chiprow${o?" sol-chiprow--center":""}${"light"===t?" sol-chiprow--light":""}`,children:e.map(e=>(0,s.jsx)("span",{className:"sol-chip",children:e},e))})}function ez({items:e,tone:o}){return(0,s.jsx)(p.StaggerChildren,{stagger:.1,duration:.7,yOffset:22,triggerOnce:!0,className:`sol-minilist${"light"===o?" sol-minilist--light":""}`,children:e.map(e=>(0,s.jsxs)("div",{className:"sol-mini",children:[(0,s.jsx)("span",{className:"sol-mini-rule","aria-hidden":"true"}),(0,s.jsxs)("div",{children:[(0,s.jsx)("b",{children:e.t}),(0,s.jsx)("span",{children:e.d})]})]},e.t))})}function eO({src:e,alt:o,badges:t,tone:r,className:a=""}){return(0,s.jsxs)("div",{className:`sol-media${"light"===r?" sol-media--light":""} ${a}`,children:[(0,s.jsx)("span",{className:"sol-media-glow","aria-hidden":"true"}),(0,s.jsxs)("div",{className:"sol-media-frame",children:[(0,s.jsx)("img",{src:e,alt:o,loading:"lazy",decoding:"async"}),t?.[0]?(0,s.jsxs)("div",{className:"sol-media-badge sol-media-badge--tl",children:[(0,s.jsx)("b",{children:t[0].value}),(0,s.jsx)("span",{children:t[0].label})]}):null,t?.[1]?(0,s.jsxs)("div",{className:"sol-media-badge sol-media-badge--br",children:[(0,s.jsx)("b",{children:t[1].value}),(0,s.jsx)("span",{children:t[1].label})]}):null]})]})}function eC({corner:e,icon:o,title:t,note:r,className:a=""}){return(0,s.jsxs)("div",{className:`sol-float sol-float--${e} ${a}`,children:[o?(0,s.jsx)("span",{className:"sol-float-ic",children:o}):null,(0,s.jsxs)("div",{children:[(0,s.jsx)("b",{children:t}),(0,s.jsx)("span",{children:r})]})]})}function eL({items:e,tone:t}){return(0,s.jsx)("div",{className:`sol-ticker${"light"===t?" sol-ticker--light":""}`,"aria-hidden":"true",children:(0,s.jsx)("div",{className:"logico-ticker-wrapper",style:{overflow:"hidden",position:"relative",width:"100%"},children:(0,s.jsx)("div",{className:"marquee-container-css",children:[0,1,2].map(t=>(0,s.jsx)(o.default.Fragment,{children:e.map((e,o)=>(0,s.jsxs)("div",{className:"ticker",style:{display:"inline-flex",alignItems:"center",whiteSpace:"nowrap",paddingRight:"50px"},children:[(0,s.jsx)("span",{className:"ticker-text",children:(0,s.jsx)("p",{style:{margin:0,display:"inline"},children:e})}),(0,s.jsx)("span",{className:"separator",style:{marginLeft:"25px",display:"inline-flex",alignItems:"center"},children:(0,s.jsx)("i",{className:"fontello icon-half-logo"})})]},`${t}-${o}`))},t))})})})}let eR=[{time:"06:40",icon:C,title:"Driver Calling",quote:"“Where is the pickup address?”",cost:"Your best dispatcher starts the day as a switchboard."},{time:"07:15",icon:L,title:"WhatsApp Blowing Up",quote:"“Is cargo #402 dispatched yet?”",cost:"Three people answer the same question three different ways."},{time:"08:02",icon:R,title:"Outdated Excel Sheet",quote:"Yesterday’s list, missing this morning’s updates.",cost:"Decisions get made against numbers that expired overnight."},{time:"09:30",icon:A,title:"Client Complaint",quote:"“Our shipment missed its delivery window.”",cost:"The customer finds out before the control room does."}],eA=[{t:"One order record",d:"Every channel writes into the same order object. Nothing gets re-keyed."},{t:"One live map",d:"Fleet, drivers and shipments on a single canvas, updating together."},{t:"One source of status",d:"Ops, sales and the customer all read the same timestamp."},{t:"One audit trail",d:"Every scan, signature and exception stays attached to the trip."}],eF=[{icon:F,title:"Order synced",note:"Sales channel → control hub · 45ms"},{icon:I,title:"Driver assigned",note:"Nearest available unit · auto-dispatched"},{icon:Y,title:"Proof captured",note:"Digital OTP → billing, same second"}],eD=[{icon:C,statV:"2.5x",statL:"Time on coordination",title:"20 Phone Calls for One Truck",body:"Operations managers waste hours calling drivers, hub managers and clients just to find out where a shipment is.",footLbl:"Cost",footTxt:"your most experienced dispatcher spends the morning relaying, not deciding."},{icon:R,statV:"73%",statL:"Of delays start here",title:"Outdated Excel Spreadsheets",body:"Orders in one file, driver lists in another. When delays happen, nobody has the true status until clients complain.",footLbl:"Cost",footTxt:"the handoff between two files is where the day quietly goes wrong."},{icon:en,statV:"28%",statL:"Higher cost to operate",title:"Paper Receipts & Invoicing Delays",body:"Waiting days for physical paper delivery receipts to return to the office before invoices can be processed.",footLbl:"Cost",footTxt:"completed revenue sits in a glovebox instead of on an invoice."}],eI=[{icon:W,statV:"99.2%",statL:"On-time",title:"Live Real-Time GPS Tracking",body:"Every vehicle and shipment visible on one live map. ETAs update automatically without making a single phone call.",footLbl:"Gain",footTxt:"status is answered in a glance, not a call chain."},{icon:ei,statV:"40%",statL:"Fewer manual tasks",title:"Single Connected Workspace",body:"Orders, vehicle capacity, driver dispatch and tracking sync live in one place for your entire team.",footLbl:"Gain",footTxt:"one screen replaces the entire morning ritual."},{icon:eg,statV:"3x",statL:"Faster response",title:"Instant Digital Proof of Receipt",body:"Digital signatures and OTP receipts captured at the doorstep — ready for instant billing reconciliation.",footLbl:"Gain",footTxt:"the invoice is raised the moment the door closes."}],eP=[{label:"Time spent coordinating",old:"Most of the morning",oldW:100,dm:"40% less",dmW:60},{label:"Status requests answered by phone",old:"Constant",oldW:92,dm:"Near zero",dmW:8},{label:"Time from delivery to invoice",old:"Days",oldW:88,dm:"Same day",dmW:18}];function eW(){let[e,t]=(0,o.useState)("doormile"),r="doormile"===e;return(0,s.jsxs)(ew,{id:"operational-evolution",bg:"white",children:[(0,s.jsx)(ej,{n:"02",label:"Operational Evolution",title:(0,s.jsxs)(s.Fragment,{children:["STOP MANAGING LOGISTICS",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"THE HARD WAY."})]}),lede:"Most logistics teams lose hours every day switching between spreadsheets, phone calls and WhatsApp. DoorMile brings everything into one place.",sub:"Nothing below is a new process to learn. It is the same day your team already runs — with the chasing, the re-keying and the paperwork taken out of it.",center:!0}),(0,s.jsxs)("div",{className:"sol-s02-wrap",children:[(0,s.jsxs)("div",{className:"sol-s02-toggle-bar",role:"tablist","aria-label":"Compare traditional logistics with DoorMile",children:[(0,s.jsx)("button",{type:"button",role:"tab",id:"sol-s02-tab-old","aria-selected":!r,"aria-controls":"sol-s02-panel",className:`sol-s02-tgl-btn ${!r?"is-active-old":""}`,onClick:()=>t("old"),children:"Traditional Logistics (The Daily Friction)"}),(0,s.jsx)("button",{type:"button",role:"tab",id:"sol-s02-tab-dm","aria-selected":r,"aria-controls":"sol-s02-panel",className:`sol-s02-tgl-btn ${r?"is-active-dm":""}`,onClick:()=>t("doormile"),children:"DoorMile Platform (Total Control)"})]}),(0,s.jsx)("div",{className:"sol-s02-stage-box",id:"sol-s02-panel",role:"tabpanel","aria-labelledby":r?"sol-s02-tab-dm":"sol-s02-tab-old",children:r?(0,s.jsxs)("div",{className:"sol-s02-view sol-s02-view--dm",children:[(0,s.jsx)("div",{className:"sol-s02-grid-3",children:eI.map((e,o)=>(0,s.jsxs)("div",{className:"sol-s02-card sol-s02-card--dm",style:{"--i":o},children:[(0,s.jsxs)("div",{className:"sol-s02-card-top",children:[(0,s.jsx)("span",{className:"sol-s02-ic",children:e.icon}),(0,s.jsxs)("span",{className:"sol-s02-stat",children:[(0,s.jsx)("b",{children:e.statV}),(0,s.jsx)("i",{children:e.statL})]})]}),(0,s.jsx)("h3",{children:e.title}),(0,s.jsx)("p",{children:e.body}),(0,s.jsxs)("span",{className:"sol-s02-foot",children:[(0,s.jsx)("b",{children:e.footLbl}),e.footTxt]})]},e.title))}),(0,s.jsxs)("div",{className:"sol-s02-media-row",children:[(0,s.jsx)(eO,{tone:"light",className:"sol-s02-media-panel",src:"/images/tab-pic-1-solution.webp",alt:"DoorMile connected operations",badges:[{value:"99.2%",label:"ON-TIME"},{value:"0",label:"CALLS TO CHECK STATUS"}]}),(0,s.jsxs)("div",{className:"sol-s02-media-copy",children:[(0,s.jsxs)("span",{className:"sol-s02-eyeb",children:[(0,s.jsx)("i",{"aria-hidden":"true"}),"What actually changes"]}),(0,s.jsx)("h4",{children:"The same day, minus the chasing"}),(0,s.jsx)(ez,{tone:"light",items:[{t:"The board opens itself",d:"Overnight orders are already planned and matched to capacity."},{t:"Exceptions come to you",d:"You are alerted to the three trips at risk, not the 1,400 that are fine."},{t:"The customer stops asking",d:"They have the same live link your control room is watching."}]})]})]})]},"dm"):(0,s.jsxs)("div",{className:"sol-s02-view sol-s02-view--old",children:[(0,s.jsx)("div",{className:"sol-s02-grid-3",children:eD.map((e,o)=>(0,s.jsxs)("div",{className:"sol-s02-card sol-s02-card--old",style:{"--i":o},children:[(0,s.jsxs)("div",{className:"sol-s02-card-top",children:[(0,s.jsx)("span",{className:"sol-s02-ic",children:e.icon}),(0,s.jsxs)("span",{className:"sol-s02-stat",children:[(0,s.jsx)("b",{children:e.statV}),(0,s.jsx)("i",{children:e.statL})]})]}),(0,s.jsx)("h3",{children:e.title}),(0,s.jsx)("p",{children:e.body}),(0,s.jsxs)("span",{className:"sol-s02-foot",children:[(0,s.jsx)("b",{children:e.footLbl}),e.footTxt]})]},e.title))}),(0,s.jsxs)("div",{className:"sol-s02-ledger",children:[(0,s.jsxs)("div",{className:"sol-s02-ledger-head",children:[(0,s.jsx)("b",{children:"Where the day actually goes"}),(0,s.jsx)("span",{children:"Illustrative · one dispatcher, one shift"})]}),(0,s.jsxs)("ul",{className:"sol-s02-ledger-list",children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("span",{children:"Chasing status by phone"}),(0,s.jsx)("i",{}),(0,s.jsx)("b",{children:"Morning gone"})]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("span",{children:"Re-keying orders between files"}),(0,s.jsx)("i",{}),(0,s.jsx)("b",{children:"Every order, twice"})]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("span",{children:"Reconciling paper PODs"}),(0,s.jsx)("i",{}),(0,s.jsx)("b",{children:"Days behind"})]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("span",{children:"Explaining a delay after the fact"}),(0,s.jsx)("i",{}),(0,s.jsx)("b",{children:"Too late to fix"})]})]})]})]},"old")}),(0,s.jsxs)("div",{className:"sol-s02-compare",children:[(0,s.jsxs)("div",{className:"sol-s02-compare-head",children:[(0,s.jsx)("b",{children:"Your day, side by side"}),(0,s.jsx)("span",{children:r?"Showing DoorMile":"Showing traditional"})]}),eP.map(e=>(0,s.jsxs)("div",{className:"sol-s02-cmp-row",children:[(0,s.jsx)("span",{className:"sol-s02-cmp-lbl",children:e.label}),(0,s.jsxs)("div",{className:"sol-s02-cmp-bars",children:[(0,s.jsxs)("div",{className:"sol-s02-cmp-line",children:[(0,s.jsx)("span",{className:"sol-s02-cmp-tag",children:"Traditional"}),(0,s.jsx)("span",{className:"sol-s02-cmp-track",children:(0,s.jsx)("i",{className:"sol-s02-cmp-bar sol-s02-cmp-bar--old",style:{width:`${e.oldW}%`}})}),(0,s.jsx)("em",{children:e.old})]}),(0,s.jsxs)("div",{className:"sol-s02-cmp-line",children:[(0,s.jsx)("span",{className:"sol-s02-cmp-tag sol-s02-cmp-tag--dm",children:"DoorMile"}),(0,s.jsx)("span",{className:"sol-s02-cmp-track",children:(0,s.jsx)("i",{className:"sol-s02-cmp-bar sol-s02-cmp-bar--dm",style:{width:`${e.dmW}%`}})}),(0,s.jsx)("em",{children:e.dm})]})]})]},e.label))]},e)]}),(0,s.jsxs)(eT,{label:"The real saving",children:["The win is not that any single task gets faster. It is that ",(0,s.jsx)("b",{children:"40%"})," of the tasks stop existing — and the people doing them go back to running the operation."]}),(0,s.jsx)(eL,{tone:"light",items:["One workspace","No re-keying","Live status","Instant proof of delivery","Same-day invoicing"]})]})}let e$=[{id:"01",title:"Order Created",desc:"Order captured automatically from your sales channel or client system.",icon:$,replaces:"Replaces: an order typed into a spreadsheet, then typed again into a dispatch sheet.",chips:["API / CSV / portal","Auto-validated","SLA attached"],cardTitle:"Order #ORD-94821",cardDetail:"Destination: Zone 4 · Priority: Express SLA",log:"POST /orders → 201 · channel: partner-api · validated in 12ms"},{id:"02",title:"AI Planning",desc:"System matches the order to the optimal route and vehicle capacity.",icon:V,replaces:"Replaces: a whiteboard, a regional map and somebody’s memory of last Tuesday.",chips:["Capacity aware","Traffic aware","SLA aware"],cardTitle:"Route & Load Match",cardDetail:"Route 4B Matched · 94% Capacity Fill",log:"route.solve → 47 candidates evaluated · chosen 4B · 45ms"},{id:"03",title:"Driver Assigned",desc:"Nearest available driver assigned with automated pickup navigation.",icon:B,replaces:"Replaces: five calls to find out who is free and who is closest.",chips:["Nearest unit","Skill matched","Auto-notified"],cardTitle:"Driver #481 Assigned",cardDetail:"EV Van · 1.2 km from origin · ETA to pickup: 4 min",log:"dispatch.assign → driver#481 · accepted · nav pushed to device"},{id:"04",title:"Driver Moving",desc:"Vehicle loaded and en route with live speed and position monitoring.",icon:H,replaces:"Replaces: “he left twenty minutes ago, I think.”",chips:["Live position","Load verified","Geofenced"],cardTitle:"En Route · 42 km/h",cardDetail:"Capacity Loaded: 450kg / 500kg",log:"telemetry.stream → position + speed + load · 1s interval"},{id:"05",title:"Customer Tracking",desc:"Customer and ops team track live position with continuously updated ETAs.",icon:G,replaces:"Replaces: the customer calling your account manager for an update.",chips:["Shared link","Auto ETA","Delay alerts"],cardTitle:"Customer Tracking Active",cardDetail:"Live GPS Stream · Destination ETA: 14:22",log:"track.link issued → customer viewing · eta recalculated 3x"},{id:"06",title:"Delivered",desc:"Delivered at the door with instant digital signature verification.",icon:Y,replaces:"Replaces: a paper receipt travelling back to head office for three days.",chips:["OTP verified","Photo proof","Billing-ready"],cardTitle:"Delivered & Signed",cardDetail:"Digital OTP Verified · Proof of Receipt Sent",log:"pod.capture → OTP + signature + photo · pushed to billing"}];function eV({index:e}){let o={viewBox:"0 0 320 190",className:"sol-s03-art-svg","aria-hidden":!0};return 0===e?(0,s.jsxs)("svg",{...o,children:[(0,s.jsx)("rect",{x:"86",y:"26",width:"148",height:"138",rx:"12",className:"sa-panel"}),(0,s.jsx)("rect",{x:"104",y:"48",width:"76",height:"7",rx:"3.5",className:"sa-line sa-strong"}),(0,s.jsx)("rect",{x:"104",y:"68",width:"112",height:"5",rx:"2.5",className:"sa-line"}),(0,s.jsx)("rect",{x:"104",y:"82",width:"94",height:"5",rx:"2.5",className:"sa-line"}),(0,s.jsx)("rect",{x:"104",y:"96",width:"112",height:"5",rx:"2.5",className:"sa-line"}),(0,s.jsx)("rect",{x:"104",y:"118",width:"60",height:"20",rx:"10",className:"sa-tag"}),(0,s.jsx)("text",{x:"134",y:"132",className:"sa-txt",textAnchor:"middle",children:"EXPRESS"}),(0,s.jsx)("circle",{cx:"228",cy:"36",r:"14",className:"sa-dot-fill"}),(0,s.jsx)("path",{d:"M222 36h12M228 30v12",className:"sa-plus"}),(0,s.jsx)("path",{d:"M26 95h52",className:"sa-flow"}),(0,s.jsx)("circle",{cx:"26",cy:"95",r:"5",className:"sa-node"}),(0,s.jsx)("text",{x:"26",y:"118",className:"sa-cap",textAnchor:"middle",children:"CHANNEL"})]}):1===e?(0,s.jsxs)("svg",{...o,children:[(0,s.jsx)("circle",{cx:"42",cy:"95",r:"9",className:"sa-node"}),(0,s.jsx)("circle",{cx:"278",cy:"95",r:"9",className:"sa-node"}),(0,s.jsx)("path",{d:"M42 95 Q120 24 278 95",className:"sa-alt"}),(0,s.jsx)("path",{d:"M42 95 Q120 166 278 95",className:"sa-alt"}),(0,s.jsx)("path",{d:"M42 95 Q150 62 278 95",className:"sa-chosen"}),(0,s.jsx)("circle",{cx:"150",cy:"72",r:"6",className:"sa-dot-fill"}),(0,s.jsx)("rect",{x:"112",y:"122",width:"98",height:"34",rx:"10",className:"sa-panel"}),(0,s.jsx)("text",{x:"161",y:"136",className:"sa-txt",textAnchor:"middle",children:"ROUTE 4B"}),(0,s.jsx)("text",{x:"161",y:"150",className:"sa-cap",textAnchor:"middle",children:"94% CAPACITY FILL"}),(0,s.jsx)("text",{x:"42",y:"120",className:"sa-cap",textAnchor:"middle",children:"ORIGIN"}),(0,s.jsx)("text",{x:"278",y:"120",className:"sa-cap",textAnchor:"middle",children:"ZONE 4"})]}):2===e?(0,s.jsxs)("svg",{...o,children:[(0,s.jsx)("circle",{cx:"112",cy:"96",r:"52",className:"sa-ring"}),(0,s.jsx)("circle",{cx:"112",cy:"96",r:"34",className:"sa-ring sa-ring--in"}),(0,s.jsx)("circle",{cx:"112",cy:"96",r:"10",className:"sa-dot-fill"}),(0,s.jsx)("path",{d:"M112 96 L206 62",className:"sa-chosen"}),(0,s.jsxs)("g",{transform:"translate(206 44)",children:[(0,s.jsx)("rect",{x:"-30",y:"-16",width:"94",height:"38",rx:"12",className:"sa-panel"}),(0,s.jsx)("circle",{cx:"-10",cy:"3",r:"11",className:"sa-node"}),(0,s.jsx)("text",{x:"12",y:"0",className:"sa-txt",children:"#481"}),(0,s.jsx)("text",{x:"12",y:"14",className:"sa-cap",children:"EV VAN"})]}),(0,s.jsx)("text",{x:"112",y:"166",className:"sa-cap",textAnchor:"middle",children:"1.2 KM FROM ORIGIN · ETA 4 MIN"})]}):3===e?(0,s.jsxs)("svg",{...o,children:[(0,s.jsx)("path",{d:"M12 128 H308",className:"sa-road"}),(0,s.jsx)("path",{d:"M12 128 H308",className:"sa-road-dash"}),(0,s.jsxs)("g",{className:"sa-truck",children:[(0,s.jsx)("rect",{x:"0",y:"96",width:"52",height:"26",rx:"5",className:"sa-panel sa-solid"}),(0,s.jsx)("path",{d:"M52 108h14l10 8v6H52z",className:"sa-panel sa-solid"}),(0,s.jsx)("circle",{cx:"16",cy:"126",r:"6",className:"sa-wheel"}),(0,s.jsx)("circle",{cx:"62",cy:"126",r:"6",className:"sa-wheel"})]}),(0,s.jsx)("rect",{x:"188",y:"34",width:"112",height:"46",rx:"12",className:"sa-panel"}),(0,s.jsx)("text",{x:"204",y:"54",className:"sa-txt",children:"42 km/h"}),(0,s.jsx)("text",{x:"204",y:"69",className:"sa-cap",children:"450kg / 500kg LOADED"}),(0,s.jsx)("rect",{x:"20",y:"46",width:"6",height:"22",rx:"3",className:"sa-bar"}),(0,s.jsx)("rect",{x:"32",y:"38",width:"6",height:"30",rx:"3",className:"sa-bar"}),(0,s.jsx)("rect",{x:"44",y:"52",width:"6",height:"16",rx:"3",className:"sa-bar"})]}):4===e?(0,s.jsxs)("svg",{...o,children:[(0,s.jsx)("circle",{cx:"112",cy:"96",r:"66",className:"sa-ring sa-radar"}),(0,s.jsx)("circle",{cx:"112",cy:"96",r:"46",className:"sa-ring sa-radar sa-radar--2"}),(0,s.jsx)("circle",{cx:"112",cy:"96",r:"26",className:"sa-ring sa-radar sa-radar--3"}),(0,s.jsx)("circle",{cx:"112",cy:"96",r:"7",className:"sa-dot-fill"}),(0,s.jsx)("path",{d:"M112 96 H236",className:"sa-flow"}),(0,s.jsx)("rect",{x:"196",y:"60",width:"106",height:"52",rx:"12",className:"sa-panel"}),(0,s.jsx)("text",{x:"212",y:"82",className:"sa-txt",children:"ETA 14:22"}),(0,s.jsx)("text",{x:"212",y:"98",className:"sa-cap",children:"RECALCULATED LIVE"}),(0,s.jsx)("text",{x:"112",y:"176",className:"sa-cap",textAnchor:"middle",children:"CUSTOMER + OPS ON THE SAME LINK"})]}):(0,s.jsxs)("svg",{...o,children:[(0,s.jsx)("rect",{x:"52",y:"40",width:"98",height:"116",rx:"10",className:"sa-panel"}),(0,s.jsx)("path",{d:"M52 76 H150",className:"sa-line"}),(0,s.jsx)("circle",{cx:"134",cy:"106",r:"4",className:"sa-dot-fill"}),(0,s.jsx)("rect",{x:"176",y:"52",width:"124",height:"92",rx:"14",className:"sa-panel"}),(0,s.jsx)("path",{d:"M192 96l14 15 30-34",className:"sa-check"}),(0,s.jsx)("path",{d:"M192 124c14-10 22 8 34 0s20-10 32 0",className:"sa-sign"}),(0,s.jsx)("text",{x:"252",y:"80",className:"sa-txt",textAnchor:"middle",children:"OTP VERIFIED"}),(0,s.jsx)("text",{x:"106",y:"176",className:"sa-cap",textAnchor:"middle",children:"PROOF OF RECEIPT SENT"})]})}let eB=[{icon:C,title:"Zero Calling",desc:"The live tracking map replaces the manual driver phone check entirely.",stat:"40% fewer manual tasks"},{icon:ea,title:"Live Traffic Recalculation",desc:"Delivery ETAs adjust dynamically as road conditions change beneath the trip.",stat:"42% distance saved"},{icon:A,title:"Early Warning Alerts",desc:"Spot potential delay risks around 30 minutes before they turn into a breach.",stat:"3x faster response"},{icon:en,title:"A Trip That Explains Itself",desc:"Every deviation, wait and exception is timestamped against the shipment record.",stat:"Full audit trail"}],eH=[{name:"Corridor N-1",risk:22},{name:"Corridor E-3",risk:68},{name:"Corridor S-2",risk:34},{name:"Corridor W-4",risk:12}],eG=[{icon:ed,t:"Observe",d:"Every completed trip is recorded with its real conditions — not its plan."},{icon:et,t:"Learn",d:"Patterns surface across drivers, corridors, times of day and weather."},{icon:ep,t:"Apply",d:"The next plan is built from what actually happened, before dispatch."}],eY=["Traffic patterns by hour","Driver performance","Dock and gate wait times","Weather impact","Seasonal demand peaks","Customer window behaviour"],eq=[{id:"fmcg",name:"FMCG & Groceries",headline:"Fast Store & Hub Replenishment",desc:"Keep retail shelves stocked with high-speed multi-stop store deliveries.",icon:X,metric:"99.4%",metricLabel:"On-Time Replenishment",metric2:"42%",metric2Label:"Distance Saved",rules:["Store delivery windows are fixed and non-negotiable.","One vehicle serves many stores — sequence decides the day.","Short-shelf-life stock cannot wait for the next run."],chips:["Multi-stop routes","Fixed windows","Crate-level counts"],flow:["Depot","Consolidation","Store Route","Shelf"],photo:"/images/tab-pic-1-solution.webp"},{id:"retail",name:"Retail & Parcels",headline:"Same-Day Doorstep Delivery",desc:"Delight shoppers with live customer tracking links and fast doorstep delivery.",icon:Q,metric:"3.2 hrs",metricLabel:"Avg Delivery Time",metric2:"3x",metric2Label:"Faster Response",rules:["The end customer expects to watch the delivery, not phone about it.","Failed attempts cost more than the delivery itself.","Returns must flow back through the same trip."],chips:["Live tracking link","OTP handover","Reverse pickup"],flow:["Warehouse","Sort Hub","Rider","Doorstep"],photo:"/images/tab-pic-2-solution.webp"},{id:"manufacturing",name:"Industrial & Factory",headline:"Raw Material & Factory Logistics",desc:"Keep factory assembly lines running with reliable inbound material transport.",icon:Z,metric:"-28%",metricLabel:"Holding Cost Saved",metric2:"99.2%",metric2Label:"On-Time Inbound",rules:["A late inbound load stops a line, not just a shipment.","Gate and dock slots have to be booked, not queued for.","Inbound and outbound share the same yard and the same clock."],chips:["Dock slot booking","Line-side sequencing","Yard visibility"],flow:["Supplier","Inbound Yard","Dock Slot","Line-Side"]},{id:"distribution",name:"Warehouse & Wholesale",headline:"Hub-to-Spoke Transport",desc:"Consolidate loads and optimize regional transport between distribution centers.",icon:K,metric:"94.8%",metricLabel:"Truck Load Capacity",metric2:"37%",metric2Label:"Fewer Vehicles",rules:["Empty space on a line haul is the most expensive thing you move.","Consolidation decisions have to be made before the truck is loaded.","Spokes depend on the hub departing on time, every time."],chips:["Load consolidation","Line-haul planning","Cross-dock"],flow:["DC Origin","Line Haul","Regional DC","Spoke"]},{id:"coldchain",name:"Medicines & Cold Chain",headline:"Temperature-Controlled Transport",desc:"Protect perishable goods and pharma items with live temperature tracking.",icon:_,metric:"100%",metricLabel:"Compliance Score",metric2:"99.2%",metric2Label:"On-Time Delivery",rules:["The temperature record is as much the product as the cargo is.","An excursion has to raise an alarm in transit, not at unloading.","Every handover needs a signature that survives an audit."],chips:["Live temperature log","Excursion alerts","Audit-ready proof"],flow:["Cold Room","Reefer","Temp Check","Pharmacy"],photo:"/images/tab-pic-3-solution.webp"},{id:"3pl",name:"3PL & Transport",headline:"Multi-Client Operations",desc:"Manage multiple client transport accounts with clear tracking and automated billing.",icon:J,metric:"3.5x",metricLabel:"Ops Scaling Capacity",metric2:"40%",metric2Label:"Fewer Manual Tasks",rules:["Each client believes they are your only client — and should.","One fleet serves many contracts with different SLAs.","Billing accuracy is the margin, and proof is the billing."],chips:["Client partitioning","Per-contract SLA","Automated billing"],flow:["Client Pool","Shared Fleet","Zone Split","Billing"],photo:"/images/premium-ev-van.webp"}];function eU({nodes:e,still:o}){let t=[42,118,194,270];return(0,s.jsxs)("svg",{viewBox:"0 0 312 96",className:"sol-s06-flow","aria-hidden":"true",children:[(0,s.jsx)("path",{d:"M42 40 H270",className:"fd-spine"}),!o&&(0,s.jsx)("path",{d:"M42 40 H270",className:"fd-spine fd-spine--run"}),t.map((o,t)=>(0,s.jsxs)("g",{children:[(0,s.jsx)("circle",{cx:o,cy:40,r:0===t||3===t?13:10,className:`fd-node ${3===t?"fd-node--end":""}`}),(0,s.jsx)("text",{x:o,y:45,className:"fd-num",textAnchor:"middle",children:t+1}),(0,s.jsx)("text",{x:o,y:76,className:"fd-lbl",textAnchor:"middle",children:e[t]})]},e[t])),t.slice(0,3).map((e,o)=>(0,s.jsx)("path",{d:`M${e+26} 40 l-6 -4 v8 z`,className:"fd-arrow"},`a${o}`))]})}let eX=[{icon:ei,t:"One platform",d:"Every vertical runs on the same core — no forked product."},{icon:eh,t:"One integration",d:"A single API and data model, whatever you move."},{icon:eg,t:"One reconciliation",d:"Proof, exceptions and billing land in one ledger."}],eQ=[{when:"Week 1",title:"The phone stops ringing",d:"Live tracking replaces the status call. The control room reads one screen instead of four."},{when:"Month 1",title:"The morning runs itself",d:"Overnight orders arrive planned and matched. Dispatch becomes a review, not a rebuild."},{when:"Quarter 1",title:"The network gets sharper",d:"MileTruth has enough of your history to plan your corridors better than any generic map."}];function eZ(){return(0,s.jsxs)(ew,{id:"outcomes",bg:"charcoal",children:[(0,s.jsx)(ej,{n:"07",label:"Business Results",title:(0,s.jsxs)(s.Fragment,{children:["BETTER OPERATIONS.",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"BETTER RESULTS."})]}),lede:"Real operational improvements your logistics team experiences from week one.",sub:"These are not efficiency gains you have to hunt for in a report. They are the ones your dispatchers feel before the first month closes.",center:!0}),(0,s.jsx)(p.StaggerChildren,{stagger:.12,duration:.75,yOffset:28,triggerOnce:!0,className:"sol-s07-timeline",children:eQ.map(e=>(0,s.jsxs)("div",{className:"sol-s07-tl-item",children:[(0,s.jsx)("span",{className:"sol-s07-tl-when",children:e.when}),(0,s.jsx)("span",{className:"sol-s07-tl-rule","aria-hidden":"true"}),(0,s.jsx)("b",{children:e.title}),(0,s.jsx)("p",{children:e.d})]},e.when))}),(0,s.jsxs)("div",{className:"sol-s07-grid",children:[(0,s.jsxs)(ek,{className:"sol-s07-card sol-s07-card--hero",children:[(0,s.jsxs)("div",{className:"sol-s07-head",children:[(0,s.jsx)("span",{className:"sol-s07-ic",children:ee}),(0,s.jsx)("span",{className:"sol-s07-lbl",children:"Daily Efficiency"})]}),(0,s.jsxs)("div",{className:"sol-s07-num",children:[(0,s.jsx)(eN,{to:40,suffix:"%"})," Fewer Tasks"]}),(0,s.jsx)("p",{className:"sol-s07-desc",children:"Cut manual phone calls and spreadsheet updates with automated order dispatch and live status tracking."}),(0,s.jsxs)("div",{className:"sol-s07-bar-mock",children:[(0,s.jsxs)("div",{className:"sol-s07-bm-row",children:[(0,s.jsx)("span",{children:"Manual Coordination"}),(0,s.jsx)("span",{className:"sol-s07-bm-bar",style:{width:"100%"}})]}),(0,s.jsxs)("div",{className:"sol-s07-bm-row",children:[(0,s.jsx)("span",{children:"With DoorMile (-40%)"}),(0,s.jsx)("span",{className:"sol-s07-bm-bar sol-s07-bm-bar--red",style:{width:"60%"}})]})]}),(0,s.jsx)("span",{className:"sol-s07-micro",children:"Measured against the coordination load your team carries today."})]}),(0,s.jsxs)(ek,{className:"sol-s07-card sol-s07-card--hero",children:[(0,s.jsxs)("div",{className:"sol-s07-head",children:[(0,s.jsx)("span",{className:"sol-s07-ic",children:U}),(0,s.jsx)("span",{className:"sol-s07-lbl",children:"Reliability"})]}),(0,s.jsxs)("div",{className:"sol-s07-num",children:[(0,s.jsx)(eN,{to:99.2,decimals:1,suffix:"%"})," On-Time"]}),(0,s.jsx)("p",{className:"sol-s07-desc",children:"Deliver on time consistently with automatic traffic alerts and dynamic rerouting."}),(0,s.jsxs)("div",{className:"sol-s07-arc-mock",children:[(0,s.jsx)("div",{className:"sol-s07-arc-fill",style:{width:"99.2%"}}),(0,s.jsx)("span",{children:"Deliveries On Time: 99.2%"})]}),(0,s.jsx)("span",{className:"sol-s07-micro",children:"Protected by delay warnings raised before the window closes."})]}),(0,s.jsxs)(ek,{className:"sol-s07-card sol-s07-card--wide",children:[(0,s.jsxs)("div",{className:"sol-s07-head",children:[(0,s.jsx)("span",{className:"sol-s07-ic",children:eo}),(0,s.jsx)("b",{className:"sol-s07-mid",children:"Dispatch in Minutes"})]}),(0,s.jsx)("p",{className:"sol-s07-desc",children:"Assign drivers and optimal routes instantly instead of spending hours coordinating morning runs."}),(0,s.jsx)("div",{className:"sol-s07-clock","aria-hidden":"true",children:(0,s.jsxs)("svg",{viewBox:"0 0 120 44",children:[(0,s.jsx)("path",{d:"M4 32 H116",className:"s7-track"}),(0,s.jsx)("path",{d:"M4 32 H30",className:"s7-fill"}),(0,s.jsx)("circle",{cx:"30",cy:"32",r:"5",className:"s7-knob"}),(0,s.jsx)("text",{x:"4",y:"18",className:"s7-cap",children:"HOURS"}),(0,s.jsx)("text",{x:"116",y:"18",className:"s7-cap s7-cap--r",textAnchor:"end",children:"MINUTES"})]})}),(0,s.jsx)("span",{className:"sol-s07-micro",children:"45ms to solve a route · the rest is your team saying yes."})]}),(0,s.jsxs)(ek,{className:"sol-s07-card sol-s07-card--wide",children:[(0,s.jsxs)("div",{className:"sol-s07-head",children:[(0,s.jsx)("span",{className:"sol-s07-ic",children:es}),(0,s.jsx)("b",{className:"sol-s07-mid",children:"Visible Without Calling Drivers"})]}),(0,s.jsx)("p",{className:"sol-s07-desc",children:"Check the status of any shipment live on a map at any second without picking up the phone."}),(0,s.jsx)("div",{className:"sol-s07-ping","aria-hidden":"true",children:(0,s.jsxs)("svg",{viewBox:"0 0 120 44",children:[(0,s.jsx)("path",{d:"M2 34 Q34 22 60 30 T118 24",className:"s7-terrain"}),(0,s.jsx)("circle",{cx:"42",cy:"26",r:"9",className:"s7-ping-ring"}),(0,s.jsx)("circle",{cx:"42",cy:"26",r:"3.5",className:"s7-ping-core"}),(0,s.jsx)("circle",{cx:"92",cy:"25",r:"3",className:"s7-ping-core s7-ping-core--ok"})]})}),(0,s.jsx)("span",{className:"sol-s07-micro",children:"One glance answers what used to take a round of calls."})]})]}),(0,s.jsx)(eS,{items:[{value:99.2,decimals:1,suffix:"%",label:"On-Time Performance"},{value:40,suffix:"%",label:"Fewer Manual Tasks"},{value:3,suffix:"x",label:"Faster Response"},{value:42,suffix:"%",label:"Distance Saved"}]}),(0,s.jsxs)("div",{className:"sol-peace-card",children:[(0,s.jsx)("div",{className:"sol-peace-grid-bg","aria-hidden":"true"}),(0,s.jsxs)("div",{className:"sol-peace-badge",children:[(0,s.jsx)("span",{className:"sol-peace-badge-ic",children:er}),(0,s.jsx)("span",{className:"sol-peace-badge-txt",children:"PROACTIVE SLA GUARANTEE"})]}),(0,s.jsxs)("h3",{className:"sol-peace-h3",children:["When You Ship With Doormile, ",(0,s.jsx)("span",{className:"sol-peace-accent",children:"Every Mile Is Monitored, Protected & Delivered On Time."})]}),(0,s.jsx)("p",{className:"sol-peace-p",children:"From first mile pickup to last mile doorstep delivery, your entire supply chain runs on one unified network. Real-time SLA protection, proactive disruption management, and end-to-end visibility give you total peace of mind."}),(0,s.jsxs)("div",{className:"sol-peace-actions",children:[(0,s.jsx)(p.Magnetic,{children:(0,s.jsxs)(t.default,{href:"/contact",className:"sol-peace-btn-primary",children:[(0,s.jsx)("span",{children:"Talk to Logistics Experts"}),(0,s.jsx)("span",{className:"sol-peace-btn-arrow","aria-hidden":"true",children:"→"})]})}),(0,s.jsx)(p.Magnetic,{children:(0,s.jsxs)(t.default,{href:"/miletruth",className:"sol-peace-btn-secondary",children:[(0,s.jsx)("span",{children:"Explore MileTruth™ AI"}),(0,s.jsx)("svg",{viewBox:"0 0 13 20","aria-hidden":"true",className:"sol-peace-btn-icon",children:(0,s.jsx)("polyline",{points:"0.5 19.5 3 19.5 12.5 10 3 0.5"})})]})})]}),(0,s.jsxs)("div",{className:"sol-peace-trust",children:[(0,s.jsxs)("span",{className:"sol-peace-trust-item",children:[(0,s.jsx)("i",{className:"sol-peace-trust-dot"}),"99.2% On-Time SLA"]}),(0,s.jsx)("span",{className:"sol-peace-trust-sep",children:"•"}),(0,s.jsxs)("span",{className:"sol-peace-trust-item",children:[(0,s.jsx)("i",{className:"sol-peace-trust-dot"}),"Real-Time GPS & Sensor Tracking"]}),(0,s.jsx)("span",{className:"sol-peace-trust-sep",children:"•"}),(0,s.jsxs)("span",{className:"sol-peace-trust-item",children:[(0,s.jsx)("i",{className:"sol-peace-trust-dot"}),"Zero Handover Friction"]})]})]})]})}let eK=[{id:"first-mile",label:"First Mile",name:"Pickup From Your Warehouse",desc:"Orders are collected from your warehouse or plant on a booked slot, checked for quality at handover, and tracked from the moment they leave your dock.",icon:B,note:"You know the load is on its way without calling to confirm it."},{id:"mid-mile",label:"Mid Mile",name:"Hub-To-Hub Line Haul",desc:"Inter-city movement through our hub network, with loads consolidated so you pay for space you actually use and every leg stays visible end to end.",icon:H,note:"One shipment, one tracking thread — across every hub it passes through."},{id:"last-mile",label:"Last Mile",name:"Delivery To The Door",desc:"Final delivery to stores, pharmacies, dealers or customers, with a live tracking link you can share and digital proof of delivery the moment the door closes.",icon:G,note:"Proof of delivery arrives with the delivery, not days later."},{id:"wings",label:"Doormile Wings",name:"Same-Day Air Logistics",desc:"Air freight linking India's major regional capitals for shipments that have to arrive today, connected to EV last-mile transport at both ends.",icon:ex,note:"For the shipments where tomorrow is too late.",href:"/doormile-wings",hrefLabel:"Explore Wings"},{id:"ev-fleet",label:"EV Fleet",name:"Electric Fleet On Your Routes",desc:"A purpose-built electric fleet for urban and regional runs — lower running cost per kilometre and zero tailpipe emissions on the miles you move with us.",icon:em,note:"Cleaner miles that also cost less to run."},{id:"powered-by",label:"Powered by MileTruth™",name:"Every Mile, Planned And Watched",desc:"Every service above runs on MileTruth™ — so your shipments are planned before the day starts, watched while they move, and flagged to us before they run late.",icon:et,note:"The reason the other five stay on time.",href:"/miletruth",hrefLabel:"See MileTruth™ AI"}];function e_(){return(0,s.jsxs)(ew,{id:"offerings",bg:"white-red",map:"#E2354A",children:[(0,s.jsx)(ej,{n:"01",label:"What We Offer",title:(0,s.jsxs)(s.Fragment,{children:["ONE PARTNER FOR",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"EVERY MILE."})]}),lede:"Doormile moves your goods from your warehouse to your customer's door — first mile, mid mile and last mile — on road and in the air, with an electric fleet.",sub:"You can take one service or the whole chain. Either way it is one contract, one tracking link and one team answering the phone.",center:!0}),(0,s.jsx)("div",{className:"sol-off-grid",children:eK.map(e=>(0,s.jsxs)(ek,{className:"sol-off-card",children:[(0,s.jsxs)("div",{className:"sol-off-head",children:[(0,s.jsx)("span",{className:"sol-off-ic",children:e.icon}),(0,s.jsx)("span",{className:"sol-off-lbl",children:e.label})]}),(0,s.jsx)("b",{className:"sol-off-name",children:e.name}),(0,s.jsx)("p",{className:"sol-off-desc",children:e.desc}),(0,s.jsx)("span",{className:"sol-off-note",children:e.note}),e.href?(0,s.jsxs)(t.default,{href:e.href,className:"sol-linkbtn sol-off-link",children:[e.hrefLabel,(0,s.jsx)("svg",{viewBox:"0 0 13 20","aria-hidden":"true",children:(0,s.jsx)("polyline",{points:"0.5 19.5 3 19.5 12.5 10 3 0.5"})})]}):null]},e.id))}),(0,s.jsx)(eT,{label:"What this means in practice",children:"You are not stitching three vendors together and hoping the handovers hold. One operator owns the shipment from your dock to the door — so there is one place to look and one person accountable."}),(0,s.jsx)(eL,{items:["First mile","Mid mile","Last mile","Same-day air","Electric fleet","One tracking link"],tone:"light"})]})}function eJ(){return(0,s.jsxs)(ew,{id:"wings-spotlight",bg:"white-red",children:[(0,s.jsxs)("div",{className:"sol-qhead",children:[(0,s.jsx)(p.ScrollReveal,{yOffset:16,triggerOnce:!0,children:(0,s.jsxs)("div",{className:"sol-qhead-kicker",children:[(0,s.jsx)("span",{className:"sol-qhead-eyebrow",children:"/ AIR LOGISTICS /"}),(0,s.jsx)("hr",{className:"sol-qhead-divider"})]})}),(0,s.jsx)(p.ScrollReveal,{yOffset:20,delay:.05,triggerOnce:!0,children:(0,s.jsx)("div",{className:"sol-qhead-stroke-title",children:"Doormile Wings"})}),(0,s.jsxs)("div",{className:"sol-qhead-split",children:[(0,s.jsx)(p.ScrollReveal,{yOffset:20,delay:.08,triggerOnce:!0,children:(0,s.jsx)("h2",{className:"sol-qhead-h2",children:"When It Has To Arrive Today."})}),(0,s.jsxs)("div",{className:"sol-qhead-desc",children:[(0,s.jsx)(p.ScrollReveal,{yOffset:20,delay:.16,triggerOnce:!0,children:(0,s.jsx)("p",{children:"Doormile Wings is our same-day air service linking India's major regional capitals, with electric last-mile transport waiting at both ends."})}),(0,s.jsx)(p.ScrollReveal,{yOffset:20,delay:.24,triggerOnce:!0,children:(0,s.jsx)("p",{children:"Booked in the morning, scheduled air transport moves your cargo across India with zero-emission EV fleet handoffs on both ends."})})]})]})]}),(0,s.jsxs)("div",{className:"sol-wings-row",children:[(0,s.jsx)(eO,{src:"/images/wings-heroslide2.png",alt:"Doormile Wings same-day air logistics",badges:[{value:"Same day",label:"CITY TO CITY"},{value:"EV",label:"LAST MILE BOTH ENDS"}]}),(0,s.jsxs)("div",{className:"sol-wings-copy",children:[(0,s.jsx)(ez,{tone:"light",items:[{t:"Booked in the morning, delivered the same day",d:"Regional capitals connected by scheduled air movement, not best-effort transfers."},{t:"One tracking link, air and road",d:"The shipment does not change identity when it changes vehicle."},{t:"Electric at both ends",d:"EV pickup to the airport and EV delivery on arrival, on the same booking."}]}),(0,s.jsxs)("div",{className:"sol-wings-specs",children:[(0,s.jsxs)("div",{className:"sol-wings-spec-item",children:[(0,s.jsx)("span",{className:"sol-wings-spec-val",children:"Same Day"}),(0,s.jsx)("span",{className:"sol-wings-spec-lbl",children:"City-to-City Air"})]}),(0,s.jsxs)("div",{className:"sol-wings-spec-item",children:[(0,s.jsx)("span",{className:"sol-wings-spec-val",children:"100% EV"}),(0,s.jsx)("span",{className:"sol-wings-spec-lbl",children:"First & Last Mile"})]}),(0,s.jsxs)("div",{className:"sol-wings-spec-item",children:[(0,s.jsx)("span",{className:"sol-wings-spec-val",children:"Live Sync"}),(0,s.jsx)("span",{className:"sol-wings-spec-lbl",children:"Air & Road Tracking"})]})]}),(0,s.jsx)("div",{className:"sol-wings-cta",children:(0,s.jsx)(p.Magnetic,{children:(0,s.jsx)(t.default,{href:"/doormile-wings",prefetch:!0,className:"logico-alter-button",children:"Explore Doormile Wings"})})})]})]})]})}let e0=[{v:"99.2%",l:"SLA"},{v:"45ms",l:"Decision Time"},{v:"3×",l:"Faster Planning"},{v:"24/7",l:"Prediction"}];function e1(){return(0,s.jsxs)("div",{className:"sol-mt-graph","aria-hidden":"true",children:[(0,s.jsx)("span",{className:"sol-mt-graph-glow"}),(0,s.jsx)(z,{variant:"full"})]})}function e2(){return(0,s.jsxs)(ew,{id:"powered-by-miletruth",bg:"paper",field:!0,className:"sol-sec--mt",children:[(0,s.jsxs)("div",{className:"sol-mt-hero",children:[(0,s.jsxs)(p.ScrollReveal,{yOffset:22,triggerOnce:!0,className:"sol-mt-copy",children:[(0,s.jsxs)("span",{className:"sol-mt-tag",children:[(0,s.jsx)("span",{className:"sol-livedot"}),"Powered by MileTruth™ AI"]}),(0,s.jsxs)("h2",{className:"sol-h sol-mt-h",children:["The proprietary AI decision engine that ",(0,s.jsx)("em",{children:"predicts"}),","," ",(0,s.jsx)("em",{children:"watches"})," and ",(0,s.jsx)("em",{children:"protects"})," every mile."]}),(0,s.jsx)("p",{className:"sol-mt-p",children:"MileTruth™ is Doormile’s intelligent operating system powering every logistics service on this page. By combining real-time telemetry, predictive traffic modelling, and dynamic fleet dispatch, it guarantees 99.2% on-time SLA performance."}),(0,s.jsx)(p.Magnetic,{children:(0,s.jsxs)(t.default,{href:"/miletruth",className:"sol-mt-cta",children:[(0,s.jsx)("span",{children:"Explore MileTruth™ AI Architecture"}),(0,s.jsx)("svg",{viewBox:"0 0 13 20","aria-hidden":"true",children:(0,s.jsx)("polyline",{points:"0.5 19.5 3 19.5 12.5 10 3 0.5"})})]})})]}),(0,s.jsx)(p.ScrollReveal,{yOffset:26,delay:.1,triggerOnce:!0,className:"sol-mt-viz",children:(0,s.jsx)(e1,{})})]}),(0,s.jsx)(p.StaggerChildren,{stagger:.08,duration:.6,yOffset:18,triggerOnce:!0,className:"sol-mt-rail",children:e0.map(e=>(0,s.jsxs)("div",{className:"sol-mt-cell",children:[(0,s.jsx)("span",{className:"sol-mt-cell-v",children:e.v}),(0,s.jsx)("span",{className:"sol-mt-cell-l",children:e.l})]},e.v))}),(0,s.jsxs)(p.StaggerChildren,{stagger:.09,duration:.7,yOffset:26,triggerOnce:!0,className:"sol-mt-cards",children:[(0,s.jsxs)("div",{className:"sol-mt-card",children:[(0,s.jsx)("span",{className:"sol-mt-card-ic",children:U}),(0,s.jsx)("h4",{children:"Predictive SLA Defense"}),(0,s.jsx)("p",{children:"Flags potential bottlenecks 45 minutes ahead so our ops team reroutes shipments before delays occur."})]}),(0,s.jsxs)("div",{className:"sol-mt-card",children:[(0,s.jsx)("span",{className:"sol-mt-card-ic",children:K}),(0,s.jsx)("h4",{children:"Dynamic Fleet Dispatch"}),(0,s.jsx)("p",{children:"Optimizes route geometry, driver assignment, and EV charging stops for maximum delivery speed and efficiency."})]}),(0,s.jsxs)("div",{className:"sol-mt-card",children:[(0,s.jsx)("span",{className:"sol-mt-card-ic",children:ec}),(0,s.jsx)("h4",{children:"Single-Link Visibility"}),(0,s.jsx)("p",{children:"Connects first, mid, and last mile into one transparent tracking link for complete supply chain control."})]})]})]})}function e5({children:e}){return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{dangerouslySetInnerHTML:{__html:e4}}),(0,s.jsxs)("div",{id:"sol-root",children:[(0,s.jsx)("div",{className:"sol-noise","aria-hidden":"true"}),e]})]})}let e4=`
|
||
#sol-root {
|
||
--sol-red: #C01227;
|
||
--sol-red-bright: #E2354A;
|
||
--sol-line: rgba(255,255,255,0.09);
|
||
--sol-text-dim: rgba(255,255,255,0.68);
|
||
--sol-in-pad: clamp(16px, 3vw, 32px);
|
||
position: relative;
|
||
overflow: clip;
|
||
}
|
||
#sol-root, #sol-root * { font-family: var(--font-manrope), "Manrope", sans-serif; box-sizing: border-box; }
|
||
|
||
#sol-root .sol-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;
|
||
}
|
||
|
||
#sol-root .sol-sec { position: relative; padding: 96px 0; margin-top: 40px; overflow: clip; }
|
||
#sol-root .sol-in { position: relative; z-index: 1; width: calc(100% - 40px); margin: 0 auto; padding: 0 var(--sol-in-pad); }
|
||
#sol-root { margin-bottom: 40px; }
|
||
|
||
#sol-root .sol-bg { position: absolute; left: 20px; right: 20px; top: 0; bottom: 0; z-index: 0; border-radius: 24px; overflow: hidden; }
|
||
#sol-root .sol-bg--charcoal { background: #171717; }
|
||
#sol-root .sol-bg--graph { background: #141414; }
|
||
#sol-root .sol-bg--graph::before {
|
||
content: ''; position: absolute; inset: 0;
|
||
background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 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%);
|
||
}
|
||
#sol-root .sol-bg--mesh { background: #141414; }
|
||
#sol-root .sol-bg--mesh::before { content: ''; position: absolute; width: 60vw; height: 60vw; left: -15vw; top: -15vw; border-radius: 50%; background: radial-gradient(circle, rgba(192,18,39,0.22) 0%, transparent 70%); }
|
||
#sol-root .sol-bg--redglow { background: #121212; }
|
||
#sol-root .sol-bg--redglow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(65% 60% at 50% 12%, rgba(226,53,74,0.32) 0%, transparent 70%); }
|
||
#sol-root .sol-bg--engine { background: radial-gradient(46% 40% at 50% 40%, rgba(226,53,74,0.16) 0%, transparent 72%), #121212; }
|
||
|
||
/* Shared animated network backdrop (EVSection .evnd__map treatment) */
|
||
#sol-root .sol-map { position: absolute; inset: 0; z-index: 0; opacity: 0.4; pointer-events: none; overflow: hidden; }
|
||
#sol-root .sol-map canvas { display: block; width: 100%; height: 100%; }
|
||
|
||
/* WHITE CARD BACKGROUND (sol-bg--white & sol-bg--white-red) */
|
||
#sol-root .sol-bg--white { background: #ffffff; box-shadow: 0 12px 36px -20px rgba(0,0,0,0.07); }
|
||
#sol-root .sol-bg--white-red {
|
||
background: radial-gradient(75% 60% at 50% 0%, rgba(226, 53, 74, 0.08) 0%, rgba(255, 255, 255, 0.98) 70%), linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
|
||
box-shadow: 0 12px 36px -20px rgba(192, 18, 39, 0.07);
|
||
border: 1px solid rgba(226, 53, 74, 0.14);
|
||
}
|
||
#sol-root .sol-sec--white .sol-eyebrow { color: var(--sol-red) !important; }
|
||
#sol-root .sol-sec--white .sol-eyebrow b { background: var(--sol-red); color: #fff !important; }
|
||
#sol-root .sol-sec--white .sol-eyebrow--slash { color: var(--sol-red) !important; font-weight: 700 !important; }
|
||
#sol-root .sol-sec--white .sol-h { color: #111827 !important; }
|
||
#sol-root .sol-sec--white .sol-h .accent { color: var(--sol-red) !important; }
|
||
#sol-root .sol-sec--white .sol-lede { color: #374151 !important; }
|
||
#sol-root .sol-sec--white .sol-sub { color: #4b5563 !important; }
|
||
#sol-root .sol-sec--white .sol-insight { border-color: rgba(226, 53, 74, 0.25); border-left: 3px solid var(--sol-red); background: #fff5f5; }
|
||
#sol-root .sol-sec--white .sol-insight-txt { color: #374151; }
|
||
#sol-root .sol-sec--white .sol-insight-txt b { color: #111827; }
|
||
#sol-root .sol-sec--white .sol-insight-lbl { color: var(--sol-red); }
|
||
|
||
/* ---- 2nd Image Type Header (sol-qhead) ---- */
|
||
#sol-root .sol-qhead {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
margin-bottom: clamp(28px, 3.5vw, 44px);
|
||
width: 100%;
|
||
}
|
||
#sol-root .sol-qhead-kicker {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
}
|
||
#sol-root .sol-qhead-eyebrow {
|
||
font-size: 13.5px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
color: #6b7280;
|
||
margin-bottom: 12px;
|
||
text-transform: uppercase;
|
||
}
|
||
#sol-root .sol-qhead-divider {
|
||
width: 100%;
|
||
height: 1px;
|
||
border: none;
|
||
background-color: rgba(0, 0, 0, 0.12);
|
||
margin: 0 0 16px 0;
|
||
}
|
||
#sol-root .sol-qhead-stroke-title {
|
||
margin: 0 0 16px 0;
|
||
font-weight: 900;
|
||
letter-spacing: -0.02em !important;
|
||
line-height: 1.05;
|
||
color: #ffffff !important;
|
||
-webkit-text-stroke: 2.5px #dc2626;
|
||
font-size: clamp(52px, 7.8vw, 108px);
|
||
text-transform: none;
|
||
}
|
||
#sol-root .sol-qhead-split {
|
||
display: grid;
|
||
grid-template-columns: 1.15fr 1fr;
|
||
gap: clamp(28px, 4.5vw, 56px);
|
||
align-items: flex-start;
|
||
margin-top: 4px;
|
||
}
|
||
#sol-root .sol-qhead-h2 {
|
||
font-size: clamp(30px, 3.6vw, 48px);
|
||
font-weight: 850;
|
||
line-height: 1.25;
|
||
letter-spacing: -0.02em;
|
||
color: #111827;
|
||
margin: 0;
|
||
text-transform: none !important;
|
||
}
|
||
#sol-root .sol-qhead-desc {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
#sol-root .sol-qhead-desc p {
|
||
font-size: 16px;
|
||
line-height: 1.72;
|
||
color: #374151;
|
||
margin: 0;
|
||
font-weight: 450;
|
||
}
|
||
@media (max-width: 900px) {
|
||
#sol-root .sol-qhead-split {
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
}
|
||
|
||
#sol-root .sol-sec--white .sol-off-card {
|
||
background: #ffffff;
|
||
border: 1px solid rgba(226, 53, 74, 0.16);
|
||
box-shadow: 0 10px 30px -10px rgba(192, 18, 39, 0.07), 0 4px 14px rgba(0, 0, 0, 0.03);
|
||
}
|
||
#sol-root .sol-sec--white .sol-off-card:hover {
|
||
border-color: var(--sol-red);
|
||
box-shadow: 0 20px 45px -10px rgba(226, 53, 74, 0.2);
|
||
}
|
||
#sol-root .sol-sec--white .sol-off-lbl { color: var(--sol-red); font-weight: 800; }
|
||
#sol-root .sol-sec--white .sol-off-name { color: #111827; }
|
||
#sol-root .sol-sec--white .sol-off-desc { color: #4b5563; }
|
||
#sol-root .sol-sec--white .sol-off-note { color: #6b7280; border-top: 1px solid rgba(226, 53, 74, 0.14); }
|
||
#sol-root .sol-sec--white .sol-off-link {
|
||
background: #fff5f5;
|
||
border: 1px solid rgba(226, 53, 74, 0.25);
|
||
color: var(--sol-red);
|
||
}
|
||
#sol-root .sol-sec--white .sol-off-link:hover {
|
||
background: var(--sol-red);
|
||
border-color: var(--sol-red);
|
||
color: #ffffff;
|
||
}
|
||
#sol-root .sol-sec--white .sol-ticker { border-color: rgba(226, 53, 74, 0.18) !important; }
|
||
#sol-root .sol-sec--white .sol-ticker-item { color: #374151 !important; font-weight: 700 !important; }
|
||
#sol-root .sol-sec--white .sol-ticker-dot { background: var(--sol-red) !important; }
|
||
#sol-root .sol-sec--white .sol-media-frame,
|
||
#sol-root .sol-sec--white-red .sol-media-frame {
|
||
border-color: rgba(226, 53, 74, 0.16) !important;
|
||
box-shadow: 0 12px 32px -12px rgba(192, 18, 39, 0.10), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
|
||
}
|
||
|
||
#sol-root .sol-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 820px; }
|
||
#sol-root .sol-head--center { max-width: 860px; margin-left: auto; margin-right: auto; text-align: center; }
|
||
#sol-root .sol-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--sol-red-bright) !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12.5px; margin-bottom: 18px; }
|
||
#sol-root .sol-eyebrow b { color: #fff !important; background: var(--sol-red); border-radius: 6px; padding: 2px 7px; font-size: 11.5px; }
|
||
#sol-root .sol-eyebrow--slash {
|
||
color: #6b7280 !important;
|
||
font-weight: 500 !important;
|
||
font-size: 13.5px !important;
|
||
letter-spacing: 0.06em !important;
|
||
background: none !important;
|
||
padding: 0 !important;
|
||
}
|
||
#sol-root .sol-sec--white .sol-eyebrow--slash {
|
||
color: #6b7280 !important;
|
||
}
|
||
#sol-root .sol-h { color: #fff !important; font-weight: 800 !important; font-size: clamp(30px, 4vw, 50px) !important; line-height: 1.14 !important; letter-spacing: -0.02em; margin: 0 0 16px !important; }
|
||
#sol-root .sol-h .accent { color: var(--sol-red-bright) !important; }
|
||
#sol-root .sol-lede { color: var(--sol-text-dim) !important; font-size: clamp(15px, 1.1vw, 18px) !important; line-height: 1.65 !important; margin: 0 !important; }
|
||
#sol-root .sol-sub { color: rgba(255,255,255,0.45) !important; font-size: clamp(13.5px, 0.95vw, 15.5px) !important; line-height: 1.7 !important; margin: 14px 0 0 !important; }
|
||
#sol-root .sol-head--center .sol-sub { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
|
||
#sol-root .sol-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--sol-red-bright); box-shadow: 0 0 0 0 rgba(226,53,74,0.55); animation: solPulse 1.8s infinite; display: inline-block; flex: none; }
|
||
@keyframes solPulse { 0% { box-shadow: 0 0 0 0 rgba(226,53,74,0.55); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
|
||
|
||
/* ---- Shared primitives ---- */
|
||
#sol-root .sol-chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
|
||
#sol-root .sol-chiprow--center { justify-content: center; }
|
||
#sol-root .sol-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; }
|
||
#sol-root .sol-chiprow--light .sol-chip { background: #f3f4f6; border-color: #e5e7eb; color: #4b5563; }
|
||
|
||
#sol-root .sol-insight { display: flex; flex-direction: column; gap: 8px; margin: 32px 0 0; padding: 20px 22px; border-left: 3px solid var(--sol-red-bright); border-radius: 0 16px 16px 0; background: rgba(255,255,255,0.03); }
|
||
#sol-root .sol-insight-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sol-red-bright); }
|
||
#sol-root .sol-insight-txt { margin: 0; color: var(--sol-text-dim); font-size: 14.5px; line-height: 1.7; max-width: 760px; }
|
||
#sol-root .sol-insight-txt b { color: #fff; font-weight: 800; }
|
||
|
||
#sol-root .sol-minilist { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
|
||
#sol-root .sol-mini { display: flex; gap: 12px; align-items: flex-start; }
|
||
#sol-root .sol-mini-rule { width: 2px; align-self: stretch; min-height: 34px; border-radius: 2px; background: linear-gradient(180deg, var(--sol-red-bright), rgba(226,53,74,0)); flex: none; }
|
||
#sol-root .sol-mini b { display: block; color: #fff; font-size: 14px; font-weight: 750; margin-bottom: 3px; }
|
||
#sol-root .sol-mini span { display: block; color: var(--sol-text-dim); font-size: 13px; line-height: 1.55; }
|
||
#sol-root .sol-minilist--light .sol-mini b { color: #111827; }
|
||
#sol-root .sol-minilist--light .sol-mini span { color: #4b5563; }
|
||
#sol-root .sol-minilist--light .sol-mini-rule { background: linear-gradient(180deg, var(--sol-red), rgba(192,18,39,0)); }
|
||
|
||
#sol-root .sol-kpis { border: 1px solid var(--sol-line); border-radius: 18px; background: rgba(255,255,255,0.03); overflow: hidden; }
|
||
#sol-root .sol-kpis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--sol-line); }
|
||
#sol-root .sol-kpis-live { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; font-weight: 700; }
|
||
#sol-root .sol-kpis-sys { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: rgba(255,255,255,0.35); }
|
||
#sol-root .sol-kpis-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
|
||
#sol-root .sol-kpi { padding: 16px; border-right: 1px solid var(--sol-line); display: flex; flex-direction: column; gap: 4px; }
|
||
#sol-root .sol-kpi:last-child { border-right: 0; }
|
||
#sol-root .sol-kpi-val { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
|
||
#sol-root .sol-kpi-lbl { color: rgba(255,255,255,0.45); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
|
||
|
||
#sol-root .sol-bar { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,0.02); border: 1px solid var(--sol-line); border-radius: 16px; overflow: hidden; margin-top: 28px; }
|
||
#sol-root .sol-bar-item { padding: 18px 20px; border-right: 1px solid var(--sol-line); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; }
|
||
#sol-root .sol-bar-item:last-child { border-right: 0; }
|
||
#sol-root .sol-bar-lbl { color: rgba(255,255,255,0.42); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: flex-end; justify-content: center; min-height: 28px; text-align: center; }
|
||
#sol-root .sol-bar-val { color: #fff; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.01em; margin-top: 6px; display: flex; align-items: flex-start; justify-content: center; text-align: center; }
|
||
|
||
#sol-root .sol-media { position: relative; }
|
||
#sol-root .sol-media-glow { position: absolute; inset: -12% -8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(226,53,74,0.28), transparent 68%); filter: blur(18px); z-index: 0; pointer-events: none; }
|
||
#sol-root .sol-media-frame { position: relative; z-index: 1; border-radius: 25px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
|
||
#sol-root .sol-media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 11; }
|
||
#sol-root .sol-media--light .sol-media-frame { border-color: #e5e7eb; box-shadow: 0 24px 60px -24px rgba(17,24,39,0.35); }
|
||
#sol-root .sol-media--light .sol-media-glow { background: radial-gradient(circle, rgba(192,18,39,0.16), transparent 68%); }
|
||
#sol-root .sol-media-badge { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(12,12,12,0.82); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.14); }
|
||
#sol-root .sol-media-badge b { color: #fff; font-size: 18px; font-weight: 800; line-height: 1; }
|
||
#sol-root .sol-media-badge span { color: rgba(255,255,255,0.55); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
|
||
#sol-root .sol-media-badge--tl { left: 14px; top: 14px; }
|
||
#sol-root .sol-media-badge--br { right: 14px; bottom: 14px; }
|
||
|
||
#sol-root .sol-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; max-width: 252px; padding: 11px 15px; border-radius: 16px; background: rgba(16,16,16,0.88); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.13); box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
|
||
#sol-root .sol-float b { display: block; color: #fff; font-size: 13.5px; font-weight: 750; line-height: 1.3; }
|
||
#sol-root .sol-float span { display: block; color: rgba(255,255,255,0.5); font-size: 11px; line-height: 1.4; margin-top: 2px; }
|
||
#sol-root .sol-float-ic { color: var(--sol-red-bright); flex: none; }
|
||
#sol-root .sol-float-ic svg { width: 20px; height: 20px; }
|
||
#sol-root .sol-float--tl { left: 14px; top: 54px; }
|
||
#sol-root .sol-float--tr { right: 14px; top: 116px; }
|
||
#sol-root .sol-float--bl { left: 14px; bottom: -22px; }
|
||
#sol-root .sol-float--br { right: 14px; bottom: -22px; }
|
||
|
||
#sol-root .sol-ticker { position: relative; margin-top: 44px; padding: 18px 0; overflow: hidden; border-top: 1px solid var(--sol-line); border-bottom: 1px solid var(--sol-line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
|
||
#sol-root .logico-ticker-wrapper { overflow: hidden; position: relative; width: 100%; }
|
||
#sol-root .marquee-container-css { display: flex; width: max-content; animation: cssMarquee 25s linear infinite; }
|
||
#sol-root .marquee-container-css:hover { animation-play-state: paused; }
|
||
@keyframes cssMarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-33.3333%, 0, 0); } }
|
||
#sol-root .sol-ticker .ticker { display: inline-flex; align-items: center; white-space: nowrap; padding-right: 50px; }
|
||
#sol-root .sol-ticker .ticker-text { font-family: var(--font-manrope), "Manrope", sans-serif; font-size: clamp(22px, 3vw, 36px); font-weight: 700; line-height: 1.25em; letter-spacing: -0.02em; color: #ffffff; display: inline-block; vertical-align: middle; }
|
||
#sol-root .sol-ticker .separator { display: inline-flex; align-items: center; margin-left: 25px; font-size: clamp(18px, 2.2vw, 28px); color: var(--sol-red-bright); }
|
||
#sol-root .sol-ticker--light { border-color: rgba(226, 53, 74, 0.18) !important; }
|
||
#sol-root .sol-sec--white .sol-ticker { border-color: rgba(226, 53, 74, 0.18) !important; }
|
||
#sol-root .sol-ticker--light .ticker-text, #sol-root .sol-sec--white .ticker-text { color: #111827 !important; }
|
||
#sol-root .sol-ticker--light .separator, #sol-root .sol-sec--white .separator { color: var(--sol-red) !important; }
|
||
|
||
#sol-root .sol-linkbtn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; transition: background 0.25s, border-color 0.25s, transform 0.25s; }
|
||
#sol-root .sol-linkbtn:hover { background: rgba(226,53,74,0.16); border-color: var(--sol-red-bright); transform: translateY(-2px); }
|
||
#sol-root .sol-linkbtn svg { width: 9px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
|
||
|
||
/* Vertical connector between the pain story and the hub */
|
||
#sol-root .sol-connector { height: 88px; display: flex; justify-content: center; }
|
||
#sol-root .sol-connector svg { width: 40px; height: 88px; overflow: visible; }
|
||
#sol-root .sol-connector-line { stroke: rgba(226,53,74,0.35); stroke-width: 1.5; stroke-dasharray: 5 6; fill: none; }
|
||
#sol-root .sol-connector-dot { fill: var(--sol-red-bright); animation: solDrop 2.4s ease-in-out infinite; }
|
||
@keyframes solDrop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(88px); opacity: 0; } }
|
||
|
||
/* ============================================================
|
||
SECTION 01 — PAIN HOOK & HUB
|
||
============================================================ */
|
||
#sol-root .sol-s01-pain-banner { margin-bottom: 34px; text-align: center; }
|
||
#sol-root .sol-s01-pain-banner .sol-lede,
|
||
#sol-root .sol-s01-pain-banner .sol-sub { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
|
||
#sol-root .sol-s01-pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
||
#sol-root .sol-s01-pain-card { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 18px; border-radius: 18px; text-align: left; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.3s, transform 0.3s, background 0.3s; }
|
||
#sol-root .sol-s01-pain-card:hover { border-color: rgba(226,53,74,0.4); background: rgba(226,53,74,0.06); transform: translateY(-3px); }
|
||
#sol-root .sol-s01-pain-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
|
||
#sol-root .sol-s01-pain-time { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--sol-red-bright); background: rgba(226,53,74,0.14); border-radius: 999px; padding: 3px 9px; }
|
||
#sol-root .sol-s01-pain-ic { color: rgba(255,255,255,0.55); }
|
||
#sol-root .sol-s01-pain-ic svg { width: 20px; height: 20px; }
|
||
#sol-root .sol-s01-pain-card b { color: #fff; font-size: 14.5px; }
|
||
#sol-root .sol-s01-pain-quote { color: var(--sol-text-dim); font-size: 12.5px; line-height: 1.5; }
|
||
#sol-root .sol-s01-pain-cost { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.4); font-size: 11.5px; line-height: 1.45; }
|
||
|
||
#sol-root .sol-s01-pivot { text-align: center; margin-top: 40px; padding: 26px 22px; border-radius: 20px; background: rgba(226,53,74,0.1); border: 1px solid rgba(226,53,74,0.25); }
|
||
#sol-root .sol-s01-pivot-h3 { color: var(--sol-red-bright); font-size: clamp(16px, 1.8vw, 22px); font-weight: 800; letter-spacing: 0.04em; margin: 0; }
|
||
#sol-root .sol-s01-pivot-p { color: var(--sol-text-dim); font-size: 14px; line-height: 1.65; margin: 12px auto 0; max-width: 660px; }
|
||
|
||
#sol-root .sol-s01-split { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.25fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
|
||
#sol-root .sol-s01-pills { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
|
||
#sol-root .sol-s01-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 13px; font-weight: 600; }
|
||
#sol-root .sol-s01-stage-wrap { position: relative; width: 100%; max-width: 540px; margin: 0 auto; }
|
||
#sol-root .sol-s01-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; margin-bottom: 12px; border-radius: 14px; border: 1px solid var(--sol-line); background: rgba(255,255,255,0.03); }
|
||
#sol-root .sol-s01-status-l { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; }
|
||
#sol-root .sol-s01-status-r { color: rgba(255,255,255,0.4); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; }
|
||
#sol-root .sol-s01-stage { position: relative; aspect-ratio: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
|
||
#sol-root .sol-s01-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||
#sol-root .sol-s01-orbit { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 1; }
|
||
#sol-root .sol-s01-orbit--in { stroke: rgba(226,53,74,0.14); stroke-dasharray: 2 8; }
|
||
#sol-root .sol-s01-line { stroke: rgba(226,53,74,0.25); stroke-width: 1; stroke-dasharray: 4 4; transition: stroke 0.3s; }
|
||
#sol-root .sol-s01-line.is-active { stroke: var(--sol-red-bright); stroke-width: 2; }
|
||
#sol-root .sol-s01-particle { fill: var(--sol-red-bright); animation: solParticle 3s infinite linear; }
|
||
@keyframes solParticle { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
|
||
#sol-root .sol-s01-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(226,53,74,0.2), rgba(18,18,18,0.95)); border: 1.5px solid rgba(226,53,74,0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
|
||
#sol-root .sol-s01-hub-logo { width: 32px; height: 32px; object-fit: contain; }
|
||
#sol-root .sol-s01-hub-label { color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-top: 4px; }
|
||
#sol-root .sol-s01-hub-pulse { position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid rgba(226,53,74,0.3); animation: solHubPulse 3s infinite; }
|
||
@keyframes solHubPulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
|
||
#sol-root .sol-s01-node { position: absolute; transform: translate(-50%, -50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: transform 0.3s; background: none; border: 0; padding: 0; font: inherit; }
|
||
#sol-root .sol-s01-node.is-active, #sol-root .sol-s01-node:hover { transform: translate(-50%, -50%) scale(1.1); }
|
||
#sol-root .sol-s01-node:focus-visible { outline: 2px solid var(--sol-red-bright); outline-offset: 6px; border-radius: 14px; }
|
||
#sol-root .sol-s01-node-ic { width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--sol-red-bright); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
|
||
#sol-root .sol-s01-node.is-active .sol-s01-node-ic { border-color: var(--sol-red-bright); background: rgba(226,53,74,0.15); box-shadow: 0 0 20px rgba(226,53,74,0.4); }
|
||
#sol-root .sol-s01-node-label { color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
|
||
#sol-root .sol-s01-node-metric { color: rgba(255,255,255,0.5); font-size: 10px; font-weight: 600; white-space: nowrap; }
|
||
|
||
#sol-root .sol-s01-floats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
|
||
#sol-root .sol-s01-float { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--sol-line); background: rgba(255,255,255,0.03); transition: border-color 0.4s, background 0.4s, transform 0.4s; }
|
||
#sol-root .sol-s01-float.is-live { border-color: rgba(226,53,74,0.45); background: rgba(226,53,74,0.09); transform: translateY(-3px); }
|
||
#sol-root .sol-s01-float-ic { color: rgba(255,255,255,0.5); flex: none; }
|
||
#sol-root .sol-s01-float-ic svg { width: 18px; height: 18px; }
|
||
#sol-root .sol-s01-float.is-live .sol-s01-float-ic { color: var(--sol-red-bright); }
|
||
#sol-root .sol-s01-float b { display: block; color: #fff; font-size: 12px; font-weight: 750; line-height: 1.3; }
|
||
#sol-root .sol-s01-float span { display: block; color: rgba(255,255,255,0.45); font-size: 10.5px; line-height: 1.4; margin-top: 3px; }
|
||
#sol-root .sol-s01-float-dot { position: absolute; right: 12px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.15); }
|
||
#sol-root .sol-s01-float.is-live .sol-s01-float-dot { background: var(--sol-red-bright); box-shadow: 0 0 0 4px rgba(226,53,74,0.18); }
|
||
|
||
/* ============================================================
|
||
SECTION 02 — BEFORE & AFTER
|
||
============================================================ */
|
||
#sol-root .sol-s02-wrap { display: flex; flex-direction: column; gap: 24px; align-items: center; }
|
||
#sol-root .sol-s02-toggle-bar { display: flex; background: #e5e7eb; padding: 4px; border-radius: 999px; gap: 4px; flex-wrap: wrap; justify-content: center; }
|
||
#sol-root .sol-s02-tgl-btn { padding: 10px 24px; border-radius: 999px; border: none; font-size: 13px; font-weight: 700; cursor: pointer; color: #4b5563; background: transparent; transition: all 0.3s; }
|
||
#sol-root .sol-s02-tgl-btn.is-active-old { background: #dc2626; color: #fff; box-shadow: 0 4px 12px rgba(220,38,38,0.3); }
|
||
#sol-root .sol-s02-tgl-btn.is-active-dm { background: #111827; color: #fff; box-shadow: 0 4px 12px rgba(17,24,39,0.3); }
|
||
#sol-root .sol-s02-stage-box { width: 100%; max-width: 1040px; }
|
||
#sol-root .sol-s02-view { animation: solFadeUp 0.5s ease-out both; }
|
||
@keyframes solFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
|
||
#sol-root .sol-s02-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
|
||
|
||
/* Shared card skeleton. Every row is a fixed-height band so the three titles,
|
||
the three body blocks and the three outcome lines sit on the same baselines
|
||
across the row — and across both tabs. */
|
||
#sol-root .sol-s02-card { position: relative; isolation: isolate; overflow: hidden; padding: 26px 24px 22px; border-radius: 22px; display: flex; flex-direction: column; animation: solFadeUp 0.55s cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(var(--i, 0) * 90ms); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), border-color 0.45s, box-shadow 0.45s; }
|
||
#sol-root .sol-s02-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 2; opacity: 0.75; transition: opacity 0.45s; }
|
||
#sol-root .sol-s02-card::after { content: ""; position: absolute; z-index: -1; top: -55%; right: -30%; width: 74%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
|
||
#sol-root .sol-s02-card:hover { transform: translateY(-5px); }
|
||
#sol-root .sol-s02-card:hover::after { opacity: 1; }
|
||
#sol-root .sol-s02-card:hover::before { opacity: 1; }
|
||
|
||
#sol-root .sol-s02-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin-bottom: 18px; }
|
||
#sol-root .sol-s02-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.45s, color 0.45s, border-color 0.45s; }
|
||
#sol-root .sol-s02-ic svg { width: 20px; height: 20px; }
|
||
#sol-root .sol-s02-stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; min-width: 0; }
|
||
#sol-root .sol-s02-stat b { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
|
||
#sol-root .sol-s02-stat i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }
|
||
#sol-root .sol-s02-card h3 { font-size: 16.5px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; text-transform: none; margin: 0 0 10px; }
|
||
#sol-root .sol-s02-card p { font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
|
||
#sol-root .sol-s02-foot { display: block; margin-top: auto; padding-top: 15px; font-size: 12px; line-height: 1.55; font-weight: 600; }
|
||
#sol-root .sol-s02-foot b { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; opacity: 0.75; }
|
||
|
||
/* Traditional — paper-red, deliberately flatter and heavier than the DoorMile card. */
|
||
#sol-root .sol-s02-card--old { background: linear-gradient(168deg, #fff5f5 0%, #fef2f2 55%, #fee9e9 100%); border: 1px solid #f6cfd0; box-shadow: 0 1px 2px rgba(153,27,27,0.04); }
|
||
#sol-root .sol-s02-card--old::before { background: linear-gradient(90deg, #dc2626, rgba(220,38,38,0)); }
|
||
#sol-root .sol-s02-card--old::after { background: radial-gradient(circle, rgba(220,38,38,0.1), transparent 68%); }
|
||
#sol-root .sol-s02-card--old:hover { border-color: #eeb4b6; box-shadow: 0 8px 20px -8px rgba(153,27,27,0.25); }
|
||
#sol-root .sol-s02-card--old .sol-s02-ic { background: #fee2e2; border: 1px solid #f8c9ca; color: #dc2626; }
|
||
#sol-root .sol-s02-card--old .sol-s02-stat b { color: #b91c1c; }
|
||
#sol-root .sol-s02-card--old .sol-s02-stat i { color: rgba(153,27,27,0.6); }
|
||
#sol-root .sol-s02-card--old h3 { color: #7f1d1d; }
|
||
#sol-root .sol-s02-card--old p { color: #8b3a3a; }
|
||
#sol-root .sol-s02-card--old .sol-s02-foot { color: #a03436; border-top: 1px solid #f6cfd0; }
|
||
#sol-root .sol-s02-card--old .sol-s02-foot b { color: #b91c1c; }
|
||
|
||
/* DoorMile — deep navy with a green control accent. */
|
||
#sol-root .sol-s02-card--dm { background: linear-gradient(168deg, #18233a 0%, #111a2b 52%, #0d1421 100%); border: 1px solid #253148; color: #fff; box-shadow: 0 1px 2px rgba(8,12,20,0.4); }
|
||
#sol-root .sol-s02-card--dm::before { background: linear-gradient(90deg, #34d399, rgba(52,211,153,0)); }
|
||
#sol-root .sol-s02-card--dm::after { background: radial-gradient(circle, rgba(52,211,153,0.16), transparent 68%); }
|
||
#sol-root .sol-s02-card--dm:hover { border-color: rgba(52,211,153,0.4); box-shadow: 0 8px 22px -8px rgba(8,14,26,0.5), 0 0 16px rgba(52,211,153,0.15); }
|
||
#sol-root .sol-s02-card--dm .sol-s02-ic { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.26); color: #34d399; }
|
||
#sol-root .sol-s02-card--dm:hover .sol-s02-ic { background: rgba(52,211,153,0.2); border-color: rgba(52,211,153,0.5); }
|
||
#sol-root .sol-s02-card--dm .sol-s02-stat b { color: #fff; }
|
||
#sol-root .sol-s02-card--dm .sol-s02-stat i { color: rgba(255,255,255,0.42); }
|
||
#sol-root .sol-s02-card--dm h3 { color: #fff; }
|
||
#sol-root .sol-s02-card--dm p { color: #97a3b6; }
|
||
#sol-root .sol-s02-card--dm .sol-s02-foot { color: #a7f3d0; border-top: 1px solid rgba(255,255,255,0.09); }
|
||
#sol-root .sol-s02-card--dm .sol-s02-foot b { color: #34d399; }
|
||
|
||
#sol-root .sol-s02-ledger { margin-top: 20px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid #fecaca; }
|
||
#sol-root .sol-s02-ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
|
||
#sol-root .sol-s02-ledger-head b { color: #111827; font-size: 15px; font-weight: 800; }
|
||
#sol-root .sol-s02-ledger-head span { color: #9ca3af; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
|
||
#sol-root .sol-s02-ledger-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
|
||
#sol-root .sol-s02-ledger-list li { display: flex; align-items: center; gap: 12px; font-size: 13px; }
|
||
#sol-root .sol-s02-ledger-list li span { color: #4b5563; }
|
||
#sol-root .sol-s02-ledger-list li i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #e5e7eb 0 4px, transparent 4px 8px); }
|
||
#sol-root .sol-s02-ledger-list li b { color: #991b1b; font-weight: 800; white-space: nowrap; }
|
||
|
||
/* One panel, photo bled to the edge of its half — no gap, no double frame. */
|
||
#sol-root .sol-s02-media-row { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 0; align-items: stretch; margin-top: 28px; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #e6e9ee; box-shadow: 0 16px 40px -20px rgba(17,24,39,0.18); }
|
||
#sol-root .sol-s02-media-panel { height: 100%; }
|
||
#sol-root .sol-s02-media-panel .sol-media-glow { display: none; }
|
||
/* !important here answers the .sol-sec--white .sol-media-frame override
|
||
above — inside this panel the frame is a flush cell, not a floating card. */
|
||
#sol-root .sol-s02-media-panel .sol-media-frame { height: 100%; min-height: 420px; border: 0; border-right: 1px solid #e6e9ee !important; border-radius: 0; box-shadow: none !important; }
|
||
/* Absolute so the photo contributes no intrinsic height — the panel is sized by
|
||
the copy column and the image crops to fill whatever that comes out to. */
|
||
#sol-root .sol-s02-media-panel .sol-media-frame img { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; }
|
||
#sol-root .sol-s02-media-panel .sol-media-badge { border-radius: 12px; padding: 9px 13px; background: rgba(11,16,26,0.72); border-color: rgba(255,255,255,0.16); }
|
||
#sol-root .sol-s02-media-panel .sol-media-badge--tl { left: 16px; top: 16px; }
|
||
#sol-root .sol-s02-media-panel .sol-media-badge--br { right: 16px; bottom: 16px; }
|
||
|
||
#sol-root .sol-s02-media-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3.2vw, 40px); }
|
||
#sol-root .sol-s02-eyeb { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 13px; border-radius: 999px; background: rgba(192,18,39,0.07); border: 1px solid rgba(192,18,39,0.16); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sol-red); margin-bottom: 14px; }
|
||
#sol-root .sol-s02-eyeb i { width: 5px; height: 5px; border-radius: 50%; background: var(--sol-red); flex: none; }
|
||
#sol-root .sol-s02-media-copy h4 { color: #111827; font-size: clamp(20px, 2vw, 27px); font-weight: 800; margin: 0; letter-spacing: -0.015em; line-height: 1.22; max-width: 16ch; }
|
||
/* Numbered steps read as a sequence; the old hairline rules read as leftovers. */
|
||
#sol-root .sol-s02-media-copy .sol-minilist { margin-top: 22px; gap: 0; counter-reset: s02step; }
|
||
#sol-root .sol-s02-media-copy .sol-mini { align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid #eef0f4; }
|
||
#sol-root .sol-s02-media-copy .sol-mini:first-child { border-top: 0; padding-top: 4px; }
|
||
#sol-root .sol-s02-media-copy .sol-mini:last-child { padding-bottom: 0; }
|
||
#sol-root .sol-s02-media-copy .sol-mini-rule { counter-increment: s02step; width: 26px; height: 26px; min-height: 0; align-self: flex-start; margin-top: 1px; border-radius: 9px; background: rgba(192,18,39,0.08); border: 1px solid rgba(192,18,39,0.16); display: flex; align-items: center; justify-content: center; }
|
||
#sol-root .sol-s02-media-copy .sol-mini-rule::before { content: counter(s02step, decimal-leading-zero); color: var(--sol-red); font-size: 10px; font-weight: 800; letter-spacing: 0.02em; }
|
||
#sol-root .sol-s02-media-copy .sol-mini b { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
|
||
|
||
#sol-root .sol-s02-compare { width: 100%; max-width: 1040px; padding: 24px 26px; border-radius: 20px; background: #f9fafb; border: 1px solid #e5e7eb; }
|
||
#sol-root .sol-s02-compare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
|
||
#sol-root .sol-s02-compare-head b { color: #111827; font-size: 15px; font-weight: 800; }
|
||
#sol-root .sol-s02-compare-head span { color: #9ca3af; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
|
||
/* The label column used to be 0.7fr — ~500px for a 200px label — and the bars
|
||
were flex, so a short bar left the rest of the row blank. Now the label
|
||
column is only as wide as it needs, each bar sits in a full-width rail, and
|
||
the readouts line up in their own right-hand column. Nothing is loose. */
|
||
#sol-root .sol-s02-cmp-row { display: grid; grid-template-columns: minmax(140px, 0.33fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid #eceef1; }
|
||
#sol-root .sol-s02-cmp-lbl { color: #374151; font-size: 13px; font-weight: 700; line-height: 1.4; }
|
||
#sol-root .sol-s02-cmp-bars { display: flex; flex-direction: column; gap: 10px; }
|
||
#sol-root .sol-s02-cmp-line { display: grid; grid-template-columns: 76px minmax(0, 1fr) 132px; align-items: center; gap: 14px; }
|
||
#sol-root .sol-s02-cmp-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: #9ca3af; white-space: nowrap; }
|
||
#sol-root .sol-s02-cmp-tag--dm { color: var(--sol-red); }
|
||
#sol-root .sol-s02-cmp-track { position: relative; display: block; height: 9px; border-radius: 6px; background: #ebeef2; overflow: hidden; }
|
||
#sol-root .sol-s02-cmp-bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; display: block; transform-origin: left center; animation: solGrow 0.9s cubic-bezier(0.16,1,0.3,1) both; }
|
||
#sol-root .sol-s02-cmp-bar--old { background: #f7a9a9; }
|
||
#sol-root .sol-s02-cmp-bar--dm { background: linear-gradient(90deg, var(--sol-red), var(--sol-red-bright)); }
|
||
#sol-root .sol-s02-cmp-line em { font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #6b7280; white-space: nowrap; text-align: right; }
|
||
#sol-root .sol-s02-cmp-line:last-child em { color: #111827; font-weight: 800; }
|
||
@keyframes solGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
|
||
|
||
/* ============================================================
|
||
SECTION 03 — JOURNEY
|
||
============================================================ */
|
||
#sol-root .sol-s03-journey { display: flex; flex-direction: column; gap: 26px; }
|
||
#sol-root .sol-s03-railwrap { position: relative; }
|
||
#sol-root .sol-s03-rail { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
|
||
#sol-root .sol-s03-rail-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sol-red), var(--sol-red-bright)); transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
|
||
#sol-root .sol-s03-scrubber { display: flex; justify-content: space-between; gap: 8px; overflow-x: auto; padding: 18px 0 8px; scrollbar-width: thin; }
|
||
#sol-root .sol-s03-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); cursor: pointer; flex: 1; min-width: 120px; transition: all 0.3s; }
|
||
#sol-root .sol-s03-step.is-active { background: rgba(255,255,255,0.08); border-color: var(--sol-red-bright); color: #fff; box-shadow: 0 10px 25px rgba(192,18,39,0.3); }
|
||
#sol-root .sol-s03-step:focus-visible { outline: 2px solid var(--sol-red-bright); outline-offset: 3px; }
|
||
#sol-root .sol-s03-num { font-size: 10px; font-weight: 800; color: var(--sol-red-bright); }
|
||
#sol-root .sol-s03-ic svg { width: 20px; height: 20px; }
|
||
#sol-root .sol-s03-title { font-size: 12px; font-weight: 700; white-space: nowrap; }
|
||
|
||
#sol-root .sol-s03-canvas { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px; padding: 32px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--sol-line); align-items: center; }
|
||
#sol-root .sol-s03-h3 { color: #fff; font-size: 24px; font-weight: 800; margin: 8px 0 4px; }
|
||
#sol-root .sol-s03-p { color: var(--sol-text-dim); font-size: 14.5px; line-height: 1.6; margin: 0; }
|
||
#sol-root .sol-s03-replaces { margin: 14px 0 0; padding-left: 12px; border-left: 2px solid rgba(226,53,74,0.5); color: rgba(255,255,255,0.42); font-size: 12.5px; line-height: 1.55; font-style: italic; }
|
||
#sol-root .sol-s03-stage { position: relative; }
|
||
#sol-root .sol-s03-art { border-radius: 20px; border: 1px solid var(--sol-line); background: radial-gradient(70% 90% at 50% 20%, rgba(226,53,74,0.1), rgba(255,255,255,0.02)); padding: 14px; animation: solFadeUp 0.5s ease-out both; }
|
||
#sol-root .sol-s03-art-svg { width: 100%; height: auto; display: block; }
|
||
#sol-root .sol-s03-art-svg .sa-panel { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.16); stroke-width: 1; }
|
||
#sol-root .sol-s03-art-svg .sa-solid { fill: rgba(226,53,74,0.22); stroke: var(--sol-red-bright); }
|
||
#sol-root .sol-s03-art-svg .sa-line { fill: rgba(255,255,255,0.22); stroke: none; }
|
||
#sol-root .sol-s03-art-svg .sa-strong { fill: rgba(255,255,255,0.6); }
|
||
#sol-root .sol-s03-art-svg .sa-tag { fill: rgba(226,53,74,0.2); stroke: rgba(226,53,74,0.5); }
|
||
#sol-root .sol-s03-art-svg .sa-txt { fill: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
|
||
#sol-root .sol-s03-art-svg .sa-cap { fill: rgba(255,255,255,0.42); font-size: 8px; font-weight: 800; letter-spacing: 0.1em; }
|
||
#sol-root .sol-s03-art-svg .sa-dot-fill { fill: var(--sol-red-bright); }
|
||
#sol-root .sol-s03-art-svg .sa-plus { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
|
||
#sol-root .sol-s03-art-svg .sa-node { fill: rgba(226,53,74,0.2); stroke: var(--sol-red-bright); stroke-width: 1.4; }
|
||
#sol-root .sol-s03-art-svg .sa-flow { stroke: rgba(255,255,255,0.25); stroke-width: 1.4; stroke-dasharray: 4 4; fill: none; }
|
||
#sol-root .sol-s03-art-svg .sa-alt { stroke: rgba(255,255,255,0.16); stroke-width: 1.2; stroke-dasharray: 4 5; fill: none; }
|
||
#sol-root .sol-s03-art-svg .sa-chosen { stroke: var(--sol-red-bright); stroke-width: 2; fill: none; }
|
||
#sol-root .sol-s03-art-svg .sa-ring { fill: none; stroke: rgba(226,53,74,0.25); stroke-width: 1.2; }
|
||
#sol-root .sol-s03-art-svg .sa-ring--in { stroke: rgba(255,255,255,0.12); stroke-dasharray: 3 6; }
|
||
#sol-root .sol-s03-art-svg .sa-radar { animation: solRadar 3s ease-out infinite; transform-origin: 112px 96px; }
|
||
#sol-root .sol-s03-art-svg .sa-radar--2 { animation-delay: 0.5s; }
|
||
#sol-root .sol-s03-art-svg .sa-radar--3 { animation-delay: 1s; }
|
||
@keyframes solRadar { 0% { opacity: 0.15; transform: scale(0.9); } 50% { opacity: 0.7; } 100% { opacity: 0.15; transform: scale(1.04); } }
|
||
#sol-root .sol-s03-art-svg .sa-road { stroke: rgba(255,255,255,0.14); stroke-width: 3; }
|
||
#sol-root .sol-s03-art-svg .sa-road-dash { stroke: rgba(226,53,74,0.5); stroke-width: 1.4; stroke-dasharray: 10 12; animation: solRoad 1.6s linear infinite; }
|
||
@keyframes solRoad { to { stroke-dashoffset: -22; } }
|
||
#sol-root .sol-s03-art-svg .sa-truck { animation: solTruck 4.5s ease-in-out infinite; }
|
||
@keyframes solTruck { 0% { transform: translateX(20px); } 50% { transform: translateX(190px); } 100% { transform: translateX(20px); } }
|
||
#sol-root .sol-s03-art-svg .sa-wheel { fill: #141414; stroke: rgba(255,255,255,0.4); stroke-width: 1.4; }
|
||
#sol-root .sol-s03-art-svg .sa-bar { fill: rgba(226,53,74,0.55); }
|
||
#sol-root .sol-s03-art-svg .sa-check { stroke: #22c55e; stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
|
||
#sol-root .sol-s03-art-svg .sa-sign { stroke: rgba(255,255,255,0.45); stroke-width: 1.6; fill: none; stroke-linecap: round; }
|
||
|
||
#sol-root .sol-s03-preview-card { position: relative; margin-top: 14px; background: #0a0a0a; border-radius: 18px; border: 1px solid rgba(255,255,255,0.12); padding: 18px 22px; color: #fff; }
|
||
#sol-root .sol-s03-pc-head { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||
#sol-root .sol-s03-pc-body { color: var(--sol-text-dim); font-size: 13px; margin: 0; }
|
||
|
||
#sol-root .sol-s03-log { border: 1px solid var(--sol-line); border-radius: 18px; background: rgba(0,0,0,0.35); overflow: hidden; }
|
||
#sol-root .sol-s03-log-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--sol-line); color: #fff; font-size: 12px; font-weight: 750; }
|
||
#sol-root .sol-s03-log-sys { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: rgba(255,255,255,0.3); }
|
||
#sol-root .sol-s03-log-lines { display: flex; flex-direction: column; padding: 12px 18px 16px; gap: 5px; }
|
||
#sol-root .sol-s03-log-line { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.7; color: rgba(255,255,255,0.2); transition: color 0.4s, opacity 0.4s; }
|
||
#sol-root .sol-s03-log-line b { color: inherit; margin-right: 8px; }
|
||
#sol-root .sol-s03-log-line.is-past { color: rgba(255,255,255,0.38); }
|
||
#sol-root .sol-s03-log-line.is-now { color: #fff; }
|
||
#sol-root .sol-s03-log-line.is-now b { color: var(--sol-red-bright); }
|
||
|
||
/* ============================================================
|
||
SECTION 04 — LIVE VISIBILITY
|
||
============================================================ */
|
||
#sol-root .sol-s04-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.9fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
|
||
#sol-root .sol-s04-console-wrap { position: relative; }
|
||
#sol-root .sol-s04-console { position: relative; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); border: 1px solid var(--sol-line); padding: 24px 24px 56px; margin-bottom: 26px; box-shadow: 0 40px 100px rgba(0,0,0,0.7); }
|
||
#sol-root .sol-s04-map-header { font-size: 12px; color: #fff; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||
#sol-root .sol-s04-regions { display: inline-flex; gap: 6px; margin-left: auto; }
|
||
#sol-root .sol-s04-regions i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
|
||
#sol-root .sol-s04-regions i.is-on { border-color: var(--sol-red-bright); background: rgba(226,53,74,0.14); color: #fff; }
|
||
#sol-root .sol-s04-map-svg { width: 100%; height: 170px; display: block; }
|
||
#sol-root .sol-s04-terrain { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 1.2; }
|
||
#sol-root .sol-s04-route { fill: none; stroke: rgba(226,53,74,0.3); stroke-width: 1.6; stroke-dasharray: 4 3; }
|
||
#sol-root .sol-s04-route--lit { stroke: var(--sol-red-bright); stroke-dasharray: 8 200; animation: solRouteRun 5.2s linear infinite; }
|
||
@keyframes solRouteRun { to { stroke-dashoffset: -208; } }
|
||
#sol-root .sol-s04-pin-ring { fill: rgba(226,53,74,0.14); stroke: rgba(226,53,74,0.5); stroke-width: 1; }
|
||
#sol-root .sol-s04-pin-ring--ok { fill: rgba(34,197,94,0.12); stroke: rgba(34,197,94,0.5); }
|
||
#sol-root .sol-s04-pin-core { fill: var(--sol-red-bright); }
|
||
#sol-root .sol-s04-pin-core--w { fill: #fff; }
|
||
#sol-root .sol-s04-pin-core--ok { fill: #22c55e; }
|
||
#sol-root .sol-s04-pin { animation: solPinPulse 2.6s ease-in-out infinite; transform-origin: center; }
|
||
#sol-root .sol-s04-pin--d2 { animation-delay: 0.7s; }
|
||
#sol-root .sol-s04-pin--d3 { animation-delay: 1.4s; }
|
||
@keyframes solPinPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
|
||
#sol-root .sol-s04-packet { fill: #fff; filter: drop-shadow(0 0 6px rgba(226,53,74,0.9)); }
|
||
|
||
#sol-root .sol-s04-corridors { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sol-line); }
|
||
#sol-root .sol-s04-corr-title { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 10px; }
|
||
#sol-root .sol-s04-corr-row { display: grid; grid-template-columns: 92px 1fr 38px; gap: 10px; align-items: center; padding: 4px 0; }
|
||
#sol-root .sol-s04-corr-row span { color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 600; }
|
||
#sol-root .sol-s04-corr-track { display: block; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
|
||
#sol-root .sol-s04-corr-track b { display: block; height: 100%; border-radius: 4px; background: rgba(255,255,255,0.35); }
|
||
#sol-root .sol-s04-corr-track b.is-hot { background: var(--sol-red-bright); }
|
||
#sol-root .sol-s04-corr-row em { font-style: normal; text-align: right; color: rgba(255,255,255,0.45); font-size: 11px; font-weight: 700; }
|
||
|
||
#sol-root .sol-s04-kpiwrap { margin-top: 26px; }
|
||
#sol-root .sol-s04-kpiwrap .sol-kpi-val { font-size: 19px; }
|
||
#sol-root .sol-s04-kpiwrap .sol-kpi { padding: 13px 14px; }
|
||
#sol-root .sol-s04-list { margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
|
||
#sol-root .sol-s04-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--sol-line); background: rgba(255,255,255,0.025); transition: border-color 0.3s, background 0.3s, transform 0.3s; }
|
||
#sol-root .sol-s04-item:hover { border-color: rgba(226,53,74,0.4); background: rgba(226,53,74,0.06); transform: translateX(3px); }
|
||
#sol-root .sol-s04-item-ic { width: 34px; height: 34px; border-radius: 11px; 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(--sol-red-bright); }
|
||
#sol-root .sol-s04-item-ic svg { width: 17px; height: 17px; }
|
||
#sol-root .sol-s04-item-body b { display: block; color: #fff; font-size: 14px; font-weight: 750; }
|
||
#sol-root .sol-s04-item-body p { margin: 4px 0 0; color: var(--sol-text-dim); font-size: 13px; line-height: 1.55; }
|
||
#sol-root .sol-s04-item-stat { grid-column: 2; margin-top: 8px; align-self: start; justify-self: start; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sol-red-bright); background: rgba(226,53,74,0.12); border-radius: 999px; padding: 4px 10px; }
|
||
|
||
/* ============================================================
|
||
SECTION 05 — MILETRUTH LEARNING
|
||
============================================================ */
|
||
#sol-root .sol-s05-loopstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
|
||
#sol-root .sol-s05-loopstep { position: relative; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--sol-line); background: rgba(255,255,255,0.03); display: flex; flex-direction: column; gap: 6px; }
|
||
#sol-root .sol-s05-loopstep::after { content: ''; position: absolute; right: -8px; top: 50%; width: 16px; height: 1px; background: rgba(226,53,74,0.4); }
|
||
#sol-root .sol-s05-loopstep:last-child::after { display: none; }
|
||
#sol-root .sol-s05-loopnum { position: absolute; right: 18px; top: 16px; font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.18); letter-spacing: 0.1em; }
|
||
#sol-root .sol-s05-loopic { color: var(--sol-red-bright); }
|
||
#sol-root .sol-s05-loopic svg { width: 22px; height: 22px; }
|
||
#sol-root .sol-s05-loopstep b { color: #fff; font-size: 15px; font-weight: 800; }
|
||
#sol-root .sol-s05-loopstep > span:last-child { color: var(--sol-text-dim); font-size: 12.5px; line-height: 1.55; }
|
||
|
||
#sol-root .sol-s05-scenario-grid { display: grid; grid-template-columns: 1fr 132px 1fr; gap: 20px; align-items: stretch; }
|
||
#sol-root .sol-s05-scen-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
|
||
#sol-root .sol-s05-scen-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
|
||
#sol-root .sol-s05-scen-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(245,158,11,0.15); color: #f59e0b; font-size: 11px; font-weight: 700; }
|
||
#sol-root .sol-s05-scen-tag--good { background: rgba(34,197,94,0.15); color: #4ade80; }
|
||
#sol-root .sol-s05-scen-time { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.4); font-size: 11px; font-weight: 700; }
|
||
#sol-root .sol-s05-scen-ic svg, #sol-root .sol-s05-c-ic svg { width: 14px; height: 14px; }
|
||
#sol-root .sol-s05-c-ic svg { width: 18px; height: 18px; }
|
||
#sol-root .sol-s05-scen-card h3 { color: #fff; font-size: 18px; font-weight: 800; margin: 0; }
|
||
#sol-root .sol-s05-trace { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--sol-line); background: rgba(0,0,0,0.25); padding: 6px; }
|
||
#sol-root .sol-s05-trace .st-node { fill: rgba(226,53,74,0.2); stroke: var(--sol-red-bright); stroke-width: 1.4; }
|
||
#sol-root .sol-s05-trace .st-path { fill: none; stroke-width: 1.8; }
|
||
#sol-root .sol-s05-trace .st-path--slow { stroke: #f59e0b; stroke-dasharray: 5 4; }
|
||
#sol-root .sol-s05-trace .st-path--fast { stroke: rgba(74,222,128,0.7); }
|
||
#sol-root .sol-s05-trace .st-path--dropped { stroke: rgba(255,255,255,0.14); stroke-dasharray: 3 6; }
|
||
#sol-root .sol-s05-trace .st-path--chosen { stroke: #4ade80; stroke-width: 2.4; }
|
||
#sol-root .sol-s05-trace .st-dot { fill: #4ade80; }
|
||
#sol-root .sol-s05-trace .st-cap { fill: rgba(255,255,255,0.45); font-size: 8px; font-weight: 800; letter-spacing: 0.08em; }
|
||
#sol-root .sol-s05-trace .st-cap--ok { fill: #4ade80; }
|
||
#sol-root .sol-s05-trace .st-cap--mute { fill: rgba(255,255,255,0.25); }
|
||
#sol-root .sol-s05-scen-list { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--sol-text-dim); display: flex; flex-direction: column; gap: 6px; line-height: 1.55; }
|
||
#sol-root .sol-s05-memory-badge { padding: 10px 12px; border-radius: 12px; background: rgba(226,53,74,0.12); border: 1px solid rgba(226,53,74,0.35); color: #fff; font-size: 12px; display: flex; align-items: center; gap: 8px; }
|
||
#sol-root .sol-s05-scen-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sol-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||
#sol-root .sol-s05-scen-foot span { color: rgba(255,255,255,0.35); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
|
||
#sol-root .sol-s05-scen-foot b { color: #f59e0b; font-size: 12.5px; font-weight: 800; }
|
||
#sol-root .sol-s05-scen-foot--good b { color: #4ade80; }
|
||
#sol-root .sol-s05-result-badge { padding: 10px; border-radius: 12px; background: rgba(34,197,94,0.15); color: #4ade80; font-size: 12px; font-weight: 700; text-align: center; }
|
||
|
||
#sol-root .sol-s05-arrow-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--sol-red-bright); }
|
||
#sol-root .sol-s05-arrow-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
|
||
#sol-root .sol-s05-core { position: relative; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; }
|
||
#sol-root .sol-s05-core img { width: 58px; height: 58px; object-fit: contain; position: relative; z-index: 1; }
|
||
#sol-root .sol-s05-core-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(226,53,74,0.5); animation: solSpin 14s linear infinite; }
|
||
#sol-root .sol-s05-core-ring--2 { inset: 14px; border-style: solid; border-color: rgba(226,53,74,0.22); animation-direction: reverse; animation-duration: 9s; }
|
||
#sol-root .sol-s05-core-ring.is-still { animation: none; }
|
||
@keyframes solSpin { to { transform: rotate(360deg); } }
|
||
#sol-root .sol-s05-arrow-ic { font-size: 22px; font-weight: 800; }
|
||
#sol-root .sol-s05-arrow-sub { color: rgba(255,255,255,0.35); font-size: 10px; font-weight: 700; text-align: center; letter-spacing: 0.04em; }
|
||
|
||
#sol-root .sol-s05-memory { margin-top: 32px; text-align: center; }
|
||
#sol-root .sol-s05-memory-title { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
|
||
#sol-root .sol-s05-tail { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
|
||
#sol-root .sol-s05-tail .sol-insight { flex: 1 1 420px; }
|
||
#sol-root .sol-s05-tail .sol-linkbtn { margin-top: 32px; flex: none; }
|
||
|
||
/* ============================================================
|
||
SECTION 06 — INDUSTRIES
|
||
============================================================ */
|
||
#sol-root .sol-s06-wrap { display: flex; flex-direction: column; gap: 28px; }
|
||
#sol-root .sol-s06-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
|
||
#sol-root .sol-s06-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: #f3f4f6; border: 1px solid #e5e7eb; color: #4b5563; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.3s; }
|
||
#sol-root .sol-s06-tab.is-active { background: #111827; color: #ffffff; border-color: #111827; box-shadow: 0 10px 25px rgba(0,0,0,0.12); }
|
||
#sol-root .sol-s06-ic svg { width: 18px; height: 18px; }
|
||
#sol-root .sol-s06-tab.is-active .sol-s06-ic { color: var(--sol-red-bright); }
|
||
#sol-root .sol-s06-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding: 40px; border-radius: 24px; background: #f9fafb; border: 1px solid #e5e7eb; align-items: center; animation: solFadeUp 0.45s ease-out both; }
|
||
#sol-root .sol-s06-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(192,18,39,0.1); color: var(--sol-red); font-size: 12px; font-weight: 700; margin-bottom: 12px; }
|
||
#sol-root .sol-s06-h3 { color: #111827; font-size: clamp(21px, 2.2vw, 26px); font-weight: 800; margin: 0 0 12px; }
|
||
#sol-root .sol-s06-p { color: #4b5563; font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
|
||
#sol-root .sol-s06-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
|
||
#sol-root .sol-s06-rules li { display: flex; align-items: flex-start; gap: 10px; color: #374151; font-size: 13.5px; line-height: 1.55; }
|
||
#sol-root .sol-s06-rule-ic { color: var(--sol-red); flex: none; margin-top: 1px; }
|
||
#sol-root .sol-s06-rule-ic svg { width: 15px; height: 15px; }
|
||
#sol-root .sol-s06-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
|
||
#sol-root .sol-s06-m-box { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 3px solid var(--sol-red); }
|
||
#sol-root .sol-s06-m-val { color: #111827; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.01em; }
|
||
#sol-root .sol-s06-m-lbl { color: #6b7280; font-size: 12.5px; font-weight: 600; }
|
||
#sol-root .sol-s06-art { display: flex; flex-direction: column; gap: 16px; min-height: 340px; justify-content: center; }
|
||
#sol-root .sol-s06-art-graphic { background: #111827; color: #fff; padding: 40px 32px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 220px; }
|
||
#sol-root .sol-s06-art-graphic b { font-size: 16px; font-weight: 800; }
|
||
#sol-root .sol-s06-art-graphic > span:last-child { color: rgba(255,255,255,0.5); font-size: 12.5px; }
|
||
#sol-root .sol-s06-art-ic { color: var(--sol-red-bright); }
|
||
#sol-root .sol-s06-art-ic svg { width: 36px; height: 36px; }
|
||
#sol-root .sol-s06-flowbox { padding: 16px 18px 8px; border-radius: 18px; background: #fff; border: 1px solid #e5e7eb; }
|
||
#sol-root .sol-s06-flow-title { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #9ca3af; margin-bottom: 6px; }
|
||
#sol-root .sol-s06-flow { width: 100%; height: auto; display: block; }
|
||
#sol-root .sol-s06-flow .fd-spine { stroke: #e5e7eb; stroke-width: 2; fill: none; }
|
||
#sol-root .sol-s06-flow .fd-spine--run { stroke: var(--sol-red); stroke-dasharray: 14 214; animation: solFlowRun 3.4s linear infinite; }
|
||
@keyframes solFlowRun { to { stroke-dashoffset: -228; } }
|
||
#sol-root .sol-s06-flow .fd-node { fill: #fff; stroke: #d1d5db; stroke-width: 1.6; }
|
||
#sol-root .sol-s06-flow .fd-node--end { fill: rgba(192,18,39,0.08); stroke: var(--sol-red); }
|
||
#sol-root .sol-s06-flow .fd-num { fill: #6b7280; font-size: 10px; font-weight: 800; }
|
||
#sol-root .sol-s06-flow .fd-lbl { fill: #374151; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; }
|
||
#sol-root .sol-s06-flow .fd-arrow { fill: #d1d5db; }
|
||
|
||
#sol-root .sol-s06-shared { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px; border-radius: 20px; background: #111827; }
|
||
#sol-root .sol-s06-shared-item { display: flex; align-items: flex-start; gap: 12px; }
|
||
#sol-root .sol-s06-shared-ic { color: var(--sol-red-bright); flex: none; }
|
||
#sol-root .sol-s06-shared-ic svg { width: 20px; height: 20px; }
|
||
#sol-root .sol-s06-shared-item b { display: block; color: #fff; font-size: 14px; font-weight: 750; }
|
||
#sol-root .sol-s06-shared-item span { display: block; color: rgba(255,255,255,0.5); font-size: 12.5px; line-height: 1.5; margin-top: 3px; }
|
||
|
||
/* ============================================================
|
||
SECTION 07 — RESULTS & PEACE OF MIND
|
||
============================================================ */
|
||
#sol-root .sol-s07-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; }
|
||
#sol-root .sol-s07-tl-item { padding: 22px 24px; border-radius: 20px; border: 1px solid var(--sol-line); background: rgba(255,255,255,0.03); display: flex; flex-direction: column; }
|
||
#sol-root .sol-s07-tl-when { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sol-red-bright); }
|
||
#sol-root .sol-s07-tl-rule { display: block; width: 34px; height: 2px; border-radius: 2px; background: var(--sol-red); margin: 12px 0 14px; }
|
||
#sol-root .sol-s07-tl-item b { color: #fff; font-size: 16px; font-weight: 800; }
|
||
#sol-root .sol-s07-tl-item p { margin: 8px 0 0; color: var(--sol-text-dim); font-size: 13px; line-height: 1.6; }
|
||
|
||
#sol-root .sol-s07-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
||
#sol-root .sol-s07-card { padding: 32px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)); border: 1px solid var(--sol-line); display: flex; flex-direction: column; justify-content: space-between; }
|
||
#sol-root .sol-s07-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
|
||
#sol-root .sol-s07-ic { color: var(--sol-red-bright); }
|
||
#sol-root .sol-s07-ic svg { width: 28px; height: 28px; }
|
||
#sol-root .sol-s07-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); }
|
||
#sol-root .sol-s07-num { color: #fff; font-size: clamp(32px, 3.5vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
|
||
#sol-root .sol-s07-mid { color: #fff; font-size: 20px; font-weight: 800; }
|
||
#sol-root .sol-s07-desc { color: var(--sol-text-dim); font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
|
||
#sol-root .sol-s07-micro { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sol-line); color: rgba(255,255,255,0.38); font-size: 11.5px; line-height: 1.5; }
|
||
#sol-root .sol-s07-bar-mock { display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.6); }
|
||
#sol-root .sol-s07-bm-row { display: flex; align-items: center; gap: 10px; }
|
||
#sol-root .sol-s07-bm-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,0.2); }
|
||
#sol-root .sol-s07-bm-bar--red { background: var(--sol-red-bright); }
|
||
#sol-root .sol-s07-arc-mock { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.5); }
|
||
#sol-root .sol-s07-arc-fill { height: 6px; background: #22c55e; border-radius: 6px; }
|
||
#sol-root .sol-s07-clock svg, #sol-root .sol-s07-ping svg { width: 100%; height: auto; max-width: 260px; display: block; }
|
||
#sol-root .sol-s07-clock .s7-track { stroke: rgba(255,255,255,0.14); stroke-width: 4; stroke-linecap: round; fill: none; }
|
||
#sol-root .sol-s07-clock .s7-fill { stroke: var(--sol-red-bright); stroke-width: 4; stroke-linecap: round; fill: none; }
|
||
#sol-root .sol-s07-clock .s7-knob { fill: #fff; }
|
||
#sol-root .sol-s07-clock .s7-cap { fill: rgba(255,255,255,0.35); font-size: 8px; font-weight: 800; letter-spacing: 0.12em; }
|
||
#sol-root .sol-s07-ping .s7-terrain { stroke: rgba(255,255,255,0.14); stroke-width: 1.4; fill: none; }
|
||
#sol-root .sol-s07-ping .s7-ping-ring { fill: rgba(226,53,74,0.14); stroke: rgba(226,53,74,0.5); stroke-width: 1; animation: solPinPulse 2.4s ease-in-out infinite; transform-origin: center; }
|
||
#sol-root .sol-s07-ping .s7-ping-core { fill: var(--sol-red-bright); }
|
||
#sol-root .sol-s07-ping .s7-ping-core--ok { fill: #22c55e; }
|
||
|
||
/* ---- Redesigned Peace of Mind Banner (sol-peace-card) ---- */
|
||
#sol-root .sol-peace-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-top: 48px;
|
||
padding: clamp(40px, 5vw, 68px) clamp(24px, 4vw, 56px);
|
||
border-radius: 28px;
|
||
background: radial-gradient(100% 130% at 50% -10%, rgba(226, 53, 74, 0.28) 0%, rgba(20, 20, 24, 0.97) 65%, #0c0c0e 100%);
|
||
border: 1px solid rgba(226, 53, 74, 0.42);
|
||
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85), 0 0 60px -15px rgba(226, 53, 74, 0.35);
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
#sol-root .sol-peace-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 10%;
|
||
right: 10%;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, rgba(226, 53, 74, 0.95), transparent);
|
||
}
|
||
#sol-root .sol-peace-grid-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
opacity: 0.12;
|
||
background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
||
background-size: 36px 36px;
|
||
-webkit-mask-image: radial-gradient(80% 80% at 50% 20%, #000 30%, transparent 100%);
|
||
mask-image: radial-gradient(80% 80% at 50% 20%, #000 30%, transparent 100%);
|
||
}
|
||
#sol-root .sol-peace-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 7px 18px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(180deg, rgba(226, 53, 74, 0.25), rgba(226, 53, 74, 0.08));
|
||
border: 1px solid rgba(226, 53, 74, 0.45);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
backdrop-filter: blur(12px);
|
||
box-shadow: 0 4px 16px rgba(226, 53, 74, 0.25);
|
||
}
|
||
#sol-root .sol-peace-badge-ic {
|
||
color: #ff4d6d;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
#sol-root .sol-peace-badge-ic svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
#sol-root .sol-peace-badge-txt {
|
||
font-size: 11.5px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: #ffffff;
|
||
}
|
||
#sol-root .sol-peace-h3 {
|
||
color: #ffffff !important;
|
||
font-size: clamp(22px, 3vw, 36px) !important;
|
||
font-weight: 850 !important;
|
||
letter-spacing: -0.02em !important;
|
||
line-height: 1.25 !important;
|
||
max-width: 900px;
|
||
margin: 4px 0 0 !important;
|
||
}
|
||
#sol-root .sol-peace-accent {
|
||
background: linear-gradient(135deg, #ffffff 0%, #ff5270 50%, #e2354a 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
#sol-root .sol-peace-p {
|
||
color: rgba(255, 255, 255, 0.82) !important;
|
||
font-size: clamp(14.5px, 1.1vw, 16.5px) !important;
|
||
line-height: 1.7 !important;
|
||
max-width: 760px;
|
||
margin: 0 !important;
|
||
font-weight: 400;
|
||
}
|
||
#sol-root .sol-peace-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
margin-top: 12px;
|
||
z-index: 1;
|
||
}
|
||
#sol-root .sol-peace-btn-primary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 16px 32px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, #e2354a 0%, #c01227 100%);
|
||
color: #ffffff !important;
|
||
font-size: 15px;
|
||
font-weight: 750;
|
||
letter-spacing: -0.01em;
|
||
text-decoration: none !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.28);
|
||
box-shadow: 0 14px 36px -8px rgba(226, 53, 74, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
||
transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
#sol-root .sol-peace-btn-primary:hover {
|
||
transform: translateY(-2px) scale(1.02);
|
||
background: linear-gradient(135deg, #ff4d6d 0%, #d91830 100%);
|
||
box-shadow: 0 20px 45px -8px rgba(226, 53, 74, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
||
color: #ffffff !important;
|
||
}
|
||
#sol-root .sol-peace-btn-arrow {
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
#sol-root .sol-peace-btn-primary:hover .sol-peace-btn-arrow {
|
||
transform: translateX(4px);
|
||
}
|
||
#sol-root .sol-peace-btn-secondary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 16px 28px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.07);
|
||
color: #ffffff !important;
|
||
font-size: 14.5px;
|
||
font-weight: 700;
|
||
text-decoration: none !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
backdrop-filter: blur(12px);
|
||
transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
#sol-root .sol-peace-btn-secondary:hover {
|
||
transform: translateY(-2px);
|
||
background: rgba(255, 255, 255, 0.14);
|
||
border-color: rgba(255, 255, 255, 0.4);
|
||
color: #ffffff !important;
|
||
}
|
||
#sol-root .sol-peace-btn-icon {
|
||
width: 10px;
|
||
height: 14px;
|
||
stroke: currentColor;
|
||
stroke-width: 2.5;
|
||
fill: none;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
#sol-root .sol-peace-btn-secondary:hover .sol-peace-btn-icon {
|
||
transform: translateX(3px);
|
||
}
|
||
#sol-root .sol-peace-trust {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-top: 10px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
width: 100%;
|
||
max-width: 680px;
|
||
}
|
||
#sol-root .sol-peace-trust-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
font-size: 12.5px;
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 0.75);
|
||
}
|
||
#sol-root .sol-peace-trust-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #22c55e;
|
||
box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
|
||
}
|
||
#sol-root .sol-peace-trust-sep {
|
||
color: rgba(255, 255, 255, 0.25);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ============================================================
|
||
OFFERINGS BEAT — six service cards
|
||
Same card shell vocabulary as the Sol07 result cards (translucent gradient
|
||
fill, hairline border, red icon, uppercase micro-label, dim body copy),
|
||
at three-up density.
|
||
============================================================ */
|
||
#sol-root .sol-off-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
|
||
#sol-root .sol-off-card { padding: 30px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)); border: 1px solid var(--sol-line); display: flex; flex-direction: column; align-items: flex-start; }
|
||
#sol-root .sol-off-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
|
||
#sol-root .sol-off-ic { color: var(--sol-red-bright); display: inline-flex; }
|
||
#sol-root .sol-off-ic svg { width: 26px; height: 26px; }
|
||
#sol-root .sol-off-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); }
|
||
#sol-root .sol-off-name { color: #fff; font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
|
||
#sol-root .sol-off-desc { color: var(--sol-text-dim); font-size: 14px; line-height: 1.65; margin: 10px 0 0; }
|
||
/* The note sits directly under the copy; the CTA (only some cards have one) is
|
||
pinned to the card floor so the buttons line up across the row. */
|
||
#sol-root .sol-off-note { display: block; width: 100%; margin: 18px 0 18px; padding-top: 16px; border-top: 1px solid var(--sol-line); color: rgba(255,255,255,0.38); font-size: 11.5px; line-height: 1.5; }
|
||
#sol-root .sol-off-link { margin-top: auto; padding: 10px 18px; font-size: 12px; }
|
||
|
||
/* ---- Wings spotlight — media + copy ---- */
|
||
#sol-root .sol-wings-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 52px); align-items: center; margin-top: 34px; }
|
||
#sol-root .sol-wings-copy { display: flex; flex-direction: column; width: 100%; }
|
||
#sol-root .sol-wings-copy .sol-minilist { gap: 18px; }
|
||
#sol-root .sol-wings-copy .sol-mini b { font-size: 15px; font-weight: 750; }
|
||
#sol-root .sol-wings-copy .sol-mini span { font-size: 14px; line-height: 1.55; }
|
||
#sol-root .sol-wings-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; padding: 14px 18px; background: rgba(226, 53, 74, 0.04); border: 1px solid rgba(226, 53, 74, 0.12); border-radius: 14px; }
|
||
#sol-root .sol-wings-spec-item { display: flex; flex-direction: column; gap: 2px; }
|
||
#sol-root .sol-wings-spec-val { font-size: 15px; font-weight: 800; color: #dc2626; line-height: 1.2; }
|
||
#sol-root .sol-wings-spec-lbl { font-size: 11px; font-weight: 600; color: #4b5563; letter-spacing: 0.01em; }
|
||
#sol-root .sol-wings-cta { margin-top: 24px; display: flex; align-items: center; }
|
||
|
||
/* ============================================================
|
||
POWERED BY MILETRUTH™ AI — the one LIGHT surface on /solutions.
|
||
|
||
Everything else on the page is charcoal + red. This sheet is off-white and
|
||
floats on the dark page, so the flagship technology beat is registered as a
|
||
different kind of thing before a word of it is read. All of it is scoped to
|
||
.sol-sec--mt so the shared .sol-sec--white treatment (which this section
|
||
opts into for its near-black headings) is not disturbed elsewhere.
|
||
============================================================ */
|
||
#sol-root .sol-sec--mt {
|
||
--mt-paper: #F7F6F3;
|
||
--mt-ink: #0E0E10;
|
||
--mt-ink-2: rgba(14,14,16,0.60);
|
||
--mt-ink-3: rgba(14,14,16,0.40);
|
||
--mt-line: rgba(14,14,16,0.085);
|
||
padding: clamp(92px, 9.5vw, 140px) 0;
|
||
}
|
||
|
||
/* ---- The sheet: paper tone, hairline edge, and a lift off the dark page ---- */
|
||
#sol-root .sol-bg--paper {
|
||
background: var(--mt-paper);
|
||
border: 1px solid rgba(14,14,16,0.06);
|
||
box-shadow: 0 40px 90px -50px rgba(0,0,0,0.9), 0 2px 0 rgba(255,255,255,0.5) inset;
|
||
}
|
||
/* paper grain — the same feTurbulence trick as .sol-noise, inked dark */
|
||
#sol-root .sol-bg--paper::before {
|
||
content: ''; position: absolute; inset: 0; pointer-events: none;
|
||
opacity: 0.5; mix-blend-mode: multiply;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23p)' opacity='0.5'/></svg>");
|
||
background-size: 160px 160px;
|
||
}
|
||
/* extremely light grid, faded out at the edges */
|
||
#sol-root .sol-bg--paper::after {
|
||
content: ''; position: absolute; inset: 0; pointer-events: none;
|
||
background-image: linear-gradient(rgba(14,14,16,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(14,14,16,0.035) 1px, transparent 1px);
|
||
background-size: 72px 72px;
|
||
-webkit-mask-image: radial-gradient(78% 70% at 50% 45%, #000 25%, transparent 88%);
|
||
mask-image: radial-gradient(78% 70% at 50% 45%, #000 25%, transparent 88%);
|
||
}
|
||
/* the neural field, inked near-black by NeuralField's light tone */
|
||
#sol-root .sol-sec--mt .sol-field { position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none; }
|
||
#sol-root .sol-sec--mt .sol-field canvas { display: block; width: 100%; height: 100%; }
|
||
|
||
/* ============================================================
|
||
1. HERO — copy left, decision graph right
|
||
============================================================ */
|
||
#sol-root .sol-mt-hero {
|
||
position: relative; z-index: 1;
|
||
display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
|
||
align-items: center; gap: clamp(32px, 5vw, 80px);
|
||
}
|
||
#sol-root .sol-mt-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
|
||
|
||
#sol-root .sol-mt-tag {
|
||
display: inline-flex; align-items: center; gap: 9px;
|
||
padding: 7px 15px 7px 12px; border-radius: 999px;
|
||
background: rgba(255,255,255,0.85); border: 1px solid rgba(14,14,16,0.08);
|
||
box-shadow: 0 1px 2px rgba(14,14,16,0.04);
|
||
color: var(--mt-ink); font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
|
||
}
|
||
|
||
/* Hierarchy comes from the measure and the whitespace under it, not from size:
|
||
this is a touch smaller than the dark version it replaces. */
|
||
/* The site's global h1–h6 rules uppercase every heading; sentence case is the
|
||
whole point of this surface, so it is explicitly reset here. */
|
||
#sol-root .sol-sec--mt .sol-mt-h {
|
||
color: var(--mt-ink) !important;
|
||
text-transform: none !important;
|
||
max-width: 22ch;
|
||
margin: 26px 0 0 !important;
|
||
font-size: clamp(32px, 3.5vw, 50px) !important;
|
||
line-height: 1.16 !important;
|
||
letter-spacing: -0.028em !important;
|
||
font-weight: 800 !important;
|
||
text-wrap: balance;
|
||
}
|
||
/* only the three verbs carry red */
|
||
#sol-root .sol-sec--mt .sol-mt-h em { font-style: normal; color: var(--sol-red); }
|
||
|
||
#sol-root .sol-mt-p {
|
||
color: var(--mt-ink-2);
|
||
font-size: clamp(14.5px, 1.02vw, 16px); line-height: 1.72;
|
||
max-width: 52ch; margin: 22px 0 0;
|
||
}
|
||
|
||
/* ---- Button: filled Doormile red ---- */
|
||
#sol-root .sol-mt-cta {
|
||
display: inline-flex; align-items: center; gap: 11px;
|
||
margin-top: 34px; padding: 15px 28px; border-radius: 999px;
|
||
background: var(--sol-red); color: #fff !important;
|
||
font-size: 13.5px; font-weight: 700; text-decoration: none; letter-spacing: 0.005em;
|
||
box-shadow: 0 1px 1px rgba(14,14,16,0.10), 0 10px 24px -8px rgba(192,18,39,0.55);
|
||
transition: background 0.3s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2,0.7,0.3,1);
|
||
}
|
||
#sol-root .sol-mt-cta svg { width: 8px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; transition: transform 0.35s cubic-bezier(0.2,0.7,0.3,1); }
|
||
#sol-root .sol-mt-cta:hover {
|
||
background: #A80F21; transform: translateY(-2px);
|
||
box-shadow: 0 1px 1px rgba(14,14,16,0.10), 0 18px 38px -10px rgba(192,18,39,0.6);
|
||
}
|
||
#sol-root .sol-mt-cta:hover svg { transform: translateX(4px); }
|
||
|
||
/* ============================================================
|
||
2. DECISION GRAPH — the section's only red glow sits behind this
|
||
============================================================ */
|
||
#sol-root .sol-mt-viz { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; }
|
||
#sol-root .sol-mt-graph { position: relative; width: 100%; max-width: 840px; aspect-ratio: 680 / 400; }
|
||
/* Wide and soft, so the nucleus sits IN light rather than becoming a hot blob
|
||
that outshines the graph it is supposed to anchor. */
|
||
#sol-root .sol-mt-graph-glow {
|
||
position: absolute; left: 50%; top: 50%; width: 96%; height: 96%;
|
||
transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
|
||
background: radial-gradient(circle, rgba(226,53,74,0.15) 0%, rgba(226,53,74,0.07) 42%, transparent 70%);
|
||
filter: blur(34px);
|
||
animation: mtgGlow 7s ease-in-out infinite;
|
||
}
|
||
#sol-root .sol-mt-graph-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
|
||
#sol-root .sol-mt-graph-svg * { transform-box: view-box; transform-origin: 230px 230px; }
|
||
|
||
#sol-root .mtg-ring { fill: none; stroke: rgba(14,14,16,0.14); stroke-width: 1; stroke-dasharray: 2 10; animation: mtgSpin 40s linear infinite; }
|
||
#sol-root .mtg-ring--b { stroke: rgba(14,14,16,0.17); stroke-dasharray: 3 12; animation-duration: 28s; animation-direction: reverse; }
|
||
#sol-root .mtg-ring--c { stroke: rgba(192,18,39,0.3); stroke-dasharray: 2 8; animation-duration: 18s; }
|
||
|
||
#sol-root .mtg-edge { stroke: rgba(14,14,16,0.22); stroke-width: 1.1; }
|
||
#sol-root .mtg-spoke { stroke: rgba(14,14,16,0.28); stroke-width: 1.4; }
|
||
/* telemetry runs outer → relay; decisions pulse nucleus → relay */
|
||
#sol-root .mtg-telemetry { stroke: var(--sol-red-bright); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 6 160; animation: mtgFlow 3.8s linear infinite; }
|
||
#sol-root .mtg-decision { stroke: var(--sol-red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 120; animation: mtgFlow 3.2s linear infinite; }
|
||
|
||
#sol-root .mtg-orbit--1 { transform: rotate(-17deg); }
|
||
#sol-root .mtg-orbit--2 { transform: rotate(12deg); }
|
||
#sol-root .mtg-orbit-path { fill: none; stroke: rgba(14,14,16,0.12); stroke-width: 1; stroke-dasharray: 4 8; }
|
||
#sol-root .mtg-orbit--2 .mtg-orbit-path { stroke: rgba(192,18,39,0.2); }
|
||
/* offset-path is what puts the satellite on the ellipse */
|
||
#sol-root .mtg-sat { fill: var(--sol-red); opacity: 0; }
|
||
@supports (offset-path: path("M 0 0 L 1 1")) {
|
||
#sol-root .mtg-sat { opacity: 1; offset-rotate: 0deg; transform-origin: 0 0; animation: mtgOrbit 16s linear infinite; }
|
||
#sol-root .mtg-orbit--1 .mtg-sat { offset-path: path("M 425 230 A 195 70 0 1 1 35 230 A 195 70 0 1 1 425 230"); }
|
||
#sol-root .mtg-orbit--2 .mtg-sat { offset-path: path("M 435 230 A 205 58 0 1 1 25 230 A 205 58 0 1 1 435 230"); animation-duration: 22s; animation-direction: reverse; }
|
||
}
|
||
|
||
#sol-root .mtg-node { fill: rgba(14,14,16,0.7); stroke: rgba(255,255,255,0.8); stroke-width: 1; animation: mtgNode 3.8s ease-in-out infinite; }
|
||
#sol-root .mtg-relay { fill: #fff; stroke: var(--sol-red); stroke-width: 2.2; animation: mtgRelay 3.4s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
|
||
|
||
#sol-root .mtg-pulse { fill: none; stroke: rgba(192,18,39,0.45); stroke-width: 1.4; animation: mtgPulse 3.6s ease-out infinite; }
|
||
#sol-root .mtg-pulse--b { animation-delay: 1.8s; }
|
||
#sol-root .mtg-core-glow { animation: mtgBreath 4s ease-in-out infinite; }
|
||
#sol-root .mtg-core-ring { fill: none; stroke-width: 2.5; animation: mtgSpin 14s linear infinite; }
|
||
#sol-root .mtg-core { fill: var(--sol-red); stroke: #fff; stroke-width: 3.4; animation: mtgBreath 2.8s ease-in-out infinite; filter: drop-shadow(0 4px 12px rgba(226,53,74,0.4)); }
|
||
|
||
@keyframes mtgSpin { to { transform: rotate(360deg); } }
|
||
@keyframes mtgFlow { 0% { stroke-dashoffset: 0; opacity: 0; } 12% { opacity: 1; } 62% { opacity: 0.9; } 76%, 100% { stroke-dashoffset: -170; opacity: 0; } }
|
||
@keyframes mtgOrbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
|
||
@keyframes mtgNode { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
|
||
@keyframes mtgRelay { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.12); } }
|
||
@keyframes mtgPulse { 0% { transform: scale(0.4); opacity: 0; } 16% { opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }
|
||
@keyframes mtgBreath { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.07); } }
|
||
@keyframes mtgGlow { 0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
|
||
|
||
/* ============================================================
|
||
3. METRIC RAIL — four cells of ONE readout, not four stat cards
|
||
============================================================ */
|
||
#sol-root .sol-mt-rail {
|
||
position: relative; z-index: 1;
|
||
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
margin-top: clamp(56px, 6vw, 92px);
|
||
border: 1px solid rgba(14,14,16,0.09); border-radius: 20px;
|
||
background: rgba(255,255,255,0.72);
|
||
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
|
||
box-shadow: 0 1px 2px rgba(14,14,16,0.04), 0 18px 44px -26px rgba(14,14,16,0.28);
|
||
overflow: hidden;
|
||
}
|
||
/* The live hairline running the full width is what makes the four cells read
|
||
as one instrument rather than four separate figures. */
|
||
#sol-root .sol-mt-rail::before {
|
||
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
|
||
background: linear-gradient(90deg, transparent, rgba(226,53,74,0.5) 18%, var(--sol-red) 50%, rgba(226,53,74,0.5) 82%, transparent);
|
||
}
|
||
#sol-root .sol-mt-rail::after {
|
||
content: ''; position: absolute; left: 0; top: 0; width: 22%; height: 2px;
|
||
background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent);
|
||
opacity: 0.85; animation: mtRailSignal 5.5s cubic-bezier(0.45,0,0.55,1) infinite;
|
||
}
|
||
@keyframes mtRailSignal { 0% { transform: translateX(-100%); } 100% { transform: translateX(560%); } }
|
||
|
||
#sol-root .sol-mt-cell {
|
||
display: flex; flex-direction: column; gap: 8px;
|
||
padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2.2vw, 32px);
|
||
border-left: 1px solid rgba(14,14,16,0.075);
|
||
transition: background 0.35s ease;
|
||
}
|
||
#sol-root .sol-mt-cell:first-child { border-left: 0; }
|
||
#sol-root .sol-mt-cell:hover { background: rgba(255,255,255,0.9); }
|
||
#sol-root .sol-mt-cell-v {
|
||
color: var(--mt-ink); font-size: clamp(28px, 2.7vw, 38px); font-weight: 800;
|
||
line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
|
||
}
|
||
#sol-root .sol-mt-cell-l {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
color: var(--mt-ink-3); font-size: 11px; font-weight: 700;
|
||
text-transform: uppercase; letter-spacing: 0.13em;
|
||
}
|
||
#sol-root .sol-mt-cell-l::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sol-red); flex: none; }
|
||
|
||
/* ============================================================
|
||
4. CAPABILITY CARDS — white glass, Apple-developer-page density
|
||
============================================================ */
|
||
#sol-root .sol-mt-cards {
|
||
position: relative; z-index: 1;
|
||
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
|
||
margin-top: 22px;
|
||
}
|
||
/* Grid rather than a column flex so the card can reflow to icon-left/text-right
|
||
when it goes full width, instead of leaving half of itself empty. */
|
||
#sol-root .sol-mt-card {
|
||
position: relative; overflow: hidden;
|
||
display: grid; grid-template-columns: minmax(0, 1fr);
|
||
grid-template-areas: "ic" "title" "body"; justify-items: start; align-content: start;
|
||
padding: clamp(28px, 2.6vw, 38px);
|
||
border-radius: 22px; border: 1px solid rgba(14,14,16,0.075);
|
||
background: rgba(255,255,255,0.78);
|
||
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
|
||
box-shadow: 0 1px 2px rgba(14,14,16,0.04), 0 16px 40px -24px rgba(14,14,16,0.26);
|
||
transition: transform 0.42s cubic-bezier(0.2,0.7,0.3,1), border-color 0.42s ease, box-shadow 0.42s ease, background 0.42s ease;
|
||
}
|
||
#sol-root .sol-mt-card::before {
|
||
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
|
||
background: linear-gradient(90deg, transparent, var(--sol-red), transparent);
|
||
opacity: 0; transition: opacity 0.42s ease;
|
||
}
|
||
#sol-root .sol-mt-card:hover {
|
||
transform: translateY(-8px); background: #fff;
|
||
border-color: rgba(192,18,39,0.22);
|
||
box-shadow: 0 1px 2px rgba(14,14,16,0.05), 0 30px 60px -26px rgba(14,14,16,0.30), 0 18px 46px -28px rgba(192,18,39,0.45);
|
||
}
|
||
#sol-root .sol-mt-card:hover::before { opacity: 1; }
|
||
#sol-root .sol-mt-card-ic {
|
||
grid-area: ic;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 56px; height: 56px; border-radius: 17px; margin-bottom: 26px;
|
||
color: var(--sol-red);
|
||
background: linear-gradient(180deg, rgba(226,53,74,0.13), rgba(226,53,74,0.05));
|
||
border: 1px solid rgba(192,18,39,0.16);
|
||
box-shadow: 0 6px 16px -8px rgba(192,18,39,0.35), inset 0 1px 0 rgba(255,255,255,0.9);
|
||
transition: transform 0.42s cubic-bezier(0.2,0.7,0.3,1), background 0.42s ease, box-shadow 0.42s ease;
|
||
}
|
||
#sol-root .sol-mt-card-ic svg { width: 26px; height: 26px; stroke-width: 1.9; }
|
||
#sol-root .sol-mt-card:hover .sol-mt-card-ic {
|
||
transform: translateY(-3px);
|
||
background: linear-gradient(180deg, var(--sol-red), #A80F21);
|
||
box-shadow: 0 12px 26px -10px rgba(192,18,39,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
|
||
color: #fff;
|
||
}
|
||
#sol-root .sol-mt-card h4 { grid-area: title; color: var(--mt-ink); text-transform: none; font-size: 18px; font-weight: 800; letter-spacing: -0.018em; margin: 0 0 11px; }
|
||
#sol-root .sol-mt-card p { grid-area: body; color: var(--mt-ink-2); font-size: 14px; line-height: 1.68; margin: 0; }
|
||
|
||
/* ============================================================
|
||
RESPONSIVE
|
||
============================================================ */
|
||
@media (max-width: 1200px) {
|
||
#sol-root .sol-float { position: static; max-width: none; margin-top: 10px; transform: none; }
|
||
#sol-root .sol-s04-console { padding-bottom: 24px; margin-bottom: 0; }
|
||
}
|
||
@media (max-width: 1024px) {
|
||
#sol-root .sol-sec { padding: 72px 0; margin-top: 32px; }
|
||
#sol-root .sol-in { width: calc(100% - 20px); }
|
||
#sol-root .sol-bg { left: 10px; right: 10px; }
|
||
#sol-root .sol-s01-pain-grid { grid-template-columns: repeat(2, 1fr); }
|
||
#sol-root .sol-s01-split, #sol-root .sol-s03-canvas, #sol-root .sol-s04-split, #sol-root .sol-s05-scenario-grid, #sol-root .sol-s06-card, #sol-root .sol-wings-row { grid-template-columns: 1fr; gap: 32px; }
|
||
/* Stacks, but stays one seamless panel — gap 0, and the photo's divider
|
||
moves from the right edge to the bottom edge. */
|
||
#sol-root .sol-s02-media-row { grid-template-columns: 1fr; gap: 0; }
|
||
#sol-root .sol-s02-media-panel .sol-media-frame { min-height: 0; aspect-ratio: 2 / 1; border-right: 0 !important; border-bottom: 1px solid #e6e9ee !important; }
|
||
/* Two up before one up — three full-width cards is a lot of scrolling. */
|
||
#sol-root .sol-s02-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
#sol-root .sol-s02-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
|
||
#sol-root .sol-off-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
#sol-root .sol-sec--mt { padding: 84px 0; }
|
||
/* Graph first: the AI centrepiece should still be the first thing seen. */
|
||
#sol-root .sol-mt-hero { grid-template-columns: 1fr; gap: 40px; justify-items: center; text-align: center; }
|
||
#sol-root .sol-mt-copy { align-items: center; text-align: center; order: 2; }
|
||
/* justify-items:center above makes every cell shrink-to-fit, which for a
|
||
column whose only child is an svg means the SVG's 300px default
|
||
intrinsic width — not the column. Stretch this one back. */
|
||
#sol-root .sol-mt-viz { order: 1; justify-self: stretch; width: 100%; }
|
||
#sol-root .sol-mt-h { max-width: 20ch; }
|
||
/* The console is a wide readout with real type in it, not the symmetric
|
||
emblem this used to cap at 380px — starve it of width and the footer
|
||
figures stop being legible. Let it take the column. */
|
||
#sol-root .sol-mt-graph { max-width: 760px; }
|
||
/* Full-width cards go horizontal: icon left, copy right. */
|
||
#sol-root .sol-mt-cards { grid-template-columns: 1fr; gap: 18px; }
|
||
#sol-root .sol-mt-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic title" "ic body"; column-gap: 24px; }
|
||
#sol-root .sol-mt-card-ic { margin-bottom: 0; }
|
||
}
|
||
/* The rail's uppercase labels start wrapping below ~900px, so it folds to 2\xd72
|
||
before that happens rather than at the phone breakpoint. */
|
||
@media (max-width: 900px) {
|
||
#sol-root .sol-mt-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
#sol-root .sol-mt-cell:nth-child(odd) { border-left: 0; }
|
||
#sol-root .sol-mt-cell:nth-child(n+3) { border-top: 1px solid rgba(14,14,16,0.075); }
|
||
#sol-root .sol-s07-grid { grid-template-columns: 1fr; }
|
||
#sol-root .sol-s07-timeline { grid-template-columns: 1fr; }
|
||
#sol-root .sol-s05-loopstrip { grid-template-columns: 1fr; }
|
||
#sol-root .sol-s05-loopstep::after { display: none; }
|
||
#sol-root .sol-s05-arrow-col { flex-direction: row; gap: 16px; justify-content: center; }
|
||
#sol-root .sol-s05-arrow-ic { transform: rotate(90deg); }
|
||
#sol-root .sol-s06-shared { grid-template-columns: 1fr; }
|
||
#sol-root .sol-s06-art { min-height: 0; }
|
||
#sol-root .sol-kpis-grid, #sol-root .sol-bar { grid-template-columns: repeat(2, 1fr); }
|
||
#sol-root .sol-kpi:nth-child(2), #sol-root .sol-bar-item:nth-child(2) { border-right: 0; }
|
||
#sol-root .sol-kpi:nth-child(-n+2), #sol-root .sol-bar-item:nth-child(-n+2) { border-bottom: 1px solid var(--sol-line); }
|
||
#sol-root .sol-connector { height: 60px; }
|
||
#sol-root .sol-connector svg { height: 60px; }
|
||
@keyframes solDrop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }
|
||
}
|
||
@media (max-width: 767px) {
|
||
#sol-root { margin-bottom: 24px; --sol-in-pad: 16px; }
|
||
#sol-root .sol-sec { padding: 56px 0; margin-top: 24px; }
|
||
#sol-root .sol-bg { border-radius: 20px; }
|
||
#sol-root .sol-h { font-size: clamp(26px, 8vw, 34px) !important; }
|
||
#sol-root .sol-s01-pain-grid { grid-template-columns: 1fr; }
|
||
#sol-root .sol-s01-floats { grid-template-columns: 1fr; }
|
||
#sol-root .sol-s02-cmp-row { grid-template-columns: 1fr; gap: 10px; }
|
||
#sol-root .sol-s02-cmp-line { grid-template-columns: 74px minmax(0, 1fr) 78px; gap: 8px; }
|
||
#sol-root .sol-s02-cmp-line em { font-size: 10.5px; white-space: normal; }
|
||
#sol-root .sol-s02-grid-3 { grid-template-columns: 1fr; gap: 14px; }
|
||
#sol-root .sol-s02-card { padding: 22px 20px 20px; }
|
||
#sol-root .sol-s02-media-row { border-radius: 20px; }
|
||
#sol-root .sol-s02-media-panel .sol-media-frame { aspect-ratio: 4 / 3; }
|
||
#sol-root .sol-s02-media-copy h4 { max-width: none; }
|
||
#sol-root .sol-s02-toggle-bar { width: 100%; }
|
||
#sol-root .sol-s02-tgl-btn { flex: 1 1 100%; padding: 10px 14px; font-size: 12px; }
|
||
#sol-root .sol-s03-canvas, #sol-root .sol-s06-card { padding: 22px; }
|
||
#sol-root .sol-s04-console { padding: 18px; }
|
||
#sol-root .sol-s04-item { grid-template-columns: 1fr; }
|
||
#sol-root .sol-s04-item-stat { grid-column: 1; }
|
||
#sol-root .sol-s06-metrics { grid-template-columns: 1fr; gap: 14px; }
|
||
#sol-root .sol-kpis-grid, #sol-root .sol-bar { grid-template-columns: 1fr; }
|
||
#sol-root .sol-kpi, #sol-root .sol-bar-item { border-right: 0 !important; border-bottom: 1px solid var(--sol-line); }
|
||
#sol-root .sol-kpi:last-child, #sol-root .sol-bar-item:last-child { border-bottom: 0; }
|
||
#sol-root .sol-s05-tail .sol-linkbtn { margin-top: 8px; }
|
||
#sol-root .sol-s07-peace-banner { padding: 32px 22px; }
|
||
#sol-root .sol-off-grid { grid-template-columns: 1fr; }
|
||
#sol-root .sol-off-card { padding: 24px; }
|
||
#sol-root .sol-sec--mt { padding: 64px 0; }
|
||
#sol-root .sol-mt-graph { max-width: none; }
|
||
#sol-root .sol-mt-h { max-width: none; }
|
||
/* Back to stacked on phones — a 56px icon beside the copy leaves too little
|
||
room for the body text at this width. */
|
||
#sol-root .sol-mt-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "title" "body"; }
|
||
#sol-root .sol-mt-card-ic { margin-bottom: 20px; }
|
||
#sol-root .sol-mt-cta { width: 100%; justify-content: center; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
#sol-root .sol-livedot,
|
||
#sol-root .sol-s01-hub-pulse,
|
||
#sol-root .sol-s01-particle,
|
||
#sol-root .sol-connector-dot,
|
||
#sol-root .sol-ticker-track,
|
||
#sol-root .sol-s02-cmp-bar,
|
||
#sol-root .sol-s02-view,
|
||
#sol-root .sol-s02-card,
|
||
#sol-root .sol-s03-art,
|
||
#sol-root .sol-s03-art-svg .sa-radar,
|
||
#sol-root .sol-s03-art-svg .sa-road-dash,
|
||
#sol-root .sol-s03-art-svg .sa-truck,
|
||
#sol-root .sol-s04-route--lit,
|
||
#sol-root .sol-s04-pin,
|
||
#sol-root .sol-s05-core-ring,
|
||
#sol-root .sol-s06-card,
|
||
#sol-root .sol-s06-flow .fd-spine--run,
|
||
#sol-root .sol-s07-ping .s7-ping-ring,
|
||
#sol-root .sol-mt-graph-glow,
|
||
#sol-root .mtg-ring,
|
||
#sol-root .mtg-telemetry,
|
||
#sol-root .mtg-decision,
|
||
#sol-root .mtg-sat,
|
||
#sol-root .mtg-node,
|
||
#sol-root .mtg-relay,
|
||
#sol-root .mtg-pulse,
|
||
#sol-root .mtg-core-glow,
|
||
#sol-root .mtg-core-ring,
|
||
#sol-root .mtg-core,
|
||
#sol-root .sol-mt-rail::after {
|
||
animation: none !important;
|
||
}
|
||
/* Travelling dashes and expanding pulses mean nothing once stilled — the
|
||
static graph already reads as a decision network. */
|
||
#sol-root .mtg-telemetry,
|
||
#sol-root .mtg-decision,
|
||
#sol-root .mtg-pulse,
|
||
#sol-root .sol-mt-rail::after { display: none; }
|
||
#sol-root .mtg-node, #sol-root .mtg-relay { opacity: 0.75; transform: none !important; }
|
||
#sol-root .sol-s02-cmp-bar { transform: none !important; }
|
||
#sol-root .sol-s06-flow .fd-spine--run { display: none; }
|
||
}
|
||
`;e.s(["SolMileTruthBand",0,e2,"SolOfferings",0,e_,"SolWingsSpotlight",0,eJ,"SolutionsIndustriesUnused",0,function(){let[e,t]=(0,o.useState)(0),r=(0,n.useReducedMotion)(),a=eq[e];return(0,s.jsxs)(ew,{id:"industries",bg:"white",children:[(0,s.jsx)(ej,{n:"06",label:"Industries",title:(0,s.jsxs)(s.Fragment,{children:["WHETHER YOU MOVE MEDICINES,",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"GROCERIES, OR PARCELS."})]}),lede:"DoorMile adapts to your exact operational rules, delivery windows and transport requirements.",sub:"The platform underneath is identical in every vertical. What changes is the rulebook it enforces — and you configure that, not us.",center:!0}),(0,s.jsxs)("div",{className:"sol-s06-wrap",children:[(0,s.jsx)("div",{className:"sol-s06-tabs",role:"tablist","aria-label":"Industries",children:eq.map((o,r)=>(0,s.jsxs)("button",{type:"button",role:"tab","aria-selected":e===r,"aria-controls":"sol-s06-panel",className:`sol-s06-tab ${e===r?"is-active":""}`,onClick:()=>t(r),children:[(0,s.jsx)("span",{className:"sol-s06-ic",children:o.icon}),(0,s.jsx)("span",{children:o.name})]},o.id))}),(0,s.jsxs)("div",{className:"sol-s06-card",id:"sol-s06-panel",role:"tabpanel",children:[(0,s.jsxs)("div",{className:"sol-s06-info",children:[(0,s.jsxs)("span",{className:"sol-s06-tag",children:[a.name," Solution"]}),(0,s.jsx)("h3",{className:"sol-s06-h3",children:a.headline}),(0,s.jsx)("p",{className:"sol-s06-p",children:a.desc}),(0,s.jsx)("ul",{className:"sol-s06-rules",children:a.rules.map(e=>(0,s.jsxs)("li",{children:[(0,s.jsx)("span",{className:"sol-s06-rule-ic",children:el}),e]},e))}),(0,s.jsx)(eE,{items:a.chips,tone:"light"}),(0,s.jsxs)("div",{className:"sol-s06-metrics",children:[(0,s.jsxs)("div",{className:"sol-s06-m-box",children:[(0,s.jsx)("b",{className:"sol-s06-m-val",children:a.metric}),(0,s.jsx)("span",{className:"sol-s06-m-lbl",children:a.metricLabel})]}),(0,s.jsxs)("div",{className:"sol-s06-m-box",children:[(0,s.jsx)("b",{className:"sol-s06-m-val",children:a.metric2}),(0,s.jsx)("span",{className:"sol-s06-m-lbl",children:a.metric2Label})]})]})]}),(0,s.jsxs)("div",{className:"sol-s06-art",children:[a.photo?(0,s.jsx)(eO,{tone:"light",src:a.photo,alt:`${a.name} operations`,badges:[{value:a.metric,label:a.metricLabel.toUpperCase()}]}):(0,s.jsxs)("div",{className:"sol-s06-art-graphic",children:[(0,s.jsx)("span",{className:"sol-s06-art-ic",children:a.icon}),(0,s.jsx)("b",{children:a.name}),(0,s.jsx)("span",{children:a.headline})]}),(0,s.jsxs)("div",{className:"sol-s06-flowbox",children:[(0,s.jsx)("span",{className:"sol-s06-flow-title",children:"Transport flow"}),(0,s.jsx)(eU,{nodes:a.flow,still:!!r})]})]})]},a.id),(0,s.jsx)("div",{className:"sol-s06-shared",children:eX.map(e=>(0,s.jsxs)("div",{className:"sol-s06-shared-item",children:[(0,s.jsx)("span",{className:"sol-s06-shared-ic",children:e.icon}),(0,s.jsxs)("div",{children:[(0,s.jsx)("b",{children:e.t}),(0,s.jsx)("span",{children:e.d})]})]},e.t))})]}),(0,s.jsx)(eT,{label:"Why this matters at renewal",children:"Vertical-specific tools force you to re-buy the platform every time the business changes shape. One operating system means a new contract type is a configuration, not a project."})]})},"SolutionsMileTruthLearningUnused",0,function(){let e=(0,n.useReducedMotion)();return(0,s.jsxs)(ew,{id:"miletruth-learning",bg:"mesh",children:[(0,s.jsx)(ej,{n:"05",label:"MileTruth AI",title:(0,s.jsxs)(s.Fragment,{children:["EVERY SHIPMENT MAKES",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"THE NEXT ONE SMARTER."})]}),lede:"MileTruth AI continuously learns from completed operations so future planning gets faster and more accurate.",sub:"Most systems plan from a map. MileTruth plans from your history on that map — the delays you actually hit, on the roads you actually run.",center:!0}),(0,s.jsx)(p.StaggerChildren,{stagger:.12,duration:.7,yOffset:26,triggerOnce:!0,className:"sol-s05-loopstrip",children:eG.map((e,o)=>(0,s.jsxs)("div",{className:"sol-s05-loopstep",children:[(0,s.jsx)("span",{className:"sol-s05-loopnum",children:`0${o+1}`}),(0,s.jsx)("span",{className:"sol-s05-loopic",children:e.icon}),(0,s.jsx)("b",{children:e.t}),(0,s.jsx)("span",{children:e.d})]},e.t))}),(0,s.jsxs)("div",{className:"sol-s05-scenario-grid",children:[(0,s.jsxs)("div",{className:"sol-s05-scen-card sol-s05-scen-card--yesterday",children:[(0,s.jsxs)("div",{className:"sol-s05-scen-head",children:[(0,s.jsx)("span",{className:"sol-s05-scen-tag",children:"Yesterday’s Scenario"}),(0,s.jsxs)("span",{className:"sol-s05-scen-time",children:[(0,s.jsx)("span",{className:"sol-s05-scen-ic",children:ef}),"08:10 – 09:04"]})]}),(0,s.jsx)("h3",{children:"Heavy Traffic on Route 4"}),(0,s.jsxs)("svg",{viewBox:"0 0 260 92",className:"sol-s05-trace","aria-hidden":"true",children:[(0,s.jsx)("circle",{cx:"18",cy:"46",r:"6",className:"st-node"}),(0,s.jsx)("circle",{cx:"242",cy:"46",r:"6",className:"st-node"}),(0,s.jsx)("path",{d:"M18 46 Q112 8 242 46",className:"st-path st-path--slow"}),(0,s.jsx)("path",{d:"M18 46 Q112 84 242 46",className:"st-path st-path--fast"}),(0,s.jsx)("text",{x:"118",y:"18",className:"st-cap",textAnchor:"middle",children:"DRIVER A · 32 MIN"}),(0,s.jsx)("text",{x:"118",y:"82",className:"st-cap st-cap--ok",textAnchor:"middle",children:"DRIVER B · 27 MIN"})]}),(0,s.jsxs)("ul",{className:"sol-s05-scen-list",children:[(0,s.jsx)("li",{children:"• Driver A took 32 minutes due to congestion."}),(0,s.jsx)("li",{children:"• Driver B took 27 minutes on an alternative path."}),(0,s.jsx)("li",{children:"• Rain delayed the morning pickup by 10 minutes."})]}),(0,s.jsxs)("div",{className:"sol-s05-memory-badge",children:[(0,s.jsx)("span",{className:"sol-s05-c-ic",children:et}),(0,s.jsx)("b",{children:"MileTruth AI Remembers This Pattern"})]}),(0,s.jsxs)("div",{className:"sol-s05-scen-foot",children:[(0,s.jsx)("span",{children:"Outcome"}),(0,s.jsx)("b",{children:"5 minutes lost · pattern stored"})]})]}),(0,s.jsxs)("div",{className:"sol-s05-arrow-col",children:[(0,s.jsx)("span",{className:"sol-s05-arrow-label",children:"Learning Loop"}),(0,s.jsxs)("div",{className:"sol-s05-core",children:[(0,s.jsx)("span",{className:`sol-s05-core-ring ${e?"is-still":""}`,"aria-hidden":"true"}),(0,s.jsx)("span",{className:`sol-s05-core-ring sol-s05-core-ring--2 ${e?"is-still":""}`,"aria-hidden":"true"}),(0,s.jsx)(z,{variant:"compact"})]}),(0,s.jsx)("span",{className:"sol-s05-arrow-ic","aria-hidden":"true",children:"➔"}),(0,s.jsx)("span",{className:"sol-s05-arrow-sub",children:"applied before dispatch"})]}),(0,s.jsxs)("div",{className:"sol-s05-scen-card sol-s05-scen-card--today",children:[(0,s.jsxs)("div",{className:"sol-s05-scen-head",children:[(0,s.jsx)("span",{className:"sol-s05-scen-tag sol-s05-scen-tag--good",children:"Today’s Operation"}),(0,s.jsxs)("span",{className:"sol-s05-scen-time",children:[(0,s.jsx)("span",{className:"sol-s05-scen-ic",children:ef}),"08:10 – 08:37"]})]}),(0,s.jsx)("h3",{children:"Route Changed Automatically"}),(0,s.jsxs)("svg",{viewBox:"0 0 260 92",className:"sol-s05-trace","aria-hidden":"true",children:[(0,s.jsx)("circle",{cx:"18",cy:"46",r:"6",className:"st-node"}),(0,s.jsx)("circle",{cx:"242",cy:"46",r:"6",className:"st-node"}),(0,s.jsx)("path",{d:"M18 46 Q112 8 242 46",className:"st-path st-path--dropped"}),(0,s.jsx)("path",{d:"M18 46 Q112 84 242 46",className:"st-path st-path--chosen"}),(0,s.jsx)("circle",{cx:"112",cy:"66",r:"5",className:"st-dot"}),(0,s.jsx)("text",{x:"118",y:"18",className:"st-cap st-cap--mute",textAnchor:"middle",children:"ROUTE 4 · AVOIDED"}),(0,s.jsx)("text",{x:"118",y:"82",className:"st-cap st-cap--ok",textAnchor:"middle",children:"PATH B · SELECTED"})]}),(0,s.jsxs)("ul",{className:"sol-s05-scen-list",children:[(0,s.jsx)("li",{children:"✓ Traffic detected again on Route 4."}),(0,s.jsx)("li",{children:"✓ System automatically reroutes the driver to path B."}),(0,s.jsxs)("li",{children:["✓ Optimal vehicle assigned · ",(0,s.jsx)("b",{children:"Delivered On Time"})]})]}),(0,s.jsx)("div",{className:"sol-s05-result-badge",children:(0,s.jsx)("b",{children:"Result: 14 Minutes Saved & Zero SLA Penalty"})}),(0,s.jsxs)("div",{className:"sol-s05-scen-foot sol-s05-scen-foot--good",children:[(0,s.jsx)("span",{children:"Outcome"}),(0,s.jsx)("b",{children:"On time · pattern reinforced"})]})]})]}),(0,s.jsxs)(p.ScrollReveal,{yOffset:20,triggerOnce:!0,className:"sol-s05-memory",children:[(0,s.jsx)("span",{className:"sol-s05-memory-title",children:"What MileTruth remembers"}),(0,s.jsx)(eE,{items:eY,center:!0})]}),(0,s.jsxs)("div",{className:"sol-s05-tail",children:[(0,s.jsx)(eT,{label:"Compounding advantage",children:"A network that has run a corridor a thousand times plans it better than a map that has never run it once. That gap widens every single day you operate."}),(0,s.jsxs)(t.default,{href:"/miletruth",className:"sol-linkbtn",children:["Explore MileTruth™ AI",(0,s.jsx)("svg",{viewBox:"0 0 13 20","aria-hidden":"true",children:(0,s.jsx)("polyline",{points:"0.5 19.5 3 19.5 12.5 10 3 0.5"})})]})]}),(0,s.jsx)(eL,{items:["Learns every trip","Plans from real history","Reroutes before the delay","Protects the SLA clock"]})]})},"SolutionsOperationsUnused",0,function(){let e=(0,n.useReducedMotion)();return(0,s.jsx)(ew,{id:"operations",bg:"redglow",map:"#E2354A",children:(0,s.jsxs)("div",{className:"sol-s04-split",children:[(0,s.jsx)("div",{className:"sol-s04-console-wrap",children:(0,s.jsxs)("div",{className:"sol-s04-console",children:[(0,s.jsxs)("div",{className:"sol-s04-map-header",children:[(0,s.jsx)("span",{className:"sol-livedot"})," ",(0,s.jsx)("b",{children:"Live Operations Console"}),(0,s.jsxs)("span",{className:"sol-s04-regions",children:[(0,s.jsx)("i",{className:"is-on",children:"Region 1"}),(0,s.jsx)("i",{children:"Region 2"}),(0,s.jsx)("i",{children:"Region 3"})]})]}),(0,s.jsxs)("svg",{viewBox:"0 0 300 150",className:"sol-s04-map-svg","aria-hidden":"true",children:[(0,s.jsx)("defs",{children:(0,s.jsx)("path",{id:"solS04Route",d:"M 24 46 Q 88 16 158 56 T 276 42"})}),(0,s.jsx)("path",{d:"M0 96 Q 70 84 148 100 T 300 88",className:"sol-s04-terrain"}),(0,s.jsx)("path",{d:"M0 118 Q 84 108 162 122 T 300 112",className:"sol-s04-terrain"}),(0,s.jsx)("use",{href:"#solS04Route",className:"sol-s04-route"}),(0,s.jsx)("use",{href:"#solS04Route",className:"sol-s04-route sol-s04-route--lit"}),(0,s.jsxs)("g",{className:"sol-s04-pin",children:[(0,s.jsx)("circle",{cx:"88",cy:"28",r:"12",className:"sol-s04-pin-ring"}),(0,s.jsx)("circle",{cx:"88",cy:"28",r:"4.5",className:"sol-s04-pin-core"})]}),(0,s.jsxs)("g",{className:"sol-s04-pin sol-s04-pin--d2",children:[(0,s.jsx)("circle",{cx:"158",cy:"56",r:"12",className:"sol-s04-pin-ring"}),(0,s.jsx)("circle",{cx:"158",cy:"56",r:"5",className:"sol-s04-pin-core sol-s04-pin-core--w"})]}),(0,s.jsxs)("g",{className:"sol-s04-pin sol-s04-pin--d3",children:[(0,s.jsx)("circle",{cx:"276",cy:"42",r:"12",className:"sol-s04-pin-ring sol-s04-pin-ring--ok"}),(0,s.jsx)("circle",{cx:"276",cy:"42",r:"4.5",className:"sol-s04-pin-core sol-s04-pin-core--ok"})]}),!e&&(0,s.jsx)("circle",{r:"3.4",className:"sol-s04-packet",children:(0,s.jsx)("animateMotion",{dur:"5.2s",repeatCount:"indefinite",rotate:"auto",children:(0,s.jsx)("mpath",{href:"#solS04Route"})})})]}),(0,s.jsxs)("div",{className:"sol-s04-corridors",children:[(0,s.jsx)("span",{className:"sol-s04-corr-title",children:"Delay risk by corridor"}),eH.map(e=>(0,s.jsxs)("div",{className:"sol-s04-corr-row",children:[(0,s.jsx)("span",{children:e.name}),(0,s.jsx)("i",{className:"sol-s04-corr-track",children:(0,s.jsx)("b",{className:e.risk>55?"is-hot":"",style:{width:`${e.risk}%`}})}),(0,s.jsxs)("em",{children:[e.risk,"%"]})]},e.name))]}),(0,s.jsx)(eC,{corner:"tl",icon:ec,title:"3 trips flagged at risk",note:"Surfaced 30 minutes before the window"}),(0,s.jsx)(eC,{corner:"tr",icon:U,title:"99.2% On-Time Rate",note:"Delay warnings prevent SLA breaches"}),(0,s.jsx)(eC,{corner:"br",icon:q,title:"1,847 Active Shipments Visible",note:"Zero phone calls needed for status checks"})]})}),(0,s.jsxs)(p.ScrollReveal,{yOffset:26,triggerOnce:!0,className:"sol-s04-text",children:[(0,s.jsx)("span",{className:"sol-eyebrow sol-eyebrow--slash",children:"/ Live Control /"}),(0,s.jsxs)("h2",{className:"sol-h",children:["SEE EVERY SHIPMENT",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"AS IT MOVES."})]}),(0,s.jsx)("p",{className:"sol-lede",children:"Traditional logistics tools tell you what went wrong after a delivery fails. DoorMile shows you what is happening right now, while there is still time to fix it."}),(0,s.jsx)("p",{className:"sol-sub",children:"The difference is not the map. It is that the map is connected to the order, the driver and the SLA clock — so a red pin is an instruction, not a mystery."}),(0,s.jsx)("div",{className:"sol-s04-kpiwrap",children:(0,s.jsx)(eM,{heading:"Live now",sys:"DOORMILE ENGINE",items:[{value:42,suffix:"%",label:"Distance Saved"},{value:3,suffix:"x",label:"Faster Response"},{value:45,suffix:"ms",label:"Dispatch Latency"},{value:40,suffix:"%",label:"Fewer Tasks"}]})}),(0,s.jsx)(p.StaggerChildren,{stagger:.1,duration:.7,yOffset:22,triggerOnce:!0,className:"sol-s04-list",children:eB.map(e=>(0,s.jsxs)("div",{className:"sol-s04-item",children:[(0,s.jsx)("span",{className:"sol-s04-item-ic",children:e.icon}),(0,s.jsxs)("div",{className:"sol-s04-item-body",children:[(0,s.jsx)("b",{children:e.title}),(0,s.jsx)("p",{children:e.desc})]}),(0,s.jsx)("span",{className:"sol-s04-item-stat",children:e.stat})]},e.title))}),(0,s.jsx)(eT,{label:"What changes in the room",children:"When the control room can see a breach forming, the conversation stops being “who do we blame” and becomes “which truck do we move”. That is the whole difference between reporting and operating."})]})]})})},"SolutionsPlatformOverviewUnused",0,function(){let e=[{icon:F,label:"Orders",angle:0,metric:"1,420 Active"},{icon:D,label:"Fleet",angle:72,metric:"92% Active"},{icon:I,label:"Drivers",angle:144,metric:"1,240 Online"},{icon:P,label:"Shipments",angle:216,metric:"99.2% On-Time"},{icon:W,label:"Tracking",angle:288,metric:"Live GPS"}].map(e=>{let s=e.angle*Math.PI/180;return{...e,x2:Number((200+165*Math.cos(s)).toFixed(3)),y2:Number((200+165*Math.sin(s)).toFixed(3)),left:Number((50+41.25*Math.cos(s)).toFixed(3)),top:Number((50+41.25*Math.sin(s)).toFixed(3))}}),[t,r]=(0,o.useState)(null),[a,i]=(0,o.useState)(0),l=(0,n.useReducedMotion)();return(0,o.useEffect)(()=>{if(l)return;let e=window.setInterval(()=>i(e=>(e+1)%eF.length),2800);return()=>window.clearInterval(e)},[l]),(0,s.jsxs)(ew,{id:"platform-overview",bg:"engine",map:"#E2354A",children:[(0,s.jsxs)(p.ScrollReveal,{yOffset:22,triggerOnce:!0,className:"sol-s01-pain-banner",children:[(0,s.jsx)("span",{className:"sol-eyebrow sol-eyebrow--slash",children:"/ Operational Reality /"}),(0,s.jsxs)("h2",{className:"sol-h",children:["EVERY MORNING STARTS",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"THE SAME WAY."})]}),(0,s.jsx)("p",{className:"sol-lede",children:"06:40. The first call lands before the ops board is even open. By 09:30 the day is being run from a phone, a spreadsheet and a group chat — three systems that never agree."}),(0,s.jsx)("p",{className:"sol-sub",children:"None of this is a people problem. It is a visibility problem. The information already exists; it is just scattered across tools that were never designed to talk to each other."})]}),(0,s.jsx)(p.StaggerChildren,{stagger:.1,duration:.7,yOffset:30,triggerOnce:!0,className:"sol-s01-pain-grid",children:eR.map(e=>(0,s.jsxs)("div",{className:"sol-s01-pain-card",children:[(0,s.jsxs)("div",{className:"sol-s01-pain-top",children:[(0,s.jsx)("span",{className:"sol-s01-pain-time",children:e.time}),(0,s.jsx)("span",{className:"sol-s01-pain-ic",children:e.icon})]}),(0,s.jsx)("b",{children:e.title}),(0,s.jsx)("span",{className:"sol-s01-pain-quote",children:e.quote}),(0,s.jsx)("span",{className:"sol-s01-pain-cost",children:e.cost})]},e.time))}),(0,s.jsxs)(eT,{label:"Why it compounds",children:[(0,s.jsx)("b",{children:"73%"})," of delays happen at handoffs — and teams spend ",(0,s.jsx)("b",{children:"2.5x"})," more time coordinating those handoffs than actually executing them. The cost shows up later as a ",(0,s.jsx)("b",{children:"28%"})," higher cost to operate, long after anyone can trace it back to a 07:15 message."]}),(0,s.jsxs)(p.ScrollReveal,{yOffset:20,triggerOnce:!0,className:"sol-s01-pivot",children:[(0,s.jsx)("h3",{className:"sol-s01-pivot-h3",children:"WHAT IF EVERYTHING WAS VISIBLE FROM ONE SCREEN?"}),(0,s.jsx)("p",{className:"sol-s01-pivot-p",children:"Not another dashboard bolted on top of the chaos — one place where the order, the vehicle, the driver and the customer are looking at the same truth at the same moment."})]}),(0,s.jsx)("div",{className:"sol-connector","aria-hidden":"true",children:(0,s.jsxs)("svg",{viewBox:"0 0 40 88",preserveAspectRatio:"none",children:[(0,s.jsx)("path",{d:"M20 0 V88",className:"sol-connector-line"}),!l&&(0,s.jsx)("circle",{r:"3.2",className:"sol-connector-dot",cx:"20",cy:"0"})]})}),(0,s.jsxs)("div",{className:"sol-s01-split",children:[(0,s.jsxs)(p.ScrollReveal,{yOffset:26,triggerOnce:!0,className:"sol-s01-text",children:[(0,s.jsxs)("h3",{className:"sol-h",children:["ONE PLATFORM.",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"COMPLETE LOGISTICS CONTROL."})]}),(0,s.jsx)("p",{className:"sol-lede",children:"DoorMile connects your entire operation — orders, fleet, drivers and tracking — into one clear, connected control hub. Zero chaos."}),(0,s.jsxs)("div",{className:"sol-s01-pills",children:[(0,s.jsxs)("span",{className:"sol-s01-pill",children:[(0,s.jsx)("span",{className:"sol-livedot"})," Real-time sync"]}),(0,s.jsxs)("span",{className:"sol-s01-pill",children:[(0,s.jsx)("span",{className:"sol-livedot"})," Zero data silos"]}),(0,s.jsxs)("span",{className:"sol-s01-pill",children:[(0,s.jsx)("span",{className:"sol-livedot"})," Total control"]})]}),(0,s.jsx)(ez,{items:eA})]}),(0,s.jsxs)("div",{className:"sol-s01-stage-wrap",children:[(0,s.jsxs)("div",{className:"sol-s01-status",children:[(0,s.jsxs)("span",{className:"sol-s01-status-l",children:[(0,s.jsx)("span",{className:"sol-livedot"})," System nominal"]}),(0,s.jsx)("span",{className:"sol-s01-status-r",children:"sync 45ms · 5 modules connected"})]}),(0,s.jsxs)("div",{className:"sol-s01-stage",children:[(0,s.jsxs)("svg",{className:"sol-s01-lines",viewBox:"0 0 400 400","aria-hidden":"true",children:[(0,s.jsx)("circle",{cx:"200",cy:"200",r:"165",className:"sol-s01-orbit"}),(0,s.jsx)("circle",{cx:"200",cy:"200",r:"118",className:"sol-s01-orbit sol-s01-orbit--in"}),e.map((e,o)=>(0,s.jsxs)("g",{children:[(0,s.jsx)("line",{x1:"200",y1:"200",x2:e.x2,y2:e.y2,className:`sol-s01-line ${t===o?"is-active":""}`}),(0,s.jsx)("circle",{cx:(200+e.x2)/2,cy:(200+e.y2)/2,r:"2.5",className:"sol-s01-particle"})]},e.label))]}),(0,s.jsxs)("div",{className:"sol-s01-hub",children:[(0,s.jsx)("img",{src:"/images/cropped-image-2.png",alt:"DoorMile Hub Logo",className:"sol-s01-hub-logo",loading:"lazy",decoding:"async"}),(0,s.jsx)("span",{className:"sol-s01-hub-label",children:"DoorMile Hub"}),(0,s.jsx)("span",{className:"sol-s01-hub-pulse","aria-hidden":"true"})]}),e.map((e,o)=>{let a=t===o;return(0,s.jsxs)("button",{type:"button",className:`sol-s01-node ${a?"is-active":""}`,style:{left:`${e.left}%`,top:`${e.top}%`},onMouseEnter:()=>r(o),onMouseLeave:()=>r(null),onFocus:()=>r(o),onBlur:()=>r(null),"aria-label":`${e.label} — ${e.metric}`,children:[(0,s.jsx)("span",{className:"sol-s01-node-ic",children:e.icon}),(0,s.jsx)("span",{className:"sol-s01-node-label",children:e.label}),(0,s.jsx)("span",{className:"sol-s01-node-metric",children:e.metric})]},e.label)})]}),(0,s.jsx)("div",{className:"sol-s01-floats",children:eF.map((e,o)=>(0,s.jsxs)("div",{className:`sol-s01-float ${a===o?"is-live":""}`,children:[(0,s.jsx)("span",{className:"sol-s01-float-ic",children:e.icon}),(0,s.jsxs)("div",{children:[(0,s.jsx)("b",{children:e.title}),(0,s.jsx)("span",{children:e.note})]}),(0,s.jsx)("span",{className:"sol-s01-float-dot","aria-hidden":"true"})]},e.title))})]})]})]})},"SolutionsResults",0,eZ,"SolutionsSectionsShell",0,e5,"SolutionsWhyDoormile",0,eW,"SolutionsWorkflowJourneyUnused",0,function(){let[e,t]=(0,o.useState)(0),[r,a]=(0,o.useState)(!1),i=(0,n.useReducedMotion)(),l=(0,o.useRef)(null),c=(0,d.useInView)(l,{margin:"-15% 0px"});(0,o.useEffect)(()=>{if(i||r||!c)return;let e=window.setInterval(()=>t(e=>(e+1)%e$.length),4200);return()=>window.clearInterval(e)},[i,r,c]);let p=e$[e],h=(e+1)/e$.length*100;return(0,s.jsxs)(ew,{id:"workflow",bg:"graph",children:[(0,s.jsx)(ej,{n:"03",label:"Connected Journey",title:(0,s.jsxs)(s.Fragment,{children:["EVERY SHIPMENT FOLLOWS",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"accent",children:"ONE CONNECTED JOURNEY."})]}),lede:"Watch how DoorMile automatically guides every shipment from order intake to completion without manual handoff friction.",sub:"Six checkpoints, no re-entry between them. Each one writes to the same record, so the trip explains itself long after it has finished.",center:!0}),(0,s.jsxs)("div",{className:"sol-s03-journey",ref:l,children:[(0,s.jsxs)("div",{className:"sol-s03-railwrap",children:[(0,s.jsx)("div",{className:"sol-s03-rail","aria-hidden":"true",children:(0,s.jsx)("span",{className:"sol-s03-rail-fill",style:{width:`${h}%`}})}),(0,s.jsx)("div",{className:"sol-s03-scrubber",role:"tablist","aria-label":"Shipment journey checkpoints",children:e$.map((o,r)=>{let i=e===r;return(0,s.jsxs)("button",{type:"button",role:"tab","aria-selected":i,"aria-controls":"sol-s03-panel",className:`sol-s03-step ${i?"is-active":""}`,onClick:()=>{t(r),a(!0)},children:[(0,s.jsx)("span",{className:"sol-s03-num",children:o.id}),(0,s.jsx)("span",{className:"sol-s03-ic",children:o.icon}),(0,s.jsx)("span",{className:"sol-s03-title",children:o.title})]},o.id)})})]}),(0,s.jsxs)("div",{className:"sol-s03-canvas",id:"sol-s03-panel",role:"tabpanel",children:[(0,s.jsxs)("div",{className:"sol-s03-text",children:[(0,s.jsxs)("span",{className:"sol-eyebrow",children:["Checkpoint ",p.id]}),(0,s.jsx)("h3",{className:"sol-s03-h3",children:p.title}),(0,s.jsx)("p",{className:"sol-s03-p",children:p.desc}),(0,s.jsx)("p",{className:"sol-s03-replaces",children:p.replaces}),(0,s.jsx)(eE,{items:p.chips})]}),(0,s.jsxs)("div",{className:"sol-s03-stage",children:[(0,s.jsx)("div",{className:"sol-s03-art",children:(0,s.jsx)(eV,{index:e})},p.id),(0,s.jsxs)("div",{className:"sol-s03-preview-card",children:[(0,s.jsxs)("div",{className:"sol-s03-pc-head",children:[(0,s.jsx)("span",{className:"sol-livedot"})," ",p.cardTitle]}),(0,s.jsx)("p",{className:"sol-s03-pc-body",children:p.cardDetail})]})]})]}),(0,s.jsxs)("div",{className:"sol-s03-log",children:[(0,s.jsxs)("div",{className:"sol-s03-log-head",children:[(0,s.jsx)("span",{className:"sol-livedot"})," System log",(0,s.jsx)("span",{className:"sol-s03-log-sys",children:"DOORMILE ENGINE"})]}),(0,s.jsx)("div",{className:"sol-s03-log-lines",children:e$.map((o,t)=>(0,s.jsxs)("code",{className:`sol-s03-log-line ${t===e?"is-now":""} ${t<e?"is-past":""}`,children:[(0,s.jsx)("b",{children:o.id})," ",o.log]},o.id))})]}),(0,s.jsx)(eS,{items:[{value:45,suffix:"ms",label:"Dispatch Latency"},{text:"0",label:"Manual Handoffs"},{value:6,label:"Tracked Checkpoints"},{value:99.2,decimals:1,suffix:"%",label:"On-Time Delivery"}]})]})]})},"default",0,function(){return(0,s.jsxs)(e5,{children:[(0,s.jsx)(e_,{}),(0,s.jsx)(eJ,{}),(0,s.jsx)(eW,{}),(0,s.jsx)(e2,{}),(0,s.jsx)(eZ,{})]})}],32850)}]); |