/* ============================================================
   Weigh2x Tech — 公司官网样式 (en/zh)
   Design: navy / steel / signal orange
   ============================================================ */
:root{
  --navy:#0b1c2e;
  --navy-2:#10263c;
  --navy-3:#16324e;
  --ink:#152334;
  --muted:#5c6b7b;
  --line:#dbe4ec;
  --bg:#ffffff;
  --bg-soft:#f2f6f9;
  --accent:#f97316;
  --accent-dark:#ea580c;
  --amber:#f59e0b;
  --ok:#16a34a;
  --white:#fff;
  --radius:14px;
  --shadow:0 10px 30px rgba(10,30,50,.10);
  --shadow-lg:0 24px 60px rgba(8,24,42,.18);
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI","Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Roboto,Arial,sans-serif;
  --container:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:none}
h1,h2,h3,h4{line-height:1.22;color:var(--navy);font-weight:800;letter-spacing:-.01em}
p{margin:0 0 14px}
::selection{background:rgba(249,115,22,.22)}
.container{max-width:var(--container);margin:0 auto;padding:0 22px}
.section{padding:78px 0}
.section.tight{padding:56px 0}
.section.alt{background:var(--bg-soft)}
.section.dark{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-3) 100%);color:#dfe9f3}
.section.dark h1,.section.dark h2,.section.dark h3{color:#fff}
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.eyebrow{display:inline-block;font-weight:700;font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:9px}
.section.dark .eyebrow{color:var(--amber)}
.h-sec{font-size:clamp(26px,3.4vw,40px);margin-bottom:12px}
.lead{font-size:18px;color:var(--muted);max-width:760px}
.section.dark .lead{color:#b9c9d9}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:13px 24px;border-radius:999px;transition:.18s;border:2px solid transparent;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 8px 22px rgba(249,115,22,.35)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* 浅色区块里的 ghost 按钮：原来的白字白边在浅底上等于隐形，改成深色描边 */
.section:not(.dark) .btn.ghost{color:var(--navy);border-color:rgba(11,28,46,.3)}
.section:not(.dark) .btn.ghost:hover{border-color:var(--navy);background:rgba(11,28,46,.06)}
.btn.dark{background:var(--navy);color:#fff}
.btn.dark:hover{background:var(--navy-3)}
.btn.line{background:#fff;color:var(--navy);border-color:var(--line)}
.btn.line:hover{border-color:var(--navy);background:var(--bg-soft)}
.btn.sm{padding:9px 16px;font-size:13.5px}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(11,28,46,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-in{display:flex;align-items:center;gap:20px;height:79px}   /* +1px 下边框 = 菜单条 80px */
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:#fff;font-size:21px;letter-spacing:.01em}
.brand .mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--amber));display:grid;place-items:center;font-size:18px;color:#fff;flex:0 0 auto}
.brand small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.22em;color:#9fb4c8;text-transform:uppercase;line-height:1.3}
.brand>span{line-height:1.25}
.main-nav{display:flex;gap:4px;margin-left:auto}
.main-nav a{color:#c9d8e6;font-size:17px;font-weight:600;padding:12px 16px;border-radius:9px;transition:.15s}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.main-nav a.active{color:#fff;background:rgba(249,115,22,.18)}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:8px}
.lang-sw{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:999px;overflow:hidden}
.lang-sw a{padding:5px 11px;font-size:12.5px;font-weight:700;color:#b9c9d9}
.lang-sw a.cur{background:#fff;color:var(--navy)}
.burger{display:none;background:none;border:0;width:40px;height:40px;color:#fff;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px auto}
/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.38}
.hero .veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,18,30,.94) 0%,rgba(7,18,30,.74) 46%,rgba(9,21,34,.42) 100%)}
/* 文案块与页头 logo / 其他区块左对齐（原来居中的 780px 盒子在宽屏上整体偏右），
   标题与正文各自限宽，放宽后断行不再出现「末行只剩一个词」 */
.hero-in{position:relative;z-index:2;padding:110px 22px 96px;max-width:var(--container)}
.hero h1{color:#fff;font-size:clamp(34px,5.2vw,58px);margin:10px 0 14px;max-width:1060px;text-wrap:balance}
.hero .sub{font-size:clamp(16px,1.6vw,19px);color:#d7e2ec;max-width:1116px;text-wrap:pretty;margin-bottom:10px}
/* 按钮行：不止 hero 里用，放到通用层（原先只有 .hero .cta-row 有 gap，导致
   正文/深色区块里的按钮贴在一起） */
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.center .cta-row{justify-content:center}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.hero .badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#e8f0f6;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)}
/* ---------- stat bar ---------- */
.statbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 30px;margin-top:0;position:relative;z-index:3}
.stat{text-align:center}
.stat b{display:block;font-size:30px;color:var(--navy);font-weight:900;letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--muted);font-weight:600}
/* ---------- cards / features ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.2s;box-shadow:0 2px 10px rgba(10,30,50,.04)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;background:rgba(249,115,22,.1);color:var(--accent-dark);font-size:22px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted);margin:0}
.dark-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.dark-card p{color:#b9c9d9}
.dark-card h3{color:#fff}
/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center}
.split .imgbox{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.split .imgbox img{width:100%;height:100%;object-fit:cover;min-height:320px}
/* imageFit:"contain" —— 用于结构图/示意图：整张图完整显示，不裁切（照片仍用默认 cover） */
.split .imgbox.fit-contain{background:#fff;box-shadow:none;border:1px solid var(--line)}
.split .imgbox.fit-contain img{height:auto;min-height:0;object-fit:contain}
/* ---------- split 的「上文下图」变体（stack:true） ---------- */
/* 文字走容器整栏（.lead 仍为全站统一的 760px 上限），图片在下方居中、比文字栏略窄 */
.stack-media{margin-top:46px;display:flex;justify-content:center}
.stack-media .imgbox{width:100%;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line)}
.stack-media .imgbox.fit-contain{background:#fff}
.stack-media .imgbox img{display:block;width:100%;height:auto;object-fit:contain}
/* 按钮挪到图片下方时居中，与居中大图对齐成一条中轴 */
.cta-row.after-media{justify-content:center}
.split ul.pts,.container>ul.pts,.stack-head ul.pts{list-style:none;margin:20px 0 4px}
.split ul.pts li,.container>ul.pts li,.stack-head ul.pts li{padding:7px 0 7px 32px;position:relative;font-size:15.5px}
.split ul.pts li:before,.container>ul.pts li:before,.stack-head ul.pts li:before{content:"✓";position:absolute;left:2px;top:7px;width:20px;height:20px;border-radius:50%;background:rgba(22,163,74,.12);color:var(--ok);display:grid;place-items:center;font-size:11px;font-weight:900}
/* ---------- product cards ---------- */
.pcard{overflow:hidden;display:flex;flex-direction:column}
.pcard .pimg{height:210px;background:linear-gradient(135deg,#edf2f7,#dfe8f0);display:grid;place-items:center;overflow:hidden;position:relative}
.pcard .pimg:empty::after{content:"GX-6";font-weight:900;font-size:34px;color:rgba(11,28,46,.08);letter-spacing:.05em}
.pcard .pimg img{width:100%;height:100%;object-fit:cover}
/* imageFit:"contain" —— 界面截图类配图完整显示（字母边用 pimg 自带浅底） */
.pcard .pimg.fit-contain img{object-fit:contain;padding:10px}
.pcard .pbody{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.pcard .ptag{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--accent-dark);text-transform:uppercase}
.pcard h3{font-size:21px;margin:6px 0 10px}
.pcard ul{list-style:none;margin:10px 0 18px;flex:1}
.pcard ul li{font-size:13.5px;color:var(--muted);padding:5px 0 5px 20px;position:relative}
.pcard ul li:before{content:"▸";position:absolute;left:2px;color:var(--accent)}
/* ---------- spec tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table.spec{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
table.spec th{background:var(--navy);color:#fff;text-align:left;padding:12px 16px;font-size:13px;letter-spacing:.04em}
table.spec td{padding:11px 16px;border-top:1px solid var(--line);vertical-align:top}
table.spec tr:nth-child(even) td{background:#f8fafc}
table.spec td.k{font-weight:700;color:var(--navy);white-space:nowrap}
/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;counter-reset:st}
.step{position:relative;padding:26px 22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.step b.no{position:absolute;top:-16px;left:22px;background:var(--accent);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:15px;box-shadow:0 6px 14px rgba(249,115,22,.4)}
.step h3{font-size:16.5px;margin:8px 0 6px}
.step p{font-size:13.8px;color:var(--muted);margin:0}
/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
details.fq{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden}
details.fq[open]{box-shadow:var(--shadow)}
details.fq summary{cursor:pointer;list-style:none;padding:17px 20px;font-weight:700;font-size:15.5px;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:14px}
details.fq summary::-webkit-details-marker{display:none}
details.fq summary:after{content:"+";font-size:22px;font-weight:400;color:var(--accent);transition:.2s;line-height:1}
details.fq[open] summary:after{transform:rotate(45deg)}
details.fq .a{padding:0 20px 18px;color:var(--muted);font-size:15px}
/* ---------- downloads ---------- */
.dl{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;transition:.15s}
.dl:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.dl .fi{font-size:26px}
.dl .di{flex:1;min-width:0}
.dl .di b{display:block;font-size:14.5px;color:var(--navy)}
.dl .di span{font-size:12.5px;color:var(--muted)}
/* ---------- contact ---------- */
.contactgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:40px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;gap:15px;align-items:flex-start;margin-bottom:14px}
.ccard .ci{font-size:22px;color:var(--accent)}
.ccard b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ccard a,.ccard span{font-size:15.5px;color:var(--navy);font-weight:600;word-break:break-all}
form.inq{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.frow{margin-bottom:16px}
.frow label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.frow input,.frow select,.frow textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff;color:var(--ink);transition:.15s}
.frow input:focus,.frow select:focus,.frow textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.frow textarea{min-height:120px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#formOk{display:none;margin-top:14px;padding:12px 16px;border-radius:10px;background:rgba(22,163,74,.1);color:#15803d;font-size:14px;font-weight:600}
/* ---------- partners / quotes ---------- */
.quote{border-left:4px solid var(--accent);background:#fff;border-radius:0 12px 12px 0;padding:22px 26px;box-shadow:var(--shadow);font-size:16.5px;color:var(--navy);margin:24px 0}
.quote small{display:block;margin-top:10px;color:var(--muted);font-size:13px}
/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#a9bccd;padding:64px 0 30px}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;margin-bottom:40px}
.f-grid h4{color:#fff;font-size:14px;margin-bottom:16px;letter-spacing:.06em;text-transform:uppercase}
.f-grid a{display:block;color:#a9bccd;font-size:14px;padding:4px 0}
.f-grid a:hover{color:#fff}
.f-brand .brand{color:#fff}
.f-brand p{font-size:13.5px;margin:14px 0 0;color:#8fa3b8;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#7d92a8}
/* ---------- mobile ---------- */
@media (max-width:960px){
  /* 关闭状态停到视口左侧：向左的溢出不计入可滚动区域，手机上不会出现横向滚动条
     （放到右侧 translateX(100%) 会把整页撑宽 100vw）。 */
  /* 高度必须显式给：.site-header 带 backdrop-filter，会成为 fixed 子元素的包含块，
     于是 .main-nav 的 inset:0 只撑到站头那 80px → 菜单打开后没有深色底、文字叠在页面内容上
     （线上长期如此，2026-09-29 修）。height:100dvh 覆盖整个视口；100vh 给老浏览器兜底。 */
  .main-nav{position:fixed;inset:0;height:100vh;height:100dvh;background:var(--navy);flex-direction:column;align-items:flex-start;padding:90px 30px 30px;gap:6px;transform:translateX(-100%);transition:.25s;margin:0;visibility:hidden;overflow-y:auto}
  .main-nav.open{transform:none;visibility:visible}
  .main-nav a{font-size:18px;padding:12px 6px;width:100%}
  .burger{display:block}
  .g3,.g4,.g2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:30px}
  .stack-media{margin-top:30px}
  .stack-media .imgbox{width:100%!important}
  .contactgrid{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .statbar{margin-top:0}
  .section{padding:58px 0}
}
@media (max-width:600px){ .f-grid{grid-template-columns:1fr} }

/* ---------- nav dropdown (two-level) ---------- */
.main-nav .nav-item{position:relative}
.nav-item>.nav-sub{position:absolute;top:calc(100% + 8px);left:0;background:#0e2238;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px;min-width:220px;display:none;flex-direction:column;box-shadow:0 16px 40px rgba(0,0,0,.4);backdrop-filter:blur(6px)}
/* 只用 hover 展开：原先还有 `.nav-item.on>.nav-sub{display:flex}`，
   导致「关于我们」这类当前所在栏目在桌面上永远挂着一个浮层（压住 hero），手机上子项本来就是常显的，故删掉。 */
.nav-item:hover>.nav-sub{display:flex}
.nav-sub a{color:#c9d8e6;font-size:13.5px;font-weight:600;padding:9px 12px;border-radius:8px;white-space:nowrap}
.nav-sub a:hover{background:rgba(249,115,22,.16);color:#fff}
.nav-item>.nav-sub:before{content:"";position:absolute;top:-8px;left:28px;border:8px solid transparent;border-bottom-color:#0e2238;border-top:0}
.main-nav .nav-item.on>a{color:#fff;background:rgba(249,115,22,.18)}
@media(max-width:960px){
  .nav-item>.nav-sub{position:static;display:flex;background:none;border:0;box-shadow:none;padding:2px 0 0 16px;min-width:0}
  .nav-item>.nav-sub:before{display:none}
  .nav-sub a{font-size:15px;padding:8px 6px}
}

/* ---------- tech feature cards ---------- */
.featgrid{counter-reset:feat}
.featgrid .card{position:relative;background:linear-gradient(180deg,#ffffff,#f7fafc);border:1px solid var(--line);border-radius:16px;padding:26px;overflow:hidden}
.featgrid .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--amber));opacity:0;transform:scaleX(.4);transform-origin:left;transition:.3s}
.featgrid .card::after{counter-increment:feat;content:"0"counter(feat);position:absolute;right:16px;top:16px;font-size:34px;font-weight:900;letter-spacing:.02em;color:rgba(11,28,46,.07);line-height:1}
.featgrid .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(249,115,22,.4)}
.featgrid .card:hover::before{opacity:1;transform:scaleX(1)}
.featgrid .ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#eef3f8,#e2ebf4);border:1px solid var(--line);color:var(--accent-dark);font-size:23px;display:grid;place-items:center;margin-bottom:18px}
/* 统一线性图标（build/icons.mjs 输出）：尺寸/描边/圆角统一，颜色继承 .ic 的 currentColor */
.ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.dl .fi svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ccard .ci svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dark-card{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14)}
.dark-card::after{color:rgba(255,255,255,.09)!important}
.dark-card .ic{background:rgba(249,115,22,.14);border-color:rgba(249,115,22,.35);color:var(--amber)}
.dark-card:hover{border-color:var(--amber)!important}

/* ---------- dark section with faint photo ---------- */
.feat-sec{position:relative;overflow:hidden}
.feat-sec .secbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.15;filter:saturate(.85)}
.feat-sec .container{position:relative;z-index:2}

/* ---------- 色块改浅灰底 + 文字更清晰 ---------- */
.featgrid .card{background:linear-gradient(180deg,#f5f8fb,#eef2f6);border:1px solid #dde6ee}
.featgrid .card p{color:#42505f;font-size:15px;line-height:1.65}
.featgrid .card h3{color:#0b1c2e;font-size:18px;line-height:1.32;letter-spacing:.01em}
.featgrid .ic{background:#fff;border:1px solid #dde6ee;color:var(--accent-dark)}
.featgrid .card:hover{border-color:var(--accent);box-shadow:0 14px 34px rgba(10,30,50,.12)}
/* 非并排区（普通 .card）在白色区块上保持浅灰以区分，产品卡保留白底 */
/* 非并排区（普通 .card，如行业页「Five industries」方块）的底色 —— 2026-09-23 由近白的 #f5f8fb 换成浅蓝调，
   原来与浅灰区块底色(#f2f6f9)几乎同色、几乎看不出是卡片 */
.card{background:#e8f0f9;border-color:#cfe0f1}
.dark-card{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14)}
.pcard{background:#fff}

/* ---------- 卡片底图：技术线稿母题（2026-09-29，首页「Why GX-6」六块起用） ----------
   母题由 build/motifs.mjs 程序化生成（矢量线稿，无第三方素材），generator 以 data URI
   内联成每张卡自己的 background-image（不额外发请求）。
   版式：贴卡片右下角 + SVG 内置「左淡右显」蒙版 —— 左侧与中间的文字区保持干净，
        线稿只在右下角以极淡的笔触透出；淡到不影响正文对比度。
   想更明显/更含蓄：调 build/motifs.mjs 里 motifCSS(name, op, strength) 的 op（现 0.45）；
   想换大小/位置：改下面三行 background-size / background-position。 */
.featgrid .card.has-motif{
  background-repeat:no-repeat;
  background-position:right -2px bottom -4px;
  background-size:64% auto;
}
@media(max-width:960px){
  /* 两列时卡片更宽，母题同步放大一点，保证观感一致 */
  .featgrid .card.has-motif{background-size:44% auto}
}
@media(max-width:560px){
  .featgrid .card.has-motif{background-size:58% auto;background-position:right -2px bottom -2px}
}

/* ---------- 预览版构建标记（仅预览构建输出，正式版不含） ---------- */
.build-stamp{color:var(--amber);font-weight:600;letter-spacing:.02em}

/* ---------- 行业卡片弹窗（点击卡片在本页 pop 出内容，不跳页） ---------- */
.w2x-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:26px}
.w2x-modal[hidden]{display:none}
.w2x-modal-bg{position:absolute;inset:0;background:rgba(7,18,30,.62);backdrop-filter:blur(3px)}
.w2x-modal-panel{position:relative;background:#fff;border-radius:18px;box-shadow:0 34px 90px rgba(6,20,36,.4);width:min(940px,100%);max-height:min(88vh,940px);overflow:auto;-webkit-overflow-scrolling:touch}
.w2x-modal-body{padding:34px 38px 30px}
.w2x-modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:21px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s}
.w2x-modal-x:hover{background:var(--bg-soft);border-color:#c6d4e2}
.w2x-modal h3{font-size:clamp(22px,2.6vw,30px);margin:8px 0 12px;padding-right:44px}
.w2x-m-lead{color:var(--muted);font-size:16px;max-width:790px}
.w2x-m-sub{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dark);margin:24px 0 13px}
.w2x-m-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.w2x-m-item{background:#f7fafc;border:1px solid var(--line);border-radius:12px;padding:16px 17px}
.w2x-m-item .ic{width:36px;height:36px;border-radius:10px;margin-bottom:10px;font-size:18px}
.w2x-m-item .ic svg{width:19px;height:19px}
.w2x-m-item b{display:block;font-size:15.5px;color:var(--navy);margin-bottom:5px}
.w2x-m-item p{font-size:14px;color:var(--muted);margin:0}
.w2x-m-chips{display:flex;flex-wrap:wrap;gap:9px}
.w2x-m-chips .chip{background:rgba(11,28,46,.05);border-color:var(--line);color:var(--navy);font-size:13px;padding:7px 13px;backdrop-filter:none}
.w2x-m-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.w2x-modal .pts li{font-size:15px}
body.w2x-modal-open{overflow:hidden}
@media (max-width:720px){
  .w2x-modal{padding:0}
  .w2x-modal-panel{width:100%;height:100%;max-height:100vh;border-radius:0}
  .w2x-modal-body{padding:26px 20px 34px}
  .w2x-m-grid{grid-template-columns:1fr}
}

/* ---------- 带底图的商务照片卡片（partners 页「Why partner with us」） ---------- */
.photo-cards .card{position:relative;overflow:hidden;background-color:#0b1c2e;background-size:cover;background-position:center;border-color:rgba(255,255,255,.16);min-height:252px;color:#fff;box-shadow:0 6px 22px rgba(10,30,50,.16)}
.photo-cards .card .card-veil{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,17,30,.34) 0%,rgba(6,17,30,.26) 32%,rgba(6,17,30,.68) 70%,rgba(6,17,30,.84) 100%)}
.photo-cards .card > *{position:relative;z-index:1}
.photo-cards .card h3{color:#fff;font-size:19px;line-height:1.3}
.photo-cards .card p{color:#c9d7e5;font-size:14.5px;line-height:1.6}
.photo-cards .card::after{display:none}              /* 去掉右上角大序号，保持照片干净 */
.photo-cards .ic{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(3px)}
.photo-cards .card:hover{border-color:rgba(245,158,11,.65);box-shadow:0 22px 48px rgba(6,20,36,.34)}

/* ---------- split 区块下的图组（安装位置示意图等）：等宽平分 ---------- */
.split-gallery{display:grid;gap:16px;margin-top:46px}
.split-gallery.cols-2{grid-template-columns:repeat(2,1fr)}
.split-gallery.cols-3{grid-template-columns:repeat(3,1fr)}
.split-gallery.cols-4{grid-template-columns:repeat(4,1fr)}
.split-gallery.cols-5,.split-gallery.cols-6{grid-template-columns:repeat(3,1fr)}
.split-gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;place-items:center;box-shadow:0 2px 10px rgba(10,30,50,.04)}
.split-gallery img{width:100%;height:210px;object-fit:contain;border-radius:8px;display:block}
.split-gallery figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center;line-height:1.45}
@media (max-width:960px){
  .split-gallery.cols-3,.split-gallery.cols-4,.split-gallery.cols-5,.split-gallery.cols-6{grid-template-columns:repeat(2,1fr)}
  .split-gallery img{height:180px}
}
@media (max-width:560px){
  /* 注意：必须带上 .cols-* 提高优先级，否则被上面的 .split-gallery.cols-N 覆盖 */
  .split-gallery,.split-gallery.cols-2,.split-gallery.cols-3,.split-gallery.cols-4,.split-gallery.cols-5,.split-gallery.cols-6{grid-template-columns:1fr;gap:12px;margin-top:30px}
  .split-gallery img{height:200px}
}

/* ---------- hero：底图更可见 + 文字入场动画（参考 cki-group.jp 的观感） ----------
   原来底图 opacity .38 + 深蒙板(.94/.74/.42) 叠加 → 底图几乎看不见（实测右半区亮度仅 43/255） */
.hero .bg{opacity:.72;animation:heroZoom 26s ease-in-out infinite alternate;transform-origin:center}
.hero .veil{background:linear-gradient(100deg,rgba(7,18,30,.68) 0%,rgba(7,18,30,.42) 48%,rgba(9,21,34,.12) 100%)}
/* 蒙板变浅后给文字加轻微阴影，保证白字在亮底图上依然清晰 */
.hero h1,.hero .sub{text-shadow:0 2px 14px rgba(5,14,26,.5),0 1px 3px rgba(5,14,26,.35)}
.hero .eyebrow,.hero .badges .chip{text-shadow:0 1px 8px rgba(5,14,26,.45)}
/* 文字逐行淡入上移（日本企业站常见节奏） */
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-in > *{animation:heroUp .9s cubic-bezier(.22,.61,.36,1) both}
.hero-in > *:nth-child(1){animation-delay:.05s}
.hero-in > *:nth-child(2){animation-delay:.16s}
.hero-in > *:nth-child(3){animation-delay:.28s}
.hero-in > *:nth-child(4){animation-delay:.4s}
.hero-in > *:nth-child(5){animation-delay:.52s}
@media (prefers-reduced-motion:reduce){
  .hero .bg{animation:none}
  .hero-in > *{animation:none}
}

/* ---------- hero 镂空跑马灯 v2（参考 cki-group.jp）----------
   字体：Zen Dots（自托管 woff2，参考站 --font-en-display 即此字体）
   镂空：透明填充 + 白色描边（参考站为 SVG fill:transparent + stroke:#fff）
   中部镂空 / 两侧实白：两层同内容文字，用互补的横向 mask 叠加，边界与 .container 内容边距对齐
   速度：由 main.js 按 px/s 统一设定（与文字长度、重复次数无关） */
@font-face{font-family:'Zen Dots';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/zen-dots-regular.ttf') format('truetype')}

.hero{--edge:max(22px, (100vw - 1160px) / 2)}
.hero.has-marquee .hero-in{padding-top:64px;padding-bottom:clamp(104px,calc(11vw + 20px),190px)}

.hero-marquee{position:absolute;left:0;right:0;bottom:0;z-index:1;height:var(--band-h);overflow:hidden;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,17,30,.9) 0,rgba(6,17,30,.9) var(--edge),rgba(6,17,30,.26) var(--edge),rgba(6,17,30,.26) calc(100% - var(--edge)),rgba(6,17,30,.9) calc(100% - var(--edge)),rgba(6,17,30,.9) 100%),
    linear-gradient(180deg,rgba(6,17,30,0) 0%,rgba(6,17,30,.34) 46%,rgba(6,17,30,.5) 100%)}
.hero-marquee-layer{position:absolute;inset:0;display:flex;align-items:center}
.layer-hollow,.layer-solid{-webkit-mask-image:linear-gradient(90deg,var(--m0) 0,var(--m0) var(--edge),var(--m1) var(--edge),var(--m1) calc(100% - var(--edge)),var(--m0) calc(100% - var(--edge)),var(--m0) 100%);
  mask-image:linear-gradient(90deg,var(--m0) 0,var(--m0) var(--edge),var(--m1) var(--edge),var(--m1) calc(100% - var(--edge)),var(--m0) calc(100% - var(--edge)),var(--m0) 100%)}
.layer-hollow{--m0:transparent;--m1:#000}    /* 两侧隐去 */
.layer-solid{--m0:#000;--m1:transparent}     /* 仅两侧可见 */

.hero-marquee-track{display:flex;flex:none;white-space:nowrap;animation:heroMarquee 34s linear infinite;will-change:transform}
/* 字体与横幅红色小标签（.eyebrow）完全一致：站点字体栈 + 700 字重 + .16em 字距 + 全大写 */
/* 字号：英文为原尺寸的 2/3；中文为 1/2（中文方块字视觉重量更大）——这是中英页面唯一不同的样式 */
.hero-marquee-track span{font-family:'Zen Dots','Inter',var(--font);font-weight:400;font-size:clamp(33.6px,6.6vw,96px);line-height:1;letter-spacing:.16em;text-transform:uppercase;padding-right:clamp(40px,6vw,96px)}
/* 跑马灯文字中英站统一使用英文（中文站也用英文原文），故不再为中文单独缩小字号 */
.layer-hollow .hero-marquee-track span{color:transparent;-webkit-text-stroke:0.75px rgba(255,255,255,.62)}
.layer-solid .hero-marquee-track span{color:#fff;-webkit-text-stroke:1.5px #fff}
@keyframes heroMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.hero-marquee-track{animation:none}}

/* ---------- 横幅高度统一（基准＝第三页 Technology，整体再压低约 1/4）----------
   跑马灯字号与带高同步降到 75%（字号 clamp(42px,8.25vw,120px)），内边距收到最小。
   高度按各宽度实测的"内容下限"设定：内容更高时 min-height:min-content 会自然撑开（不裁切）。 */
:root{--hero-h:581px;--band-h:clamp(66px,8.25vw,126px)}
.hero{height:var(--hero-h);min-height:min-content;display:flex;flex-direction:column;justify-content:center}
.hero.has-marquee .hero-in{padding-top:30px;padding-bottom:calc(var(--band-h) + 22px)}
@media (max-width:1400px){:root{--hero-h:576px}}
@media (max-width:1300px){:root{--hero-h:560px}}
@media (max-width:1200px){:root{--hero-h:540px}}
@media (max-width:1100px){:root{--hero-h:512px}}
@media (max-width:1000px){:root{--hero-h:440px}}
@media (max-width:980px){:root{--hero-h:522px}}
@media (max-width:560px){:root{--hero-h:auto}}

/* ---------- 无图 split 的「加宽 + 两端对齐」变体（.container.justify） ---------- */
/* 两端对齐＝加宽到整栏（解除 .lead 的 760px 上限）+ 两端对齐；与无图变体 .container.justify 含义一致 */
.lead.justify{max-width:none;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.container.justify .lead{max-width:none;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.container.justify ul.pts li{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}

/* ---------- 上升斜线时间轴（公司历程） ---------- */
.tl{position:relative;overflow-x:auto;overflow-y:hidden;padding:6px 0 10px;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--accent) var(--line)}
.tl::-webkit-scrollbar{height:6px}
.tl::-webkit-scrollbar-track{background:var(--line);border-radius:99px}
.tl::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px}
.tl:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
.tl-track{position:relative;width:max-content;padding-bottom:6px}
.tl-spine{position:absolute;left:0;top:0;pointer-events:none}
.tl-spine polyline{fill:none;stroke:var(--line);stroke-width:2}
.tl-row{position:relative;display:flex;align-items:flex-start}
.tl-item{flex:0 0 var(--col,250px);width:var(--col,250px);padding:0 20px 0 22px;margin-top:calc((var(--n) - 1 - var(--i)) * var(--rise,26px));scroll-snap-align:start}
.tl-dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(249,115,22,.15);margin-bottom:12px}
.tl-year{font-size:19px;color:var(--navy);margin:0 0 6px;letter-spacing:.01em}
.tl-item p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
.tl-item:last-child .tl-dot{background:var(--accent-dark);box-shadow:0 0 0 4px rgba(234,88,12,.18)}
/* 左右翻页按钮（横向内容比容器宽时才有意义，仍全程保留以保证可发现性） */
.tl-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.tl-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--navy);cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.tl-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tl-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.tl-btn:disabled{opacity:.32;cursor:default}

/* hero 底图原生像素显示（小图不被放大，更清晰） */
.hero .bg.fit-native{background-size:auto;background-position:right center;background-repeat:no-repeat}
/* 原尺寸贴右的底图会与右侧正文交叠：右半边再加一层柔和压暗，
   既保证白字对比度，又让图的左缘融进深色背景。 */
.hero.hero-side-img .veil{background-image:
  linear-gradient(90deg,rgba(7,18,30,0) 28%,rgba(7,18,30,.38) 46%,rgba(7,18,30,.30) 64%,rgba(7,18,30,.26) 100%),
  linear-gradient(100deg,rgba(7,18,30,.68) 0%,rgba(7,18,30,.42) 48%,rgba(9,21,34,.12) 100%)}
/* 底图右半侧有高亮主体（人手/浅色设备）时：右半侧再压暗一档，保证小字号白字仍达 4.5:1。
   与上面同源，只是数值略轻（保留主体可见度）。 */
.hero.hero-scrim .veil{background-image:
  linear-gradient(90deg,rgba(7,18,30,0) 32%,rgba(7,18,30,.20) 60%,rgba(7,18,30,.24) 100%),
  linear-gradient(100deg,rgba(7,18,30,.68) 0%,rgba(7,18,30,.42) 48%,rgba(9,21,34,.12) 100%)}

/* ---------- 现场照片走马灯（电影胶片式横向循环） ---------- */
.filmstrip{padding:2px 0 52px;background:#fff;overflow:hidden}
.filmstrip .film-head{margin-bottom:20px}
.filmstrip .film-head h3{font-size:19px;color:var(--navy);margin:8px 0 0}
.filmstrip .film-head p{color:var(--muted);font-size:14px;margin:8px 0 0;max-width:760px}
.film{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%)}
.film-track{display:flex;width:max-content;animation:filmScroll 60s linear infinite;will-change:transform}
.film-item{flex:none;margin:0 14px 0 0;border-radius:14px;overflow:hidden;background:#0b1c2e;
  box-shadow:0 8px 22px rgba(10,30,50,.18);border:1px solid rgba(10,30,50,.06)}
.film-item img{display:block;height:clamp(132px,14vw,200px);width:auto;object-fit:cover}
.film:hover .film-track,.film:focus-within .film-track{animation-play-state:paused}  /* 鼠标停上去暂停，方便看清 */
@keyframes filmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .film-track{animation:none} }
@media (max-width:768px){ .film-item{margin-right:10px} .filmstrip{padding-bottom:38px} }

/* ---------- 首页统计条：在白色衬底里上下居中，且把下方深色区块的边推到首屏之外 ---------- */
.section.tight.statsec{padding:56px 0 60px}

/* 走马灯·竖版（9:16）：紧接横版那一条，做第二排；同样是横向循环 */
.filmstrip.film-portrait{padding-top:0;margin-top:-22px}
.filmstrip.film-portrait .film-item img{height:clamp(150px,21vw,300px);width:auto;aspect-ratio:9/16;object-fit:cover}
@media (max-width:768px){ .filmstrip.film-portrait{margin-top:-14px} }

/* 无图 split 的「整栏铺满」变体：正文段也跟随容器宽度（默认 .lead 限宽 760px） */
.container.wide .lead{max-width:none}
.container.wide ul.pts li{max-width:none}

/* 窄屏：品牌副标题收小一点，保证在 80px 菜单条里不撑破 */
@media (max-width:600px){ .brand small{font-size:9.5px;letter-spacing:.12em} }

/* split 图片可选按比例缩小：宽度取 imageScale%，高度等比、垂直居中，不再被整行拉伸 */
.split .imgbox.scaled{align-self:center;height:auto;margin-inline:auto}   /* 水平也居中（整图右移一点） */
.split .imgbox.scaled img{height:auto;min-height:0;object-fit:contain}

/* 锚点跳转补偿：站头 .site-header 是 sticky 且高 80px，原先带 id 的区块跳过去后
   顶部（kicker / 标题）会被站头盖住。给所有带 id 的 section 留出站头高度。
   影响面：/products/#gx6、#system、#obw、#manual、#docs、/technology/#core-technology 等全部锚点。 */
section[id]{scroll-margin-top:96px}