/* ==========================================================================
   Protolabs-style CSS - ShowyMetal CNC Manufacturing Template
   对标 Protolabs 设计风格 | 企业级响应式布局
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root {
    --color-primary: #0f2f5c;
    --color-primary-dark: #0a2140;
    --color-primary-light: #1a4a85;
    --color-dark: #061426;
    --color-dark-700: #0a2140;
    --color-dark-600: #0c2a52;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #061426;
    --color-white: #ffffff;
    --color-accent: #c8102e;
    --color-accent-dark: #a00c25;
    --color-success: #0c2a52;
    --color-warning: #0c2a52;
    --color-error: #ef4444;
    --color-whatsapp: #25d366;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    --container-max: 1440px;
    --header-height: 72px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-gray-800);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-gray-900);
    line-height: var(--line-height-tight);
    font-weight: 700;
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

p {
    margin-bottom: 1rem;
    color: var(--color-gray-600);
}

/* ---------- Container ---------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.container-wide {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

/* ---------- Buttons ---------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background-color: transparent;
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-white);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

.btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background-color: transparent;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ---------- Section Common ---------- */
.section {
    padding: 80px 0;
}

.section-gray {
    background-color: var(--color-gray-50);
}

.section-dark {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--color-white);
}

.section-dark p {
    color: rgba(255,255,255,0.8);
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.section-header h2 {
    margin-bottom: 16px;
}

.section-header p {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
}

.section-label {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

/* ---------- Announcement Bar ---------- */
.announcement-bar {
    background-color: var(--color-dark);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    padding: 10px 0;
    position: relative;
    z-index: 1001;
}

.announcement-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.announcement-bar span {
    text-align: center;
    letter-spacing: 0.5px;
}

.close-announcement {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.close-announcement:hover {
    color: var(--color-white);
}

/* ---------- Header ---------- */
.main-header {
    background-color: var(--color-white);
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid var(--color-gray-200);
    transition: box-shadow var(--transition-normal);
}

.main-header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-md);
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    gap: 32px;
}

.header-logo {
    flex-shrink: 0;
}

.header-logo .logo-img {
    height: 40px;
    width: auto;
}

/* Main Nav */
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-list > li > a {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-list > li > a:hover,
.nav-list > li > a.active {
    color: var(--color-primary);
    background-color: rgba(15,47,92,0.06);
}

/* Dropdown Menu */
.nav-item.has-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 20px;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    border: 1px solid var(--color-gray-100);
}

.nav-item.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    color: var(--color-primary);
    background-color: rgba(15,47,92,0.06);
}

/* ---------- Mega Dropdown (wide nav + left media) ---------- */
.main-header .header-inner {
    position: relative;
}

.main-header .main-nav {
    align-self: stretch;
    align-items: stretch;
}

.main-header .nav-list {
    align-items: stretch;
}

.main-header .nav-list > li {
    display: flex;
    align-items: center;
}

.nav-item.has-dropdown {
    position: static;
}

.main-header .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    transform: translateY(14px);
    padding: 0;
    display: flex;
    overflow: hidden;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border: 1px solid var(--color-gray-100);
    border-top: none;
    box-shadow: var(--shadow-xl);
}

.nav-item.has-dropdown:hover .dropdown-menu {
    transform: translateY(0);
}

/* 左侧图片点缀 */
.mega-media {
    position: relative;
    flex: 0 0 300px;
    min-height: 240px;
    background-color: var(--color-gray-900);
    overflow: hidden;
}

.mega-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mega-media-img:not([src]),
.mega-media-img[src=""],
.mega-media-img[src="/"] {
    display: none;
}

.mega-media-sub:empty {
    display: none;
}

.mega-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.42) 55%, rgba(15, 23, 42, 0.18) 100%);
}

.mega-media-body {
    position: relative;
    z-index: 1;
    padding: 26px 24px;
    color: var(--color-white);
}

.mega-media-title {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 6px;
}

.mega-media-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--font-size-xs);
    font-weight: 400;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.82);
}

/* 右侧多列链接 */
.mega-links {
    flex: 1;
    padding: 26px 30px;
    background: var(--color-white);
    columns: 3 190px;
    column-gap: 30px;
}

.mega-links .dropdown-item {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    padding: 9px 12px;
    margin-bottom: 2px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.mega-links .dropdown-item:hover {
    color: var(--color-primary);
    background-color: rgba(15,47,92,0.06);
}

/* ---------- 核心优势条（全站统一，导航栏下方） ---------- */
.advantage-strip {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    /* 两侧留白：24px 与全站 .container 的内边距一致，首尾条目不再贴屏幕边缘 */
    padding: 18px 24px;
    position: relative;
    z-index: 900;
}

.advantage-grid {
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    /* 与 .container 同宽居中：超宽屏时两侧自动留出大留白，与页面其它版块左右对齐 */
    max-width: var(--container-max);
    margin: 0 auto;
}

/* 分组标签：正方形方框（公司实力 / 品质优势）
   ① 用同一个 --adv-badge 同时驱动宽高，是严格正方形；
   ② 边长按语种锁定：拉丁语系分组名更长（de Unternehmens-、da Virksomhedens、
      pt Vantagens de qualidade…），边长必须够放最长的那个词，否则会折行溢出；
       ——同一页两个方框取同一值，避免"一大一小"（auto 方案在 de 页会变成 120/88）；
   ③ 双线方框：外圈 1px 主色 + 内缩 4px 的第二道 1px 细线（::before），
      像证书/铭牌的双框，比单线更"方框"，且不增加 DOM；
   ④ 底色是很淡的竖向渐变，让方框有轻微的纸面质感。
   维护提醒：若日后改动某语种的分组名文字，改完量一下是否出框（可用内宽 = 边长 - 22px）。 */
.advantage-group {
    --adv-badge: 104px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: var(--adv-badge);
    height: var(--adv-badge);
    padding: 10px;
    border: 1px solid var(--color-primary);
    border-radius: 2px;
    background: linear-gradient(180deg, #fbfdff 0%, #eef4fa 100%);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* 内圈第二道细线：外框内缩 4px，中间留 3px 空隙 */
.advantage-group::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(15, 47, 92, 0.22);
    border-radius: 1px;
    pointer-events: none;
    transition: border-color var(--transition-fast);
}

/* 各语种方框边长：内宽 = 边长 - 22px（左右各 10px 内边距 + 描边），必须 ≥ 该语种最长一行的文字宽度。
   实测最长行宽（拉丁 13px / 中日韩 17px）：cn·kr 38、jp 75、en 78、fr 75、es 77、pt 84、de·da 103，
   统一留 4px 以上余量，避免字体回退时挤出折行。 */
html:lang(de) .advantage-group,
html:lang(da) .advantage-group { --adv-badge: 128px; }

html:lang(pt) .advantage-group { --adv-badge: 108px; }

.advantage-group:hover {
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 47, 92, 0.14);
}

.advantage-group:hover::before {
    border-color: rgba(26, 74, 133, 0.4);
}

.advantage-group-name {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-primary);
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-indent: 0.1em; /* 抵消末字右侧字距，保证视觉居中 */
    max-width: 100%;
}

/* 拉丁语系分组名更长（Unternehmens-/Solidez empresarial…），字号收一档，
   保证文字在锁定的方框内不折行；中日韩仍用 1.0625rem 的大字。 */
.advantage-group-name:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: 0.01em;
    text-indent: 0;
    overflow-wrap: break-word;
}

.advantage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: flex-start;
    text-align: center;
    gap: 9px;
}

.advantage-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-gray-200);
    background-color: var(--color-gray-100);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.advantage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.advantage-item:hover .advantage-img {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15,47,92,0.18);
}

.advantage-item:hover .advantage-img img {
    transform: scale(1.08);
}

.advantage-text {
    font-size: var(--font-size-xs);
    line-height: 1.35;
    font-weight: 500;
    color: var(--color-gray-700);
    max-width: 100%;
}

@media (max-width: 1024px) {
    .advantage-grid {
        grid-template-columns: auto repeat(4, minmax(0, 1fr));
        gap: 16px 10px;
    }
}

@media (max-width: 560px) {
    .advantage-strip {
        padding: 12px 16px;
    }

    .advantage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 8px;
    }

    /* 窄屏：标签独占一行横跨两列，还原成横向标签条（方形在手机上会占掉半屏） */
    .advantage-group {
        grid-column: span 2;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        max-width: none;
        align-self: stretch;
        padding: 9px 12px;
    }

    /* 横向标签条上不要第二道内框，否则像双线文本框 */
    .advantage-group::before {
        display: none;
    }

    .advantage-group-name,
    .advantage-group-name:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
        font-size: var(--font-size-base);
        letter-spacing: 0.08em;
        text-indent: 0.08em;
    }

    .advantage-img {
        width: 60px;
        height: 60px;
    }
}

/* Header Right */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.header-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-gray-600);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.header-search-btn:hover {
    color: var(--color-primary);
    background-color: rgba(15,47,92,0.06);
}

.header-cta {
    font-size: var(--font-size-xs);
    padding: 10px 20px;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-md);
}

.mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-gray-700);
    border-radius: 2px;
    transition: all var(--transition-normal);
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Search Overlay */
.search-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-lg);
    padding: 24px 0;
    display: none;
    z-index: 100;
}

.search-overlay.active {
    display: block;
}

.search-overlay .container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-input {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: border-color var(--transition-fast);
    outline: none;
}

.search-input:focus {
    border-color: var(--color-primary);
}

.search-submit {
    padding: 14px 28px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.search-submit:hover {
    background-color: var(--color-primary-dark);
}

.search-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 4px;
}

/* Mobile Nav */
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: var(--color-white);
    box-shadow: var(--shadow-2xl);
    padding: 80px 24px 32px;
    overflow-y: auto;
    z-index: 2000;
    transition: right var(--transition-normal);
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav-list > li {
    border-bottom: 1px solid var(--color-gray-100);
}

.mobile-nav-list > li > a {
    display: block;
    padding: 14px 0;
    font-weight: 500;
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
}

.mobile-nav-list > li > a:hover {
    color: var(--color-primary);
}

.mobile-nav-list > li > a.active,
.mobile-nav-list .mobile-submenu a.active {
    color: var(--color-primary);
    font-weight: 600;
}

/* Home / logo current-page indicator —— 已按要求移除（首页 logo 不高亮、无下划线）。
   logo 链接在 head.html 里仍会在首页拿到 class="active"，但这里不再画 ::after 下划线。 */

.mobile-submenu {
    padding-left: 16px;
}

.mobile-submenu li a {
    display: block;
    padding: 10px 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.mobile-submenu li a:hover {
    color: var(--color-primary);
}

.mobile-cta {
    display: block;
    width: 100%;
    margin-top: 24px;
    text-align: center;
}

/* ---------- Section 1: Hero ---------- */
.hero-section {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-dark) 0%, #0c2a52 50%, var(--color-primary-dark) 100%);
    overflow: hidden;
    padding: 100px 0 80px;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    pointer-events: none;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(15,47,92,0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-full);
    padding: 8px 20px;
    color: rgba(255,255,255,0.9);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.hero-content h1 {
    font-size: var(--font-size-6xl);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.hero-content p {
    font-size: var(--font-size-xl);
    color: rgba(255,255,255,0.75);
    max-width: 600px;
    margin-bottom: 32px;
    line-height: var(--line-height-relaxed);
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-certifications {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.hero-cert-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.7);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.hero-cert-badge svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---------- Section 2: Manufacturing Services ---------- */
.services-section {
    padding: 100px 0;
}

.services-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 48px;
    flex-wrap: wrap;
    justify-content: center;
}

.service-tab {
    padding: 14px 32px;
    background-color: var(--color-gray-100);
    color: var(--color-gray-600);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-full);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-tab:hover,
.service-tab.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.service-panel {
    display: none;
    animation: fadeInUp 0.5s ease;
}

.service-panel.active {
    display: block;
}

.service-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.service-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4/3;
    background: var(--color-gray-100);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-info h3 {
    font-size: var(--font-size-3xl);
    margin-bottom: 16px;
}

.service-info > p {
    color: var(--color-gray-500);
    font-size: var(--font-size-lg);
    margin-bottom: 24px;
}

.service-features {
    margin-bottom: 32px;
}

.service-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    color: var(--color-gray-700);
    font-size: var(--font-size-base);
}

.service-features li::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: rgba(15,47,92,0.1);
    border-radius: var(--radius-full);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    transition: gap var(--transition-fast);
}

.service-link:hover {
    gap: 12px;
}

/* ---------- Section 3: Stats ---------- */
.stats-section {
    padding: 60px 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.stat-item {
    color: var(--color-white);
}

.stat-number {
    font-size: var(--font-size-5xl);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: var(--font-size-base);
    opacity: 0.85;
    font-weight: 500;
}

/* ---------- Section 4: Why Choose Us ---------- */
.advantages-section {
    padding: 100px 0;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.advantage-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-normal);
    text-align: center;
}

.advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-gray-200);
}

.advantage-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(15,47,92,0.1) 0%, rgba(15,47,92,0.05) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.advantage-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
}

.advantage-card h3 {
    font-size: var(--font-size-xl);
    margin-bottom: 12px;
}

.advantage-card p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 0;
}

/* ---------- Section 5: How to Work With Us ---------- */
.process-section {
    padding: 100px 0;
    background-color: var(--color-gray-50);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    z-index: 0;
}

.process-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-number {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: var(--color-white);
    border: 3px solid var(--color-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-primary);
    transition: all var(--transition-normal);
}

.process-step:hover .step-number {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.step-icon {
    margin-bottom: 16px;
}

.step-icon svg {
    width: 40px;
    height: 40px;
    color: var(--color-primary);
    margin: 0 auto;
}

.process-step h3 {
    font-size: var(--font-size-lg);
    margin-bottom: 10px;
}

.process-step p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 0;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Section 6: Industry Solutions ---------- */
.industries-section {
    padding: 100px 0;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.industry-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-normal);
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.industry-card-image {
    aspect-ratio: 16/9;
    background: var(--color-gray-100);
    overflow: hidden;
}

.industry-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.industry-card:hover .industry-card-image img {
    transform: scale(1.05);
}

.industry-card-body {
    padding: 28px;
}

.industry-card-body h3 {
    font-size: var(--font-size-xl);
    margin-bottom: 10px;
}

.industry-card-body p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 16px;
}

.industry-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    transition: gap var(--transition-fast);
}

.industry-link:hover {
    gap: 10px;
}

/* ---------- Section 7: Design & Engineering Support ---------- */
.support-section {
    padding: 100px 0;
    background-color: var(--color-gray-50);
}

.support-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.support-info h2 {
    font-size: var(--font-size-4xl);
    margin-bottom: 20px;
}

.support-info p {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    margin-bottom: 16px;
}

.support-features {
    margin-bottom: 32px;
}

.support-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    color: var(--color-gray-700);
}

.support-features li::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: rgba(15,47,92,0.1);
    border-radius: var(--radius-full);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
}

.support-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.support-contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--color-gray-700);
    transition: color var(--transition-fast);
}

.support-contact a:hover {
    color: var(--color-primary);
}

.support-contact svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* 背景（灰底容器）与图片等比例：去掉固定 aspect-ratio，容器高度由图片自身
   宽高比决定，配合 img height:auto + object-fit:cover，永不裁切、不变形、不漏灰底 */
.support-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--color-gray-200);
    line-height: 0;
}

.support-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ---------- Section 8: Product Gallery ---------- */
.gallery-section {
    padding: 100px 0;
}

.gallery-swiper {
    padding: 0 0 60px;
    overflow: hidden;
}

.gallery-swiper .swiper-slide {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}

.gallery-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-swiper .swiper-slide:hover img {
    transform: scale(1.05);
}

.gallery-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: var(--color-gray-300);
    opacity: 1;
}

.gallery-swiper .swiper-pagination-bullet-active {
    background-color: var(--color-primary);
    width: 28px;
    border-radius: 5px;
}

.gallery-swiper .swiper-button-next,
.gallery-swiper .swiper-button-prev {
    color: var(--color-primary);
    background: var(--color-white);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
}

.gallery-swiper .swiper-button-next::after,
.gallery-swiper .swiper-button-prev::after {
    font-size: 18px;
    font-weight: 700;
}

/* ---------- Section 9: Resources ---------- */
.resources-section {
    padding: 100px 0;
    background-color: var(--color-gray-50);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.resource-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-normal);
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.resource-card-image {
    aspect-ratio: 16/9;
    background: var(--color-gray-100);
    overflow: hidden;
}

.resource-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resource-card-body {
    padding: 24px;
}

.resource-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resource-card-body h3 {
    font-size: var(--font-size-lg);
    margin-bottom: 10px;
    line-height: var(--line-height-tight);
}

.resource-card-body h3 a {
    transition: color var(--transition-fast);
}

.resource-card-body h3 a:hover {
    color: var(--color-primary);
}

.resource-card-body p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 0;
}

/* ---------- Section 10: Testimonials ---------- */
.testimonials-section {
    padding: 100px 0;
}

.testimonials-swiper {
    max-width: 900px;
    margin: 0 auto;
}

.testimonial-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 48px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-100);
}

.testimonial-quote {
    font-size: var(--font-size-xl);
    color: var(--color-gray-700);
    line-height: var(--line-height-relaxed);
    margin-bottom: 32px;
    font-style: italic;
    position: relative;
    padding: 0 24px;
}

.testimonial-quote::before {
    content: '\201C';
    position: absolute;
    left: 0;
    top: -8px;
    font-size: 48px;
    color: var(--color-primary);
    font-family: Georgia, serif;
    line-height: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    overflow: hidden;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-author-info h4 {
    font-size: var(--font-size-base);
    margin-bottom: 2px;
}

.testimonial-author-info p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 0;
}

.testimonials-swiper .swiper-pagination {
    margin-top: 32px;
    position: relative;
}

.testimonials-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: var(--color-gray-300);
    opacity: 1;
}

.testimonials-swiper .swiper-pagination-bullet-active {
    background-color: var(--color-primary);
    width: 28px;
    border-radius: 5px;
}

/* ---------- Section 11: Newsletter ---------- */
.newsletter-home-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-700) 100%);
}

.newsletter-home-inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-home-inner h2 {
    color: var(--color-white);
    margin-bottom: 12px;
}

.newsletter-home-inner p {
    color: rgba(255,255,255,0.7);
    margin-bottom: 32px;
}

.newsletter-home-form {
    display: flex;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
}

.newsletter-home-form input {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    outline: none;
    transition: border-color var(--transition-fast);
}

.newsletter-home-form input::placeholder {
    color: rgba(255,255,255,0.5);
}

.newsletter-home-form input:focus {
    border-color: var(--color-primary);
    background: rgba(255,255,255,0.15);
}

.newsletter-home-social {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.newsletter-home-social a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    transition: all var(--transition-fast);
}

.newsletter-home-social a:hover {
    background: var(--color-primary);
}

.newsletter-home-social a svg {
    width: 20px;
    height: 20px;
}

/* ---------- Footer ---------- */
.main-footer {
    background-color: var(--color-gray-900);
    color: rgba(255,255,255,0.8);
}

/* Newsletter Section in Footer */
.newsletter-section {
    background: var(--color-dark-700);
    padding: 48px 0;
}

.newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.newsletter-text h3 {
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    margin-bottom: 8px;
}

.newsletter-text p {
    color: rgba(255,255,255,0.6);
    margin-bottom: 0;
}

.newsletter-form {
    display: flex;
    gap: 12px;
    flex: 1;
    max-width: 480px;
    min-width: 280px;
}

.newsletter-input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.08);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    outline: none;
    transition: border-color var(--transition-fast);
}

.newsletter-input::placeholder {
    color: rgba(255,255,255,0.4);
}

.newsletter-input:focus {
    border-color: var(--color-primary);
}

.newsletter-btn {
    padding: 12px 24px;
    white-space: nowrap;
}

/* Footer Main */
.footer-main {
    padding: 60px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    margin-bottom: 48px;
}

.footer-col-title {
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255,255,255,0.6);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-primary-light);
}

.footer-contact li {
    margin-bottom: 12px;
}

.footer-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.6);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-contact a:hover {
    color: var(--color-primary-light);
}

.footer-contact svg {
    flex-shrink: 0;
}

/* Social */
.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 24px;
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-copyright {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.5);
}

.footer-copyright a {
    color: rgba(255,255,255,0.5);
    transition: color var(--transition-fast);
}

.footer-copyright a:hover {
    color: var(--color-primary-light);
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.5);
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
    color: var(--color-primary-light);
}

/* ---------- WhatsApp Float ---------- */
.whatsapp-float {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    background-color: var(--color-whatsapp);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(15,47,92,0.4);
    z-index: 999;
    transition: all var(--transition-normal);
    animation: pulse-float 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(15,47,92,0.5);
}

@keyframes pulse-float {
    0% { box-shadow: 0 4px 12px rgba(15,47,92,0.4); }
    50% { box-shadow: 0 4px 24px rgba(15,47,92,0.6); }
    100% { box-shadow: 0 4px 12px rgba(15,47,92,0.4); }
}

/* ---------- Animations ---------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* Intersection Observer animation trigger */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 兼容两套类名：42 个模板用 classList.add('visible')，另有 28 个模板和
   main.js 的滚动动画用 classList.add('revealed')。此前只定义了 .visible，
   导致这些页面的 .reveal 元素永远停在 opacity:0（整块内容不可见）。 */
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Responsive: Tablet (max-width: 1024px) ---------- */
@media (max-width: 1024px) {
    h1 { font-size: var(--font-size-4xl); }
    h2 { font-size: var(--font-size-3xl); }

    .hero-content h1 { font-size: var(--font-size-4xl); }

    .services-tabs {
        gap: 6px;
    }
    .service-tab {
        padding: 10px 20px;
        font-size: var(--font-size-xs);
    }

    .service-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .support-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px;
    }
}

/* ---------- Responsive: 中等宽度（≤1440px）导航收紧 ----------
   多语种菜单名长度差异很大（de "Fallstudien-Bibliothek"、fr "Bibliothèque d'études de cas"、
   fi "Tapaustutkimuskirjasto" 等），默认间距下会顶破 header，这里先收紧字号与内边距。
   1440 = --container-max，超过后容器不再变宽，故全尺寸导航只在 >1440 生效。 */
@media (max-width: 1440px) {
    .header-inner {
        gap: 16px;
    }

    .nav-list {
        gap: 1px;
    }

    .nav-list > li > a {
        padding: 8px 8px;
        font-size: 12.5px;
    }

    .header-right {
        gap: 10px;
    }
}

/* ---------- Responsive: 窄屏（≤1240px）主导航折叠为汉堡菜单 ----------
   再窄就放不下完整导航，提前交给移动端抽屉菜单（原先只在 768px 折叠，太晚）。
   1240 的取值依据：最长的德语菜单在 1241px 仍有 ~70px 余量，留足不同系统字体渲染差异。 */
@media (max-width: 1240px) {
    .main-nav {
        display: none;
    }
    .mobile-menu-btn {
        display: flex;
    }
    .mobile-nav {
        display: block;
    }
}

/* ---------- Responsive: Tablet Portrait (max-width: 768px) ---------- */
@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    /* Header */
    .main-nav {
        display: none;
    }
    .header-cta {
        display: none;
    }
    .mobile-menu-btn {
        display: flex;
    }
    .mobile-nav {
        display: block;
    }

    .header-inner {
        height: 64px;
        gap: 16px;
    }

    /* Hero */
    .hero-section {
        padding: 60px 0;
        min-height: auto;
    }

    .hero-content h1 {
        font-size: var(--font-size-3xl);
    }

    .hero-content p {
        font-size: var(--font-size-base);
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-certifications {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .stat-number {
        font-size: var(--font-size-4xl);
    }

    /* Advantages */
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Process */
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .process-steps::before {
        display: none;
    }

    /* Industries */
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Resources */
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Newsletter Home */
    .newsletter-home-form {
        flex-direction: column;
    }

    .newsletter-home-form input,
    .newsletter-home-form .btn-primary {
        width: 100%;
    }

    /* Footer */
    .newsletter-inner {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-form {
        max-width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ---------- Responsive: Mobile (max-width: 480px) ---------- */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .container-wide {
        padding: 0 16px;
    }

    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }

    .section {
        padding: 48px 0;
    }

    .section-header {
        margin-bottom: 32px;
    }

    /* Hero */
    .hero-content h1 {
        font-size: var(--font-size-2xl);
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-number {
        font-size: var(--font-size-3xl);
    }

    /* Advantages */
    .advantages-grid {
        grid-template-columns: 1fr;
    }

    /* Process */
    .process-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-social {
        flex-wrap: wrap;
    }

    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
    }

    .whatsapp-float svg {
        width: 24px;
        height: 24px;
    }

    /* Testimonial */
    .testimonial-card {
        padding: 32px 20px;
    }

    .testimonial-quote {
        font-size: var(--font-size-base);
    }
}

/* ==========================================================================
   补充缺失的CSS类定义 - 内页模板使用的类
   ========================================================================== */

/* Section Badge / Title / Desc (与 section-label 同系列) */
.section-badge {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.section-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--color-gray-900);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: var(--line-height-tight);
}

.section-desc {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    max-width: 720px;
    margin: 0 auto;
}

/* Features Grid (productlist.html Why Choose Us) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.feature-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-normal);
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-gray-200);
}

.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(15,47,92,0.1) 0%, rgba(15,47,92,0.05) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
}

.feature-card h3 {
    font-size: var(--font-size-xl);
    margin-bottom: 12px;
}

.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 0;
}

/* CTA Section (productlist.html, product.html) */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}

.cta-text h2 {
    color: var(--color-white);
    font-size: var(--font-size-3xl);
    margin-bottom: 12px;
}

.cta-text p {
    color: rgba(255,255,255,0.8);
    font-size: var(--font-size-lg);
    margin-bottom: 0;
}

.cta-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Button Large */
.btn-lg {
    padding: 16px 36px;
    font-size: var(--font-size-base);
}

/* Inquiry Section */
.inquiry-section {
    background-color: var(--color-gray-50);
}

.inquiry-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 48px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-100);
}

/* Spec Table (product.html) */
.spec-table th {
    text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-500);
    width: 40%;
}

.spec-table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
    border-bottom: none;
}

/* Post Navigation (product.html) */
.post-nav-section {
    padding: 48px 0;
    background: var(--color-gray-50);
}

.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.post-nav-prev,
.post-nav-next {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-fast);
    text-decoration: none;
    max-width: 48%;
}

.post-nav-next {
    text-align: right;
    align-items: flex-end;
}

.post-nav-prev:hover,
.post-nav-next:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.post-nav-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-nav-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-800);
}

/* Content Body (article/product content) */
.content-body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-600);
}

.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 16px 0;
}

.content-body h2,
.content-body h3,
.content-body h4 {
    color: var(--color-gray-900);
    margin-top: 32px;
    margin-bottom: 16px;
}

.content-body p {
    margin-bottom: 16px;
}

.content-body ul,
.content-body ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.content-body ul li,
.content-body ol li {
    margin-bottom: 8px;
    list-style: disc;
    color: var(--color-gray-600);
}

.content-body ol li {
    list-style: decimal;
}

.content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.content-body table th,
.content-body table td {
    padding: 10px 16px;
    border: 1px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
}

.content-body table th {
    background: var(--color-gray-50);
    font-weight: 600;
}

