:root { --blue-800:#082e68; --blue-700:#075ecf; --blue-600:#087dff; --cyan:#16d1ec; --ink:#10213f; --text:#304361; --muted:#72829b; --line:#e5edf8; --surface:#f5f9ff; --white:#fff; --container:1200px; --ease:cubic-bezier(.22,1,.36,1); --shadow:0 20px 50px rgb(24 72 138 / 12%); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:72px; } body { min-width:320px; margin:0; color:var(--text); background:#fff; font:16px/1.7 "PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif; -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } button,input,textarea,select { font:inherit; } button { cursor:pointer; } svg { display:block; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } h1,h2,h3,p { margin:0; } h1,h2,h3 { color:var(--ink); } ul { margin:0; padding:0; list-style:none; } .sprite { position:absolute; width:0; height:0; overflow:hidden; } .container { width:min(calc(100% - 40px),var(--container)); margin:auto; } .skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:8px 14px; color:white; background:var(--blue-700); border-radius:7px; transform:translateY(-150%); } .skip-link:focus { transform:translateY(0); } :focus-visible { outline:3px solid #22d4ed; outline-offset:3px; }
.site-header { position:fixed; z-index:30; top:0; right:0; left:0; height:72px; color:var(--ink); background:#fff; border-bottom:1px solid var(--line); box-shadow:0 3px 15px rgb(22 58 111 / 6%); transition:.25s var(--ease); } .site-header.is-scrolled { color:var(--ink); background:rgb(255 255 255 / 96%); border-color:var(--line); box-shadow:0 4px 18px rgb(29 63 107 / 8%); backdrop-filter:blur(12px); } .nav-wrap { display:flex; align-items:center; height:100%; } .brand { display:flex; flex-shrink:0; align-items:center; gap:9px; color:inherit; } .brand-mark { position:relative; display:grid; width:31px; height:31px; overflow:hidden; place-items:center; transform:skewY(-12deg); } .brand-mark::before { position:absolute; inset:2px; content:""; border:2px solid currentColor; border-radius:8px; opacity:.82; } .brand-mark i { position:absolute; width:7px; height:7px; background:#35d9f3; border-radius:50%; box-shadow:0 0 12px #35d9f3; } .brand-mark i:nth-child(1) { top:5px; left:7px; } .brand-mark i:nth-child(2) { right:5px; bottom:8px; } .brand-mark i:nth-child(3) { bottom:3px; left:4px; width:4px; height:4px; } .brand b { display:block; font-size:19px; line-height:1.12; letter-spacing:.04em; } .brand small { display:block; margin-top:2px; font-size:7px; font-weight:600; letter-spacing:.09em; opacity:.7; } .main-nav { display:flex; gap:36px; margin:auto; } .main-nav a { position:relative; padding:23px 0; font-size:14px; white-space:nowrap; opacity:.8; transition:color .2s,opacity .2s; } .main-nav a::after { position:absolute; right:0; bottom:15px; left:0; height:2px; content:""; background:#46dff4; opacity:0; transform:scaleX(.3); transition:.2s var(--ease); } .main-nav a:hover,.main-nav a.is-active { opacity:1; } .main-nav a.is-active::after,.main-nav a:hover::after { opacity:1; transform:scaleX(1); } .nav-actions { display:flex; align-items:center; gap:18px; } .text-button { padding:5px 0; color:inherit; font-size:14px; background:none; border:0; opacity:.88; } .button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; color:white; font-weight:600; line-height:1; background:linear-gradient(105deg,#087dff,#009adf); border:0; border-radius:8px; box-shadow:0 9px 22px rgb(0 91 207 / 21%); transition:transform .2s var(--ease),box-shadow .2s; } .button:hover { box-shadow:0 13px 26px rgb(0 91 207 / 30%); transform:translateY(-2px); } .button svg { width:17px; height:17px; } .button-small { min-height:40px; padding:0 14px; font-size:13px; } .menu-toggle { display:none; padding:6px; color:inherit; background:none; border:0; } .menu-toggle svg { width:25px; height:25px; }
.hero { position:relative; min-height:744px; overflow:hidden; color:white; background:linear-gradient(118deg,#061c42 0%,#092f70 51%,#096ca8 100%); } .hero-grid-bg { position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgb(153 218 255 / .28) 1px,transparent 1px),linear-gradient(90deg,rgb(153 218 255 / .28) 1px,transparent 1px); background-size:60px 60px; mask-image:linear-gradient(90deg,#000 0%,transparent 90%); } .hero-glow { position:absolute; border-radius:50%; filter:blur(2px); } .hero-glow-one { top:-310px; right:-200px; width:820px; height:820px; border:1px solid rgb(111 225 255 / 20%); box-shadow:inset 0 0 130px rgb(47 175 255 / 13%),0 0 180px rgb(8 160 255 / 16%); } .hero-glow-two { bottom:-430px; left:23%; width:730px; height:730px; background:radial-gradient(circle,rgb(25 191 255 / 15%),transparent 66%); } .hero-layout { position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; min-height:672px; padding:155px 0 80px; align-items:center; } .eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:13px; color:var(--blue-700); font-size:20px; font-weight:700; letter-spacing:.13em; } .eyebrow::before { width:24px; height:2px; content:""; background:currentColor; } .eyebrow-light { color:#84e9f7; } .hero h1 { color:#fff; font-size:clamp(43px,4.25vw,62px); line-height:1.18; letter-spacing:.02em; } .hero h1 em { font-style:normal; color:#7edfff; } .hero-description { max-width:550px; margin-top:23px; color:rgb(225 243 255 / 85%); font-size:17px; line-height:1.85; } .hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; } .button-large { min-height:51px; padding:0 23px; } .button-ghost { color:#e8f8ff; background:rgb(255 255 255 / 8%); border:1px solid rgb(191 232 255 / 46%); box-shadow:none; } .button-ghost:hover { background:rgb(255 255 255 / 15%); box-shadow:none; } .hero-points { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:30px; color:#c7eaff; font-size:13px; } .hero-points li { display:flex; align-items:center; } .hero-points li::before { width:4px; height:4px; margin-right:8px; content:""; background:#31d5ec; border-radius:50%; box-shadow:0 0 8px #31d5ec; }
.hero-visual { position:relative; min-height:422px; } .orbital-ring { position:absolute; border:1px solid rgb(156 227 255 / 17%); border-radius:50%; transform:rotate(-17deg); } .ring-one { top:-16px; right:-34px; width:470px; height:350px; } .ring-two { top:24px; right:15px; width:430px; height:285px; border-style:dashed; } .dashboard { position:absolute; z-index:2; top:14px; right:4%; width:min(100%,622px); overflow:hidden; color:#eff9ff; background:linear-gradient(145deg,rgb(11 55 111 / 94%),rgb(9 74 129 / 91%)); border:1px solid rgb(157 222 255 / 37%); border-radius:12px; box-shadow:0 28px 80px rgb(1 9 38 / 35%),inset 0 1px rgb(255 255 255 / 17%); transform:perspective(1000px) rotateY(-4deg) rotateX(1deg); } .dash-top { display:flex; align-items:center; justify-content:space-between; height:43px; padding:0 16px; color:#a7caea; font-size:11px; background:rgb(2 25 64 / 38%); border-bottom:1px solid rgb(128 202 239 / 19%); } .dash-top>span:last-child { display:flex; align-items:center; gap:6px; } .dash-top b { width:6px; height:6px; background:#36e3a0; border-radius:50%; box-shadow:0 0 8px #36e3a0; } .dash-brand { display:flex; align-items:center; gap:6px; color:#e4f7ff; font-size:12px; font-weight:700; } .dash-brand i { width:9px; height:9px; background:#1ad6ee; border-radius:2px; transform:rotate(45deg); } .dash-body { display:flex; min-height:315px; } .dash-side { display:flex; flex-direction:column; align-items:center; gap:17px; width:45px; padding-top:23px; background:rgb(1 19 51 / 30%); border-right:1px solid rgb(142 206 243 / 13%); } .dash-side i { width:13px; height:13px; border:1px solid #6aa9d7; border-radius:3px; opacity:.55; } .dash-side i.on { background:#23bdff; border-color:#48d8ff; opacity:1; box-shadow:0 0 10px rgb(44 209 255 / 65%); } .dash-main { flex:1; padding:18px 17px 15px; } .dash-heading { display:flex; align-items:center; justify-content:space-between; } .dash-heading small { display:block; color:#8eb0cc; font-size:10px; } .dash-heading strong { display:block; color:#f1fbff; font-size:16px; } .dash-heading>span { padding:3px 7px; color:#92c9ec; font-size:9px; background:rgb(106 188 234 / 9%); border:1px solid rgb(127 209 249 / 19%); border-radius:3px; } .dash-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:15px; } .dash-kpis>div { min-width:0; padding:10px; background:linear-gradient(135deg,rgb(83 164 220 / 15%),rgb(22 98 162 / 8%)); border:1px solid rgb(139 213 255 / 12%); border-radius:5px; } .dash-kpis small,.dash-kpis em { display:block; color:#92b6d2; font-size:9px; font-style:normal; white-space:nowrap; } .dash-kpis b { display:block; margin:2px 0; color:#f5fcff; font-size:20px; line-height:1.2; } .dash-kpis sup { font-size:10px; } .dash-kpis em { color:#58e4b4; } .dash-kpis .neutral { color:#a7cced; } .dash-charts { display:grid; grid-template-columns:1.25fr .75fr; gap:10px; margin-top:10px; } .route-map,.dispatch-chart { min-width:0; min-height:145px; padding:10px; background:rgb(4 37 87 / 44%); border:1px solid rgb(123 208 255 / 13%); border-radius:5px; } .chart-label { display:flex; justify-content:space-between; color:#e5f7ff; font-size:10px; } .chart-label small { color:#81aed0; font-size:9px; } .map-lines { position:relative; height:91px; margin-top:8px; overflow:hidden; background:linear-gradient(135deg,rgb(63 174 205 / 8%),transparent); } .map-lines::before { position:absolute; inset:0; content:""; opacity:.22; background-image:linear-gradient(25deg,transparent 49%,#76d9ee 50%,transparent 51%),linear-gradient(-31deg,transparent 49%,#4bbdff 50%,transparent 51%); background-size:55px 45px,68px 59px; } .map-lines>i { position:absolute; width:90px; height:38px; border:1px solid #51c8ef; border-radius:50%; transform:rotate(-27deg); opacity:.55; } .map-lines i:nth-child(1) { top:20px; left:8px; } .map-lines i:nth-child(2) { top:8px; right:-17px; width:100px; border-color:#148cf4; } .map-lines i:nth-child(3) { right:31px; bottom:3px; width:83px; border-color:#24a4e0; } .map-lines i:nth-child(4) { bottom:9px; left:42px; width:60px; border-color:#8be9ff; } .pin { position:absolute; width:6px; height:6px; background:#5ae6ff; border-radius:50%; box-shadow:0 0 0 3px rgb(90 230 255 / 15%),0 0 10px #5ae6ff; } .pin-a { top:22px; left:34%; }.pin-b { right:21%; bottom:22px; }.pin-c { top:17px; right:10%; }.truck-dot { position:absolute; bottom:31px; left:51%; display:grid; width:20px; height:20px; color:white; background:#198ee9; border-radius:50%; place-items:center; box-shadow:0 0 0 5px rgb(26 172 241 / 17%); }.truck-dot svg { width:12px; } .map-caption { display:flex; justify-content:space-between; margin-top:3px; color:#8db2d1; font-size:8px; } .map-caption span:last-child { color:#60dbad; } .dispatch-chart svg { width:100%; height:84px; margin-top:4px; } .chart-grid { fill:none; stroke:#5397c9; stroke-opacity:.2; stroke-width:.6; }.chart-line { fill:none; stroke:#42c7fb; stroke-width:2; }.chart-days { display:flex; justify-content:space-between; margin-top:-3px; color:#88b5d4; font-size:8px; }
.floating-card { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:10px 12px; color:#2c5579; background:rgb(255 255 255 / 96%); border:1px solid #d4ecfb; border-radius:7px; box-shadow:0 14px 28px rgb(0 25 77 / 20%); } .floating-card small,.floating-card strong { display:block; font-size:10px; line-height:1.45; white-space:nowrap; }.floating-card small { color:#7d99b4; }.floating-card strong { color:#235274; font-size:11px; }.float-icon,.receipt-icon { display:grid; width:29px; height:29px; color:#087dde; background:#e1f5ff; border-radius:6px; place-items:center; }.float-icon svg,.receipt-icon svg { width:17px; }.ok { display:grid; width:16px; height:16px; margin-left:5px; color:#15a76b; background:#dff8ee; border-radius:50%; place-items:center; }.ok svg { width:10px; }.floating-route { bottom:8px; left:0; }.floating-receipt { top:68px; right:-17px; }.receipt-icon { color:#637cf3; background:#edf0ff; }.hero-footer { position:relative; z-index:1; display:flex; align-items:center; gap:20px; padding-bottom:25px; color:#9ecce7; font-size:12px; }.hero-footer i { flex:1; height:1px; background:linear-gradient(90deg,rgb(157 226 255 / 42%),transparent); }.hero-footer a { display:flex; align-items:center; gap:4px; color:#c8ecff; }.hero-footer a svg { width:15px; }
.trust-strip { position:relative; z-index:3; margin-top:-1px; background:white; border-bottom:1px solid var(--line); }.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }.trust-grid>div { display:flex; align-items:center; gap:13px; min-height:98px; padding:18px 34px; border-right:1px solid var(--line); }.trust-grid>div:first-child { border-left:1px solid var(--line); }.trust-grid>div>svg { width:28px; height:28px; color:#087ce3; }.trust-grid b,.trust-grid small { display:block; }.trust-grid b { color:#243957; font-size:15px; }.trust-grid small { color:var(--muted); font-size:12px; }
.section { padding:104px 0; }.section-heading { margin-bottom:44px; }.section-heading.centered { text-align:center; }.section-heading.centered .eyebrow { justify-content:center; }.section-heading h2,.advantage-copy h2,.operations-copy h2 { font-size:clamp(30px,3vw,42px); line-height:1.28; letter-spacing:.01em; }.section-heading>p:not(.eyebrow) { max-width:550px; margin:12px auto 0; color:var(--muted); }.feature-section { background:var(--surface); }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.feature-card { position:relative; min-height:201px; padding:24px; overflow:hidden; background:#fff; border:1px solid #e1ebf7; border-radius:13px; box-shadow:0 8px 20px rgb(40 86 143 / 3%); transition:transform .24s var(--ease),box-shadow .24s,border-color .24s; }.feature-card:hover { border-color:#b5dfff; box-shadow:var(--shadow); transform:translateY(-4px); }.feature-card h3 { margin-top:16px; font-size:19px; }.feature-card p { max-width:245px; margin-top:7px; color:var(--muted); font-size:13px; line-height:1.65; }.feature-icon { display:grid; width:43px; height:43px; color:#087de1; background:#e8f5ff; border-radius:9px; place-items:center; }.feature-icon svg { width:24px; height:24px; }.feature-num { position:absolute; top:16px; right:19px; color:#b8c8da; font-size:12px; }.feature-wide { display:grid; grid-column:span 2; grid-template-columns:43px 1fr auto; gap:16px; align-items:start; }.feature-wide h3 { margin-top:0; }.route-art { position:absolute; right:22px; bottom:15px; width:139px; height:60px; overflow:hidden; opacity:.7; }.route-art::before,.route-art::after { position:absolute; width:95px; height:50px; content:""; border:2px solid #5cc4ff; border-radius:50%; transform:rotate(-23deg); }.route-art::before { right:1px; bottom:-23px; }.route-art::after { right:38px; bottom:-29px; border-color:#b2e6ff; }.route-art i { position:absolute; z-index:1; right:37px; top:19px; width:8px; height:8px; background:#0c95ef; border-radius:50%; box-shadow:0 0 0 5px #e1f6ff; }.route-art i:nth-child(2) { right:100px; top:38px; width:7px; height:7px; background:#2dd7ca; }.route-art b { position:absolute; z-index:1; right:68px; top:4px; width:5px; height:5px; background:#4fc7ff; border-radius:50%; }.feature-ai { min-height:201px; color:#fff; background:linear-gradient(135deg,#0869d1,#027bb4); border:0; box-shadow:0 18px 32px rgb(7 106 202 / 22%); }.feature-ai h3 { color:#fff; }.feature-ai p { color:#d4efff; }.feature-ai .feature-icon { color:#fff; background:rgb(255 255 255 / 16%); }.feature-ai .feature-num { color:#9fd3ff; }.ai-chip { position:absolute; right:22px; bottom:19px; display:grid; width:67px; height:67px; color:#dcfbff; font-size:15px; font-weight:700; border:1px solid rgb(199 245 255 / 64%); border-radius:50%; background:radial-gradient(circle,#237bc7 0 41%,transparent 43%),conic-gradient(#63ebff,#75a5ff,#2be1eb,#63ebff); place-items:center; }.ai-chip::before { position:absolute; inset:7px; content:""; background:#1372bd; border-radius:50%; }.ai-chip { isolation:isolate; }.ai-chip::before { z-index:-1; }

.advantage-section { background:#fff; }.advantage-layout { display:grid; grid-template-columns:1fr 1fr; gap:68px; align-items:center; }.advantage-copy>p:not(.eyebrow) { max-width:515px; margin-top:15px; color:var(--muted); }.advantage-stage { position:relative; min-height:287px; margin:28px 0 19px; padding:19px; overflow:hidden; background:linear-gradient(140deg,#f2faff,#dcefff); border:1px solid #c9e5f8; border-radius:14px; }.stage-grid { position:absolute; inset:0; opacity:.42; background-image:linear-gradient(#8cc7ec 1px,transparent 1px),linear-gradient(90deg,#8cc7ec 1px,transparent 1px); background-size:27px 27px; mask-image:linear-gradient(135deg,#000,transparent 78%); }.stage-head { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; }.stage-head>span { color:#58a1d0; font-size:14px; font-weight:700; letter-spacing:.08em; }.stage-head i { display:grid; width:49px; height:49px; color:#087be1; background:#fff; border-radius:10px; box-shadow:0 10px 20px rgb(33 126 192 / 13%); place-items:center; }.stage-head svg { width:26px; height:26px; }.stage-content { position:relative; z-index:1; max-width:330px; margin-top:43px; }.stage-content small { color:#488dbd; font-size:11px; }.stage-content strong { display:block; margin:5px 0; color:#164a75; font-size:22px; }.stage-content p { color:#527697; font-size:13px; }.stage-metric { position:absolute; z-index:1; right:17px; bottom:17px; padding:7px 10px; color:#0a69bd; font-size:11px; background:rgb(255 255 255 / 80%); border:1px solid #c4e7fa; border-radius:5px; }.link-button { display:inline-flex; align-items:center; gap:6px; padding:0; color:var(--blue-700); font-weight:600; background:none; border:0; }.link-button svg { width:17px; }.advantage-list { display:grid; gap:9px; }.advantage-item { display:grid; grid-template-columns:29px 43px 1fr; align-items:center; gap:13px; min-height:82px; padding:13px 16px; color:var(--ink); text-align:left; background:#fff; border:1px solid var(--line); border-radius:9px; transition:.2s var(--ease); }.advantage-item:hover,.advantage-item.is-active { background:#f7fbff; border-color:#69baff; box-shadow:0 10px 25px rgb(26 109 196 / 11%); transform:translateX(4px); }.advantage-item>span { color:#96abc0; font-size:11px; }.advantage-item>i { display:grid; width:39px; height:39px; color:#087de1; background:#e7f5ff; border-radius:8px; place-items:center; }.advantage-item>i svg { width:21px; }.advantage-item strong,.advantage-item small { grid-column:3; display:block; }.advantage-item strong { align-self:end; font-size:14px; }.advantage-item small { align-self:start; color:var(--muted); font-size:11px; }
.solution-section { background:var(--surface); }.solution-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; }.solution-heading>p { max-width:420px; color:var(--muted); font-size:15px; }.solution-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.solution-card { position:relative; min-height:291px; padding:18px; overflow:hidden; color:#fff; background:linear-gradient(140deg,#0f5595,#0877aa); border-radius:12px; box-shadow:0 12px 28px rgb(28 93 159 / 13%); }.solution-card::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 35%,rgb(5 39 87 / 85%)); pointer-events:none; }.solution-card>span,.solution-card h3,.solution-card p,.solution-card a { position:relative; z-index:1; }.solution-card>span { color:#94e8f8; font-size:9px; font-weight:700; letter-spacing:.13em; }.solution-card h3 { margin-top:89px; color:white; font-size:25px; line-height:1.25; }.solution-card p { color:#d8effc; font-size:12px; }.solution-card a { display:inline-flex; align-items:center; gap:4px; margin-top:11px; color:#8be8ff; font-size:12px; }.solution-card a svg { width:16px; }.solution-art { position:absolute; top:0; right:0; left:0; height:180px; overflow:hidden; background:linear-gradient(145deg,rgb(45 166 225 / 45%),transparent 75%); }.solution-art>svg { position:absolute; width:57px; height:57px; color:rgb(206 246 255 / 87%); }.logistics .solution-art>svg { top:43px; right:42px; transform:rotate(-4deg); }.city-line { position:absolute; top:37px; left:23px; width:94px; height:50px; border:1px solid rgb(199 242 255 / 31%); border-bottom:0; clip-path:polygon(0 100%,0 50%,15% 50%,15% 15%,30% 15%,30% 60%,47% 60%,47% 0,65% 0,65% 48%,82% 48%,82% 20%,100% 20%,100% 100%); }.road { position:absolute; width:240px; height:72px; border:2px solid rgb(133 228 255 / 50%); border-radius:50%; transform:rotate(-22deg); }.road-one { top:87px; left:-45px; }.road-two { top:44px; right:-100px; border-color:rgb(206 246 255 / 30%); }.cold { background:linear-gradient(140deg,#1b66a7,#1993b4); }.cold .solution-art>svg { top:49px; right:55px; }.snow { position:absolute; color:#b3f5ff; font-size:27px; }.snow-one { top:22px; left:43px; }.snow-two { top:52px; left:100px; font-size:16px; }.thermo { position:absolute; top:36px; right:20px; width:18px; height:70px; border:2px solid rgb(201 247 255 / 58%); border-radius:12px; }.thermo::after { position:absolute; bottom:6px; left:4px; width:7px; height:26px; content:""; background:#81edff; border-radius:5px; }.retail { background:linear-gradient(140deg,#266dae,#1584c1); }.retail .solution-art>svg { right:38px; bottom:43px; width:53px; }.warehouse { position:absolute; top:35px; left:28px; width:98px; height:70px; border:1px solid rgb(208 246 255 / 47%); clip-path:polygon(0 25%,50% 0,100% 25%,100% 100%,0 100%); }.warehouse::before { position:absolute; right:30px; bottom:0; left:30px; height:30px; content:""; border:1px solid rgb(208 246 255 / 44%); }.store { position:absolute; bottom:36px; width:31px; height:28px; border:1px solid rgb(198 244 255 / 53%); }.store::before { position:absolute; top:-8px; right:-3px; left:-3px; height:7px; content:""; background:repeating-linear-gradient(90deg,#b5efff 0 4px,#48a5db 4px 8px); }.store-one { left:154px; }.store-two { left:205px; }.fleet { background:linear-gradient(140deg,#145581,#007cb4); }.fleet .solution-art>svg { top:28px; right:31px; width:64px; height:64px; }.factory { position:absolute; top:43px; left:26px; width:114px; height:70px; border:1px solid rgb(204 246 255 / 42%); clip-path:polygon(0 35%,20% 35%,20% 0,34% 22%,48% 0,62% 22%,76% 0,100% 35%,100% 100%,0 100%); }.fleet-trucks { position:absolute; right:31px; bottom:31px; display:flex; gap:7px; }.fleet-trucks i { width:32px; height:17px; border:2px solid rgb(192 241 255 / 64%); border-radius:2px; }.linehaul { background:linear-gradient(140deg,#1e5e9a,#087eaf); }.linehaul .solution-art>svg { right:45px; bottom:39px; }.mountain { position:absolute; top:32px; left:13px; width:164px; height:80px; background:linear-gradient(135deg,transparent 49%,rgb(188 240 255 / 33%) 50%,transparent 51%),linear-gradient(45deg,transparent 49%,rgb(188 240 255 / 43%) 50%,transparent 51%); background-size:74px 65px,89px 78px; }.long-road { position:absolute; right:-35px; bottom:24px; width:210px; height:60px; border-top:3px solid rgb(103 220 248 / 58%); border-radius:50%; transform:rotate(-17deg); }.bulk { background:linear-gradient(140deg,#25537f,#1e78b1); }.bulk .solution-art>svg { top:52px; right:39px; }.bulk-shape { position:absolute; top:36px; left:27px; width:94px; height:79px; background:rgb(202 245 255 / 16%); border:1px solid rgb(208 249 255 / 41%); clip-path:polygon(0 100%,0 56%,25% 24%,39% 45%,63% 0,100% 100%); }.bulk-shape.second { top:55px; left:91px; opacity:.55; transform:scale(.72); }

.operations-section { overflow:hidden; background:#fff; }.operations-layout { display:grid; grid-template-columns:1fr 1fr; gap:107px; align-items:center; }.operations-visual { position:relative; min-height:430px; background:linear-gradient(140deg,#e1f4ff,#f9fcff); border:1px solid #d7edf9; border-radius:18px; }.operations-visual::before { position:absolute; inset:0; content:""; opacity:.45; background-image:linear-gradient(#a8d9f4 1px,transparent 1px),linear-gradient(90deg,#a8d9f4 1px,transparent 1px); background-size:30px 30px; mask-image:linear-gradient(135deg,#000,transparent 80%); }.phone-frame { position:absolute; z-index:1; top:28px; left:50%; width:210px; height:391px; padding:20px 12px 8px; overflow:hidden; background:white; border:7px solid #193555; border-radius:27px; box-shadow:0 24px 40px rgb(34 95 145 / 20%); transform:translateX(-50%); }.phone-top { display:flex; align-items:center; justify-content:space-between; color:#2f4c6a; font-size:10px; }.phone-top i { width:18px; height:4px; background:#193555; border-radius:5px; }.phone-top b { color:#5f7893; letter-spacing:1px; }.phone-greeting { margin-top:19px; }.phone-greeting small,.phone-greeting strong { display:block; }.phone-greeting small { color:#7e94ad; font-size:10px; }.phone-greeting strong { color:#193d61; font-size:15px; }.phone-task { display:flex; align-items:center; gap:7px; margin-top:15px; padding:9px; background:#eff8ff; border-radius:8px; }.phone-task>span { display:grid; flex:none; width:28px; height:28px; color:#117fe1; background:#d8efff; border-radius:6px; place-items:center; }.phone-task>span svg { width:16px; }.phone-task div { flex:1; min-width:0; }.phone-task small,.phone-task b { display:block; white-space:nowrap; }.phone-task small { overflow:hidden; color:#46637e; font-size:9px; text-overflow:ellipsis; }.phone-task b { color:#0b91d4; font-size:9px; }.phone-task>i { color:#1684db; font-size:9px; font-style:normal; }.phone-map { position:relative; height:151px; margin-top:14px; overflow:hidden; background:linear-gradient(135deg,#eaf7fd,#d2f0f9); border-radius:9px; }.phone-map::before { position:absolute; inset:0; content:""; opacity:.48; background-image:linear-gradient(30deg,transparent 48%,#9bcfe5 49%,#9bcfe5 51%,transparent 52%),linear-gradient(-32deg,transparent 48%,#8dc6e5 49%,#8dc6e5 51%,transparent 52%); background-size:37px 42px; }.phone-map span { position:absolute; z-index:1; top:8px; left:9px; color:#5f87a5; font-size:9px; }.phone-map i { position:absolute; width:90px; height:43px; border:2px solid #54c8e9; border-radius:50%; transform:rotate(-25deg); }.phone-map i:nth-of-type(1) { top:65px; left:16px; }.phone-map i:nth-of-type(2) { top:43px; right:-24px; width:102px; border-color:#138fe6; }.phone-map b { position:absolute; top:69px; left:90px; display:grid; width:27px; height:27px; color:white; background:#138be4; border-radius:50%; place-items:center; box-shadow:0 0 0 5px rgb(23 147 229 / 17%); }.phone-map b svg { width:15px; }.phone-nav { display:flex; align-items:center; justify-content:space-around; margin-top:12px; }.phone-nav i { width:16px; height:16px; border:1px solid #9bb5c9; border-radius:4px; }.phone-nav i.on { background:#168ee3; border-color:#168ee3; }.phone-bubble { position:absolute; z-index:2; top:83px; right:-14px; display:flex; align-items:center; gap:6px; padding:9px 10px; color:#315b7e; font-size:10px; background:white; border:1px solid #d8edf9; border-radius:7px; box-shadow:0 14px 28px rgb(25 93 142 / 15%); }.phone-bubble>svg { width:17px; color:#5a79ef; }.phone-bubble b { display:grid; width:14px; height:14px; color:#12a76b; background:#e0f8ef; border-radius:50%; place-items:center; }.phone-bubble b svg { width:9px; }.operations-copy>p:not(.eyebrow) { max-width:480px; margin-top:15px; color:var(--muted); }.operations-copy ul { display:grid; gap:10px; margin:25px 0; }.operations-copy li { display:flex; align-items:center; gap:9px; color:#385470; font-size:14px; }.operations-copy li svg { width:17px; height:17px; color:#10a66c; }
.customer-section { color:white; background:linear-gradient(120deg,#092552,#0a5792); }.customer-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; }.customer-heading h2 { color:white; }.customer-heading>p { max-width:415px; color:#bad7ed; font-size:15px; }.customer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:38px; }.customer-grid article { position:relative; min-height:190px; padding:22px 19px; overflow:hidden; background:linear-gradient(135deg,rgb(55 139 204 / 45%),rgb(13 62 123 / 40%)); border:1px solid rgb(146 219 255 / 25%); border-radius:10px; }.customer-grid article::after { position:absolute; right:-25px; bottom:-55px; width:140px; height:140px; content:""; border:25px solid rgb(106 217 255 / 9%); border-radius:50%; }.customer-grid span { color:#78dff1; font-size:9px; font-weight:700; letter-spacing:.13em; }.customer-grid h3 { margin-top:51px; color:white; font-size:23px; }.customer-grid p { color:#c6e5f7; font-size:12px; }.customer-note { margin-top:18px; color:#8ebbd8; font-size:12px; }

.consult-section { position:relative; overflow:hidden; color:white; background:linear-gradient(125deg,#0649a8,#0478ad); }.consult-grid { position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgb(190 241 255 / 40%) 1px,transparent 1px),linear-gradient(90deg,rgb(190 241 255 / 40%) 1px,transparent 1px); background-size:47px 47px; mask-image:linear-gradient(90deg,#000,transparent 85%); }.consult-orb { position:absolute; border:1px solid rgb(171 237 255 / 22%); border-radius:50%; }.orb-a { top:-312px; right:-91px; width:670px; height:670px; }.orb-b { bottom:-398px; left:26%; width:580px; height:580px; }.consult-layout { position:relative; z-index:1; display:grid; grid-template-columns:1fr .85fr; gap:85px; padding:93px 0; align-items:center; }.consult-copy h2 { color:white; font-size:clamp(31px,3.2vw,44px); line-height:1.28; }.consult-copy>p:not(.eyebrow) { max-width:490px; margin-top:14px; color:#c5e8f7; }.consult-copy ul { display:grid; gap:8px; margin-top:24px; color:#d8f2ff; font-size:14px; }.consult-copy li { display:flex; align-items:center; gap:8px; }.consult-copy li svg { width:16px; color:#63eff1; }.consult-actions { display:grid; gap:12px; }.consult-option { display:grid; grid-template-columns:41px 1fr 17px; align-items:center; gap:12px; padding:14px; color:white; text-align:left; background:rgb(255 255 255 / 10%); border:1px solid rgb(198 240 255 / 31%); border-radius:9px; transition:.2s var(--ease); }.consult-option:hover { background:rgb(255 255 255 / 16%); transform:translateX(4px); }.consult-option>i { display:grid; width:39px; height:39px; color:#c0f8ff; background:rgb(165 240 255 / 14%); border-radius:7px; place-items:center; }.consult-option>i svg { width:21px; }.consult-option b,.consult-option small { display:block; }.consult-option b { font-size:15px; }.consult-option small { color:#b8e1f5; font-size:11px; }.consult-option>svg { width:17px; color:#a7e8ff; }
.brand-reference .brand-logo { display:block; width:auto; height:36px; object-fit:contain; object-position:left center; }.site-footer { color:#a3a3a3; background:#111; }.footer-main { display:grid; grid-template-columns:112px 278px minmax(0,1fr); gap:42px; padding:42px 0 34px; }.brand-footer { display:inline-flex; padding:0; background:transparent; }.brand-footer .brand-logo { display:block; width:104px; height:auto; }.footer-service { min-width:0; }.footer-phone { display:inline-block; color:#ffc72f; font-size:30px; font-weight:700; letter-spacing:.01em; line-height:1.1; transition:color .2s; }.footer-phone:hover { color:#ffe17b; }.footer-service-note { margin:8px 0 12px; color:#bdbdbd; font-size:11px; }.footer-addresses { display:grid; gap:5px; }.footer-addresses li { position:relative; padding-left:10px; color:#c0c0c0; font-size:11px; line-height:1.35; }.footer-addresses li::before { position:absolute; top:.55em; left:0; width:3px; height:3px; content:""; background:#9d9d9d; border-radius:50%; }.footer-links-panel { display:grid; align-content:start; gap:17px; padding:4px 0 0 21px; border-left:1px solid #292929; }.footer-link-group h2 { margin:0 0 4px; color:#f0f0f0; font-size:13px; line-height:1.4; }.footer-link-group p { color:#989898; font-size:11px; line-height:1.65; }.footer-link-group a { color:inherit; transition:color .2s; }.footer-link-group a:hover { color:#fff; }.footer-bottom { position:relative; display:flex; align-items:center; justify-content:center; min-height:47px; padding:0; color:#787878; border-top:1px solid #292929; }.footer-bottom p,.footer-bottom>a { font-size:10px; }.footer-bottom>a { position:absolute; right:max(20px,calc((100vw - var(--container)) / 2)); display:inline-flex; align-items:center; gap:4px; color:#8c8c8c; transition:color .2s; }.footer-bottom>a:hover { color:#fff; }.footer-bottom svg { width:13px; height:13px; }.online-consult { position:fixed; z-index:25; top:58%; right:0; width:140px; padding:0; cursor:pointer; border:0; background:transparent; transition:transform .2s var(--ease); }.online-consult:hover { transform:translateX(-4px); }.online-consult img { display:block; width:100%; height:auto; } #aff-im-root .embed-icon { cursor:pointer !important; opacity:0 !important; pointer-events:auto !important; } #aff-im-root .embed-icon-default,#aff-im-root .embed-icon-pcIcon0,#aff-im-root .embed-icon-pcIcon1,#aff-im-root .embed-icon-pcIcon2 { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; opacity:0 !important; }
.consult-dialog { width:min(calc(100% - 40px),492px); padding:0; color:var(--text); background:#fff; border:0; border-radius:14px; box-shadow:0 25px 80px rgb(2 30 77 / 30%); } .consult-dialog::backdrop { background:rgb(4 27 60 / 62%); backdrop-filter:blur(3px); }.dialog-head { display:flex; align-items:start; justify-content:space-between; padding:27px 29px 0; }.dialog-head .eyebrow { margin-bottom:6px; font-size:11px; }.dialog-head h2 { font-size:25px; }.dialog-close { display:grid; width:32px; height:32px; color:#617890; background:#f2f7fc; border:0; border-radius:50%; place-items:center; }.dialog-close svg { width:18px; }.dialog-intro { padding:9px 29px 20px; color:var(--muted); font-size:13px; }.consult-dialog form { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 29px 28px; }.consult-dialog label { color:#425b77; font-size:13px; font-weight:600; }.consult-dialog label:nth-of-type(3),.consult-dialog label:nth-of-type(4),.form-note,.dialog-submit { grid-column:span 2; }.consult-dialog input,.consult-dialog textarea,.consult-dialog select { display:block; width:100%; margin-top:5px; padding:10px 11px; color:#213d5c; font-size:13px; background:#fbfdff; border:1px solid #dce7f3; border-radius:6px; outline:0; resize:vertical; }.consult-dialog input:focus,.consult-dialog textarea:focus,.consult-dialog select:focus { border-color:#1a92eb; box-shadow:0 0 0 3px rgb(27 150 238 / 13%); }.form-note { margin-top:-4px; color:#8999ac; font-size:11px; }.dialog-submit { width:100%; margin-top:3px; }
[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease),transform .65s var(--ease); } [data-reveal].is-revealed { opacity:1; transform:none; } .hero [data-reveal] { opacity:1; transform:none; } .hero-copy,.hero-visual { transition-delay:.08s; }
@media (max-width:1050px) { .main-nav { gap:23px; }.hero-layout { grid-template-columns:.83fr 1.17fr; gap:20px; }.dashboard { right:0; }.floating-receipt { right:-4px; }.advantage-layout,.operations-layout { gap:43px; }.consult-layout { gap:48px; } }
@media (max-width:767px) { html { scroll-padding-top:64px; } body { font-size:15px; overflow-x:hidden; } .container { width:min(calc(100% - 32px),var(--container)); } .site-header { height:64px; background:#fff; color:var(--ink); border-color:var(--line); box-shadow:0 3px 14px rgb(22 58 111 / 6%); } .brand b { font-size:17px; }.main-nav { position:absolute; top:63px; right:0; left:0; display:grid; gap:0; padding:7px 16px 13px; color:var(--ink); pointer-events:none; visibility:hidden; background:white; border-bottom:1px solid var(--line); box-shadow:0 12px 25px rgb(28 65 110 / 8%); opacity:0; transform:translateY(-8px); transition:.2s var(--ease); }.main-nav.is-open { pointer-events:auto; visibility:visible; opacity:1; transform:none; }.main-nav a { padding:11px 4px; font-size:14px; }.main-nav a::after { top:50%; right:auto; bottom:auto; left:-3px; width:2px; height:17px; transform:translateY(-50%) scaleY(.3); }.main-nav a.is-active::after,.main-nav a:hover::after { transform:translateY(-50%) scaleY(1); }.nav-actions { margin-left:auto; gap:11px; }.nav-actions .text-button { display:none; }.nav-actions .button { display:none; }.menu-toggle { display:grid; width:36px; height:36px; color:#174269; border:1px solid #d8e7f5; border-radius:7px; place-items:center; }.hero { min-height:0; }.hero-layout { display:block; min-height:0; padding:121px 0 36px; }.hero h1 { font-size:39px; }.hero-description { margin-top:17px; font-size:15px; line-height:1.75; }.hero-actions { display:grid; grid-template-columns:1fr; gap:10px; margin-top:24px; }.button-large { width:100%; min-height:46px; padding:0 12px; font-size:13px; }.hero-points { gap:7px 11px; margin-top:23px; font-size:11px; }.hero-visual { min-height:276px; margin-top:36px; transform:scale(.92); transform-origin:top center; }.dashboard { top:0; right:0; width:100%; transform:none; }.dash-top { height:33px; padding:0 10px; }.dash-body { min-height:220px; }.dash-side { width:30px; gap:12px; padding-top:16px; }.dash-side i { width:10px; height:10px; }.dash-main { padding:12px 10px; }.dash-heading strong { font-size:12px; }.dash-kpis { gap:5px; margin-top:9px; }.dash-kpis>div { padding:6px; }.dash-kpis b { font-size:15px; }.dash-kpis small,.dash-kpis em { font-size:7px; }.dash-charts { gap:5px; margin-top:6px; }.route-map,.dispatch-chart { min-height:103px; padding:6px; }.chart-label { font-size:8px; }.chart-label small,.map-caption,.chart-days { font-size:6px; }.map-lines { height:65px; margin-top:4px; }.floating-card { padding:7px 8px; }.floating-card small,.floating-card strong { font-size:8px; }.float-icon,.receipt-icon { width:23px; height:23px; }.floating-route { bottom:1px; left:-8px; }.floating-receipt { top:31px; right:-10px; }.hero-footer { display:none; }.trust-grid { grid-template-columns:1fr; }.trust-grid>div,.trust-grid>div:first-child { min-height:70px; padding:11px 3px; border:0; border-bottom:1px solid var(--line); }.trust-grid>div>svg { width:24px; }.trust-grid b { font-size:14px; }.trust-grid small { font-size:11px; }.section { padding:68px 0; }.section-heading { margin-bottom:29px; }.section-heading h2,.advantage-copy h2,.operations-copy h2 { font-size:29px; }.section-heading>p:not(.eyebrow) { margin-top:9px; font-size:14px; }.feature-grid,.solution-grid { grid-template-columns:1fr; gap:10px; }.feature-card { min-height:171px; padding:19px; }.feature-card h3 { margin-top:12px; font-size:18px; }.feature-card p { font-size:12px; }.feature-wide { grid-column:auto; grid-template-columns:39px 1fr auto; gap:12px; }.feature-wide h3 { margin-top:0; }.feature-icon { width:39px; height:39px; }.feature-ai { min-height:171px; }.advantage-layout,.operations-layout,.consult-layout { grid-template-columns:1fr; gap:36px; }.advantage-stage { min-height:250px; margin:21px 0 16px; }.stage-content { margin-top:31px; }.stage-content strong { font-size:20px; }.advantage-list { gap:7px; }.advantage-item { min-height:73px; grid-template-columns:23px 38px 1fr; gap:9px; padding:10px; }.advantage-item>i { width:35px; height:35px; }.solution-heading,.customer-heading { display:block; }.solution-heading>p,.customer-heading>p { margin-top:10px; font-size:14px; }.solution-card { min-height:226px; }.solution-card h3 { margin-top:55px; font-size:21px; }.solution-art { height:140px; }.operations-visual { min-height:394px; }.phone-frame { top:23px; height:360px; transform:translateX(-50%) scale(.91); transform-origin:top center; }.phone-bubble { top:71px; right:-1px; }.customer-grid { grid-template-columns:repeat(2,1fr); gap:9px; margin-top:25px; }.customer-grid article { min-height:149px; padding:15px 12px; }.customer-grid h3 { margin-top:31px; font-size:18px; }.customer-grid p { font-size:10px; }.consult-layout { padding:68px 0; }.consult-copy h2 { font-size:30px; }.consult-actions { gap:9px; }.site-footer { padding-bottom:54px; }.footer-main { grid-template-columns:1fr; gap:19px; padding:30px 0 21px; }.footer-copy { padding:15px 0 0; border-top:1px solid var(--line); border-left:0; }.footer-links { justify-content:flex-start; gap:8px 18px; }.footer-bottom { display:block; padding:13px 0; font-size:10px; }.footer-bottom span { display:block; margin:3px 0; }.floating-consult { right:15px; bottom:15px; min-height:42px; }.consult-dialog { width:calc(100% - 30px); }.dialog-head { padding:23px 20px 0; }.dialog-head h2 { font-size:22px; }.dialog-intro { padding:8px 20px 16px; }.consult-dialog form { grid-template-columns:1fr; gap:10px; padding:0 20px 22px; }.consult-dialog label:nth-of-type(3),.consult-dialog label:nth-of-type(4),.form-note,.dialog-submit { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } [data-reveal] { opacity:1; transform:none; } }

@media (max-width:767px) {
  .brand-reference .brand-logo { height:31px; }
  .site-footer { padding-bottom:0; }
  .footer-main { grid-template-columns:88px 1fr; gap:25px 18px; padding:36px 0 28px; }
  .brand-footer .brand-logo { width:82px; height:auto; }
  .footer-service { grid-column:span 1; }
  .footer-phone { font-size:25px; }
  .footer-service-note { margin:7px 0 11px; }
  .footer-addresses { gap:4px; }
  .footer-addresses li { font-size:10px; }
  .footer-links-panel { grid-column:span 2; gap:15px; padding:22px 0 0; border-top:1px solid #292929; border-left:0; }
  .footer-link-group h2 { font-size:13px; }
  .footer-link-group p { font-size:10px; }
  .footer-bottom { display:flex; justify-content:flex-start; min-height:52px; padding:0; }
  .footer-bottom>a { position:static; margin-left:auto; }
  .online-consult { top:auto; right:13px; bottom:64px; width:68px; }
}

/* Feature cards begin neutral; visitors explicitly select one to reveal its emphasis. */
.feature-card { width:100%; color:var(--text); font:inherit; text-align:left; cursor:pointer; appearance:none; }.feature-card.feature-ai { color:var(--text); background:#fff; border:1px solid #e1ebf7; box-shadow:0 8px 20px rgb(40 86 143 / 3%); }.feature-card.feature-ai h3 { color:var(--ink); }.feature-card.feature-ai p { color:var(--muted); }.feature-card.feature-ai .feature-icon { color:#087de1; background:#e8f5ff; }.feature-card.feature-ai .feature-num { color:#b8c8da; }.feature-card.is-active { color:#fff; background:linear-gradient(135deg,#0869d1,#027bb4); border-color:transparent; box-shadow:0 18px 32px rgb(7 106 202 / 22%); transform:translateY(-4px); }.feature-card.is-active h3 { color:#fff; }.feature-card.is-active p { color:#d4efff; }.feature-card.is-active .feature-icon { color:#fff; background:rgb(255 255 255 / 16%); }.feature-card.is-active .feature-num { color:#9fd3ff; }.feature-card.is-active .ai-chip { color:#dcfbff; background:radial-gradient(circle,#237bc7 0 41%,transparent 43%),conic-gradient(#63ebff,#75a5ff,#2be1eb,#63ebff); }

/* Technology hub: a single visual system shows how each capability connects to transport operations. */
.advantage-section { position:relative; overflow:hidden; background:#f4f9ff; }.tech-board { position:relative; overflow:hidden; padding:58px 58px 24px; color:#e6f7ff; background:radial-gradient(circle at 76% 43%,rgb(16 143 214 / 34%),transparent 29%),linear-gradient(128deg,#05214b 0%,#06376f 52%,#05689d 100%); border:1px solid rgb(129 211 255 / 24%); border-radius:22px; box-shadow:0 30px 60px rgb(8 55 115 / 19%); }.tech-board::before { position:absolute; inset:0; content:""; opacity:.28; background-image:linear-gradient(rgb(126 210 255 / 22%) 1px,transparent 1px),linear-gradient(90deg,rgb(126 210 255 / 22%) 1px,transparent 1px); background-size:35px 35px; mask-image:linear-gradient(125deg,#000 0%,transparent 82%); }.tech-board::after { position:absolute; top:-300px; right:-230px; width:620px; height:620px; content:""; border:1px solid rgb(154 228 255 / 18%); border-radius:50%; box-shadow:inset 0 0 140px rgb(25 187 255 / 10%); }.tech-title,.tech-showcase,.tech-status { position:relative; z-index:1; }.tech-title { display:flex; align-items:end; justify-content:space-between; gap:40px; }.tech-title .eyebrow { margin-bottom:13px; }.tech-title h2 { color:#fff; font-size:clamp(34px,3.1vw,45px); line-height:1.2; }.tech-title>p { max-width:370px; margin-bottom:4px; color:#b4d9ed; font-size:14px; line-height:1.8; }.tech-showcase { display:grid; grid-template-columns:.72fr 1.28fr; min-height:445px; margin-top:13px; align-items:center; }.tech-copy { position:relative; z-index:3; max-width:330px; padding:22px 0 22px 11px; }.tech-kicker { display:block; color:#65e7f3; font-size:9px; font-weight:700; letter-spacing:.13em; }.tech-copy strong { display:block; margin-top:9px; color:#fff; font-size:27px; line-height:1.3; }.tech-copy>p { min-height:67px; margin-top:10px; color:#c6e9f9; font-size:13px; line-height:1.75; }.tech-metric { display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:7px 10px; color:#85eaf6; font-size:11px; background:rgb(130 234 255 / 10%); border:1px solid rgb(124 229 255 / 26%); border-radius:5px; }.tech-metric i { width:6px; height:6px; background:#43e8cf; border-radius:50%; box-shadow:0 0 10px #43e8cf; }.tech-link { display:inline-flex; align-items:center; gap:6px; margin-top:21px; padding:0; color:#fff; font-size:13px; font-weight:600; background:none; border:0; }.tech-link svg { width:17px; transition:transform .2s var(--ease); }.tech-link:hover svg { transform:translateX(4px); }
.tech-network { position:relative; width:100%; max-width:620px; height:440px; margin-left:auto; }.network-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }.network-links path { fill:none; stroke:#71dfff; stroke-width:1.2; stroke-opacity:.28; }.network-links .network-signal { stroke:#91f2ff; stroke-width:2.2; stroke-dasharray:10 228; stroke-linecap:round; stroke-opacity:.92; animation:network-flow 4.8s linear infinite; }.network-orbit { position:absolute; top:50%; left:50%; border:1px solid rgb(126 223 255 / 20%); border-radius:50%; transform:translate(-50%,-50%); }.orbit-one { width:272px; height:272px; }.orbit-two { width:370px; height:190px; border-style:dashed; transform:translate(-50%,-50%) rotate(-22deg); animation:orbit-rotate 20s linear infinite; }.tech-core { position:absolute; z-index:3; top:50%; left:50%; display:grid; width:126px; height:126px; color:#edfcff; text-align:center; border:1px solid #6fe7ff; border-radius:50%; background:radial-gradient(circle at 38% 31%,#36bdf6,#0866bd 63%,#053872); box-shadow:0 0 0 9px rgb(85 202 255 / 9%),0 0 42px rgb(38 204 255 / 46%),inset 0 0 25px rgb(184 248 255 / 45%); place-items:center; transform:translate(-50%,-50%); }.tech-core::before,.tech-core::after { position:absolute; border:1px solid rgb(154 239 255 / 41%); border-radius:50%; content:""; }.tech-core::before { inset:8px; }.tech-core::after { inset:-14px; border-style:dashed; animation:core-spin 9s linear infinite; }.core-rings { position:absolute; width:100%; height:100%; border-radius:inherit; background:conic-gradient(from 32deg,transparent 0 24%,rgb(153 244 255 / 48%) 28%,transparent 32% 60%,rgb(153 244 255 / 34%) 64%,transparent 68%); animation:core-spin 7s linear infinite reverse; }.tech-core>i { position:absolute; top:18px; display:grid; width:31px; height:31px; color:#d9fbff; background:rgb(4 70 149 / 63%); border-radius:50%; place-items:center; }.tech-core>i svg { width:17px; }.tech-core>b { position:relative; z-index:1; margin-top:30px; font-size:15px; line-height:1.3; }.tech-core>small { position:absolute; right:15px; bottom:16px; color:#93efff; font-size:9px; font-weight:700; letter-spacing:.08em; }.tech-node { position:absolute; z-index:2; display:flex; align-items:center; gap:9px; width:172px; min-height:62px; padding:8px; color:#eaf9ff; text-align:left; background:rgb(4 41 96 / 72%); border:1px solid rgb(130 218 255 / 23%); border-radius:9px; box-shadow:0 12px 28px rgb(0 11 47 / 20%); transition:border-color .25s,box-shadow .25s,background .25s,transform .25s var(--ease); }.tech-node:hover,.tech-node.is-active { background:rgb(15 105 175 / 74%); border-color:#76e6f6; box-shadow:0 0 0 3px rgb(91 225 255 / 11%),0 15px 27px rgb(0 16 62 / 26%); transform:translateY(-3px); }.tech-node>i { display:grid; flex:none; width:37px; height:37px; color:#64ebff; background:rgb(105 232 255 / 12%); border:1px solid rgb(104 231 255 / 23%); border-radius:7px; place-items:center; }.tech-node>i svg { width:20px; }.tech-node b,.tech-node small { display:block; }.tech-node b { color:#f2fdff; font-size:12px; line-height:1.35; }.tech-node small { margin-top:1px; color:#9bcde5; font-size:9px; }.node-ai { top:41px; left:50%; width:185px; transform:translateX(-50%); }.node-ai:hover,.node-ai.is-active { transform:translateX(-50%) translateY(-3px); }.node-location { top:56px; left:2px; }.node-wallet { top:56px; right:2px; }.node-layers { bottom:53px; left:5px; }.node-chart { right:3px; bottom:9px; }.tech-status { display:flex; align-items:center; justify-content:center; gap:29px; padding-top:20px; color:#a8d7eb; font-size:11px; border-top:1px solid rgb(143 217 255 / 18%); }.tech-status span { display:flex; align-items:center; gap:7px; }.tech-status i { width:5px; height:5px; background:#4ee8d3; border-radius:50%; box-shadow:0 0 9px #4ee8d3; }
.tech-board.is-switching .tech-copy strong,.tech-board.is-switching .tech-copy>p,.tech-board.is-switching .tech-metric { animation:tech-content-swap .42s var(--ease); }.tech-board.is-switching .tech-core { animation:core-pulse .62s var(--ease); }.tech-board.is-switching .network-signal { animation-duration:1.2s; }
@keyframes network-flow { to { stroke-dashoffset:-238; } } @keyframes orbit-rotate { to { transform:translate(-50%,-50%) rotate(338deg); } } @keyframes core-spin { to { transform:rotate(360deg); } } @keyframes core-pulse { 50% { transform:translate(-50%,-50%) scale(1.1); box-shadow:0 0 0 14px rgb(85 202 255 / 9%),0 0 58px rgb(38 204 255 / 72%),inset 0 0 25px rgb(184 248 255 / 45%); } } @keyframes tech-content-swap { 0% { opacity:.28; transform:translateY(6px); } 100% { opacity:1; transform:none; } }
@media (max-width:1050px) { .tech-board { padding:48px 38px 22px; }.tech-showcase { grid-template-columns:.68fr 1.32fr; }.tech-network { transform:scale(.9); transform-origin:right center; margin-right:-28px; }.tech-node { width:157px; }.node-ai { width:173px; }.tech-title>p { max-width:310px; } }
@media (max-width:767px) { .advantage-section { padding:65px 0; }.tech-board { padding:31px 18px 18px; border-radius:14px; }.tech-title { display:block; }.tech-title h2 { font-size:30px; }.tech-title>p { margin-top:13px; font-size:13px; }.tech-showcase { display:block; min-height:0; margin-top:20px; }.tech-copy { max-width:100%; padding:0 4px; }.tech-copy strong { font-size:23px; }.tech-copy>p { min-height:0; margin-top:7px; font-size:12px; }.tech-metric { margin-top:12px; }.tech-link { margin-top:14px; }.tech-network { width:calc(100% + 16px); height:350px; margin:15px -8px -6px; transform:none; }.network-links { transform:scale(.87); transform-origin:center; }.orbit-one { width:196px; height:196px; }.orbit-two { width:284px; height:144px; }.tech-core { width:98px; height:98px; }.tech-core>b { margin-top:25px; font-size:12px; }.tech-core>i { top:12px; width:26px; height:26px; }.tech-core>i svg { width:15px; }.tech-core>small { right:11px; bottom:11px; font-size:8px; }.tech-node { width:auto; min-height:0; padding:7px; border-radius:8px; }.tech-node>i { width:33px; height:33px; }.tech-node>i svg { width:18px; }.tech-node span { display:none; }.node-ai { top:19px; left:50%; width:auto; transform:translateX(-50%); }.node-ai:hover,.node-ai.is-active { transform:translateX(-50%) translateY(-2px); }.node-location { top:75px; left:9%; }.node-wallet { top:75px; right:9%; }.node-layers { bottom:55px; left:11%; }.node-chart { right:11%; bottom:26px; }.tech-status { flex-wrap:wrap; gap:8px 16px; padding-top:16px; font-size:10px; }.tech-status span { gap:5px; } }

/* Page motion gives product visuals a live-system feel while preserving the reading rhythm. */
@media (prefers-reduced-motion:no-preference) {
  .hero-grid-bg { animation:grid-drift 24s linear infinite; }
  .hero-glow-one { animation:hero-glow-breathe 8s ease-in-out infinite; }
  .hero-glow-two { animation:hero-glow-breathe 11s ease-in-out -4s infinite reverse; }
  .ring-one { animation:hero-ring-turn 26s linear infinite; }
  .ring-two { animation:hero-ring-turn-reverse 20s linear infinite; }
  .dash-top b { animation:live-pulse 1.8s ease-in-out infinite; }
  .dash-brand i { animation:brand-spark 3.5s ease-in-out infinite; }
  .dashboard { animation:dashboard-light 5.5s ease-in-out infinite; }
  .map-lines::after { position:absolute; inset:-15% -35%; content:""; background:linear-gradient(105deg,transparent 38%,rgb(118 232 255 / 22%) 50%,transparent 62%); transform:translateX(-55%); animation:map-scan 4.8s ease-in-out infinite; }
  .pin { animation:map-pin-pulse 2.8s ease-in-out infinite; }
  .pin-b { animation-delay:-.95s; }.pin-c { animation-delay:-1.7s; }
  .truck-dot { animation:truck-beacon 2.4s ease-in-out infinite; }
  .floating-route { animation:float-route 5.2s ease-in-out infinite; }
  .floating-receipt { animation:float-receipt 6.3s ease-in-out -1.4s infinite; }
  .hero-points li::before { animation:point-blink 2.2s ease-in-out infinite; }
  .hero-points li:nth-child(2)::before { animation-delay:-.35s; }.hero-points li:nth-child(3)::before { animation-delay:-.7s; }.hero-points li:nth-child(4)::before { animation-delay:-1.05s; }.hero-points li:nth-child(5)::before { animation-delay:-1.4s; }
  .feature-grid [data-reveal]:nth-child(2),.solution-grid [data-reveal]:nth-child(2) { transition-delay:.08s; }
  .feature-grid [data-reveal]:nth-child(3),.solution-grid [data-reveal]:nth-child(3) { transition-delay:.16s; }
  .feature-grid [data-reveal]:nth-child(4),.solution-grid [data-reveal]:nth-child(4) { transition-delay:.07s; }
  .feature-grid [data-reveal]:nth-child(5),.solution-grid [data-reveal]:nth-child(5) { transition-delay:.14s; }
  .feature-grid [data-reveal]:nth-child(6),.solution-grid [data-reveal]:nth-child(6) { transition-delay:.21s; }
  .feature-grid [data-reveal]:nth-child(7) { transition-delay:.1s; }
  .feature-card.is-active .feature-icon { animation:feature-icon-pulse .7s var(--ease); }
  .feature-card.is-active .ai-chip { animation:ai-chip-turn 7s linear infinite; }
  .feature-card.is-active .route-art { animation:route-art-float 2.8s ease-in-out infinite; }
  .solution-card::before { position:absolute; z-index:1; top:-25%; left:-48%; width:37%; height:150%; content:""; pointer-events:none; background:linear-gradient(90deg,transparent,rgb(217 249 255 / 21%),transparent); transform:rotate(22deg); transition:transform .7s var(--ease); }
  .solution-card:hover::before { transform:translateX(430%) rotate(22deg); }
  .solution-card:hover .solution-art>svg { animation:solution-icon-float 1.8s ease-in-out infinite; }
  .solution-card:hover .road-one,.solution-card:hover .road-two,.solution-card:hover .long-road { animation:route-pulse 1.3s ease-in-out infinite; }
  .operations-visual::after { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(125deg,transparent 42%,rgb(118 221 255 / 20%) 51%,transparent 60%); transform:translateX(-100%); animation:device-scan 6s ease-in-out infinite; }
  .phone-frame { animation:phone-hover 5.6s ease-in-out infinite; }
  .phone-bubble { animation:receipt-bubble 4.4s ease-in-out -1.1s infinite; }
  .phone-map b { animation:truck-beacon 2.5s ease-in-out infinite; }
  .customer-grid article { transition:transform .28s var(--ease),background .28s var(--ease),border-color .28s; }
  .customer-grid article:hover { background:linear-gradient(135deg,rgb(61 159 221 / 60%),rgb(13 62 123 / 52%)); border-color:rgb(159 230 255 / 48%); transform:translateY(-5px); }
  .customer-grid article:hover::after { animation:customer-orbit 3.5s linear infinite; }
  .consult-grid { animation:consult-grid-drift 18s linear infinite; }
  .consult-orb { animation:consult-orb-drift 12s ease-in-out infinite; }
  .orb-b { animation-delay:-6s; }
  .consult-option { overflow:hidden; }
  .consult-option::after { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(100deg,transparent 38%,rgb(213 250 255 / 16%) 50%,transparent 62%); transform:translateX(-115%); }
  .consult-option:hover::after { animation:option-sheen .75s var(--ease); }
}
@keyframes grid-drift { to { background-position:60px 60px,60px 60px; } }
@keyframes hero-glow-breathe { 50% { opacity:.68; transform:scale(1.08); } }
@keyframes hero-ring-turn { to { transform:rotate(343deg); } }
@keyframes hero-ring-turn-reverse { to { transform:rotate(-377deg); } }
@keyframes live-pulse { 50% { box-shadow:0 0 0 5px rgb(54 227 160 / 13%),0 0 13px #36e3a0; } }
@keyframes brand-spark { 50% { box-shadow:0 0 0 5px rgb(26 214 238 / 10%),0 0 15px #1ad6ee; transform:rotate(135deg); } }
@keyframes dashboard-light { 50% { box-shadow:0 31px 83px rgb(1 9 38 / 39%),inset 0 1px rgb(255 255 255 / 27%),inset 0 0 55px rgb(60 197 255 / 7%); } }
@keyframes map-scan { 52%,100% { transform:translateX(150%); } }
@keyframes map-pin-pulse { 50% { box-shadow:0 0 0 6px rgb(90 230 255 / 9%),0 0 15px #5ae6ff; transform:scale(1.18); } }
@keyframes truck-beacon { 50% { box-shadow:0 0 0 9px rgb(26 172 241 / 7%),0 0 20px rgb(66 211 255 / 85%); } }
@keyframes float-route { 50% { transform:translate(8px,-9px); } }
@keyframes float-receipt { 50% { transform:translate(-6px,8px); } }
@keyframes point-blink { 50% { opacity:.35; box-shadow:none; } }
@keyframes feature-icon-pulse { 45% { transform:scale(1.13) rotate(-6deg); } }
@keyframes ai-chip-turn { to { transform:rotate(360deg); } }
@keyframes route-art-float { 50% { transform:translateY(-4px); } }
@keyframes solution-icon-float { 50% { transform:translateY(-7px) rotate(-5deg); } }
@keyframes route-pulse { 50% { filter:drop-shadow(0 0 8px #84e7ff); opacity:1; } }
@keyframes device-scan { 52%,100% { transform:translateX(125%); } }
@keyframes phone-hover { 50% { transform:translate(-50%,-8px); } }
@keyframes receipt-bubble { 50% { transform:translateY(-7px); } }
@keyframes customer-orbit { to { transform:rotate(360deg); } }
@keyframes consult-grid-drift { to { background-position:47px 47px,47px 47px; } }
@keyframes consult-orb-drift { 50% { transform:translate(18px,-15px) scale(1.04); } }
@keyframes option-sheen { to { transform:translateX(115%); } }

/* Keep the mobile device scale while it floats. */
@media (max-width:767px) and (prefers-reduced-motion:no-preference) {
  .phone-frame { animation:phone-hover-mobile 5.6s ease-in-out infinite; }
}
@keyframes phone-hover-mobile { 50% { transform:translate(-50%,-8px) scale(.91); } }

/* The reference footer's information layout is retained, with a light brand treatment. */
.site-footer { color:#718097; background:#fff; border-top:1px solid #e6edf5; }
.footer-main { padding:46px 0 38px; }
.brand-footer .brand-logo { width:112px; }
.footer-phone { color:#087de1; }
.footer-phone:hover { color:#0068c6; }
.footer-service-note { color:#7e8da1; }
.footer-addresses li { color:#748298; }
.footer-addresses li::before { background:#9eafc1; }
.footer-links-panel { border-left-color:#e1e9f2; }
.footer-link-group h2 { color:#243957; }
.footer-link-group p { color:#77869a; }
.footer-link-group a:hover { color:#087de1; }
.footer-bottom { color:#8a98aa; border-top-color:#e6edf5; }
.footer-bottom>a { color:#617995; }
.footer-bottom>a:hover { color:#087de1; }
@media (max-width:767px) {
  .site-footer { padding-bottom:0; }
  .footer-main { padding:36px 0 28px; }
  .footer-links-panel { border-top-color:#e1e9f2; }
}