/*
Theme Name: CHUNSHUI Spring Water
Theme URI: https://chunshui.com
Author: CHUNSHUI Design Team
Author URI: https://chunshui.com
Description: Custom WordPress theme for CHUNSHUI - B2B retail display props manufacturer. Warm Editorial design system with Polylang/WPML multilingual support.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: chunshui
Tags: b2b, custom-post-type, bilingual, responsive, rtl-language-support
*/

/* === Source: index-cn.html === */
/* === CSS 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-body);
      font-size: 16px;
      line-height: 1.65;
      color: var(--color-carbon);
      background: var(--color-white);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* === Design Tokens — Warm Editorial + 纯灰调 v4.0 === */
    :root {
      /* Brand Core — 纯灰调 */
      --color-carbon: #333333;
      --color-carbon-light: #4D4D4D;
      --color-carbon-soft: #6E6E6E;
      --color-mist: #8A8A8A;
      --color-white: #FFFFFF;
      --color-cloud: #E8E6E0;
      --color-cloud-light: #F0EDE7;
      --color-cloud-dark: #D1CEC6;
      --color-line: #C4C0B8;

      /* Accent — 温铜/暖棕 */
      --color-copper: #A89379;
      --color-copper-hover: #9A8268;
      --color-copper-soft: #C4B5A0;
      --color-copper-pale: #E8DFD0;
      --color-slate: #9BABB8;
      --color-slate-hover: #8A9DAC;
      --color-slate-soft: #B8C8D4;

      /* Adult Series */
      --color-adult-accent: #A89379;
      --color-adult-accent-soft: #C4B5A0;
      --color-adult-bg-accent: #E8DFD0;
      --color-adult-tag: #A89379;
      --color-adult-line: #C4B5A0;

      /* Kids Series */
      --color-kids-primary: #5BBFDE;
      --color-kids-secondary: #F4A261;
      --color-kids-primary-soft: #A8DCF0;
      --color-kids-secondary-soft: #F8C896;
      --color-kids-bg-primary: #EBF5FA;
      --color-kids-bg-secondary: #FFF3E8;
      --color-kids-tag: #5BBFDE;

      /* Semantic */
      --color-success: #7DB88A;
      --color-warning: #C9A96E;
      --color-danger: #D4564A;
      --color-info: #9BABB8;

      /* Gradient */
      --gradient-hero: linear-gradient(180deg, #333333 0%, #4D4D4D 60%, #E8E6E0 100%);
      --gradient-copper-wash: linear-gradient(135deg, #A89379 0%, #C4B5A0 50%, #E8DFD0 100%);
      --gradient-cloud-rise: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --gradient-kids: linear-gradient(135deg, #5BBFDE 0%, #F4A261 100%);
      --gradient-hero-line: linear-gradient(90deg, transparent 0%, #A89379 50%, transparent 100%);

      /* Typography — 三层架构 */
      --font-display-serif: 'Source Serif 4', 'Noto Serif SC', 'Georgia', serif;
      --font-heading: 'DM Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
      --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
      --font-serif-zh: 'Noto Serif SC', 'STSong', 'SimSun', serif;

      /* Spacing */
      --space-2xs: 4px;
      --space-xs: 8px;
      --space-sm: 12px;
      --space-md: 10px;
      --space-lg: 32px;
      --space-xl: 40px;
      --space-2xl: 32px;
      --space-3xl: 40px;
      --space-4xl: 96px;
      --space-5xl: 100px;
      --space-editorial: 60px;

      /* Radius */
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 10px;
      --radius-xl: 12px;
      --radius-card: 16px;

      /* Shadow — 暖灰阴影 */
      --shadow-flat: none;
      --shadow-subtle: 0 1px 3px rgba(51,51,51,0.05);
      --shadow-soft: 0 2px 8px rgba(51,51,51,0.07);
      --shadow-raised: 0 3px 12px rgba(51,51,51,0.08);
      --shadow-elevated: 0 6px 20px rgba(51,51,51,0.12);
      --shadow-floating: 0 8px 28px rgba(51,51,51,0.14);
      --shadow-copper-glow: 0 4px 16px rgba(168,147,121,0.20);

      /* Z-index */
      --z-base: 0;
      --z-decorative: 50;
      --z-sticky: 100;
      --z-dropdown: 200;
      --z-modal: 300;
      --z-toast: 400;

      /* Container */
      --container-max: 1200px;
      --grid-gutter: 32px;

      /* === v4.0 新增组件变量 === */

      /* N1. 多页导航栏 — Active 状态 */
      --nav-active-color: #333333;
      --nav-active-underline: 2px solid #A89379;
      --nav-active-weight: 500;
      --nav-default-color: #4D4D4D;          /* WCAG 修正: carbon-soft→carbon-light */
      --nav-default-weight: 400;

      /* N1. 多页导航栏 — 下拉菜单 */
      --dropdown-bg: rgba(232,230,224,0.96);
      --dropdown-blur: blur(12px);
      --dropdown-border: 1px solid #D1CEC6;
      --dropdown-radius: 8px;
      --dropdown-shadow: 0 4px 16px rgba(51,51,51,0.10);
      --dropdown-item-height: 44px;
      --dropdown-item-padding: 12px 20px 12px 24px;
      --dropdown-item-font-size: 14px;
      --dropdown-item-color: #4D4D4D;         /* WCAG 修正 */
      --dropdown-item-hover-color: #333333;
      --dropdown-item-hover-bg: rgba(168,147,121,0.06);
      --dropdown-item-active-color: #333333;  /* WCAG 修正 */
      --dropdown-item-active-border: 2px solid #A89379;
      --dropdown-divider: 1px solid #D1CEC6;
      --dropdown-caret-color: #8A8A8A;
      --dropdown-caret-hover-color: #A89379;

      /* N2. 语言切换按钮 */
      --lang-btn-height: 32px;
      --lang-btn-padding: 6px 16px;
      --lang-btn-font-size: 14px;
      --lang-btn-radius: 4px;
      --lang-active-color: #333333;           /* WCAG 修正 */
      --lang-active-border-color: #A89379;     /* WCAG 修正：仅存色值 */
      --lang-active-bg: rgba(168,147,121,0.08);
      --lang-inactive-color: #4D4D4D;         /* WCAG 修正 */
      --lang-inactive-hover-color: #333333;
      --lang-divider-color: #333333;
      --lang-divider-width: 2px;
      --lang-divider-height: 16px;

      /* N3. 页面标题区 */
      --page-title-bg: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --page-title-padding: 40px 40px;
      --page-title-h2-size: 28px;
      --page-title-h2-color: #333333;
      --page-title-line-width: 40px;
      --page-title-line-height: 2px;
      --page-title-line-color: #A89379;
      --page-title-desc-size: 18px;
      --page-title-desc-color: #4D4D4D;       /* WCAG 修正 */
      --page-title-desc-max-width: 640px;

      /* N4. 锚点偏移 */
      --anchor-offset: 72px;

      /* N5. 核心优势横幅 */
      --feature-banner-bg: #FFFFFF;
      --feature-banner-padding: 80px 40px 72px;
      --feature-card-bg: #FFFFFF;
      --feature-card-border: 1px solid #D1CEC6;
      --feature-card-radius: 8px;
      --feature-card-padding: 28px;
      --feature-card-icon-size: 48px;
      --feature-card-icon-bg: rgba(168,147,121,0.12);
      --feature-card-icon-color: #A89379;
      --feature-card-title-size: 22px;
      --feature-card-title-color: #333333;
      --feature-card-desc-size: 14px;
      --feature-card-desc-color: #4D4D4D;     /* WCAG 修正 */
      --feature-card-link-color: #333333;      /* WCAG 修正 */
      --feature-card-link-hover-color: #A89379;
      --feature-card-gap: 32px;

      /* N6. 信任背书缩略 */
      --trust-row-bg: #E8E6E0;
      --trust-row-padding: 56px 40px;
      --trust-badge-circle-size: 48px;
      --trust-badge-circle-bg: rgba(232,230,224,0.6);
      --trust-badge-icon-color: #A89379;
      --trust-badge-name-size: 14px;
      --trust-badge-name-color: #333333;
      --trust-badge-gap: 40px;
      --trust-row-link-color: #333333;         /* WCAG 修正 */
      --trust-row-link-hover-color: #A89379;
      --trust-row-label-color: #A89379;        /* WCAG 修正 */

      /* N7. 联系 CTA 横幅 */
      --cta-banner-bg: #333333;
      --cta-banner-padding: 80px 40px;
      --cta-banner-title-color: #FFFFFF;
      --cta-banner-desc-color: #D1CEC6;
      --cta-banner-desc-max-width: 560px;
    }

    /* === Container & Grid === */
    .container {
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--grid-gutter);
    }
    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--grid-gutter);
    }

    /* === Typography Utilities === */
    .display-serif {
      font-family: var(--font-display-serif);
      font-size: 64px;
      font-weight: 400;
      line-height: 1.08;
      letter-spacing: -0.02em;
    }
    .h2 {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 500;
      line-height: 1.35;
    }
    .h3 {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.4;
    }
    .h4 {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
    }
    .body-l {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.7;
    }
    .body-text {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.65;
    }
    .body-s {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
    }
    .caption {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.03em;
    }
    .micro {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0.05em;
    }
    .data-text {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
    }
    .data-bold {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
    }

    /* Editorial Labels — small-caps */
    .editorial-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      font-variant: small-caps;
      letter-spacing: 0.08em;
      color: var(--color-copper-soft);
    }

    /* === Buttons === */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 12px 28px;
      border-radius: var(--radius-md);
      background: var(--color-copper);
      color: var(--color-white);
      min-width: 120px;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-primary:hover {
      background: var(--color-copper-hover);
      box-shadow: 0 2px 8px rgba(168,147,121,0.25);
    }
    .btn-primary:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .btn-primary:active {
      background: #8A7560;
      transform: translateY(1px);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 12px 28px;
      border-radius: var(--radius-md);
      background: transparent;
      color: var(--color-carbon);
      border: 1px solid var(--color-carbon);
      min-width: 120px;
      transition: background 0.2s;
    }
    .btn-secondary:hover {
      background: rgba(51,51,51,0.05);
    }

    .btn-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: 14px 36px;
      border-radius: var(--radius-lg);
      background: var(--color-copper);
      color: var(--color-white);
      min-width: 160px;
      transition: transform 0.15s, box-shadow 0.2s;
    }
    .btn-cta:hover {
      transform: scale(1.02);
      box-shadow: var(--shadow-copper-glow);
    }
    .btn-cta:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .btn-cta:active {
      background: #8A7560;
      transform: scale(0.98);
    }
    /* ── focus-visible for interactive links (P1-3 WCAG) ── */
    .card-link:focus-visible,
    .feature-card__link:focus-visible,
    .trust-badge-row__link:focus-visible,
    .nav-dropdown-item:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .footer-link:focus-visible,
    .lang-btn--inactive:focus-visible {
      outline: 1px solid var(--color-copper);
      outline-offset: 1px;
    }

    /* === Tags === */
    .tag-adult {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      background: var(--color-adult-bg-accent);
      color: var(--color-adult-tag);
      border: 1px solid var(--color-adult-accent-soft);
    }
    .tag-kids {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-md);
      background: var(--color-kids-bg-primary);
      color: var(--color-kids-tag);
      border: 1px solid var(--color-kids-primary-soft);
    }
    .tag-spec {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 400;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      background: var(--color-cloud-light);
      color: var(--color-slate);
    }

    /* === v4.1 新增分类 Tag — 四大产品线 === */
    .tag-clothing-rack {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-md);
      background: var(--color-kids-bg-primary);
      color: var(--color-kids-primary);
      border: 1px solid var(--color-kids-primary-soft);
    }
    .tag-mannequin {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-md);
      background: var(--color-kids-bg-secondary);
      color: var(--color-kids-secondary);
      border: 1px solid var(--color-kids-secondary-soft);
    }
    .tag-neutral {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      background: rgba(51,51,51,0.06);
      color: var(--color-carbon);
      border: 1px solid var(--color-carbon-soft);
    }

    /* === Coming Soon Overview — 轻量占位区块 === */
    .section-coming-soon {
      padding: var(--space-3xl) 0;
    }
    .coming-soon-overview-note {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-carbon-soft);
      margin-top: var(--space-sm);
    }
    .category-link {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-carbon);
      text-decoration-color: var(--color-copper);
      margin-top: var(--space-md);
      transition: color 0.15s ease;
    }
    .category-link:hover {
      color: var(--color-copper);
      text-decoration: underline;
    }
    .category-link:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .category-link::after {
      content: '→';
      margin-left: 4px;
    }

    /* === Editorial Decorations === */
    .copper-line-decor {
      width: 40px;
      height: 2px;
      background: var(--color-copper);
      margin-top: var(--space-sm);
    }
    .editorial-divider-line {
      width: 60px;
      height: 2px;
      background: var(--color-copper);
      margin: auto;
    }
    .divider-section-line {
      width: 120px;
      height: 1px;
      background: var(--color-line);
      margin: auto;
    }
    .hero-gradient-line {
      width: 100%;
      height: 1px;
      background: var(--gradient-hero-line);
      margin-top: var(--space-3xl);
    }

    /* === N1: Multi-page Navigation — v4.0 === */
    .nav-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 72px;
      background: rgba(240,237,231,0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--color-line);
      z-index: var(--z-sticky);
      display: flex;
      align-items: center;
    }
    .nav-bar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: var(--space-lg);
    }
    .nav-logo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .nav-logo-cn {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-carbon);
    }
    .nav-logo-en {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      font-variant: small-caps;
      letter-spacing: 0.05em;
      color: var(--color-carbon-light); /* WCAG 修正 */
    }
    .nav-items {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    /* Nav Item — WCAG 修正: 默认色 carbon-light */
    .nav-item {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--nav-default-color); /* #4D4D4D — WCAG 5.6:1 */
      padding: 10px 20px;
      text-decoration: none;
      position: relative;
      transition: color 0.2s ease;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .nav-item:hover {
      color: var(--color-carbon);
    }

    /* Nav Active — 温铜下划线标识 */
    .nav-item--active {
      color: var(--nav-active-color); /* #333333 */
      font-weight: var(--nav-active-weight); /* 500 */
    }
    .nav-item--active::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 20px;
      right: 20px;
      height: 2px;
      background-color: var(--color-copper);
    }

    /* Dropdown Indicator */
    .nav-dropdown-caret {
      font-size: 10px;
      color: var(--dropdown-caret-color); /* #8A8A8A */
      transition: color 0.2s ease;
      line-height: 1;
    }
    .nav-item:hover .nav-dropdown-caret {
      color: var(--dropdown-caret-hover-color); /* #A89379 */
    }

    /* Dropdown Container */
    .nav-dropdown-wrap {
      position: relative;
    }
    .nav-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 180px;
      max-width: 240px;
      background: var(--dropdown-bg);
      backdrop-filter: var(--dropdown-blur);
      -webkit-backdrop-filter: var(--dropdown-blur);
      border: var(--dropdown-border);
      border-radius: var(--dropdown-radius);
      box-shadow: var(--dropdown-shadow);
      padding: 16px 0;
      z-index: var(--z-dropdown);
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 200ms ease-out, transform 200ms ease-out;
      pointer-events: none;
      list-style: none;
      margin-top: 12px; /* padding gap below nav item */
    }
    .nav-dropdown-wrap:hover .nav-dropdown,
    .nav-dropdown--open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Dropdown Item — WCAG 修正 */
    .nav-dropdown-item {
      display: block;
      color: var(--dropdown-item-color); /* #4D4D4D — WCAG 5.6:1 */
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      padding: 12px 20px 12px 24px;
      text-decoration: none;
      border-left: 2px solid transparent;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }
    .nav-dropdown-item:hover {
      color: var(--dropdown-item-hover-color); /* #333333 */
      background: var(--dropdown-item-hover-bg);
    }

    /* N2: Language Switcher — WCAG 修正 */
    .lang-switcher {
      display: flex;
      align-items: center;
      height: 32px;
      margin-right: 16px;
    }
    .lang-btn {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      padding: 6px 16px;
      border-radius: var(--lang-btn-radius);
      text-decoration: none;
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      cursor: pointer;
      line-height: 1;
    }
    /* Active — WCAG: carbon 文字 + 温铜边框 + 极浅温铜背景 */
    .lang-btn--active {
      color: var(--lang-active-color); /* #333333 — 9.7:1 ✅ */
      border: 1px solid var(--lang-active-border-color); /* #A89379 */
      background: var(--lang-active-bg); /* rgba(168,147,121,0.08) */
    }
    /* Inactive — WCAG: carbon-light 文字 */
    .lang-btn--inactive {
      color: var(--lang-inactive-color); /* #4D4D4D — 5.6:1 ✅ */
      border: none;
      background: transparent;
    }
    .lang-btn--inactive:hover {
      color: var(--lang-inactive-hover-color); /* #333333 */
    }
    .lang-divider {
      width: 2px;
      height: 16px;
      background-color: var(--lang-divider-color);
      margin: 0 4px;
      flex-shrink: 0;
    }

    /* Nav CTA Button */
    .nav-cta {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 10px 24px;
      border-radius: var(--radius-md);
      background: var(--color-copper);
      color: var(--color-white);
      text-decoration: none;
      transition: background 0.2s;
    }
    .nav-cta:hover {
      background: var(--color-copper-hover);
    }

    /* Hamburger */
    .nav-hamburger {
      display: none;
      width: 24px;
      height: 24px;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
    }
    .nav-hamburger span {
      width: 100%;
      height: 2px;
      background: var(--color-carbon);
      transition: transform 0.2s;
    }

    /* Mobile Menu */
    .nav-mobile-menu {
      display: none;
      position: fixed;
      top: 72px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(240,237,231,0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 24px 20px;
      z-index: var(--z-dropdown);
      overflow-y: auto;
    }
    .nav-mobile-menu--open {
      display: block;
    }
    .nav-mobile-menu .nav-item {
      display: block;
      padding: 16px 0;
      border-left: 2px solid transparent;
      font-size: 16px;
    }
    .nav-mobile-menu .nav-item--active {
      border-left-color: var(--color-copper);
      color: var(--color-copper);
      font-weight: 500;
    }
    .nav-mobile-menu .nav-item--active::after {
      display: none; /* Mobile 用左边框而非下划线 */
    }
    .nav-mobile-menu .nav-dropdown-item {
      padding: 12px 0 12px 16px;
      font-size: 13px;
      display: block;
    }
    .nav-mobile-menu .lang-switcher {
      margin-right: 0;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid var(--color-cloud-dark);
      justify-content: center;
    }
    .nav-mobile-menu .nav-cta {
      display: block;
      text-align: center;
      margin-top: 24px;
      font-size: 16px;
      padding: 14px 36px;
      border-radius: var(--radius-lg);
    }
    .mobile-dropdown-sub {
      display: none;
      padding-left: 16px;
    }
    .mobile-dropdown-sub--open {
      display: block;
    }

    /* === Section: Hero + Brand Manifest — 开篇宣言 === */
    .hero {
      background: var(--gradient-hero);
      padding-top: var(--space-5xl);
      padding-bottom: var(--space-4xl);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .hero-content {
      text-align: center;
      color: var(--color-white);
    }
    .hero-brand {
      margin-bottom: var(--space-2xl);
    }
    .hero-brand-cn {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 500;
      color: var(--color-copper-soft);
      margin-bottom: var(--space-2xs);
    }
    .hero-brand-en {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 400;
      font-variant: small-caps;
      letter-spacing: 0.08em;
      color: var(--color-cloud-dark); /* #D1CEC6 — 对比度 5.5:1 ✅ WCAG AA */
    }
    .hero-tagline-cn {
      font-family: var(--font-serif-zh);
      font-size: 52px;
      font-weight: 400;
      line-height: 1.12;
      letter-spacing: -0.01em;
      color: var(--color-white);
      margin-bottom: var(--space-sm);
    }
    .hero-tagline-serif {
      font-family: var(--font-display-serif);
      font-size: 24px;
      line-height: 1.2;
      opacity: 0.5;
      color: var(--color-white);
      margin-bottom: var(--space-md);
    }
    .hero-subtitle {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.7;
      color: var(--color-cloud-dark);
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: var(--space-2xl);
    }
    .hero-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-lg);
    }
    .hero-actions .btn-secondary {
      color: var(--color-white);
      border-color: var(--color-white);
    }
    .hero-actions .btn-secondary:hover {
      background: rgba(255,255,255,0.1);
    }
    .hero-gradient-line-wrap {
      margin-top: var(--space-3xl);
    }

    /* === Editorial Divider === */
    .editorial-divider {
      height: var(--space-editorial);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--color-white);
    }
    .editorial-divider .editorial-label {
      margin-top: var(--space-sm);
    }

    /* === Product Grid — Adult Series === */
    .section-adult {
      padding: var(--space-4xl) 0;
      background: var(--color-white);
    }
    .section-header {
      text-align: center;
      margin-bottom: var(--space-3xl);
    }
    .section-header .h2 {
      color: var(--color-carbon);
    }
    .section-header .copper-line-decor {
      margin-left: auto;
      margin-right: auto;
    }
    .section-header .body-s {
      color: var(--color-carbon-light); /* WCAG 修正 */
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
      margin-top: var(--space-md);
    }
    .product-card {
      background: var(--color-white);
      border-radius: var(--radius-card);
      padding: 28px;
      box-shadow: var(--shadow-raised);
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
    }
    .product-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-elevated);
    }
    .product-card .card-tag {
      position: absolute;
      top: var(--space-md);
      right: var(--space-md);
    }
    .product-card .card-image {
      width: 100%;
      aspect-ratio: 4/3;
      background: var(--color-cloud);
      border-radius: var(--radius-xl);
      margin-bottom: var(--space-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .product-card.card-kids .card-image {
      background: var(--color-kids-bg-primary);
    }
    .product-card .card-image svg {
      width: 80%;
      height: 80%;
    }
    .product-card .card-title {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
      color: var(--color-carbon);
      position: relative;
      padding-bottom: var(--space-md);
    }
    .product-card .card-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 1px;
      background: var(--color-copper);
    }
    .product-card.card-kids .card-title::after {
      background: var(--color-kids-primary);
    }
    .product-card .card-desc {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
      color: var(--color-carbon-light); /* WCAG 修正 */
      margin-top: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .product-card .card-specs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }
    /* "查看详情 →" Link on product cards */
    .product-card .card-link {
      display: block;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-carbon); /* WCAG 修正 */
      text-decoration-color: var(--color-copper);
      margin-top: var(--space-md);
      transition: color 0.15s ease;
    }
    .product-card .card-link:hover {
      color: var(--color-copper);
      text-decoration: underline;
    }
    .product-card .card-link::after {
      content: '→';
      margin-left: 4px;
    }

    /* === Product Grid — Kids Series === */
    .section-kids {
      padding: var(--space-4xl) 0;
      background: var(--color-cloud);
    }
    .section-kids .product-card {
      background: var(--color-white);
    }

    /* Kids Series Label override */
    .editorial-label-kids {
      color: var(--color-kids-primary-soft);
    }
    .copper-line-decor-kids {
      background: var(--color-kids-primary);
    }

    /* === N5: Feature Banner — 核心优势横幅 === */
    .feature-banner {
      background: var(--feature-banner-bg);
      padding: var(--feature-banner-padding);
      max-width: var(--container-max);
      margin: 0 auto;
    }
    .feature-banner__label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      font-variant: small-caps;
      letter-spacing: 0.08em;
      color: var(--color-copper-soft);
      margin-bottom: 16px;
    }
    .feature-banner__title {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 500;
      color: var(--feature-card-title-color);
      line-height: 1.35;
      margin-bottom: 48px;
    }
    .feature-banner__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--feature-card-gap);
    }

    /* Feature Card */
    .feature-card {
      background: var(--feature-card-bg);
      border: var(--feature-card-border);
      border-radius: var(--feature-card-radius);
      padding: var(--feature-card-padding);
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .feature-card:hover {
      border-color: var(--color-copper-soft);
      transform: translateY(-2px);
    }
    .feature-card__icon {
      width: var(--feature-card-icon-size);
      height: var(--feature-card-icon-size);
      border-radius: 50%;
      background: var(--feature-card-icon-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }
    .feature-card__icon svg {
      width: 24px;
      height: 24px;
      color: var(--feature-card-icon-color);
    }
    .feature-card__title {
      font-family: var(--font-heading);
      font-size: var(--feature-card-title-size);
      font-weight: 500;
      color: var(--feature-card-title-color);
      line-height: 1.4;
      margin: 0 0 12px 0;
    }
    /* WCAG 修正: description 用 carbon-light */
    .feature-card__description {
      font-family: var(--font-body);
      font-size: var(--feature-card-desc-size);
      font-weight: 400;
      color: var(--feature-card-desc-color); /* #4D4D4D — WCAG 7.0:1 */
      line-height: 1.55;
      margin: 0 0 20px 0;
    }
    /* WCAG 修正: link 用 carbon + 温铜 underline */
    .feature-card__link {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      color: var(--feature-card-link-color); /* #333333 — WCAG 12.6:1 */
      text-decoration-color: var(--color-copper);
      text-decoration: none;
      transition: color 0.15s ease, text-decoration 0.15s ease;
    }
    .feature-card__link:hover {
      color: var(--feature-card-link-hover-color);
      text-decoration: underline;
    }
    .feature-card__link::after {
      content: '→';
      margin-left: 4px;
    }

    /* === N6: Trust Badge Row — 信任背书缩略 === */
    .trust-badge-row {
      background: var(--trust-row-bg);
      padding: var(--trust-row-padding);
      max-width: var(--container-max);
      margin: 0 auto;
    }
    /* WCAG 修正: label 用 copper 而非 copper-soft */
    .trust-badge-row__label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      font-variant: small-caps;
      letter-spacing: 0.08em;
      color: var(--trust-row-label-color); /* #A89379 — WCAG 3.1:1 装饰 ✅ */
      text-align: center;
      margin-bottom: 32px;
    }
    .trust-badge-row__badges {
      display: flex;
      justify-content: center;
      gap: var(--trust-badge-gap);
    }
    .trust-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: default;
    }
    .trust-badge__circle {
      width: var(--trust-badge-circle-size);
      height: var(--trust-badge-circle-size);
      border-radius: 50%;
      background: var(--trust-badge-circle-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }
    .trust-badge:hover .trust-badge__circle {
      transform: scale(1.05);
    }
    .trust-badge__circle svg {
      width: 24px;
      height: 24px;
      color: var(--trust-badge-icon-color);
      transition: color 0.2s ease;
    }
    .trust-badge:hover .trust-badge__circle svg {
      color: var(--color-copper-hover);
    }
    .trust-badge__name {
      font-family: var(--font-body);
      font-size: var(--trust-badge-name-size);
      font-weight: 600;
      color: var(--trust-badge-name-color);
      margin-top: 12px;
      text-align: center;
    }
    /* WCAG 修正: link 用 carbon + 温铜 underline */
    .trust-badge-row__link {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      color: var(--trust-row-link-color); /* #333333 — WCAG 8.2:1 */
      text-decoration-color: var(--color-copper);
      text-decoration: none;
      text-align: center;
      margin-top: 32px;
      display: block;
      transition: color 0.15s ease, text-decoration 0.15s ease;
    }
    .trust-badge-row__link:hover {
      color: var(--trust-row-link-hover-color);
      text-decoration: underline;
    }
    .trust-badge-row__link::after {
      content: '→';
      margin-left: 4px;
    }

    /* === N7: Contact CTA Banner — 联系CTA横幅 === */
    .contact-cta-banner {
      background: var(--cta-banner-bg);
      padding: var(--cta-banner-padding);
      text-align: center;
    }
    .contact-cta-banner__title {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 500;
      color: var(--cta-banner-title-color);
      line-height: 1.35;
      margin: 0 0 16px 0;
    }
    .contact-cta-banner__description {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 400;
      color: var(--cta-banner-desc-color);
      line-height: 1.7;
      max-width: var(--cta-banner-desc-max-width);
      margin: 0 auto 32px auto;
    }
    .contact-cta-banner__btn {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
      color: #FFFFFF;
      background: var(--color-copper);
      border: none;
      border-radius: var(--radius-lg);
      padding: 14px 36px;
      letter-spacing: 0.03em;
      text-decoration: none;
      cursor: pointer;
      display: inline-block;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }
    .contact-cta-banner__btn:hover {
      background: var(--color-copper-hover);
      transform: scale(1.02);
      box-shadow: var(--shadow-copper-glow);
    }
    .contact-cta-banner__btn:active {
      background: #8A7560;
      transform: scale(0.98);
    }

    /* === Footer === */
    .footer {
      background: var(--color-carbon);
      padding: var(--space-2xl) 0 var(--space-xl);
      border-top: 1px solid var(--color-carbon-light);
      color: var(--color-cloud-dark);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--grid-gutter);
    }
    .footer-col .footer-title {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-cloud-dark);
      margin-bottom: var(--space-md);
    }
    .footer-col .footer-link {
      display: block;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-cloud-dark);
      padding: var(--space-2xs) 0;
      transition: color 0.2s;
    }
    .footer-col .footer-link:hover {
      color: var(--color-copper-soft);
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--space-xl);
      padding-top: var(--space-lg);
      border-top: 1px solid var(--color-carbon-light);
    }
    .footer-bottom .micro {
      color: var(--color-cloud-dark);
    }
    .footer-brand {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      color: var(--color-cloud-dark);
    }

    /* === Anchor Offset — v4.0 N4 === */
    .anchor-offset,
    [id="adult"],
    [id="kids"],
    [id="hangers"],
    [id="clothing-rack"],
    [id="mannequin"],
    [id="display-props"],
    [id="oem"],
    [id="trust"],
    [id="process"] {
      scroll-margin-top: 72px;
    }

    /* === Responsive — Desktop ≥ 1024px (default) === */

    /* === Responsive — Tablet 640–1024px === */
    @media (max-width: 1024px) {
      .grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
      .grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }
      .feature-banner__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      .feature-banner {
        padding: 60px 32px 56px;
      }
      .feature-banner__title {
        font-size: 24px;
        margin-bottom: 36px;
      }
      .feature-card {
        padding: 24px;
      }
      .trust-badge-row {
        padding: 40px 32px;
      }
      .trust-badge-row__badges {
        gap: 28px;
      }
      .trust-badge__name {
        font-size: 13px;
      }
      .contact-cta-banner {
        padding: 60px 32px;
      }
      .contact-cta-banner__title {
        font-size: 24px;
      }
      .contact-cta-banner__description {
        font-size: 16px;
      }
      .contact-cta-banner__btn {
        font-size: 16px;
        padding: 12px 28px;
      }
      .lang-btn {
        font-size: 13px;
        padding: 4px 12px;
      }
      .nav-item {
        padding: 8px 16px;
      }
      .nav-items {
        gap: 2px;
      }
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* === Responsive — Mobile < 640px === */
    @media (max-width: 640px) {
      .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
      }
      .grid-3,
      .grid-4 {
        grid-template-columns: 1fr;
      }

      /* Nav: hide desktop nav items, show hamburger */
      .nav-items,
      .lang-switcher-desktop {
        display: none;
      }
      .nav-hamburger {
        display: flex;
      }

      /* Hero Mobile */
      .hero {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-3xl);
        min-height: auto;
      }
      .hero-tagline-cn {
        font-size: 40px;
        line-height: 1.15;
      }
      .hero-tagline-serif {
        font-size: 18px;
      }
      .hero-subtitle {
        font-size: 16px;
      }
      .hero-actions {
        flex-direction: column;
        gap: var(--space-md);
      }

      /* Editorial Divider Mobile */
      .editorial-divider {
        height: 48px;
      }
      .editorial-divider .editorial-divider-line {
        width: 40px;
      }
      .editorial-divider .editorial-label {
        font-size: 10px;
      }

      /* Section spacing Mobile */
      .section-adult,
      .section-kids {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
      }

      /* Feature Banner Mobile */
      .feature-banner {
        padding: 48px 20px 40px;
      }
      .feature-banner__title {
        font-size: 22px;
        margin-bottom: 28px;
      }
      .feature-banner__grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .feature-card {
        padding: 20px;
      }
      .feature-card__title {
        font-size: 18px;
      }
      .feature-card__link {
        font-size: 13px;
      }

      /* Trust Badge Row Mobile */
      .trust-badge-row {
        padding: 40px 20px;
      }
      .trust-badge-row__badges {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        justify-items: center;
      }
      .trust-badge__name {
        font-size: 13px;
      }
      .trust-badge-row__link {
        font-size: 13px;
      }

      /* Contact CTA Banner Mobile */
      .contact-cta-banner {
        padding: 48px 20px;
      }
      .contact-cta-banner__title {
        font-size: 22px;
      }
      .contact-cta-banner__description {
        font-size: 15px;
        max-width: 100%;
      }
      .contact-cta-banner__btn {
        font-size: 15px;
        padding: 12px 24px;
      }

      /* Footer Mobile */
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
      }
      .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
      }

      /* Typography Mobile */
      .h2 {
        font-size: 24px;
      }
    }

    /* === Accessibility: prefers-reduced-motion === */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
      html { scroll-behavior: auto; }
      .product-card:hover { transform: none; }
      .feature-card:hover { transform: none; }
      .btn-cta:hover { transform: none; }
      .contact-cta-banner__btn:hover { transform: none; }
    }

    /* === Anti-Slop Quality Controls === */
    /* No purple gradients, no emoji icons, no generic rounded+border-accent pattern */
    /* No Inter as display font, no fabricated stats */
    /* This prototype uses: carbon+cloud+copper palette, DM Sans heading, editorial whitespace */

