/* qm-tz-tesla.css · 特斯拉风格内页组件（2026-10-21 由 industry-inside/tesla-redesign-20261020.css 抽出为共用版）
 * 现用于：about-us/how-we-work/solutions。industry-inside 仍引用自己的副本。
 * 原则：首屏全屏大图 + 极简标题 + 两枚按钮；内容区白底 / 浅灰底交替；
 *      统一 4px 圆角按钮；大留白；文字短；颜色只用墨色、灰阶与特斯拉蓝。
 * 选择器统一以 html:not(#qmTz) body .tz 开头，压过站点里 html:not(#qmT) 系列的全局覆盖。
 */
html:not(#qmTz) body .tz{
  --tz-ink:#171A20; --tz-text:#393C41; --tz-mute:#5C5E62; --tz-line:#E2E3E3;
  --tz-soft:#F4F4F4; --tz-blue:#3E6AE1; --tz-blue-h:#3457B1; --tz-r:4px;
  --tz-nav:70px; --tz-pad:clamp(24px,5vw,72px); --tz-sec:clamp(80px,10vw,144px);
  background:#fff; color:var(--tz-text); font-weight:400; text-transform:none;
}
html:not(#qmTz) body .tz *{box-sizing:border-box}
html:not(#qmTz) body .tz :is(h1,h2,h3,h4,p,ul,ol,li){margin:0;padding:0;text-transform:none}
html:not(#qmTz) body .tz :is(ul,ol){list-style:none}
html:not(#qmTz) body .tz img{display:block;max-width:100%;height:auto}
html:not(#qmTz) body .tz .tz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 按钮 ---------- */
html:not(#qmTz) body .tz .tz-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
html:not(#qmTz) body .tz .tz-btn{display:inline-flex;align-items:center;justify-content:center;min-width:264px;min-height:40px;padding:0 24px;border-radius:var(--tz-r);font-size:14px;font-weight:500;line-height:1;letter-spacing:0;text-decoration:none!important;transition:background-color .33s,color .33s,box-shadow .25s}
html:not(#qmTz) body .tz .tz-btn:focus-visible{outline:2px solid var(--tz-blue);outline-offset:3px}
html:not(#qmTz) body .tz .tz-btn--primary{background:var(--tz-blue)!important;color:#fff!important}
html:not(#qmTz) body .tz .tz-btn--primary:hover{background:var(--tz-blue-h)!important}
html:not(#qmTz) body .tz .tz-btn--glass{background:rgba(244,244,244,.65)!important;color:var(--tz-ink)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html:not(#qmTz) body .tz .tz-btn--glass:hover{background:rgba(244,244,244,.9)!important}
html:not(#qmTz) body .tz .tz-btn--light{background:#fff!important;color:var(--tz-ink)!important;box-shadow:inset 0 0 0 1px var(--tz-line)}
html:not(#qmTz) body .tz .tz-btn--light:hover{box-shadow:inset 0 0 0 2px var(--tz-ink)}
html:not(#qmTz) body .tz .tz-link{display:inline-block;margin-top:16px;color:var(--tz-ink)!important;font-size:14px;font-weight:500;text-decoration:underline!important;text-underline-offset:4px;text-decoration-thickness:1px}
html:not(#qmTz) body .tz .tz-link:hover{text-decoration-thickness:2px}

/* ---------- 通用版块 ---------- */
html:not(#qmTz) body .tz .tz-sec{padding:var(--tz-sec) var(--tz-pad);background:#fff}
html:not(#qmTz) body .tz .tz-sec--soft{background:var(--tz-soft)}
html:not(#qmTz) body .tz .tz-wrap{max-width:1200px;margin:0 auto;text-align:center}
html:not(#qmTz) body .tz .tz-h2{color:var(--tz-ink)!important;font-size:clamp(28px,3.4vw,40px)!important;font-weight:500!important;line-height:1.25!important;letter-spacing:-.01em!important}
html:not(#qmTz) body .tz .tz-lead{max-width:40em;margin:16px auto 0;color:var(--tz-mute)!important;font-size:clamp(15px,1.25vw,17px);line-height:1.75}

/* ---------- 1. 首屏 ---------- */
html:not(#qmTz) body .tz .tz-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100svh - var(--tz-nav));padding:clamp(56px,10vh,120px) var(--tz-pad) clamp(40px,7vh,72px);overflow:hidden;background:var(--tz-ink);text-align:center}
html:not(#qmTz) body .tz .tz-hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%!important;max-width:none;object-fit:cover;object-position:60% center}
html:not(#qmTz) body .tz .tz-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.3) 26%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 70%,rgba(0,0,0,.45) 100%)}
html:not(#qmTz) body .tz .tz-hero-title{color:#fff!important;font-size:clamp(40px,5vw,64px)!important;font-weight:500!important;line-height:1.1!important;letter-spacing:-.02em!important}
html:not(#qmTz) body .tz .tz-hero-title,html:not(#qmTz) body .tz .tz-hero-sub{text-shadow:0 1px 18px rgba(0,0,0,.35)}
html:not(#qmTz) body .tz .tz-hero-sub{margin-top:12px;color:rgba(255,255,255,.92)!important;font-size:clamp(15px,1.3vw,18px);line-height:1.6}

/* ---------- 2. 定位 + 数据 ---------- */
html:not(#qmTz) body .tz .tz-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:960px;margin:clamp(48px,6vw,80px) auto 0}
html:not(#qmTz) body .tz .tz-stats li{display:flex;flex-direction:column;align-items:center;gap:8px}
html:not(#qmTz) body .tz .tz-stats strong{color:var(--tz-ink);font-size:clamp(36px,4vw,52px);font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
html:not(#qmTz) body .tz .tz-stats strong span{margin-left:2px;font-size:.45em;font-weight:500;vertical-align:.9em}
html:not(#qmTz) body .tz .tz-stats li>span{color:var(--tz-mute)!important;font-size:14px!important;line-height:1.5}

/* ---------- 3. 能力分段切换 ---------- */
html:not(#qmTz) body .tz .tz-seg{display:inline-flex;gap:4px;margin:40px auto 0;padding:4px;border-radius:calc(var(--tz-r) + 4px);background:#E8E8E8}
html:not(#qmTz) body .tz .tz-seg[hidden]{display:none}
html:not(#qmTz) body .tz .tz-seg button{min-height:40px;min-width:120px;padding:0 20px;border:0!important;border-radius:var(--tz-r)!important;background:transparent!important;color:var(--tz-mute)!important;font-family:inherit;font-size:14px!important;font-weight:500;line-height:1;letter-spacing:0!important;text-transform:none!important;cursor:pointer;transition:background-color .25s,color .25s,box-shadow .25s}
html:not(#qmTz) body .tz .tz-seg button:hover{color:var(--tz-ink)!important}
html:not(#qmTz) body .tz .tz-seg button[aria-selected="true"]{background:#fff!important;color:var(--tz-ink)!important;box-shadow:0 1px 3px rgba(23,26,32,.12)}
html:not(#qmTz) body .tz .tz-seg button:focus-visible{outline:2px solid var(--tz-blue);outline-offset:2px}
html:not(#qmTz) body .tz .tz-panel{margin-top:48px}
html:not(#qmTz) body .tz .tz-panel[hidden]{display:none}
html:not(#qmTz) body .tz .tz-panel-title{margin-bottom:24px;color:var(--tz-ink)!important;font-size:20px!important;font-weight:500!important}
html:not(#qmTz) body .tz .tz-caps.is-tabs .tz-panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html:not(#qmTz) body .tz .tz-caps:not(.is-tabs) .tz-panel+.tz-panel{margin-top:64px}
html:not(#qmTz) body .tz .tz-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;text-align:left}
html:not(#qmTz) body .tz .tz-card{padding:28px 24px 32px;border-radius:var(--tz-r);background:#fff}
html:not(#qmTz) body .tz .tz-card h4{color:var(--tz-ink)!important;font-size:17px!important;font-weight:500!important;line-height:1.4!important;letter-spacing:0!important}
html:not(#qmTz) body .tz .tz-card p{margin-top:12px;color:var(--tz-mute)!important;font-size:14px!important;line-height:1.75}

/* ---------- 4. 全幅图片 ---------- */
html:not(#qmTz) body .tz .tz-feature{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(88vh,860px);padding:var(--tz-sec) var(--tz-pad) clamp(48px,7vw,96px);overflow:hidden;background:var(--tz-ink)}
html:not(#qmTz) body .tz .tz-feature-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%!important;max-width:none;object-fit:cover;object-position:center 40%}
html:not(#qmTz) body .tz .tz-feature::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 70%)}
html:not(#qmTz) body .tz .tz-feature-copy{width:100%;max-width:1200px;margin:0 auto}
html:not(#qmTz) body .tz .tz-feature .tz-h2{color:#fff!important}
html:not(#qmTz) body .tz .tz-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.3)}
html:not(#qmTz) body .tz .tz-points li{color:rgba(255,255,255,.92)!important;font-size:15px;line-height:1.7}

/* ---------- 5. 行业动态 ---------- */
html:not(#qmTz) body .tz .tz-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;margin-top:clamp(40px,5vw,64px);text-align:left}
html:not(#qmTz) body .tz .tz-post img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--tz-r)}
html:not(#qmTz) body .tz .tz-post-tag{margin-top:20px;color:var(--tz-mute)!important;font-size:12px;font-weight:500;letter-spacing:.04em}
html:not(#qmTz) body .tz .tz-post h3{margin-top:6px;color:var(--tz-ink)!important;font-size:20px!important;font-weight:500!important;line-height:1.4!important;letter-spacing:0!important}
html:not(#qmTz) body .tz .tz-post h3+p{margin-top:8px;color:var(--tz-mute)!important;font-size:14px;line-height:1.75;max-width:36em}

/* ---------- 6. 收尾 CTA ---------- */
html:not(#qmTz) body .tz .tz-cta .tz-actions{margin-top:40px}

/* ---------- 动效：只做轻微淡入；尊重减少动态 ---------- */
@media (prefers-reduced-motion:no-preference){
  html:not(#qmTz) body .tz .tz-hero-top,html:not(#qmTz) body .tz .tz-hero-bottom{animation:tz-in .9s cubic-bezier(.2,.7,.2,1) both}
  html:not(#qmTz) body .tz .tz-hero-bottom{animation-delay:.15s}
  html:not(#qmTz) body .tz .tz-post img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
}
@keyframes tz-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- 平板 ---------- */
@media (max-width:1024px){
  html:not(#qmTz) body .tz .tz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:not(#qmTz) body .tz .tz-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}

/* ---------- 手机 ---------- */
@media (max-width:767px){
  html:not(#qmTz) body .tz{--tz-nav:56px}
  html:not(#qmTz) body .tz .tz-hero{min-height:calc(100svh - var(--tz-nav))}
  html:not(#qmTz) body .tz .tz-hero-img{object-position:62% center}
  html:not(#qmTz) body .tz .tz-actions{flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:400px;margin-inline:auto}
  html:not(#qmTz) body .tz .tz-btn{min-width:0;width:100%}
  html:not(#qmTz) body .tz .tz-seg{display:flex;width:100%}
  html:not(#qmTz) body .tz .tz-seg button{flex:1;min-width:0;padding:0 8px}
  html:not(#qmTz) body .tz .tz-cards{grid-template-columns:1fr;gap:12px}
  html:not(#qmTz) body .tz .tz-card{padding:24px 20px}
  html:not(#qmTz) body .tz .tz-feature{min-height:auto;padding-top:min(70vw,420px)}
  html:not(#qmTz) body .tz .tz-points{grid-template-columns:1fr;gap:12px}
  html:not(#qmTz) body .tz .tz-news-grid{grid-template-columns:1fr;gap:40px}
}

/* =====================================================================
 * 2026-10-21 新增组件（solutions 页）
 * ===================================================================== */
/* 首屏在栏目导航下方：高度不再按整屏算 */
html:not(#qmTz) body .tz .tz-hero--sub{min-height:clamp(520px,78svh,860px)}
/* 左右分栏：图片 + 文字 */
html:not(#qmTz) body .tz .tz-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;max-width:1200px;margin:0 auto;text-align:left}
html:not(#qmTz) body .tz .tz-split img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--tz-r)}
html:not(#qmTz) body .tz .tz-split .tz-lead{margin-left:0}
html:not(#qmTz) body .tz .tz-kicker{margin-bottom:12px;color:var(--tz-mute)!important;font-size:12px;font-weight:500;letter-spacing:.08em}
html:not(#qmTz) body .tz .tz-feature .tz-kicker{color:rgba(255,255,255,.75)!important}
html:not(#qmTz) body .tz .tz-feature .tz-lead{margin-left:0;color:rgba(255,255,255,.9)!important}
/* 三步流程 */
html:not(#qmTz) body .tz .tz-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px);text-align:left;counter-reset:tz-step}
html:not(#qmTz) body .tz .tz-step{padding:32px 24px;border-radius:var(--tz-r);background:var(--tz-soft)}
html:not(#qmTz) body .tz .tz-step::before{counter-increment:tz-step;content:"0" counter(tz-step);display:block;margin-bottom:20px;color:var(--tz-blue);font-size:13px;font-weight:500;letter-spacing:.06em}
html:not(#qmTz) body .tz .tz-step h3{color:var(--tz-ink)!important;font-size:20px!important;font-weight:500!important;line-height:1.4!important;letter-spacing:0!important}
html:not(#qmTz) body .tz .tz-step p{margin-top:10px;color:var(--tz-mute)!important;font-size:14px!important;line-height:1.75}
html:not(#qmTz) body .tz .tz-note{margin-top:24px;color:var(--tz-mute)!important;font-size:14px;line-height:1.7}
/* 同栏目页面：链接卡片 */
html:not(#qmTz) body .tz .tz-sibs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:clamp(40px,5vw,56px);text-align:left}
html:not(#qmTz) body .tz .tz-sib{display:flex;flex-direction:column;gap:8px;min-height:100%;padding:24px;border-radius:var(--tz-r);background:#fff;box-shadow:inset 0 0 0 1px var(--tz-line);color:var(--tz-ink)!important;text-decoration:none!important;transition:box-shadow .25s}
html:not(#qmTz) body .tz .tz-sib:hover{box-shadow:inset 0 0 0 2px var(--tz-ink)}
html:not(#qmTz) body .tz .tz-sib:focus-visible{outline:2px solid var(--tz-blue);outline-offset:3px}
html:not(#qmTz) body .tz .tz-sib strong{font-size:16px;font-weight:500}
html:not(#qmTz) body .tz .tz-sib span{color:var(--tz-mute)!important;font-size:13px;line-height:1.7}
html:not(#qmTz) body .tz .tz-sib[aria-current="page"]{background:var(--tz-ink);box-shadow:none;color:#fff!important;cursor:default}
html:not(#qmTz) body .tz .tz-sib[aria-current="page"] strong{color:#fff!important}
html:not(#qmTz) body .tz .tz-sib[aria-current="page"] span{color:rgba(255,255,255,.75)!important}
html:not(#qmTz) body .tz .tz-back{margin-top:32px;font-size:14px}
html:not(#qmTz) body .tz .tz-back a{margin:0 12px}
@media (max-width:1024px){
  html:not(#qmTz) body .tz .tz-steps{grid-template-columns:1fr}
}
@media (max-width:767px){
  html:not(#qmTz) body .tz .tz-hero--sub{min-height:calc(100svh - 56px - 40px)}
  html:not(#qmTz) body .tz .tz-split{grid-template-columns:1fr}
  html:not(#qmTz) body .tz .tz-sibs{grid-template-columns:1fr}
  html:not(#qmTz) body .tz .tz-back a{display:block;margin:8px 0}
}