/**
 * tokens.css — 欧美风格化改造 P0 + P1：排版令牌层 + 视觉收敛
 *
 * 定位：不改 HTML 结构、不改数据库内容。
 *       加载在 header.php 最末尾 → 文档顺序上晚于 public / header / index / industry /
 *       multiPlatform / responsive 等全部样式表，同优先级下直接覆盖，无需 !important。
 *
 * ⚠️ 全部规则包在 @media (min-width:1241px) 里：
 *       responsive.css 的最高断点是 1240px，这样移动端已调好的字号/行高一个字都不会被顶掉。
 *       移动端的排版跟随改造见 P2。
 *
 * P0：字号 / 行高 / 字重 / 字距 / 行宽 / 对比度
 * P1：栅格统一 / 首页 hero 左对齐 / 按钮 / 圆角阴影 / 强调色收敛
 */

@media screen and (min-width: 1241px) {

/* ============================================================
   1. 令牌定义（供后续页面直接引用）
   ============================================================ */
:root{
    /* 字阶 8 级
       ⚠️ H1 = 56 是配合 Instrument Serif 的：它字面比 Lusitana 窄约 20%，
       56px 的实际宽度才等于 Lusitana 44px，所以放大一档不会改变排版。 */
    --tk-fs-label: 12px;
    --tk-fs-small: 14px;
    --tk-fs-body: 16px;
    --tk-fs-lead: 18px;
    --tk-fs-h3: 24px;
    --tk-fs-h2: 32px;
    --tk-fs-h1: 56px;
    --tk-fs-display: 64px;

    /* 行高配对 */
    --tk-lh-display: 1.05;
    --tk-lh-h1: 1.08;
    --tk-lh-h2: 1.15;
    --tk-lh-h3: 1.3;
    --tk-lh-lead: 1.55;
    --tk-lh-body: 1.65;
    --tk-lh-small: 1.5;

    /* 字距 */
    --tk-ls-display: -0.012em;
    --tk-ls-h2: -0.01em;
    --tk-ls-label: 0.08em;

    /* 文本色（含对比度，白底 WCAG AA） */
    --tk-ink: #14181D;      /* 标题      16.9:1 */
    --tk-body: #3F4A57;     /* 正文       8.9:1 */
    --tk-muted: #5A6572;    /* 次要文字   5.9:1 */
    --tk-faint: #6E7885;    /* 元信息     4.5:1 */
    --tk-on-accent: #111418;/* 黄底上的字 13.5:1 */

    /* 行宽 */
    --tk-measure: 62ch;
}

/* ============================================================
   2. 基础
   ============================================================ */
body{
    color: var(--tk-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* 兜底：public.css 的 body{line-height:1} 会让没写行高的段落贴在一起 */
p{
    line-height: var(--tk-lh-body);
}

/* ============================================================
   3. 一级标题（页面标题 / hero 标题）
   ============================================================ */
.coverBox > .cover-title{
    font-size: var(--tk-fs-h1);
    line-height: var(--tk-lh-h1);
    letter-spacing: var(--tk-ls-display);
    text-wrap: balance;
}
.ind-hero-title{
    font-size: var(--tk-fs-h1);
    line-height: var(--tk-lh-h1);
    letter-spacing: var(--tk-ls-display);
    font-weight: 400;
    text-wrap: balance;
}
.ind-pagehead-title{
    font-size: var(--tk-fs-h1);
    line-height: var(--tk-lh-h1);
    letter-spacing: var(--tk-ls-display);
    text-wrap: balance;
}
.product-center .pc-title{
    font-size: var(--tk-fs-h1);
    line-height: var(--tk-lh-h1);
    letter-spacing: var(--tk-ls-display);
}

/* ============================================================
   4. 二级标题（区块标题）
   ============================================================ */
.sec-title,
.ind-sec-title,
.ts-title,
.sc-title,
.ind-ab-h2{
    font-size: var(--tk-fs-h2);
    line-height: var(--tk-lh-h2);
    letter-spacing: var(--tk-ls-h2);
    font-weight: 500;
    color: var(--tk-ink);
    text-wrap: balance;
}

/* ============================================================
   5. 三级标题（面板 / 卡片组标题）
   ============================================================ */
.ind-sw-name,
.ind-feature-title,
.ind-tsteps-title{
    font-size: var(--tk-fs-h3);
    line-height: var(--tk-lh-h3);
    letter-spacing: -0.005em;
    font-weight: 500;
    color: var(--tk-ink);
    text-wrap: balance;
}

/* ============================================================
   6. 卡片标题（20px）
   ============================================================ */
.tech-name,
.case-name,
.pc-card-name,
.ts-item-title{
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
}
.ind-card-title{
    font-size: 20px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--tk-ink);
}
.pc-card-nf-title{
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
}
.ind-hero-card-name{
    font-size: var(--tk-fs-small);
    line-height: 1.4;
    font-weight: 500;
}

/* ============================================================
   7. 数字（等宽数位，单位降级）
   ============================================================ */
.stat-val{
    font-size: 56px;
    line-height: 1.05;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.stat-unit{
    font-size: 28px;
    line-height: 1.05;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}
.stat-label{
    font-size: var(--tk-fs-label);
    line-height: 1.4;
    letter-spacing: var(--tk-ls-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
/* ⚠️ 这里**不能**写 color：.ind-quick-card 是深色底 + 可配背景图，
   数值/标签的颜色由后台「数值颜色 / 标签颜色」两个颜色选择器输出为行内样式，
   CSS 只提供兜底（industry.css 的 #fff / rgba(255,255,255,.6)）。
   2026-10-19 曾在这里写成 var(--tk-ink)，把 CNC / 注塑页（背景图亮度 30/38）的
   数字压成近黑色，直接看不见 —— 已移除，只保留字号/字重/行高。 */
.ind-quick-num{
    font-size: 44px;
    line-height: 1.1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ind-tsteps-no{
    font-size: 56px;
    line-height: 1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   8. 导语（hero 副标题 / 区块副标题）
   ============================================================ */
.coverBox > .cover-sub{
    font-size: 20px;
    line-height: 1.5;
}
/* hero 副标题：H1 提到 56 之后，18px 的 lead 显得太弱，单独提到 20（区块副标题仍是 18） */
.ind-hero-sub{
    font-size: 20px;
    line-height: 1.55;
}
.ind-pagehead-sub,
.ind-sec-sub,
.sec-sub,
.pc-subtitle,
.ts-subtitle,
.sc-subtitle{
    font-size: var(--tk-fs-lead);
    line-height: var(--tk-lh-lead);
    color: var(--tk-muted);
    max-width: var(--tk-measure);
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
}

/* ============================================================
   9. 正文
   ============================================================ */
.ind-card-body,
.ind-feature-desc,
.ind-ab-body,
.ind-tsteps-desc,
.ind-tsteps-desc p,
.sc-point{
    font-size: var(--tk-fs-body);
    line-height: var(--tk-lh-body);
    color: var(--tk-body);
    text-wrap: pretty;
}
.ind-ab-body p{
    line-height: var(--tk-lh-body);
}

/* ============================================================
   10. 小字 / 元信息（14px）
   ============================================================ */
.tech-desc{
    font-size: var(--tk-fs-small);
    line-height: var(--tk-lh-small);
    color: rgba(255, 255, 255, 0.82);
}
.case-tag{
    font-size: var(--tk-fs-label);
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tk-faint);
}
/* 同上：颜色归后台管（「标签颜色」），这里不设 color */
.ind-quick-label{
    font-size: var(--tk-fs-small);
    line-height: 1.45;
}
.ind-ab-h2-sub{
    font-size: var(--tk-fs-small);
    line-height: 1.6;
    color: var(--tk-muted);
}
.pc-card-sub,
.pc-card-nf-sub{
    font-size: var(--tk-fs-small);
    line-height: 1.5;
}
.pc-card-nf-desc{
    font-size: 13px;
    line-height: 1.55;
}
.ts-item-desc{
    font-size: var(--tk-fs-small);
    line-height: 1.6;
    color: var(--tk-muted);
}
.ind-sw-sub{
    font-size: var(--tk-fs-small);
    line-height: 1.4;
    color: var(--tk-faint);
}

/* ============================================================
   11. 导航（去掉伪粗体，改用真 500 字重）
       Libre Franklin 本身有 500，不需要新增字体文件。
       所有项统一 500 → 悬停时字宽不变，不会抖动。
   ============================================================ */
.rightNav > li > a{
    font-size: var(--tk-fs-body);
    font-weight: 500;
}
.rightNav > li > a.border-bottom,
.rightNav > li > a:hover{
    -webkit-text-stroke: 0;
    text-shadow: none;
}
.erNav > .eveone a{
    font-size: 15px;
    font-weight: 500;
    color: var(--tk-muted);
}
.erNav > .eveone a.on{
    -webkit-text-stroke: 0;
    text-shadow: none;
    color: var(--tk-ink);
}

/* 桌面导航的余量：9 项在 16px + 30px 间距下实测 1035px。
   ≤1440 时容器只有 1200（见 --tk-container），logo 与导航之间只剩 41px ——
   换个系统字体宽一点就会换行。所以 ≤1440 收紧到 15px / 24px，余量回到 139px。
   断点与 --tk-container 对齐，不额外制造一个断点。 */
@media (max-width: 1440px){
    .rightNav > li{
        margin-left: 24px;
    }
    .rightNav > li > a{
        font-size: 15px;
    }
}

/* ============================================================
   12. 按钮（只改字，不改底色）
       public.css 的 a:link{color:#666} 优先级 0,1,1 → 这里用 a.xxx 同为 0,1,1，
       靠文档顺序（tokens.css 最后）胜出。
   ============================================================ */
a.ind-hero-btn,
a.ind-quick-btn,
a.ind-guide-btn,
.coverBox > .cover-btn a,
.moreBox a,
.ind-ab-submit{
    color: var(--tk-on-accent);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ============================================================
   13. 选项卡（26px 的 tab 标签是尺度的重灾区）
   ============================================================ */
.ind-ab-tab{
    font-size: var(--tk-fs-lead);
    line-height: 1.3;
    font-weight: 500;
    color: var(--tk-muted);
}
.ind-ab-tab.ind-ab-tab-on{
    color: var(--tk-on-accent);
}
.ind-sw-name{
    color: var(--tk-muted);
}
.ind-sw-tab-on .ind-sw-name{
    color: var(--tk-on-accent);
}
.ind-sw-tab-on .ind-sw-sub{
    color: rgba(17, 20, 24, 0.72);
}

/* ============================================================
   14. 页脚
   ============================================================ */
footer p,
footer a,
footer li,
footer span{
    line-height: 1.6;
}

/* ============================================================
   15. 补漏：其余模板里的离群字号（17 / 22 / 26 / 34）
   ============================================================ */
/* hero 里的正文段（/141/ /21/ 直接压在图片上，14px 太小） */
.ind-hero-desc{
    font-size: var(--tk-fs-body);
    line-height: var(--tk-lh-body);
    color: rgba(255, 255, 255, 0.92);
    text-wrap: pretty;
}
/* 左对齐区块标题（卡片网格 / FAQ） */
.ind-sec-title-left{
    font-size: var(--tk-fs-h3);
    line-height: var(--tk-lh-h3);
    font-weight: 500;
    color: var(--tk-ink);
}
.ind-faq-title{
    font-size: var(--tk-fs-h2);
    line-height: var(--tk-lh-h2);
    letter-spacing: var(--tk-ls-h2);
    font-weight: 500;
    color: var(--tk-ink);
}
/* FAQ 问题行 */
.ind-faq-q,
.ind-acc-qtext{
    font-size: var(--tk-fs-lead);
    line-height: 1.5;
    font-weight: 500;
    color: var(--tk-ink);
}
/* 招聘职位名 */
.ind-ab-job-title{
    font-size: 20px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--tk-ink);
}
/* 流程序号（装饰数字，跟 tsteps 的 56 区分开） */
.ind-flow-no{
    font-size: 32px;
    line-height: 1.1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   P1-1 栅格统一：header / footer 与正文共用同一个容器宽度
   之前 header 内容左边缘 24px、正文 120px，差 96px，logo 与标题不在一条竖线上。
   ============================================================ */
:root{
    --tk-container: 1400px;
}
@media (max-width: 1440px){
    :root{
        --tk-container: 1200px;
    }
}
.main{
    max-width: var(--tk-container);
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   P1-2 首页 hero 左对齐（内页 hero 本来就是左对齐，首页是唯一的居中）
   ============================================================ */
.coverBox{
    text-align: left;
    padding-left: max(24px, calc((100% - var(--tk-container)) / 2));
    padding-right: max(24px, calc((100% - var(--tk-container)) / 2));
}
.coverBox > .cover-btn{
    margin-left: 0;
}

/* ============================================================
   P1-3 hero 文字可读性
   .ind-hero 按用户要求不加遮罩层 → 只给文字加极轻的投影，
   让 16px 正文压在照片上也能读（不是蒙版，不动背景）。
   ============================================================ */
.coverBox > .cover-title,
.coverBox > .cover-sub,
.ind-hero-title,
.ind-hero-desc,
.ind-hero-sub{
    text-shadow: 0 1px 2px rgba(8, 12, 18, 0.35);
}

/* ============================================================
   P1-4 按钮：统一 48px 高 / 直角 / 15px 600 / 工业风 CTA
   之前是 40/44/52 三种高度、400 字重、4-6px 圆角，偏国内 App 感。
   欧美工业 B2B 站（Autodesk / Siemens / PTC）普遍用直角按钮 + 阴影。
   ============================================================ */
.ind-hero-btn,
.ind-guide-btn,
.ind-quick-btn,
.moreBox,
.ind-ab-submit{
    height: 48px;
    line-height: 48px;
    border-radius: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ind-hero-btn,
.ind-guide-btn{
    min-width: 160px;
    width: auto;
    padding: 0 28px;
}
.ind-quick-btn{
    min-width: 240px;
    width: auto;
    padding: 0 28px;
}
.moreBox{
    min-width: 160px;
    width: auto;
    padding: 0 28px;
}
.ind-ab-submit{
    min-width: 144px;
    width: auto;
    padding: 0 28px;
}
a.ind-hero-btn,
a.ind-quick-btn,
a.ind-guide-btn,
.moreBox a,
.ind-ab-submit{
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* 主要 CTA 加右箭头 */
a.ind-hero-btn,
a.ind-guide-btn,
a.ind-quick-btn{
    position: relative;
}
a.ind-hero-btn::after,
a.ind-guide-btn::after,
a.ind-quick-btn::after{
    content: "\2192";
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.2s ease;
}
a.ind-hero-btn:hover::after,
a.ind-guide-btn:hover::after,
a.ind-quick-btn:hover::after{
    transform: translateX(4px);
}
.ind-hero-btn:hover,
.ind-guide-btn:hover,
.ind-quick-btn:hover,
.moreBox:hover,
.ind-ab-submit:hover{
    background: #FFD633;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   P1-5 圆角 / 阴影收敛
   原来 3/4/5/6/8/10/12/16px 八种圆角、四种阴影。
   ============================================================ */
.techGrid > li,
.caseGrid > li,
.ind-card,
.ind-sw-tab,
.ind-ab-tab,
.erNav{
    border-radius: 8px;
}
.paging a,
.paging span,
.paging_2 li a{
    border-radius: 4px;
}
.techGrid > li,
.caseGrid > li,
.ind-card,
.ind-sw-tab,
.ind-ab-tab{
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px rgba(16, 24, 40, 0.06);
}

/* ============================================================
   P1-6 强调色收敛
   /23/ 的 5 步用了 5 个不同色相（蓝→紫→品红→红），整页像另一个品牌。
   统一成墨色，用「亮→暗」表达进度，而不是用色相。
   ============================================================ */
.ind-tsteps-item:nth-child(1),
.ind-tsteps-item:nth-child(2),
.ind-tsteps-item:nth-child(3),
.ind-tsteps-item:nth-child(4),
.ind-tsteps-item:nth-child(5){
    --ts-accent: var(--tk-ink);
}
.position a:hover,
.position a:last-child{
    color: var(--tk-ink);
}

/* ============================================================
   P1-8 ISV / 工业软件页 tag 下划线 tab bar
   欧美 B2B SaaS 最常见：一行横向 tab，当前项底部黄色指示线，
   只保留缩写，全称通过 aria / title 保留可访问性。
   ============================================================ */
.ind-sw .ind-sw-tabs,
.ind-isv-it .ind-sw-tabs{
    display: flex;
    justify-content: center;
    gap: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #E5E7EB;
}
.ind-sw .ind-sw-tab,
.ind-isv-it .ind-sw-tab{
    flex: 0 1 auto;
    padding: 20px 28px 18px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    position: relative;
    transition: color 0.2s ease;
}
.ind-sw .ind-sw-tab::after,
.ind-isv-it .ind-sw-tab::after{
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    background: #FEC901;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.ind-sw .ind-sw-tab:hover::after,
.ind-sw .ind-sw-tab.ind-sw-tab-on::after,
.ind-isv-it .ind-sw-tab:hover::after,
.ind-isv-it .ind-sw-tab.ind-sw-tab-on::after{
    transform: scaleX(1);
}
.ind-sw .ind-sw-name,
.ind-isv-it .ind-sw-name{
    font-size: 16px;
    font-weight: 600;
    color: var(--tk-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ind-sw .ind-sw-tab:hover .ind-sw-name,
.ind-sw .ind-sw-tab.ind-sw-tab-on .ind-sw-name,
.ind-isv-it .ind-sw-tab:hover .ind-sw-name,
.ind-isv-it .ind-sw-tab.ind-sw-tab-on .ind-sw-name{
    color: var(--tk-ink);
}
.ind-sw .ind-sw-sub,
.ind-isv-it .ind-sw-sub{
    display: none;
}
/* 下划线 tab bar 高度比大卡片小很多，面板上边距同步收紧 */
.ind-sw .ind-sw-panel-on,
.ind-isv-it .ind-sw-panel-on{
    margin-top: 48px;
}

/* ============================================================
   P1-9 关于我们页 tab 下划线 tab bar
   与 ISV / 工业软件页统一为「下划线指示条」，但保留首字母大写
   （标签较长：Company Profile / Manufacturing Center 等，全大写会折行）
   ============================================================ */
.ind-ab-tabs{
    display: flex;
    justify-content: center;
    gap: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #E5E7EB;
}
.ind-ab-tab{
    flex: 0 1 auto;
    padding: 18px 24px 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: var(--tk-body);
    line-height: 1.3;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}
.ind-ab-tab::after{
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: #FEC901;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.ind-ab-tab:hover::after,
.ind-ab-tab.ind-ab-tab-on::after{
    transform: scaleX(1);
}
.ind-ab-tab:hover,
.ind-ab-tab.ind-ab-tab-on{
    color: var(--tk-ink);
    background: transparent;
    border: 0;
}
.ind-ab-panel-on{
    margin-top: 48px;
}

/* ============================================================
   P2-1 合作 logo 墙
   原来每个 logo 都套一个白底 + 1px 描边的方框，是典型的国内站做法。
   欧美做法：去框、统一灰度、悬停才还原品牌色。
   ============================================================ */
.partnerGrid > li{
    border: 0;
    background: transparent;
    height: 84px;
    border-radius: 0;
}
.partnerGrid > li > img{
    max-width: 76%;
    max-height: 52%;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.25s ease, opacity 0.25s ease;
}
.partnerGrid > li:hover > img{
    filter: grayscale(0);
    opacity: 1;
}

}

/* ============================================================
   P1-7 首页 banner 主 CTA（2026-10-19）
   ------------------------------------------------------------
   之前是「160×48 纯色块」，而且 P1-2 把 .coverBox 改成左对齐之后，
   按钮里的文字跟着贴到了左边（原来靠父级 text-align:center 居中）——
   看起来像一段带底色的文字，不像按钮。
   这里：文字居中 + 宽度按内容自适应（后端换成更长的文案也不会挤）
        + 箭头与悬停位移 + 52px 高（与 44px 的 hero 标题拉开层级）。
   ⚠️ 用 min-width:769px 而不是 1241：769~1240 的 hero 也是左对齐的，
      按钮必须跟着一致；≤768 的紧凑版（132×40）在 responsive.css 的 768 块里，不要覆盖它。
   ============================================================ */
@media screen and (min-width: 769px){
    .coverBox > .cover-btn{
        display: inline-block;
        width: auto;
        min-width: 172px;
        height: 52px;
        line-height: 52px;
        padding: 0 30px;
        text-align: center;
        border-radius: 0;
        box-sizing: border-box;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
        transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .coverBox > .cover-btn a{
        display: block;
        width: 100%;
        height: 100%;
        color: var(--tk-on-accent);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-align: center;
    }
    .coverBox > .cover-btn a::after{
        content: "\2192";
        display: inline-block;
        margin-left: 10px;
        transition: transform 0.2s ease;
    }
    .coverBox > .cover-btn:hover{
        background: #FFD633;
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    }
    .coverBox > .cover-btn:hover a::after{
        transform: translateX(4px);
    }
}