/* === Source: hanger-suit-wide-cn.html === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--color-carbon); background: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    :root {
      --color-carbon: #333333; --color-carbon-light: #4D4D4D; --color-carbon-soft: #6E6E6E; --color-mist: #8A8A8A;
      --color-white: #FFFFFF; --color-cloud: #E8E6E0; --color-cloud-light: #F0EDE7; --color-cloud-dark: #D1CEC6; --color-line: #C4C0B8;
      --color-copper: #A89379; --color-copper-hover: #9A8268; --color-copper-soft: #C4B5A0; --color-copper-pale: #E8DFD0;
      --color-slate: #9BABB8; --color-slate-hover: #8A9DAC; --color-slate-soft: #B8C8D4;
      --color-adult-accent: #A89379; --color-adult-accent-soft: #C4B5A0; --color-adult-bg-accent: #E8DFD0; --color-adult-tag: #A89379; --color-adult-line: #C4B5A0;
      --color-kids-primary: #5BBFDE; --color-kids-secondary: #F4A261; --color-kids-primary-soft: #A8DCF0; --color-kids-secondary-soft: #F8C896; --color-kids-bg-primary: #EBF5FA; --color-kids-bg-secondary: #FFF3E8; --color-kids-tag: #5BBFDE;
      --color-success: #7DB88A; --color-warning: #C9A96E; --color-danger: #D4564A; --color-info: #9BABB8;
      --gradient-hero: linear-gradient(180deg, #333333 0%, #4D4D4D 60%, #E8E6E0 100%);
      --gradient-copper-wash: linear-gradient(135deg, #A89379 0%, #C4B5A0 50%, #E8DFD0 100%);
      --gradient-cloud-rise: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --gradient-kids: linear-gradient(135deg, #5BBFDE 0%, #F4A261 100%);
      --gradient-hero-line: linear-gradient(90deg, transparent 0%, #A89379 50%, transparent 100%);
      --font-display-serif: 'Source Serif 4', 'Noto Serif SC', 'Georgia', serif;
      --font-heading: 'DM Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
      --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
      --font-serif-zh: 'Noto Serif SC', 'STSong', 'SimSun', serif;
      --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px; --space-xl: 40px; --space-2xl: 56px; --space-3xl: 72px; --space-4xl: 96px; --space-5xl: 120px; --space-editorial: 80px;
      --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-card: 16px;
      --shadow-flat: none; --shadow-subtle: 0 1px 3px rgba(51,51,51,0.05); --shadow-soft: 0 2px 8px rgba(51,51,51,0.07); --shadow-raised: 0 3px 12px rgba(51,51,51,0.08); --shadow-elevated: 0 6px 20px rgba(51,51,51,0.12); --shadow-floating: 0 8px 28px rgba(51,51,51,0.14); --shadow-copper-glow: 0 4px 16px rgba(168,147,121,0.20);
      --z-base: 0; --z-decorative: 50; --z-sticky: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400;
      --container-max: 1200px; --grid-gutter: 32px;
      --nav-active-color: #333333; --nav-active-underline: 2px solid #A89379; --nav-active-weight: 500; --nav-default-color: #4D4D4D; --nav-default-weight: 400;
      --dropdown-bg: rgba(232,230,224,0.96); --dropdown-blur: blur(12px); --dropdown-border: 1px solid #D1CEC6; --dropdown-radius: 8px; --dropdown-shadow: 0 4px 16px rgba(51,51,51,0.10); --dropdown-item-height: 44px; --dropdown-item-padding: 12px 20px 12px 24px; --dropdown-item-font-size: 14px; --dropdown-item-color: #4D4D4D; --dropdown-item-hover-color: #333333; --dropdown-item-hover-bg: rgba(168,147,121,0.06); --dropdown-item-active-color: #333333; --dropdown-item-active-border: 2px solid #A89379; --dropdown-divider: 1px solid #D1CEC6; --dropdown-caret-color: #8A8A8A; --dropdown-caret-hover-color: #A89379;
      --lang-btn-height: 32px; --lang-btn-padding: 6px 16px; --lang-btn-font-size: 14px; --lang-btn-radius: 4px; --lang-active-color: #333333; --lang-active-border-color: #A89379; --lang-active-bg: rgba(168,147,121,0.08); --lang-inactive-color: #4D4D4D; --lang-inactive-hover-color: #333333; --lang-divider-color: #333333; --lang-divider-width: 2px; --lang-divider-height: 16px;
      --page-title-bg: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%); --page-title-padding: 40px 40px; --page-title-h2-size: 28px; --page-title-h2-color: #333333; --page-title-line-width: 40px; --page-title-line-height: 2px; --page-title-line-color: #A89379; --page-title-desc-size: 18px; --page-title-desc-color: #4D4D4D; --page-title-desc-max-width: 640px;
      --anchor-offset: 72px;
    }

    .container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
    .h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 500; line-height: 1.35; }
    .h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 500; line-height: 1.4; }
    .body-s { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.55; }
    .micro { font-family: var(--font-body); font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: 0.05em; }
    .editorial-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; font-variant: small-caps; letter-spacing: 0.08em; color: var(--color-copper-soft); }

    .btn-primary { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; padding: 12px 28px; border-radius: var(--radius-md); background: var(--color-copper); color: var(--color-white); min-width: 120px; transition: background 0.2s, box-shadow 0.2s; }
    .btn-primary:hover { background: var(--color-copper-hover); box-shadow: 0 2px 8px rgba(168,147,121,0.25); }
    .btn-primary:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .btn-primary:active { background: #8A7560; transform: translateY(1px); }
    .btn-cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 18px; font-weight: 600; letter-spacing: 0.03em; padding: 14px 36px; border-radius: var(--radius-lg); background: var(--color-copper); color: var(--color-white); min-width: 160px; transition: transform 0.15s, box-shadow 0.2s; }
    .btn-cta:hover { transform: scale(1.02); box-shadow: var(--shadow-copper-glow); }
    .btn-cta:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .btn-cta:active { background: #8A7560; transform: scale(0.98); }
    .nav-dropdown-item:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .footer-link:focus-visible, .lang-btn--inactive:focus-visible { outline: 1px solid var(--color-copper); outline-offset: 1px; }

    .tag-adult { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-sm); background: var(--color-adult-bg-accent); color: var(--color-adult-tag); border: 1px solid var(--color-adult-accent-soft); }
    .tag-kids { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-md); background: var(--color-kids-bg-primary); color: var(--color-kids-tag); border: 1px solid var(--color-kids-primary-soft); }
    .tag-spec { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-cloud-light); color: var(--color-slate); }
    .tag-spec-kids { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: var(--radius-md); background: var(--color-kids-bg-primary); color: var(--color-kids-primary); }
    .tag-spec-kids-secondary { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: var(--radius-md); background: var(--color-kids-bg-secondary); color: var(--color-kids-secondary); }

    .copper-line-decor { width: 40px; height: 2px; background: var(--color-copper); margin-top: var(--space-sm); }

    /* Nav */
    .nav-bar { position: fixed; top: 0; left: 0; right: 0; height: 72px; background: rgba(240,237,231,0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-line); z-index: var(--z-sticky); display: flex; align-items: center; }
    .nav-bar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-lg); }
    .nav-logo { display: flex; flex-direction: column; align-items: flex-start; }
    .nav-logo-cn { font-family: var(--font-heading); font-size: 18px; font-weight: 500; color: var(--color-carbon); }
    .nav-logo-en { font-family: var(--font-body); font-size: 14px; font-weight: 400; font-variant: small-caps; letter-spacing: 0.05em; color: var(--color-carbon-light); }
    .nav-items { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .nav-item { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--nav-default-color); padding: 10px 20px; text-decoration: none; position: relative; transition: color 0.2s ease; display: flex; align-items: center; gap: 4px; }
    .nav-item:hover { color: var(--color-carbon); }
    .nav-item--active { color: var(--nav-active-color); font-weight: var(--nav-active-weight); }
    .nav-item--active::after { content: ''; position: absolute; bottom: 4px; left: 20px; right: 20px; height: 2px; background-color: var(--color-copper); }
    .nav-dropdown-caret { font-size: 10px; color: var(--dropdown-caret-color); transition: color 0.2s ease; line-height: 1; }
    .nav-item:hover .nav-dropdown-caret { color: var(--dropdown-caret-hover-color); }
    .nav-dropdown-wrap { position: relative; }
    .nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 180px; max-width: 240px; background: var(--dropdown-bg); backdrop-filter: var(--dropdown-blur); -webkit-backdrop-filter: var(--dropdown-blur); border: var(--dropdown-border); border-radius: var(--dropdown-radius); box-shadow: var(--dropdown-shadow); padding: 16px 0; z-index: var(--z-dropdown); opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease-out, transform 200ms ease-out; pointer-events: none; list-style: none; margin-top: 12px; }
    .nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown--open { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .nav-dropdown-item { display: block; color: var(--dropdown-item-color); font-family: var(--font-body); font-size: 14px; font-weight: 400; padding: 12px 20px 12px 24px; text-decoration: none; border-left: 2px solid transparent; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
    .nav-dropdown-item:hover { color: var(--dropdown-item-hover-color); background: var(--dropdown-item-hover-bg); }
    .lang-switcher { display: flex; align-items: center; height: 32px; margin-right: 16px; }
    .lang-btn { font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 6px 16px; border-radius: var(--lang-btn-radius); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; cursor: pointer; line-height: 1; }
    .lang-btn--active { color: var(--lang-active-color); border: 1px solid var(--lang-active-border-color); background: var(--lang-active-bg); }
    .lang-btn--inactive { color: var(--lang-inactive-color); border: none; background: transparent; }
    .lang-btn--inactive:hover { color: var(--lang-inactive-hover-color); }
    .lang-divider { width: 2px; height: 16px; background-color: var(--lang-divider-color); margin: 0 4px; flex-shrink: 0; }
    .nav-cta { font-family: var(--font-heading); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; padding: 10px 24px; border-radius: var(--radius-md); background: var(--color-copper); color: var(--color-white); text-decoration: none; transition: background 0.2s; }
    .nav-cta:hover { background: var(--color-copper-hover); }
    .nav-hamburger { display: none; width: 24px; height: 24px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; }
    .nav-hamburger span { width: 100%; height: 2px; background: var(--color-carbon); transition: transform 0.2s; }
    .nav-mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: rgba(240,237,231,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 24px 20px; z-index: var(--z-dropdown); overflow-y: auto; }
    .nav-mobile-menu--open { display: block; }
    .nav-mobile-menu .nav-item { display: block; padding: 16px 0; border-left: 2px solid transparent; font-size: 16px; }
    .nav-mobile-menu .nav-item--active { border-left-color: var(--color-copper); color: var(--color-copper); font-weight: 500; }
    .nav-mobile-menu .nav-item--active::after { display: none; }
    .nav-mobile-menu .nav-dropdown-item { padding: 12px 0 12px 16px; font-size: 13px; display: block; }
    .nav-mobile-menu .lang-switcher { margin-right: 0; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-cloud-dark); justify-content: center; }
    .nav-mobile-menu .nav-cta { display: block; text-align: center; margin-top: 24px; font-size: 16px; padding: 14px 36px; border-radius: var(--radius-lg); }
    .mobile-dropdown-sub { display: none; padding-left: 16px; }
    .mobile-dropdown-sub--open { display: block; }

    /* Breadcrumb */
    .breadcrumb { padding-top: 96px; background: var(--color-white); }
    .breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); font-family: var(--font-body); font-size: 13px; color: var(--color-carbon-soft); padding-bottom: var(--space-md); }
    .breadcrumb__link { color: var(--color-carbon-soft); transition: color 0.15s ease; }
    .breadcrumb__link:hover { color: var(--color-copper); }
    .breadcrumb__link:focus-visible { outline: 1px solid var(--color-copper); outline-offset: 2px; }
    .breadcrumb__separator { color: var(--color-mist); font-size: 11px; }
    .breadcrumb__current { color: var(--color-carbon); font-weight: 500; }

    /* === Product Detail Page Components === */
    .product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; padding: var(--space-2xl) 0 var(--space-3xl); }
    .product-hero__image { background: var(--color-cloud-light); border-radius: var(--radius-card); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; padding: var(--space-xl); overflow: hidden;}
    .product-hero__image svg { width: 75%; height: 75%; }
    .product-hero__image--kids { background: var(--color-kids-bg-primary); }
    .product-hero__content { display: flex; flex-direction: column; gap: var(--space-sm); }
    .product-hero__tag { align-self: flex-start; margin-bottom: var(--space-xs); }
    .product-hero__title { font-family: var(--font-heading); font-size: 28px; font-weight: 500; color: var(--color-carbon); line-height: 1.35; margin: 0; }
    .product-hero__line { width: 40px; height: 2px; background: var(--color-copper); margin: var(--space-xs) 0; }
    .product-hero__line--kids { background: var(--color-kids-primary); }
    .product-hero__desc { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--color-carbon-light); line-height: 1.7; margin-top: var(--space-xs); }
    .product-hero__specs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
    .product-hero__cta { margin-top: var(--space-lg); align-self: flex-start; }

    /* Detail Section */
    .detail-section { padding: var(--space-3xl) 0; }
    .detail-section--cloud { background: var(--color-cloud); }
    .detail-section--cloud-light { background: var(--color-cloud-light); }
    .detail-section--kids-cloud { background: var(--color-kids-bg-primary); }
    .detail-section__title { font-family: var(--font-heading); font-size: 22px; font-weight: 500; color: var(--color-carbon); margin-bottom: var(--space-xl); position: relative; padding-bottom: var(--space-sm); }
    .detail-section__title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--color-copper); }
    .detail-section__title--kids::after { background: var(--color-kids-primary); }

    /* Spec Table */
    .spec-table-wrap { background: var(--color-cloud-light); border-radius: var(--radius-xl); padding: var(--space-lg); }
    .spec-table-wrap.card-kids-spec { background: var(--color-kids-bg-primary); }
    .spec-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-line); }
    .spec-table th { background: var(--color-cloud); font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--color-carbon); padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 2px solid var(--color-copper-soft); }
    .spec-table.card-kids-table th { border-bottom-color: var(--color-kids-primary-soft); background: #D8EFF7; }
    .spec-table td { background: var(--color-white); font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--color-carbon-light); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-line); }
    .spec-table td.spec-param { font-weight: 500; color: var(--color-carbon); }
    .spec-table td.spec-value { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--color-slate); }
    .spec-table.card-kids-table td.spec-value { color: var(--color-kids-primary); }
    .spec-table tbody tr:hover { background: rgba(168,147,121,0.06); }
    .spec-table.card-kids-table tbody tr:hover { background: rgba(91,191,222,0.06); }
    .spec-table-label { font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--color-carbon); margin-bottom: var(--space-md); }

    /* Feature Card */
    .feature-card { background: var(--color-white); border: 1px solid var(--color-cloud-dark); border-radius: var(--radius-card); padding: var(--space-lg); transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .feature-card__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); background: var(--color-cloud-light); border-radius: var(--radius-md); }
    .feature-card__icon--kids { background: var(--color-kids-bg-primary); }
    .feature-card__title { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--color-carbon); margin-bottom: var(--space-xs); }
    .feature-card__desc { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--color-carbon-soft); line-height: 1.55; }

    /* Scenario Tags */
    .scenario-grid { display: flex; flex-wrap: wrap; gap: var(--space-md); }
    .scenario-tag { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-white); border: 1px solid var(--color-cloud-dark); transition: border-color 0.2s ease, transform 0.2s ease; }
    .scenario-tag:hover { border-color: var(--color-copper-soft); transform: translateY(-1px); }
    .scenario-tag--kids:hover { border-color: var(--color-kids-primary-soft); }
    .scenario-tag__icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-copper); }
    .scenario-tag--kids .scenario-tag__icon { color: var(--color-kids-primary); }
    .scenario-tag__label { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--color-carbon); }

    /* Related Product Card */
    .related-product-card { display: block; background: var(--color-white); border: 1px solid var(--color-cloud-dark); border-radius: var(--radius-card); padding: var(--space-lg); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
    .related-product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); border-color: var(--color-copper-soft); }
    .related-product-card:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .related-product-card.card-kids:hover { border-color: var(--color-kids-primary-soft); }
    .related-product-card__image { width: 100%; aspect-ratio: 4/3; background: var(--color-cloud-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }
    .related-product-card.card-kids .related-product-card__image { background: var(--color-kids-bg-primary); }
    .related-product-card__image svg { width: 65%; height: 65%; }
    .related-product-card__title { font-family: var(--font-heading); font-size: 15px; font-weight: 500; color: var(--color-carbon); margin-bottom: var(--space-xs); }
    .related-product-card__specs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
    .related-product-card__cta { font-family: var(--font-heading); font-size: 13px; font-weight: 500; color: var(--color-copper); display: inline-flex; align-items: center; gap: 4px; }
    .related-product-card.card-kids .related-product-card__cta { color: var(--color-kids-primary); }

    /* CTA Banner */
    .cta-banner { background: var(--gradient-copper-wash); padding: var(--space-3xl) var(--space-xl); text-align: center; }
    .cta-banner__title { font-family: var(--font-heading); font-size: 24px; font-weight: 500; color: var(--color-carbon); margin-bottom: var(--space-md); }
    .cta-banner__desc { font-family: var(--font-body); font-size: 16px; color: var(--color-carbon-light); line-height: 1.65; max-width: 480px; margin: 0 auto var(--space-lg); }

    /* Footer */
    .footer { background: var(--color-carbon); padding: var(--space-2xl) 0 var(--space-xl); border-top: 1px solid var(--color-carbon-light); color: var(--color-cloud-dark); }
    .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
    .footer-col .footer-title { font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--color-cloud-dark); margin-bottom: var(--space-md); }
    .footer-col .footer-link { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--color-cloud-dark); padding: var(--space-2xs) 0; transition: color 0.2s; }
    .footer-col .footer-link:hover { color: var(--color-copper-soft); }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-carbon-light); }
    .footer-bottom .micro { color: var(--color-cloud-dark); }
    .footer-brand { font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--color-cloud-dark); }

    /* Responsive */
    @media (max-width: 1024px) {
      /* Nav: hide desktop nav, show hamburger (unified at 1024px) */
      .nav-items, .lang-switcher-desktop { display: none; }
      .nav-hamburger { display: flex; }
      .grid-3 { grid-template-columns: repeat(2, 1fr); }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .lang-btn { font-size: 13px; padding: 4px 12px; }
      .nav-item { padding: 8px 16px; }
      .nav-items { gap: 2px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .product-hero { grid-template-columns: 1fr; gap: var(--space-xl); }
      .product-hero__image { max-width: 480px; margin: 0 auto; }
    }
    @media (max-width: 640px) {
      .container { padding-left: var(--space-md); padding-right: var(--space-md); }
      .grid-3 { grid-template-columns: 1fr; }
      .grid-4 { grid-template-columns: 1fr; }
      .breadcrumb { padding-top: 80px; }
      .product-hero__title { font-size: 24px; }
      .detail-section { padding: var(--space-2xl) 0; }
      .detail-section__title { font-size: 20px; }
      .spec-table-wrap { padding: var(--space-md); }
      .spec-table th, .spec-table td { padding: var(--space-xs) var(--space-sm); font-size: 13px; }
      .scenario-grid { gap: var(--space-sm); }
      .scenario-tag { padding: var(--space-xs) var(--space-md); }
      .cta-banner { padding: var(--space-2xl) var(--space-md); }
      .cta-banner__title { font-size: 20px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
      .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
      html { scroll-behavior: auto; }
      .feature-card:hover, .scenario-tag:hover, .related-product-card:hover { transform: none; }
      .btn-cta:hover { transform: none; }
    }

/* === Source: products-cn.html === */
/* === CSS 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-body);
      font-size: 16px;
      line-height: 1.65;
      color: var(--color-carbon);
      background: var(--color-white);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* === Design Tokens — Warm Editorial + 纯灰调 v4.0 === */
    :root {
      /* Brand Core — 纯灰调 */
      --color-carbon: #333333;
      --color-carbon-light: #4D4D4D;
      --color-carbon-soft: #6E6E6E;
      --color-mist: #8A8A8A;
      --color-white: #FFFFFF;
      --color-cloud: #E8E6E0;
      --color-cloud-light: #F0EDE7;
      --color-cloud-dark: #D1CEC6;
      --color-line: #C4C0B8;

      /* Accent — 温铜/暖棕 */
      --color-copper: #A89379;
      --color-copper-hover: #9A8268;
      --color-copper-soft: #C4B5A0;
      --color-copper-pale: #E8DFD0;
      --color-slate: #9BABB8;
      --color-slate-hover: #8A9DAC;
      --color-slate-soft: #B8C8D4;

      /* Adult Series */
      --color-adult-accent: #A89379;
      --color-adult-accent-soft: #C4B5A0;
      --color-adult-bg-accent: #E8DFD0;
      --color-adult-tag: #A89379;
      --color-adult-line: #C4B5A0;

      /* Kids Series */
      --color-kids-primary: #5BBFDE;
      --color-kids-secondary: #F4A261;
      --color-kids-primary-soft: #A8DCF0;
      --color-kids-secondary-soft: #F8C896;
      --color-kids-bg-primary: #EBF5FA;
      --color-kids-bg-secondary: #FFF3E8;
      --color-kids-tag: #5BBFDE;

      /* Semantic */
      --color-success: #7DB88A;
      --color-warning: #C9A96E;
      --color-danger: #D4564A;
      --color-info: #9BABB8;

      /* Gradient */
      --gradient-hero: linear-gradient(180deg, #333333 0%, #4D4D4D 60%, #E8E6E0 100%);
      --gradient-copper-wash: linear-gradient(135deg, #A89379 0%, #C4B5A0 50%, #E8DFD0 100%);
      --gradient-cloud-rise: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --gradient-kids: linear-gradient(135deg, #5BBFDE 0%, #F4A261 100%);
      --gradient-hero-line: linear-gradient(90deg, transparent 0%, #A89379 50%, transparent 100%);

      /* Typography — 三层架构 */
      --font-display-serif: 'Source Serif 4', 'Noto Serif SC', 'Georgia', serif;
      --font-heading: 'DM Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
      --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
      --font-serif-zh: 'Noto Serif SC', 'STSong', 'SimSun', serif;

      /* Spacing */
      --space-2xs: 4px;
      --space-xs: 8px;
      --space-sm: 12px;
      --space-md: 20px;
      --space-lg: 32px;
      --space-xl: 40px;
      --space-2xl: 56px;
      --space-3xl: 72px;
      --space-4xl: 96px;
      --space-5xl: 120px;
      --space-editorial: 80px;

      /* Radius */
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 10px;
      --radius-xl: 12px;
      --radius-card: 16px;

      /* Shadow — 暖灰阴影 */
      --shadow-flat: none;
      --shadow-subtle: 0 1px 3px rgba(51,51,51,0.05);
      --shadow-soft: 0 2px 8px rgba(51,51,51,0.07);
      --shadow-raised: 0 3px 12px rgba(51,51,51,0.08);
      --shadow-elevated: 0 6px 20px rgba(51,51,51,0.12);
      --shadow-floating: 0 8px 28px rgba(51,51,51,0.14);
      --shadow-copper-glow: 0 4px 16px rgba(168,147,121,0.20);

      /* Z-index */
      --z-base: 0;
      --z-decorative: 50;
      --z-sticky: 100;
      --z-dropdown: 200;
      --z-modal: 300;
      --z-toast: 400;

      /* Container */
      --container-max: 1200px;
      --grid-gutter: 32px;

      /* === v4.0 新增组件变量 === */

      /* N1. 多页导航栏 — Active 状态 */
      --nav-active-color: #333333;
      --nav-active-underline: 2px solid #A89379;
      --nav-active-weight: 500;
      --nav-default-color: #4D4D4D;
      --nav-default-weight: 400;

      /* N1. 多页导航栏 — 下拉菜单 */
      --dropdown-bg: rgba(232,230,224,0.96);
      --dropdown-blur: blur(12px);
      --dropdown-border: 1px solid #D1CEC6;
      --dropdown-radius: 8px;
      --dropdown-shadow: 0 4px 16px rgba(51,51,51,0.10);
      --dropdown-item-height: 44px;
      --dropdown-item-padding: 12px 20px 12px 24px;
      --dropdown-item-font-size: 14px;
      --dropdown-item-color: #4D4D4D;
      --dropdown-item-hover-color: #333333;
      --dropdown-item-hover-bg: rgba(168,147,121,0.06);
      --dropdown-item-active-color: #333333;
      --dropdown-item-active-border: 2px solid #A89379;
      --dropdown-divider: 1px solid #D1CEC6;
      --dropdown-caret-color: #8A8A8A;
      --dropdown-caret-hover-color: #A89379;

      /* N2. 语言切换按钮 */
      --lang-btn-height: 32px;
      --lang-btn-padding: 6px 16px;
      --lang-btn-font-size: 14px;
      --lang-btn-radius: 4px;
      --lang-active-color: #333333;
      --lang-active-border-color: #A89379;
      --lang-active-bg: rgba(168,147,121,0.08);
      --lang-inactive-color: #4D4D4D;
      --lang-inactive-hover-color: #333333;
      --lang-divider-color: #333333;
      --lang-divider-width: 2px;
      --lang-divider-height: 16px;

      /* N3. 页面标题区 */
      --page-title-bg: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --page-title-padding: 40px 40px;
      --page-title-h2-size: 28px;
      --page-title-h2-color: #333333;
      --page-title-line-width: 40px;
      --page-title-line-height: 2px;
      --page-title-line-color: #A89379;
      --page-title-desc-size: 18px;
      --page-title-desc-color: #4D4D4D;
      --page-title-desc-max-width: 640px;

      /* N4. 锚点偏移 */
      --anchor-offset: 72px;
    }

    /* === Container & Grid === */
    .container {
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--grid-gutter);
    }

    /* === Typography Utilities === */
    .h2 {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 500;
      line-height: 1.35;
    }
    .h3 {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.4;
    }
    .h4 {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
    }
    .body-l {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.7;
    }
    .body-text {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.65;
    }
    .body-s {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
    }
    .micro {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0.05em;
    }

    /* Editorial Labels — small-caps */
    .editorial-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      font-variant: small-caps;
      letter-spacing: 0.08em;
      color: var(--color-copper-soft);
    }

    /* === Buttons === */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 12px 28px;
      border-radius: var(--radius-md);
      background: var(--color-copper);
      color: var(--color-white);
      min-width: 120px;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-primary:hover {
      background: var(--color-copper-hover);
      box-shadow: 0 2px 8px rgba(168,147,121,0.25);
    }
    .btn-primary:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .btn-primary:active {
      background: #8A7560;
      transform: translateY(1px);
    }

    .btn-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: 14px 36px;
      border-radius: var(--radius-lg);
      background: var(--color-copper);
      color: var(--color-white);
      min-width: 160px;
      transition: transform 0.15s, box-shadow 0.2s;
    }
    .btn-cta:hover {
      transform: scale(1.02);
      box-shadow: var(--shadow-copper-glow);
    }
    .btn-cta:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .btn-cta:active {
      background: #8A7560;
      transform: scale(0.98);
    }
    .card-link:focus-visible,
    .feature-card__link:focus-visible,
    .trust-badge-row__link:focus-visible,
    .nav-dropdown-item:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .footer-link:focus-visible,
    .lang-btn--inactive:focus-visible {
      outline: 1px solid var(--color-copper);
      outline-offset: 1px;
    }

    /* === Tags === */
    .tag-adult {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      background: var(--color-adult-bg-accent);
      color: var(--color-adult-tag);
      border: 1px solid var(--color-adult-accent-soft);
    }
    .tag-kids {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-md);
      background: var(--color-kids-bg-primary);
      color: var(--color-kids-tag);
      border: 1px solid var(--color-kids-primary-soft);
    }
    .tag-spec {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 400;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      background: var(--color-cloud-light);
      color: var(--color-slate);
    }
    .tag-spec-kids {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 400;
      padding: 4px 8px;
      border-radius: var(--radius-md);
      background: var(--color-kids-bg-primary);
      color: var(--color-kids-primary);
    }
    .tag-spec-kids-secondary {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 400;
      padding: 4px 8px;
      border-radius: var(--radius-md);
      background: var(--color-kids-bg-secondary);
      color: var(--color-kids-secondary);
    }

    /* === v4.1 新增分类 Tag — 四大产品线 === */
    .tag-clothing-rack {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-md);
      background: var(--color-kids-bg-primary);
      color: var(--color-kids-primary);
      border: 1px solid var(--color-kids-primary-soft);
    }
    .tag-mannequin {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-md);
      background: var(--color-kids-bg-secondary);
      color: var(--color-kids-secondary);
      border: 1px solid var(--color-kids-secondary-soft);
    }
    .tag-neutral {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      background: rgba(51,51,51,0.06);
      color: var(--color-carbon);
      border: 1px solid var(--color-carbon-soft);
    }

    /* === Coming Soon Spec Table === */
    .spec-table--coming-soon th {
      background: var(--color-cloud-light);
      border-bottom-color: var(--color-cloud-dark);
      color: var(--color-carbon-soft);
    }
    .spec-table--coming-soon td {
      color: var(--color-carbon-soft);
    }
    .spec-table--coming-soon td.spec-value {
      color: var(--color-mist);
      font-style: italic;
    }
    .coming-soon-note {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 400;
      color: var(--color-carbon-light);
      margin-top: var(--space-md);
      line-height: 1.55;
    }
    .coming-soon-note a {
      color: var(--color-copper);
      text-decoration: underline;
      transition: color 0.15s ease;
    }
    .coming-soon-note a:hover {
      color: var(--color-copper-hover);
    }
    .coming-soon-note a:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }

    /* === Editorial Decorations === */
    .copper-line-decor {
      width: 40px;
      height: 2px;
      background: var(--color-copper);
      margin-top: var(--space-sm);
    }
    .editorial-divider-line {
      width: 60px;
      height: 2px;
      background: var(--color-copper);
      margin: auto;
    }
    .divider-section-line {
      width: 120px;
      height: 1px;
      background: var(--color-line);
      margin: auto;
    }

    /* === N1: Multi-page Navigation — v4.0 === */
    .nav-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 72px;
      background: rgba(240,237,231,0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--color-line);
      z-index: var(--z-sticky);
      display: flex;
      align-items: center;
    }
    .nav-bar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: var(--space-lg);
    }
    .nav-logo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .nav-logo-cn {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-carbon);
    }
    .nav-logo-en {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      font-variant: small-caps;
      letter-spacing: 0.05em;
      color: var(--color-carbon-light);
    }
    .nav-items {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }
    .nav-item {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--nav-default-color);
      padding: 10px 20px;
      text-decoration: none;
      position: relative;
      transition: color 0.2s ease;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .nav-item:hover {
      color: var(--color-carbon);
    }
    .nav-item--active {
      color: var(--nav-active-color);
      font-weight: var(--nav-active-weight);
    }
    .nav-item--active::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 20px;
      right: 20px;
      height: 2px;
      background-color: var(--color-copper);
    }
    .nav-dropdown-caret {
      font-size: 10px;
      color: var(--dropdown-caret-color);
      transition: color 0.2s ease;
      line-height: 1;
    }
    .nav-item:hover .nav-dropdown-caret {
      color: var(--dropdown-caret-hover-color);
    }
    .nav-dropdown-wrap {
      position: relative;
    }
    .nav-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 180px;
      max-width: 240px;
      background: var(--dropdown-bg);
      backdrop-filter: var(--dropdown-blur);
      -webkit-backdrop-filter: var(--dropdown-blur);
      border: var(--dropdown-border);
      border-radius: var(--dropdown-radius);
      box-shadow: var(--dropdown-shadow);
      padding: 16px 0;
      z-index: var(--z-dropdown);
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 200ms ease-out, transform 200ms ease-out;
      pointer-events: none;
      list-style: none;
      margin-top: 12px;
    }
    .nav-dropdown-wrap:hover .nav-dropdown,
    .nav-dropdown--open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .nav-dropdown-item {
      display: block;
      color: var(--dropdown-item-color);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      padding: 12px 20px 12px 24px;
      text-decoration: none;
      border-left: 2px solid transparent;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }
    .nav-dropdown-item:hover {
      color: var(--dropdown-item-hover-color);
      background: var(--dropdown-item-hover-bg);
    }
    .lang-switcher {
      display: flex;
      align-items: center;
      height: 32px;
      margin-right: 16px;
    }
    .lang-btn {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      padding: 6px 16px;
      border-radius: var(--lang-btn-radius);
      text-decoration: none;
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      cursor: pointer;
      line-height: 1;
    }
    .lang-btn--active {
      color: var(--lang-active-color);
      border: 1px solid var(--lang-active-border-color);
      background: var(--lang-active-bg);
    }
    .lang-btn--inactive {
      color: var(--lang-inactive-color);
      border: none;
      background: transparent;
    }
    .lang-btn--inactive:hover {
      color: var(--lang-inactive-hover-color);
    }
    .lang-divider {
      width: 2px;
      height: 16px;
      background-color: var(--lang-divider-color);
      margin: 0 4px;
      flex-shrink: 0;
    }
    .nav-cta {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 10px 24px;
      border-radius: var(--radius-md);
      background: var(--color-copper);
      color: var(--color-white);
      text-decoration: none;
      transition: background 0.2s;
    }
    .nav-cta:hover {
      background: var(--color-copper-hover);
    }
    .nav-hamburger {
      display: none;
      width: 24px;
      height: 24px;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
    }
    .nav-hamburger span {
      width: 100%;
      height: 2px;
      background: var(--color-carbon);
      transition: transform 0.2s;
    }
    .nav-mobile-menu {
      display: none;
      position: fixed;
      top: 72px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(240,237,231,0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 24px 20px;
      z-index: var(--z-dropdown);
      overflow-y: auto;
    }
    .nav-mobile-menu--open {
      display: block;
    }
    .nav-mobile-menu .nav-item {
      display: block;
      padding: 16px 0;
      border-left: 2px solid transparent;
      font-size: 16px;
    }
    .nav-mobile-menu .nav-item--active {
      border-left-color: var(--color-copper);
      color: var(--color-copper);
      font-weight: 500;
    }
    .nav-mobile-menu .nav-item--active::after {
      display: none;
    }
    .nav-mobile-menu .nav-dropdown-item {
      padding: 12px 0 12px 16px;
      font-size: 13px;
      display: block;
    }
    .nav-mobile-menu .lang-switcher {
      margin-right: 0;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid var(--color-cloud-dark);
      justify-content: center;
    }
    .nav-mobile-menu .nav-cta {
      display: block;
      text-align: center;
      margin-top: 24px;
      font-size: 16px;
      padding: 14px 36px;
      border-radius: var(--radius-lg);
    }
    .mobile-dropdown-sub {
      display: none;
      padding-left: 16px;
    }
    .mobile-dropdown-sub--open {
      display: block;
    }

    /* === N3: Page Title Hero === */
    .page-title-hero {
      background: var(--page-title-bg);
      padding: var(--page-title-padding);
      max-width: var(--container-max);
      margin: 0 auto;
      position: relative;
    }
    .page-title-hero__title {
      font-family: var(--font-heading);
      font-size: var(--page-title-h2-size);
      font-weight: 500;
      color: var(--page-title-h2-color);
      line-height: 1.35;
      letter-spacing: 0;
      margin: 0;
    }
    .page-title-hero__line {
      display: block;
      width: var(--page-title-line-width);
      height: var(--page-title-line-height);
      background-color: var(--page-title-line-color);
      margin-top: var(--space-sm);
    }
    .page-title-hero__description {
      font-family: var(--font-body);
      font-size: var(--page-title-desc-size);
      font-weight: 400;
      color: var(--page-title-desc-color);
      line-height: 1.7;
      max-width: var(--page-title-desc-max-width);
      margin-top: var(--space-md);
      margin-bottom: 0;
    }
    .page-title-hero__separator {
      height: 1px;
      background-color: var(--color-line);
      width: 100%;
      margin-top: var(--space-xl);
    }

    /* === Editorial Divider === */
    .editorial-divider {
      height: var(--space-editorial);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--color-white);
    }
    .editorial-divider .editorial-label {
      margin-top: var(--space-sm);
    }

    /* === Series Sections === */
    .section-series {
      padding: var(--space-4xl) 0;
      background: var(--color-white);
    }
    .section-series-bg-cloud {
      background: var(--color-cloud);
    }
    .series-header {
      margin-bottom: var(--space-3xl);
      max-width: var(--container-max);
    }
    .series-header .series-tag {
      display: inline-block;
      margin-bottom: var(--space-md);
    }
    .series-header .series-title {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 500;
      color: var(--color-carbon);
      line-height: 1.35;
      margin-bottom: var(--space-md);
    }
    .series-header .series-desc {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      color: var(--color-carbon-light);
      line-height: 1.65;
      max-width: 560px;
    }
    .series-header .copper-line-decor {
      margin-bottom: var(--space-md);
    }

    /* === Product Detail Cards === */
    .product-detail-card {
      background: var(--color-white);
      border-radius: var(--radius-card);
      padding: 28px;
      box-shadow: var(--shadow-raised);
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
    }
    .product-detail-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-elevated);
    }
    .product-detail-card .card-tag {
      position: absolute;
      top: var(--space-md);
      right: var(--space-md);
    }
    .product-detail-card .card-image {
      width: 100%;
      aspect-ratio: 4/3;
      background: var(--color-cloud);
      border-radius: var(--radius-xl);
      margin-bottom: var(--space-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .product-detail-card.card-kids .card-image {
      background: var(--color-kids-bg-primary);
    }
    .product-detail-card .card-image svg {
      width: 80%;
      height: 80%;
    }
    .product-detail-card .card-title {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
      color: var(--color-carbon);
      position: relative;
      padding-bottom: var(--space-md);
    }
    .product-detail-card .card-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 1px;
      background: var(--color-copper);
    }
    .product-detail-card.card-kids .card-title::after {
      background: var(--color-kids-primary);
    }
    .product-detail-card .card-desc {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
      color: var(--color-carbon-light);
      margin-top: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .product-detail-card .card-specs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }

    /* === Spec Data Table === */
    .spec-table-wrap {
      background: var(--color-cloud-light);
      border-radius: var(--radius-xl);
      padding: var(--space-lg);
      margin-top: var(--space-lg);
    }
    .spec-table-wrap.card-kids-spec {
      background: var(--color-kids-bg-primary);
    }
    .spec-table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid var(--color-line);
    }
    .spec-table th {
      background: var(--color-cloud);
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-carbon);
      padding: var(--space-sm) var(--space-md);
      text-align: left;
      border-bottom: 2px solid var(--color-copper-soft);
    }
    .spec-table.card-kids-table th {
      border-bottom-color: var(--color-kids-primary-soft);
      background: #D8EFF7;
    }
    .spec-table td {
      background: var(--color-white);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-carbon-light);
      padding: var(--space-sm) var(--space-md);
      border-bottom: 1px solid var(--color-line);
    }
    .spec-table td.spec-param {
      font-weight: 500;
      color: var(--color-carbon);
    }
    .spec-table td.spec-value {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-slate);
    }
    .spec-table.card-kids-table td.spec-value {
      color: var(--color-kids-primary);
    }
    .spec-table tbody tr:hover {
      background: rgba(168,147,121,0.06);
    }
    .spec-table.card-kids-table tbody tr:hover {
      background: rgba(91,191,222,0.06);
    }
    .spec-table-label {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-carbon);
      margin-bottom: var(--space-md);
    }

    /* === OEM Prompt === */
    .oem-prompt {
      background: var(--gradient-cloud-rise);
      padding: var(--space-3xl) var(--space-xl);
      text-align: center;
    }
    .oem-prompt__text {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      color: var(--color-carbon-light);
      line-height: 1.65;
      max-width: 480px;
      margin: 0 auto var(--space-lg) auto;
    }
    .oem-prompt__link {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      color: var(--color-carbon);
      text-decoration-color: var(--color-copper);
      transition: color 0.15s ease;
    }
    .oem-prompt__link:hover {
      color: var(--color-copper);
      text-decoration: underline;
    }
    .oem-prompt__link::after {
      content: '→';
      margin-left: 4px;
    }

    /* === Footer === */
    .footer {
      background: var(--color-carbon);
      padding: var(--space-2xl) 0 var(--space-xl);
      border-top: 1px solid var(--color-carbon-light);
      color: var(--color-cloud-dark);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--grid-gutter);
    }
    .footer-col .footer-title {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-cloud-dark);
      margin-bottom: var(--space-md);
    }
    .footer-col .footer-link {
      display: block;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-cloud-dark);
      padding: var(--space-2xs) 0;
      transition: color 0.2s;
    }
    .footer-col .footer-link:hover {
      color: var(--color-copper-soft);
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--space-xl);
      padding-top: var(--space-lg);
      border-top: 1px solid var(--color-carbon-light);
    }
    .footer-bottom .micro {
      color: var(--color-cloud-dark);
    }
    .footer-brand {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      color: var(--color-cloud-dark);
    }

    /* === Kids Series Label override === */
    .editorial-label-kids {
      color: var(--color-kids-primary-soft);
    }
    .copper-line-decor-kids {
      background: var(--color-kids-primary);
    }

    /* ============================================================
         v4.1 Batch A — Hub & Category Page 新增组件
         ============================================================ */

    /* Grid-4 — Hub 页分类卡片栅格 */
    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--grid-gutter);
    }

    /* Breadcrumb — 分类页面包屑导航 */
    .breadcrumb {
      padding-top: 96px;
      background: var(--color-white);
    }
    .breadcrumb__list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-xs);
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--color-carbon-soft);
      padding-bottom: var(--space-md);
    }
    .breadcrumb__link {
      color: var(--color-carbon-soft);
      transition: color 0.15s ease;
    }
    .breadcrumb__link:hover {
      color: var(--color-copper);
    }
    .breadcrumb__link:focus-visible {
      outline: 1px solid var(--color-copper);
      outline-offset: 2px;
    }
    .breadcrumb__separator {
      color: var(--color-mist);
      font-size: 11px;
    }
    .breadcrumb__current {
      color: var(--color-carbon);
      font-weight: 500;
    }

    /* Category Card — Hub 页可点击分类卡片 */
    .category-card {
      display: flex;
      flex-direction: column;
      background: var(--color-white);
      border: 1px solid var(--color-cloud-dark);
      border-radius: var(--radius-card);
      padding: 32px 28px;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      height: 100%;
    }
    .category-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-elevated);
      border-color: var(--color-copper-soft);
    }
    .category-card:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .category-card__icon {
      width: 100%;
      aspect-ratio: 16/10;
      background: var(--color-cloud-light);
      border-radius: var(--radius-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-lg);
    }
    .category-card__icon svg {
      width: 56%;
      height: 56%;
    }
    .category-card__tag {
      display: inline-block;
      margin-bottom: var(--space-sm);
      align-self: flex-start;
    }
    .category-card__title {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 500;
      color: var(--color-carbon);
      line-height: 1.35;
      margin-bottom: var(--space-sm);
    }
    .category-card__desc {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-carbon-light);
      line-height: 1.6;
      margin-bottom: var(--space-lg);
      flex-grow: 1;
    }
    .category-card__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: var(--space-md);
      border-top: 1px solid var(--color-cloud);
    }
    .category-card__count {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--color-carbon-soft);
    }
    .category-card__link {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-copper);
      transition: color 0.15s ease;
    }
    .category-card:hover .category-card__link {
      color: var(--color-copper-hover);
    }
    /* Category card color variants */
    .category-card--hangers:hover { border-color: var(--color-copper-soft); }
    .category-card--clothing-rack:hover { border-color: var(--color-kids-primary-soft); }
    .category-card--mannequin:hover { border-color: var(--color-kids-secondary-soft); }
    .category-card--display-props:hover { border-color: var(--color-carbon-soft); }

    /* Product Link Card — 分类页可点击产品卡片 */
    .product-link-card {
      display: block;
      background: var(--color-white);
      border-radius: var(--radius-card);
      padding: 28px;
      box-shadow: var(--shadow-raised);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      border: 1px solid transparent;
    }
    .product-link-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-elevated);
      border-color: var(--color-copper-soft);
    }
    .product-link-card:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .product-link-card.card-kids:hover {
      border-color: var(--color-kids-primary-soft);
    }
    .product-link-card .card-tag {
      position: absolute;
      top: var(--space-md);
      right: var(--space-md);
      z-index: 1;
    }
    .product-link-card .card-image {
      width: 100%;
      aspect-ratio: 4/3;
      background: var(--color-cloud);
      border-radius: var(--radius-xl);
      margin-bottom: var(--space-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .product-link-card.card-kids .card-image {
      background: var(--color-kids-bg-primary);
    }
    .product-link-card .card-image svg {
      width: 80%;
      height: 80%;
    }
    .product-link-card .card-title {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
      color: var(--color-carbon);
      position: relative;
      padding-bottom: var(--space-md);
    }
    .product-link-card .card-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 1px;
      background: var(--color-copper);
    }
    .product-link-card.card-kids .card-title::after {
      background: var(--color-kids-primary);
    }
    .product-link-card .card-desc {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
      color: var(--color-carbon-light);
      margin-top: var(--space-md);
      margin-bottom: var(--space-md);
    }
    .product-link-card .card-specs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin-bottom: var(--space-md);
    }
    .product-link-card .card-cta {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-copper);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color 0.15s ease;
    }
    .product-link-card:hover .card-cta {
      color: var(--color-copper-hover);
    }
    .product-link-card.card-kids .card-cta {
      color: var(--color-kids-primary);
    }
    .product-link-card.card-kids:hover .card-cta {
      color: var(--color-kids-primary);
    }

    /* Sub-category Header — 分类页子分类标题 */
    .subcategory-header {
      margin-bottom: var(--space-lg);
      display: flex;
      align-items: center;
      gap: var(--space-md);
      padding-bottom: var(--space-md);
      border-bottom: 1px solid var(--color-cloud-dark);
    }
    .subcategory-header__label {
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--color-carbon-light);
    }

    /* Coming Soon Block — Coming Soon 分类页占位区 */
    .coming-soon-block {
      padding: var(--space-3xl) 0;
      text-align: center;
    }
    .coming-soon-block__icon {
      width: 160px;
      height: 160px;
      margin: 0 auto var(--space-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-cloud-light);
      border-radius: 50%;
    }
    .coming-soon-block__icon svg {
      width: 65%;
      height: 65%;
    }
    .coming-soon-block__title {
      font-family: var(--font-display-serif);
      font-size: 28px;
      font-weight: 400;
      color: var(--color-carbon-soft);
      font-style: italic;
      margin-bottom: var(--space-md);
      letter-spacing: 0.01em;
    }
    .coming-soon-block__desc {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      color: var(--color-carbon-light);
      line-height: 1.7;
      max-width: 520px;
      margin: 0 auto var(--space-xl);
    }
    .coming-soon-block__cta {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      color: var(--color-carbon);
      text-decoration-color: var(--color-copper);
      transition: color 0.15s ease;
    }
    .coming-soon-block__cta:hover {
      color: var(--color-copper);
      text-decoration: underline;
    }
    .coming-soon-block__cta::after {
      content: '→';
      margin-left: 4px;
    }
    .coming-soon-block__cta:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }

    /* === Responsive — Tablet 640–1024px === */
    @media (max-width: 1024px) {
      .grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
      .grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }
      .page-title-hero {
        padding: 60px 32px;
      }
      .page-title-hero__title {
        font-size: 24px;
      }
      .page-title-hero__line {
        width: 32px;
      }
      .page-title-hero__description {
        font-size: 16px;
      }
      .lang-btn {
        font-size: 13px;
        padding: 4px 12px;
      }
      .nav-item {
        padding: 8px 16px;
      }
      .nav-items {
        gap: 2px;
      }
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .series-header .series-title {
        font-size: 24px;
      }
    }

    /* === Responsive — Mobile < 640px === */
    @media (max-width: 640px) {
      .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
      }
      .grid-3 {
        grid-template-columns: 1fr;
      }
      .grid-4 {
        grid-template-columns: 1fr;
      }
            .breadcrumb {
        padding-top: 80px;
      }
      .page-title-hero {
        padding: 48px 20px;
      }
      .page-title-hero__title {
        font-size: 22px;
      }
      .page-title-hero__line {
        width: 28px;
      }
      .page-title-hero__description {
        font-size: 15px;
        max-width: 100%;
      }
      .editorial-divider {
        height: 48px;
      }
      .editorial-divider .editorial-divider-line {
        width: 40px;
      }
      .editorial-divider .editorial-label {
        font-size: 10px;
      }
      .section-series {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
      }
      .series-header .series-title {
        font-size: 22px;
      }
      .series-header .series-desc {
        font-size: 14px;
      }
      .spec-table-wrap {
        padding: var(--space-md);
      }
      .spec-table th,
      .spec-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: 13px;
      }
      .oem-prompt {
        padding: var(--space-2xl) var(--space-md);
      }
      .oem-prompt__text {
        font-size: 14px;
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
      }
      .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
      }
      .h2 {
        font-size: 24px;
      }
      .coming-soon-block__icon {
        width: 120px;
        height: 120px;
      }
      .coming-soon-block__title {
        font-size: 22px;
      }
      .coming-soon-block__desc {
        font-size: 14px;
      }
    }

    /* === Accessibility: prefers-reduced-motion === */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
      html { scroll-behavior: auto; }
      .product-detail-card:hover { transform: none; }
      .category-card:hover { transform: none; }
      .product-link-card:hover { transform: none; }
      .btn-cta:hover { transform: none; }
    }

    /* === Anti-Slop Quality Controls === */
    /* No purple gradients, no emoji icons, no generic rounded+border-accent pattern */
    /* No Inter as display font, no fabricated stats */
    /* This prototype uses: carbon+cloud+copper palette, DM Sans heading, editorial whitespace */

