/* 行者无疆 — sub-page layouts（联系我们等子页）
   Loads after style.css and reuses its tokens & shared classes. */

/* nav on sub-pages is always solid (content is light, starts under nav) */
body:not(.home) .nav.scrolled { background: rgba(255,255,255,.82); }

/* page hero */
.phero { position: relative; overflow: hidden; min-height: 74vh; display: flex; align-items: center; padding: 110px 0 64px; }
.hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* 文字区白色渐变垫底：左侧文字清晰，右侧保留装饰画布 */
.phero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, rgba(255,255,255,.88) 42%, rgba(255,255,255,0) 70%); }
.phero .edge { position: relative; z-index: 1; }
.phero .eyebrow { color: var(--accent); }
.phero h1 { font-family: var(--cn); font-weight: 700; font-size: clamp(40px, 6vw, 74px); line-height: 1.08; letter-spacing: -.01em; margin-top: 16px; }
.phero .lead { margin-top: 22px; font-size: 19px; line-height: 1.75; color: var(--ink-2); max-width: 640px; }

/* contact — full-screen hero + figure/form split + close band */
.contact-canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.contact-backdrop { position: fixed; inset: 0; z-index: 0; background: var(--bg-dark); opacity: 0; pointer-events: none; }
.contact-hero { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.contact-hero-in { position: relative; z-index: 2; }
.contact-hero-in .eyebrow { color: var(--accent); }
.contact-hero-in h1 { font-family: var(--cn); font-weight: 700; font-size: clamp(40px, 6vw, 74px); line-height: 1.08; letter-spacing: -.01em; margin-top: 16px; max-width: 15ch; }
.contact-hero-in .lead { margin-top: 22px; font-size: 19px; line-height: 1.75; color: var(--ink-2); max-width: 560px; }

.contact-main { position: relative; z-index: 2; padding: 8vh 0 12vh; }
.contact-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.contact-stage { position: relative; min-height: 64vh; }
.contact-panel { display: flex; flex-direction: column; gap: 30px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line); border-radius: var(--r); padding: 30px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cf-head { font-family: var(--cn); font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 2px; }
.contact-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 52px; text-align: center; }
.ci-item .ci-k { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ci-item .ci-v { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.ci-item .ci-v a { border-bottom: 1px solid var(--line); }
.cf-row { display: flex; flex-direction: column; gap: 8px; }
.cf-row span { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cf-row input, .cf-row textarea { font-family: var(--cn); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; outline: none; transition: border-color .2s; resize: vertical; }
.cf-row input:focus, .cf-row textarea:focus { border-color: var(--accent); }
.contact-form .btn { margin-top: 6px; align-self: flex-start; }
.contact-form .btn:disabled { opacity: 1; background: var(--accent); cursor: default; }
.cf-error { display: none; font-size: 13.5px; color: #c0392b; }
.cf-error.show { display: block; }

.contact-close { position: relative; z-index: 2; min-height: 92vh; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 130px; color: #fff; }
.contact-close-in { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.contact-close-line { font-family: var(--cn); font-weight: 700; font-size: clamp(34px, 5vw, 60px); line-height: 1.1; letter-spacing: -.01em; color: #fff; }
.contact-close .contact-info { margin-top: 4px; }
.contact-close .ci-k { color: #8a8a95; }
.contact-close .ci-v { color: #e7e7ec; }
.contact-close .ci-v a { color: #e7e7ec; border-bottom-color: rgba(255,255,255,.32); }

/* automotive full-screen hero with morphing particle field (car → key → shield) */
.auto-hero { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.auto-hero-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.auto-hero-in { position: relative; z-index: 1; }
.auto-hero-in .eyebrow { color: var(--accent); }
.auto-hero-in h1 { font-family: var(--cn); font-weight: 700; font-size: clamp(40px, 6vw, 74px); line-height: 1.08; letter-spacing: -.01em; margin-top: 16px; }
.auto-hero-in .lead { margin-top: 22px; font-size: 19px; line-height: 1.75; color: var(--ink-2); max-width: 640px; }
@media (max-width: 900px) {
  /* 文字紧跟视觉区（与首页/关于页一致）：以最高的盾牌形态为基准留 ~35px 间隙 */
  .auto-hero { min-height: 100vh; min-height: 100svh; align-items: flex-end; padding-bottom: 20vh; padding-bottom: 20svh; }
  .auto-hero-canvas { opacity: .9; }
}

/* 小屏：地图铺满首屏作背景，渐变改为上强下弱竖向垫底，标题清晰、地图在下方透出 */
@media (max-width: 760px) {
  /* 地图在上、文字贴底：顶部不罩蒙层，仅在底部文字区垫白保证可读 */
  .phero { min-height: 84vh; align-items: flex-end; padding-bottom: 36px; }
  .phero .hero-canvas { opacity: .7; }
  .phero::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 44%, rgba(255,255,255,.86) 70%, var(--bg) 100%); }
}

/* digital-key app showcase (Automotive flagship) */
.dk-sec { position: relative; z-index: 1; background: var(--bg-soft); border-top: 1px solid var(--line); padding: 110px 0; }
.dk-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.dk-intro .eyebrow { color: var(--accent); }
.dk-intro h2 { font-family: var(--cn); font-weight: 700; font-size: clamp(30px, 4vw, 50px); line-height: 1.1; letter-spacing: -.01em; margin-top: 14px; }
.dk-intro p { margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 490px; }
.dk-brandcard { display: inline-flex; align-items: center; gap: 16px; margin-top: 28px; padding: 11px 22px 11px 11px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 34px -20px rgba(20,20,30,.28); }
.dk-brandicon { flex: none; width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(160deg, #f4f7fb, #e9eef5); border: 1px solid var(--line); display: grid; place-items: center; }
.dk-brandicon img { width: 40px; height: auto; display: block; }
.dk-brandwm { height: 30px; width: auto; display: block; }
.dk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }

/* App Store badge */
.store-badge { display: inline-flex; align-items: center; gap: 11px; background: #0c0c0e; color: #fff; border-radius: 13px; padding: 10px 18px 10px 15px; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.store-badge:hover { transform: translateY(-2px); background: #1d1d22; }
.store-apple { width: 25px; height: 25px; margin-bottom: 2px; }
.store-txt { display: flex; flex-direction: column; line-height: 1.16; }
.store-txt small { font-family: var(--sans); font-size: 10px; letter-spacing: .03em; opacity: .82; }
.store-txt strong { font-family: var(--cn); font-weight: 600; font-size: 18px; letter-spacing: .01em; }

/* APK QR */
.dk-qr { display: inline-flex; align-items: center; gap: 13px; }
.dk-qr-box { width: 88px; height: 88px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; place-items: center; }
.dk-qr-img { display: block; width: 100% !important; height: 100% !important; }
.dk-qr-cap { display: flex; flex-direction: column; line-height: 1.35; }
.dk-qr-cap strong { font-family: var(--cn); font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
.dk-qr-cap span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* device card */
.dk-device-wrap { justify-self: center; width: 100%; max-width: 360px; }
.dk-device { position: relative; border-radius: 22px; overflow: hidden; background: #ececed; border: 1px solid var(--line); box-shadow: 0 30px 60px -34px rgba(20,20,30,.4); }
.dk-device img { width: 100%; display: block; }
.dk-device-wm { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 13px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 16px -5px rgba(20,20,30,.34); }
.dk-device-wm .wm-mark { width: 26px; height: auto; display: block; }
.dk-device-wm .wm-text { height: 25px; width: auto; display: block; }
.dk-device-cap { margin-top: 16px; display: flex; align-items: baseline; gap: 11px; }
.dk-device-cap strong { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .06em; color: var(--ink); }
.dk-device-cap span { font-size: 14px; color: var(--ink-2); }

/* app screenshots row */
.dk-phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 72px; }
.dk-phone { margin: 0; }
.dk-phone-screen { aspect-ratio: 460 / 995; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 26px 52px -26px rgba(20,20,30,.36); }
.dk-phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-phone figcaption { margin-top: 16px; display: flex; flex-direction: column; gap: 3px; }
.dk-phone figcaption strong { font-family: var(--cn); font-weight: 700; font-size: 15px; color: var(--ink); }
.dk-phone figcaption span { font-size: 13px; color: var(--ink-3); }

@media (max-width: 900px) {
  .dk-sec { padding: 72px 0; }
  .dk-top { grid-template-columns: 1fr; gap: 40px; }
  .dk-device-wrap { max-width: 300px; }
  .dk-phones { grid-template-columns: 1fr 1fr; gap: 20px 18px; margin-top: 48px; }
}

/* ride-hailing safety solution */
.rh-sec { position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--line); padding: 110px 0; }
.tr-sec { background: var(--bg-soft); }
.rh-head { max-width: 760px; }
.rh-head .eyebrow { color: var(--accent); }
.rh-head h2 { font-family: var(--cn); font-weight: 700; font-size: clamp(30px, 4vw, 50px); line-height: 1.1; letter-spacing: -.01em; margin-top: 14px; }
.rh-head p { margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }

/* browser-window framed screenshots */
.rh-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 54px; align-items: start; }
.rh-win { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -36px rgba(20,20,30,.4); }
.rh-win-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.rh-win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d2d2d8; flex: none; }
.rh-url { margin-left: 10px; flex: 1; max-width: 280px; height: 22px; display: flex; align-items: center; padding: 0 11px; background: #fff; border: 1px solid var(--line); border-radius: 7px; font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); overflow: hidden; white-space: nowrap; }
.rh-win-shot { background: #fff; }
.rh-win-shot img { width: 100%; display: block; }
.rh-win figcaption { padding: 16px 18px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.rh-win figcaption strong { font-family: var(--cn); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.rh-win figcaption span { font-size: 13px; color: var(--ink-3); }

/* detection tags */
/* X-Trek 车载智能 DVR 展开区（网约车板块） */
.xt-kit { margin: 40px auto 0; max-width: 940px; border: 1px solid var(--line); border-radius: var(--r); background: #f6f6f7; overflow: hidden; }
.xt-kit img { width: 100%; height: auto; display: block; }
.xt-kit figcaption { padding: 12px 18px; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line-2); background: #fff; }
.xt-card-img { border-radius: 10px; background: #f6f6f7; overflow: hidden; margin-bottom: 14px; }
.xt-card-img img { width: 100%; height: auto; display: block; }
.xt-sos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; margin-top: 18px; align-items: stretch; }
.xt-sos-img { border: 1px solid var(--line); border-radius: var(--r); background: #f6f6f7; overflow: hidden; display: flex; flex-direction: column; }
.xt-sos-img img { width: 100%; height: auto; display: block; }
.xt-sos-img figcaption { padding: 11px 16px; font-size: 12.5px; color: var(--ink-2); background: #fff; border-top: 1px solid var(--line-2); }
.xt-sos .xt-steps { margin-top: 0; grid-template-columns: 1fr 1fr; }
.xt-show { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.7fr); gap: 16px; margin-top: 40px; align-items: stretch; }
.xt-show-img { border: 1px solid var(--line); border-radius: var(--r); background: #f6f6f7; overflow: hidden; display: flex; flex-direction: column; }
.xt-show-img img { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; }
.xt-show-img figcaption { padding: 11px 16px; font-size: 12.5px; color: var(--ink-2); background: #fff; border-top: 1px solid var(--line-2); }
.xt-show .xt-vals { grid-template-columns: 1fr 1fr; margin-top: 0; }
.xt-vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.xt-lens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.xt-card { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 22px 20px; }
.xt-card h4 { font-family: var(--cn); font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.xt-card p { margin-top: 9px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.xt-h { font-family: var(--cn); font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -.01em; margin-top: 46px; }
.xt-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.xt-step { position: relative; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-soft); padding: 18px 16px 17px; }
.xt-step .xt-k { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--accent); }
.xt-step h4 { font-family: var(--cn); font-weight: 700; font-size: 15.5px; margin-top: 8px; }
.xt-step p { margin-top: 7px; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.xt-scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin-top: 18px; }
.xt-scene { display: flex; flex-direction: column; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.xt-scene strong { font-family: var(--cn); font-weight: 700; font-size: 15px; }
.xt-scene span { font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.xt-countries { margin-top: 44px; }
.xt-cnote { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 900px) {
  .xt-vals { grid-template-columns: 1fr 1fr; }
  .xt-lens { grid-template-columns: 1fr; }
  .xt-steps { grid-template-columns: 1fr 1fr; }
  .xt-scenes { grid-template-columns: 1fr; }
  .xt-sos { grid-template-columns: 1fr; }
  .xt-show { grid-template-columns: 1fr; }
  .xt-show .xt-vals { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .xt-vals { grid-template-columns: 1fr; }
  .xt-steps { grid-template-columns: 1fr; }
}

.rh-tags { margin-top: 38px; }
.rh-tags-label { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.rh-tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.rh-tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--cn); font-size: 14.5px; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; line-height: 1.2; transition: border-color .2s, background .2s; }
.rh-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.rh-tag:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: #fff; }
.rh-tag-more { color: var(--ink-3); background: transparent; }
.rh-tag-more::before { display: none; }

@media (max-width: 900px) {
  .rh-sec { padding: 72px 0; }
  .rh-shots { grid-template-columns: 1fr; gap: 24px; }
}

/* consumer landing — product cards + shop highlight band */
.phero .intro { margin-top: 18px; font-size: 16.5px; color: var(--ink-2); max-width: 32em; }
.scards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.scard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .25s, box-shadow .25s, opacity .8s cubic-bezier(.2,.7,.2,1); }
.scard:hover { transform: translateY(-5px); box-shadow: 0 18px 44px -28px rgba(0,0,0,.32); }
.scard-media { aspect-ratio: 5/3; position: relative; display: grid; place-items: center; }
.scard-media img { width: 44%; border-radius: 18px; box-shadow: 0 16px 36px -18px rgba(0,0,0,.25); }
.scard-body { padding: 20px 22px 24px; }
.scard-body h3 { font-family: var(--cn); font-weight: 700; font-size: 19px; }
.scard-body p { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin-top: 8px; }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--ink); position: relative; }
.tlink .ar { font-family: var(--sans); transition: transform .2s; }
.scard:hover .tlink .ar { transform: translateX(4px); }

.hl { background: var(--bg-dark); color: #eef2f4; padding: 86px 0; position: relative; overflow: hidden; z-index: 1; }
.hl::after { content: ""; position: absolute; right: -6%; top: -30%; width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(43,123,228,.16), transparent 60%); pointer-events: none; }
.hl-inner { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
.hl-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 13px; font-weight: 700; color: #69a9ff; letter-spacing: .08em; }
.hl-eyebrow::before { content: ""; width: 18px; height: 2px; background: #69a9ff; border-radius: 2px; }
.hl h2 { font-family: var(--cn); font-weight: 700; color: #fff; font-size: clamp(26px, 3vw, 38px); margin: 14px 0 12px; }
.hl p { color: rgba(255,255,255,.8); font-size: 16px; max-width: 42ch; line-height: 1.7; }
.hl-cta { margin-top: 26px; }
.hl .btn-primary { background: var(--accent); }
.hl .btn-primary:hover { background: var(--accent-ink); }
.hl-points { list-style: none; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.16); }
.hl-points li { display: flex; align-items: center; gap: 14px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 15px; }
.hl-points .hk { font-family: var(--serif); color: #69a9ff; font-size: 18px; }

@media (max-width: 980px) {
  .scards { grid-template-columns: 1fr 1fr; }
  .hl-inner { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 640px) {
  .scards { grid-template-columns: 1fr; }
}

/* product summary pages — photo grid + hero actions */
.phero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.phero-note { font-size: 13.5px; color: var(--ink-3); }
.pgrid { display: grid; gap: 16px; margin-top: 44px; }
.pgrid-2 { grid-template-columns: 1fr 1fr; }
.pgrid-4 { grid-template-columns: repeat(4, 1fr); }
.pgrid .ph { border-radius: var(--r); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); aspect-ratio: 1; }
.pgrid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgrid .ph-video { aspect-ratio: 16 / 9; grid-column: 1 / -1; background: #0a0a0c; }
.pgrid .ph-video video { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 900px) {
  .pgrid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pgrid-2 { grid-template-columns: 1fr; }
}

/* product video showcase band */
.media-band { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 96px 0; }
.media-band-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.media-band-grid .mb-text .eyebrow { color: var(--accent); }
.media-band-grid .mb-text h2 { font-family: var(--cn); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.01em; margin-top: 14px; }
.media-band-grid .mb-text p { margin-top: 18px; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); max-width: 44ch; }
.media-band video { width: 100%; display: block; border-radius: var(--r); background: #0a0a0c; box-shadow: 0 30px 60px -36px rgba(20,20,30,.4); }
@media (max-width: 880px) {
  .media-band { padding: 64px 0; }
  .media-band-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* featured plants + plant-living article cards */
.oz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.oz-head .eyebrow { color: var(--accent); }
.oz-head h2 { font-family: var(--cn); font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -.01em; margin-top: 12px; }
.oz-more { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px; color: var(--accent); }
.oz-more .ar { font-family: var(--sans); transition: transform .2s; }
.oz-more:hover .ar { transform: translateX(4px); }
.oz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.oz-card { display: block; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; background: #fff; transition: box-shadow .25s, transform .25s, border-color .25s, opacity .8s cubic-bezier(.2,.7,.2,1); }
.oz-card:hover { box-shadow: 0 18px 44px -28px rgba(0,0,0,.3); transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.oz-tag { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius: 999px; padding: 4px 12px; }
.oz-card h4 { font-family: var(--cn); font-weight: 700; font-size: 20px; margin-top: 16px; }
.oz-card .oz-date { font-family: var(--sans); font-size: 12.5px; letter-spacing: .03em; color: var(--ink-3); }
.oz-card p { color: var(--ink-2); font-size: 14px; line-height: 1.65; margin-top: 10px; }
@media (max-width: 900px) { .oz-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .oz-grid { grid-template-columns: 1fr; } }

/* legal / 协议与说明 文档页 */
.doc-hero .doc-crumb { font-family: var(--sans); font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.doc-hero .doc-crumb a { color: var(--ink-2); }
.doc-hero .doc-crumb a:hover { color: var(--accent); }
.doc-hero .doc-crumb .sep { color: var(--ink-3); opacity: .5; }
.doc-hero .doc-title { font-family: var(--cn); font-weight: 700; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.12; letter-spacing: -.01em; margin-top: 14px; }
.doc-sec { padding-top: 40px; }
.doc-prose { max-width: 820px; }
.doc-prose > :first-child { margin-top: 0; }
.doc-prose h2 { font-family: var(--cn); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.01em; margin: 44px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc-prose h3 { font-family: var(--cn); font-weight: 700; font-size: 17px; color: var(--ink); margin: 26px 0 10px; }
.doc-prose p { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); margin: 12px 0; }
.doc-prose strong { color: var(--ink); font-weight: 700; }
.doc-prose a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.doc-prose ul, .doc-prose ol { margin: 12px 0; padding-left: 22px; }
.doc-prose li { font-size: 15.5px; line-height: 1.8; color: var(--ink-2); margin: 6px 0; }
.doc-prose li::marker { color: var(--ink-3); }
.doc-prose blockquote { margin: 18px 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--bg-soft); border-radius: 0 8px 8px 0; color: var(--ink-2); }
.doc-prose hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
.doc-prose figure { margin: 16px 0; }
.doc-prose img { max-width: 300px; height: auto; display: block; border: 1px solid var(--line); border-radius: 12px; margin: 14px 0; }
.doc-prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.doc-prose th, .doc-prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; color: var(--ink-2); vertical-align: top; }
.doc-prose thead th, .doc-prose tbody tr:first-child td { background: var(--bg-soft); color: var(--ink); font-weight: 700; }
/* 中英分块：默认中文，html.iw-en 时显示英文 */
.doc-en { display: none; }
html.iw-en .doc-zh { display: none; }
html.iw-en .doc-en { display: block; }
@media (max-width: 600px) { .doc-prose img { max-width: 72%; } }

/* stats — light variant for white pages */
.stats.stats-light { padding: 20px 0 40px; color: var(--ink); }
.stats.stats-light .stat { border-left: 1px solid var(--line); }
.stats.stats-light .fig { color: var(--ink); }
.stats.stats-light .lab { color: var(--ink-2); }
.stats.stats-light .fig.fig-text { font-size: clamp(30px, 3.2vw, 44px); white-space: nowrap; }

/* story (flat milestone rows) */
.story-wrap { position: relative; padding: 30px 0 80px; }
.story-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; padding: 44px 0; }
.story-visual { height: min(52vh, 440px); }
.story-visual.globe-visual { height: min(58vh, 500px); }
.scene-svg { width: 100%; height: 100%; overflow: visible; }

/* city: twinkling windows + drifting clouds + growing buildings + pin */
@keyframes twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.scene-svg .win { animation: twinkle 3.6s ease-in-out infinite; }
@keyframes cloud-drift { from { transform: translateX(-12px); } to { transform: translateX(16px); } }
.scene-svg .clouds { animation: cloud-drift 9s ease-in-out infinite alternate; }
@keyframes bld-rise { from { transform: translateY(26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.story-visual.in .bld { animation: bld-rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--bd); }
@keyframes pin-ring { 0% { r: 7; opacity: .8; } 100% { r: 20; opacity: 0; } }
.scene-svg .pin-ring { animation: pin-ring 2.2s ease-out infinite; }

.echart-box { width: 100%; height: 100%; }
.globe-canvas { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .scene-svg .win, .scene-svg .clouds, .scene-svg .pin-ring, .story-visual.in .bld { animation: none; }
}
.story-head { margin-bottom: 6px; }
.story-head .eyebrow { color: var(--accent); }
.story-scene { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.story-year { font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--ink-3); margin-top: 18px; }
.story-text h3 { font-family: var(--cn); font-weight: 700; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.01em; margin-top: 8px; }
.story-text p { margin-top: 18px; font-size: 17px; line-height: 1.8; color: var(--ink-2); max-width: 440px; }

@media (max-width: 760px) {
  .story-wrap { padding: 10px 0 40px; }
  .story-row { grid-template-columns: 1fr; gap: 20px; padding: 34px 0; }
  .story-text h3 { font-size: clamp(30px, 8vw, 44px); }
  .story-visual { height: 300px; }
  .story-visual.globe-visual { height: 340px; }
}

/* dark CTA band on light sub-pages (no scroll-driven tone system here;
   the home page paints its background via #bg-layer instead) */
body:not(.home) .cta { position: relative; z-index: 1; background: var(--bg-dark); }

/* technology — re-themed light to match the page (overrides dark band) */
.tech { background: var(--bg-soft); color: var(--ink); padding: 110px 0; border-top: 1px solid var(--line); }
.tech .eyebrow { color: var(--accent); }
.tech .sec-head h2 { color: var(--ink); }
.tech .sec-head .lead { color: var(--ink-2); }
.tech-flow { margin-top: 48px; }
.tnode { border: 1px solid var(--line); background: #fff; box-shadow: 0 14px 36px -26px rgba(0,0,0,.3); }
.tnode .nt { color: var(--ink); }
.tnode .ns { color: var(--ink-2); }
.tconn .cl { color: var(--accent); }
.tconn .cl.cl-dim { color: var(--ink-3); }
.tconn .line { background: linear-gradient(90deg, transparent, var(--line), transparent); }
.tconn .line::after { background: var(--accent); animation-duration: 3.4s; }

/* tech sub-blocks */
.tblock { margin-top: 64px; }
.tblock:first-of-type { margin-top: 52px; }
.tblock-head { margin-bottom: 26px; }
.tblock-head .tb-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.tblock-head h3 { font-family: var(--cn); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.01em; margin-top: 10px; color: var(--ink); }

/* multimodal capability cards */
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cap-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; }
.cap-card:hover { box-shadow: 0 18px 44px -28px rgba(0,0,0,.32); border-color: var(--ink-3); }
.cap-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cap-n { font-family: var(--sans); font-weight: 600; font-size: 26px; letter-spacing: -.02em; color: var(--ink); flex: none; }
.cap-rule { flex: 1; height: 1px; background: var(--line); }
.cap-card:hover .cap-rule { background: var(--accent); }
.cap-card h4 { font-family: var(--cn); font-weight: 700; font-size: 18px; margin: 0 0 14px; color: var(--ink); }
.cap-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.cap-card li { font-size: 14px; color: var(--ink-2); padding-left: 16px; position: relative; }
.cap-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* edge-cloud advantage cards */
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.adv-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.adv-card:hover { box-shadow: 0 18px 44px -28px rgba(0,0,0,.32); }
.adv-card .adv-k { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--accent); }
.adv-card h4 { font-family: var(--cn); font-weight: 700; font-size: 18px; margin: 12px 0 8px; color: var(--ink); }
.adv-card p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* application cards */
.app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.app-card { position: relative; display: flex; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px 24px 24px; overflow: hidden; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; }
.app-card:hover { box-shadow: 0 18px 44px -28px rgba(0,0,0,.32); border-color: var(--tint); transform: translateY(-2px); }
.app-bar { flex: none; width: 4px; align-self: stretch; border-radius: 3px; }
.app-body h4 { font-family: var(--cn); font-weight: 700; font-size: 19px; color: var(--ink); }
.app-body p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 900px) {
  .cap-grid, .adv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cap-grid, .adv-grid, .app-grid { grid-template-columns: 1fr; }
}

/* honor / recognition */
.honor-sec { padding-top: 30px; }
.honor-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.honor-photo { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-soft); box-shadow: 0 26px 60px -32px rgba(0,0,0,.4); }
.honor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.honor-text .eyebrow { color: var(--accent); }
.honor-text h2 { font-family: var(--cn); font-weight: 700; font-size: clamp(30px, 4vw, 50px); line-height: 1.1; letter-spacing: -.01em; margin-top: 14px; }
.honor-text p { margin-top: 20px; font-size: 16.5px; line-height: 1.8; color: var(--ink-2); max-width: 480px; }

@media (max-width: 880px) {
  .honor-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-hero { min-height: 92vh; align-items: flex-end; padding-bottom: 12vh; }
  .contact-main-grid { grid-template-columns: 1fr; gap: 8px; }
  /* 肖像固定居中、不再移动到此处，移除原预留空位 */
  .contact-stage { display: none; }
  .contact-panel { order: 1; }
  .contact-info { flex-direction: column; gap: 20px; }
  /* 冻结居中后暗色背景不再随滚动淡入，收尾段自带暗底以保证白字可读 */
  .contact-close { min-height: 56vh; background: var(--bg-dark); }
}

/* Wiggle Planet 产品页 — 下载区（App Store / Google Play / 官网 APK）+ 横幅 */
.wp-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 32px; }
.wp-dl .dk-qr { margin-left: 6px; }
.wp-apk-link { font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.wp-apk-link:hover { text-decoration: underline; }
.wp-dl-note { margin-top: 18px; max-width: 62ch; line-height: 1.6; }
.wp-hero-img { margin-top: 44px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #1b1530; aspect-ratio: 16 / 9; }
.wp-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-phones .dk-phone-screen { aspect-ratio: 1320 / 2868; background: #241a4a; }
@media (max-width: 640px) {
  .wp-dl .dk-qr { margin-left: 0; }
}