:root {
  --ink: #153840;
  --muted: #5f7274;
  --soft: #f6f3ed;
  --line: #d9e4e1;
  --blue: #286bc2;
  --blue-dark: #175393;
  --navy: #123f4a;
  --green: #138b7f;
  --amber: #c99352;
  --display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --body: Inter, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 74px; }
body { margin: 0; color: var(--ink); background: #fcfaf6; font-family: var(--body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; left: 18px; top: -64px; z-index: 300; padding: 10px 16px; border-radius: 6px; background: #fff; box-shadow: 0 8px 28px #0b1b3426; }
.skip-link:focus { top: 18px; }

.site-header { position: sticky; top: 0; z-index: 100; height: 74px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0 max(28px, calc((100vw - 1360px) / 2)); border-bottom: 1px solid rgba(201,218,214,.82); background: rgba(253,250,245,.91); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; white-space: nowrap; font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.brand small { margin-left: 2px; padding-left: 12px; border-left: 1px solid #c7d8d4; color: #68807f; font-family: var(--body); font-size: 10px; font-weight: 500; letter-spacing: .05em; }
.brand-mark { width: 22px; height: 23px; display: grid; grid-template-columns: repeat(3,1fr); align-items: end; gap: 2px; }
.brand-mark i { display: block; background: var(--blue); }
.brand-mark i:nth-child(1) { height: 48%; }
.brand-mark i:nth-child(2) { height: 100%; }
.brand-mark i:nth-child(3) { height: 72%; background: #23a89c; }
.desktop-nav { justify-self: center; display: flex; gap: 36px; color: #476465; font-size: 14px; }
.desktop-nav a, .footer-links a { transition: color .2s ease; }
.desktop-nav a:hover, .footer-links a:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-button, .menu-button { border: 0; background: transparent; cursor: pointer; }
.lang-button { min-width: 42px; height: 40px; color: #56647a; font-size: 12px; }
.header-cta { height: 42px; display: inline-flex; align-items: center; gap: 22px; padding: 0 17px 0 20px; border-radius: 7px; background: linear-gradient(135deg,#2c6bc1,#138a80); color: #fff; font-size: 14px; font-weight: 650; box-shadow: 0 9px 22px rgba(34,105,143,.18); transition: background .2s ease, transform .2s ease; }
.header-cta:hover { background: var(--blue); transform: translateY(-1px); }
.menu-button, .mobile-nav { display: none; }

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background-color: #f7f1e8; background-image: linear-gradient(90deg,rgba(255,252,246,.98) 0%,rgba(255,252,246,.94) 32%,rgba(245,247,240,.7) 51%,rgba(221,238,239,.23) 100%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(16,88,100,.08)),url('/service-global-commerce-bg.webp'); background-size: cover; background-position: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 66%,rgba(18,83,92,.1)); pointer-events: none; }
.hero-grid { position: relative; width: min(1360px, calc(100% - 56px)); min-height: 660px; margin: auto; padding: 72px 0 64px; display: grid; grid-template-columns: minmax(420px,.86fr) minmax(560px,1.14fr); align-items: center; gap: clamp(56px,6vw,92px); }
.hero-copy { max-width: 610px; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: #157d76; font-size: 13px; font-weight: 680; letter-spacing: .02em; }
.eyebrow > span:first-child { width: 28px; height: 2px; background: linear-gradient(90deg,#c79253,#148c82); }
.hero h1 { max-width: 600px; margin: 22px 0 22px; font-family: var(--display); font-size: clamp(44px,4.1vw,58px); font-weight: 630; line-height: 1.15; letter-spacing: -.045em; text-wrap: balance; }
.hero-lead { max-width: 590px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.85; }
.hero-actions { display: flex; gap: 11px; margin-top: 32px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 18px; border-radius: 6px; font-size: 14px; font-weight: 650; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: linear-gradient(135deg,#2b6dc4,#138b80); color: #fff; box-shadow: 0 12px 28px rgba(27,107,133,.2); }
.button.primary:hover { background: var(--blue-dark); }
.button.secondary { border: 1px solid #c7d8d2; background: rgba(255,252,246,.8); color: #294e51; backdrop-filter: blur(10px); }
.button.secondary:hover { border-color: #9eb0c8; }
.hero-notes { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 20px; color: #607879; font-size: 12px; }
.hero-notes span::before { content: ""; width: 5px; height: 5px; display: inline-block; margin: 0 8px 2px 0; border-radius: 50%; background: var(--green); }

.ops-window { min-height: 460px; overflow: hidden; border: 1px solid rgba(193,216,213,.92); border-radius: 18px; background: rgba(255,255,255,.91); box-shadow: 0 32px 78px rgba(21,76,86,.2),0 0 0 7px rgba(255,255,255,.2); backdrop-filter: blur(15px); }
.window-bar, .mini-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: .03em; }
.window-bar { height: 50px; padding: 0 19px; border-bottom: 1px solid var(--line); background: rgba(247,250,247,.95); color: #617978; }
.live { display: flex; align-items: center; gap: 8px; color: #526076; }
.live i, .state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(28,169,120,.1); }
.ops-canvas { position: relative; height: 410px; overflow: hidden; background: linear-gradient(180deg,#fff,#f2f8f6); }
.signal-orbit, .signal-orbit::before, .signal-orbit::after { position: absolute; left: 50%; top: 42%; border: 1px solid #dce5f0; border-radius: 50%; transform: translate(-50%,-50%); }
.signal-orbit { width: 228px; height: 228px; }
.signal-orbit::before, .signal-orbit::after { content: ""; }
.signal-orbit::before { width: 340px; height: 340px; }
.signal-orbit::after { width: 450px; height: 450px; }
.signal-orbit i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #39b7c5; }
.signal-orbit i:nth-child(1) { left: 21px; top: 49px; }
.signal-orbit i:nth-child(2) { right: 8px; top: 119px; }
.signal-orbit i:nth-child(3) { left: 91px; bottom: -3px; }
.ops-center { position: absolute; left: 50%; top: 42%; width: 112px; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #9bb7dd; border-radius: 50%; background: #fff; box-shadow: 0 14px 34px rgba(21,89,223,.13); transform: translate(-50%,-50%); }
.ops-center small, .ops-center span { color: #748197; font-size: 9px; }
.ops-center strong { margin: 5px 0; color: var(--blue); font-size: 35px; font-weight: 620; line-height: 1; }
.ops-node { position: absolute; width: 178px; padding: 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #d8e1ed; border-radius: 8px; background: #fff; box-shadow: 0 8px 22px rgba(26,56,93,.07); }
.ops-node > span { color: #8995a6; font-family: var(--mono); font-size: 9px; }
.ops-node div { flex: 1; display: grid; gap: 1px; }
.ops-node b { font-size: 12px; font-weight: 650; }
.ops-node small { color: #758398; font-size: 10px; }
.state-dot { width: 6px; height: 6px; }
.state-dot.amber { background: var(--amber); box-shadow: 0 0 0 4px rgba(229,154,37,.11); }
.node-a { left: 4%; top: 11%; }
.node-b { right: 4%; top: 11%; }
.node-c { left: 3%; top: 54%; }
.node-d { right: 3%; top: 54%; }
.ops-log { position: absolute; left: 18px; right: 18px; bottom: 13px; padding-top: 7px; border-top: 1px solid var(--line); }
.ops-log > div { padding: 4px 2px; display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; color: #718096; font-size: 9px; }
.ops-log b { color: #16825f; font-weight: 650; }
.capability-rail { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 28px; border-top: 1px solid rgba(193,216,211,.9); background: rgba(252,247,239,.92); color: #486968; font-size: 12px; font-weight: 680; letter-spacing: .04em; }
.capability-rail i { width: 4px; height: 4px; border-radius: 50%; background: #c39255; }

.section { padding: 104px max(28px, calc((100vw - 1280px) / 2)); }
.section-label { margin: 0 0 34px; display: flex; align-items: center; gap: 10px; color: #69778b; font-size: 13px; font-weight: 650; }
.section-label > span:first-child { color: var(--blue); font-family: var(--mono); font-size: 11px; }
.section-label.light { color: #afbdd0; }
.section-label.light > span:first-child { color: #65c2cf; }
.intro { background: linear-gradient(180deg,#fffdf9 0%,#fff 100%); }
.intro-head, .workflow-head, .proof-head { margin-bottom: 52px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(340px,.72fr); gap: 80px; align-items: end; }
.intro-head h2, .workflow-head h2, .control h2, .delivery-head h2, .proof-head h2, .contact h2 { margin: 0; font-family: var(--display); font-size: clamp(34px,3.3vw,46px); font-weight: 620; line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.intro-head p, .workflow-head p, .proof-head p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.85; }

.solution-stack { border-top: 1px solid #9fb9b5; }
.solution-card { position: relative; min-width: 0; padding: 42px 0; display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 36px; border-bottom: 1px solid var(--line); background: transparent; transition: background .2s ease, padding .2s ease; }
.solution-card:hover { padding-left: 22px; padding-right: 22px; background: linear-gradient(90deg,#f5faf8,#fffaf2); }
.solution-index { padding-top: 8px; color: var(--blue); font-family: var(--mono); font-size: 12px; font-weight: 650; }
.product-tag { display: inline-flex; margin: 0 0 16px; padding: 5px 9px; border-radius: 4px; background: #e5f3f0; color: #14786f; font-size: 11px; font-weight: 700; }
.solution-copy h3 { max-width: 780px; margin: 0 0 15px; font-family: var(--display); font-size: clamp(26px,2.4vw,34px); font-weight: 610; line-height: 1.3; letter-spacing: -.025em; }
.solution-copy > p { max-width: 850px; margin: 0 0 25px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.solution-copy ul, .delivery-grid ul { list-style: none; margin: 0; padding: 0; }
.solution-copy ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 34px; }
.solution-copy li { position: relative; min-height: 48px; padding: 12px 0 10px 22px; border-top: 1px solid var(--line); color: #365658; font-size: 14px; line-height: 1.65; }
.solution-copy li::before { content: ""; position: absolute; left: 1px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.mini-interface { display: none !important; }

.dark-section { position: relative; overflow: hidden; background: radial-gradient(circle at 88% 0%,#32708a 0%,#175766 38%,#123f4a 100%); color: #fff; }
.dark-section::after { content: ""; position: absolute; right: -140px; bottom: -260px; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.018); }
.workflow-head, .workflow-grid { position: relative; z-index: 1; }
.workflow-head p { color: #c5dcda; }
.workflow-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.14); }
.workflow-grid article { min-height: 210px; padding: 28px; background: rgba(13,65,75,.82); }
.workflow-grid article > span { color: #66c4d0; font-family: var(--mono); font-size: 11px; }
.workflow-icon { display: none; }
.workflow-grid h3 { margin: 46px 0 10px; font-family: var(--display); font-size: 21px; font-weight: 620; }
.workflow-grid p { margin: 0; color: #bed2d1; font-size: 14px; line-height: 1.75; }

.control { background: linear-gradient(135deg,#edf7f4 0%,#f5f6ef 52%,#fff8ee 100%); }
.control-layout { display: grid; grid-template-columns: .84fr 1.16fr; gap: 86px; align-items: center; }
.control-copy > p { max-width: 540px; margin: 23px 0 30px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.mode-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.mode-legend span { padding: 7px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #344359; font-size: 12px; }
.mode-legend i, .daily-item > i { width: 7px; height: 7px; border-radius: 50%; }
.green { background: var(--green); }
.amber { background: var(--amber); }
.grey { background: #9ba6b4; }
.daily-panel { overflow: hidden; padding: 0 27px 10px; border: 1px solid #ccded9; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 22px 55px rgba(21,80,84,.12); }
.daily-head { margin: 0 -27px; padding: 22px 27px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.daily-head small { color: #66758b; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.daily-head h3 { margin: 4px 0 0; font-family: var(--display); font-size: 21px; font-weight: 620; }
.daily-head > span { color: #7c8898; font-size: 11px; }
.daily-item { min-height: 72px; display: grid; grid-template-columns: 8px 1fr auto; gap: 13px; align-items: center; border-bottom: 1px solid var(--line); }
.daily-item:last-child { border-bottom: 0; }
.daily-item > div { display: grid; gap: 2px; }
.daily-item b { font-size: 14px; font-weight: 620; }
.daily-item small { color: #778498; font-size: 12px; }
.status { padding: 4px 7px; border-radius: 4px; font-size: 10px; }
.status.auto { background: #e8f7f2; color: #147a58; }
.status.review { background: #fff3df; color: #8d5c15; }

.delivery { background: #fffaf3; }
.delivery-head { margin-bottom: 46px; }
.delivery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.delivery-grid article { min-height: 326px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.88); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.delivery-grid article:hover { border-color: #a9b9ce; box-shadow: 0 16px 34px rgba(30,58,94,.07); transform: translateY(-3px); }
.plan-no { color: var(--blue); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.delivery-grid h3 { margin: 38px 0 12px; font-family: var(--display); font-size: 23px; font-weight: 620; line-height: 1.35; }
.delivery-grid p { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.delivery-grid ul { margin-top: auto; }
.delivery-grid li { padding: 9px 0; border-top: 1px solid var(--line); color: #35445a; font-size: 13px; }
.boundary-note { margin-top: 16px; padding: 21px 24px; display: grid; grid-template-columns: 190px 1fr; gap: 25px; border: 1px solid #cddfda; border-radius: 10px; background: #eaf5f2; }
.boundary-note b { color: #244467; font-size: 13px; }
.boundary-note p { margin: 0; color: #566b84; font-size: 13px; line-height: 1.75; }

.proof { background: linear-gradient(180deg,#edf4f5,#f7faf8); }
.proof-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.proof-grid a, .proof-card { position: relative; min-height: 235px; padding: 27px; overflow: hidden; border: 1px solid #d1e1dd; border-radius: 12px; background: rgba(255,255,255,.92); transition: transform .2s ease, box-shadow .2s ease; }
.proof-grid a::after { content: ""; position: absolute; left: 27px; right: 27px; bottom: 0; height: 3px; background: var(--blue); transform: scaleX(.22); transform-origin: left; transition: transform .25s ease; }
.proof-grid a:hover { box-shadow: 0 17px 38px rgba(26,55,91,.08); transform: translateY(-3px); }
.proof-grid a:hover::after { transform: scaleX(1); }
.proof-card.coming-soon { border-color: #dcc8a8; background: linear-gradient(145deg,rgba(255,253,248,.96),rgba(242,248,246,.94)); }
.proof-card.coming-soon::after { content: ""; position: absolute; left: 27px; right: 27px; bottom: 0; height: 3px; background: linear-gradient(90deg,#c99352,#16897f); opacity: .72; }
.proof-grid span { color: var(--blue); font-size: 11px; font-weight: 700; }
.proof-grid h3 { margin: 58px 0 10px; font-family: var(--display); font-size: 22px; font-weight: 620; }
.proof-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.proof-grid a > b { position: absolute; top: 23px; right: 26px; color: var(--blue); }
.proof-status { position: absolute; top: 21px; right: 22px; padding: 5px 8px; border-radius: 999px; background: #f5ead9; color: #94662f; font-size: 9px; font-weight: 750; letter-spacing: .04em; }

.contact { position: relative; background: linear-gradient(135deg,#123f4a 0%,#176274 55%,#27527d 100%); color: #fff; }
.contact .section-label { color: #aebdd1; }
.contact-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: center; }
.contact-copy p { max-width: 620px; margin: 22px 0 0; color: #b4c0d0; font-size: 16px; line-height: 1.85; }
.contact-panel { padding: 28px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: rgba(255,255,255,.1); box-shadow: 0 24px 55px rgba(4,39,47,.18); backdrop-filter: blur(10px); }
.contact-channel { display: grid; gap: 9px; }
.contact-channel[hidden] { display: none; }
.contact-channel small, .contact-email > span { color: #6ecbd5; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.contact-channel > b { font-family: var(--display); font-size: 29px; font-weight: 620; }
.contact-channel p { margin: 0; color: #b4c0d0; font-size: 14px; }
.contact-channel > a { height: 48px; margin-top: 9px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 6px; background: linear-gradient(135deg,#2f75ce,#1c9a8b); color: #fff; font-size: 13px; font-weight: 700; }
.contact-channel > a:hover { background: #2870ee; }
.wechat-qr-slot { width: min(210px,100%); margin: 8px 0 2px; padding: 9px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 11px; background: #fff; box-shadow: 0 14px 32px rgba(4,39,47,.17); }
.wechat-qr-slot img { width: 100%; height: auto; display: block; border-radius: 5px; }
.contact-email { margin-top: 23px; padding-top: 19px; display: grid; gap: 3px; border-top: 1px solid rgba(255,255,255,.14); }
.contact-email b { font-size: 16px; font-weight: 600; }
.contact-email small { color: #aab7c8; font-size: 12px; }

/* Chinese characters carry more visual weight than Latin text, so the Chinese
   version uses a quieter editorial scale instead of the English display scale. */
html[lang="zh-CN"] .hero h1 {
  max-width: 540px;
  font-size: clamp(36px, 3.25vw, 46px);
  font-weight: 590;
  line-height: 1.24;
  letter-spacing: -.025em;
}
html[lang="zh-CN"] .intro-head h2,
html[lang="zh-CN"] .workflow-head h2,
html[lang="zh-CN"] .control h2,
html[lang="zh-CN"] .delivery-head h2,
html[lang="zh-CN"] .proof-head h2,
html[lang="zh-CN"] .contact h2 {
  font-size: clamp(28px, 2.55vw, 36px);
  font-weight: 580;
  line-height: 1.32;
  letter-spacing: -.018em;
}
html[lang="zh-CN"] .solution-copy h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 580;
  line-height: 1.42;
  letter-spacing: -.012em;
}
html[lang="zh-CN"] .workflow-grid h3,
html[lang="zh-CN"] .delivery-grid h3,
html[lang="zh-CN"] .proof-grid h3,
html[lang="zh-CN"] .daily-head h3 {
  font-size: 20px;
  font-weight: 580;
  letter-spacing: 0;
}

.site-footer { padding: 46px max(28px, calc((100vw - 1280px) / 2)) 28px; background: #10363f; color: #fff; }
.footer-brand { display: flex; align-items: baseline; gap: 18px; }
.footer-brand b { font-size: 15px; letter-spacing: .14em; }
.footer-brand span { color: #96a7bc; font-size: 12px; }
.footer-links { margin: 31px 0 40px; display: flex; flex-wrap: wrap; gap: 26px; color: #b5c1d0; font-size: 13px; }
.footer-bottom { padding-top: 19px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.13); color: #7e91a8; font-size: 11px; }

.service-chat { position: fixed; right: 24px; bottom: 22px; z-index: 180; display: grid; justify-items: end; gap: 12px; }
.chat-launcher { min-height: 54px; padding: 0 18px 0 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: linear-gradient(135deg,#1a6374,#2a70c4 65%,#1d9187); color: #fff; box-shadow: 0 14px 36px rgba(15,62,83,.28); cursor: pointer; font-size: 13px; font-weight: 720; letter-spacing: .02em; transition: transform .2s ease, box-shadow .2s ease; }
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(15,62,83,.34); }
.chat-launcher:focus-visible, .chat-form input:focus-visible, .chat-suggestions button:focus-visible, .chat-header button:focus-visible { outline: 3px solid rgba(43,133,211,.28); outline-offset: 2px; }
.chat-launcher-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); color: #d7fbf1; font-size: 15px; }
.chat-launcher > i { width: 7px; height: 7px; border: 2px solid #d4fff1; border-radius: 50%; box-shadow: 0 0 0 4px rgba(212,255,241,.1); }
.service-chat.open .chat-launcher { box-shadow: 0 8px 24px rgba(15,62,83,.2); }
.chat-panel { width: min(400px,calc(100vw - 32px)); max-height: min(640px,calc(100dvh - 104px)); overflow: hidden; display: grid; grid-template-rows: auto minmax(160px,1fr) auto auto auto; border: 1px solid rgba(183,208,206,.88); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 28px 70px rgba(12,49,64,.28); backdrop-filter: blur(18px); }
.chat-panel[hidden] { display: none; }
.chat-header { min-height: 82px; padding: 17px 18px; display: grid; grid-template-columns: 42px 1fr 34px; gap: 11px; align-items: center; background: linear-gradient(135deg,#123f4a,#176274 64%,#286bc2); color: #fff; }
.chat-avatar { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 13px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.chat-avatar span { font-family: var(--mono); font-size: 13px; font-weight: 780; letter-spacing: .04em; }
.chat-header h2 { margin: 0; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 0; }
.chat-header p { margin: 2px 0 0; color: #c4dce0; font-size: 11px; line-height: 1.4; }
.chat-header button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-size: 24px; font-weight: 300; line-height: 1; }
.chat-messages { min-height: 220px; overflow-y: auto; padding: 18px 17px 8px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; scrollbar-width: thin; }
.chat-message { max-width: 88%; display: grid; gap: 4px; align-self: flex-start; }
.chat-message.user { align-self: flex-end; justify-items: end; }
.chat-message small { padding: 0 5px; color: #879695; font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.chat-message > div { padding: 10px 12px; border: 1px solid #dce8e5; border-radius: 5px 15px 15px 15px; background: #f1f7f5; color: #29484d; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.chat-message.user > div { border-color: transparent; border-radius: 15px 5px 15px 15px; background: linear-gradient(135deg,#246a78,#286bc2); color: #fff; }
.chat-message.pending > div { color: #6c7e7d; }
.chat-message.pending > div::after { content: ""; width: 5px; height: 5px; margin-left: 7px; display: inline-block; border-radius: 50%; background: #1b8d82; box-shadow: 9px 0 #86bbb5,18px 0 #c4d8d6; animation: chat-pulse 1.1s infinite ease-in-out; }
@keyframes chat-pulse { 50% { opacity: .35; transform: translateY(-1px); } }
.chat-suggestions { padding: 8px 17px 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.chat-suggestions[hidden] { display: none; }
.chat-suggestions button { padding: 7px 10px; border: 1px solid #c7ddda; border-radius: 999px; background: #fff; color: #255963; cursor: pointer; font-size: 11px; transition: background .15s ease, border-color .15s ease; }
.chat-suggestions button:hover { border-color: #78b6b0; background: #edf8f5; }
.chat-form { margin: 0 13px; padding: 6px 6px 6px 13px; display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 7px; align-items: center; border: 1px solid #c9dcda; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(27,75,83,.06); }
.chat-form:focus-within { border-color: #5ba49d; box-shadow: 0 0 0 3px rgba(43,133,121,.1); }
.chat-form input { width: 100%; min-height: 39px; padding: 0; border: 0; outline: 0; background: transparent; color: #173e46; font-size: 13px; }
.chat-form input::placeholder { color: #8b9a9c; }
.chat-form button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: linear-gradient(135deg,#1d6c7a,#2776c8); color: #fff; cursor: pointer; font-size: 20px; }
.chat-form button:disabled { cursor: wait; opacity: .55; }
.chat-meta { padding: 11px 16px 14px; display: grid; gap: 3px; text-align: center; }
.chat-meta a { color: #216d86; font-size: 11px; font-weight: 700; }
.chat-meta a:hover { text-decoration: underline; }
.chat-meta small { color: #899695; font-size: 9px; }

@media (max-width: 1100px) {
  .site-header { padding: 0 24px; }
  .desktop-nav { display: none; }
  .menu-button { width: 42px; height: 42px; display: block; padding: 12px; }
  .menu-button span { display: block; height: 1px; margin: 5px 0; background: var(--ink); }
  .mobile-nav { position: absolute; left: 0; right: 0; top: 74px; padding: 12px 24px 20px; flex-direction: column; border-bottom: 1px solid var(--line); background: #fff; }
  .mobile-nav.open { display: flex; }
  .mobile-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .hero-grid { grid-template-columns: 1fr; width: min(820px,calc(100% - 48px)); gap: 46px; }
  .hero-copy { max-width: 720px; }
  .ops-window { width: 100%; }
  .section { padding-left: 32px; padding-right: 32px; }
  .solution-card { grid-template-columns: 150px minmax(0,1fr); }
  .control-layout, .contact-layout { grid-template-columns: 1fr; gap: 46px; }
  .contact-panel { max-width: 680px; }
  .proof-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 66px; }
  .site-header { height: 66px; padding: 0 16px; }
  .brand { font-size: 13px; }
  .brand small, .header-cta { display: none; }
  .brand-mark { width: 19px; height: 20px; }
  .mobile-nav { top: 66px; }
  .hero-grid { width: calc(100% - 36px); padding: 58px 0 52px; gap: 38px; }
  .hero h1 { font-size: 39px; line-height: 1.18; letter-spacing: -.04em; }
  .hero-lead { font-size: 16px; line-height: 1.8; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .hero-notes { display: grid; }
  .ops-window { min-height: 426px; border-radius: 13px; }
  .ops-canvas { height: 376px; }
  .ops-node { width: 138px; padding: 8px; }
  .ops-node > span { display: none; }
  .ops-node b { font-size: 10px; }
  .ops-node small { font-size: 8px; }
  .signal-orbit { width: 184px; height: 184px; }
  .signal-orbit::before { width: 280px; height: 280px; }
  .signal-orbit::after { width: 370px; height: 370px; }
  .ops-center { width: 92px; height: 92px; }
  .ops-center strong { font-size: 27px; }
  .node-a, .node-c { left: 7px; }
  .node-b, .node-d { right: 7px; }
  .ops-log { left: 9px; right: 9px; bottom: 8px; }
  .ops-log > div { grid-template-columns: 37px 1fr auto; font-size: 7px; }
  .capability-rail { justify-content: flex-start; gap: 17px; padding: 0 18px; overflow: hidden; white-space: nowrap; }
  .capability-rail span:nth-of-type(n+3), .capability-rail i:nth-of-type(n+2) { display: none; }
  .section { padding: 76px 18px; }
  .section-label { margin-bottom: 26px; }
  .intro-head, .workflow-head, .proof-head { margin-bottom: 38px; grid-template-columns: 1fr; gap: 19px; }
  .intro-head h2, .workflow-head h2, .control h2, .delivery-head h2, .proof-head h2, .contact h2 { font-size: 33px; }
  .intro-head p, .workflow-head p, .proof-head p { font-size: 15px; }
  .solution-card { padding: 30px 0; display: block; }
  .solution-card:hover { padding-left: 0; padding-right: 0; }
  .solution-index { margin-bottom: 20px; }
  .solution-copy h3 { font-size: 25px; }
  .solution-copy ul { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-grid article { min-height: 176px; }
  .workflow-grid h3 { margin-top: 35px; }
  .daily-panel { padding: 0 18px 8px; }
  .daily-head { margin: 0 -18px; padding: 19px 18px; }
  .daily-item { grid-template-columns: 8px 1fr; padding: 12px 0; }
  .daily-item .status { grid-column: 2; width: max-content; }
  .delivery-grid, .proof-grid { grid-template-columns: 1fr; }
  .delivery-grid article { min-height: 290px; }
  .boundary-note { grid-template-columns: 1fr; gap: 7px; padding: 19px; }
  .contact-channel > b { font-size: 24px; }
  .footer-brand { align-items: flex-start; flex-direction: column; gap: 7px; }
  .footer-bottom { flex-direction: column; gap: 14px; }
  .service-chat { right: 12px; bottom: 12px; }
  .chat-launcher { min-height: 50px; padding-right: 14px; }
  .chat-panel { position: fixed; left: 10px; right: 10px; bottom: 74px; width: auto; max-height: calc(100dvh - 96px); border-radius: 16px; }
  .chat-messages { min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-launcher, .chat-message.pending > div::after { animation: none; transition: none; }
}

/* 2026-09-12 device-width and touch safety */
html,body{max-width:100%;overflow-x:clip}img,video,svg{max-width:100%}.hero-grid,.section,.site-footer{min-width:0}.hero-copy,.intro-head>*,.workflow-head>*,.control-layout>*,.contact-layout>*{min-width:0}.contact-email b,.contact-channel>b{overflow-wrap:anywhere}.button,.menu-button,.chat-launcher,.chat-form button,.chat-suggestions button{touch-action:manipulation}
@media(max-width:760px){.mobile-nav{max-height:calc(100dvh - 66px);overflow-y:auto;padding-bottom:max(20px,env(safe-area-inset-bottom))}.hero-grid{padding-top:44px}.ops-window{min-width:0}.window-bar{gap:10px}.window-bar>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section,.site-footer{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}.contact-panel{padding:22px 18px}.chat-panel{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(74px,calc(env(safe-area-inset-bottom) + 64px))}.chat-form input{font-size:16px}}
@media(max-width:420px){.hero h1{font-size:clamp(32px,10vw,39px)}html[lang="zh-CN"] .hero h1{font-size:clamp(30px,9vw,36px)}.ops-node{width:118px}.node-a,.node-c{left:5px}.node-b,.node-d{right:5px}.ops-center{width:82px;height:82px}.ops-center strong{font-size:23px}.ops-log>div{grid-template-columns:32px minmax(0,1fr);gap:6px}.ops-log>div>*:last-child{display:none}.contact-channel>b{font-size:21px}.chat-launcher>span:not(.chat-launcher-mark){display:none}.chat-launcher{padding-right:10px}}