/* === Source: hangers-cn.html === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--color-carbon); background: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    :root {
      --color-carbon: #333333; --color-carbon-light: #4D4D4D; --color-carbon-soft: #6E6E6E; --color-mist: #8A8A8A;
      --color-white: #FFFFFF; --color-cloud: #E8E6E0; --color-cloud-light: #F0EDE7; --color-cloud-dark: #D1CEC6; --color-line: #C4C0B8;
      --color-copper: #A89379; --color-copper-hover: #9A8268; --color-copper-soft: #C4B5A0; --color-copper-pale: #E8DFD0;
      --color-slate: #9BABB8; --color-slate-hover: #8A9DAC; --color-slate-soft: #B8C8D4;
      --color-adult-accent: #A89379; --color-adult-accent-soft: #C4B5A0; --color-adult-bg-accent: #E8DFD0; --color-adult-tag: #A89379; --color-adult-line: #C4B5A0;
      --color-kids-primary: #5BBFDE; --color-kids-secondary: #F4A261; --color-kids-primary-soft: #A8DCF0; --color-kids-secondary-soft: #F8C896; --color-kids-bg-primary: #EBF5FA; --color-kids-bg-secondary: #FFF3E8; --color-kids-tag: #5BBFDE;
      --color-success: #7DB88A; --color-warning: #C9A96E; --color-danger: #D4564A; --color-info: #9BABB8;
      --gradient-hero: linear-gradient(180deg, #333333 0%, #4D4D4D 60%, #E8E6E0 100%);
      --gradient-copper-wash: linear-gradient(135deg, #A89379 0%, #C4B5A0 50%, #E8DFD0 100%);
      --gradient-cloud-rise: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --gradient-kids: linear-gradient(135deg, #5BBFDE 0%, #F4A261 100%);
      --gradient-hero-line: linear-gradient(90deg, transparent 0%, #A89379 50%, transparent 100%);
      --font-display-serif: 'Source Serif 4', 'Noto Serif SC', 'Georgia', serif;
      --font-heading: 'DM Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
      --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
      --font-serif-zh: 'Noto Serif SC', 'STSong', 'SimSun', serif;
      --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px; --space-xl: 40px; --space-2xl: 56px; --space-3xl: 72px; --space-4xl: 96px; --space-5xl: 120px; --space-editorial: 80px;
      --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-card: 16px;
      --shadow-flat: none; --shadow-subtle: 0 1px 3px rgba(51,51,51,0.05); --shadow-soft: 0 2px 8px rgba(51,51,51,0.07); --shadow-raised: 0 3px 12px rgba(51,51,51,0.08); --shadow-elevated: 0 6px 20px rgba(51,51,51,0.12); --shadow-floating: 0 8px 28px rgba(51,51,51,0.14); --shadow-copper-glow: 0 4px 16px rgba(168,147,121,0.20);
      --z-base: 0; --z-decorative: 50; --z-sticky: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400;
      --container-max: 1200px; --grid-gutter: 32px;
      --nav-active-color: #333333; --nav-active-underline: 2px solid #A89379; --nav-active-weight: 500; --nav-default-color: #4D4D4D; --nav-default-weight: 400;
      --dropdown-bg: rgba(232,230,224,0.96); --dropdown-blur: blur(12px); --dropdown-border: 1px solid #D1CEC6; --dropdown-radius: 8px; --dropdown-shadow: 0 4px 16px rgba(51,51,51,0.10); --dropdown-item-height: 44px; --dropdown-item-padding: 12px 20px 12px 24px; --dropdown-item-font-size: 14px; --dropdown-item-color: #4D4D4D; --dropdown-item-hover-color: #333333; --dropdown-item-hover-bg: rgba(168,147,121,0.06); --dropdown-item-active-color: #333333; --dropdown-item-active-border: 2px solid #A89379; --dropdown-divider: 1px solid #D1CEC6; --dropdown-caret-color: #8A8A8A; --dropdown-caret-hover-color: #A89379;
      --lang-btn-height: 32px; --lang-btn-padding: 6px 16px; --lang-btn-font-size: 14px; --lang-btn-radius: 4px; --lang-active-color: #333333; --lang-active-border-color: #A89379; --lang-active-bg: rgba(168,147,121,0.08); --lang-inactive-color: #4D4D4D; --lang-inactive-hover-color: #333333; --lang-divider-color: #333333; --lang-divider-width: 2px; --lang-divider-height: 16px;
      --page-title-bg: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%); --page-title-padding: 40px 40px; --page-title-h2-size: 28px; --page-title-h2-color: #333333; --page-title-line-width: 40px; --page-title-line-height: 2px; --page-title-line-color: #A89379; --page-title-desc-size: 18px; --page-title-desc-color: #4D4D4D; --page-title-desc-max-width: 640px;
      --anchor-offset: 72px;
    }

    .container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }

    .h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 500; line-height: 1.35; }
    .h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 500; line-height: 1.4; }
    .h4 { font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.4; }
    .body-l { font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.7; }
    .body-text { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.65; }
    .body-s { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.55; }
    .micro { font-family: var(--font-body); font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: 0.05em; }
    .editorial-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; font-variant: small-caps; letter-spacing: 0.08em; color: var(--color-copper-soft); }

    .btn-primary { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; padding: 12px 28px; border-radius: var(--radius-md); background: var(--color-copper); color: var(--color-white); min-width: 120px; transition: background 0.2s, box-shadow 0.2s; }
    .btn-primary:hover { background: var(--color-copper-hover); box-shadow: 0 2px 8px rgba(168,147,121,0.25); }
    .btn-primary:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .btn-primary:active { background: #8A7560; transform: translateY(1px); }
    .btn-cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 18px; font-weight: 600; letter-spacing: 0.03em; padding: 14px 36px; border-radius: var(--radius-lg); background: var(--color-copper); color: var(--color-white); min-width: 160px; transition: transform 0.15s, box-shadow 0.2s; }
    .btn-cta:hover { transform: scale(1.02); box-shadow: var(--shadow-copper-glow); }
    .btn-cta:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .btn-cta:active { background: #8A7560; transform: scale(0.98); }
    .nav-dropdown-item:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .footer-link:focus-visible, .lang-btn--inactive:focus-visible { outline: 1px solid var(--color-copper); outline-offset: 1px; }

    .tag-adult { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-sm); background: var(--color-adult-bg-accent); color: var(--color-adult-tag); border: 1px solid var(--color-adult-accent-soft); }
    .tag-kids { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-md); background: var(--color-kids-bg-primary); color: var(--color-kids-tag); border: 1px solid var(--color-kids-primary-soft); }
    .tag-spec { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-cloud-light); color: var(--color-slate); }
    .tag-spec-kids { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: var(--radius-md); background: var(--color-kids-bg-primary); color: var(--color-kids-primary); }
    .tag-spec-kids-secondary { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: var(--radius-md); background: var(--color-kids-bg-secondary); color: var(--color-kids-secondary); }
    .tag-clothing-rack { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-md); background: var(--color-kids-bg-primary); color: var(--color-kids-primary); border: 1px solid var(--color-kids-primary-soft); }
    .tag-mannequin { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-md); background: var(--color-kids-bg-secondary); color: var(--color-kids-secondary); border: 1px solid var(--color-kids-secondary-soft); }
    .tag-neutral { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-sm); background: rgba(51,51,51,0.06); color: var(--color-carbon); border: 1px solid var(--color-carbon-soft); }

    .copper-line-decor { width: 40px; height: 2px; background: var(--color-copper); margin-top: var(--space-sm); }
    .editorial-divider-line { width: 60px; height: 2px; background: var(--color-copper); margin: auto; }
    .divider-section-line { width: 120px; height: 1px; background: var(--color-line); margin: auto; }
    .copper-line-decor-kids { background: var(--color-kids-primary); }
    .editorial-label-kids { color: var(--color-kids-primary-soft); }

    /* Nav */
    .nav-bar { position: fixed; top: 0; left: 0; right: 0; height: 72px; background: rgba(240,237,231,0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-line); z-index: var(--z-sticky); display: flex; align-items: center; }
    .nav-bar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-lg); }
    .nav-logo { display: flex; flex-direction: column; align-items: flex-start; }
    .nav-logo-cn { font-family: var(--font-heading); font-size: 18px; font-weight: 500; color: var(--color-carbon); }
    .nav-logo-en { font-family: var(--font-body); font-size: 14px; font-weight: 400; font-variant: small-caps; letter-spacing: 0.05em; color: var(--color-carbon-light); }
    .nav-items { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .nav-item { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--nav-default-color); padding: 10px 20px; text-decoration: none; position: relative; transition: color 0.2s ease; display: flex; align-items: center; gap: 4px; }
    .nav-item:hover { color: var(--color-carbon); }
    .nav-item--active { color: var(--nav-active-color); font-weight: var(--nav-active-weight); }
    .nav-item--active::after { content: ''; position: absolute; bottom: 4px; left: 20px; right: 20px; height: 2px; background-color: var(--color-copper); }
    .nav-dropdown-caret { font-size: 10px; color: var(--dropdown-caret-color); transition: color 0.2s ease; line-height: 1; }
    .nav-item:hover .nav-dropdown-caret { color: var(--dropdown-caret-hover-color); }
    .nav-dropdown-wrap { position: relative; }
    .nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 180px; max-width: 240px; background: var(--dropdown-bg); backdrop-filter: var(--dropdown-blur); -webkit-backdrop-filter: var(--dropdown-blur); border: var(--dropdown-border); border-radius: var(--dropdown-radius); box-shadow: var(--dropdown-shadow); padding: 16px 0; z-index: var(--z-dropdown); opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease-out, transform 200ms ease-out; pointer-events: none; list-style: none; margin-top: 12px; }
    .nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown--open { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .nav-dropdown-item { display: block; color: var(--dropdown-item-color); font-family: var(--font-body); font-size: 14px; font-weight: 400; padding: 12px 20px 12px 24px; text-decoration: none; border-left: 2px solid transparent; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
    .nav-dropdown-item:hover { color: var(--dropdown-item-hover-color); background: var(--dropdown-item-hover-bg); }
    .lang-switcher { display: flex; align-items: center; height: 32px; margin-right: 16px; }
    .lang-btn { font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 6px 16px; border-radius: var(--lang-btn-radius); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; cursor: pointer; line-height: 1; }
    .lang-btn--active { color: var(--lang-active-color); border: 1px solid var(--lang-active-border-color); background: var(--lang-active-bg); }
    .lang-btn--inactive { color: var(--lang-inactive-color); border: none; background: transparent; }
    .lang-btn--inactive:hover { color: var(--lang-inactive-hover-color); }
    .lang-divider { width: 2px; height: 16px; background-color: var(--lang-divider-color); margin: 0 4px; flex-shrink: 0; }
    .nav-cta { font-family: var(--font-heading); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; padding: 10px 24px; border-radius: var(--radius-md); background: var(--color-copper); color: var(--color-white); text-decoration: none; transition: background 0.2s; }
    .nav-cta:hover { background: var(--color-copper-hover); }
    .nav-hamburger { display: none; width: 24px; height: 24px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; }
    .nav-hamburger span { width: 100%; height: 2px; background: var(--color-carbon); transition: transform 0.2s; }
    .nav-mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: rgba(240,237,231,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 24px 20px; z-index: var(--z-dropdown); overflow-y: auto; }
    .nav-mobile-menu--open { display: block; }
    .nav-mobile-menu .nav-item { display: block; padding: 16px 0; border-left: 2px solid transparent; font-size: 16px; }
    .nav-mobile-menu .nav-item--active { border-left-color: var(--color-copper); color: var(--color-copper); font-weight: 500; }
    .nav-mobile-menu .nav-item--active::after { display: none; }
    .nav-mobile-menu .nav-dropdown-item { padding: 12px 0 12px 16px; font-size: 13px; display: block; }
    .nav-mobile-menu .lang-switcher { margin-right: 0; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-cloud-dark); justify-content: center; }
    .nav-mobile-menu .nav-cta { display: block; text-align: center; margin-top: 24px; font-size: 16px; padding: 14px 36px; border-radius: var(--radius-lg); }
    .mobile-dropdown-sub { display: none; padding-left: 16px; }
    .mobile-dropdown-sub--open { display: block; }

    /* Page Title Hero */
    .page-title-hero { background: var(--page-title-bg); padding: var(--page-title-padding); max-width: var(--container-max); margin: 0 auto; position: relative; }
    .page-title-hero__title { font-family: var(--font-heading); font-size: var(--page-title-h2-size); font-weight: 500; color: var(--page-title-h2-color); line-height: 1.35; letter-spacing: 0; margin: 0; }
    .page-title-hero__line { display: block; width: var(--page-title-line-width); height: var(--page-title-line-height); background-color: var(--page-title-line-color); margin-top: var(--space-sm); }
    .page-title-hero__description { font-family: var(--font-body); font-size: var(--page-title-desc-size); font-weight: 400; color: var(--page-title-desc-color); line-height: 1.7; max-width: var(--page-title-desc-max-width); margin-top: var(--space-md); margin-bottom: 0; }
    .page-title-hero__separator { height: 1px; background-color: var(--color-line); width: 100%; margin-top: var(--space-xl); }

    /* Series Sections */
    .section-series { padding: var(--space-4xl) 0; background: var(--color-white); }
    .section-series-bg-cloud { background: var(--color-cloud); }
    .series-header { margin-bottom: var(--space-3xl); max-width: var(--container-max); }
    .series-header .series-tag { display: inline-block; margin-bottom: var(--space-md); }
    .series-header .series-title { font-family: var(--font-heading); font-size: 28px; font-weight: 500; color: var(--color-carbon); line-height: 1.35; margin-bottom: var(--space-md); }
    .series-header .series-desc { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--color-carbon-light); line-height: 1.65; max-width: 560px; }
    .series-header .copper-line-decor { margin-bottom: var(--space-md); }

    /* OEM Prompt */
    .oem-prompt { background: var(--gradient-cloud-rise); padding: var(--space-3xl) var(--space-xl); text-align: center; }
    .oem-prompt__text { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--color-carbon-light); line-height: 1.65; max-width: 480px; margin: 0 auto var(--space-lg) auto; }
    .oem-prompt__link { font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--color-carbon); text-decoration-color: var(--color-copper); transition: color 0.15s ease; }
    .oem-prompt__link:hover { color: var(--color-copper); text-decoration: underline; }
    .oem-prompt__link::after { content: '→'; margin-left: 4px; }

    /* Footer */
    .footer { background: var(--color-carbon); padding: var(--space-2xl) 0 var(--space-xl); border-top: 1px solid var(--color-carbon-light); color: var(--color-cloud-dark); }
    .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
    .footer-col .footer-title { font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--color-cloud-dark); margin-bottom: var(--space-md); }
    .footer-col .footer-link { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--color-cloud-dark); padding: var(--space-2xs) 0; transition: color 0.2s; }
    .footer-col .footer-link:hover { color: var(--color-copper-soft); }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-carbon-light); }
    .footer-bottom .micro { color: var(--color-cloud-dark); }
    .footer-brand { font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--color-cloud-dark); }

    /* === v4.1 Batch A 新增组件 === */
    .breadcrumb { padding-top: 96px; background: var(--color-white); }
    .breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); font-family: var(--font-body); font-size: 13px; color: var(--color-carbon-soft); padding-bottom: var(--space-md); }
    .breadcrumb__link { color: var(--color-carbon-soft); transition: color 0.15s ease; }
    .breadcrumb__link:hover { color: var(--color-copper); }
    .breadcrumb__link:focus-visible { outline: 1px solid var(--color-copper); outline-offset: 2px; }
    .breadcrumb__separator { color: var(--color-mist); font-size: 11px; }
    .breadcrumb__current { color: var(--color-carbon); font-weight: 500; }

    .subcategory-header { margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-cloud-dark); }
    .subcategory-header__label { font-family: var(--font-body); font-size: 14px; color: var(--color-carbon-light); }

    .product-link-card { display: block; background: var(--color-white); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-raised); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; overflow: hidden; text-decoration: none; border: 1px solid transparent; }
    .product-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); border-color: var(--color-copper-soft); }
    .product-link-card:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .product-link-card.card-kids:hover { border-color: var(--color-kids-primary-soft); }
    .product-link-card .card-tag { position: absolute; top: var(--space-md); right: var(--space-md); z-index: 1; }
    .product-link-card .card-image { width: 100%; aspect-ratio: 4/3; background: var(--color-cloud); border-radius: var(--radius-xl); margin-bottom: var(--space-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .product-link-card.card-kids .card-image { background: var(--color-kids-bg-primary); }
    .product-link-card .card-image svg { width: 80%; height: 80%; }
    .product-link-card .card-title { font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--color-carbon); position: relative; padding-bottom: var(--space-md); }
    .product-link-card .card-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 1px; background: var(--color-copper); }
    .product-link-card.card-kids .card-title::after { background: var(--color-kids-primary); }
    .product-link-card .card-desc { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--color-carbon-light); margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .product-link-card .card-specs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
    .product-link-card .card-cta { font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--color-copper); display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s ease; }
    .product-link-card:hover .card-cta { color: var(--color-copper-hover); }
    .product-link-card.card-kids .card-cta { color: var(--color-kids-primary); }
    .product-link-card.card-kids:hover .card-cta { color: var(--color-kids-primary); }

    .coming-soon-block { padding: var(--space-3xl) 0; text-align: center; }
    .coming-soon-block__icon { width: 160px; height: 160px; margin: 0 auto var(--space-lg); display: flex; align-items: center; justify-content: center; background: var(--color-cloud-light); border-radius: 50%; }
    .coming-soon-block__icon svg { width: 65%; height: 65%; }
    .coming-soon-block__title { font-family: var(--font-display-serif); font-size: 28px; font-weight: 400; color: var(--color-carbon-soft); font-style: italic; margin-bottom: var(--space-md); letter-spacing: 0.01em; }
    .coming-soon-block__desc { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--color-carbon-light); line-height: 1.7; max-width: 520px; margin: 0 auto var(--space-xl); }
    .coming-soon-block__cta { font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--color-carbon); text-decoration-color: var(--color-copper); transition: color 0.15s ease; }
    .coming-soon-block__cta:hover { color: var(--color-copper); text-decoration: underline; }
    .coming-soon-block__cta::after { content: '→'; margin-left: 4px; }
    .coming-soon-block__cta:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }

    @media (max-width: 1024px) {
      /* Nav: hide desktop nav, show hamburger (unified at 1024px) */
      .nav-items, .lang-switcher-desktop { display: none; }
      .nav-hamburger { display: flex; }
      .grid-3 { grid-template-columns: repeat(2, 1fr); }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .page-title-hero { padding: 60px 32px; }
      .page-title-hero__title { font-size: 24px; }
      .page-title-hero__line { width: 32px; }
      .page-title-hero__description { font-size: 16px; }
      .lang-btn { font-size: 13px; padding: 4px 12px; }
      .nav-item { padding: 8px 16px; }
      .nav-items { gap: 2px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .series-header .series-title { font-size: 24px; }
    }
    @media (max-width: 640px) {
      .container { padding-left: var(--space-md); padding-right: var(--space-md); }
      .grid-3 { grid-template-columns: 1fr; }
      .grid-4 { grid-template-columns: 1fr; }
      .breadcrumb { padding-top: 80px; }
      .page-title-hero { padding: 48px 20px; }
      .page-title-hero__title { font-size: 22px; }
      .page-title-hero__line { width: 28px; }
      .page-title-hero__description { font-size: 15px; max-width: 100%; }
      .section-series { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
      .series-header .series-title { font-size: 22px; }
      .series-header .series-desc { font-size: 14px; }
      .oem-prompt { padding: var(--space-2xl) var(--space-md); }
      .oem-prompt__text { font-size: 14px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
      .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
      .h2 { font-size: 24px; }
      .coming-soon-block__icon { width: 120px; height: 120px; }
      .coming-soon-block__title { font-size: 22px; }
      .coming-soon-block__desc { font-size: 14px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
      html { scroll-behavior: auto; }
      .product-link-card:hover { transform: none; }
      .btn-cta:hover { transform: none; }
    }

/* === Source: about-cn.html === */
/* === CSS 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-body);
      font-size: 16px;
      line-height: 1.65;
      color: var(--color-carbon);
      background: var(--color-white);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* === Design Tokens — Warm Editorial + 纯灰调 v4.0 === */
    :root {
      /* Brand Core — 纯灰调 */
      --color-carbon: #333333;
      --color-carbon-light: #4D4D4D;
      --color-carbon-soft: #6E6E6E;
      --color-mist: #8A8A8A;
      --color-white: #FFFFFF;
      --color-cloud: #E8E6E0;
      --color-cloud-light: #F0EDE7;
      --color-cloud-dark: #D1CEC6;
      --color-line: #C4C0B8;

      /* Accent — 温铜/暖棕 */
      --color-copper: #A89379;
      --color-copper-hover: #9A8268;
      --color-copper-soft: #C4B5A0;
      --color-copper-pale: #E8DFD0;
      --color-slate: #9BABB8;
      --color-slate-hover: #8A9DAC;
      --color-slate-soft: #B8C8D4;

      /* Adult Series */
      --color-adult-accent: #A89379;
      --color-adult-accent-soft: #C4B5A0;
      --color-adult-bg-accent: #E8DFD0;
      --color-adult-tag: #A89379;
      --color-adult-line: #C4B5A0;

      /* Kids Series */
      --color-kids-primary: #5BBFDE;
      --color-kids-secondary: #F4A261;
      --color-kids-primary-soft: #A8DCF0;
      --color-kids-secondary-soft: #F8C896;
      --color-kids-bg-primary: #EBF5FA;
      --color-kids-bg-secondary: #FFF3E8;
      --color-kids-tag: #5BBFDE;

      /* Semantic */
      --color-success: #7DB88A;
      --color-warning: #C9A96E;
      --color-danger: #D4564A;
      --color-info: #9BABB8;

      /* Gradient */
      --gradient-hero: linear-gradient(180deg, #333333 0%, #4D4D4D 60%, #E8E6E0 100%);
      --gradient-copper-wash: linear-gradient(135deg, #A89379 0%, #C4B5A0 50%, #E8DFD0 100%);
      --gradient-cloud-rise: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --gradient-kids: linear-gradient(135deg, #5BBFDE 0%, #F4A261 100%);
      --gradient-hero-line: linear-gradient(90deg, transparent 0%, #A89379 50%, transparent 100%);

      /* Typography — 三层架构 */
      --font-display-serif: 'Source Serif 4', 'Noto Serif SC', 'Georgia', serif;
      --font-heading: 'DM Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
      --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
      --font-serif-zh: 'Noto Serif SC', 'STSong', 'SimSun', serif;

      /* Spacing */
      --space-2xs: 4px;
      --space-xs: 8px;
      --space-sm: 12px;
      --space-md: 20px;
      --space-lg: 32px;
      --space-xl: 40px;
      --space-2xl: 56px;
      --space-3xl: 72px;
      --space-4xl: 96px;
      --space-5xl: 120px;
      --space-editorial: 80px;

      /* Radius */
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 10px;
      --radius-xl: 12px;
      --radius-card: 16px;

      /* Shadow — 暖灰阴影 */
      --shadow-flat: none;
      --shadow-subtle: 0 1px 3px rgba(51,51,51,0.05);
      --shadow-soft: 0 2px 8px rgba(51,51,51,0.07);
      --shadow-raised: 0 3px 12px rgba(51,51,51,0.08);
      --shadow-elevated: 0 6px 20px rgba(51,51,51,0.12);
      --shadow-floating: 0 8px 28px rgba(51,51,51,0.14);
      --shadow-copper-glow: 0 4px 16px rgba(168,147,121,0.20);

      /* Z-index */
      --z-base: 0;
      --z-decorative: 50;
      --z-sticky: 100;
      --z-dropdown: 200;
      --z-modal: 300;
      --z-toast: 400;

      /* Container */
      --container-max: 1200px;
      --grid-gutter: 32px;

      /* === v4.0 新增组件变量 === */

      /* N1. 多页导航栏 — Active 状态 */
      --nav-active-color: #333333;
      --nav-active-underline: 2px solid #A89379;
      --nav-active-weight: 500;
      --nav-default-color: #4D4D4D;          /* WCAG 修正: carbon-soft→carbon-light */
      --nav-default-weight: 400;

      /* N1. 多页导航栏 — 下拉菜单 */
      --dropdown-bg: rgba(232,230,224,0.96);
      --dropdown-blur: blur(12px);
      --dropdown-border: 1px solid #D1CEC6;
      --dropdown-radius: 8px;
      --dropdown-shadow: 0 4px 16px rgba(51,51,51,0.10);
      --dropdown-item-height: 44px;
      --dropdown-item-padding: 12px 20px 12px 24px;
      --dropdown-item-font-size: 14px;
      --dropdown-item-color: #4D4D4D;         /* WCAG 修正 */
      --dropdown-item-hover-color: #333333;
      --dropdown-item-hover-bg: rgba(168,147,121,0.06);
      --dropdown-item-active-color: #333333;  /* WCAG 修正 */
      --dropdown-item-active-border: 2px solid #A89379;
      --dropdown-divider: 1px solid #D1CEC6;
      --dropdown-caret-color: #8A8A8A;
      --dropdown-caret-hover-color: #A89379;

      /* N2. 语言切换按钮 */
      --lang-btn-height: 32px;
      --lang-btn-padding: 6px 16px;
      --lang-btn-font-size: 14px;
      --lang-btn-radius: 4px;
      --lang-active-color: #333333;           /* WCAG 修正 */
      --lang-active-border-color: #A89379;
      --lang-active-bg: rgba(168,147,121,0.08);
      --lang-inactive-color: #4D4D4D;         /* WCAG 修正 */
      --lang-inactive-hover-color: #333333;
      --lang-divider-color: #333333;
      --lang-divider-width: 2px;
      --lang-divider-height: 16px;

      /* N3. 页面标题区 */
      --page-title-bg: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --page-title-padding: 40px 40px;
      --page-title-h2-size: 28px;
      --page-title-h2-color: #333333;
      --page-title-line-width: 40px;
      --page-title-line-height: 2px;
      --page-title-line-color: #A89379;
      --page-title-desc-size: 18px;
      --page-title-desc-color: #4D4D4D;       /* WCAG 修正 */
      --page-title-desc-max-width: 640px;

      /* N4. 锚点偏移 */
      --anchor-offset: 72px;

      /* N5. 核心优势横幅 */
      --feature-banner-bg: #FFFFFF;
      --feature-banner-padding: 80px 40px 72px;
      --feature-card-bg: #FFFFFF;
      --feature-card-border: 1px solid #D1CEC6;
      --feature-card-radius: 8px;
      --feature-card-padding: 28px;
      --feature-card-icon-size: 48px;
      --feature-card-icon-bg: rgba(168,147,121,0.12);
      --feature-card-icon-color: #A89379;
      --feature-card-title-size: 22px;
      --feature-card-title-color: #333333;
      --feature-card-desc-size: 14px;
      --feature-card-desc-color: #4D4D4D;     /* WCAG 修正 */
      --feature-card-link-color: #333333;      /* WCAG 修正 */
      --feature-card-link-hover-color: #A89379;
      --feature-card-gap: 32px;

      /* N6. 信任背书缩略 */
      --trust-row-bg: #E8E6E0;
      --trust-row-padding: 56px 40px;
      --trust-badge-circle-size: 48px;
      --trust-badge-circle-bg: rgba(232,230,224,0.6);
      --trust-badge-icon-color: #A89379;
      --trust-badge-name-size: 14px;
      --trust-badge-name-color: #333333;
      --trust-badge-gap: 40px;
      --trust-row-link-color: #333333;         /* WCAG 修正 */
      --trust-row-link-hover-color: #A89379;
      --trust-row-label-color: #A89379;        /* WCAG 修正 */

      /* N7. 联系 CTA 横幅 */
      --cta-banner-bg: #333333;
      --cta-banner-padding: 80px 40px;
      --cta-banner-title-color: #FFFFFF;
      --cta-banner-desc-color: #D1CEC6;
      --cta-banner-desc-max-width: 560px;
    }

    /* === Container & Grid === */
    .container {
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--grid-gutter);
    }
    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--grid-gutter);
    }
    .grid-7-5 {
      display: grid;
      grid-template-columns: 7fr 5fr;
      gap: var(--grid-gutter);
    }
    .grid-6-6 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--grid-gutter);
    }

    /* === Typography Utilities === */
    .h2 {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 500;
      line-height: 1.35;
    }
    .h3 {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.4;
    }
    .h4 {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
    }
    .body-l {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.7;
    }
    .body-text {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.65;
    }
    .body-s {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
    }
    .micro {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0.05em;
    }
    .data-text {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
    }
    .data-bold {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
    }

    /* Editorial Labels — small-caps */
    .editorial-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      font-variant: small-caps;
      letter-spacing: 0.08em;
      color: var(--color-copper-soft);
    }

    /* === Buttons === */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 12px 28px;
      border-radius: var(--radius-md);
      background: var(--color-copper);
      color: var(--color-white);
      min-width: 120px;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-primary:hover {
      background: var(--color-copper-hover);
      box-shadow: 0 2px 8px rgba(168,147,121,0.25);
    }
    .btn-primary:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .btn-primary:active {
      background: #8A7560;
      transform: translateY(1px);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 12px 28px;
      border-radius: var(--radius-md);
      background: transparent;
      color: var(--color-carbon);
      border: 1px solid var(--color-carbon);
      min-width: 120px;
      transition: background 0.2s;
    }
    .btn-secondary:hover {
      background: rgba(51,51,51,0.05);
    }

    .btn-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: 14px 36px;
      border-radius: var(--radius-lg);
      background: var(--color-copper);
      color: var(--color-white);
      min-width: 160px;
      transition: transform 0.15s, box-shadow 0.2s;
    }
    .btn-cta:hover {
      transform: scale(1.02);
      box-shadow: var(--shadow-copper-glow);
    }
    .btn-cta:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .btn-cta:active {
      background: #8A7560;
      transform: scale(0.98);
    }
    /* ── focus-visible for interactive links (P1-3 WCAG) ── */
    .card-link:focus-visible,
    .feature-card__link:focus-visible,
    .trust-badge-row__link:focus-visible,
    .nav-dropdown-item:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .footer-link:focus-visible,
    .lang-btn--inactive:focus-visible {
      outline: 1px solid var(--color-copper);
      outline-offset: 1px;
    }

    /* === Tags === */
    .tag-spec {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 400;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      background: var(--color-cloud-light);
      color: var(--color-slate);
    }

    /* === Editorial Decorations === */
    .copper-line-decor {
      width: 40px;
      height: 2px;
      background: var(--color-copper);
      margin-top: var(--space-sm);
    }
    .editorial-divider-line {
      width: 60px;
      height: 2px;
      background: var(--color-copper);
      margin: auto;
    }
    .divider-section-line {
      width: 120px;
      height: 1px;
      background: var(--color-line);
      margin: auto;
    }
    .editorial-quote-mark {
      position: absolute;
      top: -8px;
      left: -4px;
      font-family: var(--font-display-serif);
      font-size: 48px;
      color: var(--color-copper-soft);
      line-height: 1;
      z-index: var(--z-decorative);
    }

    /* === N1: Multi-page Navigation — v4.0 === */
    .nav-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 72px;
      background: rgba(240,237,231,0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--color-line);
      z-index: var(--z-sticky);
      display: flex;
      align-items: center;
    }
    .nav-bar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: var(--space-lg);
    }
    .nav-logo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .nav-logo-cn {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-carbon);
    }
    .nav-logo-en {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      font-variant: small-caps;
      letter-spacing: 0.05em;
      color: var(--color-carbon-light); /* WCAG 修正 */
    }
    .nav-items {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    /* Nav Item — WCAG 修正: 默认色 carbon-light */
    .nav-item {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--nav-default-color); /* #4D4D4D — WCAG 5.6:1 */
      padding: 10px 20px;
      text-decoration: none;
      position: relative;
      transition: color 0.2s ease;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .nav-item:hover {
      color: var(--color-carbon);
    }

    /* Nav Active — 温铜下划线标识 */
    .nav-item--active {
      color: var(--nav-active-color); /* #333333 */
      font-weight: var(--nav-active-weight); /* 500 */
    }
    .nav-item--active::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 20px;
      right: 20px;
      height: 2px;
      background-color: var(--color-copper);
    }

    /* Dropdown Indicator */
    .nav-dropdown-caret {
      font-size: 10px;
      color: var(--dropdown-caret-color); /* #8A8A8A */
      transition: color 0.2s ease;
      line-height: 1;
    }
    .nav-item:hover .nav-dropdown-caret {
      color: var(--dropdown-caret-hover-color); /* #A89379 */
    }

    /* Dropdown Container */
    .nav-dropdown-wrap {
      position: relative;
    }
    .nav-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 180px;
      max-width: 240px;
      background: var(--dropdown-bg);
      backdrop-filter: var(--dropdown-blur);
      -webkit-backdrop-filter: var(--dropdown-blur);
      border: var(--dropdown-border);
      border-radius: var(--dropdown-radius);
      box-shadow: var(--dropdown-shadow);
      padding: 16px 0;
      z-index: var(--z-dropdown);
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 200ms ease-out, transform 200ms ease-out;
      pointer-events: none;
      list-style: none;
      margin-top: 12px;
    }
    .nav-dropdown-wrap:hover .nav-dropdown,
    .nav-dropdown--open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Dropdown Item — WCAG 修正 */
    .nav-dropdown-item {
      display: block;
      color: var(--dropdown-item-color); /* #4D4D4D — WCAG 5.6:1 */
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      padding: 12px 20px 12px 24px;
      text-decoration: none;
      border-left: 2px solid transparent;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }
    .nav-dropdown-item:hover {
      color: var(--dropdown-item-hover-color); /* #333333 */
      background: var(--dropdown-item-hover-bg);
    }

    /* N2: Language Switcher — WCAG 修正 */
    .lang-switcher {
      display: flex;
      align-items: center;
      height: 32px;
      margin-right: 16px;
    }
    .lang-btn {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      padding: 6px 16px;
      border-radius: var(--lang-btn-radius);
      text-decoration: none;
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      cursor: pointer;
      line-height: 1;
    }
    .lang-btn--active {
      color: var(--lang-active-color); /* #333333 — 9.7:1 ✅ */
      border: 1px solid var(--lang-active-border-color); /* #A89379 */
      background: var(--lang-active-bg); /* rgba(168,147,121,0.08) */
    }
    .lang-btn--inactive {
      color: var(--lang-inactive-color); /* #4D4D4D — 5.6:1 ✅ */
      border: none;
      background: transparent;
    }
    .lang-btn--inactive:hover {
      color: var(--lang-inactive-hover-color); /* #333333 */
    }
    .lang-divider {
      width: 2px;
      height: 16px;
      background-color: var(--lang-divider-color);
      margin: 0 4px;
      flex-shrink: 0;
    }

    /* Nav CTA Button */
    .nav-cta {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 10px 24px;
      border-radius: var(--radius-md);
      background: var(--color-copper);
      color: var(--color-white);
      text-decoration: none;
      transition: background 0.2s;
    }
    .nav-cta:hover {
      background: var(--color-copper-hover);
    }

    /* Hamburger */
    .nav-hamburger {
      display: none;
      width: 24px;
      height: 24px;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
    }
    .nav-hamburger span {
      width: 100%;
      height: 2px;
      background: var(--color-carbon);
      transition: transform 0.2s;
    }

    /* Mobile Menu */
    .nav-mobile-menu {
      display: none;
      position: fixed;
      top: 72px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(240,237,231,0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 24px 20px;
      z-index: var(--z-dropdown);
      overflow-y: auto;
    }
    .nav-mobile-menu--open {
      display: block;
    }
    .nav-mobile-menu .nav-item {
      display: block;
      padding: 16px 0;
      border-left: 2px solid transparent;
      font-size: 16px;
    }
    .nav-mobile-menu .nav-item--active {
      border-left-color: var(--color-copper);
      color: var(--color-copper);
      font-weight: 500;
    }
    .nav-mobile-menu .nav-item--active::after {
      display: none;
    }
    .nav-mobile-menu .nav-dropdown-item {
      padding: 12px 0 12px 16px;
      font-size: 13px;
      display: block;
    }
    .nav-mobile-menu .lang-switcher {
      margin-right: 0;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid var(--color-cloud-dark);
      justify-content: center;
    }
    .nav-mobile-menu .nav-cta {
      display: block;
      text-align: center;
      margin-top: 24px;
      font-size: 16px;
      padding: 14px 36px;
      border-radius: var(--radius-lg);
    }
    .mobile-dropdown-sub {
      display: none;
      padding-left: 16px;
    }
    .mobile-dropdown-sub--open {
      display: block;
    }

    /* === N3: Page Title Hero — 页面标题区 === */
    .page-title-hero {
      background: var(--page-title-bg);
      padding: var(--page-title-padding);
      max-width: var(--container-max);
      margin: 0 auto;
      position: relative;
    }
    .page-title-hero__title {
      font-family: var(--font-heading);
      font-size: var(--page-title-h2-size);
      font-weight: 500;
      color: var(--page-title-h2-color);
      line-height: 1.35;
      letter-spacing: 0;
      margin: 0;
    }
    .page-title-hero__line {
      display: block;
      width: var(--page-title-line-width);
      height: var(--page-title-line-height);
      background-color: var(--page-title-line-color);
      margin-top: 12px;
    }
    .page-title-hero__description {
      font-family: var(--font-body);
      font-size: var(--page-title-desc-size);
      font-weight: 400;
      color: var(--page-title-desc-color); /* WCAG 修正: carbon-light 5.6:1 */
      line-height: 1.7;
      max-width: var(--page-title-desc-max-width);
      margin-top: 20px;
      margin-bottom: 0;
    }
    .page-title-hero__separator {
      height: 1px;
      background-color: var(--color-line);
      width: 100%;
      margin-top: 40px;
    }

    /* === Editorial Divider === */
    .editorial-divider {
      height: var(--space-editorial);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--color-white);
    }
    .editorial-divider .editorial-label {
      margin-top: var(--space-sm);
    }

    /* === Section Header === */
    .section-header {
      text-align: center;
      margin-bottom: var(--space-3xl);
    }
    .section-header .h2 {
      color: var(--color-carbon);
    }
    .section-header .copper-line-decor {
      margin-left: auto;
      margin-right: auto;
    }
    .section-header .body-s {
      color: var(--color-carbon-light); /* WCAG 修正 */
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
      margin-top: var(--space-md);
    }

    /* === OEM Section === */
    .section-oem {
      padding: var(--space-4xl) 0;
      background: var(--color-white);
    }
    .oem-narrative {
      padding-right: var(--space-lg);
    }
    .oem-narrative .editorial-quote-mark {
      top: -4px;
      left: -8px;
    }
    .oem-narrative .h3 {
      margin-bottom: var(--space-md);
      position: relative;
      padding-top: var(--space-xl);
    }
    .oem-narrative .body-text {
      color: var(--color-carbon-light); /* WCAG 修正 */
      margin-bottom: var(--space-lg);
    }

    /* OEM Feature List */
    .oem-feature-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }
    .oem-feature-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-sm);
    }
    .oem-feature-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .oem-feature-icon svg {
      width: 24px;
      height: 24px;
    }
    .oem-feature-text .h4 {
      color: var(--color-carbon);
    }
    .oem-feature-text .body-s {
      color: var(--color-carbon-light); /* WCAG 修正 */
    }

    /* OEM Option Cards */
    .oem-options-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--grid-gutter);
      margin-top: var(--space-3xl);
    }
    .oem-option-card {
      background: var(--color-white);
      border: 1px solid var(--color-cloud-dark);
      border-radius: var(--radius-md);
      padding: 24px;
      transition: border-color 0.2s ease, transform 0.2s ease;
      position: relative;
      overflow: hidden;
    }
    .oem-option-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--color-copper);
    }
    .oem-option-card:hover {
      border-color: var(--color-copper-soft);
      transform: translateY(-2px);
    }
    .oem-option-card__icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-md);
    }
    .oem-option-card__icon svg {
      width: 24px;
      height: 24px;
      color: var(--color-copper);
    }
    .oem-option-card__title {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-carbon);
      margin-bottom: var(--space-sm);
    }
    .oem-option-card__desc {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
      color: var(--color-carbon-light); /* WCAG 修正 */
      margin-bottom: var(--space-md);
    }
    .oem-option-card__specs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }

    /* Spec Data Table */
    .spec-table-wrap {
      background: var(--color-cloud-light);
      border-radius: var(--radius-xl);
      padding: var(--space-lg);
    }
    .spec-table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid var(--color-line);
    }
    .spec-table th {
      background: var(--color-cloud);
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-carbon);
      padding: var(--space-sm) var(--space-md);
      text-align: left;
      border-bottom: 2px solid var(--color-copper-soft);
    }
    .spec-table td {
      background: var(--color-white);
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-carbon-light); /* WCAG 修正 */
      padding: var(--space-sm) var(--space-md);
      border-bottom: 1px solid var(--color-line);
    }
    .spec-table td.spec-value {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-slate);
    }
    .spec-table tbody tr:hover {
      background: rgba(168,147,121,0.06);
    }

    /* Factory Banner */
    .factory-banner {
      width: 100%;
      aspect-ratio: 21/9;
      background: var(--gradient-hero);
      border-radius: var(--radius-xl);
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      margin-top: var(--space-3xl);
      position: relative;
    }
    .factory-banner svg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .factory-banner-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 35%;
      background: linear-gradient(to top, rgba(51,51,51,0.7), rgba(51,51,51,0));
      display: flex;
      align-items: flex-end;
      padding: var(--space-lg) var(--space-xl);
    }
    .factory-banner-text {
      color: var(--color-white);
    }
    .factory-banner-text .h3 {
      margin-bottom: var(--space-xs);
    }
    .factory-banner-text .body-s {
      color: var(--color-cloud-dark);
    }

    /* === Trust Section === */
    .section-trust {
      padding: var(--space-4xl) 0;
      background: var(--color-cloud);
    }

    /* Trust Cards — About page expanded version */
    .trust-card {
      background: var(--color-white);
      border: 1px solid var(--color-cloud-dark);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-flat);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .trust-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--color-copper);
    }
    .trust-card .trust-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-md);
    }
    .trust-card .trust-icon svg {
      width: 24px;
      height: 24px;
    }
    .trust-card .trust-title {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-carbon);
      margin-bottom: var(--space-sm);
    }
    .trust-card .trust-desc {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
      color: var(--color-carbon-light); /* WCAG 修正 */
      margin-bottom: var(--space-md);
    }
    /* Certification Key Indicators */
    .trust-card .trust-indicator {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 400;
      color: var(--color-slate);
      margin-bottom: var(--space-xs);
    }
    .trust-card .trust-indicator::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-copper);
      flex-shrink: 0;
    }

    /* === Process Timeline === */
    .section-process {
      padding: var(--space-4xl) 0;
      background: var(--color-white);
    }
    .timeline {
      position: relative;
      padding-left: var(--space-xl);
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--color-line);
    }
    .timeline-step {
      position: relative;
      padding-bottom: var(--space-2xl);
      padding-left: var(--space-lg);
    }
    .timeline-step:last-child {
      padding-bottom: 0;
    }
    .timeline-step::before {
      content: '';
      position: absolute;
      left: -25px;
      top: 4px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--color-copper);
    }
    .timeline-step.step-active::before {
      width: 16px;
      height: 16px;
      left: -27px;
      top: 2px;
      box-shadow: 0 2px 8px rgba(168,147,121,0.3);
    }
    .timeline-step-number {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      font-variant: small-caps;
      letter-spacing: 0.08em;
      color: var(--color-copper);
      margin-bottom: var(--space-xs);
    }
    .timeline-step-title {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-carbon);
      margin-bottom: var(--space-xs);
    }
    .timeline-step-desc {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
      color: var(--color-carbon-light); /* WCAG 修正 */
      max-width: 480px;
    }

    /* === Footer === */
    .footer {
      background: var(--color-carbon);
      padding: var(--space-2xl) 0 var(--space-xl);
      border-top: 1px solid var(--color-carbon-light);
      color: var(--color-cloud-dark);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--grid-gutter);
    }
    .footer-col .footer-title {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-cloud-dark);
      margin-bottom: var(--space-md);
    }
    .footer-col .footer-link {
      display: block;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-cloud-dark);
      padding: var(--space-2xs) 0;
      transition: color 0.2s;
    }
    .footer-col .footer-link:hover {
      color: var(--color-copper-soft);
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--space-xl);
      padding-top: var(--space-lg);
      border-top: 1px solid var(--color-carbon-light);
    }
    .footer-bottom .micro {
      color: var(--color-cloud-dark);
    }
    .footer-brand {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      color: var(--color-cloud-dark);
    }

    /* === Inline SVG Icon Library === */
    .icon-copper { color: var(--color-copper); }

    /* === Anchor Offset — v4.0 N4 === */
    .anchor-offset,
    [id="adult"],
    [id="kids"],
    [id="oem"],
    [id="trust"],
    [id="process"] {
      scroll-margin-top: 72px;
    }

    /* === Responsive — Tablet 640–1024px === */
    @media (max-width: 1024px) {
      .grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
      .grid-4 {
        grid-template-columns: repeat(2, 1fr);
      }
      .grid-7-5 {
        grid-template-columns: 1fr;
      }
      .oem-options-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .nav-items {
        display: none;
      }
      .lang-switcher-desktop {
        display: none;
      }
      .nav-hamburger {
        display: flex;
      }
      /* Page Title Hero Tablet */
      .page-title-hero {
        padding: 60px 32px;
      }
      .page-title-hero__title {
        font-size: 24px;
      }
      .page-title-hero__line {
        width: 32px;
      }
      .page-title-hero__description {
        font-size: 16px;
      }
      /* OEM Narrative Tablet */
      .oem-narrative {
        padding-right: 0;
      }
      /* Spec Table wrap full width */
      .spec-table-wrap {
        margin-top: var(--space-lg);
      }
      /* Lang btn Tablet */
      .lang-btn {
        font-size: 13px;
        padding: 4px 12px;
      }
      .nav-item {
        padding: 8px 16px;
      }
      .nav-items {
        gap: 2px;
      }
    }

    /* === Responsive — Mobile < 640px === */
    @media (max-width: 640px) {
      .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
      }
      .grid-3,
      .grid-4 {
        grid-template-columns: 1fr;
      }
      .oem-options-grid {
        grid-template-columns: 1fr;
      }

      /* Page Title Hero Mobile */
      .page-title-hero {
        padding: 48px 20px;
      }
      .page-title-hero__title {
        font-size: 22px;
      }
      .page-title-hero__line {
        width: 28px;
      }
      .page-title-hero__description {
        font-size: 15px;
        max-width: 100%;
      }

      /* Nav: hide desktop nav items, show hamburger */
      .nav-items,
      .lang-switcher-desktop {
        display: none;
      }
      .nav-hamburger {
        display: flex;
      }

      /* Editorial Divider Mobile */
      .editorial-divider {
        height: 48px;
      }
      .editorial-divider .editorial-divider-line {
        width: 40px;
      }
      .editorial-divider .editorial-label {
        font-size: 10px;
      }

      /* Section spacing Mobile */
      .section-oem,
      .section-trust,
      .section-process {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
      }

      /* OEM narrative Mobile */
      .oem-narrative {
        padding-right: 0;
      }
      .oem-narrative .editorial-quote-mark {
        font-size: 36px;
      }

      /* Factory Banner Mobile */
      .factory-banner {
        aspect-ratio: 16/9;
      }

      /* Timeline Mobile */
      .timeline {
        padding-left: var(--space-md);
      }
      .timeline-step {
        padding-left: var(--space-md);
      }

      /* Footer Mobile */
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
      }
      .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
      }

      /* Typography Mobile */
      .h2 {
        font-size: 24px;
      }
    }

    /* === Accessibility: prefers-reduced-motion === */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
      html { scroll-behavior: auto; }
      .oem-option-card:hover { transform: none; }
      .btn-cta:hover { transform: none; }
    }

    /* === Anti-Slop Quality Controls === */
    /* No purple gradients, no emoji icons, no generic rounded+border-accent pattern */
    /* No Inter as display font, no fabricated stats */
    /* This prototype uses: carbon+cloud+copper palette, DM Sans heading, editorial whitespace */

