(function () {
  'use strict';

  if (window.__DBC_GLOBAL_NAVIGATION_V133__) return;
  window.__DBC_GLOBAL_NAVIGATION_V133__ = true;
  document.documentElement.dataset.v7318NavigationGovernance = 'stable-five-entry-r4';
  document.documentElement.dataset.v7318NavigationInterconnect = 'two-channel-r16';
  document.documentElement.dataset.v7318NavigationProfessional = 'uniform-shell-r31';

  // A long-lived page can still arrive from an older HTML cache and point at
  // the previous navigation stylesheet query. Upgrade that reference before
  // the shared header is rendered so cross-page clicks cannot reintroduce the
  // former 468/488/520px geometry drift during the R4 rollout.
  (function enforceV7318NavigationStylesheet() {
    const releaseQuery = '20260727-v7318-nav-r31-professional';
    const stylesheet = document.querySelector('link[href*="navigation-v7202-glass-governance.css"]');
    if (!stylesheet) return;
    try {
      const url = new URL(stylesheet.getAttribute('href'), document.baseURI);
      if (url.searchParams.get('v') === releaseQuery) return;
      url.searchParams.set('v', releaseQuery);
      stylesheet.href = `${url.pathname}${url.search}${url.hash}`;
      stylesheet.dataset.v7318NavigationStyleUpgraded = 'true';
    } catch (error) {
      stylesheet.href = `assets/css/navigation-v7202-glass-governance.css?v=${releaseQuery}`;
      stylesheet.dataset.v7318NavigationStyleUpgraded = 'true';
    }
  })();

  // V7.30.1 shared-shell assets are loaded through the navigation runtime so
  // every registered root page receives the same language and footer guard
  // without duplicating shared-shell logic across 151 HTML files. The shared shell leaves
  // the protected homepage footer design intact while keeping its legal links complete.
  (function loadV7301SharedShell() {
    const head = document.head || document.documentElement;
    if (!document.querySelector('link[data-v7301-shared-shell-style]')) {
      const stylesheet = document.createElement('link');
      stylesheet.rel = 'stylesheet';
      stylesheet.href = 'assets/css/shared-shell-v7301.css?v=20260727-v7301-r7-mobile-packaging-footer';
      stylesheet.dataset.v7301SharedShellStyle = 'true';
      head.appendChild(stylesheet);
    }
    if (!document.querySelector('script[data-v7301-shared-shell-script]')) {
      const script = document.createElement('script');
      script.src = 'assets/js/shared-shell-v7301.js?v=20260819-v7301-r6-adaptive-footer-tone';
      script.defer = true;
      script.dataset.v7301SharedShellScript = 'true';
      head.appendChild(script);
    }
  })();

  // The directory determines the language; switching opens the other site.
  const siteLanguage = 'zh';
  try {
    localStorage.setItem('dbc-site-language', siteLanguage);
  } catch (error) {
    // Directory-based navigation also works when storage is unavailable.
  }
  document.documentElement.dataset.siteLanguage = siteLanguage;
  document.documentElement.dataset.languagePreference = siteLanguage;
  document.documentElement.dataset.languageAvailability = siteLanguage === 'en' ? 'en-only' : 'zh-only';
  document.documentElement.dataset.lang = siteLanguage;
  document.documentElement.lang = siteLanguage === 'en' ? 'en' : 'zh-CN';

  // Independent sites use a real link, separate from the legacy translation button.
  (function installSiteLanguageLinkStyle() {
    if (document.getElementById('dbc-site-language-link-style')) return;
    const style = document.createElement('style');
    style.id = 'dbc-site-language-link-style';
    style.textContent = `
      html body .site-header a.site-language-link {
        display:inline-flex!important; align-items:center; justify-content:center;
        box-sizing:border-box; flex:0 0 72px; width:72px; min-width:72px;
        height:38px; min-height:38px; margin:0; padding:4px; gap:2px;
        border:1px solid rgba(64,145,235,.28); border-radius:999px;
        background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(237,247,255,.9));
        box-shadow:0 10px 24px rgba(48,126,214,.14),inset 0 1px 0 rgba(255,255,255,.95);
        color:#1769c2; text-decoration:none!important; cursor:pointer;
        -webkit-tap-highlight-color:transparent;
      }
      html body .site-header a.site-language-link:hover {
        border-color:rgba(38,132,235,.46);
        background:linear-gradient(180deg,#fff,rgba(225,242,255,.96));
      }
      html body .site-header a.site-language-link:focus-visible {
        outline:2px solid #1476d4; outline-offset:3px;
      }
      html body .site-header .site-language-option {
        display:inline-flex; align-items:center; justify-content:center;
        box-sizing:border-box; width:29px; height:28px; border-radius:999px;
        color:#3f7fbd; font:780 11px/1 Arial,sans-serif; letter-spacing:0;
      }
      html body .site-header .site-language-link[data-current-language="zh"] [data-language-option="zh"],
      html body .site-header .site-language-link[data-current-language="en"] [data-language-option="en"] {
        color:#fff; background:linear-gradient(180deg,#4aa3ff,#1476d4);
        box-shadow:0 3px 8px rgba(20,118,212,.25);
      }
    `;
    document.head.appendChild(style);
  })();

  const navigationItems = [
    {
      section: 'dbc',
      number: '01',
      eyebrow: 'DBC GROUP',
      title: ['世界杯竞猜官网', 'DBC Group'],
      navTitle: ['世界杯竞猜官网', 'DBC'],
      navDescription: ['新材料应用工程与产业协同平台', 'Application engineering and industry collaboration'],
      description: [
        '围绕真实应用组织材料筛选、配方工程、工艺验证与产业协同，形成从技术评估到量产导入的项目路径。',
        'DBC organizes material screening, formulation engineering, process validation and industry collaboration around real applications—from technical assessment to scale-up.'
      ],
      desktopDescription: [
        '世界杯竞猜官网以新材料技术创新与产业化应用为核心，构建从材料研发、成果转化、工艺验证到规模化制造与市场应用的完整路径。',
        'Application engineering that connects technical development, process validation and industry collaboration.'
      ],
      href: 'index.html',
      entryHref: 'about.html',
      entry: ['了解世界杯竞猜官网', 'Explore DBC'],
      desktopDirect: true,
      desktopIndexTitle: ['集团信息索引', 'Group information index'],
      desktopIndex: [
        { title: ['关于世界杯竞猜官网', 'About DBC'], href: 'about.html' },
        { title: ['品牌与业务', 'Brands and businesses'], href: 'about-brands.html' },
        { title: ['研发与能力', 'R&D and capabilities'], href: 'about.html#scope' },
        { title: ['博碳观察', 'BIOTEN Observer'], href: 'news.html' },
        { title: ['产业合作', 'Industry collaboration'], href: 'about.html#routes' }
      ],
      desktopRoutes: [
        {
          label: '生物基功能材料',
          title: ['BIOTEN 博碳生物', 'BIOTEN'],
          description: ['PHA 生物基水性功能乳液与跨场景应用开发', 'PHA bio-based waterborne emulsions and cross-sector applications'],
          href: 'bioten-platform.html',
          image: 'assets/images/bioten-lab/platform-material-states.avif',
          fallback: 'assets/images/bioten-lab/platform-material-states.webp',
          position: '52% 56%'
        },
        {
          label: '先进材料',
          title: ['CASU 中科联化', 'CASU'],
          description: ['先进材料、电池粘结体系与工艺协同', 'Advanced materials, battery binders and process collaboration'],
          href: 'casu.html',
          image: 'docs/assets/images/home/business-casu.webp',
          position: '50% 52%'
        },
        {
          label: '城市更新涂料',
          title: ['ANTUX 环涂士', 'ANTUX'],
          description: ['面向城市更新的环保涂料与功能表面系统', 'Environmental coatings and functional surfaces for urban renewal'],
          href: 'antux.html',
          image: 'docs/assets/images/antux-source/antux-blue-white-coating-20260818.jpg',
          position: '50% 45%'
        },
        {
          label: '运动地面系统',
          title: ['DPU丨BASF&DBC', 'DPU · Daoying Sports'],
          description: ['材料技术协同的专业运动地材系统', 'Professional sports surfaces built through materials collaboration'],
          href: 'dpu.html',
          image: 'docs/assets/images/dpu-source/dpu-etpu-cushion.webp',
          position: '50% 58%'
        },
        {
          label: '环保低碳材料',
          title: ['ECOTEN 易碳', 'ECOTEN'],
          description: ['面向低碳制造与城市更新的环保材料体系', 'Environmental materials for low-carbon manufacturing and urban renewal'],
          href: 'ecoten.html',
          image: 'assets/images/navigation-v432/ecoten-low-carbon-materials.jpg',
          position: '50% 52%'
        }
      ],
      routes: [
        {
          label: '生物基功能材料',
          title: ['BIOTEN 博碳生物', 'BIOTEN'],
          description: ['PHA 生物基水性功能乳液与跨场景应用开发', 'PHA bio-based waterborne emulsions and cross-sector applications'],
          href: 'bioten-platform.html',
          image: 'assets/images/bioten-lab/platform-material-states.avif',
          fallback: 'assets/images/bioten-lab/platform-material-states.webp',
          position: '52% 56%'
        },
        {
          label: '先进材料',
          title: ['CASU 中科联化', 'CASU'],
          description: ['先进材料、电池粘结体系与工艺协同', 'Advanced materials, battery binders and process collaboration'],
          href: 'casu.html',
          image: 'docs/assets/images/home/business-casu.webp',
          position: '50% 52%'
        },
        {
          label: '城市更新涂料',
          title: ['ANTUX 环涂士', 'ANTUX'],
          description: ['面向城市更新的环保涂料与功能表面系统', 'Environmental coatings and functional surfaces for urban renewal'],
          href: 'antux.html',
          image: 'docs/assets/images/antux-source/antux-blue-white-coating-20260818.jpg',
          position: '50% 45%'
        },
        {
          label: '运动地面系统',
          title: ['DPU丨BASF&DBC', 'DPU · BASF & DBC'],
          description: ['材料技术协同的专业运动地材系统', 'Professional sports surfaces built through materials collaboration'],
          href: 'dpu.html',
          image: 'docs/assets/images/dpu-source/dpu-etpu-cushion.webp',
          position: '50% 58%'
        },
        {
          label: '环保低碳材料',
          title: ['ECOTEN 易碳', 'ECOTEN'],
          description: ['面向低碳制造与城市更新的环保材料体系', 'Environmental materials for low-carbon manufacturing and urban renewal'],
          href: 'ecoten.html',
          image: 'assets/images/navigation-v432/ecoten-low-carbon-materials.jpg',
          position: '50% 52%'
        }
      ],
      quickTitle: ['专业业务入口', 'Specialist platforms'],
      quick: [
        { title: ['BIOTEN · 生物基水性功能乳液', 'BIOTEN · Bio-based waterborne functional emulsions'], href: 'bioten-platform.html', priority: true },
        { title: ['CASU · 先进材料与电池粘结剂', 'CASU · Advanced materials & battery binders'], href: 'casu.html' },
        { title: ['ANTUX · 城市更新环保涂料', 'ANTUX · Urban-renewal coatings'], href: 'antux.html' },
        { title: ['DPU丨BASF&DBC · 运动地面系统', 'DPU · BASF & DBC sports surfaces'], href: 'dpu.html' },
        { title: ['ECOTEN 易碳 · 环保低碳材料', 'ECOTEN · Low-carbon materials'], href: 'ecoten.html' }
      ]
    },
    {
      section: 'bioten',
      number: '02',
      eyebrow: 'BIOTEN PLATFORM',
      title: ['博碳生物', 'BIOTEN'],
      navTitle: ['博碳生物', 'BIOTEN'],
      navDescription: ['PHA 水性材料与跨场景应用平台', 'PHA waterborne materials and application platform'],
      description: [
        '聚焦 PHA 水性分散、界面调控与功能成膜，服务纸基包装、农业包衣、日化个护与水性涂层等应用开发。',
        'A PHA platform for waterborne dispersion, interface control and functional film formation across paper packaging, agricultural coatings, personal care and waterborne coatings.'
      ],
      desktopDescription: [
        '博碳生物围绕 PHA 生物基水性功能乳液，构建面向纸基包装、农业生态、洗护应用与生物基涂料的材料开发、配方适配与应用体系。',
        'Built on PHA bio-based waterborne emulsions for cross-sector functional-film applications.'
      ],
      href: 'bioten-platform.html',
      entry: ['进入博碳生物平台', 'Explore the BIOTEN platform'],
      desktopDirect: true,
      desktopIndexTitle: ['技术能力索引', 'Technology capability index'],
      desktopIndex: [
        { title: ['PHA 水性分散与成膜', 'PHA dispersion and film formation'], href: 'bioten-platform.html#method' },
        { title: ['四个专业应用领域', 'Four professional application fields'], href: 'bioten-platform.html#routes' },
        { title: ['材料、配方与工艺开发', 'Materials, formulation and process development'], href: 'bioten-lab.html' },
        { title: ['方法、资料与证据', 'Methods, documents and evidence'], href: 'resources.html' }
      ],
      desktopRoutes: [
        {
          label: '纸基阻隔',
          title: ['博碳包装', 'BIOTEN Packaging'],
          description: ['PHA 水性乳液驱动的阻隔、热封与纸基加工适配', 'PHA waterborne barriers, heat sealing and paper-process fit'],
          href: 'bioten.html',
          image: 'assets/images/navigation-v432/bioten-packaging-all-applications.jpg',
          position: '50% 68%'
        },
        {
          label: '农业生态',
          title: ['农业生态', 'Agriculture'],
          description: ['种子包衣、农化缓释与田间应用材料开发', 'Seed coating, agrochemical release and field-use materials'],
          href: 'bioten-agriculture.html',
          image: 'assets/images/navigation-v432/bioten-agriculture-ecosystem.jpg',
          position: '50% 58%'
        },
        {
          label: '洗护应用',
          title: ['洗护应用', 'Personal care'],
          description: ['面向沐浴、洁面与洗涤体系的配方和功能材料', 'Formulation and functional materials for cleansing systems'],
          href: 'bioten-personal-care.html',
          image: 'assets/images/navigation-v432/bioten-care-applications.jpg',
          position: '50% 55%'
        },
        {
          label: '生物基涂料',
          title: ['生物基涂料', 'Bio-based waterborne coatings'],
          description: ['乳胶漆、木器漆与功能涂层的生物基载体', 'Bio-based carriers for architectural, wood and functional coatings'],
          href: 'bioten-waterborne-coatings.html',
          image: 'assets/images/navigation-v432/bioten-bio-based-coatings.jpg',
          position: '50% 54%'
        }
      ],
      routes: [
        {
          label: '纸基阻隔',
          title: ['博碳包装', 'BIOTEN Packaging'],
          description: ['纸基包装阻隔系统工程', 'Paper-packaging barrier systems engineering'],
          href: 'bioten.html',
          image: 'assets/images/navigation-v432/bioten-packaging-all-applications.jpg',
          position: '50% 68%'
        },
        {
          label: '农业生态',
          title: ['农业生态', 'Agriculture'],
          description: ['种子包衣与农化缓释材料', 'Seed coating and agrochemical controlled-release materials'],
          href: 'bioten-agriculture.html',
          image: 'assets/images/navigation-v432/bioten-agriculture-ecosystem.jpg',
          position: '50% 58%'
        },
        {
          label: '洗护应用',
          title: ['洗护应用', 'Personal care'],
          description: ['沐浴、洁面与洗涤配方材料', 'Formulation materials for cleansing and washing systems'],
          href: 'bioten-personal-care.html',
          image: 'assets/images/navigation-v432/bioten-care-applications.jpg',
          position: '50% 55%'
        },
        {
          label: '生物基涂料',
          title: ['生物基涂料', 'Bio-based coatings'],
          description: ['乳胶漆、木器漆与功能载体材料', 'Functional carrier materials for architectural and wood coatings'],
          href: 'bioten-waterborne-coatings.html',
          image: 'assets/images/navigation-v432/bioten-bio-based-coatings.jpg',
          position: '50% 54%'
        }
      ],
      quickTitle: ['应用与项目入口', 'Applications and project routes'],
      quick: [
        { title: ['博碳包装｜纸基包装阻隔系统工程', 'BIOTEN Packaging | Paper barrier systems'], href: 'bioten.html', priority: true },
        { title: ['农业生态｜种子包衣与农化缓释材料', 'Agriculture | Seed coating and controlled release'], href: 'bioten-agriculture.html' },
        { title: ['洗护应用｜沐浴、洁面与洗涤配方材料', 'Personal care | Cleansing formulation materials'], href: 'bioten-personal-care.html' },
        { title: ['生物基涂料｜乳胶漆、木器漆与功能载体材料', 'Bio-based coatings | Functional carrier materials'], href: 'bioten-waterborne-coatings.html' },
        { title: ['提交应用与合作需求', 'Submit an application brief'], href: 'contact.html?intent=bioten-platform', cta: true }
      ]
    },
    {
      section: 'packaging',
      number: '03',
      eyebrow: 'BIOTEN PACKAGING',
      title: ['博碳包装', 'BIOTEN Packaging'],
      navTitle: ['博碳包装', 'Packaging'],
      navDescription: ['高要求纸基包装阻隔系统', 'Barrier systems for demanding paper packaging'],
      description: [
        '以 PHA 生物基水性乳液为材料底座，面向食品与饮料、美妆与个护、医药与医疗纸基外包装及特种包装，组织纸基、涂层、成型、测试与证据交付。',
        'Built on PHA bio-based waterborne emulsions, BIOTEN Packaging coordinates paper, coating, converting, testing and evidence delivery for food and beverage, beauty and personal care, pharmaceutical and medical paper outer and secondary packaging, and specialty packaging.'
      ],
      desktopDescription: [
        '以 PHA 生物基水性乳液为材料基础，围绕纸基包装的阻隔、热封、成膜、加工适配与制品验证，构建面向食品接触合规、源头减塑与低碳设计、末端回收再浆及可选堆肥降解路径的纸基包装阻隔系统工程。',
        'Built on PHA bio-based waterborne emulsions, BIOTEN Packaging integrates barrier, heat sealing, film formation, process fit and article validation across multiple circular pathways.'
      ],
      href: 'bioten.html',
      entryHref: 'bioten.html',
      entry: ['进入博碳包装', 'Open BIOTEN Packaging'],
      desktopDirect: true,
      desktopIndexTitle: ['包装工程索引', 'Packaging engineering index'],
      desktopIndex: [
        { title: ['阻隔系统工程', 'Barrier systems engineering'], href: 'bioten.html' },
        { title: ['专业包装领域', 'Professional packaging fields'], href: 'bioten-packaging-applications.html' },
        { title: ['方法、测试与证据', 'Methods, testing and evidence'], href: 'knowledge-barrier-standards.html' }
      ],
      desktopRoutes: [
        {
          label: '食品与饮料',
          title: ['食品与饮料包装', 'Food & beverage packaging'],
          description: ['餐饮具、食品纸包与液体容器的阻隔和热封系统', 'Barrier and heat-seal systems for foodservice, food wraps and liquid containers'],
          href: 'packaging-food-beverage.html',
          image: 'assets/images/v703/paper-foodserviceware-bright.jpg',
          position: '50% 62%',
          desktopPosition: '50% 64%',
          mobilePosition: '60% 64%'
        },
        {
          label: '美妆与个护',
          title: ['美妆与个护包装', 'Beauty & personal-care packaging'],
          description: ['自然哑光、耐污触感与高质感纸基阻隔包装', 'Natural matte, stain resistance and premium paper barrier packaging'],
          href: 'packaging-beauty-personal-care.html',
          image: 'assets/images/v714/bioten-beauty-personal-care-film-free-matte-packaging-v714.jpg',
          position: '50% 54%',
          desktopPosition: '50% 56%',
          mobilePosition: '51% 56%'
        },
        {
          label: '医药与医疗',
          title: ['医药与医疗包装', 'Pharma & medical packaging'],
          description: ['医用纸袋、药品纸盒与精密模塑缓冲的功能防护', 'Functional protection for medical pouches, cartons and precision molded cushioning'],
          href: 'packaging-pharma-medical.html',
          image: 'assets/images/v350/pharma-medical.jpg',
          position: '52% 56%',
          desktopPosition: '52% 58%',
          mobilePosition: '56% 58%'
        },
        {
          label: '特种包装',
          title: ['特种包装', 'Specialty packaging'],
          description: ['消费电子、芯片器件、功能纸与高性能运输防护', 'Consumer electronics, chips, functional papers and transport protection'],
          href: 'packaging-specialty.html',
          image: 'assets/images/navigation-v432/bioten-packaging-specialty.jpg',
          position: '50% 54%',
          desktopPosition: '50% 56%',
          mobilePosition: '49% 56%'
        }
      ],
      routes: [
        {
          label: '食品与饮料',
          title: ['食品与饮料包装', 'Food & beverage packaging'],
          description: ['纸杯餐饮具、食品纸袋、柔性包装与高阻纸板', 'Foodserviceware, paper bags, flexible formats and high-barrier paperboard'],
          href: 'packaging-food-beverage.html',
          image: 'assets/images/v703/paper-foodserviceware-bright.jpg',
          position: '50% 62%',
          desktopPosition: '50% 64%',
          mobilePosition: '60% 64%',
          featured: true
        },
        {
          label: '美妆与个护',
          title: ['美妆与个护包装', 'Beauty & personal-care packaging'],
          description: ['围绕防渗、防潮、介质相容、外观与印刷适配', 'Leakage, moisture, media compatibility, appearance and print fit'],
          href: 'packaging-beauty-personal-care.html',
          image: 'assets/images/v714/bioten-beauty-personal-care-film-free-matte-packaging-v714.jpg',
          position: '50% 54%',
          desktopPosition: '50% 56%',
          mobilePosition: '51% 56%'
        },
        {
          label: '医药与医疗',
          title: ['医药与医疗包装', 'Pharma & medical packaging'],
          description: ['纸基外包装、二次包装与纸浆模塑托的防潮、成型及结构适配', 'Moisture control, forming and structural fit for paper outer and secondary packaging and molded-fiber trays'],
          href: 'packaging-pharma-medical.html',
          image: 'assets/images/v350/pharma-medical.jpg',
          position: '52% 56%',
          desktopPosition: '52% 58%',
          mobilePosition: '56% 58%'
        },
        {
          label: '特种包装',
          title: ['特种包装', 'Specialty packaging'],
          description: ['面向消费电子、精密器件与工业产品的纸基防护结构', 'Paper-based protective structures for consumer electronics, precision devices and industrial products'],
          href: 'packaging-specialty.html',
          image: 'assets/images/navigation-v432/bioten-packaging-specialty.jpg',
          position: '50% 54%',
          desktopPosition: '50% 56%',
          mobilePosition: '49% 56%'
        }
      ],
      quickTitle: ['项目与资料入口', 'Project and document routes'],
      quick: [
        { title: ['提交包装项目预审', 'Submit a packaging project brief'], href: 'sample.html' },
        { title: ['技术方案与研究', 'Technology & insights'], href: 'packaging-insights.html' },
        { title: ['已有纸样·申请测试', 'Request testing for an existing paper sample'], href: 'contact-intent-paper-sample.html' },
        { title: ['技术资料与证据', 'Technical documents and evidence'], href: 'resources.html' },
        { title: ['联系应用工程', 'Contact application engineering'], href: 'contact.html?intent=bioten-packaging', cta: true }
      ]
    },
    {
      section: 'developer',
      number: '04',
      eyebrow: 'BIOTEN DEVELOPER',
      title: ['开发者', 'Developer'],
      navTitle: ['开发者', 'Developer'],
      navDescription: ['PHA 材料、应用与开放创新平台', 'PHA materials, applications and open innovation'],
      description: [
        '面向包装、农业、洗护、生物基涂料与开放创新，把材料构想、配方目标、加工条件与验证要求转化为可执行的联合开发路径。',
        'A PHA developer platform that turns material concepts, formulation targets, process conditions and validation needs into executable joint-development routes.'
      ],
      desktopDescription: [
        '基于 PHA 生物基水性材料能力，连接材料设计、配方开发、工艺适配、样品验证与产品发布，服务既有应用领域及开放创新项目。',
        'Built on PHA bio-based waterborne materials, connecting material design, formulation, process fit, validation and product release.'
      ],
      href: 'bioten-lab.html',
      entry: ['进入开发者平台', 'Open Developer'],
      desktopDirect: true,
      desktopIndexTitle: ['开发与合作入口', 'Development and collaboration'],
      desktopIndex: [
        { title: ['合作开发项目', 'Collaborative development projects'], href: 'developer-open-innovation.html' },
        { title: ['包装开发者', 'Packaging developer'], href: 'developer-packaging.html' },
        { title: ['农业应用开发', 'Agricultural application development'], href: 'developer-agriculture.html' },
        { title: ['洗护配方开发', 'Personal-care formulation development'], href: 'developer-personal-care.html' },
        { title: ['生物基涂料开发', 'Bio-based coating development'], href: 'developer-waterborne-coatings.html' }
      ],
      desktopRoutes: [
        {
          label: '包装开发者',
          title: ['包装开发者', 'Packaging developer'],
          description: ['纸基阻隔、涂布加工、制品验证与产线导入', 'Paper barriers, coating, article validation and production introduction'],
          href: 'developer-packaging.html',
          image: 'assets/images/developer-v200/fiber-barrier-coated-paper-navigation-20260818.webp',
          fallback: 'assets/images/developer-v200/fiber-barrier-coated-paper-navigation-20260818.webp',
          position: '50% 50%'
        },
        {
          label: '农业应用开发',
          title: ['农业应用开发', 'Agricultural application development'],
          description: ['作物、种子、包衣工艺、农化缓释与田间条件', 'Crops, seeds, coating processes, controlled release and field conditions'],
          href: 'developer-agriculture.html',
          image: 'assets/images/navigation-v432/bioten-agriculture-ecosystem.jpg',
          position: '50% 58%'
        },
        {
          label: '洗护配方开发',
          title: ['洗护配方开发', 'Personal-care formulation development'],
          description: ['完整配方、相容稳定、成膜载体与冲洗表现', 'Full formulations, compatibility, film carriers and rinse-off performance'],
          href: 'developer-personal-care.html',
          image: 'assets/images/navigation-v432/bioten-care-applications.jpg',
          position: '50% 55%'
        },
        {
          label: '生物基涂料开发',
          title: ['生物基涂料开发', 'Bio-based coating development'],
          description: ['乳液相容、颜填料界面、成膜、附着与施工窗口', 'Emulsion compatibility, pigment interfaces, film formation and application windows'],
          href: 'developer-waterborne-coatings.html',
          image: 'assets/images/navigation-v432/bioten-bio-based-coatings.jpg',
          position: '50% 54%'
        }
      ],
      routes: [
        {
          label: '包装开发者',
          title: ['包装开发者', 'Packaging developer'],
          description: ['纸基阻隔、涂布加工、制品验证与产线导入', 'Paper barriers, coating, article validation and production introduction'],
          href: 'developer-packaging.html',
          image: 'assets/images/developer-v200/fiber-barrier-coated-paper-navigation-20260818.webp',
          position: '50% 50%'
        },
        {
          label: '农业应用开发',
          title: ['农业应用开发', 'Agricultural application development'],
          description: ['作物、种子、包衣工艺、农化缓释与田间条件', 'Crops, seeds, coating processes, controlled release and field conditions'],
          href: 'developer-agriculture.html',
          image: 'assets/images/navigation-v432/bioten-agriculture-ecosystem.jpg',
          position: '50% 58%'
        },
        {
          label: '洗护配方开发',
          title: ['洗护配方开发', 'Personal-care formulation development'],
          description: ['完整配方、相容稳定、成膜载体与冲洗表现', 'Full formulations, compatibility, film carriers and rinse-off performance'],
          href: 'developer-personal-care.html',
          image: 'assets/images/navigation-v432/bioten-care-applications.jpg',
          position: '50% 55%'
        },
        {
          label: '生物基涂料开发',
          title: ['生物基涂料开发', 'Bio-based coating development'],
          description: ['乳液相容、颜填料界面、成膜、附着与施工窗口', 'Emulsion compatibility, pigment interfaces, film formation and application windows'],
          href: 'developer-waterborne-coatings.html',
          image: 'assets/images/navigation-v432/bioten-bio-based-coatings.jpg',
          position: '50% 54%'
        }
      ],
      quickTitle: ['开发任务与资料入口', 'Development tasks and documents'],
      quick: [
        { title: ['合作开发项目', 'Collaborative development projects'], href: 'developer-open-innovation.html', priority: true },
        { title: ['方法、资料与证据', 'Methods, documents and evidence'], href: 'resources.html' },
        { title: ['联系联合开发团队', 'Contact joint-development team'], href: 'contact.html?intent=developer#contact-form', cta: true }
      ]
    },
    {
      section: 'news',
      number: '05',
      eyebrow: 'BIOTEN OBSERVER',
      title: ['博碳观察', 'BIOTEN Observer'],
      navTitle: ['博碳观察', 'Insights'],
      navDescription: ['公司动态与行业洞察', 'Company news and industry insights'],
      description: [
        '汇集企业实践与产业分析，以可追溯内容连接材料研发、工艺验证和应用决策。',
        'Traceable company practice and industry analysis connecting materials research, process validation and application decisions.'
      ],
      href: 'news.html',
      entry: ['查看博碳观察', 'View BIOTEN Observer'],
      routes: [
        {
          label: '公司动态',
          title: ['公司动态', 'Company News'],
          description: ['聚合企业进展、技术发布、项目实践与产业协同，保留发布时点和原始资料路径', 'Company progress, technology releases, project practice and industry collaboration, preserved with publication context and source paths'],
          href: 'news-company.html',
          image: 'assets/images/bioten-observer/company-news-bioten-applications-20260818.jpg',
          position: '50% 58%'
        },
        {
          label: '行业洞察',
          title: ['行业洞察', 'Industry Insights'],
          description: ['围绕材料路线、工艺适配、标准演进与市场变化，形成面向研发及产业决策的专业分析', 'Professional analysis of material routes, process fit, standards and market shifts for R&D and industry decisions'],
          href: 'news-insights.html',
          image: 'assets/images/bioten-observer/industry-insights-paper-materials-market-20260818.jpg',
          position: '50% 50%'
        }
      ],
      quickTitle: ['内容频道', 'Content channels'],
      quick: []
    }
  ];

  function escapeHtml(value) {
    return String(value)
      .replace(/&/g, '&')
      .replace(/</g, '<')
      .replace(/>/g, '>')
      .replace(/"/g, '"')
      .replace(/'/g, ''');
  }

  function localizedAttributes(copy) {
    return `data-nav-cn="${escapeHtml(copy[0])}" data-nav-en="${escapeHtml(copy[1])}"`;
  }

  function localizedText(copy) {
    return `<span ${localizedAttributes(copy)}>${escapeHtml(copy[0])}</span>`;
  }

  const routeLabelEnglish = Object.freeze({
    '生物基功能材料': 'Bio-based functional materials',
    '先进材料': 'Advanced materials',
    '城市更新涂料': 'Urban-renewal coatings',
    '运动地面系统': 'Sports surfaces',
    '环保低碳材料': 'Low-carbon materials',
    '纸基阻隔': 'Paper barriers',
    '农业生态': 'Agriculture',
    '洗护应用': 'Personal care',
    '生物基涂料': 'Bio-based coatings',
    '食品与饮料': 'Food & beverage',
    '美妆与个护': 'Beauty & personal care',
    '医药与医疗': 'Pharma & medical',
    '特种包装': 'Specialty packaging',
    '包装开发者': 'Packaging developer',
    '农业应用开发': 'Agriculture developer',
    '洗护配方开发': 'Personal-care formulation',
    '生物基涂料开发': 'Bio-based-coatings developer',
    '认证与资料更新': 'Certification & documents',
    '应用证据': 'Application evidence',
    '公司动态': 'Company News',
    '行业洞察': 'Industry Insights',
    '产业协同': 'Industry collaboration'
  });

  function localizedRouteLabel(label, index) {
    const number = String(index + 1).padStart(2, '0');
    return [`${number} · ${label}`, `${number} · ${routeLabelEnglish[label] || label}`];
  }

  const transparentNavigationPixel = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';

  function renderPicture(route, className) {
    const source = route.image.endsWith('.avif')
      ? `<source data-dbc-nav-srcset="${escapeHtml(route.image)}" type="image/avif">`
      : '';
    const fallback = route.fallback || route.image;
    const position = route.position || '50% 50%';
    const desktopPosition = route.desktopPosition || position;
    const mobilePosition = route.mobilePosition || position;
    return `<span class="${className}" style="--dbc-nav-image-position:${escapeHtml(position)};--dbc-nav-image-position-desktop:${escapeHtml(desktopPosition)};--dbc-nav-image-position-mobile:${escapeHtml(mobilePosition)}"><picture>${source}<img src="${transparentNavigationPixel}" data-dbc-nav-src="${escapeHtml(fallback)}" alt="" width="480" height="320" loading="lazy" decoding="async"></picture></span>`;
  }

  function hydrateNavigationImages(container) {
    if (!container) return;
    container.querySelectorAll('source[data-dbc-nav-srcset]').forEach(function (source) {
      source.srcset = source.dataset.dbcNavSrcset;
      source.removeAttribute('data-dbc-nav-srcset');
    });
    container.querySelectorAll('img[data-dbc-nav-src]').forEach(function (image) {
      image.src = image.dataset.dbcNavSrc;
      image.removeAttribute('data-dbc-nav-src');
    });
  }

  function getActiveSection() {
    const path = decodeURIComponent(window.location.pathname).toLowerCase();
    if (path.includes('/bioten-pha-waterborne-varnish/')) return 'packaging';
    const file = decodeURIComponent(window.location.pathname.split('/').pop() || 'index.html').toLowerCase();
    if (file === 'news.html' || file.startsWith('news-')) return 'news';
    if (
      file === 'developer-packaging.html' ||
      file.startsWith('developer-domain-') ||
      ['developer-materials.html', 'developer-barrier-systems.html', 'developer-tools.html', 'developer-evidence.html', 'developer-solutions.html', 'developer-challenges.html', 'sample.html'].includes(file)
    ) return 'packaging';
    if (
      file === 'bioten-lab.html' ||
      file === 'developer-agriculture.html' ||
      file === 'developer-personal-care.html' ||
      file === 'developer-waterborne-coatings.html' ||
      file === 'developer-open-innovation.html' ||
      file.startsWith('developer-') ||
      file === 'knowledge.html' ||
      file.startsWith('knowledge-') ||
      file.startsWith('resources') ||
      file.startsWith('portal-') ||
      file.startsWith('contact-from-bioten')
    ) return 'developer';
    if (
      file === 'bioten.html' ||
      file.startsWith('packaging-') ||
      file.startsWith('bioten-packaging') ||
      file.startsWith('bioten-product') ||
      file.startsWith('contact-intent-') ||
      file === 'solutions.html' ||
      file.startsWith('solutions-') ||
      file.startsWith('cup-3d')
    ) return 'packaging';
    if (
      file.startsWith('bioten-platform') ||
      file.startsWith('bioten-agriculture') ||
      file.startsWith('bioten-personal-care') ||
      file.startsWith('bioten-waterborne-coatings') ||
      file.startsWith('bioten-health-research')
    ) return 'bioten';
    if (
      ['index.html', 'about.html', 'about-brands.html', 'contact.html', 'contact-routing.html', 'casu.html', 'antux.html', 'dpu.html', 'ecoten.html',
        'antux-products.html', 'casu-battery-materials.html', 'dpu-projects.html', 'ecoten-materials.html', 'patent-evidence.html'].includes(file) ||
      file.startsWith('sample_')
    ) return 'dbc';
    return '';
  }

  function renderDesktopHeader(activeSection) {
    const links = navigationItems.map(item => {
      const current = activeSection === item.section ? ' aria-current="page"' : '';
      return `<a class="dbc-desktop-nav__link" href="${item.href}" data-dbc-desktop-menu="${item.section}" aria-expanded="false" aria-controls="dbc-desktop-mega-${item.section}"${current}>${localizedText(item.navTitle || item.title)}</a>`;
    }).join('');

    const isEnglishSite = siteLanguage === 'en';
    const languageHref = isEnglishSite ? '/index.html?lang=zh' : '/EN/';
    const languageLabel = isEnglishSite ? 'Switch to Chinese' : '进入英文网站';
    const targetLanguage = isEnglishSite ? 'zh-CN' : 'en';
    const languageToggle = `<a class="site-language-link" data-site-language-link data-current-language="${siteLanguage}" href="${languageHref}" hreflang="${targetLanguage}" aria-label="${languageLabel}" title="${languageLabel}"><span class="site-language-option" data-language-option="zh" lang="zh-CN" aria-hidden="true">中</span><span class="site-language-option" data-language-option="en" lang="en" aria-hidden="true">EN</span></a>`;

    return `<div class="header-inner">
      <div class="brand-logos">
        <a class="logo logo-image" href="index.html" aria-label="世界杯竞猜官网首页" data-aria-cn="世界杯竞猜官网首页" data-aria-en="DBC homepage"><img src="assets/images/bioten-lab/dbc-logo.webp" alt="世界杯竞猜官网 DBC" data-alt-cn="世界杯竞猜官网 DBC" data-alt-en="DBC" width="240" height="120"></a>
        <a class="logo logo-image logo-image-biocycle" href="bioten.html" aria-label="博碳包装主页" data-aria-cn="博碳包装主页" data-aria-en="BIOTEN Packaging homepage" data-v7160-logo-route="bioten-packaging"><img src="assets/images/bioten-lab/bioten-logo.webp" alt="博碳 BIOTEN" data-alt-cn="博碳 BIOTEN" data-alt-en="BIOTEN Packaging" width="120" height="120"></a>
      </div>
      <nav class="dbc-desktop-nav" data-dbc-desktop-nav aria-label="主导航">${links}</nav>
      <div class="dbc-header-actions">
        ${languageToggle}
        <button class="dbc-nav-trigger" type="button" data-dbc-nav-open aria-controls="dbc-global-navigation" aria-expanded="false" aria-label="打开导航"><span data-nav-cn="导航" data-nav-en="Menu">导航</span><span class="dbc-nav-trigger__icon" aria-hidden="true"><i></i><i></i></span></button>
      </div>
    </div>`;
  }

  function renderDesktopPanel(item) {
    const desktopRoutes = item.desktopRoutes || item.routes;
    const desktopDescription = item.desktopDescription || item.description;
    const routes = desktopRoutes.map((route, index) => `<a class="dbc-desktop-route${route.featured ? ' dbc-desktop-route--featured' : ''}" href="${route.href}">
      ${renderPicture(route, 'dbc-desktop-route__media')}
      <span class="dbc-desktop-route__copy"><small ${localizedAttributes(localizedRouteLabel(route.label, index))}>${escapeHtml(localizedRouteLabel(route.label, index)[0])}</small><strong ${localizedAttributes(route.title)}>${escapeHtml(route.title[0])}</strong><span class="dbc-desktop-route__desc" ${localizedAttributes(route.description)}>${escapeHtml(route.description[0])}</span><i aria-hidden="true">→</i></span>
    </a>`).join('');
    const quick = item.quick.map(link => `<a class="${link.priority ? 'is-priority ' : ''}${link.cta ? 'dbc-desktop-mega__cta' : ''}" href="${link.href}">${localizedText(link.title)}<span aria-hidden="true">→</span></a>`).join('');
    const directClass = item.desktopDirect ? ' dbc-desktop-mega--direct' : '';
    const indexClass = item.desktopIndex ? ' dbc-desktop-mega--has-index' : '';
    const hasQuick = !item.desktopDirect && item.quick.length > 0;
    const noQuickClass = !item.desktopDirect && !hasQuick ? ' dbc-desktop-mega--no-quick' : '';
    const quickPanel = hasQuick ? `<aside class="dbc-desktop-mega__quick"><p ${localizedAttributes(item.quickTitle)}>${escapeHtml(item.quickTitle[0])}</p>${quick}</aside>` : '';
    const indexPanel = item.desktopIndex ? `<nav class="dbc-desktop-mega__index" aria-label="${escapeHtml(item.desktopIndexTitle[0])}"><p ${localizedAttributes(item.desktopIndexTitle)}>${escapeHtml(item.desktopIndexTitle[0])}</p>${item.desktopIndex.map(link => `<a href="${link.href}">${localizedText(link.title)}<span aria-hidden="true">↗</span></a>`).join('')}</nav>` : '';
    return `<section class="dbc-desktop-mega dbc-desktop-mega--${item.section}${directClass}${indexClass}${noQuickClass}" id="dbc-desktop-mega-${item.section}" data-dbc-desktop-panel="${item.section}" aria-hidden="true" style="--dbc-nav-quick-count:${item.quick.length};--dbc-nav-index-count:${item.desktopIndex ? item.desktopIndex.length : 0};--dbc-nav-route-count:${desktopRoutes.length}">
      <div class="dbc-desktop-mega__inner">
        <div class="dbc-desktop-mega__intro"><h2 ${localizedAttributes(item.title)}>${escapeHtml(item.title[0])}</h2><p ${localizedAttributes(desktopDescription)}>${escapeHtml(desktopDescription[0])}</p><a class="dbc-desktop-mega__entry" href="${item.entryHref || item.href}">${localizedText(item.entry)}<span aria-hidden="true">→</span></a></div>
        <div class="dbc-desktop-mega__routes">${routes}</div>
        ${indexPanel}
        ${quickPanel}
      </div>
    </section>`;
  }

  function renderMobilePanel(item) {
    const cards = item.routes.map((route, index) => `<a class="dbc-nav-card ${['bioten', 'packaging', 'developer'].includes(item.section) ? 'dbc-nav-card--bioten' : ''}${route.featured ? ' dbc-nav-card--featured' : ''}" href="${route.href}">
      ${renderPicture(route, 'dbc-nav-card__media')}
      <span class="dbc-nav-card__copy"><small ${localizedAttributes(localizedRouteLabel(route.label, index))}>${escapeHtml(localizedRouteLabel(route.label, index)[0])}</small><strong ${localizedAttributes(route.title)}>${escapeHtml(route.title[0])}</strong><em ${localizedAttributes(route.description)}>${escapeHtml(route.description[0])}</em><i aria-hidden="true">→</i></span>
    </a>`).join('');
    const quick = item.quick.map(link => `<a class="${link.priority ? 'is-priority ' : ''}${link.cta ? 'dbc-nav-quick__cta' : ''}" href="${link.href}">${localizedText(link.title)}<span aria-hidden="true">→</span></a>`).join('');
    const quickPanel = item.quick.length ? `<aside class="dbc-nav-quick"><p ${localizedAttributes(item.quickTitle)}>${escapeHtml(item.quickTitle[0])}</p>${quick}</aside>` : '';
    return `<div class="dbc-nav-view dbc-nav-view--panel" id="dbc-nav-panel-${item.section}" data-dbc-nav-view="${item.section}" hidden aria-hidden="true">
      <button class="dbc-nav-back" type="button" data-dbc-nav-back><span aria-hidden="true">←</span><span data-nav-cn="返回" data-nav-en="Back">返回</span></button>
      <div class="dbc-nav-panel-head ${['bioten', 'packaging', 'developer'].includes(item.section) ? 'dbc-nav-panel-head--bioten' : ''}"><p class="dbc-nav-eyebrow">${item.number} · ${item.eyebrow}</p><h2 ${localizedAttributes(item.title)}>${escapeHtml(item.title[0])}</h2><p ${localizedAttributes(item.description)}>${escapeHtml(item.description[0])}</p></div>
      <div class="dbc-nav-panel-body"><div class="dbc-nav-card-grid">${cards}</div>${quickPanel}</div>
    </div>`;
  }

  function renderMobileOverlay(activeSection) {
    const primary = navigationItems.map(item => `<button class="${activeSection === item.section ? 'is-current' : ''}" type="button" data-dbc-nav-panel="${item.section}" aria-controls="dbc-nav-panel-${item.section}"><span class="dbc-nav-primary__number">${item.number}</span><span class="dbc-nav-primary__copy"><strong ${localizedAttributes(item.title)}>${escapeHtml(item.title[0])}</strong><small ${localizedAttributes(item.navDescription)}>${escapeHtml(item.navDescription[0])}</small></span><span class="dbc-nav-arrow" aria-hidden="true">→</span></button>`).join('');
    const panels = navigationItems.map(renderMobilePanel).join('');
    return `<section class="dbc-nav-overlay" id="dbc-global-navigation" role="dialog" aria-modal="true" aria-label="移动端导航" aria-hidden="true" hidden>
      <div class="dbc-nav-shell">
        <div class="dbc-nav-topbar"><div class="dbc-nav-brand"><span class="dbc-nav-brand__mark"><img src="assets/images/bioten-lab/dbc-logo.webp" alt="世界杯竞猜官网 DBC" width="240" height="120"></span><span class="dbc-nav-brand__divider" aria-hidden="true"></span><span class="dbc-nav-brand__name"><strong>DBC</strong><em data-nav-cn="新材料应用平台" data-nav-en="New Material Application Platform">新材料应用平台</em></span></div><button class="dbc-nav-close" type="button" data-dbc-nav-close aria-label="关闭导航"><span aria-hidden="true"></span></button></div>
        <div class="dbc-nav-stage">
          <div class="dbc-nav-view dbc-nav-view--root" data-dbc-nav-view="root">
            <div class="dbc-nav-root-grid">
              <div class="dbc-nav-directory"><p class="dbc-nav-eyebrow">DBC / BIOTEN SYSTEM</p><h2 data-nav-cn="我们创新未来应用" data-nav-en="We innovate future applications">我们创新未来应用</h2><div class="dbc-nav-primary">${primary}</div><nav class="dbc-nav-utilities" aria-label="快捷入口"><a href="about.html"><span data-nav-cn="关于世界杯竞猜官网" data-nav-en="About DBC">关于世界杯竞猜官网</span><span aria-hidden="true">↗</span></a><a href="contact.html"><span data-nav-cn="联系与项目合作" data-nav-en="Contact and projects">联系与项目合作</span><span aria-hidden="true">↗</span></a></nav></div>
              <aside class="dbc-nav-root-note"><p class="dbc-nav-eyebrow">PROJECT ENTRY</p><div class="dbc-insight-line" aria-hidden="true"><span></span></div><h3 data-nav-cn="有具体材料或应用问题？" data-nav-en="Have a material or application question?">有具体材料或应用问题？</h3><p data-nav-cn="准备业务方向、应用结构、工况、目标性能和目标市场，我们据此分配团队并判断下一步。" data-nav-en="Share the business area, application structure, conditions, target performance and market so the right team and next step can be defined.">准备业务方向、应用结构、工况、目标性能和目标市场，我们据此分配团队并判断下一步。</p><a class="dbc-nav-root-cta" href="contact.html"><span data-nav-cn="提交合作与项目需求" data-nav-en="Submit a collaboration or project brief">提交合作与项目需求</span><span aria-hidden="true">→</span></a><dl><div><dt data-nav-cn="输入" data-nav-en="Input">输入</dt><dd data-nav-cn="场景与工况" data-nav-en="Scenario and conditions">场景与工况</dd></div><div><dt data-nav-cn="判断" data-nav-en="Decision">判断</dt><dd data-nav-cn="业务与工程路线" data-nav-en="Business and engineering route">业务与工程路线</dd></div><div><dt data-nav-cn="输出" data-nav-en="Output">输出</dt><dd data-nav-cn="责任团队与下一步" data-nav-en="Owner and next step">责任团队与下一步</dd></div></dl></aside>
            </div>
          </div>
          ${panels}
        </div>
      </div>
    </section>`;
  }

  function renderFormalFooterDirectory() {
    const column = (title, links) => `<details class="footer-column v7301-footer-disclosure" open><summary><h3 ${localizedAttributes(title)}>${escapeHtml(title[0])}</h3><span aria-hidden="true"></span></summary><div class="v7301-footer-disclosure__links">${links.map(link => `<a href="${link.href}" ${localizedAttributes(link.title)}>${escapeHtml(link.title[0])}</a>`).join('')}</div></details>`;
    return [
      column(['世界杯竞猜官网', 'DBC'], [
        { href: 'index.html', title: ['世界杯竞猜官网首页', 'DBC Home'] }, { href: 'about.html', title: ['关于世界杯竞猜官网', 'About DBC'] }, { href: 'about-brands.html', title: ['品牌与业务', 'Brands and Businesses'] }, { href: 'contact.html', title: ['联系与合作', 'Contact'] }
      ]),
      column(['博碳生物', 'BIOTEN Platform'], [
        { href: 'bioten-platform.html', title: ['技术平台', 'Technology Platform'] }, { href: 'bioten-platform.html#method', title: ['PHA 水性功能乳液', 'PHA Waterborne Emulsions'] }, { href: 'bioten-platform.html#routes', title: ['四个应用领域', 'Four Application Fields'] }, { href: 'bioten-lab.html', title: ['联合开发', 'Joint Development'] }
      ]),
      column(['博碳包装', 'BIOTEN Packaging'], [
        { href: 'bioten.html', title: ['阻隔系统工程', 'Barrier Systems'] }, { href: 'bioten-packaging-applications.html', title: ['专业包装领域', 'Packaging Fields'] }, { href: 'packaging-insights.html', title: ['技术方案与研究', 'Technology & Insights'] }, { href: 'developer-packaging.html', title: ['包装开发者', 'Packaging Developer'] }, { href: 'bioten-product-lines.html', title: ['产品路线', 'Product Routes'] }, { href: 'sample.html', title: ['项目预审', 'Project Intake'] }
      ]),
      column(['开发者', 'Developer'], [
        { href: 'bioten-lab.html', title: ['全领域开发总览', 'All-field Developer'] }, { href: 'developer-agriculture.html', title: ['农业应用开发', 'Agricultural Development'] }, { href: 'developer-personal-care.html', title: ['洗护配方开发', 'Personal-care Development'] }, { href: 'developer-waterborne-coatings.html', title: ['生物基涂料开发', 'Bio-based Coating Development'] }, { href: 'developer-open-innovation.html', title: ['开放创新', 'Open Innovation'] }
      ]),
      column(['博碳观察', 'BIOTEN Observer'], [
        { href: 'news.html', title: ['博碳观察主页', 'Observer Home'] }, { href: 'news-company.html', title: ['公司动态', 'Company News'] }, { href: 'news-insights.html', title: ['行业洞察', 'Industry Insights'] }
      ])
    ].join('');
  }

  function normalizeCompactFooters() {
    document.querySelectorAll('footer.site-footer .footer-directory').forEach(footerNav => {
      if (footerNav.querySelector('.footer-column') || footerNav.closest('.formal-site-footer')) {
        footerNav.innerHTML = renderFormalFooterDirectory();
        return;
      }
      footerNav.innerHTML = navigationItems.map(item => `<a class="footer-nav-link" href="${item.href}" ${localizedAttributes(item.title)}>${escapeHtml(item.title[0])}</a>`).join('');
    });

    document.querySelectorAll('footer.site-footer .footer-note').forEach(note => {
      const copy = [
        'DBC 世界杯竞猜官网组织新材料应用创新；BIOTEN 以 PHA 水性材料为技术底座，博碳包装推进纸基阻隔系统工程。',
        'DBC organizes advanced-material applications; BIOTEN builds on PHA waterborne materials, while BIOTEN Packaging advances paper barrier systems engineering.'
      ];
      note.setAttribute('data-nav-cn', copy[0]);
      note.setAttribute('data-nav-en', copy[1]);
      note.textContent = copy[0];
    });
  }

  function buildGlobalNavigation() {
    const header = document.querySelector('.site-header');
    if (!header) return;
    if (header.dataset.dbcNavigation === 'v300'
      && document.querySelector('[data-dbc-desktop-mega-layer]')
      && header.querySelector('[data-site-language-link]')) return;
    const activeSection = getActiveSection();
    document.documentElement.dataset.dbcNavigation = 'v300';
    document.body.classList.add('dbc-global-nav-active');
    header.dataset.siteHeader = '';
    header.dataset.siteShell = 'group';
    header.dataset.dbcNavigation = 'v300';
    header.classList.add('dbc-site-header-v133');

    document.querySelectorAll('.dbc-desktop-mega-layer, #dbc-global-navigation').forEach(element => element.remove());
    header.innerHTML = renderDesktopHeader(activeSection);
    header.insertAdjacentHTML('afterend', `<div class="dbc-desktop-mega-layer" data-dbc-desktop-mega-layer role="navigation" aria-label="展开导航">${navigationItems.map(renderDesktopPanel).join('')}</div>${renderMobileOverlay(activeSection)}`);
    normalizeCompactFooters();
  }

  buildGlobalNavigation();
  window.DBCSiteNavigationV133 = { init: buildGlobalNavigation };

  const desktopQuery = window.matchMedia('(min-width: 861px)');
  const mobileQuery = window.matchMedia('(max-width: 860px)');
  const adaptiveDirectQuery = window.matchMedia('(min-width: 700px) and (max-width: 860px)');
  const coarsePointerQuery = window.matchMedia('(hover: none), (pointer: coarse)');
  const reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

  function isDesktopMode() {
    return desktopQuery.matches;
  }

  function isMobileMode() {
    return mobileQuery.matches;
  }

  const desktopNav = document.querySelector('[data-dbc-desktop-nav]');
  const desktopLayer = document.querySelector('[data-dbc-desktop-mega-layer]');
  const desktopTriggers = desktopNav
    ? Array.from(desktopNav.querySelectorAll('[data-dbc-desktop-menu]'))
    : [];
  const desktopPanels = desktopLayer
    ? Array.from(desktopLayer.querySelectorAll('[data-dbc-desktop-panel]'))
    : [];
  let activeDesktopMenu = '';
  let desktopCloseTimer = 0;
  let suppressDesktopFocusOpen = false;
  const touchActivationState = new WeakMap();

  function syncAdaptiveDirectNavigation() {
    const isAdaptiveDirect = adaptiveDirectQuery.matches;
    document.body.toggleAttribute('data-dbc-adaptive-direct-navigation', isAdaptiveDirect);
    desktopTriggers.forEach(function (trigger) {
      if (isAdaptiveDirect) {
        trigger.removeAttribute('aria-haspopup');
        trigger.removeAttribute('aria-expanded');
        trigger.removeAttribute('aria-controls');
        return;
      }
      trigger.removeAttribute('aria-haspopup');
      trigger.setAttribute('aria-expanded', trigger.classList.contains('is-open') ? 'true' : 'false');
      trigger.setAttribute('aria-controls', `dbc-desktop-mega-${trigger.dataset.dbcDesktopMenu}`);
    });
  }

  function cancelDesktopClose() {
    window.clearTimeout(desktopCloseTimer);
  }

  function openDesktopMenu(name, options) {
    if (!isDesktopMode()) return;
    const settings = options || {};
    const panel = desktopPanels.find(function (candidate) {
      return candidate.dataset.dbcDesktopPanel === name;
    });
    if (!panel) return;

    hydrateNavigationImages(panel);

    cancelDesktopClose();
    activeDesktopMenu = name;
    desktopLayer.classList.add('is-open');
    document.body.classList.add('dbc-desktop-nav-open');
    document.dispatchEvent(new CustomEvent('dbc:navigation-open', { detail: { mode: 'desktop' } }));

    desktopTriggers.forEach(function (trigger) {
      const active = trigger.dataset.dbcDesktopMenu === name;
      trigger.classList.toggle('is-open', active);
      trigger.setAttribute('aria-expanded', String(active));
    });

    desktopPanels.forEach(function (candidate) {
      const active = candidate === panel;
      candidate.classList.toggle('is-open', active);
      candidate.setAttribute('aria-hidden', String(!active));
    });

    if (settings.focusFirst) {
      window.requestAnimationFrame(function () {
        const firstLink = panel.querySelector('a[href]');
        if (firstLink) firstLink.focus({ preventScroll: true });
      });
    }
  }

  function closeDesktopMenu(options) {
    const settings = options || {};
    const wasOpen = Boolean(activeDesktopMenu);
    const returnTarget = desktopTriggers.find(function (trigger) {
      return trigger.dataset.dbcDesktopMenu === activeDesktopMenu;
    });

    cancelDesktopClose();
    activeDesktopMenu = '';
    if (desktopLayer) desktopLayer.classList.remove('is-open');
    document.body.classList.remove('dbc-desktop-nav-open');
    desktopTriggers.forEach(function (trigger) {
      trigger.classList.remove('is-open');
      trigger.setAttribute('aria-expanded', 'false');
    });
    desktopPanels.forEach(function (panel) {
      panel.classList.remove('is-open');
      panel.setAttribute('aria-hidden', 'true');
    });

    if (wasOpen) {
      document.dispatchEvent(new CustomEvent('dbc:navigation-close', { detail: { mode: 'desktop' } }));
    }

    if (settings.restoreFocus && returnTarget) {
      suppressDesktopFocusOpen = true;
      returnTarget.focus({ preventScroll: true });
      window.requestAnimationFrame(function () {
        suppressDesktopFocusOpen = false;
      });
    }
  }

  function scheduleDesktopClose() {
    cancelDesktopClose();
    desktopCloseTimer = window.setTimeout(function () {
      closeDesktopMenu();
    }, 150);
  }

  if (desktopNav && desktopLayer && desktopTriggers.length && desktopPanels.length) {
    desktopTriggers.forEach(function (trigger, index) {
      trigger.addEventListener('pointerdown', function (event) {
        if (!isDesktopMode() || event.pointerType === 'mouse') return;
        touchActivationState.set(
          trigger,
          activeDesktopMenu === trigger.dataset.dbcDesktopMenu
        );
      });

      trigger.addEventListener('pointerenter', function (event) {
        if (event.pointerType && event.pointerType !== 'mouse') return;
        openDesktopMenu(trigger.dataset.dbcDesktopMenu);
      });

      trigger.addEventListener('focusin', function () {
        if (suppressDesktopFocusOpen) return;
        openDesktopMenu(trigger.dataset.dbcDesktopMenu);
      });

      /* On a wide touch screen, the first tap reveals the menu and the
         second tap follows the section link. This keeps the mega menu
         discoverable without weakening normal mouse or keyboard behavior. */
      trigger.addEventListener('click', function (event) {
        if (!isDesktopMode() || !coarsePointerQuery.matches || !touchActivationState.has(trigger)) return;
        const name = trigger.dataset.dbcDesktopMenu;
        const wasOpenBeforePointer = touchActivationState.get(trigger);
        touchActivationState.delete(trigger);
        if (wasOpenBeforePointer) return;
        event.preventDefault();
        openDesktopMenu(name);
      });

      trigger.addEventListener('keydown', function (event) {
        if (event.key === 'ArrowDown') {
          event.preventDefault();
          openDesktopMenu(trigger.dataset.dbcDesktopMenu, { focusFirst: true });
          return;
        }

        if (event.key === 'Escape') {
          event.preventDefault();
          closeDesktopMenu({ restoreFocus: true });
          return;
        }

        let targetIndex = -1;
        if (event.key === 'ArrowRight') targetIndex = (index + 1) % desktopTriggers.length;
        if (event.key === 'ArrowLeft') targetIndex = (index - 1 + desktopTriggers.length) % desktopTriggers.length;
        if (event.key === 'Home') targetIndex = 0;
        if (event.key === 'End') targetIndex = desktopTriggers.length - 1;
        if (targetIndex < 0) return;

        event.preventDefault();
        desktopTriggers[targetIndex].focus({ preventScroll: true });
      });
    });

    desktopNav.addEventListener('pointerenter', cancelDesktopClose);
    desktopNav.addEventListener('pointerleave', scheduleDesktopClose);
    desktopNav.addEventListener('focusout', function (event) {
      if (desktopNav.contains(event.relatedTarget) || desktopLayer.contains(event.relatedTarget)) return;
      scheduleDesktopClose();
    });

    desktopPanels.forEach(function (panel) {
      panel.addEventListener('pointerenter', cancelDesktopClose);
      panel.addEventListener('pointerleave', scheduleDesktopClose);
      panel.addEventListener('focusin', cancelDesktopClose);
      panel.addEventListener('focusout', function (event) {
        if (panel.contains(event.relatedTarget) || desktopNav.contains(event.relatedTarget)) return;
        scheduleDesktopClose();
      });
      panel.querySelectorAll('a[href]').forEach(function (link) {
        link.addEventListener('click', function () {
          closeDesktopMenu();
        });
      });
    });

    desktopLayer.addEventListener('pointerdown', function (event) {
      if (!isDesktopMode() || !activeDesktopMenu) return;
      if (event.target.closest('[data-dbc-desktop-panel]')) return;
      event.preventDefault();
      event.stopPropagation();
      closeDesktopMenu();
    });

    document.addEventListener('pointerdown', function (event) {
      if (!isDesktopMode() || !activeDesktopMenu) return;
      if (desktopNav.contains(event.target) || desktopLayer.contains(event.target)) return;
      closeDesktopMenu();
    });

    window.addEventListener('scroll', function () {
      if (!isDesktopMode() || !activeDesktopMenu) return;
      closeDesktopMenu();
    }, { passive: true });

    document.addEventListener('keydown', function (event) {
      if (event.key !== 'Escape' || !activeDesktopMenu) return;
      event.preventDefault();
      closeDesktopMenu({ restoreFocus: true });
    });
  }

  const overlay = document.getElementById('dbc-global-navigation');
  const openButton = document.querySelector('[data-dbc-nav-open]');
  const closeButton = overlay ? overlay.querySelector('[data-dbc-nav-close]') : null;
  let closeMobileNavigation = function () {};

  if (overlay && openButton && closeButton) {
    const views = Array.from(overlay.querySelectorAll('[data-dbc-nav-view]'));
    const rootView = overlay.querySelector('[data-dbc-nav-view="root"]');
    const backgroundInertState = new Map();
    let backgroundInertObserver = null;

    function eligibleBackgroundSibling(element) {
      return element instanceof HTMLElement && element !== overlay && element.tagName !== 'SCRIPT';
    }

    function lockBackgroundInteraction() {
      Array.from(document.body.children).filter(eligibleBackgroundSibling).forEach(function (element) {
        if (!backgroundInertState.has(element)) backgroundInertState.set(element, element.inert);
        element.inert = true;
      });
      if (backgroundInertObserver) backgroundInertObserver.disconnect();
      backgroundInertObserver = new MutationObserver(function (records) {
        records.forEach(function (record) {
          record.addedNodes.forEach(function (node) {
            if (!eligibleBackgroundSibling(node)) return;
            if (!backgroundInertState.has(node)) backgroundInertState.set(node, node.inert);
            node.inert = true;
          });
        });
      });
      backgroundInertObserver.observe(document.body, { childList: true });
    }

    function unlockBackgroundInteraction() {
      if (backgroundInertObserver) backgroundInertObserver.disconnect();
      backgroundInertObserver = null;
      backgroundInertState.forEach(function (wasInert, element) {
        if (element.isConnected) element.inert = wasInert;
      });
      backgroundInertState.clear();
    }
    let returnFocus = openButton;
    let closeTimer = 0;

    const focusableSelector = [
      'a[href]',
      'button:not([disabled])',
      'input:not([disabled])',
      'select:not([disabled])',
      'textarea:not([disabled])',
      '[tabindex]:not([tabindex="-1"])'
    ].join(',');

    function getFocusable() {
      return Array.from(overlay.querySelectorAll(focusableSelector)).filter(function (element) {
        return !element.hidden && element.offsetParent !== null && element.getAttribute('aria-hidden') !== 'true';
      });
    }

    function showView(name, focusTarget) {
      views.forEach(function (view) {
        const active = view.dataset.dbcNavView === name;
        view.hidden = !active;
        view.setAttribute('aria-hidden', String(!active));
        if (active) hydrateNavigationImages(view);
      });

      overlay.scrollTop = 0;
      window.requestAnimationFrame(function () {
        const target = focusTarget || overlay.querySelector('[data-dbc-nav-view="' + name + '"] [data-dbc-nav-back]');
        if (target) target.focus({ preventScroll: true });
      });
    }

    function openNavigation() {
      if (!isMobileMode()) return;
      window.clearTimeout(closeTimer);
      closeDesktopMenu();
      returnFocus = document.activeElement || openButton;
      const scrollbarWidth = Math.max(0, window.innerWidth - document.documentElement.clientWidth);
      document.documentElement.style.setProperty('--dbc-scrollbar-compensation', scrollbarWidth + 'px');
      overlay.hidden = false;
      overlay.setAttribute('aria-hidden', 'false');
      openButton.setAttribute('aria-expanded', 'true');
      document.documentElement.classList.add('dbc-nav-locked');
      document.body.classList.add('dbc-nav-locked');
      document.dispatchEvent(new CustomEvent('dbc:navigation-open', { detail: { mode: 'mobile' } }));
      lockBackgroundInteraction();
      showView('root', closeButton);

      window.requestAnimationFrame(function () {
        overlay.classList.add('is-open');
        // Visibility changes on the overlay need one rendered frame before a
        // descendant can reliably receive focus, including reduced-motion UAs.
        window.requestAnimationFrame(function () {
          closeButton.focus({ preventScroll: true });
        });
      });
    }

    closeMobileNavigation = function (options) {
      const settings = options || {};
      const wasOpen = !overlay.hidden && overlay.getAttribute('aria-hidden') === 'false';
      overlay.classList.remove('is-open');
      overlay.setAttribute('aria-hidden', 'true');
      openButton.setAttribute('aria-expanded', 'false');
      document.documentElement.classList.remove('dbc-nav-locked');
      document.body.classList.remove('dbc-nav-locked');
      document.documentElement.style.removeProperty('--dbc-scrollbar-compensation');
      unlockBackgroundInteraction();
      window.clearTimeout(closeTimer);

      closeTimer = window.setTimeout(function () {
        overlay.hidden = true;
        showView('root');
      }, reduceMotionQuery.matches ? 0 : 240);

      if (settings.restoreFocus !== false && returnFocus && typeof returnFocus.focus === 'function') {
        returnFocus.focus({ preventScroll: true });
      }

      if (wasOpen) {
        document.dispatchEvent(new CustomEvent('dbc:navigation-close', { detail: { mode: 'mobile' } }));
      }
    };

    openButton.addEventListener('click', openNavigation);
    closeButton.addEventListener('click', function () { closeMobileNavigation(); });

    overlay.querySelectorAll('[data-dbc-nav-panel]').forEach(function (button) {
      button.addEventListener('click', function () {
        showView(button.dataset.dbcNavPanel);
      });
    });

    overlay.querySelectorAll('[data-dbc-nav-back]').forEach(function (button) {
      button.addEventListener('click', function () {
        const firstRootEntry = rootView ? rootView.querySelector('[data-dbc-nav-panel]') : null;
        showView('root', firstRootEntry);
      });
    });

    overlay.querySelectorAll('a[href]').forEach(function (link) {
      link.addEventListener('click', function () {
        closeMobileNavigation({ restoreFocus: false });
      });
    });

    overlay.addEventListener('keydown', function (event) {
      if (event.key === 'Escape') {
        event.preventDefault();
        closeMobileNavigation();
        return;
      }

      if (event.key !== 'Tab') return;
      const focusable = getFocusable();
      if (!focusable.length) return;
      const first = focusable[0];
      const last = focusable[focusable.length - 1];

      if (event.shiftKey && document.activeElement === first) {
        event.preventDefault();
        last.focus();
      } else if (!event.shiftKey && document.activeElement === last) {
        event.preventDefault();
        first.focus();
      }
    });
  }

  function applyNavigationLanguage() {
    const language = document.documentElement.dataset.lang === 'en' ? 'en' : 'cn';
    document.querySelectorAll([
      '.dbc-desktop-nav [data-nav-cn]',
      '.dbc-desktop-mega-layer [data-nav-cn]',
      '.dbc-nav-overlay [data-nav-cn]',
      '.dbc-nav-trigger [data-nav-cn]',
      'footer.site-footer .footer-directory [data-nav-cn]'
    ].join(',')).forEach(function (element) {
      const value = language === 'en' ? element.dataset.navEn : element.dataset.navCn;
      if (typeof value === 'string') element.textContent = value;
    });

    if (desktopNav) desktopNav.setAttribute('aria-label', language === 'en' ? 'Main navigation' : '主导航');
    if (overlay) overlay.setAttribute('aria-label', language === 'en' ? 'Mobile navigation' : '移动端导航');
    if (closeButton) closeButton.setAttribute('aria-label', language === 'en' ? 'Close navigation' : '关闭导航');
    if (openButton) openButton.setAttribute('aria-label', language === 'en' ? 'Open navigation' : '打开导航');
    const languageButton = document.querySelector('[data-language-toggle]');
    if (languageButton) {
      if (languageButton.hasAttribute('data-language-home-fallback')) {
        languageButton.setAttribute('aria-label', 'Open the English homepage');
        languageButton.setAttribute('title', '进入英文首页');
        languageButton.setAttribute('aria-pressed', 'false');
        return;
      }
      const isEnglish = language === 'en';
      languageButton.setAttribute('aria-label', isEnglish ? 'Switch to Chinese' : 'Switch to English');
      languageButton.setAttribute('title', isEnglish ? 'Switch to Chinese' : 'Switch to English');
      languageButton.setAttribute('aria-pressed', String(isEnglish));
    }
  }

  function handleBreakpointChange() {
    if (isDesktopMode()) {
      syncAdaptiveDirectNavigation();
      if (overlay && !overlay.hidden) closeMobileNavigation({ restoreFocus: false });
      return;
    }
    closeDesktopMenu();
    syncAdaptiveDirectNavigation();
  }

  if (typeof desktopQuery.addEventListener === 'function') {
    desktopQuery.addEventListener('change', handleBreakpointChange);
  } else if (typeof desktopQuery.addListener === 'function') {
    desktopQuery.addListener(handleBreakpointChange);
  }
  if (typeof adaptiveDirectQuery.addEventListener === 'function') {
    adaptiveDirectQuery.addEventListener('change', syncAdaptiveDirectNavigation);
  } else if (typeof adaptiveDirectQuery.addListener === 'function') {
    adaptiveDirectQuery.addListener(syncAdaptiveDirectNavigation);
  }

  const languageObserver = new MutationObserver(applyNavigationLanguage);
  languageObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-lang'] });
  document.addEventListener('dbc:translations-loaded', applyNavigationLanguage);
  applyNavigationLanguage();
  handleBreakpointChange();
})();