/* ==========================================================================
   响应式覆盖 - 内联样式网格的媒体查询
   使用 !important 覆盖内联 grid-template-columns
   ========================================================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    /* 4列网格 → 2列 */
    [style*="repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 非对称双列(主内容+侧栏) → 单列 */
    [style*="1fr 480px"],
    [style*="1fr 320px"] {
        grid-template-columns: 1fr !important;
    }

    /* sticky 侧栏取消固定 */
    [style*="position: sticky"],
    [style*="position:sticky"] {
        position: static !important;
    }

    /* CTA 内部布局 */
    .cta-inner {
        flex-direction: column;
        text-align: center;
    }

    .cta-actions {
        width: 100%;
        justify-content: center;
    }

    /* Features grid 4→2 */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Post nav 堆叠 */
    .post-nav {
        flex-direction: column;
    }

    .post-nav-prev,
    .post-nav-next {
        max-width: 100%;
        align-items: flex-start;
        text-align: left;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* 3列网格 → 1列 */
    [style*="repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* 2列对称网格 → 1列 */
    [style*="1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* 内联 flex 横向布局 → 纵向堆叠 */
    [style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* Section padding 缩小 */
    [style*="padding: 80px 0"],
    [style*="padding:80px 0"],
    [style*="padding: 100px 0"],
    [style*="padding:100px 0"] {
        padding: 48px 0 !important;
    }

    /* 内联 max-width 限制取消 */
    [style*="max-width: 800px"],
    [style*="max-width:800px"],
    [style*="max-width: 1000px"],
    [style*="max-width:1000px"] {
        max-width: 100% !important;
    }

    /* 卡片内边距缩小 */
    [style*="padding: 48px"],
    [style*="padding:48px"] {
        padding: 24px !important;
    }

    [style*="padding: 32px 24px"],
    [style*="padding:32px 24px"] {
        padding: 24px 16px !important;
    }

    /* Hero 区域内联样式覆盖 */
    [style*="min-height: 480px"],
    [style*="min-height:480px"],
    [style*="min-height: 440px"],
    [style*="min-height:440px"],
    [style*="min-height: 420px"],
    [style*="min-height:420px"],
    [style*="min-height: 360px"],
    [style*="min-height:360px"] {
        min-height: auto !important;
        padding: 48px 0 !important;
    }

    /* Hero 标题缩小 */
    [style*="font-size: var(--font-size-5xl)"],
    [style*="font-size:var(--font-size-5xl)"] {
        font-size: var(--font-size-3xl) !important;
    }

    [style*="font-size: var(--font-size-xl)"],
    [style*="font-size:var(--font-size-xl)"] {
        font-size: var(--font-size-base) !important;
    }

    /* Features grid → 1列 */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Inquiry form wrapper padding */
    .inquiry-form-wrapper {
        padding: 24px;
    }

    /* Post nav */
    .post-nav-section {
        padding: 32px 0;
    }

    /* 表格横向滚动 */
    .spec-table,
    .content-body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* 内联 gap 缩小 */
    [style*="gap: 64px"],
    [style*="gap:64px"],
    [style*="gap: 48px"],
    [style*="gap:48px"] {
        gap: 24px !important;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    /* 所有网格 → 1列 */
    [style*="repeat(4"],
    [style*="repeat(3"],
    [style*="repeat(2"],
    [style*="1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* 内联 padding 进一步缩小 */
    [style*="padding: 28px"],
    [style*="padding:28px"],
    [style*="padding: 24px"],
    [style*="padding:24px"] {
        padding: 16px !important;
    }

    /* CTA 按钮 全宽 */
    .cta-actions {
        flex-direction: column;
    }

    .cta-actions .btn-primary,
    .cta-actions .btn-secondary,
    .cta-actions .btn-lg {
        width: 100%;
        justify-content: center;
    }

    /* Hero 标题再缩小 */
    [style*="font-size: var(--font-size-3xl)"],
    [style*="font-size:var(--font-size-3xl)"] {
        font-size: var(--font-size-2xl) !important;
    }

    /* 内联 gap 最小化 */
    [style*="gap: 32px"],
    [style*="gap:32px"],
    [style*="gap: 24px"],
    [style*="gap:24px"] {
        gap: 16px !important;
    }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ===== 懒加载样式 ===== */
.lazy-img {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.lazy-img.loaded,
.lazy-img[loading="lazy"] {
    opacity: 1;
}

/* ===== 图片占位 ===== */
.lazy-placeholder {
    background: #f0f0f0;
    min-height: 200px;
}

/* ===== WebP降级 ===== */
.no-webp .bg-image {
    background-image: url(fallback.jpg);
}

/* ===== 打印优化 ===== */
@media print {
    .main-header, .main-footer, .whatsapp-float, .announcement-bar,
    .cta-section, .newsletter-section { display: none; }
    body { font-size: 12pt; color: #000; }
    a { color: #000; text-decoration: underline; }
}

/* ===== 动画减少偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Language Switcher - 多语言下拉切换器（国旗图标 + 下拉框）
   适用于白底 header，浅色主题
   ========================================================================== */
.lang-switcher {
    position: relative;
    z-index: 1001;
    display: inline-block;
    font-family: var(--font-family);
}

/* 触发按钮 */
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px 0 8px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    transition: all var(--transition-fast);
}

.lang-trigger:hover {
    border-color: var(--color-primary-light);
    background-color: rgba(15,47,92,0.04);
    color: var(--color-primary);
}

.lang-trigger:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15,47,92,0.12);
}

.lang-switcher.open .lang-trigger {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15,47,92,0.12);
}

/* 国旗图标 */
.lang-flag {
    width: 20px;
    height: 13.3px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    object-fit: cover;
    border-radius: 2px;
    background-color: var(--color-gray-100);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* 当前语言名称 */
.lang-current {
    font-size: var(--font-size-sm);
    font-weight: 500;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 下拉箭头 */
.lang-caret {
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.7;
    transition: transform var(--transition-fast);
}

.lang-switcher.open .lang-caret {
    transform: rotate(180deg);
}

/* 下拉面板：3 列网格 */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 400px;
    max-width: calc(100vw - 32px);
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 1002;
}

.lang-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 面板顶部小三角 */
.lang-dropdown::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 18px;
    width: 9px;
    height: 9px;
    background: var(--color-white);
    border-left: 1px solid var(--color-gray-200);
    border-top: 1px solid var(--color-gray-200);
    transform: rotate(45deg);
}

/* 下拉项 */
.lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    min-width: 0;
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.lang-item:hover {
    background-color: var(--color-gray-100);
    color: var(--color-primary);
    text-decoration: none;
}

.lang-item.active,
.lang-item.active:hover {
    background-color: rgba(15,47,92,0.08);
    color: var(--color-primary);
    font-weight: 600;
}

.lang-item .lang-flag {
    margin: 0;
}

/* 当前语言右侧圆点标记 */
.lang-item.active::after {
    content: "";
    margin-left: auto;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
}

/* 面板滚动条美化 */
.lang-dropdown::-webkit-scrollbar {
    width: 6px;
}
.lang-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.lang-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
}

/* 移动端：只保留国旗 + 箭头 */
@media (max-width: 768px) {
    .lang-switcher {
        z-index: 1001;
    }
    .lang-current {
        display: none;
    }
    .lang-trigger {
        height: 34px;
        padding: 0 8px;
    }
    .lang-dropdown {
        width: 300px;
    }
}

/* 窄屏：2 列 */
@media (max-width: 480px) {
    .lang-dropdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 240px;
    }
}
/* ==========================================================================
   RapidDirect-style Components
   ========================================================================== */

/* Page Banner (subpages) - deep blue gradient with breadcrumb pill */
.page-banner {
    background: linear-gradient(135deg, #0a2140 0%, #0c2a52 45%, #0f2f5c 100%);
    color: var(--color-white);
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}
.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="g2" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23g2)"/></svg>');
    pointer-events: none;
}
.page-banner::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(15,47,92,0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 {
    color: var(--color-white);
    font-size: var(--font-size-5xl);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}
.page-banner .page-banner-en {
    color: rgba(255,255,255,0.75);
    font-size: var(--font-size-xl);
    font-weight: 500;
    margin-bottom: 16px;
}
.page-banner p {
    color: rgba(255,255,255,0.75);
    font-size: var(--font-size-lg);
    max-width: 720px;
}

/* Stats strip */
.stats-strip {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 32px 24px;
    margin-top: -60px;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.stat-item { text-align: center; }
.stat-num {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 6px;
}
.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-weight: 500;
}

/* Service card */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.service-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-100);
    padding: 32px 28px;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}
.service-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}
.service-card .service-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(15,47,92,0.12) 0%, rgba(15,47,92,0.04) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.service-card .service-icon svg { width: 28px; height: 28px; color: var(--color-primary); }
.service-card h3 { font-size: var(--font-size-xl); margin-bottom: 10px; }
.service-card p { font-size: var(--font-size-sm); color: var(--color-gray-500); margin-bottom: 16px; flex: 1; }
.service-card .service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* Two-column split */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.split-section.reverse { direction: rtl; }
.split-section.reverse > * { direction: ltr; }
.split-section .visual-img {
    background: var(--color-gray-100);
    border-radius: var(--radius-xl);
    /* 容器与配图等比例（图 800×533 ≈ 3:2），img 用 cover 满铺，不裁切变形、不留灰边 */
    aspect-ratio: 3/2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.split-section .visual-img img { width: 100%; height: 100%; object-fit: cover; }
.split-section .visual-text h2 { font-size: var(--font-size-4xl); margin-bottom: 16px; }
.split-section .visual-text .label { margin-bottom: 12px; }
.split-section .visual-text p { color: var(--color-gray-600); margin-bottom: 12px; }

/* Steps */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.step-card { text-align: center; padding: 24px; }
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    font-size: var(--font-size-xl);
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 20px;
}
.step-card h3 { font-size: var(--font-size-xl); margin-bottom: 12px; }
.step-card p { color: var(--color-gray-500); font-size: var(--font-size-sm); }

/* Material table */
.material-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.material-table th,
.material-table td {
    text-align: left;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: middle;
}
.material-table th {
    background: var(--color-gray-50);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.material-table tr:last-child td { border-bottom: 0; }
.material-table tr:hover td { background: var(--color-gray-50); }
.material-table .mat-name { display: flex; align-items: center; gap: 14px; }
.material-table .mat-name img {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--color-gray-100);
}
.material-table .mat-name strong { font-size: var(--font-size-base); color: var(--color-gray-900); }
.material-table .mat-desc { color: var(--color-gray-500); font-size: var(--font-size-sm); max-width: 480px; }
.material-table .mat-price { color: var(--color-primary); font-weight: 700; font-size: var(--font-size-lg); }

/* Tabbed content */
.tabbed-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--color-gray-100);
    margin-bottom: 32px;
    overflow-x: auto;
}
.tabbed-tab {
    padding: 14px 24px;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--color-gray-500);
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}
.tabbed-tab:hover { color: var(--color-primary); }
.tabbed-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tabbed-panel { display: none; }
.tabbed-panel.active { display: block; }

/* Industries grid */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.industry-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: 28px;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}
.industry-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}
.industry-card .ind-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(15,47,92,0.1) 0%, rgba(15,47,92,0.04) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.industry-card .ind-icon svg { width: 28px; height: 28px; color: var(--color-primary); }
.industry-card h3 { font-size: var(--font-size-xl); margin-bottom: 8px; }
.industry-card p { color: var(--color-gray-500); font-size: var(--font-size-sm); margin-bottom: 14px; flex: 1; }
.industry-card .ind-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* FAQ */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-gray-100); padding: 20px 0; }
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--color-gray-900);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 24px;
    font-weight: 400;
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-answer {
    margin-top: 12px;
    color: var(--color-gray-600);
    line-height: var(--line-height-relaxed);
}

/* Section padding variants */
.section-pad-sm { padding: 60px 0; }
.section-pad-md { padding: 80px 0; }
.section-pad-lg { padding: 100px 0; }

/* Responsive */
@media (max-width: 1024px) {
    .services-grid, .industries-grid, .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 768px) {
    .page-banner { padding: 56px 0 40px; }
    .page-banner h1 { font-size: var(--font-size-3xl); }
    .services-grid, .industries-grid, .steps-grid { grid-template-columns: 1fr; gap: 16px; }
    .split-section { grid-template-columns: 1fr; gap: 32px; }
    .stats-strip { margin-top: -40px; padding: 24px 16px; grid-template-columns: 1fr 1fr; }
    .stat-num { font-size: var(--font-size-2xl); }
    .material-table th:nth-child(4), .material-table td:nth-child(4) { display: none; }
    .material-table .mat-desc { max-width: 220px; }
}

/* ==========================================================================
   Horizontal Accordion Modules (Manufacturing Services & Industries)
   仿酒店式手风琴滑动设计，零 AI 积分，纯 CSS+SVG 主题插画
   ========================================================================== */

.accordion-h {
    display: flex;
    gap: 8px;
    width: 100%;
    height: 480px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin: 0;
}

.accordion-h-panel {
    flex: 1 1 0;
    min-width: 64px;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--color-gray-900);
}

.accordion-h-panel.active,
.accordion-h-panel:hover,
.accordion-h-panel:focus-within {
    flex: 1 1 70%;
}

.accordion-h-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease;
    will-change: transform;
}

.accordion-h-panel:hover .accordion-h-bg,
.accordion-h-panel.active .accordion-h-bg {
    transform: scale(1.06);
}

.accordion-h-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.accordion-h-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,15,40,0.15) 0%, rgba(8,15,40,0.55) 60%, rgba(8,15,40,0.85) 100%);
    z-index: 2;
    transition: background 0.4s ease;
}

.accordion-h-panel.active .accordion-h-overlay,
.accordion-h-panel:hover .accordion-h-overlay {
    background: linear-gradient(180deg, rgba(8,15,40,0.30) 0%, rgba(8,15,40,0.65) 100%);
}

.accordion-h-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: var(--color-white);
    min-width: 0;
}

.accordion-h-num {
    position: absolute;
    top: 18px;
    left: 22px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.55);
    font-family: 'Inter', sans-serif;
}

.accordion-h-title {
    font-size: var(--font-size-sm);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-white);
    margin-bottom: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* 允许换行而不裁切：超长名称（如德语翻译）自动转为两列，绝不截断 */
    white-space: normal;
    letter-spacing: 0.02em;
    transition: all 0.5s ease;
    /* 取消 80% 限高裁切，改为 100% 并靠溢出隐藏兜底，保证整段文字可见 */
    max-height: 100%;
    overflow: hidden;
}

.accordion-h-panel.active .accordion-h-title,
.accordion-h-panel:hover .accordion-h-title,
.accordion-h-panel:focus-within .accordion-h-title {
    writing-mode: horizontal-tb;
    margin-bottom: 10px;
    white-space: normal;
    font-size: var(--font-size-2xl);
}

.accordion-h-en {
    display: none;
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.accordion-h-panel.active .accordion-h-en,
.accordion-h-panel:hover .accordion-h-en {
    display: block;
}

.accordion-h-desc {
    display: none;
    margin-bottom: 14px;
    line-height: 1.55;
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.88);
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.accordion-h-panel.active .accordion-h-desc,
.accordion-h-panel:hover .accordion-h-desc {
    display: -webkit-box;
}

.accordion-h-cta {
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    padding: 8px 16px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-full);
    backdrop-filter: blur(8px);
    align-self: flex-start;
    transition: background 0.2s ease;
    text-decoration: none;
}

.accordion-h-cta:hover {
    background: rgba(255,255,255,0.3);
}

.accordion-h-panel.active .accordion-h-cta,
.accordion-h-panel:hover .accordion-h-cta {
    display: inline-flex;
}

/* Mobile: collapse to vertical stack（折叠态只露标题，展开态显示标题+描述+CTA） */
@media (max-width: 768px) {
    .accordion-h {
        flex-direction: column;
        height: auto;
        gap: 8px;
    }
    .accordion-h-panel,
    .accordion-h-panel.active,
    .accordion-h-panel:hover,
    .accordion-h-panel:focus-within {
        flex: 0 0 auto;
        min-width: 0;
        height: 60px;
        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .accordion-h-content {
        justify-content: center;
        padding: 0 20px 0 54px;
    }
    .accordion-h-num {
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
    }
    .accordion-h-title {
        writing-mode: horizontal-tb;
        font-size: var(--font-size-lg);
        margin-bottom: 0;
        max-height: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .accordion-h-desc,
    .accordion-h-cta {
        display: none;
    }

    /* 展开态 */
    .accordion-h-panel.active,
    .accordion-h-panel:hover,
    .accordion-h-panel:focus-within {
        height: 260px;
    }
    .accordion-h-panel.active .accordion-h-content,
    .accordion-h-panel:hover .accordion-h-content,
    .accordion-h-panel:focus-within .accordion-h-content {
        justify-content: flex-end;
        padding: 20px;
    }
    .accordion-h-panel.active .accordion-h-num,
    .accordion-h-panel:hover .accordion-h-num,
    .accordion-h-panel:focus-within .accordion-h-num {
        top: 14px;
        left: 20px;
        transform: none;
    }
    .accordion-h-panel.active .accordion-h-title,
    .accordion-h-panel:hover .accordion-h-title,
    .accordion-h-panel:focus-within .accordion-h-title {
        white-space: normal;
        margin-bottom: 10px;
    }
    .accordion-h-panel.active .accordion-h-desc,
    .accordion-h-panel:hover .accordion-h-desc,
    .accordion-h-panel:focus-within .accordion-h-desc {
        display: -webkit-box;
    }
    .accordion-h-panel.active .accordion-h-cta,
    .accordion-h-panel:hover .accordion-h-cta,
    .accordion-h-panel:focus-within .accordion-h-cta {
        display: inline-flex;
    }
}

/* 面板背景：纯 CSS 渐变（零 AI 积分），6 色循环，主题内和谐 */
.accordion-h-panel:nth-child(6n+1) .accordion-h-bg {
    background: linear-gradient(140deg, #0a2140 0%, #123a6b 100%);
}
.accordion-h-panel:nth-child(6n+2) .accordion-h-bg {
    background: linear-gradient(140deg, #0a2140 0%, #0c2a52 100%);
}
.accordion-h-panel:nth-child(6n+3) .accordion-h-bg {
    background: linear-gradient(140deg, #0a2140 0%, #123a6b 100%);
}
.accordion-h-panel:nth-child(6n+4) .accordion-h-bg {
    background: linear-gradient(140deg, #061426 0%, #0c2a52 100%);
}
.accordion-h-panel:nth-child(6n+5) .accordion-h-bg {
    background: linear-gradient(140deg, #0a2140 0%, #123a6b 100%);
}
.accordion-h-panel:nth-child(6n+6) .accordion-h-bg {
    background: linear-gradient(140deg, #0a2140 0%, #0f2f5c 100%);
}
/* 渐变上的高光层，增强“加工中”的金属质感 */
.accordion-h-panel .accordion-h-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 78% 8%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%),
        radial-gradient(90% 60% at 10% 100%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%);
}

/* ===== 手风琴面板真实背景图 =====
   按 [nav:filename] 映射对应工艺/行业的典型零件实拍图（Pexels 商用授权）。
   文件名在 14 语种中完全一致，故一套规则覆盖全部语种。
   位于 nth-child 渐变规则之后，等特异性 + 靠后，故覆盖占位渐变。
   背景图覆盖裁切，保留 ::after 金属高光层。 */
.accordion-h-panel[data-img="3-axis-cnc-milling"] .accordion-h-bg { background: url(/static/upload/image/acc/svc-3axis.jpg?v=20261016v4) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/svc-3axis.webp") type("image/webp"), url("/static/upload/image/acc/svc-3axis.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="4-axis-cnc-milling"] .accordion-h-bg { background: url(/static/upload/image/acc/svc-4axis.jpg?v=20261016v3) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/svc-4axis.webp") type("image/webp"), url("/static/upload/image/acc/svc-4axis.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="5-axis-cnc-milling"] .accordion-h-bg { background: url(/static/upload/image/acc/svc-5axis.jpg?v=20261016v4) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/svc-5axis.webp") type("image/webp"), url("/static/upload/image/acc/svc-5axis.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="cnc-turning"] .accordion-h-bg { background: url(/static/upload/image/acc/svc-lathe.jpg?v=20261016v4) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/svc-lathe.webp") type("image/webp"), url("/static/upload/image/acc/svc-lathe.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="swiss-cnc-machining"] .accordion-h-bg { background: url(/static/upload/image/acc/svc-swiss.jpg?v=20261016v4) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/svc-swiss.webp") type("image/webp"), url("/static/upload/image/acc/svc-swiss.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="mill-turn-machining"] .accordion-h-bg { background: url(/static/upload/image/acc/svc-millturn.jpg?v=20261016v4) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/svc-millturn.webp") type("image/webp"), url("/static/upload/image/acc/svc-millturn.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="injection-molding"] .accordion-h-bg { background: url(/static/upload/image/acc/svc-injection.jpg?v=20261016v4) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/svc-injection.webp") type("image/webp"), url("/static/upload/image/acc/svc-injection.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="sheet-metal"] .accordion-h-bg { background: url(/static/upload/image/acc/svc-sheet.jpg?v=20261016v4) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/svc-sheet.webp") type("image/webp"), url("/static/upload/image/acc/svc-sheet.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="auto-parts-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-auto.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-auto.webp") type("image/webp"), url("/static/upload/image/acc/ind-auto.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="communication-parts-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-telecom.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-telecom.webp") type("image/webp"), url("/static/upload/image/acc/ind-telecom.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="medical-parts-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-medical.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-medical.webp") type("image/webp"), url("/static/upload/image/acc/ind-medical.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="av-equipment-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-av.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-av.webp") type("image/webp"), url("/static/upload/image/acc/ind-av.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="automation-parts-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-automation.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-automation.webp") type("image/webp"), url("/static/upload/image/acc/ind-automation.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="3c-digital-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-3c.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-3c.webp") type("image/webp"), url("/static/upload/image/acc/ind-3c.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="motorcycle-parts-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-moto.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-moto.webp") type("image/webp"), url("/static/upload/image/acc/ind-moto.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="bicycle-parts-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-bike.jpg) center/cover no-repeat;  background-image: url("/static/upload/image/acc/ind-bike.jpg"); }
.accordion-h-panel[data-img="aluminum-keyboard-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-keyboard.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-keyboard.webp") type("image/webp"), url("/static/upload/image/acc/ind-keyboard.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="aerospace-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-aero.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-aero.webp") type("image/webp"), url("/static/upload/image/acc/ind-aero.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="semiconductor-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-semi.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-semi.webp") type("image/webp"), url("/static/upload/image/acc/ind-semi.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="photography-equipment-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-photo.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-photo.webp") type("image/webp"), url("/static/upload/image/acc/ind-photo.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="energy-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-energy.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-energy.webp") type("image/webp"), url("/static/upload/image/acc/ind-energy.jpg") type("image/jpeg")); }
.accordion-h-panel[data-img="robotics-industry"] .accordion-h-bg { background: url(/static/upload/image/acc/ind-robotics.jpg) center/cover no-repeat;  background-image: image-set(url("/static/upload/image/acc/opt/ind-robotics.webp") type("image/webp"), url("/static/upload/image/acc/ind-robotics.jpg") type("image/jpeg")); }

/* 有真实背景图的面板：隐藏占位 SVG 雷达底纹，让照片干净呈现 */
.accordion-h-panel[data-img] .accordion-h-svg { display: none; }

/* 无 data-img 的面板（如有）保留占位渐变，已由上方的 nth-child 规则兜底 */

.accordion-h-panel:focus-visible {
    outline: 3px solid var(--color-primary, #0f2f5c);
    outline-offset: -3px;
}
.accordion-h-panel .accordion-h-num {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Products Module — 顶部二级栏目标签切换 + 产品网格
   ========================================================================== */
.prod-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 34px;
}
.prod-tab {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    color: var(--color-gray-700);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.4;
    padding: 9px 20px;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.prod-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.prod-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 6px 16px rgba(15,47,92,0.28);
}

.prod-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
@media (max-width: 1199px) { .prod-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px)  { .prod-grid { grid-template-columns: 1fr; } }
.prod-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.prod-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-gray-200);
}
.prod-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%);
}
.prod-card:nth-child(6n+2) .prod-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.prod-card:nth-child(6n+3) .prod-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.prod-card:nth-child(6n+4) .prod-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.prod-card:nth-child(6n+5) .prod-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.prod-card:nth-child(6n+6) .prod-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.prod-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 78% 8%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);
}
.prod-thumb svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44%;
    height: 44%;
    transform: translate(-50%, -50%);
    z-index: 1;
    fill: none;
    stroke: rgba(255,255,255,0.85);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 真实缩略图：覆盖在渐变+立方体占位层之上；加载失败时隐藏，露出占位层 */
.prod-thumb img {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-gray-100);
    transition: transform 0.4s ease;
}
.prod-card:hover .prod-thumb img { transform: scale(1.05); }
.prod-thumb img.is-broken,
.prod-thumb img[src=""],
.prod-thumb img:not([src]) { display: none; }
.prod-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
    flex: 1;
}
.prod-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-gray-900);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
}
.prod-card[hidden] { display: none !important; }
.prod-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-gray-500);
    padding: 32px 0;
}

@media (max-width: 768px) {
    .prod-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .prod-tabs::-webkit-scrollbar { display: none; }
    .prod-tab { flex: 0 0 auto; }
    .prod-body { padding: 12px 14px 14px; }
    .prod-name { font-size: var(--font-size-sm); }
}

/* ==========================================================================
   工厂环境画廊 — 首页横向滚动条 + 内页网格 + 灯箱
   ========================================================================== */