/* === Source: contact-cn.html === */
/* === CSS 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-body);
      font-size: 16px;
      line-height: 1.65;
      color: var(--color-carbon);
      background: var(--color-white);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* === Design Tokens — Warm Editorial + 纯灰调 v4.0 === */
    :root {
      /* Brand Core — 纯灰调 */
      --color-carbon: #333333;
      --color-carbon-light: #4D4D4D;
      --color-carbon-soft: #6E6E6E;
      --color-mist: #8A8A8A;
      --color-white: #FFFFFF;
      --color-cloud: #E8E6E0;
      --color-cloud-light: #F0EDE7;
      --color-cloud-dark: #D1CEC6;
      --color-line: #C4C0B8;

      /* Accent — 温铜/暖棕 */
      --color-copper: #A89379;
      --color-copper-hover: #9A8268;
      --color-copper-soft: #C4B5A0;
      --color-copper-pale: #E8DFD0;
      --color-slate: #9BABB8;
      --color-slate-hover: #8A9DAC;
      --color-slate-soft: #B8C8D4;

      /* Adult Series */
      --color-adult-accent: #A89379;
      --color-adult-accent-soft: #C4B5A0;
      --color-adult-bg-accent: #E8DFD0;
      --color-adult-tag: #A89379;
      --color-adult-line: #C4B5A0;

      /* Kids Series */
      --color-kids-primary: #5BBFDE;
      --color-kids-secondary: #F4A261;
      --color-kids-primary-soft: #A8DCF0;
      --color-kids-secondary-soft: #F8C896;
      --color-kids-bg-primary: #EBF5FA;
      --color-kids-bg-secondary: #FFF3E8;
      --color-kids-tag: #5BBFDE;

      /* Semantic */
      --color-success: #7DB88A;
      --color-warning: #C9A96E;
      --color-danger: #D4564A;
      --color-info: #9BABB8;

      /* Gradient */
      --gradient-hero: linear-gradient(180deg, #333333 0%, #4D4D4D 60%, #E8E6E0 100%);
      --gradient-copper-wash: linear-gradient(135deg, #A89379 0%, #C4B5A0 50%, #E8DFD0 100%);
      --gradient-cloud-rise: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --gradient-kids: linear-gradient(135deg, #5BBFDE 0%, #F4A261 100%);
      --gradient-hero-line: linear-gradient(90deg, transparent 0%, #A89379 50%, transparent 100%);

      /* Typography — 三层架构 */
      --font-display-serif: 'Source Serif 4', 'Noto Serif SC', 'Georgia', serif;
      --font-heading: 'DM Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
      --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
      --font-serif-zh: 'Noto Serif SC', 'STSong', 'SimSun', serif;

      /* Spacing */
      --space-2xs: 4px;
      --space-xs: 8px;
      --space-sm: 12px;
      --space-md: 20px;
      --space-lg: 32px;
      --space-xl: 40px;
      --space-2xl: 56px;
      --space-3xl: 72px;
      --space-4xl: 96px;
      --space-5xl: 120px;
      --space-editorial: 80px;

      /* Radius */
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 10px;
      --radius-xl: 12px;
      --radius-card: 16px;

      /* Shadow — 暖灰阴影 */
      --shadow-flat: none;
      --shadow-subtle: 0 1px 3px rgba(51,51,51,0.05);
      --shadow-soft: 0 2px 8px rgba(51,51,51,0.07);
      --shadow-raised: 0 3px 12px rgba(51,51,51,0.08);
      --shadow-elevated: 0 6px 20px rgba(51,51,51,0.12);
      --shadow-floating: 0 8px 28px rgba(51,51,51,0.14);
      --shadow-copper-glow: 0 4px 16px rgba(168,147,121,0.20);

      /* Z-index */
      --z-base: 0;
      --z-decorative: 50;
      --z-sticky: 100;
      --z-dropdown: 200;
      --z-modal: 300;
      --z-toast: 400;

      /* Container */
      --container-max: 1200px;
      --grid-gutter: 32px;

      /* === v4.0 新增组件变量 === */

      /* N1. 多页导航栏 — Active 状态 */
      --nav-active-color: #333333;
      --nav-active-underline: 2px solid #A89379;
      --nav-active-weight: 500;
      --nav-default-color: #4D4D4D;          /* WCAG 修正 */
      --nav-default-weight: 400;

      /* N1. 多页导航栏 — 下拉菜单 */
      --dropdown-bg: rgba(232,230,224,0.96);
      --dropdown-blur: blur(12px);
      --dropdown-border: 1px solid #D1CEC6;
      --dropdown-radius: 8px;
      --dropdown-shadow: 0 4px 16px rgba(51,51,51,0.10);
      --dropdown-item-height: 44px;
      --dropdown-item-padding: 12px 20px 12px 24px;
      --dropdown-item-font-size: 14px;
      --dropdown-item-color: #4D4D4D;         /* WCAG 修正 */
      --dropdown-item-hover-color: #333333;
      --dropdown-item-hover-bg: rgba(168,147,121,0.06);
      --dropdown-item-active-color: #333333;  /* WCAG 修正 */
      --dropdown-item-active-border: 2px solid #A89379;
      --dropdown-divider: 1px solid #D1CEC6;
      --dropdown-caret-color: #8A8A8A;
      --dropdown-caret-hover-color: #A89379;

      /* N2. 语言切换按钮 */
      --lang-btn-height: 32px;
      --lang-btn-padding: 6px 16px;
      --lang-btn-font-size: 14px;
      --lang-btn-radius: 4px;
      --lang-active-color: #333333;           /* WCAG 修正 */
      --lang-active-border-color: #A89379;
      --lang-active-bg: rgba(168,147,121,0.08);
      --lang-inactive-color: #4D4D4D;         /* WCAG 修正 */
      --lang-inactive-hover-color: #333333;
      --lang-divider-color: #333333;
      --lang-divider-width: 2px;
      --lang-divider-height: 16px;

      /* N3. 页面标题区 */
      --page-title-bg: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --page-title-padding: 40px 40px;
      --page-title-h2-size: 28px;
      --page-title-h2-color: #333333;
      --page-title-line-width: 40px;
      --page-title-line-height: 2px;
      --page-title-line-color: #A89379;
      --page-title-desc-size: 18px;
      --page-title-desc-color: #4D4D4D;       /* WCAG 修正 */
      --page-title-desc-max-width: 640px;

      /* N4. 锚点偏移 */
      --anchor-offset: 72px;
    }

    /* === Container & Grid === */
    .container {
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--space-lg);
      padding-right: var(--space-lg);
    }

    /* === Typography Utilities === */
    .h2 {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 500;
      line-height: 1.35;
    }
    .h3 {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.4;
    }
    .h4 {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
    }
    .body-l {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 400;
      line-height: 1.7;
    }
    .body-text {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.65;
    }
    .body-s {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
    }
    .caption {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.03em;
    }
    .micro {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0.05em;
    }

    /* Editorial Labels — small-caps */
    .editorial-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      font-variant: small-caps;
      letter-spacing: 0.08em;
      color: var(--color-copper-soft);
    }

    /* === Buttons === */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 12px 28px;
      border-radius: var(--radius-md);
      background: var(--color-copper);
      color: var(--color-white);
      min-width: 120px;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-primary:hover {
      background: var(--color-copper-hover);
      box-shadow: 0 2px 8px rgba(168,147,121,0.25);
    }
    .btn-primary:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .btn-primary:active {
      background: #8A7560;
      transform: translateY(1px);
    }

    .btn-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: 14px 36px;
      border-radius: var(--radius-lg);
      background: var(--color-copper);
      color: var(--color-white);
      min-width: 160px;
      transition: transform 0.15s, box-shadow 0.2s;
    }
    .btn-cta:hover {
      transform: scale(1.02);
      box-shadow: var(--shadow-copper-glow);
    }
    .btn-cta:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .btn-cta:active {
      background: #8A7560;
      transform: scale(0.98);
    }
    /* ── focus-visible for interactive links (P1-3 WCAG) ── */
    .card-link:focus-visible,
    .feature-card__link:focus-visible,
    .trust-badge-row__link:focus-visible,
    .nav-dropdown-item:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .footer-link:focus-visible,
    .lang-btn--inactive:focus-visible {
      outline: 1px solid var(--color-copper);
      outline-offset: 1px;
    }

    /* === Editorial Decorations === */
    .copper-line-decor {
      width: 40px;
      height: 2px;
      background: var(--color-copper);
      margin-top: var(--space-sm);
    }
    .divider-section-line {
      width: 120px;
      height: 1px;
      background: var(--color-line);
      margin: auto;
    }

    /* === N1: Multi-page Navigation — v4.0 === */
    .nav-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 72px;
      background: rgba(240,237,231,0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--color-line);
      z-index: var(--z-sticky);
      display: flex;
      align-items: center;
    }
    .nav-bar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: var(--space-lg);
    }
    .nav-logo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .nav-logo-cn {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-carbon);
    }
    .nav-logo-en {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      font-variant: small-caps;
      letter-spacing: 0.05em;
      color: var(--color-carbon-light); /* WCAG 修正 */
    }
    .nav-items {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    /* Nav Item — WCAG 修正: 默认色 carbon-light */
    .nav-item {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--nav-default-color); /* #4D4D4D — WCAG 5.6:1 */
      padding: 10px 20px;
      text-decoration: none;
      position: relative;
      transition: color 0.2s ease;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .nav-item:hover {
      color: var(--color-carbon);
    }

    /* Nav Active — 温铜下划线标识 */
    .nav-item--active {
      color: var(--nav-active-color); /* #333333 */
      font-weight: var(--nav-active-weight); /* 500 */
    }
    .nav-item--active::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 20px;
      right: 20px;
      height: 2px;
      background-color: var(--color-copper);
    }

    /* Dropdown Indicator */
    .nav-dropdown-caret {
      font-size: 10px;
      color: var(--dropdown-caret-color); /* #8A8A8A */
      transition: color 0.2s ease;
      line-height: 1;
    }
    .nav-item:hover .nav-dropdown-caret {
      color: var(--dropdown-caret-hover-color); /* #A89379 */
    }

    /* Dropdown Container */
    .nav-dropdown-wrap {
      position: relative;
    }
    .nav-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 180px;
      max-width: 240px;
      background: var(--dropdown-bg);
      backdrop-filter: var(--dropdown-blur);
      -webkit-backdrop-filter: var(--dropdown-blur);
      border: var(--dropdown-border);
      border-radius: var(--dropdown-radius);
      box-shadow: var(--dropdown-shadow);
      padding: 16px 0;
      z-index: var(--z-dropdown);
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 200ms ease-out, transform 200ms ease-out;
      pointer-events: none;
      list-style: none;
      margin-top: 12px;
    }
    .nav-dropdown-wrap:hover .nav-dropdown,
    .nav-dropdown--open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Dropdown Item — WCAG 修正 */
    .nav-dropdown-item {
      display: block;
      color: var(--dropdown-item-color); /* #4D4D4D — WCAG 5.6:1 */
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      padding: 12px 20px 12px 24px;
      text-decoration: none;
      border-left: 2px solid transparent;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    }
    .nav-dropdown-item:hover {
      color: var(--dropdown-item-hover-color); /* #333333 */
      background: var(--dropdown-item-hover-bg);
    }

    /* N2: Language Switcher — WCAG 修正 */
    .lang-switcher {
      display: flex;
      align-items: center;
      height: 32px;
      margin-right: 16px;
    }
    .lang-btn {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      padding: 6px 16px;
      border-radius: var(--lang-btn-radius);
      text-decoration: none;
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      cursor: pointer;
      line-height: 1;
    }
    /* Active — WCAG: carbon 文字 + 温铜边框 + 极浅温铜背景 */
    .lang-btn--active {
      color: var(--lang-active-color); /* #333333 — 9.7:1 ✅ */
      border: 1px solid var(--lang-active-border-color); /* #A89379 */
      background: var(--lang-active-bg); /* rgba(168,147,121,0.08) */
    }
    /* Inactive — WCAG: carbon-light 文字 */
    .lang-btn--inactive {
      color: var(--lang-inactive-color); /* #4D4D4D — 5.6:1 ✅ */
      border: none;
      background: transparent;
    }
    .lang-btn--inactive:hover {
      color: var(--lang-inactive-hover-color); /* #333333 */
    }
    .lang-divider {
      width: 2px;
      height: 16px;
      background-color: var(--lang-divider-color);
      margin: 0 4px;
      flex-shrink: 0;
    }

    /* Nav CTA Button */
    .nav-cta {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 10px 24px;
      border-radius: var(--radius-md);
      background: var(--color-copper);
      color: var(--color-white);
      text-decoration: none;
      transition: background 0.2s;
    }
    .nav-cta:hover {
      background: var(--color-copper-hover);
    }

    /* Hamburger */
    .nav-hamburger {
      display: none;
      width: 24px;
      height: 24px;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
    }
    .nav-hamburger span {
      width: 100%;
      height: 2px;
      background: var(--color-carbon);
      transition: transform 0.2s;
    }

    /* Mobile Menu */
    .nav-mobile-menu {
      display: none;
      position: fixed;
      top: 72px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(240,237,231,0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 24px 20px;
      z-index: var(--z-dropdown);
      overflow-y: auto;
    }
    .nav-mobile-menu--open {
      display: block;
    }
    .nav-mobile-menu .nav-item {
      display: block;
      padding: 16px 0;
      border-left: 2px solid transparent;
      font-size: 16px;
    }
    .nav-mobile-menu .nav-item--active {
      border-left-color: var(--color-copper);
      color: var(--color-copper);
      font-weight: 500;
    }
    .nav-mobile-menu .nav-item--active::after {
      display: none; /* Mobile 用左边框而非下划线 */
    }
    .nav-mobile-menu .nav-dropdown-item {
      padding: 12px 0 12px 16px;
      font-size: 13px;
      display: block;
    }
    .nav-mobile-menu .lang-switcher {
      margin-right: 0;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid var(--color-cloud-dark);
      justify-content: center;
    }
    .nav-mobile-menu .nav-cta {
      display: block;
      text-align: center;
      margin-top: 24px;
      font-size: 16px;
      padding: 14px 36px;
      border-radius: var(--radius-lg);
    }
    .mobile-dropdown-sub {
      display: none;
      padding-left: 16px;
    }
    .mobile-dropdown-sub--open {
      display: block;
    }

    /* === N3: Page Title Hero — 页面标题区 === */
    .page-title-hero {
      background: var(--gradient-cloud-rise);
      padding: 40px 40px;
      max-width: var(--container-max);
      margin: 0 auto;
      position: relative;
    }
    .page-title-hero__title {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 500;
      color: var(--color-carbon);
      line-height: 1.35;
      letter-spacing: 0;
      margin: 0;
    }
    .page-title-hero__line {
      display: block;
      width: 40px;
      height: 2px;
      background-color: var(--color-copper);
      margin-top: 12px;
    }
    .page-title-hero__description {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 400;
      color: var(--color-carbon-light); /* WCAG 修正 */
      line-height: 1.7;
      max-width: 640px;
      margin-top: 20px;
      margin-bottom: 0;
    }
    .page-title-hero__separator {
      height: 1px;
      background-color: var(--color-line);
      width: 100%;
      margin-top: 40px;
    }

    /* === Contact Section — 联系信息 + 表单双列 === */
    .contact-section {
      background: var(--color-white);
      padding: var(--space-4xl) 0;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: var(--grid-gutter);
    }

    /* 左列：联系信息卡片 — 碳黑背景 */
    .contact-info-card {
      background: var(--color-carbon);
      border-radius: var(--radius-xl);
      padding: var(--space-2xl);
      color: var(--color-white);
      display: flex;
      flex-direction: column;
    }
    .contact-info-card__title {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 500;
      color: var(--color-white);
      line-height: 1.4;
      margin-bottom: var(--space-lg);
    }
    .contact-info-card__title-line {
      width: 40px;
      height: 2px;
      background: var(--color-copper);
      margin-top: var(--space-sm);
    }
    .contact-info-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-md);
      margin-bottom: var(--space-lg);
    }
    .contact-info-item:last-child {
      margin-bottom: 0;
    }
    .contact-info-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .contact-info-icon svg {
      width: 20px;
      height: 20px;
      color: var(--color-copper);
    }
    .contact-info-label {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-copper-soft);
      margin-bottom: var(--space-2xs);
    }
    .contact-info-value {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      color: var(--color-white);
      line-height: 1.5;
    }
    .contact-info-card__hours {
      margin-top: var(--space-2xl);
      padding-top: var(--space-lg);
      border-top: 1px solid var(--color-carbon-light);
    }
    .contact-info-card__hours-label {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-copper-soft);
      margin-bottom: var(--space-xs);
    }
    .contact-info-card__hours-value {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-cloud-dark);
    }

    /* 右列：联系表单 */
    .contact-form-wrap {
      background: var(--color-white);
      border: 1px solid var(--color-cloud-dark);
      border-radius: var(--radius-xl);
      padding: var(--space-2xl);
    }
    .contact-form-wrap__title {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 500;
      color: var(--color-carbon);
      line-height: 1.4;
      margin-bottom: var(--space-lg);
    }
    .form-group {
      margin-bottom: var(--space-md);
    }
    .form-label {
      display: block;
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-carbon);
      margin-bottom: var(--space-xs);
    }
    .form-label--required::after {
      content: ' *';
      color: var(--color-copper);
    }
    .form-input,
    .form-textarea,
    .form-select {
      width: 100%;
      height: 44px;
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      color: var(--color-carbon);
      background: var(--color-white);
      border: 1px solid var(--color-cloud-dark);
      border-radius: var(--radius-md);
      padding: 12px 16px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-textarea {
      height: auto;
      min-height: 120px;
      resize: vertical;
    }
    .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1 L6 6 L11 1' stroke='%238A8A8A' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 12px 8px;
      padding-right: 40px;
    }
    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
      outline: none;
      border-color: var(--color-copper);
      box-shadow: 0 0 0 2px rgba(168,147,121,0.12);
    }
    .form-input::placeholder,
    .form-textarea::placeholder {
      color: var(--color-mist);
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
    }
    .form-submit-btn {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: var(--color-carbon);
      background: var(--color-copper);
      border: none;
      border-radius: var(--radius-lg);
      padding: 14px 36px;
      width: 100%;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .form-submit-btn:hover {
      background: var(--color-copper-hover);
      transform: scale(1.02);
      box-shadow: var(--shadow-copper-glow);
    }
    .form-submit-btn:active {
      background: #8A7560;
      transform: scale(0.98);
    }
    .form-submit-btn:focus-visible {
      outline: 2px solid var(--color-copper);
      outline-offset: 2px;
    }
    .form-note {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 400;
      color: var(--color-carbon-light); /* WCAG 修正 */
      margin-top: var(--space-md);
      text-align: center;
    }

    /* === Quick Links — 快捷入口区 === */
    .quick-links {
      background: var(--color-cloud);
      padding: var(--space-3xl) 0;
    }
    .quick-links-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--grid-gutter);
    }
    .quick-link-card {
      background: var(--color-white);
      border: 1px solid var(--color-cloud-dark);
      border-radius: var(--radius-md);
      padding: 28px;
      display: flex;
      align-items: center;
      gap: var(--space-md);
      text-decoration: none;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .quick-link-card:hover {
      border-color: var(--color-copper-soft);
      transform: translateY(-2px);
    }
    .quick-link-card__icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(168,147,121,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .quick-link-card__icon svg {
      width: 24px;
      height: 24px;
      color: var(--color-copper);
    }
    .quick-link-card__text {
      display: flex;
      flex-direction: column;
    }
    .quick-link-card__title {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-carbon);
      line-height: 1.4;
    }
    .quick-link-card__desc {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-carbon-light); /* WCAG 修正 */
      line-height: 1.55;
      margin-top: 4px;
    }

    /* === Footer === */
    .footer {
      background: var(--color-carbon);
      padding: var(--space-2xl) 0 var(--space-xl);
      border-top: 1px solid var(--color-carbon-light);
      color: var(--color-cloud-dark);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--grid-gutter);
    }
    .footer-col .footer-title {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-cloud-dark);
      margin-bottom: var(--space-md);
    }
    .footer-col .footer-link {
      display: block;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--color-cloud-dark);
      padding: var(--space-2xs) 0;
      transition: color 0.2s;
    }
    .footer-col .footer-link:hover {
      color: var(--color-copper-soft);
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--space-xl);
      padding-top: var(--space-lg);
      border-top: 1px solid var(--color-carbon-light);
    }
    .footer-bottom .micro {
      color: var(--color-cloud-dark);
    }
    .footer-brand {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 500;
      color: var(--color-cloud-dark);
    }

    /* === Anchor Offset — v4.0 N4 === */
    .anchor-offset,
    [id="adult"],
    [id="kids"],
    [id="oem"],
    [id="trust"],
    [id="process"] {
      scroll-margin-top: 72px;
    }

    /* === Responsive — Tablet 640–1024px === */
    @media (max-width: 1024px) {
      .page-title-hero {
        padding: 60px 32px;
      }
      .page-title-hero__title {
        font-size: 24px;
      }
      .page-title-hero__line {
        width: 32px;
      }
      .page-title-hero__description {
        font-size: 16px;
      }

      .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
      }
      .contact-section {
        padding: var(--space-3xl) 0;
      }
      .contact-info-card {
        padding: var(--space-xl);
      }
      .contact-form-wrap {
        padding: var(--space-xl);
      }

      .quick-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }

      .lang-btn {
        font-size: 13px;
        padding: 4px 12px;
      }
      .nav-item {
        padding: 8px 16px;
      }
      .nav-items {
        gap: 2px;
      }
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* === Responsive — Mobile < 640px === */
    @media (max-width: 640px) {
      .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
      }

      .page-title-hero {
        padding: 48px 20px;
      }
      .page-title-hero__title {
        font-size: 22px;
      }
      .page-title-hero__line {
        width: 28px;
      }
      .page-title-hero__description {
        font-size: 15px;
        max-width: 100%;
      }

      /* Nav: hide desktop nav items, show hamburger */
      .nav-items,
      .lang-switcher-desktop {
        display: none;
      }
      .nav-hamburger {
        display: flex;
      }

      .contact-section {
        padding: var(--space-2xl) 0;
      }
      .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
      }
      .contact-info-card {
        padding: var(--space-lg);
      }
      .contact-form-wrap {
        padding: var(--space-lg);
        border: none;
      }
      .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }

      .quick-links {
        padding: var(--space-2xl) 0;
      }
      .quick-links-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
      }
      .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
      }

      .h2 {
        font-size: 24px;
      }
    }

    /* === Accessibility: prefers-reduced-motion === */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
      html { scroll-behavior: auto; }
      .quick-link-card:hover { transform: none; }
      .btn-cta:hover { transform: none; }
      .form-submit-btn:hover { transform: none; }
    }

    /* === Anti-Slop Quality Controls === */
    /* No purple gradients, no emoji icons, no generic rounded+border-accent pattern */
    /* No Inter as display font, no fabricated stats */
    /* This prototype uses: carbon+cloud+copper palette, DM Sans heading, editorial whitespace */

