:root{
  --navy:#0B3B6F; --navy-d:#072a51; --blue:#0093DD; --orange:#EE7D1B;
  --ink:#16202b; --body:#4a5866; --line:#e3e8ee; --bg-soft:#f6f8fb;
  --wrap:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
h1,h2,h3{color:var(--ink);line-height:1.2;letter-spacing:-.01em}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:78px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand img{width:50px;height:50px;border-radius:3px}
.brand b{display:block;font:700 16.5px/1.15 inherit;color:var(--navy);letter-spacing:.4px}
.brand span span{display:block;font-size:12.5px;line-height:1.3;color:#7c8794;margin-top:1px;font-weight:400}
nav{margin-right:auto;display:flex;align-items:center;gap:19px}
nav a{text-decoration:none;font-size:15px;font-weight:500;color:#3d4a58;white-space:nowrap}
nav a:hover,nav a.on{color:var(--navy)}
.btn{display:inline-block;border-radius:6px;font-weight:600;text-decoration:none;text-align:center;transition:.15s}
.btn-p{background:var(--navy);color:#fff;padding:10px 16px;font-size:14.5px}
.btn-s{background:#fff;color:var(--navy);border:1.5px solid var(--line);padding:8.5px 16px;font-size:14.5px}
.btn-s:hover{border-color:var(--navy)}
.logins{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.btn-p:hover{background:var(--navy-d)}
.btn-o{background:var(--orange);color:#fff;padding:14px 26px;font-size:16px}
.btn-o:hover{filter:brightness(.93)}
.btn-g{border:1.5px solid rgba(255,255,255,.75);color:#fff;padding:12.5px 26px;font-size:16px}
.btn-g:hover{background:rgba(255,255,255,.14)}
.lang{font-size:14px;color:#7c8794;text-decoration:none;padding-left:14px;border-left:1px solid var(--line)}
.lang:hover{color:var(--navy)}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;isolation:isolate}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(6,26,48,.93) 0%,rgba(6,26,48,.84) 45%,rgba(6,26,48,.5) 75%,rgba(6,26,48,.3) 100%)}
.hero .wrap{padding-top:104px;padding-bottom:104px}
.hero.sm .wrap{padding-top:74px;padding-bottom:74px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7fc4ee}
.hero h1{color:#fff;font-size:clamp(34px,4.4vw,56px);font-weight:700;margin:16px 0 0;max-width:15ch}
.hero.sm h1{font-size:clamp(30px,3.6vw,44px);max-width:20ch}
.hero p{margin-top:20px;max-width:52ch;font-size:19px;color:#d5e2ee}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.strip{background:var(--navy);color:#cfe0f0}
.strip .wrap{display:flex;flex-wrap:wrap;gap:14px 46px;padding-top:18px;padding-bottom:18px;font-size:14.5px}
.strip b{color:#fff;font-weight:600}

/* ---------- sections ---------- */
section{padding:88px 0}
.soft{background:var(--bg-soft)}
.head{max-width:60ch}
.head .eyebrow{color:var(--blue)}
.head h2{font-size:clamp(27px,3vw,38px);margin:12px 0 0}
.head p{margin-top:14px}

.grid{display:grid;gap:24px;margin-top:44px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:1fr 1fr}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card .ph{aspect-ratio:16/10;overflow:hidden;background:#dfe6ee}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:24px 24px 26px}
.card h3{font-size:19px}
.card p{margin-top:9px;font-size:15.5px;line-height:1.6}
.tag{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}

/* service detail rows */
.row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:64px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0;padding-top:16px}
.row.flip .txt{order:2}
.row img{border-radius:10px;width:100%}
.row h2{font-size:clamp(24px,2.6vw,32px)}
.row p{margin-top:14px}
.row .tag{margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{font-size:14px;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:#3d4a58}

/* coverage */
.cov{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.cov img{border-radius:10px}
.lists{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px}
.lists h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.lists ul{list-style:none;font-size:15.5px}
/* 上下各 3px（原为 5px）：叠在 25.6px 行框上得 31.6px。原来的 35.6px 比同为
   15.5px 的卡片正文(24.8px)松 43%，列表读起来是散的，还放大了两列长度差。 */
.lists li{padding:3px 0 3px 20px;position:relative}
/* 圆点要跟着 padding 走才能对齐首行中线：3 + 25.6/2 - 7/2 ≈ 12 */
.lists li:before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;border-radius:50%;background:var(--blue)}

/* why */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px}
.why h3{font-size:18px;margin-bottom:8px}
.why .n{font:700 13px/1 inherit;color:var(--blue);letter-spacing:.1em;margin-bottom:14px}
.why p{font-size:15.5px}

/* band */
.band{background:var(--navy);color:#fff;text-align:center}
.band h2{color:#fff;font-size:clamp(25px,3vw,34px)}
.band p{margin:14px auto 0;max-width:56ch;color:#cfe0f0}
.band .cta{justify-content:center}

/* footer */
footer{background:#0a1a2b;color:#8fa3b8;font-size:15px;padding:60px 0 0}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;padding-bottom:44px}
footer h5{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer li{list-style:none;padding:5px 0}
.fbrand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.fbrand img{width:40px;height:40px;border-radius:3px}
.fbrand b{color:#fff;font-size:15.5px;letter-spacing:.4px}
.copy{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:13.5px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}

/* 汉堡菜单开关：纯 CSS（checkbox + label），不依赖 JS。
   桌面上这两个元素都不显示，下面的 :checked 规则也全都关在媒体查询里，
   所以宽屏渲染跟改动前逐像素一致。 */
/* checkbox 视觉上缩到 1px，但**保留在 Tab 序里**（不加 tabindex="-1"/aria-hidden），
   否则键盘用户没有任何办法打开菜单——抽屉里的链接是 display:none，也进不了 Tab 序。 */
.mnav-t{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mnav-b{display:none}
/* checkbox 本身看不见，所以焦点框画在它旁边的汉堡按钮上 */
.mnav-t:focus-visible ~ .wrap .mnav-b{outline:2px solid var(--blue);outline-offset:2px}

/* 笔记本区间（既有 bug 修复）：抬头一行放不下 品牌 + 7 个栏目 + 两个按钮。
   原来 MiStock 要到 1040px 以下才隐藏，但实测 1400px 以下就已经溢出屏幕右侧，
   1280/1366/1440 这些主流笔记本宽度全部中招（整页可横向拖动）。 */
@media(max-width:1760px){
  .bar{gap:22px}
  nav{gap:17px}
  nav a{font-size:14.5px}
  .logins{gap:8px}
}
/* 定位语让位：品牌块 466px 里约 160px 是这行小字，收掉它，两个登录按钮
   就能一路显示到汉堡断点。以前是反过来——留着小字、把 WMS 登录藏了，
   结果 17 寸 Windows 和手机上根本看不到 WMS 入口。 */
@media(max-width:1760px){ .brand span span{display:none} }
@media(max-width:1400px){nav{gap:12px}nav a{font-size:13.5px}.brand b{font-size:15px}
  .btn-p,.btn-s{padding-left:12px;padding-right:12px;font-size:13.5px}}

/* 栅格断点保持 960/620 不变 —— 抬头的断点（下面 1200px）是独立的，
   这样 961–1100 区间的卡片/分栏布局跟改动前完全一样，只有抬头换成汉堡。 */
@media(max-width:960px){
  .g3,.why,.fcols{grid-template-columns:1fr 1fr}
  .cov,.row{grid-template-columns:1fr;gap:32px}
  .row.flip .txt{order:0}
}

/* ---------- 抬头折叠成汉堡：≤1200px ----------
   原来 nav 是直接 display:none 且没有替代，手机上等于没有任何导航；
   .logins 也因为品牌块 438px 撑爆 390px 视口而被整个挤出屏幕外。 */
@media(max-width:1200px){
  .bar{flex-wrap:wrap;gap:0;height:auto;min-height:64px;padding-top:9px;padding-bottom:9px}
  /* .bar 换行后按 DOM 顺序排，label 写在 .logins 之后会被挤到抽屉最底下，
     所以显式指定顺序，把汉堡/✕ 钉在第一行品牌右边。 */
  .brand{order:1}
  .mnav-b{order:2}
  nav{order:3}
  .logins{order:4}
  .brand{flex:1 1 auto;min-width:0;gap:9px}
  .brand img{width:38px;height:38px}
  .brand b{font-size:14.5px;letter-spacing:.2px}
  .brand span span{display:none}          /* 定位语手机上收起，让出宽度 */

  .mnav-b{display:block;flex:0 0 auto;margin-left:auto;width:44px;height:44px;
          position:relative;cursor:pointer;border-radius:6px}
  .mnav-b:before,.mnav-b:after,.mnav-b i{
          content:"";position:absolute;left:11px;width:22px;height:2px;
          background:var(--navy);border-radius:2px;transition:.2s}
  .mnav-b:before{top:15px}
  .mnav-b i{top:21px}
  .mnav-b:after{top:27px}

  /* 展开时 ☰ 变 ✕ */
  .mnav-t:checked ~ .wrap .mnav-b:before{top:21px;transform:rotate(45deg)}
  .mnav-t:checked ~ .wrap .mnav-b:after{top:21px;transform:rotate(-45deg)}
  .mnav-t:checked ~ .wrap .mnav-b i{opacity:0}

  /* 抽屉：默认收起，勾选后整行铺开 */
  nav,.logins{flex:0 0 100%;display:none;margin-left:0}
  .mnav-t:checked ~ .wrap nav,
  .mnav-t:checked ~ .wrap .logins{display:flex}

  nav{flex-direction:column;align-items:stretch;gap:0;
      border-top:1px solid var(--line);margin-top:9px}
  nav a{padding:14px 2px;font-size:16px;border-bottom:1px solid var(--line)}
  .lang{border-left:0;padding:14px 2px;font-size:15px}
  /* 抽屉里竖向空间不要钱，两个登录按钮都放出来——手机上原先只有 SCCP，
     WMS 上线后等于手机用户没有 WMS 入口。 */
  .logins{padding:14px 0 4px;flex-direction:column;align-items:stretch;gap:10px}
  .logins .btn-p,.logins .btn-s{display:block;width:100%;padding:14px;font-size:15.5px}
}

@media(max-width:620px){
  .g3,.g2,.why,.fcols,.lists{grid-template-columns:1fr}
  section{padding:60px 0}
  .hero .wrap{padding-top:72px;padding-bottom:72px}
  /* 左右各让出 10px：中文 hero 标题「从码头到最后一公里。」正好因为差几像素而折行 */
  .wrap{padding:0 18px}
}

/* 中文标题：CJK 字宽约为 ch 的两倍，放宽上限避免折行 */
/* keep-all 让中文只在标点处断行。默认规则允许在任意两个汉字之间断，
   手机上「从码头到仓库，全程可控。」会断成「…全程可 / 控。」，把词劈开。
   overflow-wrap 是兜底：万一某个分句本身就超过一行宽，仍允许强制断，不至于溢出。 */
html[lang="zh-CN"] .hero h1{max-width:26ch;word-break:keep-all;overflow-wrap:break-word}
html[lang="zh-CN"] .hero.sm h1{max-width:30ch}
html[lang="zh-CN"] .head{max-width:44em}
/* 区块标题同样只在标点处断行。中文默认可在任意两个汉字间断开，
   「一单到底，专属团队全程跟进。」在手机上会断成「…全程跟 / 进。」这种劈词。 */
html[lang="zh-CN"] .head h2{word-break:keep-all;overflow-wrap:break-word}