.fac-rail { position: relative; }
.fac-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 4px 2px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fac-track::-webkit-scrollbar { display: none; }
.fac-slide {
    flex: 0 0 auto;
    width: 340px;
    scroll-snap-align: start;
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-gray-100);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fac-slide:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fac-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fac-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 30px 18px 15px;
    color: #fff;
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: 1.35;
    background: linear-gradient(to top, rgba(2, 8, 23, 0.78), rgba(2, 8, 23, 0));
}
.fac-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    color: var(--color-gray-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: var(--shadow-md);
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.fac-nav:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.fac-nav[disabled] { opacity: 0.32; cursor: default; }
.fac-nav[disabled]:hover { background: var(--color-white); color: var(--color-gray-900); border-color: var(--color-gray-200); }
.fac-nav-prev { left: -20px; }
.fac-nav-next { right: -20px; }
.fac-nav svg { width: 20px; height: 20px; }
@media (max-width: 1024px) {
    .fac-nav { display: none; }
    .fac-slide { width: 78vw; max-width: 380px; }
}

/* 内页：工厂环境网格 */
.facp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.facp-item {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-gray-100);
    box-shadow: var(--shadow-sm);
}
.facp-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.facp-item:hover img { transform: scale(1.05); }
.facp-grid:empty::after {
    content: attr(data-empty);
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-gray-500);
    padding: 56px 0;
}
@media (max-width: 768px) {
    .facp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* 灯箱 */
.pbl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(2, 8, 23, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pbl-lightbox.open { display: flex; }
.pbl-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.pbl-lightbox-close {
    position: absolute;
    top: 18px; right: 22px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.pbl-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
.pbl-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pbl-lb-nav:hover { background: rgba(255, 255, 255, 0.32); }
.pbl-lb-prev { left: 22px; }
.pbl-lb-next { right: 22px; }
.pbl-lb-cap {
    position: absolute;
    bottom: 20px; left: 0; right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   内页结构导航 — topic-nav 滚动高亮样式
   ========================================================================== */
.topic-nav {
    padding: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
    position: sticky;
    top: 79px;
    z-index: 100;
}
.topic-nav > .container,
.topic-nav-inner {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.topic-nav > .container::-webkit-scrollbar,
.topic-nav-inner::-webkit-scrollbar { display: none; }

.topic-nav a {
    padding: 16px 24px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
/* hover 只变色、不画下划线：下划线专属于「当前所在区块」，
   避免鼠标悬停时出现两条下划线（悬停项 + 激活项）的歧义 */
.topic-nav a:hover {
    color: var(--color-primary) !important;
}
.topic-nav a.active {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
}

/* cat-nav 是填充式高亮（蓝底白字），覆盖各专题页的内联样式 */
.cat-nav a:hover,
.cat-nav a.active {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
}

/* ==========================================================================
   Left-Right Accordion (Materials / Surface Treatment)
   左侧分组选项卡（可折叠二级），右侧详情面板
   ========================================================================== */

.acc-sidebar {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
    align-items: start;
}

/* ---- LEFT: grouped nav ---- */
.acc-sidebar-nav {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: 96px;
}
.acc-group + .acc-group { border-top: 1px solid var(--color-gray-200); }
.acc-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    background: var(--color-gray-50);
    border: none;
    cursor: pointer;
    transition: background 0.18s ease;
}
.acc-group-toggle:hover { background: var(--color-gray-100); }
.acc-chevron {
    width: 18px; height: 18px;
    color: var(--color-gray-500);
    transition: transform 0.3s ease;
    flex: 0 0 auto;
}
.acc-group.is-open .acc-chevron { transform: rotate(180deg); }
.acc-group-body { display: none; padding: 8px; }
.acc-group.is-open .acc-group-body { display: block; }

.acc-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.18s ease;
}
.acc-item:hover { background: var(--color-gray-100); color: var(--color-gray-900); }
.acc-item.is-active {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
}
.acc-item.is-active:hover { background: var(--color-primary); color: var(--color-white); }

/* ---- RIGHT: detail panel ---- */
.acc-sidebar-detail { min-width: 0; }
.acc-detail { display: none; }
.acc-detail.is-active {
    display: grid;
    grid-template-columns: 340px 1fr;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: accFade 0.35s ease;
}
@keyframes accFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.acc-detail-media {
    background: var(--color-gray-100);
    position: relative;
    min-height: 320px;
}
.acc-detail-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    position: absolute; inset: 0;
}
.acc-detail-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f4f7fa 0%, #e8eef5 100%);
}
.acc-detail-fallback svg { width: 64px; height: 64px; color: var(--color-primary); opacity: 0.5; }
.acc-detail-body { padding: 40px; }
.acc-detail-cat { margin-bottom: 16px; }
.mat-type-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.mat-type-badge.metal { background: #f4f7fa; color: #0a2140; }
.mat-type-badge.plastic { background: #f4f7fa; color: #061426; }
.acc-detail-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-gray-900);
    margin-bottom: 16px;
    line-height: 1.15;
}
.acc-detail-desc {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-relaxed);
    margin-bottom: 28px;
}
.acc-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.2s ease, gap 0.2s ease;
}
.acc-detail-link:hover { background: var(--color-primary-dark, #0a2140); gap: 12px; }
.acc-detail-link svg { width: 16px; height: 16px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .acc-sidebar { grid-template-columns: 1fr; }
    .acc-sidebar-nav { position: static; }
    .acc-detail.is-active { grid-template-columns: 1fr; }
    .acc-detail-media { min-height: 220px; }
}
/* >>> RD-MODULES-CSS-START */
/* ==========================================================================
   RapidDirect-style Material / Surface modules (left list, right detail card)
   ========================================================================== */
.rd-acc { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.rd-acc-left { position: sticky; top: 92px; }
.rd-group { border: 1px solid #e2e8f0; border-radius: 16px; margin-bottom: 12px; overflow: hidden; background: #ffffff; }
.rd-group-header {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; font-size: 15px; font-weight: 700; color: #061426;
    background: #ffffff; border: none; cursor: pointer; text-align: left;
    transition: background 0.2s ease;
}
.rd-group-header:hover { background: #f8fafc; }
.rd-chevron { width: 18px; height: 18px; color: #64748b; transition: transform 0.3s ease; flex-shrink: 0; }
.rd-group.is-open .rd-chevron { transform: rotate(180deg); }
.rd-group-body { display: none; padding: 6px 12px 14px; }
.rd-group.is-open .rd-group-body { display: block; }
.rd-tab {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; margin-bottom: 4px;
    font-size: 13px; font-weight: 600; color: #475569; background: #f1f5f9;
    border: 1px solid transparent; border-radius: 12px; cursor: pointer; text-align: left;
    transition: all 0.2s ease;
}
.rd-tab:hover { background: #e2e8f0; color: #061426; }
.rd-tab.is-active { background: #0f2f5c; color: #ffffff; border-color: #0f2f5c; }
.rd-tab-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: #9aa3ad; border: 1px solid rgba(0,0,0,0.12); }
.rd-acc-right { min-width: 0; }
.rd-panel { display: none; }
.rd-panel.is-active { display: block; animation: fadeInUp 0.35s ease; }
.rd-card {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: start;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 28px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.06);
}
.rd-media { display: flex; flex-direction: column; gap: 12px; }
.rd-hero { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: #f1f5f9; }
.rd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-hero-swatch { position: absolute; inset: 0; transition: background 0.3s ease; background: #9aa3ad; }
.rd-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(0,0,0,0.05)); pointer-events: none; }
.rd-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 14px; border-radius: 999px;
    background: rgba(15,23,42,0.7); color: #ffffff; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px);
}
.rd-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rd-thumb {
    aspect-ratio: 1/1; border-radius: 12px; border: 2px solid transparent; cursor: pointer; padding: 0;
    transition: all 0.2s ease; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); background: #9aa3ad;
}
.rd-thumb.is-active { border-color: #0f2f5c; transform: translateY(-2px); }
.rd-info-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rd-info-head h3 { font-size: 28px; font-weight: 800; margin: 0; color: #061426; }
.rd-tag { padding: 4px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.rd-tag.metal { background: #f4f7fa; color: #123a6b; }
.rd-tag.plastic { background: #f4f7fa; color: #061426; }
.rd-tag.st { background: rgba(15,47,92,0.1); color: #0f2f5c; }
.rd-desc { color: #475569; line-height: 1.7; margin-bottom: 20px; font-size: 15px; }
.rd-specs { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.rd-specs th, .rd-specs td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #f1f5f9; font-size: 13px; vertical-align: top; }
.rd-specs th { color: #64748b; font-weight: 600; width: 42%; white-space: nowrap; }
.rd-specs td { color: #061426; font-weight: 500; }
.rd-price { letter-spacing: 1px; color: #0f2f5c; font-weight: 800; }
.rd-more {
    display: inline-flex; align-items: center; gap: 6px; padding: 12px 26px; background: #0f2f5c; color: #fff;
    font-weight: 600; font-size: 13px; border-radius: 12px; text-decoration: none; transition: gap 0.2s ease, background 0.2s ease;
}
.rd-more:hover { gap: 10px; background: #0a2140; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
    .rd-acc { grid-template-columns: minmax(0, 1fr); }
    .rd-acc-left { position: static; }
    /* minmax(0,1fr)：单列时 1fr 的 min 仍是 auto（= 最小内容宽），
       丹麦语等长复合词 + .rd-specs th{white-space:nowrap} 会把列撑到 353px > 卡片内容宽 302px */
    .rd-card { grid-template-columns: minmax(0, 1fr); }
    .rd-card > * { min-width: 0; }
    .rd-specs th { white-space: normal; }
}
/* <<< RD-MODULES-CSS-END */

/* ---------- icon switching (6 icons per card, show one by position) ---------- */
.rd-svc-thumb svg, .rd-ind-ico svg { display: none; }
.rd-svc-card:nth-child(6n+1) .rd-svc-thumb svg.ic1,
.rd-svc-card:nth-child(6n+2) .rd-svc-thumb svg.ic2,
.rd-svc-card:nth-child(6n+3) .rd-svc-thumb svg.ic3,
.rd-svc-card:nth-child(6n+4) .rd-svc-thumb svg.ic4,
.rd-svc-card:nth-child(6n+5) .rd-svc-thumb svg.ic5,
.rd-svc-card:nth-child(6n+6) .rd-svc-thumb svg.ic6,
.rd-ind-card:nth-child(6n+1) .rd-ind-ico svg.ic1,
.rd-ind-card:nth-child(6n+2) .rd-ind-ico svg.ic2,
.rd-ind-card:nth-child(6n+3) .rd-ind-ico svg.ic3,
.rd-ind-card:nth-child(6n+4) .rd-ind-ico svg.ic4,
.rd-ind-card:nth-child(6n+5) .rd-ind-ico svg.ic5,
.rd-ind-card:nth-child(6n+6) .rd-ind-ico svg.ic6 { display: block; }

/* >>> RD-PAGE-CSS-START */
/* ==========================================================================
   SERVICES PAGE - RapidDirect-inspired layout  (.rd-*)
   used by template/{lang}/productlist.html
   ========================================================================== */

/* ---------- shared ---------- */
.rd-section { padding: 84px 0; }
.rd-section-sm { padding: 56px 0; }
.rd-bg-white { background: var(--color-white); }
.rd-bg-gray  { background: var(--color-gray-50); }
.rd-bg-peach { background: #f7f8fa; }
.rd-head { max-width: 880px; margin: 0 auto 48px; text-align: center; }
.rd-head h2 { font-size: clamp(1.6rem, 2.7vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-gray-900); margin-bottom: 16px; }
.rd-head h2::after { content: ""; display: inline-block; width: 56px; height: 4px; border-radius: 2px; background: var(--color-primary); margin-left: 14px; vertical-align: middle; }
.rd-head p { font-size: var(--font-size-base); color: var(--color-gray-600); line-height: var(--line-height-relaxed); }
.rd-head-left { text-align: left; margin: 0 0 32px; }
.rd-head-left h2::after { margin-left: 12px; }

/* ---------- buttons ---------- */
.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 32px;
    border-radius: var(--radius-md); font-weight: 600; font-size: var(--font-size-base); text-decoration: none;
    border: 2px solid transparent; transition: all .2s ease; cursor: pointer; white-space: nowrap; }
.rd-btn-primary { background: var(--color-primary); color: var(--color-white); }
.rd-btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rd-btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.rd-btn-outline:hover { background: var(--color-primary); color: var(--color-white); }
.rd-btn-white { background: var(--color-white); color: var(--color-primary); }
.rd-btn-white:hover { background: var(--color-gray-100); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rd-btn-ghost-white { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,.7); }
.rd-btn-ghost-white:hover { background: var(--color-white); color: var(--color-primary); }
.rd-btn-sm { padding: 11px 22px; font-size: var(--font-size-sm); }

/* ---------- 1. hero ---------- */
.rd-phero { background: var(--color-white); padding: 76px 0 46px; }
.rd-phero-inner { display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; }
.rd-rating { display: inline-flex; align-items: center; gap: 10px; font-size: var(--font-size-sm);
    color: var(--color-gray-600); margin-bottom: 18px; }
.rd-rating b { color: var(--color-gray-900); font-weight: 700; }
.rd-rating .rd-stars { color: #c8102e; letter-spacing: 2px; font-size: 15px; }
.rd-phero h1 { font-size: clamp(2rem, 4.3vw, 3.3rem); font-weight: 800; line-height: 1.07;
    letter-spacing: -0.025em; color: var(--color-gray-900); margin-bottom: 22px; }
.rd-phero .rd-lead { font-size: var(--font-size-lg); color: var(--color-gray-600); line-height: 1.75;
    max-width: 560px; margin-bottom: 32px; }
.rd-phero-media { border-radius: 26px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-2xl);
    background: var(--color-gray-100); position: relative; }
.rd-phero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Banner video（所有 hero banner 图片 → 视频） ---------- */
.banner-video,
.rd-phero-media video,
.ind-hero-media video,
.ind-hero-card video,
.mat-detail-hero-visual video,
.mat-hero-img-wrap video,
.hero-section video,
.cl-hero video,
.ind-hero video,
.st-detail-hero video { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 深底 hero 中视频容器的兜底尺寸（部分容器无 aspect-ratio） */
.ind-hero-media .banner-video,
.ind-hero-card .banner-video { min-height: 260px; }

/* ---------- 2. trust / logo bar ---------- */
.rd-trust { padding: 34px 0 60px; background: var(--color-white); }
.rd-trust-title { text-align: center; font-size: var(--font-size-base); font-weight: 700;
    color: var(--color-gray-800); margin-bottom: 30px; }
.rd-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px 58px; }
.rd-logo { display: flex; align-items: center; gap: 9px; opacity: .55; filter: grayscale(1);
    transition: opacity .25s, filter .25s; }
.rd-logo:hover { opacity: 1; filter: none; }
.rd-logo svg { display: block; }

/* ---------- 3. services cards ---------- */
.rd-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rd-svc-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl); overflow: hidden; text-decoration: none; color: inherit;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.rd-svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--color-primary-light); }
.rd-svc-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden;
    background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-svc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    z-index: 2; transition: transform .5s ease; }
.rd-svc-card:hover .rd-svc-thumb img { transform: scale(1.06); }
.rd-svc-thumb svg { position: absolute; top: 50%; left: 50%; width: 42%; height: 42%;
    transform: translate(-50%, -50%); z-index: 1; fill: none; stroke: rgba(255,255,255,.85);
    stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rd-svc-card:nth-child(6n+2) .rd-svc-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-svc-card:nth-child(6n+3) .rd-svc-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-svc-card:nth-child(6n+4) .rd-svc-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-svc-card:nth-child(6n+5) .rd-svc-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-svc-card:nth-child(6n+6) .rd-svc-thumb { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-svc-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.rd-svc-body h3 { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-gray-900);
    margin-bottom: 6px; line-height: 1.3; }
.rd-svc-sub { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); margin-bottom: 12px; }
.rd-svc-body p { font-size: var(--font-size-sm); color: var(--color-gray-500); line-height: 1.7; margin-bottom: 18px; flex: 1; }
.rd-svc-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
    font-size: var(--font-size-sm); color: var(--color-primary); }
.rd-svc-card:hover .rd-svc-more { gap: 10px; }

/* ---------- 4. band ---------- */
.rd-band { background: var(--color-primary); color: var(--color-white); padding: 64px 0; text-align: center; }
.rd-band h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--color-white); }
.rd-band p { max-width: 820px; margin: 0 auto 28px; font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed); color: rgba(255,255,255,.88); }

/* ---------- 5. global / factory split ---------- */
.rd-split { display: grid; grid-template-columns: 1fr 1.08fr; gap: 54px; align-items: center; }
.rd-split.rev .rd-split-media { order: -1; }
.rd-split-media { border-radius: 22px; overflow: hidden; aspect-ratio: 16/11; box-shadow: var(--shadow-xl);
    background: var(--color-gray-100); }
.rd-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-split h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.22; color: var(--color-gray-900); margin-bottom: 18px; }
.rd-split p { font-size: var(--font-size-base); color: var(--color-gray-600); line-height: 1.78; }
.rd-stats { display: flex; flex-wrap: wrap; gap: 46px; margin-top: 30px; }
.rd-stat .rd-stat-num { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: var(--color-primary);
    line-height: 1.1; letter-spacing: -0.02em; }
.rd-stat .rd-stat-lbl { font-size: var(--font-size-sm); color: var(--color-gray-500); margin-top: 6px; }

/* ---------- 8. industries ---------- */
.rd-ind-wrap { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 52px; align-items: center; }
.rd-ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rd-ind-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 14px;
    background: var(--color-white); border: 1px solid rgba(0,0,0,.05); border-radius: var(--radius-lg);
    text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.rd-ind-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.rd-ind-ico { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); position: relative; }
.rd-ind-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.rd-ind-ico svg { position: absolute; top: 50%; left: 50%; width: 46%; height: 46%;
    transform: translate(-50%, -50%); z-index: 1; fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.4; }
.rd-ind-card:nth-child(6n+2) .rd-ind-ico { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-ind-card:nth-child(6n+3) .rd-ind-ico { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-ind-card:nth-child(6n+4) .rd-ind-ico { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-ind-card:nth-child(6n+5) .rd-ind-ico { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-ind-card:nth-child(6n+6) .rd-ind-ico { background: linear-gradient(140deg,#0a2140 0%,#0f2f5c 100%); }
.rd-ind-name { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-gray-900); text-align: center; }

/* ---------- 9. tolerance table ---------- */
.rd-table { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
    overflow: hidden; }
.rd-trow { display: grid; grid-template-columns: 300px 1fr; gap: 0; border-bottom: 1px solid var(--color-gray-100); }
.rd-trow:last-child { border-bottom: none; }
.rd-trow:nth-child(even) { background: var(--color-gray-50); }
.rd-tkey { padding: 22px 26px; font-weight: 700; color: var(--color-gray-900); font-size: var(--font-size-base);
    border-right: 1px solid var(--color-gray-100); }
.rd-tval { padding: 22px 26px; color: var(--color-gray-600); font-size: var(--font-size-sm); line-height: 1.75; }
.rd-tval b { color: var(--color-gray-900); font-weight: 600; }
.rd-chip { display: inline-block; padding: 3px 12px; border-radius: var(--radius-full); font-size: var(--font-size-xs);
    font-weight: 600; color: var(--color-primary); background: rgba(15,47,92,.09); border: 1px solid rgba(15,47,92,.25);
    margin: 0 6px 6px 0; }
.rd-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; }

/* ---------- 10. quality ---------- */
.rd-qual { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.rd-qual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rd-qual-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); display: block;
    aspect-ratio: 4/3; box-shadow: var(--shadow-md); }
/* 首图跨两行。PerfImg 输出过滤会把 <img> 包进 <picture>（配 webp），picture 才是真实网格项。
   实测（2026-10）：在 picture{display:contents} + span 2 + height:100% 组合下，
   Chromium 的稀疏自动布局会把首图挤到第 2 列、并把前两行压成 0 高，导致整块错位。
   修复：本网格内 picture 恢复为普通块级盒子（成为网格项），并对首项使用
   显式定位 grid-column:1 / grid-row:1 span 2 —— 完全绕开自动布局，不受浏览器版本影响。 */
.rd-qual-grid picture { display: block; }
.rd-qual-grid > img:first-child,
.rd-qual-grid > picture:first-child { grid-column: 1; grid-row: 1 / span 2; }
.rd-qual-grid > img:first-child,
.rd-qual-grid > picture:first-child > img { aspect-ratio: auto; height: 100%; }
.rd-qual-item { margin-bottom: 22px; }
.rd-qual-item h4 { font-size: var(--font-size-base); font-weight: 700; color: var(--color-gray-900); margin-bottom: 8px; }
.rd-qual-item p { font-size: var(--font-size-sm); color: var(--color-gray-600); line-height: 1.75; }

/* ---------- 11. why choose us ---------- */
.rd-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rd-why-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl);
    padding: 34px 30px; transition: transform .25s, box-shadow .25s; }
.rd-why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.rd-why-num { font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-primary);
    opacity: .28; letter-spacing: -0.03em; margin-bottom: 14px; }
.rd-why-card h3 { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-gray-900); margin-bottom: 10px; }
.rd-why-card p { font-size: var(--font-size-sm); color: var(--color-gray-500); line-height: 1.75; }

/* 4-card responsive "why choose" grid: 4 on desktop, 2 on tablet, 1 on mobile */
.rd-why-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 1100px) { .rd-why-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rd-why-grid-4 { grid-template-columns: 1fr; } }

/* ---------- 12. guidelines table ---------- */
.rd-gtable { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.rd-ghead, .rd-grow { display: grid; grid-template-columns: 260px 1fr 300px; }
.rd-ghead { background: var(--color-gray-900); color: var(--color-white); font-weight: 700; font-size: var(--font-size-sm); }
.rd-ghead > div { padding: 16px 22px; }
.rd-grow { border-bottom: 1px solid var(--color-gray-100); font-size: var(--font-size-sm); }
.rd-grow:last-child { border-bottom: none; }
.rd-grow:nth-child(even) { background: var(--color-gray-50); }
.rd-grow > div { padding: 18px 22px; color: var(--color-gray-600); line-height: 1.7; }
.rd-grow > div:first-child { font-weight: 700; color: var(--color-gray-900); }

/* ---------- 13. FAQ ---------- */
.rd-faq { max-width: 940px; margin: 0 auto; }
.rd-faq-item { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); background: var(--color-white);
    margin-bottom: 14px; overflow: hidden; transition: box-shadow .2s; }
.rd-faq-item.open { box-shadow: var(--shadow-md); }
.rd-faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    font-size: var(--font-size-base); font-weight: 600; color: var(--color-gray-900); font-family: inherit; }
.rd-faq-q:hover { color: var(--color-primary); }
.rd-faq-q svg { flex-shrink: 0; transition: transform .3s ease; color: var(--color-primary); }
.rd-faq-item.open .rd-faq-q svg { transform: rotate(180deg); }
.rd-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.rd-faq-a > div { padding: 0 26px 24px; color: var(--color-gray-600); font-size: var(--font-size-sm); line-height: 1.8; }
.rd-faq-item.open .rd-faq-a { max-height: 460px; }

/* ---------- 14. final CTA ---------- */
.rd-cta { background: var(--color-gray-900); color: var(--color-white); padding: 76px 0; text-align: center; }
.rd-cta h2 { font-size: clamp(1.6rem, 2.7vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--color-white); }
.rd-cta p { max-width: 700px; margin: 0 auto 30px; color: rgba(255,255,255,.78); line-height: 1.75; }
.rd-cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .rd-phero-inner { grid-template-columns: 1fr; gap: 36px; }
    .rd-svc-grid { grid-template-columns: repeat(2, 1fr); }
    .rd-split, .rd-qual, .rd-ind-wrap { grid-template-columns: 1fr; gap: 34px; }
    .rd-split.rev .rd-split-media { order: 0; }
    .rd-why-grid { grid-template-columns: 1fr; }
    .rd-ghead, .rd-grow { grid-template-columns: 200px 1fr 220px; }
}
@media (max-width: 768px) {
    .rd-section { padding: 56px 0; }
    .rd-section-sm { padding: 40px 0; }
    .rd-svc-grid { grid-template-columns: 1fr; }
    .rd-ind-grid { grid-template-columns: repeat(2, 1fr); }
    .rd-ind-ico { width: 68px; height: 68px; }
    .rd-trow { grid-template-columns: 1fr; }
    .rd-tkey { border-right: none; border-bottom: 1px solid var(--color-gray-100); padding-bottom: 10px; }
    .rd-stats { gap: 26px; }
    .rd-qual-grid { grid-template-columns: 1fr; }
    .rd-qual-grid > img:first-child,
    .rd-qual-grid > picture:first-child,
    .rd-qual-grid > picture:first-child > img { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; height: auto; }
    .rd-ghead { display: none; }
    .rd-grow { grid-template-columns: 1fr; }
    .rd-grow > div:first-child { background: var(--color-gray-100); }
    .rd-logos { gap: 18px 30px; }
    .rd-cta-actions, .rd-actions { flex-direction: column; }
    .rd-btn { width: 100%; }
}
/* <<< RD-PAGE-CSS-END */

/* >>> RD-ARTICLE-CSS-START */
/* Rich content body (DB {content:content}) rendered in RapidDirect style */
.rd-article { max-width: 1000px; margin: 0 auto; color: var(--color-gray-600); font-size: 1rem; line-height: 1.85; }
.rd-article > *:first-child { margin-top: 0; }
.rd-article h1, .rd-article h2 { font-size: 1.6rem; line-height: 1.3; font-weight: 800; color: var(--color-gray-900); margin: 36px 0 16px; letter-spacing: -0.01em; }
.rd-article h2:first-child { margin-top: 0; }
.rd-article h3 { font-size: 1.2rem; line-height: 1.4; font-weight: 700; color: var(--color-gray-900); margin: 32px 0 12px; }
.rd-article h4 { font-size: 1.05rem; font-weight: 700; color: var(--color-gray-800); margin: 24px 0 10px; }
.rd-article p { margin: 0 0 16px; }
.rd-article a { color: var(--color-primary); text-decoration: underline; }
.rd-article ul, .rd-article ol { margin: 0 0 20px; padding-left: 1.4em; }
.rd-article li { margin: 6px 0; }
.rd-article li > p { margin: 0; }
.rd-article strong, .rd-article b { color: var(--color-gray-800); font-weight: 700; }
.rd-article img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0 20px; }
.rd-article blockquote { margin: 20px 0; padding: 14px 20px; border-left: 3px solid var(--color-primary); background: var(--color-gray-50); color: var(--color-gray-600); border-radius: 0 8px 8px 0; }
/* Table — 2 parameters per row, RapidDirect tolerance-card look:
   rounded bordered container, clean rows, bold dark label, gray value, zebra per visual row.
   The <table> is turned into a 2-column CSS grid; each <tr> (one parameter) becomes a grid item. */
.rd-article table { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 8px 0 28px;
    font-size: 0.95rem; background: var(--color-white); border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg); overflow: hidden; }
.rd-article table thead { display: none; }
.rd-article table tbody { display: contents; }
.rd-article table tbody tr { display: grid; grid-template-columns: minmax(0, 40%) 1fr;
    border-top: 1px solid var(--color-gray-100); }
.rd-article table tbody tr:nth-child(1), .rd-article table tbody tr:nth-child(2) { border-top: none; }
.rd-article table tbody tr:nth-child(odd) { border-right: 1px solid var(--color-gray-100); }
.rd-article table tbody tr:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
.rd-article table tbody tr:nth-child(4n+3), .rd-article table tbody tr:nth-child(4n+4) { background: var(--color-gray-50); }
.rd-article table tbody td { padding: 18px 22px; color: var(--color-gray-600); line-height: 1.65;
    text-align: left; vertical-align: top; }
.rd-article table tbody td:first-child { color: var(--color-gray-900); font-weight: 700; }
@media (max-width: 900px) {
    .rd-article table { grid-template-columns: 1fr; }
    .rd-article table tbody tr { grid-template-columns: minmax(0, 45%) 1fr; border-right: none; }
    .rd-article table tbody tr:nth-child(2) { border-top: 1px solid var(--color-gray-100); }
    .rd-article table tbody tr:last-child:nth-child(odd) { grid-column: auto; }
    .rd-article table tbody tr:nth-child(4n+3), .rd-article table tbody tr:nth-child(4n+4) { background: transparent; }
    .rd-article table tbody tr:nth-child(even) { background: var(--color-gray-50); }
}
@media (max-width: 768px) {
    .rd-article h1, .rd-article h2 { font-size: 1.35rem; }
    .rd-article h3 { font-size: 1.1rem; }
    .rd-article table tbody td { padding: 14px 16px; }
}
/* <<< RD-ARTICLE-CSS-END */

/* >>> RD-TABS-CSS-START */
/* Service tabs module (加工工艺 / 材料 / 表面处理) — embeddable via _module_service_tabs.html */
.rd-tabs-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 34px; }
.rd-tabs-btn {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    font-family: inherit; font-size: var(--font-size-base); font-weight: 600; line-height: 1;
    color: var(--color-gray-700); background: var(--color-white);
    border: 1px solid var(--color-gray-200); border-radius: var(--radius-full);
    padding: 13px 28px; transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.rd-tabs-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.rd-tabs-btn.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary);
    box-shadow: 0 6px 16px rgba(15,47,92,.22); }
.rd-tabs-panel { display: none; }
.rd-tabs-panel.is-active { display: block; animation: rdTabsIn .28s ease; }
@keyframes rdTabsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rd-tabs-lead { max-width: 760px; margin: 0 auto 30px; text-align: center;
    color: var(--color-gray-600); font-size: var(--font-size-base); line-height: 1.8; }
@media (max-width: 640px) {
    .rd-tabs-nav { gap: 8px; }
    .rd-tabs-btn { padding: 11px 18px; font-size: var(--font-size-sm); }
    .rd-tabs-lead { margin-bottom: 22px; }
}
/* <<< RD-TABS-CSS-END */

/* >>> RD-EMPTY-TAG-CSS-START */
/* 产品卡片 / 相关产品卡片上的标签为无条件渲染（避免 {pboot:if} 因值含撇号/非ASCII 解析失败），
   空值时用 :empty 隐藏 */
.rd-prod-tags em:empty { display: none; }
.product-card-tag:empty { display: none; }
/* <<< RD-EMPTY-TAG-CSS-END */