/* === Source: clothing-rack-cn.html === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--color-carbon); background: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    :root {
      --color-carbon: #333333; --color-carbon-light: #4D4D4D; --color-carbon-soft: #6E6E6E; --color-mist: #8A8A8A;
      --color-white: #FFFFFF; --color-cloud: #E8E6E0; --color-cloud-light: #F0EDE7; --color-cloud-dark: #D1CEC6; --color-line: #C4C0B8;
      --color-copper: #A89379; --color-copper-hover: #9A8268; --color-copper-soft: #C4B5A0; --color-copper-pale: #E8DFD0;
      --color-slate: #9BABB8; --color-slate-hover: #8A9DAC; --color-slate-soft: #B8C8D4;
      --color-adult-accent: #A89379; --color-adult-accent-soft: #C4B5A0; --color-adult-bg-accent: #E8DFD0; --color-adult-tag: #A89379; --color-adult-line: #C4B5A0;
      --color-kids-primary: #5BBFDE; --color-kids-secondary: #F4A261; --color-kids-primary-soft: #A8DCF0; --color-kids-secondary-soft: #F8C896; --color-kids-bg-primary: #EBF5FA; --color-kids-bg-secondary: #FFF3E8; --color-kids-tag: #5BBFDE;
      --color-success: #7DB88A; --color-warning: #C9A96E; --color-danger: #D4564A; --color-info: #9BABB8;
      --gradient-cloud-rise: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%);
      --gradient-copper-wash: linear-gradient(135deg, #A89379 0%, #C4B5A0 50%, #E8DFD0 100%);
      --font-display-serif: 'Source Serif 4', 'Noto Serif SC', 'Georgia', serif;
      --font-heading: 'DM Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
      --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
      --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px; --space-xl: 40px; --space-2xl: 56px; --space-3xl: 72px; --space-4xl: 96px; --space-5xl: 120px; --space-editorial: 80px;
      --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-card: 16px;
      --shadow-flat: none; --shadow-subtle: 0 1px 3px rgba(51,51,51,0.05); --shadow-soft: 0 2px 8px rgba(51,51,51,0.07); --shadow-raised: 0 3px 12px rgba(51,51,51,0.08); --shadow-elevated: 0 6px 20px rgba(51,51,51,0.12); --shadow-floating: 0 8px 28px rgba(51,51,51,0.14); --shadow-copper-glow: 0 4px 16px rgba(168,147,121,0.20);
      --z-base: 0; --z-decorative: 50; --z-sticky: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400;
      --container-max: 1200px; --grid-gutter: 32px;
      --nav-active-color: #333333; --nav-active-underline: 2px solid #A89379; --nav-active-weight: 500; --nav-default-color: #4D4D4D; --nav-default-weight: 400;
      --dropdown-bg: rgba(232,230,224,0.96); --dropdown-blur: blur(12px); --dropdown-border: 1px solid #D1CEC6; --dropdown-radius: 8px; --dropdown-shadow: 0 4px 16px rgba(51,51,51,0.10); --dropdown-item-color: #4D4D4D; --dropdown-item-hover-color: #333333; --dropdown-item-hover-bg: rgba(168,147,121,0.06); --dropdown-caret-color: #8A8A8A; --dropdown-caret-hover-color: #A89379;
      --lang-btn-radius: 4px; --lang-active-color: #333333; --lang-active-border-color: #A89379; --lang-active-bg: rgba(168,147,121,0.08); --lang-inactive-color: #4D4D4D; --lang-inactive-hover-color: #333333; --lang-divider-color: #333333;
      --page-title-bg: linear-gradient(180deg, #FFFFFF 0%, #E8E6E0 100%); --page-title-padding: 40px 40px; --page-title-h2-size: 28px; --page-title-h2-color: #333333; --page-title-line-width: 40px; --page-title-line-height: 2px; --page-title-line-color: #A89379; --page-title-desc-size: 18px; --page-title-desc-color: #4D4D4D; --page-title-desc-max-width: 640px;
    }

    .container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .body-s { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.55; }
    .micro { font-family: var(--font-body); font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: 0.05em; }

    .btn-primary { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; padding: 12px 28px; border-radius: var(--radius-md); background: var(--color-copper); color: var(--color-white); min-width: 120px; transition: background 0.2s, box-shadow 0.2s; }
    .btn-primary:hover { background: var(--color-copper-hover); box-shadow: 0 2px 8px rgba(168,147,121,0.25); }
    .btn-primary:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .nav-dropdown-item:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .footer-link:focus-visible, .lang-btn--inactive:focus-visible { outline: 1px solid var(--color-copper); outline-offset: 1px; }

    .tag-clothing-rack { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-md); background: var(--color-kids-bg-primary); color: var(--color-kids-primary); border: 1px solid var(--color-kids-primary-soft); }
    .tag-adult { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-sm); background: var(--color-adult-bg-accent); color: var(--color-adult-tag); border: 1px solid var(--color-adult-accent-soft); }
    .tag-kids { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-md); background: var(--color-kids-bg-primary); color: var(--color-kids-tag); border: 1px solid var(--color-kids-primary-soft); }
    .tag-mannequin { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-md); background: var(--color-kids-bg-secondary); color: var(--color-kids-secondary); border: 1px solid var(--color-kids-secondary-soft); }
    .tag-neutral { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-sm); background: rgba(51,51,51,0.06); color: var(--color-carbon); border: 1px solid var(--color-carbon-soft); }

    /* Nav */
    .nav-bar { position: fixed; top: 0; left: 0; right: 0; height: 72px; background: rgba(240,237,231,0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-line); z-index: var(--z-sticky); display: flex; align-items: center; }
    .nav-bar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-lg); }
    .nav-logo { display: flex; flex-direction: column; align-items: flex-start; }
    .nav-logo-cn { font-family: var(--font-heading); font-size: 18px; font-weight: 500; color: var(--color-carbon); }
    .nav-logo-en { font-family: var(--font-body); font-size: 14px; font-weight: 400; font-variant: small-caps; letter-spacing: 0.05em; color: var(--color-carbon-light); }
    .nav-items { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .nav-item { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--nav-default-color); padding: 10px 20px; text-decoration: none; position: relative; transition: color 0.2s ease; display: flex; align-items: center; gap: 4px; }
    .nav-item:hover { color: var(--color-carbon); }
    .nav-item--active { color: var(--nav-active-color); font-weight: var(--nav-active-weight); }
    .nav-item--active::after { content: ''; position: absolute; bottom: 4px; left: 20px; right: 20px; height: 2px; background-color: var(--color-copper); }
    .nav-dropdown-caret { font-size: 10px; color: var(--dropdown-caret-color); transition: color 0.2s ease; line-height: 1; }
    .nav-item:hover .nav-dropdown-caret { color: var(--dropdown-caret-hover-color); }
    .nav-dropdown-wrap { position: relative; }
    .nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 180px; max-width: 240px; background: var(--dropdown-bg); backdrop-filter: var(--dropdown-blur); -webkit-backdrop-filter: var(--dropdown-blur); border: var(--dropdown-border); border-radius: var(--dropdown-radius); box-shadow: var(--dropdown-shadow); padding: 16px 0; z-index: var(--z-dropdown); opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease-out, transform 200ms ease-out; pointer-events: none; list-style: none; margin-top: 12px; }
    .nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown--open { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .nav-dropdown-item { display: block; color: var(--dropdown-item-color); font-family: var(--font-body); font-size: 14px; font-weight: 400; padding: 12px 20px 12px 24px; text-decoration: none; border-left: 2px solid transparent; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
    .nav-dropdown-item:hover { color: var(--dropdown-item-hover-color); background: var(--dropdown-item-hover-bg); }
    .lang-switcher { display: flex; align-items: center; height: 32px; margin-right: 16px; }
    .lang-btn { font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 6px 16px; border-radius: var(--lang-btn-radius); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; cursor: pointer; line-height: 1; }
    .lang-btn--active { color: var(--lang-active-color); border: 1px solid var(--lang-active-border-color); background: var(--lang-active-bg); }
    .lang-btn--inactive { color: var(--lang-inactive-color); border: none; background: transparent; }
    .lang-btn--inactive:hover { color: var(--lang-inactive-hover-color); }
    .lang-divider { width: 2px; height: 16px; background-color: var(--lang-divider-color); margin: 0 4px; flex-shrink: 0; }
    .nav-cta { font-family: var(--font-heading); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; padding: 10px 24px; border-radius: var(--radius-md); background: var(--color-copper); color: var(--color-white); text-decoration: none; transition: background 0.2s; }
    .nav-cta:hover { background: var(--color-copper-hover); }
    .nav-hamburger { display: none; width: 24px; height: 24px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; }
    .nav-hamburger span { width: 100%; height: 2px; background: var(--color-carbon); transition: transform 0.2s; }
    .nav-mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: rgba(240,237,231,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 24px 20px; z-index: var(--z-dropdown); overflow-y: auto; }
    .nav-mobile-menu--open { display: block; }
    .nav-mobile-menu .nav-item { display: block; padding: 16px 0; border-left: 2px solid transparent; font-size: 16px; }
    .nav-mobile-menu .nav-item--active { border-left-color: var(--color-copper); color: var(--color-copper); font-weight: 500; }
    .nav-mobile-menu .nav-item--active::after { display: none; }
    .nav-mobile-menu .nav-dropdown-item { padding: 12px 0 12px 16px; font-size: 13px; display: block; }
    .nav-mobile-menu .lang-switcher { margin-right: 0; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-cloud-dark); justify-content: center; }
    .nav-mobile-menu .nav-cta { display: block; text-align: center; margin-top: 24px; font-size: 16px; padding: 14px 36px; border-radius: var(--radius-lg); }
    .mobile-dropdown-sub { display: none; padding-left: 16px; }
    .mobile-dropdown-sub--open { display: block; }

    /* Page Title Hero */
    .page-title-hero { background: var(--page-title-bg); padding: var(--page-title-padding); max-width: var(--container-max); margin: 0 auto; position: relative; }
    .page-title-hero__title { font-family: var(--font-heading); font-size: var(--page-title-h2-size); font-weight: 500; color: var(--page-title-h2-color); line-height: 1.35; margin: 0; }
    .page-title-hero__line { display: block; width: var(--page-title-line-width); height: var(--page-title-line-height); background-color: var(--page-title-line-color); margin-top: var(--space-sm); }
    .page-title-hero__description { font-family: var(--font-body); font-size: var(--page-title-desc-size); font-weight: 400; color: var(--page-title-desc-color); line-height: 1.7; max-width: var(--page-title-desc-max-width); margin-top: var(--space-md); margin-bottom: 0; }
    .page-title-hero__separator { height: 1px; background-color: var(--color-line); width: 100%; margin-top: var(--space-xl); }

    .section-series { padding: var(--space-4xl) 0; background: var(--color-white); }

    /* Breadcrumb */
    .breadcrumb { padding-top: 96px; background: var(--color-white); }
    .breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); font-family: var(--font-body); font-size: 13px; color: var(--color-carbon-soft); padding-bottom: var(--space-md); }
    .breadcrumb__link { color: var(--color-carbon-soft); transition: color 0.15s ease; }
    .breadcrumb__link:hover { color: var(--color-copper); }
    .breadcrumb__link:focus-visible { outline: 1px solid var(--color-copper); outline-offset: 2px; }
    .breadcrumb__separator { color: var(--color-mist); font-size: 11px; }
    .breadcrumb__current { color: var(--color-carbon); font-weight: 500; }

    /* Coming Soon Block */
    .coming-soon-block { padding: var(--space-3xl) 0; text-align: center; }
    .coming-soon-block__icon { width: 160px; height: 160px; margin: 0 auto var(--space-lg); display: flex; align-items: center; justify-content: center; background: var(--color-cloud-light); border-radius: 50%; }
    .coming-soon-block__icon svg { width: 65%; height: 65%; }
    .coming-soon-block__title { font-family: var(--font-display-serif); font-size: 28px; font-weight: 400; color: var(--color-carbon-soft); font-style: italic; margin-bottom: var(--space-md); letter-spacing: 0.01em; }
    .coming-soon-block__desc { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--color-carbon-light); line-height: 1.7; max-width: 520px; margin: 0 auto var(--space-xl); }
    .coming-soon-block__cta { font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--color-carbon); text-decoration-color: var(--color-copper); transition: color 0.15s ease; }
    .coming-soon-block__cta:hover { color: var(--color-copper); text-decoration: underline; }
    .coming-soon-block__cta::after { content: '→'; margin-left: 4px; }
    .coming-soon-block__cta:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }

    /* Footer */
    .footer { background: var(--color-carbon); padding: var(--space-2xl) 0 var(--space-xl); border-top: 1px solid var(--color-carbon-light); color: var(--color-cloud-dark); }
    .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
    .footer-col .footer-title { font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--color-cloud-dark); margin-bottom: var(--space-md); }
    .footer-col .footer-link { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--color-cloud-dark); padding: var(--space-2xs) 0; transition: color 0.2s; }
    .footer-col .footer-link:hover { color: var(--color-copper-soft); }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-carbon-light); }
    .footer-bottom .micro { color: var(--color-cloud-dark); }
    .footer-brand { font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--color-cloud-dark); }

    /* Product Card Grid (added for product listing) */
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
    .tag-spec { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-cloud-light); color: var(--color-slate); }
    .subcategory-header { margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-cloud-dark); }
    .subcategory-header__label { font-family: var(--font-body); font-size: 14px; color: var(--color-carbon-light); }
    .product-link-card { display: block; background: var(--color-white); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-raised); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; overflow: hidden; text-decoration: none; border: 1px solid transparent; }
    .product-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); border-color: var(--color-copper-soft); }
    .product-link-card:focus-visible { outline: 2px solid var(--color-copper); outline-offset: 2px; }
    .product-link-card .card-tag { position: absolute; top: var(--space-md); right: var(--space-md); z-index: 1; }
    .product-link-card .card-image { width: 100%; aspect-ratio: 4/3; background: var(--color-cloud); border-radius: var(--radius-xl); margin-bottom: var(--space-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .product-link-card .card-image svg { width: 80%; height: 80%; }
    .product-link-card .card-title { font-family: var(--font-body); font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--color-carbon); position: relative; padding-bottom: var(--space-md); }
    .product-link-card .card-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 1px; background: var(--color-copper); }
    .product-link-card .card-desc { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--color-carbon-light); margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .product-link-card .card-specs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
    .product-link-card .card-cta { font-family: var(--font-heading); font-size: 14px; font-weight: 500; color: var(--color-copper); display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s ease; }
    .product-link-card:hover .card-cta { color: var(--color-copper-hover); }
    .oem-prompt { background: var(--gradient-cloud-rise); padding: var(--space-3xl) var(--space-xl); text-align: center; }
    .oem-prompt__text { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--color-carbon-light); line-height: 1.65; max-width: 480px; margin: 0 auto var(--space-lg) auto; }
    .oem-prompt__link { font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--color-carbon); text-decoration-color: var(--color-copper); transition: color 0.15s ease; }
    .oem-prompt__link:hover { color: var(--color-copper); text-decoration: underline; }
    .oem-prompt__link::after { content: '→'; margin-left: 4px; }

    @media (max-width: 1024px) {
      /* Nav: hide desktop nav, show hamburger (unified at 1024px) */
      .nav-items, .lang-switcher-desktop { display: none; }
      .nav-hamburger { display: flex; }
      .page-title-hero { padding: 60px 32px; }
      .page-title-hero__title { font-size: 24px; }
      .lang-btn { font-size: 13px; padding: 4px 12px; }
      .nav-item { padding: 8px 16px; }
      .nav-items { gap: 2px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .grid-3 { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .container { padding-left: var(--space-md); padding-right: var(--space-md); }
      .breadcrumb { padding-top: 80px; }
      .page-title-hero { padding: 48px 20px; }
      .page-title-hero__title { font-size: 22px; }
      .page-title-hero__description { font-size: 15px; max-width: 100%; }
      .section-series { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
      .grid-3 { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
      .coming-soon-block__icon { width: 120px; height: 120px; }
      .coming-soon-block__title { font-size: 22px; }
      .coming-soon-block__desc { font-size: 14px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
      html { scroll-behavior: auto; }
    }
.product-hero {
    align-items: start;
}
.product-hero__image {
    position: relative;
    overflow: hidden;
}
.product-hero__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}