/* >>> MULTI-SELECT-FILTER-START */
.ms-wrap { position: relative; }
.ms-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; padding-right: 36px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--color-gray-800);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  text-align: left;
  font-family: inherit;
}
.ms-btn:hover { border-color: var(--color-primary); }
.ms-btn:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(15,47,92,0.08); }
.ms-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.ms-arrow {
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform .2s;
}
.ms-wrap.open .ms-arrow { transform: rotate(180deg); }
.ms-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 200;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 0;
}
.ms-options { display: flex; flex-direction: column; }
.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--color-gray-800);
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.ms-option:hover:not(.disabled) { background: var(--color-gray-50); }
.ms-option input[type="checkbox"] {
  width: 16px; height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.ms-option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ms-option.disabled input { cursor: not-allowed; }
.ms-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* <<< MULTI-SELECT-FILTER-END */

/* >>> PF-FILTER-LINKS-START */
.pf-group{display:flex;align-items:flex-start;gap:12px;padding:3px 0;flex:1 1 100%;border-bottom:1px dashed var(--color-gray-100)}
.pf-group:last-of-type{border-bottom:none}
.pf-label{flex:0 0 auto;min-width:56px;font-size:12px;font-weight:600;color:var(--color-gray-500);line-height:22px}
.pf-links{display:flex;flex-wrap:wrap;gap:6px}
.pf-link{display:inline-block;padding:3px 10px;border:1px solid var(--color-gray-200);border-radius:999px;font-size:12px;color:var(--color-gray-600);text-decoration:none;transition:all .2s;line-height:1.25;background:#fff}
.pf-link:hover{border-color:var(--color-primary);color:var(--color-primary)}
.pf-link.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:600}
.pf-link.is-active:hover{color:#fff}
/* <<< PF-FILTER-LINKS-END */

/* >>> FLOAT-WIDGET-EMAIL-FEED-START */
/* ---------- 右下角悬浮：邮件快捷按钮 ---------- */
.email-float {
    position: fixed; bottom: 100px; right: 32px; width: 56px; height: 56px;
    background-color: #c8102e; border-radius: var(--radius-full, 999px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(200,16,46,0.4); z-index: 999;
    transition: all var(--transition-normal, .3s);
}
.email-float:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(200,16,46,0.5); }

/* ---------- 右下角悬浮：仿信息滚动（实时询盘） ---------- */
.float-feed {
    position: fixed; right: 32px; bottom: 172px; width: 288px;
    max-width: calc(100vw - 40px); background: #ffffff;
    border: 1px solid #e2e8f0; border-radius: 14px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.18);
    z-index: 998; overflow: hidden; opacity: 0;
    transform: translateY(12px) scale(.98); pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.float-feed.is-in { opacity: 1; transform: none; pointer-events: auto; }
.float-feed-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    font-size: 12px; font-weight: 700; color: #061426;
    background: #f8fafc; border-bottom: 1px solid #f4f7fa;
}
.float-feed-live {
    width: 8px; height: 8px; border-radius: 50%; background: #0c2a52; flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(200,16,46, .6); animation: feedLive 1.8s infinite;
}
@keyframes feedLive {
    0% { box-shadow: 0 0 0 0 rgba(200,16,46, .6); }
    70% { box-shadow: 0 0 0 8px rgba(200,16,46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200,16,46, 0); }
}
.float-feed-close {
    margin-left: auto; border: 0; background: transparent; color: #94a3b8;
    font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.float-feed-close:hover { color: #061426; }
.float-feed-viewport { height: 138px; overflow: hidden; }
.float-feed-track { will-change: transform; transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.float-feed-item { height: 46px; box-sizing: border-box; padding: 7px 12px; border-bottom: 1px solid #f1f5f9; overflow: hidden; }
.float-feed-item b { display: block; font-size: 12px; font-weight: 700; color: #061426; line-height: 1.35; }
.float-feed-item span { display: block; font-size: 11.5px; color: #64748b; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
    .email-float { bottom: 82px; right: 20px; width: 48px; height: 48px; }
    .email-float svg { width: 24px; height: 24px; }
    /* 移动端不展示实时询盘浮窗 */
    .float-feed { display: none !important; }
}
/* <<< FLOAT-WIDGET-EMAIL-FEED-END */

/* >>> RD-GROUP-HEADER-FIX-START */
/* 材料/表面手风琴分组标题：文字放大、下拉箭头缩小（原 svg 未设尺寸，导致箭头巨大并把文字挤成竖排） */
.rd-group-header > span { font-size: 18px; font-weight: 800; white-space: nowrap; }
.rd-group-header > svg { width: 18px; height: 18px; flex-shrink: 0; color: #64748b; transition: transform .3s ease; }
.rd-group.is-open .rd-group-header > svg { transform: rotate(180deg); }
/* <<< RD-GROUP-HEADER-FIX-END */
/* ==========================================================================
   Full-screen Hero Backgrounds (CSS-only, zero-image, themeable per section)
   - 每个 .hero-XXX 类对应一种栏目主题：深色底层渐变 + 几何 SVG pattern (inline data-URI)
   - 文字白色，叠加暗色蒙层后保持可读
   - 不依赖任何外部图片或字体；纯 CSS + inline-SVG，可被任意 <section class="hero-section hero-XXX"> 直接使用
   ========================================================================== */

/* ---------- 通用深底文字色（被 hero-section 默认值覆盖时回退） ---------- */
.hero-section { color: var(--color-white, #fff); }

/* ---------- SVG 几何 pattern base64 占位集合（直接 inline 进 background-image） ---------- */
/* 在每个主题类内部使用 url("data:image/svg+xml;utf8,...") */

/* ===== 1. 首页 hero 总览：深蓝主调 + 大型几何图案 ===== */
.hero-home {
    background:
        radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.40) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(135deg, #061426 0%, #0f2f5c 50%, #164479 100%);
}
.hero-home::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.07'><circle cx='100' cy='100' r='80'/><circle cx='100' cy='100' r='60'/><circle cx='100' cy='100' r='40'/><line x1='0' y1='100' x2='200' y2='100'/><line x1='100' y1='0' x2='100' y2='200'/><path d='M0 100 A100 100 0 0 1 200 100'/><path d='M100 0 A100 100 0 0 1 100 200'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M40 0H0v40' fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.06'/></svg>");
    background-size: 540px 540px, 40px 40px;
    background-position: center, top left;
    background-repeat: no-repeat, repeat;
    opacity: .85;
}

/* ===== 2. 加工服务：深蓝 + 网格 + 突显黄 ===== */
.hero-svc-milling {
    background:
        radial-gradient(ellipse 60% 50% at 85% 25%, rgba(15,47,92,.40) 0%, transparent 65%),
        radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-svc-milling::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.08'><path d='M0 30h60M30 0v60'/><circle cx='30' cy='30' r='2.5'/><path d='M15 0v60M45 0v60M0 15h60M0 45h60'/></g></svg>");
    background-size: 60px 60px;
    background-position: top left;
    background-repeat: repeat;
}

/* ===== 3. 加工工艺详情：渐变 + 不同几何 =====
   3-axis : 圆点 + 网格
   4-axis : 圆环 + 点阵
   5-axis : 三维结构
   turning : 同心环
   swiss   : 细密网格
   millturn: 交叉对角
*/
.hero-proc-3axis {
    background:
        radial-gradient(ellipse 60% 50% at 75% 30%, rgba(15,47,92,.35) 0%, transparent 65%),
        radial-gradient(circle at 20% 85%, rgba(15,47,92,.25) 0%, transparent 60%),
        linear-gradient(150deg, #061426 0%, #0a2140 50%, #0f2f5c 100%);
}
.hero-proc-3axis::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><g fill='%23ffffff' opacity='0.10'><circle cx='25' cy='25' r='1.4'/></g><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.07'><path d='M0 0h50v50H0z'/></g></svg>");
    background-size: 50px 50px;
}

.hero-proc-4axis {
    background:
        radial-gradient(ellipse 60% 50% at 80% 25%, rgba(15,47,92,.35) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
        linear-gradient(150deg, #061426 0%, #0a2140 50%, #0f2f5c 100%);
}
.hero-proc-4axis::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.10'><circle cx='200' cy='200' r='140'/><circle cx='200' cy='200' r='100'/><circle cx='200' cy='200' r='60'/><circle cx='200' cy='200' r='180' stroke-dasharray='3 6'/></g></svg>");
    background-size: 700px 700px;
    background-position: right -50px top -50px;
    background-repeat: no-repeat;
}

.hero-proc-5axis {
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
        radial-gradient(circle at 10% 90%, rgba(15,47,92,.25) 0%, transparent 60%),
        linear-gradient(155deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-proc-5axis::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.09'><polygon points='50,8 88,28 88,72 50,92 12,72 12,28'/><polygon points='50,22 78,35 78,65 50,78 22,65 22,35'/><line x1='8' y1='40' x2='92' y2='40'/><line x1='8' y1='60' x2='92' y2='60'/></g></svg>");
    background-size: 180px 180px;
    background-position: right top;
    background-repeat: no-repeat;
    opacity: .85;
}

.hero-proc-turn {
    background:
        radial-gradient(circle at 70% 30%, rgba(15,47,92,.30) 0%, transparent 60%),
        radial-gradient(circle at 15% 85%, rgba(15,47,92,.25) 0%, transparent 60%),
        linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-proc-turn::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.7' opacity='0.12'><circle cx='300' cy='300' r='250'/><circle cx='300' cy='300' r='200'/><circle cx='300' cy='300' r='150'/><circle cx='300' cy='300' r='100'/><circle cx='300' cy='300' r='50'/></g></svg>");
    background-size: 760px 760px;
    background-position: right -120px center;
    background-repeat: no-repeat;
}

.hero-proc-swiss {
    background:
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
        radial-gradient(circle at 10% 85%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-proc-swiss::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 15h30M15 0v30'/></g></svg>");
    background-size: 30px 30px;
}

.hero-proc-millturn {
    background:
        radial-gradient(ellipse 60% 50% at 75% 35%, rgba(15,47,92,.35) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
        linear-gradient(135deg, #061426 0%, #0c2a52 50%, #0c2a52 100%);
}
.hero-proc-millturn::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.08'><path d='M0 0l80 80M80 0l-80 80'/><path d='M0 40h80M40 0v80'/></g></svg>");
    background-size: 80px 80px;
    background-position: top left;
    background-repeat: repeat;
}

/* ===== 4. 服务详情 hero（继承 service-milling 子风格） ===== */
.hero-svc-detail {
    background:
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(150deg, #061426 0%, #0f2f5c 50%, #164479 100%);
}
.hero-svc-detail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.08'><path d='M40 0v80M0 40h80'/><circle cx='40' cy='40' r='1.4' fill='%23ffffff' opacity='0.15'/></g></svg>");
    background-size: 80px 80px;
}

/* ===== 5. 材料库 hero：深青绿 + 六边形 + 等距 ===== */
.hero-materials {
    background:
        radial-gradient(ellipse 70% 60% at 70% 30%, rgba(15,47,92,.40) 0%, transparent 65%),
        radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-materials::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><polygon points='28,0 56,17 56,50 28,67 0,50 0,17' fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.09'/></svg>");
    background-size: 80px 140px;
    background-position: right top;
    background-repeat: repeat;
}

/* ===== 6. 材料详情 hero：金属质感渐变 + 流体波纹 ===== */
.hero-material-detail {
    background:
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(148,163,184,.30) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
        linear-gradient(150deg, #061426 0%, #0c2a52 50%, #0c2a52 100%);
}
.hero-material-detail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M0 100 Q360 200 720 100 T1440 100'/><path d='M0 160 Q360 260 720 160 T1440 160'/><path d='M0 220 Q360 320 720 220 T1440 220'/><path d='M0 280 Q360 380 720 280 T1440 280'/></g></svg>");
    background-size: 100% 100%;
}

/* ===== 7. 行业列表 hero：暖色 + 连线（solutions） ===== */
.hero-industries {
    background:
        radial-gradient(ellipse 70% 60% at 65% 30%, rgba(15,47,92,.35) 0%, transparent 65%),
        radial-gradient(circle at 20% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
        linear-gradient(135deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-industries::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M50 100 L200 250 L350 180 L500 320 L650 230 L780 380'/><path d='M50 250 L200 80 L350 280 L500 100 L650 250 L780 130'/><circle cx='50' cy='100' r='2.5' fill='%23ffffff' opacity='0.20'/><circle cx='200' cy='250' r='3.5' fill='%23ffffff' opacity='0.20'/><circle cx='350' cy='180' r='2.5' fill='%23ffffff' opacity='0.20'/><circle cx='500' cy='320' r='3.5' fill='%23ffffff' opacity='0.20'/><circle cx='650' cy='230' r='2.5' fill='%23ffffff' opacity='0.20'/><circle cx='780' cy='380' r='3.5' fill='%23ffffff' opacity='0.20'/></g></svg>");
    background-size: 100% 100%;
}

/* ===== 8. 行业详情 hero：暖色更重 + 同心多边形 ===== */
.hero-industry-detail {
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
        radial-gradient(circle at 12% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(155deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-industry-detail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.11'><polygon points='300,80 480,170 480,400 300,490 120,400 120,170'/><polygon points='300,140 440,210 440,360 300,430 160,360 160,210'/><polygon points='300,200 400,250 400,320 300,370 200,320 200,250'/></g></svg>");
    background-size: 720px 720px;
    background-position: right -120px top -120px;
    background-repeat: no-repeat;
}

/* ===== 9. 表面处理列表 hero：深紫 + 等距点 ===== */
.hero-surface {
    background:
        radial-gradient(ellipse 70% 60% at 70% 30%, rgba(15,47,92,.40) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
        linear-gradient(145deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-surface::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='%23ffffff' opacity='0.16'><circle cx='20' cy='20' r='1.8'/></g></svg>");
    background-size: 40px 40px;
}

/* ===== 10. 表面处理详情 hero：深紫 + 化学环 ===== */
.hero-surface-detail {
    background:
        radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
        radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-surface-detail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.13'><circle cx='300' cy='300' r='240'/><circle cx='300' cy='300' r='200' stroke-dasharray='4 8'/><circle cx='300' cy='300' r='160'/><circle cx='300' cy='300' r='120' stroke-dasharray='2 6'/><circle cx='300' cy='300' r='80'/></g></svg>");
    background-size: 760px 760px;
    background-position: left -120px center;
    background-repeat: no-repeat;
}

/* ===== 11. 产品 hero（产品中心/列表/详情共 3 类） ===== */
.hero-product {
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-product::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 0l70 70M70 0l-70 70'/></g></svg>");
    background-size: 70px 70px;
    background-position: top right;
    background-repeat: repeat;
}
.hero-products-list {
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-products-list::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.09'><path d='M0 23h46M23 0v46'/><rect x='20' y='20' width='6' height='6' fill='%23ffffff' opacity='0.16'/></g></svg>");
    background-size: 46px 46px;
}

/* ===== 12. 案例库 hero ===== */
.hero-case {
    background:
        radial-gradient(ellipse 70% 60% at 70% 30%, rgba(15,47,92,.28) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(135deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-case::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.08'><rect x='0.5' y='0.5' width='55' height='55'/><circle cx='28' cy='28' r='1.5' fill='%23ffffff' opacity='0.12'/></g></svg>");
    background-size: 56px 56px;
}

/* ===== 13. 资讯类（blog/news/newslist/video）==== */
.hero-blog {
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0c2a52 50%, #0c2a52 100%);
}
.hero-blog::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 30h60M30 0v60'/><circle cx='30' cy='30' r='2' fill='%23ffffff' opacity='0.14'/></g></svg>");
    background-size: 60px 60px;
}

/* ===== 14. FAQ ===== */
.hero-faq {
    background:
        radial-gradient(ellipse 60% 50% at 75% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(145deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-faq::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M20 20h40v40h-40z'/><path d='M30 30h20v20h-20z'/><path d='M0 40h80M40 0v80'/></g></svg>");
    background-size: 80px 80px;
}

/* ===== 15. 设计指南 / 报告 guides ===== */
.hero-guides {
    background:
        radial-gradient(ellipse 70% 60% at 65% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(135deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-guides::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M0 0h100M0 20h100M0 40h100M0 60h100M0 80h100'/><path d='M0 100V0'/></g></svg>");
    background-size: 100px 100px;
}

/* ===== 16. 关于 / 工厂环境 / ISO / 生产 ===== */
.hero-about, .hero-factory, .hero-iso, .hero-production {
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.28) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(140deg, #1a1812 0%, #2c2920 50%, #4a4133 100%);
}
.hero-about::before, .hero-factory::before, .hero-iso::before, .hero-production::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 0l70 70M70 0l-70 70'/></g></svg>");
    background-size: 70px 70px;
}
.hero-iso {
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-factory {
    background:
        radial-gradient(ellipse 70% 60% at 70% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(140deg, #0a2140 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-production {
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.28) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}

/* ===== 17. 联系 / 留言 / 报价 共用：深蓝 + 重型几何 ===== */
.hero-contact, .hero-message, .hero-quote {
    background:
        radial-gradient(ellipse 70% 60% at 70% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.hero-contact::before, .hero-message::before, .hero-quote::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M0 0v400M180 0v400M360 0v400M540 0v400M720 0v400M900 0v400M1080 0v400M1260 0v400M1440 0v400'/><path d='M0 0h1440M0 90h1440M0 180h1440M0 270h1440M0 360h1440'/></g></svg>");
    background-size: 100% 100%;
}

/* 通用：page-hero-sm（factory-environment.html 等） 也升级 */
.page-hero {
    position: relative;
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.28) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0f2f5c 50%, #164479 100%);
    overflow: hidden;
    padding: 100px 0 80px;
    color: #fff;
}
.page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M0 30h60M30 0v60'/><circle cx='30' cy='30' r='1.5' fill='%23ffffff' opacity='0.14'/></g></svg>");
    background-size: 60px 60px;
}
.page-hero-title { color: #fff; font-size: clamp(2rem,4.3vw,3.2rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; }
.page-hero-subtitle { color: rgba(255,255,255,.78); font-size: 17px; max-width: 720px; line-height: 1.7; }

/* 备选 safe fallback：section 没有具体 hero-XXX 类时不会破坏原 hero-section 渐变 */

/* 响应式：移动端降低额外几何感 */
@media (max-width:768px){}

/* ==========================================================================
   Override：以下模板内嵌了 ind-hero / mat-detail-hero / st-detail-hero /
   cl-hero / page-hero 的样式表（更高优先级），用更高 specificity 的双类选择器
   保证 hero-XXX 主题生效
   ========================================================================== */
.ind-hero.hero-industries,
.ind-hero.hero-industries::before,
.ind-hero.hero-industries::after { background: none; }
.ind-hero.hero-industries {
    background:
        radial-gradient(ellipse 70% 60% at 65% 30%, rgba(15,47,92,.35) 0%, transparent 65%),
        radial-gradient(circle at 20% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
        linear-gradient(135deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.ind-hero.hero-industries::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M50 100 L200 250 L350 180 L500 320 L650 230 L780 380'/><path d='M50 250 L200 80 L350 280 L500 100 L650 250 L780 130'/><circle cx='50' cy='100' r='2.5' fill='%23ffffff' opacity='0.20'/><circle cx='200' cy='250' r='3.5' fill='%23ffffff' opacity='0.20'/><circle cx='350' cy='180' r='2.5' fill='%23ffffff' opacity='0.20'/><circle cx='500' cy='320' r='3.5' fill='%23ffffff' opacity='0.20'/><circle cx='650' cy='230' r='2.5' fill='%23ffffff' opacity='0.20'/><circle cx='780' cy='380' r='3.5' fill='%23ffffff' opacity='0.20'/></g></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.ind-hero.hero-industries::after { content: none; }

.ind-hero.hero-industry-detail,
.ind-hero.hero-industry-detail::before,
.ind-hero.hero-industry-detail::after { background: none; }
.ind-hero.hero-industry-detail {
    background:
        radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
        radial-gradient(circle at 12% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(155deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.ind-hero.hero-industry-detail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.11'><polygon points='300,80 480,170 480,400 300,490 120,400 120,170'/><polygon points='300,140 440,210 440,360 300,430 160,360 160,210'/><polygon points='300,200 400,250 400,320 300,370 200,320 200,250'/></g></svg>");
    background-size: 720px 720px;
    background-position: right -120px top -120px;
    background-repeat: no-repeat;
}
.ind-hero.hero-industry-detail::after { content: none; }

/* mat-detail-hero */
.mat-detail-hero.hero-material-detail,
.mat-detail-hero.hero-material-detail::before { background: none; }
.mat-detail-hero.hero-material-detail {
    background:
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(148,163,184,.30) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
        linear-gradient(150deg, #061426 0%, #0c2a52 50%, #0c2a52 100%);
}
.mat-detail-hero.hero-material-detail::before {
    content: ''; position: absolute; top: 0; right: -200px; width: 600px; height: 600px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(148,163,184,.30) 0%, transparent 65%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M0 100 Q360 200 720 100 T1440 100'/><path d='M0 160 Q360 260 720 160 T1440 160'/><path d='M0 220 Q360 320 720 220 T1440 220'/><path d='M0 280 Q360 380 720 280 T1440 280'/></g></svg>") repeat-x;
    background-size: 100% 100%, 100% 400px;
    background-position: center, center top;
    background-repeat: no-repeat, repeat;
    opacity: .9;
}

/* st-detail-hero */
.st-detail-hero.hero-surface-detail,
.st-detail-hero.hero-surface-detail::before { background: none; }
.st-detail-hero.hero-surface-detail {
    background:
        radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
        radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
        linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.st-detail-hero.hero-surface-detail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.13'><circle cx='300' cy='300' r='240'/><circle cx='300' cy='300' r='200' stroke-dasharray='4 8'/><circle cx='300' cy='300' r='160'/><circle cx='300' cy='300' r='120' stroke-dasharray='2 6'/><circle cx='300' cy='300' r='80'/></g></svg>");
    background-size: 760px 760px;
    background-position: left -120px center;
    background-repeat: no-repeat;
    border-radius: 0; width: auto; height: auto; top: auto; right: auto;
}

/* cl-hero */
.cl-hero.hero-case,
.cl-hero.hero-case::before,
.cl-hero.hero-case::after { background: none; }
.cl-hero.hero-case {
    background:
        radial-gradient(ellipse 70% 60% at 70% 30%, rgba(15,47,92,.28) 0%, transparent 65%),
        radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
        linear-gradient(135deg, #061426 0%, #0a2140 50%, #0c2a52 100%);
}
.cl-hero.hero-case::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.08'><rect x='0.5' y='0.5' width='55' height='55'/><circle cx='28' cy='28' r='1.5' fill='%23ffffff' opacity='0.12'/></g></svg>");
    background-size: 56px 56px;
}
.cl-hero.hero-case::after { content: none; }

/* page-hero */
.page-hero.page-hero-sm { color: #fff; }
.page-hero.page-hero-sm::before,
.page-hero.page-hero-sm { /* 保持原 page-hero 样式（已在文件前面定义）*/ }

/* ==========================================================================
   Per-sort 区分背景（service-detail.html 6 种工艺 + material-detail 11 种材料 +
   industry-detail 6 种行业 + surface-treatment-detail 12 种处理）。
   用 [data-scode="38"], [data-scode="1038"], [data-scode="2038"], [data-scode="3038"], [data-scode="4038"], [data-scode="5038"], [data-scode="6038"], [data-scode="7038"], [data-scode="8038"], [data-scode="9038"], [data-scode="10038"], [data-scode="11038"], [data-scode="12038"], [data-scode="13038"] 属性选择器，写在内部样式表最高优先级之后。
   ========================================================================== */

/* 含 data-scode 表示这是详情页 hero（在深色背景上）→ 强制文本白色 */
.rd-phero[data-scode] { color: #fff; }

/* 详情页 hero 元素本身需要定位上下文，以便下面的 ::before 纹理（position:absolute; inset:0）被限制在 hero 内部，
   否则绝对定位的 ::before 会以视口为基准铺满屏幕，与头部/公告条重叠。
   （.rd-phero 已在其专属规则中设置，这里补齐 ind / mat / st 三类） */
.ind-hero[data-scode], .mat-detail-hero[data-scode], .st-detail-hero[data-scode] { position: relative; overflow: hidden; }
.rd-phero[data-scode] h1,
.rd-phero[data-scode] .rd-lead,
.rd-phero[data-scode] p,
.rd-phero[data-scode] .rd-rating,
.rd-phero[data-scode] .rd-rating b,
.rd-phero[data-scode] .rd-rating .rd-stars { color: #fff !important; }
.rd-phero[data-scode] .rd-lead { color: rgba(255,255,255,.78) !important; }
.mat-detail-hero[data-scode] h1 { color: #fff !important; }
.mat-detail-hero[data-scode] p  { color: rgba(255,255,255,.78) !important; }
.st-detail-hero[data-scode] h1 { color: #fff !important; }
.st-detail-hero[data-scode] p  { color: rgba(255,255,255,.78) !important; }
.ind-hero[data-scode] h1 { color: #fff !important; }
.ind-hero[data-scode] p  { color: rgba(255,255,255,.78) !important; }

/* ---------- 加工工艺（service-detail.html，scode 38-43） ---------- */
.rd-phero[data-scode="38"], .rd-phero[data-scode="1038"], .rd-phero[data-scode="2038"], .rd-phero[data-scode="3038"], .rd-phero[data-scode="4038"], .rd-phero[data-scode="5038"], .rd-phero[data-scode="6038"], .rd-phero[data-scode="7038"], .rd-phero[data-scode="8038"], .rd-phero[data-scode="9038"], .rd-phero[data-scode="10038"], .rd-phero[data-scode="11038"], .rd-phero[data-scode="12038"], .rd-phero[data-scode="13038"] { background:
    radial-gradient(ellipse 60% 50% at 75% 30%, rgba(15,47,92,.35) 0%, transparent 65%),
    radial-gradient(circle at 20% 85%, rgba(15,47,92,.25) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0f2f5c 100%); }
.rd-phero[data-scode="38"], .rd-phero[data-scode="1038"], .rd-phero[data-scode="2038"], .rd-phero[data-scode="3038"], .rd-phero[data-scode="4038"], .rd-phero[data-scode="5038"], .rd-phero[data-scode="6038"], .rd-phero[data-scode="7038"], .rd-phero[data-scode="8038"], .rd-phero[data-scode="9038"], .rd-phero[data-scode="10038"], .rd-phero[data-scode="11038"], .rd-phero[data-scode="12038"], .rd-phero[data-scode="13038"] .rd-phero-media::before { content: none; }

.rd-phero[data-scode="39"], .rd-phero[data-scode="1039"], .rd-phero[data-scode="2039"], .rd-phero[data-scode="3039"], .rd-phero[data-scode="4039"], .rd-phero[data-scode="5039"], .rd-phero[data-scode="6039"], .rd-phero[data-scode="7039"], .rd-phero[data-scode="8039"], .rd-phero[data-scode="9039"], .rd-phero[data-scode="10039"], .rd-phero[data-scode="11039"], .rd-phero[data-scode="12039"], .rd-phero[data-scode="13039"] { background:
    radial-gradient(ellipse 60% 50% at 80% 25%, rgba(15,47,92,.35) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0f2f5c 100%); }

.rd-phero[data-scode="40"], .rd-phero[data-scode="1040"], .rd-phero[data-scode="2040"], .rd-phero[data-scode="3040"], .rd-phero[data-scode="4040"], .rd-phero[data-scode="5040"], .rd-phero[data-scode="6040"], .rd-phero[data-scode="7040"], .rd-phero[data-scode="8040"], .rd-phero[data-scode="9040"], .rd-phero[data-scode="10040"], .rd-phero[data-scode="11040"], .rd-phero[data-scode="12040"], .rd-phero[data-scode="13040"] { background:
    radial-gradient(ellipse 70% 60% at 75% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.25) 0%, transparent 60%),
    linear-gradient(155deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }

.rd-phero[data-scode="41"], .rd-phero[data-scode="1041"], .rd-phero[data-scode="2041"], .rd-phero[data-scode="3041"], .rd-phero[data-scode="4041"], .rd-phero[data-scode="5041"], .rd-phero[data-scode="6041"], .rd-phero[data-scode="7041"], .rd-phero[data-scode="8041"], .rd-phero[data-scode="9041"], .rd-phero[data-scode="10041"], .rd-phero[data-scode="11041"], .rd-phero[data-scode="12041"], .rd-phero[data-scode="13041"] { background:
    radial-gradient(circle at 70% 30%, rgba(15,47,92,.30) 0%, transparent 60%),
    radial-gradient(circle at 15% 85%, rgba(15,47,92,.25) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }

.rd-phero[data-scode="42"], .rd-phero[data-scode="1042"], .rd-phero[data-scode="2042"], .rd-phero[data-scode="3042"], .rd-phero[data-scode="4042"], .rd-phero[data-scode="5042"], .rd-phero[data-scode="6042"], .rd-phero[data-scode="7042"], .rd-phero[data-scode="8042"], .rd-phero[data-scode="9042"], .rd-phero[data-scode="10042"], .rd-phero[data-scode="11042"], .rd-phero[data-scode="12042"], .rd-phero[data-scode="13042"] { background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 10% 85%, rgba(15,47,92,.18) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }

.rd-phero[data-scode="43"], .rd-phero[data-scode="1043"], .rd-phero[data-scode="2043"], .rd-phero[data-scode="3043"], .rd-phero[data-scode="4043"], .rd-phero[data-scode="5043"], .rd-phero[data-scode="6043"], .rd-phero[data-scode="7043"], .rd-phero[data-scode="8043"], .rd-phero[data-scode="9043"], .rd-phero[data-scode="10043"], .rd-phero[data-scode="11043"], .rd-phero[data-scode="12043"], .rd-phero[data-scode="13043"] { background:
    radial-gradient(ellipse 60% 50% at 75% 35%, rgba(15,47,92,.35) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(135deg, #061426 0%, #0c2a52 50%, #0c2a52 100%); }

/* 给 service-detail hero 添加自定义 ::before SVG 纹理（覆盖 protolabs-style.css 中的 .rd-phero） */
.rd-phero[data-scode="38"], .rd-phero[data-scode="1038"], .rd-phero[data-scode="2038"], .rd-phero[data-scode="3038"], .rd-phero[data-scode="4038"], .rd-phero[data-scode="5038"], .rd-phero[data-scode="6038"], .rd-phero[data-scode="7038"], .rd-phero[data-scode="8038"], .rd-phero[data-scode="9038"], .rd-phero[data-scode="10038"], .rd-phero[data-scode="11038"], .rd-phero[data-scode="12038"], .rd-phero[data-scode="13038"] { position: relative; overflow: hidden; }
.rd-phero[data-scode="38"]::before, .rd-phero[data-scode="1038"]::before, .rd-phero[data-scode="2038"]::before, .rd-phero[data-scode="3038"]::before, .rd-phero[data-scode="4038"]::before, .rd-phero[data-scode="5038"]::before, .rd-phero[data-scode="6038"]::before, .rd-phero[data-scode="7038"]::before, .rd-phero[data-scode="8038"]::before, .rd-phero[data-scode="9038"]::before, .rd-phero[data-scode="10038"]::before, .rd-phero[data-scode="11038"]::before, .rd-phero[data-scode="12038"]::before, .rd-phero[data-scode="13038"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><g fill='%23ffffff' opacity='0.10'><circle cx='25' cy='25' r='1.4'/></g><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.07'><path d='M0 0h50v50H0z'/></g></svg>");
    background-size: 50px 50px; }
.rd-phero[data-scode="39"]::before, .rd-phero[data-scode="1039"]::before, .rd-phero[data-scode="2039"]::before, .rd-phero[data-scode="3039"]::before, .rd-phero[data-scode="4039"]::before, .rd-phero[data-scode="5039"]::before, .rd-phero[data-scode="6039"]::before, .rd-phero[data-scode="7039"]::before, .rd-phero[data-scode="8039"]::before, .rd-phero[data-scode="9039"]::before, .rd-phero[data-scode="10039"]::before, .rd-phero[data-scode="11039"]::before, .rd-phero[data-scode="12039"]::before, .rd-phero[data-scode="13039"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.10'><circle cx='200' cy='200' r='140'/><circle cx='200' cy='200' r='100'/><circle cx='200' cy='200' r='60'/><circle cx='200' cy='200' r='180' stroke-dasharray='3 6'/></g></svg>");
    background-size: 700px 700px; background-position: right -50px top -50px; background-repeat: no-repeat; }
.rd-phero[data-scode="40"]::before, .rd-phero[data-scode="1040"]::before, .rd-phero[data-scode="2040"]::before, .rd-phero[data-scode="3040"]::before, .rd-phero[data-scode="4040"]::before, .rd-phero[data-scode="5040"]::before, .rd-phero[data-scode="6040"]::before, .rd-phero[data-scode="7040"]::before, .rd-phero[data-scode="8040"]::before, .rd-phero[data-scode="9040"]::before, .rd-phero[data-scode="10040"]::before, .rd-phero[data-scode="11040"]::before, .rd-phero[data-scode="12040"]::before, .rd-phero[data-scode="13040"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.09'><polygon points='50,8 88,28 88,72 50,92 12,72 12,28'/><polygon points='50,22 78,35 78,65 50,78 22,65 22,35'/></g></svg>");
    background-size: 180px 180px; background-position: right top; background-repeat: no-repeat; }
.rd-phero[data-scode="41"]::before, .rd-phero[data-scode="1041"]::before, .rd-phero[data-scode="2041"]::before, .rd-phero[data-scode="3041"]::before, .rd-phero[data-scode="4041"]::before, .rd-phero[data-scode="5041"]::before, .rd-phero[data-scode="6041"]::before, .rd-phero[data-scode="7041"]::before, .rd-phero[data-scode="8041"]::before, .rd-phero[data-scode="9041"]::before, .rd-phero[data-scode="10041"]::before, .rd-phero[data-scode="11041"]::before, .rd-phero[data-scode="12041"]::before, .rd-phero[data-scode="13041"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.7' opacity='0.12'><circle cx='300' cy='300' r='250'/><circle cx='300' cy='300' r='200'/><circle cx='300' cy='300' r='150'/><circle cx='300' cy='300' r='100'/><circle cx='300' cy='300' r='50'/></g></svg>");
    background-size: 760px 760px; background-position: right -120px center; background-repeat: no-repeat; }
.rd-phero[data-scode="42"]::before, .rd-phero[data-scode="1042"]::before, .rd-phero[data-scode="2042"]::before, .rd-phero[data-scode="3042"]::before, .rd-phero[data-scode="4042"]::before, .rd-phero[data-scode="5042"]::before, .rd-phero[data-scode="6042"]::before, .rd-phero[data-scode="7042"]::before, .rd-phero[data-scode="8042"]::before, .rd-phero[data-scode="9042"]::before, .rd-phero[data-scode="10042"]::before, .rd-phero[data-scode="11042"]::before, .rd-phero[data-scode="12042"]::before, .rd-phero[data-scode="13042"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 15h30M15 0v30'/></g></svg>");
    background-size: 30px 30px; }
.rd-phero[data-scode="43"]::before, .rd-phero[data-scode="1043"]::before, .rd-phero[data-scode="2043"]::before, .rd-phero[data-scode="3043"]::before, .rd-phero[data-scode="4043"]::before, .rd-phero[data-scode="5043"]::before, .rd-phero[data-scode="6043"]::before, .rd-phero[data-scode="7043"]::before, .rd-phero[data-scode="8043"]::before, .rd-phero[data-scode="9043"]::before, .rd-phero[data-scode="10043"]::before, .rd-phero[data-scode="11043"]::before, .rd-phero[data-scode="12043"]::before, .rd-phero[data-scode="13043"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.08'><path d='M0 0l80 80M80 0l-80 80'/><path d='M0 40h80M40 0v80'/></g></svg>");
    background-size: 80px 80px; background-position: top left; background-repeat: repeat; }

/* ---------- 材料（material-detail.html，scode 18-21, 45-50） ---------- */
/* 金属：钛/铝/不锈钢/碳钢/铜 — 深青/钢色 */
/* 塑料：ABS/PC/POM/PEEK/PA — 暖色 / 紫色 / 橙色分主题 */
.mat-detail-hero[data-scode="18"], .mat-detail-hero[data-scode="1018"], .mat-detail-hero[data-scode="2018"], .mat-detail-hero[data-scode="3018"], .mat-detail-hero[data-scode="4018"], .mat-detail-hero[data-scode="5018"], .mat-detail-hero[data-scode="6018"], .mat-detail-hero[data-scode="7018"], .mat-detail-hero[data-scode="8018"], .mat-detail-hero[data-scode="9018"], .mat-detail-hero[data-scode="10018"], .mat-detail-hero[data-scode="11018"], .mat-detail-hero[data-scode="12018"], .mat-detail-hero[data-scode="13018"] { background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(168,162,158,.25) 0%, transparent 60%),
    linear-gradient(150deg, #0a2140 0%, #0c2a52 50%, #0c2a52 100%); }
.mat-detail-hero[data-scode="18"]::before, .mat-detail-hero[data-scode="1018"]::before, .mat-detail-hero[data-scode="2018"]::before, .mat-detail-hero[data-scode="3018"]::before, .mat-detail-hero[data-scode="4018"]::before, .mat-detail-hero[data-scode="5018"]::before, .mat-detail-hero[data-scode="6018"]::before, .mat-detail-hero[data-scode="7018"]::before, .mat-detail-hero[data-scode="8018"]::before, .mat-detail-hero[data-scode="9018"]::before, .mat-detail-hero[data-scode="10018"]::before, .mat-detail-hero[data-scode="11018"]::before, .mat-detail-hero[data-scode="12018"]::before, .mat-detail-hero[data-scode="13018"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M0 100 Q360 200 720 100 T1440 100'/><path d='M0 160 Q360 260 720 160 T1440 160'/><path d='M0 220 Q360 320 720 220 T1440 220'/><path d='M0 280 Q360 380 720 280 T1440 280'/></g></svg>") !important;
    background-size: 100% 100% !important; }

.mat-detail-hero[data-scode="19"], .mat-detail-hero[data-scode="1019"], .mat-detail-hero[data-scode="2019"], .mat-detail-hero[data-scode="3019"], .mat-detail-hero[data-scode="4019"], .mat-detail-hero[data-scode="5019"], .mat-detail-hero[data-scode="6019"], .mat-detail-hero[data-scode="7019"], .mat-detail-hero[data-scode="8019"], .mat-detail-hero[data-scode="9019"], .mat-detail-hero[data-scode="10019"], .mat-detail-hero[data-scode="11019"], .mat-detail-hero[data-scode="12019"], .mat-detail-hero[data-scode="13019"] { background: /* 不锈钢 */
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(203,213,225,.30) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #1f2937 50%, #334155 100%); }
.mat-detail-hero[data-scode="19"]::before, .mat-detail-hero[data-scode="1019"]::before, .mat-detail-hero[data-scode="2019"]::before, .mat-detail-hero[data-scode="3019"]::before, .mat-detail-hero[data-scode="4019"]::before, .mat-detail-hero[data-scode="5019"]::before, .mat-detail-hero[data-scode="6019"]::before, .mat-detail-hero[data-scode="7019"]::before, .mat-detail-hero[data-scode="8019"]::before, .mat-detail-hero[data-scode="9019"]::before, .mat-detail-hero[data-scode="10019"]::before, .mat-detail-hero[data-scode="11019"]::before, .mat-detail-hero[data-scode="12019"]::before, .mat-detail-hero[data-scode="13019"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 20h40M20 0v40'/><circle cx='20' cy='20' r='1' fill='%23ffffff' opacity='0.18'/></g></svg>") !important;
    background-size: 40px 40px !important; }

.mat-detail-hero[data-scode="20"], .mat-detail-hero[data-scode="1020"], .mat-detail-hero[data-scode="2020"], .mat-detail-hero[data-scode="3020"], .mat-detail-hero[data-scode="4020"], .mat-detail-hero[data-scode="5020"], .mat-detail-hero[data-scode="6020"], .mat-detail-hero[data-scode="7020"], .mat-detail-hero[data-scode="8020"], .mat-detail-hero[data-scode="9020"], .mat-detail-hero[data-scode="10020"], .mat-detail-hero[data-scode="11020"], .mat-detail-hero[data-scode="12020"], .mat-detail-hero[data-scode="13020"] { background: /* 钛合金 */
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(248,250,252,.28) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(148,163,184,.25) 0%, transparent 60%),
    linear-gradient(150deg, #10131a 0%, #1c1f2e 50%, #2d3142 100%); }
.mat-detail-hero[data-scode="20"]::before, .mat-detail-hero[data-scode="1020"]::before, .mat-detail-hero[data-scode="2020"]::before, .mat-detail-hero[data-scode="3020"]::before, .mat-detail-hero[data-scode="4020"]::before, .mat-detail-hero[data-scode="5020"]::before, .mat-detail-hero[data-scode="6020"]::before, .mat-detail-hero[data-scode="7020"]::before, .mat-detail-hero[data-scode="8020"]::before, .mat-detail-hero[data-scode="9020"]::before, .mat-detail-hero[data-scode="10020"]::before, .mat-detail-hero[data-scode="11020"]::before, .mat-detail-hero[data-scode="12020"]::before, .mat-detail-hero[data-scode="13020"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.10'><polygon points='300,80 480,170 480,400 300,490 120,400 120,170'/><polygon points='300,140 440,210 440,360 300,430 160,360 160,210'/></g></svg>") !important;
    background-size: 720px 720px !important; background-position: right -120px top -120px !important; background-repeat: no-repeat !important; }

.mat-detail-hero[data-scode="21"], .mat-detail-hero[data-scode="1021"], .mat-detail-hero[data-scode="2021"], .mat-detail-hero[data-scode="3021"], .mat-detail-hero[data-scode="4021"], .mat-detail-hero[data-scode="5021"], .mat-detail-hero[data-scode="6021"], .mat-detail-hero[data-scode="7021"], .mat-detail-hero[data-scode="8021"], .mat-detail-hero[data-scode="9021"], .mat-detail-hero[data-scode="10021"], .mat-detail-hero[data-scode="11021"], .mat-detail-hero[data-scode="12021"], .mat-detail-hero[data-scode="13021"] { background: /* 碳钢 */
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(180,180,180,.30) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.18) 0%, transparent 60%),
    linear-gradient(150deg, #0a0a0a 0%, #1f1f1f 50%, #3a3a3a 100%); }
.mat-detail-hero[data-scode="21"]::before, .mat-detail-hero[data-scode="1021"]::before, .mat-detail-hero[data-scode="2021"]::before, .mat-detail-hero[data-scode="3021"]::before, .mat-detail-hero[data-scode="4021"]::before, .mat-detail-hero[data-scode="5021"]::before, .mat-detail-hero[data-scode="6021"]::before, .mat-detail-hero[data-scode="7021"]::before, .mat-detail-hero[data-scode="8021"]::before, .mat-detail-hero[data-scode="9021"]::before, .mat-detail-hero[data-scode="10021"]::before, .mat-detail-hero[data-scode="11021"]::before, .mat-detail-hero[data-scode="12021"]::before, .mat-detail-hero[data-scode="13021"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 23h46M23 0v46'/></g></svg>") !important;
    background-size: 46px 46px !important; }

.mat-detail-hero[data-scode="45"], .mat-detail-hero[data-scode="1045"], .mat-detail-hero[data-scode="2045"], .mat-detail-hero[data-scode="3045"], .mat-detail-hero[data-scode="4045"], .mat-detail-hero[data-scode="5045"], .mat-detail-hero[data-scode="6045"], .mat-detail-hero[data-scode="7045"], .mat-detail-hero[data-scode="8045"], .mat-detail-hero[data-scode="9045"], .mat-detail-hero[data-scode="10045"], .mat-detail-hero[data-scode="11045"], .mat-detail-hero[data-scode="12045"], .mat-detail-hero[data-scode="13045"] { background: /* 铜合金 */
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.25) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.mat-detail-hero[data-scode="45"]::before, .mat-detail-hero[data-scode="1045"]::before, .mat-detail-hero[data-scode="2045"]::before, .mat-detail-hero[data-scode="3045"]::before, .mat-detail-hero[data-scode="4045"]::before, .mat-detail-hero[data-scode="5045"]::before, .mat-detail-hero[data-scode="6045"]::before, .mat-detail-hero[data-scode="7045"]::before, .mat-detail-hero[data-scode="8045"]::before, .mat-detail-hero[data-scode="9045"]::before, .mat-detail-hero[data-scode="10045"]::before, .mat-detail-hero[data-scode="11045"]::before, .mat-detail-hero[data-scode="12045"]::before, .mat-detail-hero[data-scode="13045"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><circle cx='23' cy='23' r='1.5' fill='%23ffffff' opacity='0.18'/></g></svg>") !important;
    background-size: 46px 46px !important; }

/* 塑料类：偏暖紫+橙 */
.mat-detail-hero[data-scode="46"], .mat-detail-hero[data-scode="1046"], .mat-detail-hero[data-scode="2046"], .mat-detail-hero[data-scode="3046"], .mat-detail-hero[data-scode="4046"], .mat-detail-hero[data-scode="5046"], .mat-detail-hero[data-scode="6046"], .mat-detail-hero[data-scode="7046"], .mat-detail-hero[data-scode="8046"], .mat-detail-hero[data-scode="9046"], .mat-detail-hero[data-scode="10046"], .mat-detail-hero[data-scode="11046"], .mat-detail-hero[data-scode="12046"], .mat-detail-hero[data-scode="13046"] { background: /* ABS */
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.mat-detail-hero[data-scode="46"]::before, .mat-detail-hero[data-scode="1046"]::before, .mat-detail-hero[data-scode="2046"]::before, .mat-detail-hero[data-scode="3046"]::before, .mat-detail-hero[data-scode="4046"]::before, .mat-detail-hero[data-scode="5046"]::before, .mat-detail-hero[data-scode="6046"]::before, .mat-detail-hero[data-scode="7046"]::before, .mat-detail-hero[data-scode="8046"]::before, .mat-detail-hero[data-scode="9046"]::before, .mat-detail-hero[data-scode="10046"]::before, .mat-detail-hero[data-scode="11046"]::before, .mat-detail-hero[data-scode="12046"]::before, .mat-detail-hero[data-scode="13046"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><g fill='%23ffffff' opacity='0.10'><circle cx='25' cy='25' r='1.4'/></g></svg>") !important;
    background-size: 50px 50px !important; }

.mat-detail-hero[data-scode="47"], .mat-detail-hero[data-scode="1047"], .mat-detail-hero[data-scode="2047"], .mat-detail-hero[data-scode="3047"], .mat-detail-hero[data-scode="4047"], .mat-detail-hero[data-scode="5047"], .mat-detail-hero[data-scode="6047"], .mat-detail-hero[data-scode="7047"], .mat-detail-hero[data-scode="8047"], .mat-detail-hero[data-scode="9047"], .mat-detail-hero[data-scode="10047"], .mat-detail-hero[data-scode="11047"], .mat-detail-hero[data-scode="12047"], .mat-detail-hero[data-scode="13047"] { background: /* PC */
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.mat-detail-hero[data-scode="47"]::before, .mat-detail-hero[data-scode="1047"]::before, .mat-detail-hero[data-scode="2047"]::before, .mat-detail-hero[data-scode="3047"]::before, .mat-detail-hero[data-scode="4047"]::before, .mat-detail-hero[data-scode="5047"]::before, .mat-detail-hero[data-scode="6047"]::before, .mat-detail-hero[data-scode="7047"]::before, .mat-detail-hero[data-scode="8047"]::before, .mat-detail-hero[data-scode="9047"]::before, .mat-detail-hero[data-scode="10047"]::before, .mat-detail-hero[data-scode="11047"]::before, .mat-detail-hero[data-scode="12047"]::before, .mat-detail-hero[data-scode="13047"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 30h60M30 0v60'/></g></svg>") !important;
    background-size: 60px 60px !important; }

.mat-detail-hero[data-scode="48"], .mat-detail-hero[data-scode="1048"], .mat-detail-hero[data-scode="2048"], .mat-detail-hero[data-scode="3048"], .mat-detail-hero[data-scode="4048"], .mat-detail-hero[data-scode="5048"], .mat-detail-hero[data-scode="6048"], .mat-detail-hero[data-scode="7048"], .mat-detail-hero[data-scode="8048"], .mat-detail-hero[data-scode="9048"], .mat-detail-hero[data-scode="10048"], .mat-detail-hero[data-scode="11048"], .mat-detail-hero[data-scode="12048"], .mat-detail-hero[data-scode="13048"] { background: /* POM */
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.mat-detail-hero[data-scode="48"]::before, .mat-detail-hero[data-scode="1048"]::before, .mat-detail-hero[data-scode="2048"]::before, .mat-detail-hero[data-scode="3048"]::before, .mat-detail-hero[data-scode="4048"]::before, .mat-detail-hero[data-scode="5048"]::before, .mat-detail-hero[data-scode="6048"]::before, .mat-detail-hero[data-scode="7048"]::before, .mat-detail-hero[data-scode="8048"]::before, .mat-detail-hero[data-scode="9048"]::before, .mat-detail-hero[data-scode="10048"]::before, .mat-detail-hero[data-scode="11048"]::before, .mat-detail-hero[data-scode="12048"]::before, .mat-detail-hero[data-scode="13048"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 20h40M20 0v40'/></g></svg>") !important;
    background-size: 40px 40px !important; }

.mat-detail-hero[data-scode="49"], .mat-detail-hero[data-scode="1049"], .mat-detail-hero[data-scode="2049"], .mat-detail-hero[data-scode="3049"], .mat-detail-hero[data-scode="4049"], .mat-detail-hero[data-scode="5049"], .mat-detail-hero[data-scode="6049"], .mat-detail-hero[data-scode="7049"], .mat-detail-hero[data-scode="8049"], .mat-detail-hero[data-scode="9049"], .mat-detail-hero[data-scode="10049"], .mat-detail-hero[data-scode="11049"], .mat-detail-hero[data-scode="12049"], .mat-detail-hero[data-scode="13049"] { background: /* PEEK */
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.mat-detail-hero[data-scode="49"]::before, .mat-detail-hero[data-scode="1049"]::before, .mat-detail-hero[data-scode="2049"]::before, .mat-detail-hero[data-scode="3049"]::before, .mat-detail-hero[data-scode="4049"]::before, .mat-detail-hero[data-scode="5049"]::before, .mat-detail-hero[data-scode="6049"]::before, .mat-detail-hero[data-scode="7049"]::before, .mat-detail-hero[data-scode="8049"]::before, .mat-detail-hero[data-scode="9049"]::before, .mat-detail-hero[data-scode="10049"]::before, .mat-detail-hero[data-scode="11049"]::before, .mat-detail-hero[data-scode="12049"]::before, .mat-detail-hero[data-scode="13049"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.10'><circle cx='300' cy='300' r='240'/><circle cx='300' cy='300' r='200' stroke-dasharray='4 8'/><circle cx='300' cy='300' r='160'/></g></svg>") !important;
    background-size: 700px 700px !important; background-position: left -100px center !important; background-repeat: no-repeat !important; }

.mat-detail-hero[data-scode="50"], .mat-detail-hero[data-scode="1050"], .mat-detail-hero[data-scode="2050"], .mat-detail-hero[data-scode="3050"], .mat-detail-hero[data-scode="4050"], .mat-detail-hero[data-scode="5050"], .mat-detail-hero[data-scode="6050"], .mat-detail-hero[data-scode="7050"], .mat-detail-hero[data-scode="8050"], .mat-detail-hero[data-scode="9050"], .mat-detail-hero[data-scode="10050"], .mat-detail-hero[data-scode="11050"], .mat-detail-hero[data-scode="12050"], .mat-detail-hero[data-scode="13050"] { background: /* 尼龙 */
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 15% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(150deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.mat-detail-hero[data-scode="50"]::before, .mat-detail-hero[data-scode="1050"]::before, .mat-detail-hero[data-scode="2050"]::before, .mat-detail-hero[data-scode="3050"]::before, .mat-detail-hero[data-scode="4050"]::before, .mat-detail-hero[data-scode="5050"]::before, .mat-detail-hero[data-scode="6050"]::before, .mat-detail-hero[data-scode="7050"]::before, .mat-detail-hero[data-scode="8050"]::before, .mat-detail-hero[data-scode="9050"]::before, .mat-detail-hero[data-scode="10050"]::before, .mat-detail-hero[data-scode="11050"]::before, .mat-detail-hero[data-scode="12050"]::before, .mat-detail-hero[data-scode="13050"]::before { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 18h36M18 0v36'/></g></svg>") !important;
    background-size: 36px 36px !important; }

/* ---------- 行业（industry-detail.html，scode 23-28） ---------- */
.ind-hero[data-scode="23"], .ind-hero[data-scode="1023"], .ind-hero[data-scode="2023"], .ind-hero[data-scode="3023"], .ind-hero[data-scode="4023"], .ind-hero[data-scode="5023"], .ind-hero[data-scode="6023"], .ind-hero[data-scode="7023"], .ind-hero[data-scode="8023"], .ind-hero[data-scode="9023"], .ind-hero[data-scode="10023"], .ind-hero[data-scode="11023"], .ind-hero[data-scode="12023"], .ind-hero[data-scode="13023"] { background: /* 医疗 */
    radial-gradient(ellipse 70% 60% at 65% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 20% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(135deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.ind-hero[data-scode="23"]::before, .ind-hero[data-scode="1023"]::before, .ind-hero[data-scode="2023"]::before, .ind-hero[data-scode="3023"]::before, .ind-hero[data-scode="4023"]::before, .ind-hero[data-scode="5023"]::before, .ind-hero[data-scode="6023"]::before, .ind-hero[data-scode="7023"]::before, .ind-hero[data-scode="8023"]::before, .ind-hero[data-scode="9023"]::before, .ind-hero[data-scode="10023"]::before, .ind-hero[data-scode="11023"]::before, .ind-hero[data-scode="12023"]::before, .ind-hero[data-scode="13023"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.12'><path d='M300 80v440M80 300h440M100 100l400 400M100 500l400-400'/></g></svg>");
    background-size: 720px 720px; background-position: right -120px top -120px; background-repeat: no-repeat; }
.ind-hero[data-scode="23"], .ind-hero[data-scode="1023"], .ind-hero[data-scode="2023"], .ind-hero[data-scode="3023"], .ind-hero[data-scode="4023"], .ind-hero[data-scode="5023"], .ind-hero[data-scode="6023"], .ind-hero[data-scode="7023"], .ind-hero[data-scode="8023"], .ind-hero[data-scode="9023"], .ind-hero[data-scode="10023"], .ind-hero[data-scode="11023"], .ind-hero[data-scode="12023"], .ind-hero[data-scode="13023"]::after { content: none; }

.ind-hero[data-scode="24"], .ind-hero[data-scode="1024"], .ind-hero[data-scode="2024"], .ind-hero[data-scode="3024"], .ind-hero[data-scode="4024"], .ind-hero[data-scode="5024"], .ind-hero[data-scode="6024"], .ind-hero[data-scode="7024"], .ind-hero[data-scode="8024"], .ind-hero[data-scode="9024"], .ind-hero[data-scode="10024"], .ind-hero[data-scode="11024"], .ind-hero[data-scode="12024"], .ind-hero[data-scode="13024"] { background: /* 机器人 */
    radial-gradient(ellipse 70% 60% at 65% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 20% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(135deg, #061426 0%, #0a2140 50%, #0f2f5c 100%); }
.ind-hero[data-scode="24"]::before, .ind-hero[data-scode="1024"]::before, .ind-hero[data-scode="2024"]::before, .ind-hero[data-scode="3024"]::before, .ind-hero[data-scode="4024"]::before, .ind-hero[data-scode="5024"]::before, .ind-hero[data-scode="6024"]::before, .ind-hero[data-scode="7024"]::before, .ind-hero[data-scode="8024"]::before, .ind-hero[data-scode="9024"]::before, .ind-hero[data-scode="10024"]::before, .ind-hero[data-scode="11024"]::before, .ind-hero[data-scode="12024"]::before, .ind-hero[data-scode="13024"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><rect x='0.5' y='0.5' width='59' height='59'/><rect x='15' y='15' width='30' height='30'/></g></svg>");
    background-size: 60px 60px; }
.ind-hero[data-scode="24"], .ind-hero[data-scode="1024"], .ind-hero[data-scode="2024"], .ind-hero[data-scode="3024"], .ind-hero[data-scode="4024"], .ind-hero[data-scode="5024"], .ind-hero[data-scode="6024"], .ind-hero[data-scode="7024"], .ind-hero[data-scode="8024"], .ind-hero[data-scode="9024"], .ind-hero[data-scode="10024"], .ind-hero[data-scode="11024"], .ind-hero[data-scode="12024"], .ind-hero[data-scode="13024"]::after { content: none; }

.ind-hero[data-scode="25"], .ind-hero[data-scode="1025"], .ind-hero[data-scode="2025"], .ind-hero[data-scode="3025"], .ind-hero[data-scode="4025"], .ind-hero[data-scode="5025"], .ind-hero[data-scode="6025"], .ind-hero[data-scode="7025"], .ind-hero[data-scode="8025"], .ind-hero[data-scode="9025"], .ind-hero[data-scode="10025"], .ind-hero[data-scode="11025"], .ind-hero[data-scode="12025"], .ind-hero[data-scode="13025"] { background: /* 消费电子 */
    radial-gradient(ellipse 70% 60% at 65% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 20% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(135deg, #061426 0%, #0c2a52 50%, #0f2f5c 100%); }
.ind-hero[data-scode="25"]::before, .ind-hero[data-scode="1025"]::before, .ind-hero[data-scode="2025"]::before, .ind-hero[data-scode="3025"]::before, .ind-hero[data-scode="4025"]::before, .ind-hero[data-scode="5025"]::before, .ind-hero[data-scode="6025"]::before, .ind-hero[data-scode="7025"]::before, .ind-hero[data-scode="8025"]::before, .ind-hero[data-scode="9025"]::before, .ind-hero[data-scode="10025"]::before, .ind-hero[data-scode="11025"]::before, .ind-hero[data-scode="12025"]::before, .ind-hero[data-scode="13025"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='%23ffffff' opacity='0.16'><circle cx='20' cy='20' r='1.8'/></g></svg>");
    background-size: 40px 40px; }
.ind-hero[data-scode="25"], .ind-hero[data-scode="1025"], .ind-hero[data-scode="2025"], .ind-hero[data-scode="3025"], .ind-hero[data-scode="4025"], .ind-hero[data-scode="5025"], .ind-hero[data-scode="6025"], .ind-hero[data-scode="7025"], .ind-hero[data-scode="8025"], .ind-hero[data-scode="9025"], .ind-hero[data-scode="10025"], .ind-hero[data-scode="11025"], .ind-hero[data-scode="12025"], .ind-hero[data-scode="13025"]::after { content: none; }

.ind-hero[data-scode="26"], .ind-hero[data-scode="1026"], .ind-hero[data-scode="2026"], .ind-hero[data-scode="3026"], .ind-hero[data-scode="4026"], .ind-hero[data-scode="5026"], .ind-hero[data-scode="6026"], .ind-hero[data-scode="7026"], .ind-hero[data-scode="8026"], .ind-hero[data-scode="9026"], .ind-hero[data-scode="10026"], .ind-hero[data-scode="11026"], .ind-hero[data-scode="12026"], .ind-hero[data-scode="13026"] { background: /* 汽车 */
    radial-gradient(ellipse 70% 60% at 65% 30%, rgba(15,47,92,.35) 0%, transparent 65%),
    radial-gradient(circle at 20% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(135deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.ind-hero[data-scode="26"]::before, .ind-hero[data-scode="1026"]::before, .ind-hero[data-scode="2026"]::before, .ind-hero[data-scode="3026"]::before, .ind-hero[data-scode="4026"]::before, .ind-hero[data-scode="5026"]::before, .ind-hero[data-scode="6026"]::before, .ind-hero[data-scode="7026"]::before, .ind-hero[data-scode="8026"]::before, .ind-hero[data-scode="9026"]::before, .ind-hero[data-scode="10026"]::before, .ind-hero[data-scode="11026"]::before, .ind-hero[data-scode="12026"]::before, .ind-hero[data-scode="13026"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 0l70 70M70 0l-70 70'/></g></svg>");
    background-size: 70px 70px; }
.ind-hero[data-scode="26"], .ind-hero[data-scode="1026"], .ind-hero[data-scode="2026"], .ind-hero[data-scode="3026"], .ind-hero[data-scode="4026"], .ind-hero[data-scode="5026"], .ind-hero[data-scode="6026"], .ind-hero[data-scode="7026"], .ind-hero[data-scode="8026"], .ind-hero[data-scode="9026"], .ind-hero[data-scode="10026"], .ind-hero[data-scode="11026"], .ind-hero[data-scode="12026"], .ind-hero[data-scode="13026"]::after { content: none; }

.ind-hero[data-scode="27"], .ind-hero[data-scode="1027"], .ind-hero[data-scode="2027"], .ind-hero[data-scode="3027"], .ind-hero[data-scode="4027"], .ind-hero[data-scode="5027"], .ind-hero[data-scode="6027"], .ind-hero[data-scode="7027"], .ind-hero[data-scode="8027"], .ind-hero[data-scode="9027"], .ind-hero[data-scode="10027"], .ind-hero[data-scode="11027"], .ind-hero[data-scode="12027"], .ind-hero[data-scode="13027"] { background: /* 航空航天 */
    radial-gradient(ellipse 70% 60% at 65% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 20% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(135deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.ind-hero[data-scode="27"]::before, .ind-hero[data-scode="1027"]::before, .ind-hero[data-scode="2027"]::before, .ind-hero[data-scode="3027"]::before, .ind-hero[data-scode="4027"]::before, .ind-hero[data-scode="5027"]::before, .ind-hero[data-scode="6027"]::before, .ind-hero[data-scode="7027"]::before, .ind-hero[data-scode="8027"]::before, .ind-hero[data-scode="9027"]::before, .ind-hero[data-scode="10027"]::before, .ind-hero[data-scode="11027"]::before, .ind-hero[data-scode="12027"]::before, .ind-hero[data-scode="13027"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'><path d='M50 100 L200 250 L350 180 L500 320 L650 230 L780 380'/><circle cx='200' cy='250' r='3.5' fill='%23ffffff' opacity='0.20'/><circle cx='500' cy='320' r='3.5' fill='%23ffffff' opacity='0.20'/><circle cx='780' cy='380' r='3.5' fill='%23ffffff' opacity='0.20'/></g></svg>");
    background-size: 100% 100%; }
.ind-hero[data-scode="27"], .ind-hero[data-scode="1027"], .ind-hero[data-scode="2027"], .ind-hero[data-scode="3027"], .ind-hero[data-scode="4027"], .ind-hero[data-scode="5027"], .ind-hero[data-scode="6027"], .ind-hero[data-scode="7027"], .ind-hero[data-scode="8027"], .ind-hero[data-scode="9027"], .ind-hero[data-scode="10027"], .ind-hero[data-scode="11027"], .ind-hero[data-scode="12027"], .ind-hero[data-scode="13027"]::after { content: none; }

.ind-hero[data-scode="28"], .ind-hero[data-scode="1028"], .ind-hero[data-scode="2028"], .ind-hero[data-scode="3028"], .ind-hero[data-scode="4028"], .ind-hero[data-scode="5028"], .ind-hero[data-scode="6028"], .ind-hero[data-scode="7028"], .ind-hero[data-scode="8028"], .ind-hero[data-scode="9028"], .ind-hero[data-scode="10028"], .ind-hero[data-scode="11028"], .ind-hero[data-scode="12028"], .ind-hero[data-scode="13028"] { background: /* 工业设备 */
    radial-gradient(ellipse 70% 60% at 65% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 20% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(135deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.ind-hero[data-scode="28"]::before, .ind-hero[data-scode="1028"]::before, .ind-hero[data-scode="2028"]::before, .ind-hero[data-scode="3028"]::before, .ind-hero[data-scode="4028"]::before, .ind-hero[data-scode="5028"]::before, .ind-hero[data-scode="6028"]::before, .ind-hero[data-scode="7028"]::before, .ind-hero[data-scode="8028"]::before, .ind-hero[data-scode="9028"]::before, .ind-hero[data-scode="10028"]::before, .ind-hero[data-scode="11028"]::before, .ind-hero[data-scode="12028"]::before, .ind-hero[data-scode="13028"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><polygon points='28,0 56,17 56,50 28,67 0,50 0,17' fill='none' stroke='%23ffffff' stroke-width='0.4' opacity='0.10'/></svg>");
    background-size: 80px 140px; background-position: right top; background-repeat: repeat; }
.ind-hero[data-scode="28"], .ind-hero[data-scode="1028"], .ind-hero[data-scode="2028"], .ind-hero[data-scode="3028"], .ind-hero[data-scode="4028"], .ind-hero[data-scode="5028"], .ind-hero[data-scode="6028"], .ind-hero[data-scode="7028"], .ind-hero[data-scode="8028"], .ind-hero[data-scode="9028"], .ind-hero[data-scode="10028"], .ind-hero[data-scode="11028"], .ind-hero[data-scode="12028"], .ind-hero[data-scode="13028"]::after { content: none; }

/* ---------- 表面处理（surface-treatment-detail.html，scode 51-62） ---------- */
/* 阳极氧化→冷色调；镀涂→暖色；抛光→紫；喷砂→深褐 */
.st-detail-hero[data-scode="51"], .st-detail-hero[data-scode="1051"], .st-detail-hero[data-scode="2051"], .st-detail-hero[data-scode="3051"], .st-detail-hero[data-scode="4051"], .st-detail-hero[data-scode="5051"], .st-detail-hero[data-scode="6051"], .st-detail-hero[data-scode="7051"], .st-detail-hero[data-scode="8051"], .st-detail-hero[data-scode="9051"], .st-detail-hero[data-scode="10051"], .st-detail-hero[data-scode="11051"], .st-detail-hero[data-scode="12051"], .st-detail-hero[data-scode="13051"] { background: /* 阳极氧化（II型） */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(140deg, #061426 0%, #0c2a52 50%, #0f2f5c 100%); }
.st-detail-hero[data-scode="51"]::before, .st-detail-hero[data-scode="1051"]::before, .st-detail-hero[data-scode="2051"]::before, .st-detail-hero[data-scode="3051"]::before, .st-detail-hero[data-scode="4051"]::before, .st-detail-hero[data-scode="5051"]::before, .st-detail-hero[data-scode="6051"]::before, .st-detail-hero[data-scode="7051"]::before, .st-detail-hero[data-scode="8051"]::before, .st-detail-hero[data-scode="9051"]::before, .st-detail-hero[data-scode="10051"]::before, .st-detail-hero[data-scode="11051"]::before, .st-detail-hero[data-scode="12051"]::before, .st-detail-hero[data-scode="13051"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.13'><circle cx='300' cy='300' r='240'/><circle cx='300' cy='300' r='200' stroke-dasharray='4 8'/><circle cx='300' cy='300' r='160'/><circle cx='300' cy='300' r='120' stroke-dasharray='2 6'/><circle cx='300' cy='300' r='80'/></g></svg>");
    background-size: 760px 760px; background-position: left -120px center; background-repeat: no-repeat; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

.st-detail-hero[data-scode="52"], .st-detail-hero[data-scode="1052"], .st-detail-hero[data-scode="2052"], .st-detail-hero[data-scode="3052"], .st-detail-hero[data-scode="4052"], .st-detail-hero[data-scode="5052"], .st-detail-hero[data-scode="6052"], .st-detail-hero[data-scode="7052"], .st-detail-hero[data-scode="8052"], .st-detail-hero[data-scode="9052"], .st-detail-hero[data-scode="10052"], .st-detail-hero[data-scode="11052"], .st-detail-hero[data-scode="12052"], .st-detail-hero[data-scode="13052"] { background: /* 阳极氧化（III型） */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.st-detail-hero[data-scode="52"]::before, .st-detail-hero[data-scode="1052"]::before, .st-detail-hero[data-scode="2052"]::before, .st-detail-hero[data-scode="3052"]::before, .st-detail-hero[data-scode="4052"]::before, .st-detail-hero[data-scode="5052"]::before, .st-detail-hero[data-scode="6052"]::before, .st-detail-hero[data-scode="7052"]::before, .st-detail-hero[data-scode="8052"]::before, .st-detail-hero[data-scode="9052"]::before, .st-detail-hero[data-scode="10052"]::before, .st-detail-hero[data-scode="11052"]::before, .st-detail-hero[data-scode="12052"]::before, .st-detail-hero[data-scode="13052"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 15h30M15 0v30'/></g></svg>");
    background-size: 30px 30px; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

.st-detail-hero[data-scode="53"], .st-detail-hero[data-scode="1053"], .st-detail-hero[data-scode="2053"], .st-detail-hero[data-scode="3053"], .st-detail-hero[data-scode="4053"], .st-detail-hero[data-scode="5053"], .st-detail-hero[data-scode="6053"], .st-detail-hero[data-scode="7053"], .st-detail-hero[data-scode="8053"], .st-detail-hero[data-scode="9053"], .st-detail-hero[data-scode="10053"], .st-detail-hero[data-scode="11053"], .st-detail-hero[data-scode="12053"], .st-detail-hero[data-scode="13053"] { background: /* 铬酸盐转化 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.st-detail-hero[data-scode="53"]::before, .st-detail-hero[data-scode="1053"]::before, .st-detail-hero[data-scode="2053"]::before, .st-detail-hero[data-scode="3053"]::before, .st-detail-hero[data-scode="4053"]::before, .st-detail-hero[data-scode="5053"]::before, .st-detail-hero[data-scode="6053"]::before, .st-detail-hero[data-scode="7053"]::before, .st-detail-hero[data-scode="8053"]::before, .st-detail-hero[data-scode="9053"]::before, .st-detail-hero[data-scode="10053"]::before, .st-detail-hero[data-scode="11053"]::before, .st-detail-hero[data-scode="12053"]::before, .st-detail-hero[data-scode="13053"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><circle cx='23' cy='23' r='1.5' fill='%23ffffff' opacity='0.18'/></g></svg>");
    background-size: 46px 46px; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

.st-detail-hero[data-scode="54"], .st-detail-hero[data-scode="1054"], .st-detail-hero[data-scode="2054"], .st-detail-hero[data-scode="3054"], .st-detail-hero[data-scode="4054"], .st-detail-hero[data-scode="5054"], .st-detail-hero[data-scode="6054"], .st-detail-hero[data-scode="7054"], .st-detail-hero[data-scode="8054"], .st-detail-hero[data-scode="9054"], .st-detail-hero[data-scode="10054"], .st-detail-hero[data-scode="11054"], .st-detail-hero[data-scode="12054"], .st-detail-hero[data-scode="13054"] { background: /* 化学镀镍 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }

.st-detail-hero[data-scode="55"], .st-detail-hero[data-scode="1055"], .st-detail-hero[data-scode="2055"], .st-detail-hero[data-scode="3055"], .st-detail-hero[data-scode="4055"], .st-detail-hero[data-scode="5055"], .st-detail-hero[data-scode="6055"], .st-detail-hero[data-scode="7055"], .st-detail-hero[data-scode="8055"], .st-detail-hero[data-scode="9055"], .st-detail-hero[data-scode="10055"], .st-detail-hero[data-scode="11055"], .st-detail-hero[data-scode="12055"], .st-detail-hero[data-scode="13055"] { background: /* 镀锌 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.st-detail-hero[data-scode="55"]::before, .st-detail-hero[data-scode="1055"]::before, .st-detail-hero[data-scode="2055"]::before, .st-detail-hero[data-scode="3055"]::before, .st-detail-hero[data-scode="4055"]::before, .st-detail-hero[data-scode="5055"]::before, .st-detail-hero[data-scode="6055"]::before, .st-detail-hero[data-scode="7055"]::before, .st-detail-hero[data-scode="8055"]::before, .st-detail-hero[data-scode="9055"]::before, .st-detail-hero[data-scode="10055"]::before, .st-detail-hero[data-scode="11055"]::before, .st-detail-hero[data-scode="12055"]::before, .st-detail-hero[data-scode="13055"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.08'><rect x='0.5' y='0.5' width='55' height='55'/><circle cx='28' cy='28' r='1.5' fill='%23ffffff' opacity='0.12'/></g></svg>");
    background-size: 56px 56px; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

.st-detail-hero[data-scode="56"], .st-detail-hero[data-scode="1056"], .st-detail-hero[data-scode="2056"], .st-detail-hero[data-scode="3056"], .st-detail-hero[data-scode="4056"], .st-detail-hero[data-scode="5056"], .st-detail-hero[data-scode="6056"], .st-detail-hero[data-scode="7056"], .st-detail-hero[data-scode="8056"], .st-detail-hero[data-scode="9056"], .st-detail-hero[data-scode="10056"], .st-detail-hero[data-scode="11056"], .st-detail-hero[data-scode="12056"], .st-detail-hero[data-scode="13056"] { background: /* 镀铬 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(203,213,225,.30) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,.18) 0%, transparent 60%),
    linear-gradient(140deg, #061426 0%, #1f2937 50%, #334155 100%); }
.st-detail-hero[data-scode="56"]::before, .st-detail-hero[data-scode="1056"]::before, .st-detail-hero[data-scode="2056"]::before, .st-detail-hero[data-scode="3056"]::before, .st-detail-hero[data-scode="4056"]::before, .st-detail-hero[data-scode="5056"]::before, .st-detail-hero[data-scode="6056"]::before, .st-detail-hero[data-scode="7056"]::before, .st-detail-hero[data-scode="8056"]::before, .st-detail-hero[data-scode="9056"]::before, .st-detail-hero[data-scode="10056"]::before, .st-detail-hero[data-scode="11056"]::before, .st-detail-hero[data-scode="12056"]::before, .st-detail-hero[data-scode="13056"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 20h40M20 0v40'/><circle cx='20' cy='20' r='1' fill='%23ffffff' opacity='0.18'/></g></svg>");
    background-size: 40px 40px; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

.st-detail-hero[data-scode="57"], .st-detail-hero[data-scode="1057"], .st-detail-hero[data-scode="2057"], .st-detail-hero[data-scode="3057"], .st-detail-hero[data-scode="4057"], .st-detail-hero[data-scode="5057"], .st-detail-hero[data-scode="6057"], .st-detail-hero[data-scode="7057"], .st-detail-hero[data-scode="8057"], .st-detail-hero[data-scode="9057"], .st-detail-hero[data-scode="10057"], .st-detail-hero[data-scode="11057"], .st-detail-hero[data-scode="12057"], .st-detail-hero[data-scode="13057"] { background: /* 钝化 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(140deg, #0a2140 0%, #0c2a52 50%, #0c2a52 100%); }
.st-detail-hero[data-scode="57"]::before, .st-detail-hero[data-scode="1057"]::before, .st-detail-hero[data-scode="2057"]::before, .st-detail-hero[data-scode="3057"]::before, .st-detail-hero[data-scode="4057"]::before, .st-detail-hero[data-scode="5057"]::before, .st-detail-hero[data-scode="6057"]::before, .st-detail-hero[data-scode="7057"]::before, .st-detail-hero[data-scode="8057"]::before, .st-detail-hero[data-scode="9057"]::before, .st-detail-hero[data-scode="10057"]::before, .st-detail-hero[data-scode="11057"]::before, .st-detail-hero[data-scode="12057"]::before, .st-detail-hero[data-scode="13057"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.10'><polygon points='300,80 480,170 480,400 300,490 120,400 120,170'/><polygon points='300,140 440,210 440,360 300,430 160,360 160,210'/></g></svg>");
    background-size: 720px 720px; background-position: right -120px top -120px; background-repeat: no-repeat; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

.st-detail-hero[data-scode="58"], .st-detail-hero[data-scode="1058"], .st-detail-hero[data-scode="2058"], .st-detail-hero[data-scode="3058"], .st-detail-hero[data-scode="4058"], .st-detail-hero[data-scode="5058"], .st-detail-hero[data-scode="6058"], .st-detail-hero[data-scode="7058"], .st-detail-hero[data-scode="8058"], .st-detail-hero[data-scode="9058"], .st-detail-hero[data-scode="10058"], .st-detail-hero[data-scode="11058"], .st-detail-hero[data-scode="12058"], .st-detail-hero[data-scode="13058"] { background: /* 粉末喷涂 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.st-detail-hero[data-scode="58"]::before, .st-detail-hero[data-scode="1058"]::before, .st-detail-hero[data-scode="2058"]::before, .st-detail-hero[data-scode="3058"]::before, .st-detail-hero[data-scode="4058"]::before, .st-detail-hero[data-scode="5058"]::before, .st-detail-hero[data-scode="6058"]::before, .st-detail-hero[data-scode="7058"]::before, .st-detail-hero[data-scode="8058"]::before, .st-detail-hero[data-scode="9058"]::before, .st-detail-hero[data-scode="10058"]::before, .st-detail-hero[data-scode="11058"]::before, .st-detail-hero[data-scode="12058"]::before, .st-detail-hero[data-scode="13058"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><g fill='%23ffffff' opacity='0.10'><circle cx='25' cy='25' r='1.4'/></g></svg>");
    background-size: 50px 50px; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

.st-detail-hero[data-scode="59"], .st-detail-hero[data-scode="1059"], .st-detail-hero[data-scode="2059"], .st-detail-hero[data-scode="3059"], .st-detail-hero[data-scode="4059"], .st-detail-hero[data-scode="5059"], .st-detail-hero[data-scode="6059"], .st-detail-hero[data-scode="7059"], .st-detail-hero[data-scode="8059"], .st-detail-hero[data-scode="9059"], .st-detail-hero[data-scode="10059"], .st-detail-hero[data-scode="11059"], .st-detail-hero[data-scode="12059"], .st-detail-hero[data-scode="13059"] { background: /* 液体喷涂 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.30) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.22) 0%, transparent 60%),
    linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }

.st-detail-hero[data-scode="60"], .st-detail-hero[data-scode="1060"], .st-detail-hero[data-scode="2060"], .st-detail-hero[data-scode="3060"], .st-detail-hero[data-scode="4060"], .st-detail-hero[data-scode="5060"], .st-detail-hero[data-scode="6060"], .st-detail-hero[data-scode="7060"], .st-detail-hero[data-scode="8060"], .st-detail-hero[data-scode="9060"], .st-detail-hero[data-scode="10060"], .st-detail-hero[data-scode="11060"], .st-detail-hero[data-scode="12060"], .st-detail-hero[data-scode="13060"] { background: /* 喷砂 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(180,180,180,.28) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(168,162,158,.22) 0%, transparent 60%),
    linear-gradient(140deg, #1a1812 0%, #2d2a22 50%, #4a4133 100%); }
.st-detail-hero[data-scode="60"]::before, .st-detail-hero[data-scode="1060"]::before, .st-detail-hero[data-scode="2060"]::before, .st-detail-hero[data-scode="3060"]::before, .st-detail-hero[data-scode="4060"]::before, .st-detail-hero[data-scode="5060"]::before, .st-detail-hero[data-scode="6060"]::before, .st-detail-hero[data-scode="7060"]::before, .st-detail-hero[data-scode="8060"]::before, .st-detail-hero[data-scode="9060"]::before, .st-detail-hero[data-scode="10060"]::before, .st-detail-hero[data-scode="11060"]::before, .st-detail-hero[data-scode="12060"]::before, .st-detail-hero[data-scode="13060"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><path d='M0 23h46M23 0v46'/><circle cx='23' cy='23' r='2' fill='%23ffffff' opacity='0.16'/></g></svg>");
    background-size: 46px 46px; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

.st-detail-hero[data-scode="61"], .st-detail-hero[data-scode="1061"], .st-detail-hero[data-scode="2061"], .st-detail-hero[data-scode="3061"], .st-detail-hero[data-scode="4061"], .st-detail-hero[data-scode="5061"], .st-detail-hero[data-scode="6061"], .st-detail-hero[data-scode="7061"], .st-detail-hero[data-scode="8061"], .st-detail-hero[data-scode="9061"], .st-detail-hero[data-scode="10061"], .st-detail-hero[data-scode="11061"], .st-detail-hero[data-scode="12061"], .st-detail-hero[data-scode="13061"] { background: /* 抛光 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(140deg, #061426 0%, #0a2140 50%, #0c2a52 100%); }
.st-detail-hero[data-scode="61"]::before, .st-detail-hero[data-scode="1061"]::before, .st-detail-hero[data-scode="2061"]::before, .st-detail-hero[data-scode="3061"]::before, .st-detail-hero[data-scode="4061"]::before, .st-detail-hero[data-scode="5061"]::before, .st-detail-hero[data-scode="6061"]::before, .st-detail-hero[data-scode="7061"]::before, .st-detail-hero[data-scode="8061"]::before, .st-detail-hero[data-scode="9061"]::before, .st-detail-hero[data-scode="10061"]::before, .st-detail-hero[data-scode="11061"]::before, .st-detail-hero[data-scode="12061"]::before, .st-detail-hero[data-scode="13061"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.12'><circle cx='300' cy='300' r='280' stroke-dasharray='4 8'/><circle cx='300' cy='300' r='200'/><circle cx='300' cy='300' r='120'/></g></svg>");
    background-size: 800px 800px; background-position: right -150px center; background-repeat: no-repeat; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

.st-detail-hero[data-scode="62"], .st-detail-hero[data-scode="1062"], .st-detail-hero[data-scode="2062"], .st-detail-hero[data-scode="3062"], .st-detail-hero[data-scode="4062"], .st-detail-hero[data-scode="5062"], .st-detail-hero[data-scode="6062"], .st-detail-hero[data-scode="7062"], .st-detail-hero[data-scode="8062"], .st-detail-hero[data-scode="9062"], .st-detail-hero[data-scode="10062"], .st-detail-hero[data-scode="11062"], .st-detail-hero[data-scode="12062"], .st-detail-hero[data-scode="13062"] { background: /* 拉丝 */
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(15,47,92,.32) 0%, transparent 65%),
    radial-gradient(circle at 10% 90%, rgba(15,47,92,.20) 0%, transparent 60%),
    linear-gradient(140deg, #0a2140 0%, #0c2a52 50%, #0c2a52 100%); }
.st-detail-hero[data-scode="62"]::before, .st-detail-hero[data-scode="1062"]::before, .st-detail-hero[data-scode="2062"]::before, .st-detail-hero[data-scode="3062"]::before, .st-detail-hero[data-scode="4062"]::before, .st-detail-hero[data-scode="5062"]::before, .st-detail-hero[data-scode="6062"]::before, .st-detail-hero[data-scode="7062"]::before, .st-detail-hero[data-scode="8062"]::before, .st-detail-hero[data-scode="9062"]::before, .st-detail-hero[data-scode="10062"]::before, .st-detail-hero[data-scode="11062"]::before, .st-detail-hero[data-scode="12062"]::before, .st-detail-hero[data-scode="13062"]::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='600' preserveAspectRatio='none'><g fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.10'><line x1='0' y1='0' x2='0' y2='600'/><line x1='6' y1='0' x2='6' y2='600'/><line x1='12' y1='0' x2='12' y2='600'/><line x1='18' y1='0' x2='18' y2='600'/></g></svg>");
    background-size: 24px 100%; border-radius: 0; width: auto; height: auto; top: auto; right: auto; }

/* >>> CASES-MODULE-START (Machining cases with process tabs) */
.cases-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 30px}
.case-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media (max-width: 1199px) { .case-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }
.case-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-gray-100);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease}
.case-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.08)}
.case-card-img{display:block;aspect-ratio:1/1;background:var(--color-gray-50);overflow:hidden}
.case-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.case-card:hover .case-card-img img{transform:scale(1.05)}
.case-card-body{display:block;padding:14px 16px}
.case-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:600;color:var(--color-gray-900);line-height:1.4;margin-bottom:8px}
.case-card-tag{display:inline-block;font-size:11px;font-weight:500;padding:3px 8px;border-radius:4px;background:var(--color-gray-50);color:var(--color-gray-500)}
@media (max-width:768px){.case-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:480px){.case-grid{grid-template-columns:1fr}}
/* 材料页案例展示（原 materials.html 内联样式，统一到共享 CSS 走 5 列 5宫格） */
.case-showcase-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
@media (max-width:1199px){.case-showcase-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1024px){.case-showcase-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.case-showcase-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (max-width:480px){.case-showcase-grid{grid-template-columns:1fr}}
/* <<< CASES-MODULE-END */


/* >>> UNIFIED-HERO-START >>> 全站 banner 统一为一种深蓝调 */
.hero-section, .hero-home, .hero-svc-milling, .hero-svc-detail, .hero-products-list,
.hero-proc-3axis, .hero-proc-4axis, .hero-proc-5axis, .hero-proc-turn,
.hero-proc-swiss, .hero-proc-millturn, .hero-materials, .hero-material-detail,
.hero-industries, .hero-industry-detail, .hero-surface, .hero-surface-detail,
.hero-product, .hero-case, .hero-blog, .hero-faq, .hero-guides, .hero-about,
.hero-factory, .hero-iso, .hero-production, .hero-contact, .hero-message, .hero-quote,
.ind-hero, .ind-hero[data-scode], .mat-detail-hero, .mat-detail-hero[data-scode],
.page-hero, .hero-section[data-scode] {
    background-color: #0c2a52;
    background-image:
        radial-gradient(ellipse 80% 65% at 78% 18%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 62%),
        linear-gradient(135deg,#0a2140 0%,#0f2f5c 55%,#164479 100%) !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
}
/* <<< UNIFIED-HERO-END <<< */

/* >>> ACCENT-RED-START >>> 主 CTA 使用红色强调（白 / 红 / 深蓝 三主色）
   覆盖新旧两套按钮体系：.rd-btn-primary（重设计）与 .btn-primary（旧版 header/首页 hero） */
.rd-btn-primary,
.btn-primary {
    background: #c8102e;
    border-color: #c8102e;
    color: #fff;
}
.rd-btn-primary:hover,
.btn-primary:hover {
    background: #a00c25;
    border-color: #a00c25;
}
/* <<< ACCENT-RED-END <<< */

/* ==========================================================================
   >>> REAL-BG-START (2026-10-16) <<<
   首页 / 加工服务 / 行业应用 / 材料中心 的 hero 背景：
   由「几何渐变 + SVG pattern」改为「真实车间照片 + 主题色深色蒙层」
   - 背景图统一 1920x1080，位于 /static/upload/image/bg/（后期可直接替换同名文件）
   - 蒙层左暗右亮，保证白色标题/正文可读；色调沿用各栏目原主题色
   - 关闭原几何 SVG 装饰层（::before / ::after）
   ========================================================================== */

/* ---------- 通用：背景图定位属性 ---------- */
/* 注意：service-detail.html 的 hero 为 <section class="rd-phero hero-svc-detail" data-scode="..">，
   文件中部 .rd-phero[data-scode] 规则特异性为 (0,2,0)，会压过 (0,1,0) 的 .hero-svc-detail，
   因此这里必须用 .rd-phero.hero-svc-detail（同为 0,2,0，且位于文件末尾，胜出） */
.hero-home,
.hero-products-list,
.hero-svc-detail,
.rd-phero.hero-svc-detail,
.hero-svc-milling,
.hero-proc-3axis,
.hero-proc-4axis,
.hero-proc-5axis,
.hero-proc-turn,
.hero-proc-swiss,
.hero-proc-millturn,
.hero-materials,
.ind-hero.hero-industries,
.ind-hero.hero-industry-detail,
.mat-detail-hero.hero-material-detail {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #061426;
}

/* ---------- 1. 首页 hero：车间全景 ---------- */
.hero-home {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        url("/static/upload/image/bg/bg-hero-home.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-hero-home.webp") type("image/webp"), url("/static/upload/image/bg/bg-hero-home.jpg") type("image/jpeg")) !important;
}

/* ---------- 2. 加工服务列表 /services/ ---------- */
.hero-products-list {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        url("/static/upload/image/bg/bg-services.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-services.webp") type("image/webp"), url("/static/upload/image/bg/bg-services.jpg") type("image/jpeg")) !important;
}

/* ---------- 3. 加工服务详情页 / 首页服务导语 ----------
   ★ 背景图改为「后台栏目大图驱动」：
     模板在 <section> 上输出 style="--hero-bg:url('{sort:pic}')"（仅当栏目大图非空），
     这里用 var(--hero-bg, 兜底图) 消费它 —— 后台「栏目管理 → 修改 → 栏目大图」换图即生效，
     无需改 CSS；栏目大图为空时自动回落到原图，不会白屏。
     渐变蒙层留在 CSS 里，保证任何自定义图片上白色标题都可读。 */
.hero-svc-detail,
.rd-phero.hero-svc-detail,
.hero-svc-milling {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        var(--hero-bg, url("/static/upload/image/bg/bg-service-detail.jpg")) !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        var(--hero-bg, image-set(url("/static/upload/image/bg/opt/bg-service-detail.webp") type("image/webp"), url("/static/upload/image/bg/bg-service-detail.jpg") type("image/jpeg"))) !important;
}

/* ---------- 3c. 各工艺详情页专属场景 hero（按 data-proc 区分，data-proc 由 service-detail.html 的 {sort:filename} 注入，语言无关） ----------
   特异性 (0,3,0) > 上方基础规则 (0,2,0) */
.rd-phero.hero-svc-detail[data-proc="5-axis-cnc-milling"] {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        url("/static/upload/image/bg/bg-proc-5axis.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-proc-5axis.webp") type("image/webp"), url("/static/upload/image/bg/bg-proc-5axis.jpg") type("image/jpeg")) !important;
}
.rd-phero.hero-svc-detail[data-proc="4-axis-cnc-milling"] {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        url("/static/upload/image/bg/bg-proc-4axis.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-proc-4axis.webp") type("image/webp"), url("/static/upload/image/bg/bg-proc-4axis.jpg") type("image/jpeg")) !important;
}
.rd-phero.hero-svc-detail[data-proc="cnc-turning"] {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        url("/static/upload/image/bg/bg-proc-turn.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-proc-turn.webp") type("image/webp"), url("/static/upload/image/bg/bg-proc-turn.jpg") type("image/jpeg")) !important;
}

/* ---------- 3b. 加工服务详情页 hero 内的文字配色 ----------
   service-detail.html 的 hero 无 data-scode 时 .rd-phero[data-scode] 的白字规则不生效，
   .rd-phero h1/.rd-lead 默认深灰字会压在深色照片背景上，此处补齐白字。 */
.rd-phero.hero-svc-detail h1,
.rd-phero.hero-svc-detail .rd-lead,
.rd-phero.hero-svc-detail p,
.rd-phero.hero-svc-detail .rd-rating,
.rd-phero.hero-svc-detail .rd-rating b { color: #fff; }
.rd-phero.hero-svc-detail .rd-lead { color: rgba(255,255,255,.80); }

/* ---------- 2b. 加工服务 / 产品列表页 hero 文字配色（同上，无 data-scode） ---------- */
.rd-phero.hero-products-list h1,
.rd-phero.hero-products-list .rd-lead,
.rd-phero.hero-products-list p,
.rd-phero.hero-products-list .rd-rating,
.rd-phero.hero-products-list .rd-rating b { color: #fff; }
.rd-phero.hero-products-list .rd-lead { color: rgba(255,255,255,.80); }
/* 列表页右侧为视频/图片卡片，卡片本身保持白底，不受影响 */

/* ---------- 3b. 各工艺页 hero（5 轴 / 4 轴 / 车床 配专属场景图；3 轴 / 走心 / 车铣复合 沿用通用车间图） ---------- */
.hero-proc-5axis {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        url("/static/upload/image/bg/bg-proc-5axis.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-proc-5axis.webp") type("image/webp"), url("/static/upload/image/bg/bg-proc-5axis.jpg") type("image/jpeg")) !important;
}
.hero-proc-4axis {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        url("/static/upload/image/bg/bg-proc-4axis.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-proc-4axis.webp") type("image/webp"), url("/static/upload/image/bg/bg-proc-4axis.jpg") type("image/jpeg")) !important;
}
.hero-proc-turn {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        url("/static/upload/image/bg/bg-proc-turn.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-proc-turn.webp") type("image/webp"), url("/static/upload/image/bg/bg-proc-turn.jpg") type("image/jpeg")) !important;
}
.hero-proc-3axis,
.hero-proc-swiss,
.hero-proc-millturn {
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        url("/static/upload/image/bg/bg-services.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(5,14,30,0.86) 0%, rgba(9,26,54,0.66) 46%, rgba(14,42,84,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-services.webp") type("image/webp"), url("/static/upload/image/bg/bg-services.jpg") type("image/jpeg")) !important;
}

/* ---------- 4. 材料中心列表 /materials/ ---------- */
.hero-materials {
    background-image:
        linear-gradient(102deg, rgba(15,47,92,0.86) 0%, rgba(15,47,92,0.66) 46%, rgba(15,47,92,0.28) 100%),
        url("/static/upload/image/bg/bg-materials.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(15,47,92,0.86) 0%, rgba(15,47,92,0.66) 46%, rgba(15,47,92,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-materials.webp") type("image/webp"), url("/static/upload/image/bg/bg-materials.jpg") type("image/jpeg")) !important;
}

/* ---------- 5. 材料详情页 ---------- */
.mat-detail-hero.hero-material-detail {
    background-image:
        linear-gradient(102deg, rgba(15,47,92,0.86) 0%, rgba(15,47,92,0.66) 46%, rgba(15,47,92,0.28) 100%),
        url("/static/upload/image/bg/bg-material-detail.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(15,47,92,0.86) 0%, rgba(15,47,92,0.66) 46%, rgba(15,47,92,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-material-detail.webp") type("image/webp"), url("/static/upload/image/bg/bg-material-detail.jpg") type("image/jpeg")) !important;
}

/* ---------- 6. 行业应用列表 /industries/ ---------- */
.ind-hero.hero-industries {
    background-image:
        linear-gradient(102deg, rgba(15,47,92,0.86) 0%, rgba(15,47,92,0.66) 46%, rgba(15,47,92,0.28) 100%),
        url("/static/upload/image/bg/bg-industries.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(15,47,92,0.86) 0%, rgba(15,47,92,0.66) 46%, rgba(15,47,92,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-industries.webp") type("image/webp"), url("/static/upload/image/bg/bg-industries.jpg") type("image/jpeg")) !important;
}

/* ---------- 7. 行业应用详情页 ---------- */
.ind-hero.hero-industry-detail {
    background-image:
        linear-gradient(102deg, rgba(15,47,92,0.86) 0%, rgba(15,47,92,0.66) 46%, rgba(15,47,92,0.28) 100%),
        url("/static/upload/image/bg/bg-industry-detail.jpg") !important;
    background-image:
        linear-gradient(102deg, rgba(15,47,92,0.86) 0%, rgba(15,47,92,0.66) 46%, rgba(15,47,92,0.28) 100%),
        image-set(url("/static/upload/image/bg/opt/bg-industry-detail.webp") type("image/webp"), url("/static/upload/image/bg/bg-industry-detail.jpg") type("image/jpeg")) !important;
}

/* ---------- 关闭原几何 SVG 装饰层 ---------- */
/* 同样需要 0,2,0 特异性的版本，才能压过 .rd-phero[data-scode=".."]::before 与
   .hero-section.hero-XXX::before 等既有规则 */
.hero-home::before, .hero-home::after,
.hero-products-list::before, .hero-products-list::after,
.rd-phero.hero-products-list::before, .rd-phero.hero-products-list::after,
.hero-svc-detail::before, .hero-svc-detail::after,
.rd-phero.hero-svc-detail::before, .rd-phero.hero-svc-detail::after,
.hero-svc-milling::before, .hero-svc-milling::after,
.hero-proc-3axis::before, .hero-proc-3axis::after,
.hero-proc-4axis::before, .hero-proc-4axis::after,
.hero-proc-5axis::before, .hero-proc-5axis::after,
.hero-proc-turn::before, .hero-proc-turn::after,
.hero-proc-swiss::before, .hero-proc-swiss::after,
.hero-proc-millturn::before, .hero-proc-millturn::after,
.hero-materials::before, .hero-materials::after,
.ind-hero.hero-industries::before, .ind-hero.hero-industries::after,
.ind-hero.hero-industry-detail::before, .ind-hero.hero-industry-detail::after,
.mat-detail-hero.hero-material-detail::before,
.mat-detail-hero.hero-material-detail::after,
/* hero-section 通用网格层 / 辉光层（对转换过的类关闭） */
.hero-section.hero-home::before, .hero-section.hero-home::after,
.hero-section.hero-products-list::before, .hero-section.hero-products-list::after,
.hero-section.hero-svc-detail::before, .hero-section.hero-svc-detail::after,
.rd-phero.hero-svc-detail::before, .rd-phero.hero-svc-detail::after,
.hero-section.hero-svc-milling::before, .hero-section.hero-svc-milling::after,
.hero-section.hero-proc-3axis::before, .hero-section.hero-proc-3axis::after,
.hero-section.hero-proc-4axis::before, .hero-section.hero-proc-4axis::after,
.hero-section.hero-proc-5axis::before, .hero-section.hero-proc-5axis::after,
.hero-section.hero-proc-turn::before, .hero-section.hero-proc-turn::after,
.hero-section.hero-proc-swiss::before, .hero-section.hero-proc-swiss::after,
.hero-section.hero-proc-millturn::before, .hero-section.hero-proc-millturn::after,
.hero-section.hero-materials::before, .hero-section.hero-materials::after {
    content: none;
}
/* >>> REAL-BG-END <<< */

/* ---------- 首页 hero 背景视频层 ----------
   结构：<video class="banner-video hero-bg-video"> 为 .hero-home 的第一个子元素
   分层：视频(z0) → 渐变蒙层(::before, z1) → 内容(.container, z2)
   照片 CSS 背景保留作为视频加载失败/移动端省流时的兜底 */
.hero-home > video.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 任务 AE：满屏不拉伸变形。
       之前 object-fit: contain 会在视频与容器宽高比不一致时产生黑边/上下留白；
       改为 cover：保持原始宽高比不变形，溢出部分裁掉，铺满整个 hero 区域。 */
    object-fit: cover;
    background: transparent;
    z-index: 0;
    /* 任务 AD：取消 pointer-events:none，使首页 banner 背景视频可直接点击放大 */
    pointer-events: auto;
}
/* 复用 ::before 作为蒙层（上面 content:none 已关掉原 SVG 网格层，这里改回渐变蒙层）
   深蓝色调蒙版：偏蓝、左暗右亮，保证白字清晰且视频仍为 16:9 不被裁切
   ★ 选择器必须写成 .hero-section.hero-home::before（特异性 0,2,0）：
     上方 REAL-BG 块里 .hero-section.hero-home::before{content:none} 同为 0,2,0 但位置更靠前，
     若此处只写 .hero-home::before（0,1,0）会被压掉 → 蒙版根本不渲染，
     白字直接压在亮画面上不清晰。这正是本次要修的问题。 */
.hero-section.hero-home::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(102deg, rgba(12,34,72,0.82) 0%, rgba(15,47,92,0.56) 45%, rgba(24,68,122,0.30) 100%);
}
.hero-home > .container { position: relative; z-index: 2; }

/* ---------- 深底 hero 上的白色描边按钮 ----------
   .btn-outline-white 此前在共享 CSS 中无定义（仅 materials.html 有内联版本），
   material-detail.html / grade-detail.html 用到时渲染成无边框无底色的裸链接，
   压在真实照片背景上几乎不可见。这里补齐全局定义。
   设计：12% 白色半透明底 + 85% 白色描边，既醒目又不抢主 CTA 的视觉权重。 */
.btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: rgba(255,255,255,0.12);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    border-radius: var(--radius-md);
    border: 2px solid rgba(255,255,255,0.85);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
}
.btn-outline-white:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

/* ============================================================
   企业宣传片：蒙层浮窗（视频灯箱）
   hero <video class="banner-video"> 现已指向真实视频
   （站点根目录 企业宣传片.mp4）。交互改为：
   - 点击视频本身 → 全屏蒙层浮窗带声音 / 控件观看
     （首页 banner 背景 / 详情页 box 视频，行为统一）
   - 浮窗打开时暂停页面里的 banner-video 背景循环，关闭后恢复
   - 支持点击遮罩 / 关闭按钮 / Esc 关闭
   不再渲染独立的播放按钮（任务 AD 取消）。
   ============================================================ */
video.banner-video { cursor: pointer; }

/* 视频蒙层浮窗 */
.rd-vmodal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6, 12, 22, 0.88);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 24px;
}
.rd-vmodal.open { display: flex; }
.rd-vmodal-inner {
    position: relative;
    width: min(1100px, 92vw);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    /* overflow:visible —— 关闭按钮定位在容器外 -14px，hidden 会把它裁切遮挡 */
    overflow: visible;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.rd-vmodal-inner video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    /* inner 改 visible 后，圆角交给视频自身保留，不出现毛边 */
    border-radius: 12px;
}
.rd-vmodal-close {
    position: absolute;
    /* 落在视频内部右上角（12px 内边距），任何视口/容器都不会把它裁掉 */
    top: 12px;
    right: 12px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    /* 透明背景：按钮浮在视频右上角，半透明深色圆保证可读，hover 更实 */
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 2;
    -webkit-transition: background .2s;
    transition: background .2s;
}
.rd-vmodal-close:hover { background: rgba(0, 0, 0, 0.72); }

/* ============================================================
   YouTube 视频（视频库）：动态缩略图预览 + 蒙层浮窗播放
   缩略图不是静态图，而是「静音自动播放、循环」的 YouTube 预览；
   点击 → 与 banner 视频同款的蒙层浮窗放大播放（带声音/控件）。
   ============================================================ */
.rd-ytmodal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
}
.rd-ytmodal.open { display: flex; }
.rd-ytmodal-inner {
    position: relative;
    width: min(1100px, 92vw);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    /* 关闭按钮定位在容器内，overflow 保持 visible 避免被裁切 */
    overflow: visible;
}
.rd-ytmodal-frame {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.rd-ytmodal-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
.rd-ytmodal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 2;
    -webkit-transition: background .2s;
    transition: background .2s;
}
.rd-ytmodal-close:hover { background: rgba(0, 0, 0, 0.72); }

/* --- 视频库列表 / 相关视频：动态（播放中）的 YouTube 缩略图 --- */
.yt-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}
.yt-preview-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* 预览只做背景播放，不接受交互：点击统一交给下面的透明层 */
    pointer-events: none;
}
/* 透明点击层：YouTube iframe 跨域，内部点击不会冒泡到父页，靠它接管 */
.yt-preview-hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
}
/* 播放按钮（纯视觉提示，pointer-events:none 不挡点击层） */
.yt-preview-play {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(200, 16, 46, 0.92);
    color: #fff;
    font-size: 20px;
    line-height: 56px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    -webkit-transition: transform .2s, background .2s;
    transition: transform .2s, background .2s;
}
.yt-preview:hover .yt-preview-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(200, 16, 46, 1);
}

/* --- 视频详情页：YouTube 嵌入播放器（响应式 16:9） --- */
.yt-embed {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 32px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.yt-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 不支持 aspect-ratio 的老浏览器兜底（padding-top 16:9） */
@supports not (aspect-ratio: 16 / 9) {
    .rd-ytmodal-inner,
    .yt-preview,
    .yt-embed { padding-top: 56.25%; height: 0; }
}

/* ============================================================
   >>> UNIFIED-INNER-BANNER-START <<<
   内页 banner 统一尺寸（含视频）

   改造前实测（1600 视口）：
     banner 高度  services-list / service-detail 628 · aluminum 610
                  industries 587 · materials 525            → 相差 103px
     视频盒       675x506 · 458x343 · 445x333               → 尺寸各不相同
     容器比例     全是 4:3，而源片是 16:9 → 画面上下各留一条大黑边

   统一规格：
     ① banner 高度：桌面端(>=769px) 统一 min-height 600px
     ② 视频：统一 16:9（与源片一致，消除黑边）+ 统一宽度 460px → 460x259

   踩坑记录：
     · materials 的 min-height:480px 写在 HTML 内联 style 上，
       内联样式优先级最高 → 必须用 !important 才能覆盖。
     · aluminum 的 .mat-detail-hero-visual 是 flex 行容器（栅格列宽 ~690），
       同时放视频(460) + 关键数据卡(420) = 880 放不下 → flex 收缩把视频压成 262。
       故改为纵向堆叠：视频在上、数据卡在下（4 项排一行）。
   ============================================================ */
@media (min-width: 769px) {
    .rd-phero,
    .hero-section.hero-materials,
    .hero-section.hero-production,
    .hero-section.hero-svc-milling,
    .mat-detail-hero,
    .ind-hero,
    .cl-hero,
    .st-detail-hero { min-height: 600px !important; }

    /* service-detail / services-list 的媒体列固定 460px，
       与 materials / industries / material-detail 的视频列同宽，
       这样各内页视频渲染尺寸才能真正一致 */
    .rd-phero-inner { grid-template-columns: 1fr 460px; }
}

/* 视频盒统一规格：16:9 + 宽度 460（max-width:100% 兜底，窄列不溢出） */
.rd-phero-media,
.mat-hero-img-wrap,
.ind-hero-media,
.ind-hero-card,
.rd-phero [style*="aspect-ratio:4/3"],
.hero-section [style*="aspect-ratio:4/3"],
.ind-hero [style*="aspect-ratio:4/3"],
.mat-detail-hero [style*="aspect-ratio:4/3"],
.cl-hero [style*="aspect-ratio:4/3"],
.st-detail-hero [style*="aspect-ratio:4/3"] {
    aspect-ratio: 16 / 9 !important;
    width: 460px !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

/* 移动端(<=768px)：上面的 460px 固定宽会撑出横向滚动条
   （390px 视口下容器可用宽仅约 358，实测 scrollWidth 477 > 390），改为自适应满宽 */
@media (max-width: 768px) {
    .rd-phero-media,
    .mat-hero-img-wrap,
    .ind-hero-media,
    .ind-hero-card,
    .rd-phero [style*="aspect-ratio:4/3"],
    .hero-section [style*="aspect-ratio:4/3"],
    .ind-hero [style*="aspect-ratio:4/3"],
    .mat-detail-hero [style*="aspect-ratio:4/3"],
    .cl-hero [style*="aspect-ratio:4/3"],
    .st-detail-hero [style*="aspect-ratio:4/3"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* aluminum(材料详情页)：visual 列改纵向堆叠，
   否则「视频 460 + 数据卡 420 = 880」塞不进 690 的列，flex 会把视频压扁 */
.mat-detail-hero-visual {
    flex-direction: column !important;
    gap: 12px;
}
.mat-hero-img-wrap {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
}
.mat-detail-hero-visual .mat-visual-card {
    max-width: 460px !important;
    padding: 16px 22px !important;
}
/* 卡片标题上下留白各收 6/4px：堆叠后整列比统一高度多 15px，这里抹平 */
.mat-detail-hero-visual .mat-visual-card h3 {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
}
/* 4 项关键数据排成一行，压缩卡片高度，避免撑爆统一 banner 高度 */
.mat-quick-stats {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

@media (max-width: 768px) {
    .rd-phero,
    .hero-section.hero-materials,
    .hero-section.hero-production,
    .hero-section.hero-svc-milling,
    .mat-detail-hero,
    .ind-hero,
    .cl-hero,
    .st-detail-hero { min-height: auto !important; }
    .mat-quick-stats { grid-template-columns: 1fr 1fr !important; }
}
/* >>> UNIFIED-INNER-BANNER-END <<< */

/* ---------- 任务 AG：加工服务页 hero 内的关键数据卡 ----------
   复用 .mat-visual-card / .mat-quick-stats 既有类，但 .mat-detail-hero-visual 是材料页专属容器，
   服务页 hero 是 2 列网格（.rd-phero-inner），所以这里给 .svc-key-data 补一份独立样式。
   背景：半透明深蓝（与服务页 hero 视频层 + 蒙版协调），保证白字清晰。 */
.svc-key-data {
    background: rgba(8, 22, 46, 0.78);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: 24px 26px;
    color: var(--color-white);
}
.svc-key-data h3 {
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rd-phero .svc-key-data .mat-quick-stat {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.rd-phero .svc-key-data .mat-quick-stat-label {
    color: rgba(255, 255, 255, 0.6);
}
.rd-phero .svc-key-data .mat-quick-stat-value {
    color: var(--color-white);
    font-size: 15px;
}
.rd-phero .svc-key-data .mat-quick-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
@media (max-width: 768px) {
    .rd-phero .svc-key-data .mat-quick-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   >>> LIST-PAGINATION-START <<<
   列表页分页样式 + 产品卡片网格

   背景：全站列表页统一每页 12 条，分页统一用 {page:bar}。
   {page:bar} 输出的 DOM 结构是：
     <span class="page-status">…</span><span class="page-index"><a…></span>
     <span class="page-pre">…</span><span class="page-numbar">
     <a class="page-num page-num-current">1</a>…</span>
     <span class="page-next">…</span><span class="page-last">…</span>
   文案由 PbootCMS 的 lg_ui() 提供，14 语种自带翻译，无需逐语种改模板。

   产品卡片网格原先只在 product-center.html 的内联 <style> 里定义，
   productlist.html 用不到；这里提到共享 CSS，两个模板都能用。
   （product-center.html 的内联定义在页面 <head> 靠后位置，仍优先生效，不冲突）
   ============================================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 48px;
}
.pagination .page-status {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-right: 8px;
}
.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background: #fff;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-600);
    text-decoration: none;
    transition: all 0.15s ease;
}
.pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(15, 47, 92, 0.05);
}
.pagination .page-num-current,
.pagination .page-num-current:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* 产品卡片网格（从 product-center.html 内联样式提到共享 CSS） */
/* 桌面>=1200px 走 5 列（5宫格）：15 条/页 恰好 3 行，与 /services/ 子页面排版一致 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 40px 0;
}
@media (max-width: 1199px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px)  { .product-grid { grid-template-columns: 1fr; } }

.product-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-gray-100);
    transition: all 0.3s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); }
.product-card-img {
    aspect-ratio: 1;
    background: #f8f9fa;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-card-body { padding: 16px; }
.product-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-900);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.product-card-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--color-gray-50);
    color: var(--color-gray-500);
    font-weight: 500;
}
/* >>> LIST-PAGINATION-END <<< */

/* ============================================================
   >>> CARD-ATTR-TAGS-START <<<
   案例/产品卡片「行业/加工工艺/材料」三属性标签
   - 基础标签: 灰色小圆角 chip
   - 优先项: 深蓝底白字（.case-card-attr-process/-industry/-material
              .prod-attr-industry  .rd-prod-attr-process）
   14 语种共享，改一次全站生效
   ============================================================ */

/* case-card / case-showcase-card / case-card-tags 里的属性 em */
.case-card-attr,
.case-card-tags .case-card-attr {
    font-style: normal;
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-gray-500, #6b7280);
    font-weight: 500;
    border: 1px solid var(--color-gray-200, #e5e7eb);
}
/* 优先项：深蓝 */
.case-card-attr-process,
.case-card-attr-industry,
.case-card-attr-material {
    background: var(--color-primary, #0f2f5c);
    color: #fff;
    border-color: var(--color-primary, #0f2f5c);
    font-weight: 600;
}

/* 首页 prod-card 的 prod-attrs / prod-attr */
.prod-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 6px;
}
.prod-attr {
    font-style: normal;
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-gray-500, #6b7280);
    font-weight: 500;
    border: 1px solid var(--color-gray-200, #e5e7eb);
}
.prod-attr-industry {
    background: var(--color-primary, #0f2f5c);
    color: #fff;
    border-color: var(--color-primary, #0f2f5c);
    font-weight: 600;
}

/* service-detail rd-prod-card 的 rd-prod-attr-process 高亮 */
.rd-prod-tags .rd-prod-attr-process {
    background: var(--color-primary, #0f2f5c);
    color: #fff;
    font-weight: 600;
    border: 1px solid var(--color-primary, #0f2f5c);
}

/* product-center 的 pc-tag-industry（行业优先） */
.product-card-tags .pc-tag-industry {
    background: var(--color-primary, #0f2f5c);
    color: #fff;
    font-weight: 600;
}
/* <<< CARD-ATTR-TAGS-END <<< */
/* >>> ABOUT-US-START >>> 关于我们页面 /about-us/（整屏 banner + 网格） */
/* 整屏 banner：复用首页 .hero-home 的视频/蒙层/排版，把高度拉满「一屏」
   站点头部占位（公告条 + 主导航）各语种/各断点不同（公告条文案长的语种在手机上会折行），
   故由模板内联脚本把实测高度写入 --ab-hdr-h；未执行脚本时回退 114px（桌面基准值） */
.hero-section.hero-home.hero-aboutus {
    min-height: calc(100vh - var(--ab-hdr-h, 114px));
    min-height: calc(100svh - var(--ab-hdr-h, 114px));
    padding: 130px 0 84px;
}
.hero-aboutus .hero-content { max-width: 940px; }
.hero-aboutus .hero-certifications { gap: 18px 28px; }

/* 数据条：上移覆盖 banner 底部，形成首页同款视觉 */
.ab-stats-wrap { position: relative; z-index: 6; margin-top: -68px; }
.ab-stats-wrap .stats-strip { margin-top: 0; }
.ab-stats-wrap .stat-item { text-align: center; }

/* 能力卡：4 列 */
.ab-cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ab-cap-grid .service-card { text-align: left; }
.ab-cap-grid .service-card h3 { font-size: var(--font-size-lg); margin-bottom: 10px; }
.ab-cap-grid .service-card p { font-size: var(--font-size-sm); color: var(--color-gray-600); line-height: 1.75; }

/* 优势卡：3 列 */
.ab-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-adv-grid .advantage-card { text-align: left; padding: 34px 30px; }
.ab-adv-grid .advantage-icon { margin: 0 0 20px; }
.ab-adv-grid .advantage-card h3 { font-size: var(--font-size-lg); margin-bottom: 10px; }
.ab-adv-grid .advantage-card p { font-size: var(--font-size-sm); color: var(--color-gray-600); line-height: 1.75; }

/* 关于我们正文段落：多语种长文案的呼吸感 */
.ab-who-text p { margin-bottom: 16px; }
.ab-who-text p:last-of-type { margin-bottom: 26px; }

/* /about/「我们是谁」：配图由 <img> 换成 <video class="banner-video">
   —— 仍用后台该页面的「内容图」作 poster（视频起播前的封面，也兼顾加载失败），
      视频本体用轻量循环版 hero-loop-720p.mp4；点击视频沿用全站「点击即放大」播放完整宣传片。
   .banner-video 通用规则是 height:100%/object-fit:contain，这里按图片原比例收敛成 16:9。 */
.support-image video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0b1b33;
}

@media (max-width: 1199px) {
    .ab-cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .ab-adv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .hero-section.hero-home.hero-aboutus {
        min-height: calc(100vh - var(--ab-hdr-h, 106px));
        min-height: calc(100svh - var(--ab-hdr-h, 106px));
        padding: 72px 0 48px;
    }
    .ab-stats-wrap { margin-top: -44px; }
    .ab-stats-wrap .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 22px 16px; }
    .ab-stats-wrap .stat-num { font-size: var(--font-size-3xl); }
    .ab-cap-grid, .ab-adv-grid { grid-template-columns: 1fr; gap: 16px; }
    .ab-adv-grid .advantage-card { padding: 26px 22px; }
}
/* <<< ABOUT-US-END <<< */
/* >>> CTA-BTN-WRAP-FIX >>> 全站 footer CTA 按钮长文案溢出
   .btn-primary 是 white-space:nowrap，波兰语/西班牙语/法语的长按钮文案
   （如 "Rozpocznij natychmiastową wycenę"）在 390px 手机上会把 .cta-actions
   撑到 429px，导致整站出现横向滚动条。这里允许 CTA 内按钮换行并限宽。 */
@media (max-width: 768px) {
    .btn-lg,
    .cta-actions .btn-primary,
    .cta-actions .btn-secondary {
        white-space: normal;
        max-width: 100%;
        overflow-wrap: break-word;
        line-height: 1.35;
    }
}
/* <<< CTA-BTN-WRAP-FIX <<< */
/* >>> LONG-WORD-WRAP-FIX >>> grid 1fr 列被超长单词撑破
   芬兰语 / 丹麦语 / 瑞典语的复合词（如 tarkkuuskonepajatuotanto）在窄屏下
   最小内容宽度超过列宽，而 grid item 默认 min-width:auto 不会收缩
   → .support-content / .split-section 的 1fr 列被撑到 402~409px，整页出现横向滚动条。
   实测：/about/ 的「我们是谁」区 fi/da/sv = 425/411/398；
        首页「制造实力」split-section（fi 402）、首页 section-title（da 425 / sv 395）。 */
.support-content > * { min-width: 0; }
.split-section > * { min-width: 0; }
.support-info h2,
.support-info p,
.support-info li,
.visual-text h2,
.visual-text p,
.section-title,
.section-desc { overflow-wrap: break-word; }
/* <<< LONG-WORD-WRAP-FIX <<< */

/* ==========================================================================
   >>> FULLSCREEN-HERO-START (2026-10-19) <<<
   全站所有页面 banner 统一直达「满屏」高度
   高度 = 一视口 − 站点头部（公告条 + 主导航）实测高度。
   头部高度由 {lang}/head.html 内联脚本写入 --ab-hdr-h（各语种文案长度/换行不同，
   不是固定值，故实测），未取到时回退 114px（桌面基准）。
   权重说明：
   - 覆盖 UNIFIED-INNER-BANNER 里的 `min-height:600px !important` → 本规则同样带 !important 且位于更靠后
   - 覆盖 materials.html 的 HTML 内联 `style="min-height:480px"` → !important 胜出内联非 !important
   - 覆盖 .rd-phero[data-scode="xx"] 的 (0,2,0) → 通用选择器 + !important
   ========================================================================== */
.hero-section,
.hero-home,
.hero-section.hero-home.hero-aboutus,
.hero-blog,
.hero-guides,
.hero-products-list,
.hero-industries,
.hero-industry-detail,
.hero-product,
.hero-case,
.hero-factory,
.hero-iso,
.hero-production,
.hero-contact,
.hero-message,
.hero-quote,
.hero-faq,
.hero-surface,
.hero-surface-detail,
.hero-svc-milling,
.hero-svc-detail,
.hero-materials,
.hero-material-detail,
.hero-proc-3axis,
.hero-proc-4axis,
.hero-proc-5axis,
.hero-proc-turn,
.hero-proc-swiss,
.hero-proc-millturn,
.grade-hero,
.article-detail-hero,
.rd-phero,
.ind-hero,
.mat-detail-hero,
.st-detail-hero,
.cl-hero,
.page-hero,
.page-hero.page-hero-sm,
/* 同等特异性（0,2,0）压过 UNIFIED-INNER-BANNER 里
   .hero-section.hero-materials / -production / -svc-milling 的 600px !important */
.hero-section.hero-materials,
.hero-section.hero-production,
.hero-section.hero-svc-milling,
.rd-phero.hero-svc-detail,
.rd-phero[data-scode],
.ind-hero[data-scode],
.mat-detail-hero[data-scode],
.hero-section[data-scode] {
    min-height: calc(100vh - var(--ab-hdr-h, 114px)) !important;
    min-height: calc(100svh - var(--ab-hdr-h, 114px)) !important;
}

/* 满屏后内容垂直居中：.hero-section 本身是 flex；.rd-phero / .ind-hero 的内部
   容器是 grid 且 align-items:center，由 min-height 拉高后自然居中。
   仅收紧上下 padding，避免满屏时内容被挤到可视区外。 */
.hero-section,
.rd-phero,
.ind-hero,
.mat-detail-hero,
.st-detail-hero,
.cl-hero,
.page-hero {
    padding-top: 72px;
    padding-bottom: 56px;
}

/* 放行 100svh 后，内容仍可能超过一屏（长文案语种 / 小屏），此时由内容高度兜底 */
@media (max-width: 768px) {
    .hero-section,
    .hero-home,
    .hero-section.hero-home.hero-aboutus,
    .hero-blog,
    .hero-guides,
    .hero-products-list,
    .hero-industries,
    .hero-industry-detail,
    .hero-product,
    .hero-case,
    .hero-factory,
    .hero-iso,
    .hero-production,
    .hero-contact,
    .hero-message,
    .hero-quote,
    .hero-faq,
    .hero-surface,
    .hero-surface-detail,
    .hero-svc-milling,
    .hero-svc-detail,
    .hero-materials,
    .hero-material-detail,
    .grade-hero,
    .article-detail-hero,
    .rd-phero,
    .ind-hero,
    .mat-detail-hero,
    .st-detail-hero,
    .cl-hero,
    .page-hero,
    .hero-section.hero-materials,
    .hero-section.hero-production,
    .hero-section.hero-svc-milling,
    .rd-phero.hero-svc-detail,
    .rd-phero[data-scode],
    .ind-hero[data-scode],
    .mat-detail-hero[data-scode],
    .hero-section[data-scode] {
        min-height: calc(100svh - var(--ab-hdr-h, 106px)) !important;
    }
}
/* <<< FULLSCREEN-HERO-END <<< */

/* ==========================================================================
   >>> COMPACT-INNER-BANNER-START (2026-10-20 二次压缩) <<<
   用户要求（据新截图）：下列 9 个栏目的 banner 高度统一压到约 210px
   （上一版为 460px，其中 iso / factory-environment / quote 三类此前仍是满屏）。
   实现要点：
   - FULLSCREEN-HERO 块用 !important 把这些 hero 类设成 100svh 满屏；
     本块位置更靠后 + 同等特异性(0,2,0) + !important，把它们压回紧凑高度。
   - 必须同时覆盖 padding：FULLSCREEN 块尾部把 .hero-section/.page-hero 的
     padding 设成 72px/56px，只改 min-height 会被 padding 重新撑高。
   - 14 个语种模板完全一致且共用本 CSS，故改这一处即全部语种生效。
   覆盖栏目（模板 ↔ hero 类逐一核对）：
     视频库   imageslist.html          -> .page-hero.hero-blog
     常见问题 faq.html                 -> .hero-section.hero-faq
     博客     blog.html                -> .hero-section.hero-blog
     技术指南 newslist.html            -> .hero-section.hero-blog（与资源中心同模板，一并生效）
     表面处理 surface-treatment.html   -> .hero-section.hero-surface
     设计技巧 design-tips.html         -> .hero-section.hero-guides
     ISO认证  iso.html                 -> .hero-section.hero-iso
     工厂环境 factory-environment.html -> .page-hero.hero-factory
     联系我们 quote.html               -> .hero-section.hero-quote
   本次未列出、保持原高度不变：
     案例库二级 productlist.html -> .rd-phero.hero-products-list:not(:has(.rd-phero-media)) 仍 460px
     视频详情 video.html        -> .section.article-detail-hero 仍 460px
     表面处理详情 surface-treatment-detail.html -> .st-detail-hero.hero-surface-detail 仍 460px
   ========================================================================== */
@media (min-width: 769px) {
    .hero-section.hero-blog,
    .page-hero.hero-blog,
    .hero-section.hero-faq,
    .hero-section.hero-guides,
    .hero-section.hero-surface,
    .hero-section.hero-iso,
    .hero-section.hero-quote,
    .page-hero.hero-factory {
        min-height: 210px !important;
        padding-top: 56px !important;
        padding-bottom: 44px !important;
    }
    /* 以下三类本次不在用户清单内，维持上一版 460px，避免回退到满屏 */
    .section.article-detail-hero,
    .st-detail-hero.hero-surface-detail,
    .rd-phero.hero-products-list:not(:has(.rd-phero-media)) {
        min-height: 460px !important;
    }
}
@media (max-width: 768px) {
    .hero-section.hero-blog,
    .page-hero.hero-blog,
    .hero-section.hero-faq,
    .hero-section.hero-guides,
    .hero-section.hero-surface,
    .hero-section.hero-iso,
    .hero-section.hero-quote,
    .page-hero.hero-factory,
    .section.article-detail-hero,
    .st-detail-hero.hero-surface-detail,
    .rd-phero.hero-products-list:not(:has(.rd-phero-media)) {
        min-height: auto !important;
        padding-top: 48px !important;
        padding-bottom: 36px !important;
    }
}
/* <<< COMPACT-INNER-BANNER-END <<< */

/* ==========================================================================
   >>> IND-CASES-SOLUTIONS-START (2026-10-19) <<<
   /industries/ 两个原本内容雷同的区块重构：
   ① 应用案例(#how-companies-use)：按行业分组的「真实零件」案例卡
      —— 数据来自 {pboot:indcases}（ay_content_ext.ext_industry 关联真实产品）
   ② 解决方案(#featured-services)：行业选项卡，左描述（工艺/材料/典型零件）右零件图
      —— 数据来自 {pboot:indtabs}
   标签实现见 apps/home/controller/ExtLabelController.php
   ========================================================================== */

/* ---------- ① 应用案例 ---------- */
.indcase-section { padding: 96px 0; background: var(--color-white, #fff); }
.indcase-group { margin-top: 46px; }
.indcase-group:first-of-type { margin-top: 6px; }
.indcase-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; margin-bottom: 22px;
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}
.indcase-title {
    display: flex; align-items: center; gap: 10px;
    margin: 0; font-size: 20px; font-weight: 800;
    color: var(--color-gray-900, #111827); line-height: 1.3;
}
.indcase-title::before {
    content: ''; flex: 0 0 auto; width: 4px; height: 18px;
    border-radius: 2px; background: #c8102e;
}
.indcase-all {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    font-size: 13px; font-weight: 600; color: var(--color-primary, #0f2f5c);
    text-decoration: none; white-space: nowrap; transition: gap .2s ease;
}
.indcase-all:hover { gap: 8px; }

.indcase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.indcase-card {
    display: flex; flex-direction: column; min-width: 0;
    background: #fff; border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 12px; overflow: hidden; text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.indcase-card:hover {
    transform: translateY(-4px); border-color: #c9d4e3;
    box-shadow: 0 14px 30px rgba(15, 47, 92, .12);
}
.indcase-thumb { display: block; aspect-ratio: 4 / 3; background: #f3f5f8; overflow: hidden; }
.indcase-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .45s ease;
}
.indcase-card:hover .indcase-thumb img { transform: scale(1.05); }
.indcase-body { display: block; padding: 14px 16px 16px; }
.indcase-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.9em;
    font-size: 14px; font-weight: 700; line-height: 1.45;
    color: var(--color-gray-900, #111827);
}
.indcase-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.indcase-tag {
    font-style: normal; font-size: 11px; line-height: 1; padding: 4px 8px;
    border-radius: 4px; font-weight: 500;
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-gray-600, #4b5563);
    border: 1px solid var(--color-gray-200, #e5e7eb);
}
.indcase-tag-proc {
    background: var(--color-primary, #0f2f5c); color: #fff;
    border-color: var(--color-primary, #0f2f5c); font-weight: 600;
}
.indcase-parts {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; margin-top: 16px;
}
.indcase-parts-label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--color-gray-500, #6b7280);
}
.indcase-part {
    font-size: 12px; padding: 5px 12px; border-radius: 999px;
    color: var(--color-gray-600, #4b5563); background: #f5f7fa;
    border: 1px solid var(--color-gray-200, #e5e7eb);
}

/* ---------- ② 解决方案（行业选项卡） ---------- */
.sol-section { padding: 96px 0; background: #f6f8fb; }
.sol-tabs { margin-top: 34px; }
.sol-tabbar {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.sol-tabbar::-webkit-scrollbar { display: none; }
.sol-tab {
    flex: 0 0 auto; padding: 11px 20px; border-radius: 999px;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    background: #fff; color: var(--color-gray-600, #4b5563);
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    white-space: nowrap; cursor: pointer; transition: all .2s ease;
}
.sol-tab:hover { border-color: #c9d4e3; color: var(--color-primary, #0f2f5c); }
.sol-tab.is-active {
    background: var(--color-primary, #0f2f5c);
    border-color: var(--color-primary, #0f2f5c); color: #fff;
}
.sol-panel { display: none; }
.sol-panel.is-active { display: block; animation: solFade .35s ease; }
@keyframes solFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sol-panel-inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
    margin-top: 22px; padding: 44px;
    background: #fff; border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 18px;
}
.sol-left { min-width: 0; }
.sol-eyebrow {
    display: inline-block; margin-bottom: 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #c8102e;
}
.sol-h3 {
    margin: 0 0 12px; font-size: 26px; font-weight: 800;
    line-height: 1.2; color: var(--color-gray-900, #111827);
}
.sol-desc {
    margin: 0 0 22px; font-size: 14.5px; line-height: 1.8;
    color: var(--color-gray-600, #4b5563);
}
.sol-row {
    display: flex; gap: 14px; padding: 12px 0;
    border-top: 1px dashed var(--color-gray-200, #e5e7eb);
}
.sol-label {
    flex: 0 0 84px; padding-top: 3px;
    font-size: 12.5px; font-weight: 700; color: var(--color-gray-500, #6b7280);
}
.sol-chips { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.sol-chip {
    font-style: normal; font-size: 12px; line-height: 1;
    padding: 6px 10px; border-radius: 6px; font-weight: 500;
    background: #f4f6f9; color: var(--color-gray-700, #374151);
    border: 1px solid var(--color-gray-200, #e5e7eb);
}
.sol-chip-proc {
    background: var(--color-primary, #0f2f5c); color: #fff;
    border-color: var(--color-primary, #0f2f5c); font-weight: 600;
}
.sol-chip-part { background: #fff; border-color: #d7dfea; border-radius: 999px; }
.sol-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 22px; padding: 12px 24px; border-radius: 999px;
    background: #c8102e; color: #fff; text-decoration: none;
    font-size: 13.5px; font-weight: 700;
    transition: gap .2s ease, background .2s ease;
}
.sol-cta:hover { gap: 10px; background: #a00c25; }
.sol-right {
    min-width: 0; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: 14px; background: #eef1f5;
}
.sol-right img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1199px) {
    .indcase-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .indcase-section, .sol-section { padding: 72px 0; }
    .indcase-grid { grid-template-columns: repeat(2, 1fr); }
    .sol-panel-inner { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
    .sol-right { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
    .indcase-section, .sol-section { padding: 56px 0; }
    .indcase-grid { grid-template-columns: 1fr; }
    .indcase-head { flex-wrap: wrap; }
    .indcase-title { font-size: 17px; }
    .sol-panel-inner { padding: 20px; border-radius: 14px; }
    .sol-h3 { font-size: 21px; }
    .sol-row { flex-direction: column; gap: 8px; }
    .sol-label { flex: 0 0 auto; padding-top: 0; }
}
/* <<< IND-CASES-SOLUTIONS-END <<< */

/* ==========================================================================
   >>> RD-CARD-SHRINK-FIX (2026-10-19) <<<
   材料中心 .rd-card 内的 .rd-thumbs 是 repeat(3, 1fr) 网格，
   3 个缩略图的「最小内容宽」之和（约 354px）大于卡片内容宽（移动端约 302px），
   grid item 默认 min-width:auto 不会收缩 → 整页在 390px 视口下横向溢出 8px（da/materials）。
   改为 minmax(0, 1fr) 允许列被压缩到 0；桌面端与原来表现一致。
   ========================================================================== */
.rd-media { min-width: 0; }
.rd-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd-thumb { min-width: 0; }
/* <<< RD-CARD-SHRINK-FIX-END <<< */


/* ==========================================================================
   视频库列表：动态视频缩略图
   - MP4：静音循环自动播放的 <video> 预览（进入视口才播，离开暂停）
   - YouTube：静音循环预览 iframe（沿用 .yt-preview）
   点击缩略图任意位置 → 蒙罩层放大播放（MP4 走 .rd-vmodal / YouTube 走 .rd-ytmodal）
   ========================================================================== */
.vid-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}
.vid-preview-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    pointer-events: none;
}
.vid-thumb .yt-preview { position: absolute; inset: 0; aspect-ratio: auto; }
.vid-thumb .yt-preview-play { z-index: 4; }
.vid-thumb .case-card-overlay { pointer-events: none; }
@media (max-width: 768px) {
    .vid-thumb { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   FAQ 手风琴（{pboot:faqlist} 默认输出：button.faq-question + div.faq-answer）
   原先只有 /faq/ 页在内联 <style> 里定义了这套样式，导致其它页面复用标签时
   按钮是浏览器默认外观。用「相邻兄弟 +」精确命中 button 版本，避免影响首页
   <details> 版本（details 靠原生展开，若被 max-height:0 锁住就永远打不开）。
   ========================================================================== */
.faq-item { border-bottom: 1px solid var(--color-gray-100); }
.faq-question {
    width: 100%;
    text-align: left;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: inherit;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-gray-900);
    transition: color 0.2s;
}
.faq-question:hover { color: var(--color-primary); }
.faq-question svg { transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; }
.faq-question.active svg { transform: rotate(45deg); }
.faq-question + .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-question.active + .faq-answer { padding-bottom: 24px; }
.faq-answer p {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: var(--line-height-relaxed);
}
.faq-more { margin-top: 10px; }
.faq-more a {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.faq-more a:hover { text-decoration: underline; }

/* ==========================================================================
   表面处理 / 材料 栏目内链网格（surface-treatment & materials 页面）
   st-grid：子栏目卡片网格，4 列自适应
   st-card：单个子栏目卡片，含名称、说明、参数 chip、详情链接
   ========================================================================== */
.st-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.st-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: 28px 24px 24px;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.st-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-gray-200);
}

.st-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.st-card-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: var(--line-height-tight);
}

.st-card-arrow {
    flex: 0 0 auto;
    color: var(--color-gray-300);
    transition: color var(--transition-normal), transform var(--transition-normal);
}

.st-card:hover .st-card-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
}

.st-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: var(--line-height-relaxed);
    margin-bottom: 16px;
    flex: 1 1 auto;
}

.st-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.st-chip {
    display: inline-block;
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-600);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-100);
    border-radius: 999px;
    white-space: nowrap;
}

.st-card-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
}

/* 材料网格：材料卡片用两行 chip 布局 */
.mat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mat-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: 28px 24px 24px;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.mat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-gray-200);
}

.mat-card-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 8px;
}

.mat-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.mat-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: var(--line-height-relaxed);
    margin-bottom: 16px;
    flex: 1 1 auto;
}

.mat-card-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
}

@media (max-width: 1024px) {
    .st-grid { grid-template-columns: repeat(3, 1fr); }
    .mat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .st-grid { grid-template-columns: repeat(2, 1fr); }
    .mat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .st-grid { grid-template-columns: 1fr; }
    .mat-grid { grid-template-columns: 1fr; }
}

/* ---------- Knowledge tabs: FAQ / Blog / Technical Guides / Design Tips ---------- */
.kb-tabs { width: 100%; }
.kb-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-gray-200);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kb-tabs-nav::-webkit-scrollbar { display: none; }
.kb-tabs-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 12px 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-500);
    transition: color .2s ease, border-color .2s ease;
}
.kb-tabs-btn:hover { color: var(--color-primary); }
.kb-tabs-btn.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.kb-tabs-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.kb-tabs-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}
.kb-tabs-btn.is-active .kb-tabs-count { background: var(--color-primary); color: var(--color-white); }
.kb-panel { display: none; }
.kb-panel.is-active { display: block; animation: kbPanelFade .25s ease; }
.kb-panel[hidden] { display: none; }
@keyframes kbPanelFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kb-panel-lead {
    margin: 0 0 22px;
    padding: 12px 16px;
    background: var(--color-gray-50);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}
.kb-panel-lead strong { color: var(--color-gray-900); font-weight: 600; }
.kb-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.kb-item {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kb-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(15, 47, 92, .08);
    transform: translateY(-2px);
}
.kb-item-title {
    margin: 0 0 10px;
    font-size: var(--font-size-base);
    line-height: 1.45;
    font-weight: 600;
}
.kb-item-title a { color: var(--color-gray-900); text-decoration: none; }
.kb-item-title a:hover { color: var(--color-primary); }
.kb-item-desc {
    flex: 1;
    margin: 0 0 16px;
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    line-height: 1.65;
}
.kb-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    color: var(--color-gray-400);
    font-size: 12px;
}
.kb-item-date::after { content: '·'; margin-left: 10px; }
.kb-item-cat { color: var(--color-gray-500); }
.kb-item-more {
    margin-left: auto;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.kb-item-more:hover { text-decoration: underline; }
.kb-empty {
    margin: 0;
    padding: 28px 20px;
    text-align: center;
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}
.kb-panel-more { margin-top: 20px; text-align: right; }
.kb-more-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
}
.kb-more-link:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .kb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .kb-tabs-nav { gap: 0; }
    .kb-tabs-btn { padding: 10px 12px; font-size: 13px; }
    .kb-tabs-count { display: none; }
    .kb-panel-lead { padding: 10px 12px; }
    .kb-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .kb-panel.is-active { animation: none; }
    .kb-item { transition: none; }
}

/* ==========================================================================
   >>> GRADE-HERO-WHITE-HEADINGS-START <<<
   全站 h1~h6 的深色 color 会压过 .grade-hero 的白色继承，导致牌号标题
   与「关键参数」小标题在深蓝底上发黑。这里显式覆盖为白色（15 个语种共用本 CSS）。
   ========================================================================== */
.grade-hero h1,
.grade-hero h2,
.grade-hero h3,
.grade-hero h4,
.grade-hero h5,
.grade-hero h6 {
    color: #fff;
}
/* >>> GRADE-HERO-WHITE-HEADINGS-END <<< */

/* ==========================================================================
   >>> ARTICLE-DETAIL-ENHANCE-START <<<
   文章详情页(news.html)增强：阅读进度条 / 文章目录(TOC) / 正文排版优化
   15 语种共用本 CSS；锚点平滑滚动 + 固定头偏移避免 TOC 跳转被顶栏遮挡
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

/* 顶部阅读进度条 */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
    z-index: 9999;
    transition: width .12s linear;
    pointer-events: none;
}

/* -------- 正文排版增强（优化 AI 生成内容的阅读体验） -------- */
.content-body { word-break: break-word; }

.content-body a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, .25);
    transition: border-color .15s ease;
}
.content-body a:hover { border-bottom-color: var(--color-primary); }

.content-body img {
    display: block;
    margin: 24px auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* AI 配图常以 figure 包裹并带 figcaption 图注 */
.content-body figure {
    margin: 28px 0;
    text-align: center;
}
.content-body figure img {
    display: inline-block;
    margin: 0 auto 12px;
}
.content-body figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-style: italic;
    line-height: 1.5;
}

.content-body blockquote {
    margin: 24px 0;
    padding: 16px 22px;
    border-left: 4px solid var(--color-primary);
    background: var(--color-gray-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-gray-700);
    font-style: italic;
}
.content-body blockquote p:last-child { margin-bottom: 0; }

.content-body pre {
    background: var(--color-gray-900);
    color: #e5e7eb;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin: 24px 0;
}
.content-body code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: .9em;
}
.content-body :not(pre) > code {
    background: var(--color-gray-100);
    color: #db2777;
    padding: 2px 6px;
    border-radius: 4px;
}

.content-body h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    border-bottom: 1px solid var(--color-gray-100);
    padding-bottom: 10px;
}
.content-body h3 { font-size: var(--font-size-xl); font-weight: 700; }
.content-body h4 { font-size: var(--font-size-lg); font-weight: 600; }

.content-body hr {
    border: none;
    border-top: 1px solid var(--color-gray-200);
    margin: 36px 0;
}

.content-body > p:first-child {
    font-size: var(--font-size-lg);
    color: var(--color-gray-800);
    line-height: 1.7;
}

/* 阅读时长徽标（由 news-toc.js 注入到元信息行） */
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}
.reading-time svg { width: 16px; height: 16px; }

/* -------- 文章目录 TOC（注入侧栏顶部） -------- */
.article-toc {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: 22px 24px;
    margin-bottom: 32px;
}
.article-toc__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-gray-900);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.article-toc__title svg { width: 16px; height: 16px; color: var(--color-primary); }
.article-toc__list { list-style: none; margin: 0; padding: 0; }
.article-toc__list li { margin: 0; padding: 0; }
.article-toc__list a {
    display: block;
    padding: 6px 0 6px 14px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-decoration: none;
    border-left: 2px solid var(--color-gray-200);
    transition: color .15s ease, border-color .15s ease;
    line-height: 1.4;
}
.article-toc__list a:hover { color: var(--color-primary); border-left-color: var(--color-primary); }
.article-toc__list a.is-active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: 600;
}
.article-toc__list .lvl-3 a { padding-left: 28px; font-size: var(--font-size-xs); }

/* 平板/手机端隐藏目录（侧栏已移至文末，目录意义不大） */
@media (max-width: 1024px) {
    .article-toc { display: none !important; }
}

/* ==========================================================================
   文章详情页 · 转化侧栏与底部 CTA（转化导向版式，15 语种共用）
   ========================================================================== */

/* 侧栏容器：桌面吸顶 */
.article-rail {
    position: sticky;
    top: 100px;
    align-self: start;
}

/* 特色图：收窄到与正文栏呼应，不再霸屏 */
.article-figure-section {
    padding: 8px 0 8px;
}
.article-figure {
    max-width: 880px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--color-gray-100);
    aspect-ratio: 21/9;
}
.article-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 吸顶报价卡（深色渐变，视觉重心） */
.rail-quote-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: 32px;
    margin-bottom: 24px;
    color: var(--color-white);
}
.rail-quote-title {
    font-size: var(--font-size-xl);
    color: var(--color-white);
    margin-bottom: 12px;
    font-weight: 700;
}
.rail-quote-desc {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, .82);
    margin-bottom: 24px;
    line-height: var(--line-height-relaxed);
}
.rail-btn-primary {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all .15s ease;
    font-family: inherit;
}
.rail-btn-primary:hover {
    background: var(--color-gray-100);
    transform: translateY(-1px);
}
.rail-btn-ghost {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 13px 20px;
    background: transparent;
    color: var(--color-white);
    border: 1.5px solid rgba(255, 255, 255, .5);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-align: center;
    text-decoration: none;
    transition: all .15s ease;
}
.rail-btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--color-white);
}
.rail-btn-ghost--dark {
    color: var(--color-primary);
    border-color: var(--color-gray-300);
}
.rail-btn-ghost--dark:hover {
    background: rgba(37, 99, 235, .06);
    border-color: var(--color-primary);
}

/* 信任标识 */
.rail-trust {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    list-style: none;
}
.rail-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, .9);
    margin-bottom: 8px;
}
.rail-trust li:last-child { margin-bottom: 0; }
.rail-trust svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: #6ee7b7;
}

/* 快捷询盘表单 */
.rail-form-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.rail-form-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 6px;
}
.rail-form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-bottom: 16px;
    line-height: 1.5;
}
.rail-form { display: flex; flex-direction: column; gap: 10px; }
.rail-input,
.rail-textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--color-gray-800);
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rail-input:focus,
.rail-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.rail-textarea { resize: vertical; min-height: 72px; }
.rail-captcha { display: flex; gap: 10px; align-items: center; }
.rail-captcha .rail-input { flex: 1; }
.rail-captcha img {
    height: 42px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--color-gray-200);
}
.rail-btn-submit {
    margin-top: 4px;
    padding: 13px 20px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s ease;
}
.rail-btn-submit:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* 热门文章块 */
.rail-block { margin-bottom: 24px; }
.rail-block-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-gray-900);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-gray-200);
}
.rail-post {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-gray-100);
}
.rail-post:last-child { border-bottom: none; }
.rail-post a {
    display: block;
    text-decoration: none;
}
.rail-post-date {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    display: block;
    margin-bottom: 4px;
}
.rail-post-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    line-height: var(--line-height-tight);
    display: block;
    transition: color .15s ease;
}
.rail-post a:hover .rail-post-title { color: var(--color-primary); }

/* 联系方式块 */
.rail-contact {
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    padding: 24px;
    border: 1px solid var(--color-gray-100);
}
.rail-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color .15s ease;
    margin-bottom: 12px;
}
.rail-contact-item:last-child { margin-bottom: 0; }
.rail-contact-item:hover { color: var(--color-primary); }
.rail-contact-item svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* 底部 CTA 带 */
.article-cta {
    padding: 72px 0;
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
}
.article-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: 48px;
    color: var(--color-white);
}
.article-cta-copy { max-width: 620px; }
.article-cta-copy .section-label { color: rgba(255, 255, 255, .7); }
.article-cta-copy h2 {
    color: var(--color-white);
    font-size: var(--font-size-3xl);
    margin: 10px 0 12px;
    line-height: 1.2;
}
.article-cta-copy p {
    color: rgba(255, 255, 255, .85);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}
.article-cta-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 260px;
}
.article-cta-actions .rail-btn-primary { width: auto; }
.article-cta-actions .rail-btn-ghost { width: auto; margin-top: 0; }

@media (max-width: 1024px) {
    .article-cta-inner { padding: 32px; }
    .article-cta-copy h2 { font-size: var(--font-size-2xl); }
    /* 平板及以下取消侧栏吸顶，避免遮挡正文 */
    .article-rail { position: static !important; }
    .article-figure { aspect-ratio: 16/9; }
}
@media (max-width: 768px) {
    .article-cta { padding: 48px 0; }
    .article-cta-inner { padding: 28px 24px; }
    .article-cta-actions { width: 100%; }
    .article-cta-actions .rail-btn-primary,
    .article-cta-actions .rail-btn-ghost { width: 100%; margin-top: 0; }
}
/* >>> ARTICLE-DETAIL-ENHANCE-END <<< */


/* ==========================================================================
   >>> UNIFIED-HERO-CENTER-START (2026-10-23) <<<
   任务 AI：加工服务 / 材料中心 / 行业应用（含各自二、三级菜单）
   统一 hero 版式 —— 整块内容在 banner 内垂直居中，且「左文字 / 右视频」
   两栏互为垂直居中。

   问题定位（1440 视口实测）：
     材料中心用 .hero-section，它天生 display:flex + align-items:center，
       内容 top=299 正好落在满屏 banner 的垂直中点 → 已符合预期，即本任务的基准版式。
     但 .rd-phero / .mat-detail-hero / .ind-hero / .grade-hero 都是普通块级，
       FULLSCREEN-HERO 只给了 min-height，内容仍贴顶排布：
       services 实测 top=186（= 站点头 114 + padding-top 72），底部空出约 177px，
       视觉上「文字和视频整体偏上」。

   处理：给这几类 hero 补上与 .hero-section 一致的 flex 垂直居中（仅桌面端，
        移动端 min-height 已由 FULLSCREEN-HERO 置为 auto，居中无意义）。

   安全性：
     · 这几类 hero 的 ::before/::after 装饰层要么 content:none、要么
       position:absolute（绝对定位元素不参与 flex 流），不会被拉进 flex 布局；
     · 每类 hero 都只有一个块级 .container 子元素，flex 化不改变结构；
     · .container 自带 width:100%，作为 flex item 宽度不变。
   ========================================================================== */
@media (min-width: 769px) {
    .rd-phero,
    .mat-detail-hero,
    .ind-hero,
    .grade-hero {
        display: flex;
        align-items: center;
    }
    /* 两栏互为垂直居中（幂等兜底：材料详情页右侧是「视频+数据卡」纵向组合，
       整组相对左侧文字居中，与基准版式观感一致） */
    .rd-phero-inner,
    .mat-detail-hero-content,
    .ind-hero-content,
    .ind-hero-inner,
    .grade-hero-content { align-items: center; }
}

/* 行业应用首页（industries.html）横向左对齐：已在 pages/industries.css 源头修正
   （.ind-hero-content text-align:left；.ind-hero-sub margin 去 auto；.ind-hero-ctas
   justify-content:flex-start），与基准版式（材料中心 .hero-section）一致。 */
/* >>> UNIFIED-HERO-CENTER-END <<< */


/* ---------- 加载体验兜底（2026-10-26，随 _perf_patch_templates.js 一起生效） ---------- */

/* 用户系统层面要求「减少动态效果」时，滚动淡入反而像卡顿：直接呈现终态 */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.visible,
    .reveal.revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* 图片槽位在下载/解码完成前铺一层底色，避免滚动时「白块闪一下」的观感。
   .content 是正文（{content:content}）容器，AI 生成的文章配图也走这里 */
.visual-img img,
.mega-media-img,
.card-media img,
.gallery-item img,
.content img {
    background-color: #f2f4f6;
}

/* PerfImg 输出过滤会把 <img> 包进 <picture> 以择优 webp；
   display:contents 让 picture 自身不生成盒子，img 仍是原来的 flex/grid 子项，版式零变化。
   （Safari 15.4 以下不支持该值时退化为普通 inline 盒子，图片照常显示） */
picture {
    display: contents;
}

/* banner 视频改为进视口才加载，等待期间由 poster 占位；这里保证 poster 铺满不留黑边 */
.banner-video[preload="none"] {
    object-fit: cover;
}

/* <<< PERF-LOADING-FALLBACK-END <<< */