@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ─── 核心色彩與字型規範 (基於 brand-spec.md) ────────────────────────── */
    :root {
      --bg:      oklch(15% 0.005 270);   /* 太空鐵灰背景 (True Iron Gray) */
      --surface: oklch(20% 0.005 270);   /* 金屬鐵灰表面 (Steel Gray) */
      --fg:      oklch(94% 0.005 270);   /* 極亮鋼鐵白 (Silver White) */
      --muted:   oklch(62% 0.005 270);   /* 鋼鐵銀灰 (Muted Silver) */
      --border:  transparent;            /* 移除傳統邊框 */
      --accent:  oklch(56% 0.22 25);     /* 和沂紅 (Wafer Red / Hoyi Red) */
      
      /* 衍生變數 */
      --accent-soft: color-mix(in oklch, var(--accent) 15%, transparent);
      --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);
      --bg-darker:   oklch(11% 0.005 270);

      /* 字型系統 */
      --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
      --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-mono:    'Share Tech Mono', ui-monospace, 'JetBrains Mono', monospace;

      /* 響應式字級尺寸 */
      --fs-h1: clamp(38px, 5.5vw, 68px);
      --fs-h2: clamp(28px, 3.5vw, 42px);
      --fs-h3: 20px;
      --fs-lead: 18px;
      --fs-body: 15px;
      --fs-meta: 13px;

      /* 間距規範 */
      --gap-xs: 8px;
      --gap-sm: 12px;
      --gap-md: 20px;
      --gap-lg: 32px;
      --gap-xl: 56px;
      --gap-2xl: 96px;
      --container: 1440px;
      --gutter: 24px;

      /* 圓角規範 */
      --radius: 4px;
      --radius-lg: 6px;
    }

    /* ─── 基礎重設與全域設定 ────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
    body {
      margin: 0;
      background-color: var(--bg);
      background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon points='60,6 114,60 60,114 6,60' fill='rgba(255,255,255,0.003)' stroke='rgba(255,255,255,0.08)' stroke-width='0.75'/%3E%3Cpolygon points='60,32 88,60 60,88 32,60' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='0.5' stroke-dasharray='2 3'/%3E%3Cline x1='57' y1='0' x2='63' y2='0' stroke='rgba(255,255,255,0.12)' stroke-width='0.5'/%3E%3Cline x1='60' y1='0' x2='60' y2='3' stroke='rgba(255,255,255,0.12)' stroke-width='0.5'/%3E%3Cline x1='57' y1='120' x2='63' y2='120' stroke='rgba(255,255,255,0.12)' stroke-width='0.5'/%3E%3Cline x1='60' y1='117' x2='60' y2='120' stroke='rgba(255,255,255,0.12)' stroke-width='0.5'/%3E%3Cline x1='0' y1='57' x2='0' y2='63' stroke='rgba(255,255,255,0.12)' stroke-width='0.5'/%3E%3Cline x1='0' y1='60' x2='3' y2='60' stroke='rgba(255,255,255,0.12)' stroke-width='0.5'/%3E%3Cline x1='120' y1='57' x2='120' y2='63' stroke='rgba(255,255,255,0.12)' stroke-width='0.5'/%3E%3Cline x1='117' y1='60' x2='120' y2='60' stroke='rgba(255,255,255,0.12)' stroke-width='0.5'/%3E%3C/svg%3E"),
        radial-gradient(color-mix(in oklch, var(--border) 16%, transparent) 1px, transparent 1px);
      background-size: 120px 120px, 24px 24px;
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: 1.6;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; height: auto; object-fit: cover; }
    svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
    p { text-wrap: pretty; margin: 0; }
    h1, h2, h3, h4 { text-wrap: balance; margin: 0; font-weight: normal; }

    /* ─── 佈局元件 ──────────────────────────────────────────────────── */
    .container {
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    /* 寬螢幕兩側 CAD 垂直精密定位參考線 */
    @media (min-width: 1488px) {
      body::before, body::after {
        content: '';
        position: fixed;
        top: 0;
        bottom: 0;
        width: 1px;
        z-index: 0;
        pointer-events: none;
      }
      body::before {
        left: calc(50vw - 720px);
        border-left: 1px dashed color-mix(in oklch, var(--muted) 16%, transparent);
      }
      body::after {
        right: calc(50vw - 720px);
        border-left: 1px dashed color-mix(in oklch, var(--muted) 16%, transparent);
      }
    }
    .section {
      padding-block: clamp(56px, 7vw, var(--gap-2xl));
      position: relative;
    }
    main#content > .section:first-of-type {
      padding-top: clamp(24px, 4vw, 40px);
    }
    .section + .section { 
      border-top: 1px dashed var(--border); 
    }
    .section + .section::before {
      content: '+';
      position: absolute;
      top: -7px;
      left: var(--gutter);
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--accent);
      background: var(--bg);
      padding-inline: 4px;
      font-weight: bold;
    }
    .stack { display: flex; flex-direction: column; }
    .stack > * + * { margin-top: var(--gap-md); }
    .row { display: flex; align-items: center; gap: var(--gap-md); }

    
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }

    .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }


    @media (max-width: 920px) {
      .grid-2, .grid-3, .grid-2-1 { grid-template-columns: 1fr; gap: var(--gap-md); }
    }

    /* ─── 字型與層級樣式 ────────────────────────────────────────────── */
    .h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; }
    .h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.015em; }
    .h3, h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: normal; line-height: 1.3; }
    .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 65ch; }
    .eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: var(--gap-xs);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .eyebrow::before {
      content: '■';
      font-size: 8px;
      color: var(--accent);
      display: inline-block;
    }
    .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
    .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

    /* ─── 頂部導覽 (Frosted Glass Topnav) ─────────────────────────── */
    .topnav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: color-mix(in oklch, var(--bg) 85%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
    .topnav .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    .topnav nav { 
      display: flex; 
      gap: var(--gap-lg); 
      align-items: center;
    }
    .topnav nav .nav-item {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .topnav nav .nav-item > a {
      font-size: 14px;
      color: var(--muted);
      font-weight: 500;
      padding: 6px 0;
      position: relative;
      transition: color 0.25s ease;
      display: inline-flex;
      align-items: center;
    }
    .topnav nav .nav-item > a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: var(--accent);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.25s ease;
    }
    .topnav nav .nav-item > a:hover, 
    .topnav nav .nav-item > a.nav-active,
    .topnav nav .nav-item.dropdown:hover > a { 
      color: var(--fg); 
    }
    .topnav nav .nav-item > a:hover::after, 
    .topnav nav .nav-item > a.nav-active::after,
    .topnav nav .nav-item.dropdown:hover > a::after {
      transform: scaleX(1);
      transform-origin: left;
    }
    
    /* 下拉選單本體 */
    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: color-mix(in oklch, var(--surface) 93%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      min-width: 170px;
      padding: 8px 0;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
      z-index: 100;
    }
    /* 滑鼠懸停展開 */
    .topnav nav .nav-item.dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(6px);
    }
    /* 避免滑鼠移動到下拉選單時選單消失 */
    .topnav nav .nav-item.dropdown::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      right: 0;
      height: 10px;
      background: transparent;
    }
    .dropdown-menu a {
      display: block;
      padding: 10px 20px;
      font-size: 13px;
      color: var(--muted) !important;
      text-align: center;
      transition: background-color 0.2s ease, color 0.2s ease;
      white-space: nowrap;
    }
    .dropdown-menu a::after {
      display: none !important; /* 禁用底層連線效果 */
    }
    .dropdown-menu a:hover {
      background-color: var(--accent-soft) !important;
      color: var(--accent) !important;
    }
    
    .btn-mobile-toggle { display: none; }
    @media (max-width: 768px) {
      .topnav nav { display: none; }
      .btn-mobile-toggle { display: block; font-size: 20px; color: var(--fg); }
    }

    /* ─── 行動端選單 ────────────────────────────────────────────────── */
    .mobile-menu {
      position: fixed;
      inset: 60px 0 0 0;
      background: var(--bg);
      z-index: 99;
      padding: var(--gap-lg) var(--gutter);
      display: flex;
      flex-direction: column;
      gap: 24px;
      border-top: 1px solid var(--border);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }
    .mobile-menu.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .mobile-menu a {
      font-family: var(--font-display);
      font-size: 20px;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
      padding-bottom: 12px;
    }
    .mobile-menu a.nav-active {
      color: var(--fg);
      border-bottom-color: var(--accent);
    }

    /* ─── 按鈕樣式 ──────────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border: none !important;
      border-radius: 0 !important;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.005em;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      clip-path: polygon(
        6px 0%,
        calc(100% - 6px) 0%,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0% calc(100% - 6px),
        0% 6px
      );
    }
    .btn:active { transform: translateY(1px); }
    .btn-primary {
      background: var(--accent);
      color: var(--bg-darker);
      border-color: var(--accent);
      font-weight: 600;
    }
    .btn-primary:hover {
      background: color-mix(in oklch, var(--accent) 85%, white);
      border-color: color-mix(in oklch, var(--accent) 85%, white);
      box-shadow: 0 0 12px var(--accent-soft);
    }
    .btn-secondary {
      background: transparent;
      color: var(--fg);
      border-color: var(--border);
    }
    .btn-secondary:hover {
      border-color: var(--fg);
      background: var(--fg-soft);
    }
    .btn-ghost {
      background: transparent;
      color: var(--muted);
      padding: 6px 0;
    }
    .btn-ghost:hover { color: var(--fg); }
    .btn-arrow::after {
      content: '→';
      transition: transform 0.2s ease;
      font-family: system-ui, sans-serif;
    }
    .btn-arrow:hover::after { transform: translateX(4px); }

    /* ─── 卡片與容器面版 ──────────────────────────────────────────────── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
      position: relative;
    }
    .card:hover {
      border-color: color-mix(in oklch, var(--border) 60%, var(--accent));
    }

    /* 準星定位 L 型角線 (Corner Brackets) */
    .card::before, .flow-step::before, .portfolio-item::before, .hub-contact-card::before, .contact-media-card::before, .hub-row-card::before, .gov-node::before,
    .card::after, .flow-step::after, .portfolio-item::after, .hub-contact-card::after, .contact-media-card::after, .hub-row-card::after, .gov-node::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border: 1.5px solid transparent;
      pointer-events: none;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      opacity: 0;
      z-index: 10;
    }
    
    /* 左上角線 */
    .card::before, .flow-step::before, .portfolio-item::before, .hub-contact-card::before, .contact-media-card::before, .hub-row-card::before, .gov-node::before {
      top: -1.5px;
      left: -1.5px;
      border-top-color: var(--accent);
      border-left-color: var(--accent);
      transform: translate(3px, 3px);
    }
    .card::before, .portfolio-item::before, .contact-media-card::before, .hub-row-card::before {
      border-radius: var(--radius-lg) 0 0 0;
    }
    .flow-step::before, .hub-contact-card::before, .gov-node::before {
      border-radius: var(--radius) 0 0 0;
    }
    
    /* 右下角線 */
    .card::after, .flow-step::after, .portfolio-item::after, .hub-contact-card::after, .contact-media-card::after, .hub-row-card::after, .gov-node::after {
      bottom: -1.5px;
      right: -1.5px;
      border-bottom-color: var(--accent);
      border-right-color: var(--accent);
      transform: translate(-3px, -3px);
    }
    .card::after, .portfolio-item::after, .contact-media-card::after, .hub-row-card::after {
      border-radius: 0 0 var(--radius-lg) 0;
    }
    .flow-step::after, .hub-contact-card::after, .gov-node::after {
      border-radius: 0 0 var(--radius) 0;
    }
    
    /* 懸停狀態時，角線就定位並亮起 */
    .card:hover::before, .flow-step:hover::before, .portfolio-item:hover::before, .hub-contact-card:hover::before, .contact-media-card:hover::before, .hub-row-card:hover::before, .gov-node:hover::before,
    .card:hover::after, .flow-step:hover::after, .portfolio-item:hover::after, .hub-contact-card:hover::after, .contact-media-card:hover::after, .hub-row-card:hover::after, .gov-node:hover::after {
      opacity: 1;
      transform: translate(0, 0);
    }



    /* ─── 首頁 (Home) 元件樣式 ────────────────────────────────────────── */
    /* Canvas 背景技術網格 */
    .hero-container {
      position: relative;
      min-height: calc(100vh - 83px);
      display: flex;
      align-items: center;
      overflow: hidden;
      border-bottom: 1px solid var(--border);
    }
    .hero-canvas {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }
    .bg-canvas {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      width: 100vw;
      height: 100vh;
    }
    .bg-image-layer {
      position: fixed;
      inset: 0;
      background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon points='60,6 114,60 60,114 6,60' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.75'/%3E%3Cpolygon points='60,32 88,60 60,88 32,60' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5' stroke-dasharray='2 3'/%3E%3C/svg%3E"),
        url('picture/hero-factory.png');
      background-size: 120px 120px, cover;
      background-position: center, center;
      background-repeat: repeat, no-repeat;
      opacity: 0.45; /* 提高不透明度，清晰保留機台細節 */
      z-index: -3;
      pointer-events: none;
    }
    .laser-scanner {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px; /* 極細線條 */
      background: rgba(255, 0, 0, 0.5); /* 亮度微弱 */
      box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
      z-index: -2; /* 位於背景層之上，內容層之下 */
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 1100px;
      margin-inline: auto;
      text-align: center;
      padding-block: var(--gap-xl);
      transform: translateY(-20px);
    }
    .hero-content h1, .hero-content .hero-title {
      font-size: clamp(15px, 3.8vw, 45px);
      line-height: 1.5;
      font-weight: 500;
      letter-spacing: 0.05em;
      margin-bottom: var(--gap-md);
      white-space: nowrap;
    }
    .hero-title-main {
      display: block;
      transform: translateX(-2em);
      transition: transform 0.3s ease;
      opacity: 0;
      animation: hero-fade-in-up-main 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero-title-sub {
      display: block;
      color: #ffffff;
      margin-top: 20px;
      font-weight: normal;
      letter-spacing: 0.02em;
      white-space: nowrap;
      transform: translateX(2em);
      transition: transform 0.3s ease;
      opacity: 0;
      animation: hero-fade-in-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
    }
    @media (max-width: 920px) {
      .hero-title-main {
        transform: translateX(-0.8em);
      }
      .hero-title-sub {
        transform: translateX(0.8em);
      }
    }
    @media (max-width: 480px) {
      .hero-content {
        padding-inline: 12px;
      }
      .hero-content h1, .hero-content .hero-title {
        font-size: clamp(13px, 3.8vw, 45px);
      }
      .hero-title-main {
        transform: none;
      }
      .hero-title-sub {
        transform: none;
      }
    }
    .hero-content .lead {
      margin-inline: auto;
      margin-bottom: var(--gap-lg);
    }
    .scroll-down-indicator {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--muted);
      opacity: 0.6;
      animation: bounce 2s infinite;
      z-index: 5;
      cursor: pointer;
      transition: color 0.3s, opacity 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .scroll-down-indicator:hover {
      color: var(--accent);
      opacity: 1;
    }
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
      }
      40% {
        transform: translate(-50%, -8px);
      }
      60% {
        transform: translate(-50%, -4px);
      }
    }

    /* 客戶 Logo 雙向輪播 (Marquee) - 淺色溫和底板與幾何直角設計 */
    .marquee-section {
      padding-block: 100px 92px !important;
      overflow: hidden;
      background: #f3f2ee !important;
      color: #111111 !important;
      border-top: 1px solid #e1e0db !important;
      border-bottom: 1px solid #e1e0db !important;
    }
    .marquee-header-container {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: var(--gap-lg);
      align-items: flex-end;
      margin-bottom: 64px;
    }
    .marquee-eyebrow {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: oklch(56% 0.22 25) !important; /* 經典紅 */
      font-weight: 600;
      margin-bottom: 16px;
      display: inline-block;
    }
    .marquee-header-left h2 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4.2vw, 48px);
      line-height: 1.25;
      font-weight: 700;
      color: #111111;
      margin: 0;
      text-wrap: balance;
    }
    .marquee-header-right p {
      font-size: 16px;
      line-height: 1.7;
      color: #555555;
      margin: 0;
      max-width: 44ch;
    }
    .marquee-container {
      display: flex;
      flex-direction: column;
      gap: 20px !important; /* 行間距 */
      padding: 16px 0;
    }
    .marquee-track {
      display: flex;
      width: max-content;
      gap: 20px !important; /* 卡片水平間距 */
    }
    .marquee-track.left {
      animation: marquee-left 35s linear infinite;
    }
    .marquee-track.right {
      animation: marquee-right 35s linear infinite;
    }
    .marquee-track:nth-child(2) {
      margin-top: 0 !important;
    }
    .marquee-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 160px !important;
      height: 160px !important;
      padding: 24px !important;
      background: #ffffff !important;
      border: 1px solid #e1e0db !important;
      border-radius: 12px !important; /* 圓角樣式 */
      margin-left: 0 !important;
      box-sizing: border-box !important;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      flex-shrink: 0;
    }
    .marquee-item img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }
    .marquee-item:hover {
      border-color: var(--accent) !important; /* 紅色邊框 */
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      z-index: 2;
      position: relative;
    }
    /* 懸停時停止輪播動畫 */
    .marquee-container:hover .marquee-track {
      animation-play-state: paused;
    }
    
    @keyframes marquee-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes marquee-right {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    @media (max-width: 768px) {
      .marquee-section {
        padding-block: 64px 56px !important;
      }
      .marquee-header-container {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
        margin-bottom: 40px;
      }
      .marquee-header-right p {
        max-width: 100%;
      }
      .marquee-item {
        padding: 20px 40px !important;
        font-size: 15px !important;
      }
    }

    /* 願景區 */
    .vision-layout {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--gap-2xl);
      align-items: center;
    }
    @media (max-width: 920px) {
      .vision-layout { grid-template-columns: 1fr; gap: var(--gap-lg); }
    }

    /* ─── 關於我們 (About) 元件樣式 ──────────────────────────────────── */
    /* 發展流程圖 */
    .flow-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap-md);
      position: relative;
    }
    .flow-grid::after {
      content: '';
      position: absolute;
      top: 36px;
      left: 10%;
      right: 10%;
      height: 1px;
      border-top: 1px dashed var(--border);
      z-index: 1;
    }
    .flow-step {
      position: relative;
      z-index: 2;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--gap-md);
      text-align: center;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
    }
    .flow-step:hover {
      transform: translateY(-4px);
      border-color: var(--accent);
    }
    .flow-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--bg);
      display: grid;
      place-items: center;
      margin: 0 auto 16px;
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--accent);
      font-weight: 600;
      transition: border-color 0.25s, background-color 0.25s;
    }
    .flow-step:hover .flow-num {
      border-color: var(--accent);
      background: var(--accent-soft);
    }
    .flow-step h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .flow-step p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
    }
    @media (max-width: 920px) {
      .flow-grid { grid-template-columns: 1fr; }
      .flow-grid::after { display: none; }
    }

    /* 戰略據點互動地圖 */
    .map-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-xl);
      align-items: center;
    }
    .map-visual {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 480px;
      margin: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--gap-md);
      background: var(--bg-darker);
    }
    .map-svg-container {
      width: 100%;
      height: 100%;
    }
    /* 地圖點位標記 */
    .hotspot {
      cursor: pointer;
      pointer-events: all;
    }
    .hotspot-circle-outer {
      fill: var(--accent);
      opacity: 0.15;
      transform-origin: center;
      animation: pulse 2s infinite;
    }
    .hotspot-circle-inner {
      fill: var(--accent);
      transition: r 0.25s, fill 0.25s;
    }
    .hotspot:hover .hotspot-circle-inner,
    .hotspot.active .hotspot-circle-inner {
      r: 8px;
      filter: drop-shadow(0 0 4px var(--accent));
    }
    .hotspot-text {
      font-family: var(--font-mono);
      font-size: 11px;
      fill: var(--muted);
      opacity: 0.7;
      transition: fill 0.25s, opacity 0.25s;
      font-weight: 500;
    }
    .hotspot:hover .hotspot-text,
    .hotspot.active .hotspot-text {
      fill: var(--fg);
      opacity: 1;
    }
    @keyframes pulse {
      0% { transform: scale(0.9); opacity: 0.3; }
      50% { transform: scale(1.6); opacity: 0; }
      100% { transform: scale(0.9); opacity: 0.3; }
    }
    
    .map-card-wrapper {
      position: relative;
      min-height: 380px;
    }
    .hub-card {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .hub-card.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .hub-img-box {
      width: 100%;
      height: 200px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg-darker);
    }
    .hub-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* 雙圖並排變體 */
    .hub-img-box--dual {
      display: flex;
      gap: 2px;
    }
    .hub-img-box--dual img {
      width: 50%;
      height: 100%;
      object-fit: cover;
      flex-shrink: 0;
      transition: transform 0.4s ease;
    }
    .hub-img-box--dual:hover img:first-child {
      transform: scale(1.03);
    }
    .hub-img-box--dual:hover img:last-child {
      transform: scale(1.03);
    }
    .hub-content {
      padding-left: 16px;
      padding-right: 16px;
      padding-bottom: 16px;
    }
    .hub-content h3 {
      font-size: 22px;
      margin-bottom: 6px;
    }
    .hub-content p {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 12px;
    }
    .hub-content .address {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--accent);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    @media (max-width: 920px) {
      .map-grid { grid-template-columns: 1fr; }
      .map-card-wrapper { min-height: auto; margin-top: var(--gap-md); }
      .hub-card { position: relative; opacity: 1; visibility: visible; transform: none; display: none; }
      .hub-card.active { display: flex; }
    }

    /* 團隊治理架構 */
    .gov-layout {
      margin-inline: auto;
      max-width: 960px;
      width: 100%;
    }
    .gov-section {
      width: 100%;
    }
    .gov-section-title {
      font-size: 14px;
      font-family: var(--font-mono);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted);
      margin-bottom: 20px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .gov-section-title::before, .gov-section-title::after {
      content: '';
      height: 1px;
      width: 60px;
      background: linear-gradient(90deg, transparent, var(--border));
    }
    .gov-section-title::after {
      background: linear-gradient(90deg, var(--border), transparent);
    }
    .gov-node {
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--radius-lg) !important;
      padding: 16px 24px;
      background: rgba(255, 255, 255, 0.03) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: var(--fg) !important;
      text-align: center;
      flex: 1;
      min-width: 150px;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .gov-node::before {
      content: '';
      position: absolute;
      inset: 0 auto auto 0 !important;
      width: 3px;
      height: 0;
      background: var(--accent) !important;
      transition: height 0.3s ease;
      clip-path: none !important;
      z-index: 1;
    }
    .gov-node::after {
      display: none !important;
    }
    .gov-node:hover {
      transform: translateY(-4px);
      border-color: var(--accent) !important;
      background-color: #f3f2ee !important;
      box-shadow: 0 6px 20px color-mix(in oklch, var(--accent) 12%, transparent) !important;
      filter: drop-shadow(0 0 8px oklch(56% 0.22 25 / 0.45));
    }
    .gov-node:hover::before {
      height: 100% !important;
    }
    .gov-node:hover::after {
      display: none !important;
    }
    /* 確保文字與段落浮在內層背景之上 */
    .gov-node-title,
    .gov-node-name,
    .gov-node p {
      position: relative;
      z-index: 1;
    }
    .gov-node-title {
      font-size: 14px;
      font-family: var(--font-mono);
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
      font-weight: 600;
    }
    .gov-node-name {
      font-weight: 500;
      font-size: 13px;
      color: var(--fg) !important;
    }
    .gov-node p {
      color: var(--muted) !important;
    }
    
    /* 1. 決策核心 */
    .gov-core-container {
      background: color-mix(in oklch, var(--surface) 40%, transparent);
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .gov-core-flow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
    }
    .gov-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent) !important;
      opacity: 1 !important;
      flex-shrink: 0;
    }
    
    /* 2. 治理結構 */
    .gov-structure-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      width: 100%;
    }
    
    /* 3. 三大專責事業部 */
    .gov-dept-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      width: 100%;
    }
    .gov-dept-grid .gov-node {
      padding: 20px 24px;
    }
    
    @media (max-width: 900px) {
      .gov-structure-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    @media (max-width: 768px) {
      .gov-core-flow {
        flex-direction: column;
        gap: 8px;
      }
      .gov-arrow {
        transform: rotate(90deg);
        margin: 4px 0;
      }
      .gov-dept-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 600px) {
      .gov-structure-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ─── 核心服務 (Services) 元件樣式 ────────────────────────────────── */
    /* 雙軌切換區 */
    .services-nav {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: var(--gap-xl);
      border-bottom: 1px solid var(--border);
      padding-bottom: 20px;
    }
    .services-nav-btn {
      font-family: var(--font-display);
      font-size: 22px;
      color: var(--muted);
      padding: 8px 24px;
      border-radius: var(--radius);
      transition: all 0.3s;
      position: relative;
    }
    .services-nav-btn:hover {
      color: var(--fg);
    }
    .services-nav-btn.active {
      color: var(--fg);
      background: var(--surface);
      border: 1px solid var(--border);
    }
    .services-nav-btn.active::after {
      content: '';
      position: absolute;
      bottom: -21px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 2px;
      background: var(--accent);
    }

    .services-track {
      display: none;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .services-track.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    /* 客製化流程 */
    .steps-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: var(--gap-xl);
    }
    .step-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px 20px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      min-height: 170px;
    }
    .step-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 0;
      background: var(--accent);
      transition: height 0.3s ease;
    }
    .step-card::after {
      content: '';
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 8px;
      height: 8px;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      transition: border-color 0.3s ease, width 0.3s ease, height 0.3s ease;
      opacity: 0.6;
    }
    .step-card.active {
      border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    }
    .step-card.active::before {
      height: 35%;
    }
    .step-card:hover {
      transform: translateY(-4px);
      border-color: var(--accent);
      box-shadow: 0 6px 20px color-mix(in oklch, var(--accent) 8%, transparent);
      filter: drop-shadow(0 0 8px oklch(56% 0.22 25 / 0.45));
    }
    .step-card:hover::before {
      height: 100%;
    }
    .step-card:hover::after {
      border-color: var(--accent);
      width: 12px;
      height: 12px;
    }
    .step-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px dashed var(--border);
      padding-bottom: 8px;
      margin-bottom: 2px;
    }
    .step-card .num {
      font-family: var(--font-mono);
      font-size: 18px;
      color: var(--accent);
      font-weight: bold;
      line-height: 1;
      margin: 0;
      display: block;
    }
    .step-card .step-status {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--muted);
      letter-spacing: 0.05em;
    }
    .step-card h3 {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
    }
    .step-card p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
      margin: 0;
    }
    @media (max-width: 920px) {
      .steps-row { grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); }
    }
    @media (max-width: 580px) {
      .steps-row { grid-template-columns: 1fr; gap: var(--gap-md); }
    }

    /* 機器人卡片樣式 */
    .robot-card {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: 100%;
    }
    .robot-img-container {
      width: 100%;
      aspect-ratio: 4 / 3;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg-darker);
      display: grid;
      place-items: center;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      position: relative;
    }
    .robot-img-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .robot-card:hover img {
      transform: scale(1.04);
    }
    .robot-info h4 {
      font-family: var(--font-display);
      font-size: 18px;
      margin-bottom: 4px;
      font-weight: normal;
    }
    .robot-info p {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    /* 規格詳情彈窗 (Modal) */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 15, 17, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--gutter);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s;
    }
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    .modal-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: 680px;
      padding: 36px;
      position: relative;
      transform: scale(0.95);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .modal-overlay.active .modal-container {
      transform: scale(1);
    }
    .modal-close {
      position: absolute;
      top: 24px;
      right: 24px;
      font-size: 24px;
      color: var(--muted);
      cursor: pointer;
      transition: color 0.2s;
    }
    .modal-close:hover { color: var(--fg); }
    .modal-title {
      font-family: var(--font-display);
      font-size: 24px;
      margin-bottom: var(--gap-md);
      border-bottom: 1px solid var(--border);
      padding-bottom: 12px;
    }
    .spec-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: var(--gap-lg);
    }
    .spec-table tr {
      border-bottom: 1px solid var(--border);
    }
    .spec-table td {
      padding: 10px 12px;
      font-size: 14px;
    }
    .spec-table td:first-child {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
      width: 35%;
      text-transform: uppercase;
    }
    .spec-table td:last-child {
      color: var(--fg);
      font-weight: 500;
    }

    /* SLAM Geosun / 感知組件 */
    .brand-logo-row {
      display: flex;
      gap: var(--gap-lg);
      align-items: center;
      margin-bottom: 16px;
    }
    .brand-logo-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 28px;
      background: var(--bg-darker);
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--fg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 150px;
      height: 56px;
    }

    /* ─── 實績案例 (Case Studies) 網格樣式 ─────────────────────────── */
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px 24px; /* 縱向 40px，橫向 24px */
    }
    .portfolio-item {
      border: none !important;
      border-radius: 0;
      padding: 0 !important;
      background: transparent !important;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: none !important;
      transform: none !important;
      filter: none !important;
      position: relative;
    }
    .portfolio-item::before,
    .portfolio-item::after {
      display: none !important;
    }
    .portfolio-item:hover {
      transform: none !important;
      box-shadow: none !important;
      filter: none !important;
      border-color: transparent !important;
    }
    
    .portfolio-img {
      width: 100%;
      aspect-ratio: 3 / 2; /* 統一採用 3:2 長寬比 */
      border-radius: 8px;
      background: var(--bg-darker);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .portfolio-desc {
      text-align: center;
    }
    .portfolio-desc h3 {
      font-size: 16px;
      margin-bottom: 0;
      font-weight: 600;
      color: var(--fg);
      line-height: 1.4;
    }
    
    @media (max-width: 1024px) {
      .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
      }
    }
    @media (max-width: 600px) {
      .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px 16px;
      }
    }

    /* ─── 聯絡我們 (Contact) 元件樣式 ────────────────────────────────── */


    .contact-hubs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap-md);
      margin-top: var(--gap-xl);
    }
    .hub-contact-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--gap-md);
      background: var(--surface);
    }
    .hub-contact-card h4 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .hub-contact-card p {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 12px;
      line-height: 1.4;
    }
    .hub-contact-card .btn-ghost {
      font-size: 12px;
      font-family: var(--font-mono);
      color: var(--accent);
    }
    @media (max-width: 920px) {
      .contact-hubs-grid { grid-template-columns: 1fr; }
    }

    /* ─── 頁尾 (Footer) ──────────────────────────────────────────────── */
    .pagefoot {
      padding-block: 32px 24px;
      background: var(--bg-darker);
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 13px;
    }
    .pagefoot .container.stack {
      gap: 24px !important;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 1.2fr 2.8fr;
      gap: var(--gap-lg);
      margin-bottom: 0;
    }
    .footer-hubs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px var(--gap-lg);
      align-content: center;
    }
    .footer-hub-col h4 {
      color: var(--fg);
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .footer-hub-col p {
      line-height: 1.5;
      font-size: 12px;
      white-space: nowrap;
    }
    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    @media (max-width: 920px) {
      .footer-top { grid-template-columns: 1fr; gap: var(--gap-lg); }
      .footer-hubs { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 540px) {
      .footer-hubs { grid-template-columns: 1fr; }
      .footer-hub-col p { white-space: normal; }
    }

    /* ─── 前瞻項目卡片 (Telemetry Domain Cards) ────────────────────────── */
    .domain-card {
      background: linear-gradient(180deg, var(--surface) 0%, color-mix(in oklch, var(--surface) 60%, transparent) 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .domain-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--accent) 0%, transparent 80%);
      opacity: 0.3;
      transition: opacity 0.3s ease;
    }
    .domain-card:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 12px 30px color-mix(in oklch, var(--accent) 10%, transparent);
    }
    .domain-card:hover::before {
      opacity: 1;
    }
    
    .domain-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px dashed var(--border);
      padding-bottom: 12px;
      margin-bottom: 4px;
    }
    .domain-title-group {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .domain-id {
      letter-spacing: 0.05em;
    }
    .domain-signal {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
    }
    .signal-dot {
      width: 6px;
      height: 6px;
      background-color: var(--accent);
      border-radius: 50%;
      display: inline-block;
    }
    .pulsing {
      animation: signal-pulse 1.5s infinite ease-in-out;
    }
    @keyframes signal-pulse {
      0% { opacity: 0.3; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.2); }
      100% { opacity: 0.3; transform: scale(0.8); }
    }
    
    .domain-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      padding-top: 8px;
    }
    .domain-icon-wrapper {
      width: 56px;
      height: 56px;
      border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
      border-radius: var(--radius-lg);
      background: var(--bg-darker);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 0 10px color-mix(in oklch, var(--accent) 6%, transparent);
      flex-shrink: 0;
    }
    .domain-card:hover .domain-icon-wrapper {
      border-color: var(--accent);
      background: color-mix(in oklch, var(--accent) 8%, var(--bg-darker));
      box-shadow: 0 0 16px color-mix(in oklch, var(--accent) 30%, transparent);
    }
    .domain-bg-svg {
      width: 85%;
      height: 85%;
    }
    .domain-title {
      font-size: 17px;
      font-weight: 600;
      color: var(--fg);
      margin: 0;
      letter-spacing: 0.02em;
    }
    .domain-text {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.6;
      margin: 0;
    }
    
    /* SVG 動態效果 */
    .rotating-icon {
      transform-origin: 50px 50px;
      animation: rotate-slow 15s infinite linear;
    }
    @keyframes rotate-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .blinking-icon {
      animation: blink-soft 2s infinite ease-in-out;
    }
    @keyframes blink-soft {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }
    
    .pulse-icon {
      transform-origin: 50px 50px;
      animation: pulse-soft 3s infinite ease-in-out;
    }
    @keyframes pulse-soft {
      0%, 100% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.08); opacity: 0.8; }
    }
    
    /* ─── 科技感進場動畫與特效 ────────────────────────────────────────── */
    @keyframes hero-fade-in-up {
      from {
        opacity: 0;
        margin-top: 35px;
      }
      to {
        opacity: 1;
        margin-top: 20px;
      }
    }
    @keyframes hero-fade-in-up-main {
      from {
        opacity: 0;
        margin-top: 15px;
      }
      to {
        opacity: 1;
        margin-top: 0;
      }
    }
    
    @keyframes tech-fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .hero-cta {
      opacity: 0;
      animation: tech-fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
    }
    .scroll-down-indicator {
      opacity: 0;
      animation: tech-fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards, bounce 2s infinite 1.5s;
    }
    
    /* 鏡面光掃過效果 (Metallic Shine Sweep) */
    .btn-primary {
      position: relative;
      overflow: hidden;
    }
    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
      );
      transform: skewX(-25deg);
      transition: none;
      pointer-events: none;
    }
    .btn-primary:hover::before {
      left: 100%;
      transition: all 0.75s ease;
    }
    
    /* 全域卡片科技發光與精密微調 */
    .card:hover, .flow-step:hover, .domain-card:hover, .hub-card:hover {
      transform: translateY(-4px);
      filter: drop-shadow(0 0 8px oklch(56% 0.22 25 / 0.45));
      box-shadow: 0 0 22px var(--accent-soft);
      border-color: var(--accent) !important;
    }
    
    /* CRT 科技感掃描線效果 */
    .hero-container::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        transparent 50%,
        color-mix(in oklch, var(--accent) 3%, transparent) 50%
      );
      background-size: 100% 4px;
      z-index: 2;
      pointer-events: none;
      opacity: 0.25;
    }

    /* 毛玻璃防護底板 (Glassmorphic Content Panels) */
    main#content .container:not(.no-glass) {
      background: color-mix(in oklch, var(--bg-darker) 70%, transparent);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.05); /* 極淡邊界 */
      border-radius: 0 !important; /* 幾何切角不使用傳統圓角 */
      padding: var(--gap-lg) var(--gutter);
      margin-bottom: var(--gap-lg);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
      clip-path: polygon(
        12px 0%,
        calc(100% - 12px) 0%,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0% calc(100% - 12px),
        0% 12px
      );
    }

    @media (max-width: 920px) {
      main#content .container:not(.no-glass) {
        padding: var(--gap-md) var(--gap-sm);
        clip-path: polygon(
          8px 0%,
          calc(100% - 8px) 0%,
          100% 8px,
          100% calc(100% - 8px),
          calc(100% - 8px) 100%,
          8px 100%,
          0% calc(100% - 8px),
          0% 8px
        );
      }
    }

    /* 面板與卡片幾何切邊設計 (Clipped Corners for Cards, No Borders) */
    .card, .flow-step, .domain-card, .hub-row-card, .case-card, .feedback-section, .contact-card {
      border: none !important;
      border-radius: 0 !important;
      clip-path: polygon(
        10px 0%,
        calc(100% - 10px) 0%,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0% calc(100% - 10px),
        0% 10px
      );
    }
    .highlight-red {
      color: oklch(56% 0.22 25) !important; /* Wafer red highlight for 和 and 沂 */
    }

    /* 願景區客製化卡片 (Vision Section Card - redesigned editorial layout) */
    .vision-section {
      padding-block: var(--gap-xl) !important;
    }
    .vision-container {
      background: color-mix(in oklch, var(--bg-darker) 60%, transparent) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 16px !important;
      clip-path: none !important;
      padding: 64px 80px !important;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
    }
    .vision-layout-v2 {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    /* 眉標列 */
    .vision-eyebrow-row {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .vision-eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--accent);
      text-transform: uppercase;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .vision-eyebrow-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, rgba(255,255,255,0.15), transparent);
    }

    /* 主標題 */
    .vision-header {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .vision-title {
      font-family: var(--font-display);
      font-weight: 400;
      color: #ffffff;
      line-height: 1.35;
      margin: 0;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    /* 行1: 主迴迴文 */
    .vision-title-line {
      display: block;
    }
    .vision-title-line--main {
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 400;
      color: oklch(80% 0.005 270);
      letter-spacing: 0.01em;
    }
    /* 行2: ASML 參照行 */
    .vision-title-line--ref {
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 400;
      color: oklch(80% 0.005 270);
      letter-spacing: 0.01em;
    }
    /* 行3: 顧客大標題 */
    .vision-title-line--bold {
      font-size: clamp(30px, 3.6vw, 50px);
      font-weight: 700;
      color: #ffffff;
      letter-spacing: -0.01em;
      margin-top: 8px;
    }
    /* ASML 品牌名稱樣式 */
    .vision-asml {
      font-style: normal;
      font-weight: 700;
      color: oklch(56% 0.22 25); /* Wafer red */
      letter-spacing: 0.04em;
    }
    /* 全球自動化與無人科技 文字強調 */
    .vision-title-em {
      color: oklch(56% 0.22 25);
      font-weight: 700;
    }
    /* highlight-red 相容 */
    .vision-title .highlight-red {
      color: oklch(56% 0.22 25) !important;
      font-weight: 700 !important;
    }
    /* 換行師控制 */
    .vision-br { display: none; }

    /* 分隔線 */
    .vision-separator {
      height: 1px;
      background: linear-gradient(to right, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 60%, transparent 100%);
    }

    /* 說明文字區 */
    .vision-body-row {
      display: flex;
      gap: 28px;
      align-items: flex-start;
    }
    .vision-body-accent {
      width: 3px;
      flex-shrink: 0;
      align-self: stretch;
      background: linear-gradient(to bottom, oklch(56% 0.22 25), transparent);
      border-radius: 2px;
    }
    .vision-body-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .vision-desc {
      font-size: clamp(16px, 1.35vw, 19px) !important; /* 放大文字 */
      color: oklch(72% 0.005 270) !important; /* 稍微提亮顏色提升可讀性 */
      line-height: 1.85 !important;
      margin: 0;
      text-align: left;
      max-width: 72ch;
    }
    .vision-desc strong {
      color: oklch(90% 0.005 270);
      font-weight: 600;
    }
    /* CTA 連結 - 圓框按鈕型式 */
    .vision-cta-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 15px; /* 放大文字 */
      font-weight: 600;
      color: var(--accent) !important; /* 品牌特徵色和沂紅文字 */
      background: transparent;
      border: 1px solid var(--accent) !important; /* 品牌紅細邊框 */
      padding: 10px 28px;
      border-radius: 999px !important; /* 膠囊形/圓框按鈕 */
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      width: fit-content;
      margin-top: 8px;
      cursor: pointer;
    }
    .vision-cta-link:hover {
      background: var(--accent) !important; /* 懸停時背景變為品牌紅 */
      color: #ffffff !important; /* 懸停時文字變為白色 */
      box-shadow: 0 4px 12px rgba(204, 16, 32, 0.2);
    }
    .vision-cta-arrow {
      display: inline-block;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .vision-cta-link:hover .vision-cta-arrow {
      transform: translateX(4px);
    }

    /* 數據統計格（重新設計的名片佈局） */
    .vision-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      background: transparent;
      border: none !important;
      border-radius: 0;
      overflow: visible;
      margin-top: 16px;
    }
    .vision-stat-card {
      position: relative;
      padding: 36px 28px !important;
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: #f2f3ed !important; /* 以 #f2f3ed 為底色 */
      border: 1px solid rgba(0, 0, 0, 0.03) !important;
      border-radius: 12px !important;
      text-align: left;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                  box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                  border-color 0.4s ease !important;
    }
    
    /* 懸停效果的頂部裝飾紅條 */
    .vision-stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--accent); /* 和沂紅 */
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    /* 滑鼠懸停效果 */
    .vision-stat-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16);
      border-color: rgba(255, 255, 255, 0.1) !important;
      background: #f2f3ed !important; /* 保持底色 */
    }
    .vision-stat-card:hover::before {
      transform: scaleX(1);
    }
    
    /* 名片內容排版 */
    .vision-stat-card .stat-card-label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--accent); /* 紅色標籤 */
      text-transform: uppercase;
      font-weight: 600;
    }
    .vision-stat-card h3 {
      font-family: var(--font-body);
      font-size: clamp(20px, 2.2vw, 24px) !important;
      font-weight: 700 !important;
      color: #111111 !important; /* 淺色背景使用深色文字 */
      margin: 0;
    }
    .vision-stat-card p {
      font-size: 13.5px !important;
      color: #4c4c4c !important; /* 深灰色內文 */
      line-height: 1.65 !important;
      margin: 0;
    }
    
    @media (max-width: 1024px) {
      .vision-stats-grid {
        gap: 16px;
      }
      .vision-stat-card {
        padding: 28px 22px !important;
      }
    }
    
    @media (max-width: 920px) {
      .vision-container {
        padding: 48px 32px !important;
      }
      .vision-layout-v2 {
        gap: 32px;
      }
      .vision-title-line--bold {
        font-size: clamp(28px, 5vw, 40px);
      }
      .vision-br { display: inline; }
      .vision-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .vision-stat-card {
        border-right: none !important;
        border-bottom: none !important;
      }
    }
    
    @media (max-width: 560px) {
      .vision-container {
        padding: 32px 20px !important;
      }
      .vision-layout-v2 {
        gap: 24px;
      }
      .vision-body-row {
        gap: 16px;
      }
      .vision-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .vision-stat-card {
        border-right: none !important;
        border-bottom: none !important;
      }
    }

    /* 整個橫板淺色樣式 (用於四大戰略據點等，使其與首頁客戶輪播牆同風格) */
    .light-theme-section {
      background: #f3f2ee !important; /* 淺色溫和底色 */
      color: #111111 !important; /* 深色文字 */
      border-top: 1px solid #e1e0db !important; /* 頂部淺色細邊框 */
      border-bottom: 1px solid #e1e0db !important; /* 底部淺色細邊框 */
      padding-block: 88px !important;
    }
    /* 覆蓋 container 在 Section 內部的樣式，去除底色、邊框與切角 */
    .light-theme-section .container.no-glass {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      clip-path: none !important;
      padding: 0 var(--gutter) !important;
    }
    .light-theme-section h2,
    .light-theme-section h3 {
      color: #111111 !important;
    }
    .light-theme-section p,
    .light-theme-section .lead {
      color: #555555 !important;
    }
    .light-theme-section .address {
      color: oklch(56% 0.22 25) !important; /* 經典紅，在淺色背景上更具識別性 */
    }
    .light-theme-section .hub-img-box {
      border: 1px solid #e1e0db !important;
    }
    .light-theme-section .map-visual {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    /* 關於頁面首屏 Section 填滿視窗，防止下方的白色橫板在最上方時外露 */
    #about-intro {
      min-height: calc(100vh - 76px); /* 扣除頂部 nav 大致高度 */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .about-intro-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 40px;
      align-items: center;
    }
    @media (max-width: 900px) {
      .about-intro-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
      }
    }

    /* ==========================================================================
       團隊治理架構 v2 - 附圖極簡暗色風格 (Governance v2 - Clean Dark Style)
       ========================================================================== */

    /* ==========================================
   團隊治理架構 v2 (附圖極簡暗色風格)
   ========================================== */

    /* 🔄 還原指令：Copy-Item -Path "global.css.original" -Destination "global.css" -Force */

    /* Section 背景 */
    #about-gov {
      background: #f3f2ee !important;
      background-image: none !important;
      border-top: 1px solid #e1e0db !important;
      border-bottom: 1px solid #e1e0db !important;
      padding: 100px 0 92px 0 !important;
      position: relative !important;
      overflow: hidden !important;
    }
    #about-gov .gov-section-title {
      color: #111111 !important;
    }
    #about-gov .gov-line-label {
      background: #f3f2ee !important;
      color: #111111 !important;
    }
    #about-gov .gov-core-container {
      background: transparent !important;
      border: 1px dashed rgba(204, 16, 32, 0.25) !important;
    }
    #about-gov .gov-neon-card {
      background: transparent !important;
      border: 1px solid rgba(204, 16, 32, 0.3) !important;
    }
    #about-gov .gov-neon-card:hover {
      background: rgba(255, 255, 255, 0.6) !important;
      border-color: rgba(204, 16, 32, 0.8) !important;
      box-shadow: 0 4px 20px rgba(204, 16, 32, 0.1) !important;
    }
    #about-gov .gov-neon-card .gov-node-name {
      color: #222222 !important;
    }
    #about-gov .gov-neon-card p {
      color: #555555 !important;
    }
    #about-gov .gov-neon-card .tech-icon-small {
      color: rgba(204, 16, 32, 0.8) !important;
    }
    #about-gov .gov-main-title {
      color: #111111 !important;
    }
    #about-gov .gov-neon-card .gov-node-title {
      color: #111111 !important;
    }
    #about-gov .gov-network-bg {
      display: none !important;
    }
    #about-gov .gov-connector-lines {
      display: none !important;
    }

    /* 主標題 */
    .gov-main-title {
      font-size: 38px !important;
      font-family: var(--font-body) !important;
      color: #cc1020 !important;
      text-shadow: none !important;
      font-weight: 600 !important;
      letter-spacing: 0.03em !important;
      margin: 0 !important;
      text-align: center !important;
    }

    /* 層級小標籤 */
    .gov-section-title {
      font-size: 18px !important;
      color: #f0f0f0 !important;
      text-align: center !important;
      letter-spacing: 0.12em !important;
      margin-bottom: 20px !important;
      font-weight: 600 !important;
    }

    /* Horizontal line connector */
    .gov-line-horizontal {
      position: relative !important;
      width: 80% !important;
      margin: 0 auto 32px auto !important;
      height: 1px !important;
      background: rgba(204, 16, 32, 0.25) !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
    .gov-line-label {
      background: #0c0c0c !important;
      padding: 0 16px !important;
      color: #f0f0f0 !important;
      font-size: 18px !important;
      font-weight: 600 !important;
      letter-spacing: 0.12em !important;
      position: relative !important;
      z-index: 2 !important;
    }

    /* ── 通用卡片樣式 ── */
    .gov-neon-card {
      background: #181818 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: 1px solid rgba(180, 15, 25, 0.3) !important;
      box-shadow: none !important;
      border-radius: 8px !important;
      position: relative !important;
      overflow: hidden !important;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease !important;
      padding: 22px 20px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
      z-index: 1 !important;
    }

    /* 右下角裝飾 chevron */
    .gov-neon-card::before {
      display: none !important;
    }
    .gov-neon-card::after {
      display: none !important;
    }

    /* 懸停 */
    .gov-neon-card:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(204, 16, 32, 0.75) !important;
      box-shadow: 0 4px 20px rgba(180, 10, 20, 0.18) !important;
      background: #1e1e1e !important;
    }

    /* 卡片內文字 */
    .gov-neon-card .gov-node-title {
      color: #cc1020 !important;
      text-shadow: none !important;
      font-size: 22px !important;
      font-weight: 700 !important;
      font-family: var(--font-body) !important;
      letter-spacing: 0.02em !important;
    }
    .gov-neon-card .gov-node-name {
      display: none !important;
    }
    .gov-neon-card p {
      color: #888 !important;
      font-size: 11px !important;
      margin-top: 8px !important;
      line-height: 1.6 !important;
      font-weight: 300 !important;
    }

    /* 美化並顯示 SVG 圖標 */
    .gov-neon-card .tech-icon-corner {
      display: none !important;
    }
    .gov-neon-card .tech-icon-small {
      display: block !important;
      position: absolute !important;
      top: 12px !important;
      right: 12px !important;
      width: 30px !important;
      height: 30px !important;
      color: rgba(255, 255, 255, 0.85) !important;
      stroke-width: 1.5 !important;
    }
    /* 針對 Sparkle 圖標微調 */
    .gov-neon-card .sparkle-icon {
      top: 50% !important;
      right: 24px !important;
      transform: translateY(-50%) !important;
      width: 36px !important;
      height: 36px !important;
      color: rgba(255,255,255,0.06) !important; /* Extremely subtle watermark */
    }

    /* Level 1 決策核心外框 */
    .gov-core-container {
      background: rgba(255,255,255,0.02) !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
      border-radius: 10px !important;
      padding: 28px 32px !important;
      box-shadow: none !important;
    }

    .gov-core-flow {
      display: flex !important;
      align-items: center !important;
      gap: 16px !important;
      justify-content: center !important;
    }
    .gov-core-flow .gov-node {
      flex: 1 !important;
    }

    /* Level 1 箭頭 */
    .gov-arrow {
      flex-shrink: 0 !important;
      color: #cc1020 !important;
      font-size: 32px !important;
      filter: none !important;
      opacity: 1 !important;
      line-height: 1 !important;
    }
    .gov-arrow svg {
      display: none !important;
    }
    .gov-arrow::after {
      content: '→' !important;
      font-size: 32px !important;
      color: #cc1020 !important;
    }

    /* Level 2 治理結構網格 */
    .gov-structure-grid {
      display: grid !important;
      grid-template-columns: repeat(5, 1fr) !important;
      gap: 16px !important;
      position: relative !important;
    }

    /* Level 2 vertical branches connecting to horizontal line */
    @media (min-width: 901px) {
      .gov-structure-section {
        position: relative !important;
        padding-top: 24px !important;
      }
      /* Vertical line from Level 1 bottom to Level 2 horizontal line */
      .gov-structure-section::before {
        content: '' !important;
        position: absolute !important;
        top: -36px !important;
        left: 50% !important;
        width: 2px !important;
        height: 36px !important;
        background: rgba(204, 16, 32, 0.25) !important;
        z-index: 0 !important;
      }
      .gov-structure-grid .gov-node::before {
        content: '' !important;
        position: absolute !important;
        top: -32px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 1px !important;
        height: 32px !important;
        background: rgba(204, 16, 32, 0.25) !important;
        z-index: 0 !important;
      }
    }

    /* Level 3 事業部網格 */
    .gov-dept-grid {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 20px !important;
    }
    .gov-dept-grid .gov-neon-card {
      padding: 28px 24px !important;
    }

    /* 執行長 CEO 卡片 – 漸變邊框 */
    .gov-neon-card.gradient-border {
      border: 1px solid transparent !important;
      background: linear-gradient(#181818, #181818) padding-box,
                  linear-gradient(135deg, #0072ff 0%, #cc1020 100%) border-box !important;
      box-shadow: none !important;
    }
    .gov-neon-card.gradient-border:hover {
      border-color: transparent !important;
      background: linear-gradient(#1e1e1e, #1e1e1e) padding-box,
                  linear-gradient(135deg, #0084ff 0%, #ff1a30 100%) border-box !important;
      box-shadow: 0 4px 20px rgba(180, 10, 20, 0.18) !important;
    }

    /* 響應式 */
    @media (max-width: 900px) {
      .gov-structure-grid {
        grid-template-columns: repeat(3, 1fr) !important;
      }
      .gov-dept-grid {
        grid-template-columns: 1fr !important;
      }
      .gov-core-flow {
        flex-direction: column !important;
      }
      .gov-arrow {
        transform: rotate(90deg) !important;
        margin: 8px 0 !important;
      }
      .gov-line-horizontal {
        width: 100% !important;
      }
    }
    @media (max-width: 600px) {
      .gov-structure-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    /* ================= 核心整合能力四階段 流程箭頭樣式 ================= */
    .flow-process-grid {
      position: relative;
    }

    .flow-process-card {
      position: relative;
      overflow: visible !important; /* 允許箭頭超出卡片邊界 */
      text-align: center !important;
      justify-content: center !important;
      align-items: center !important;
    }

    /* 流程箭頭 */
    .flow-process-card .flow-arrow {
      position: absolute;
      z-index: 10;
      width: 32px;
      height: 32px;
      background: var(--accent); /* 和沂紅 */
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(204, 16, 32, 0.3);
      border: 3px solid #f2f3ed; /* 與卡片底色一致 */
      transition: transform 0.3s ease, background-color 0.3s ease;
    }

    /* 箭頭圖標 */
    .flow-process-card .flow-arrow::before {
      content: '→';
      font-family: system-ui, -apple-system, sans-serif;
      font-weight: bold;
      font-size: 16px;
      line-height: 1;
    }

    /* 懸停效果 */
    .flow-process-card:hover .flow-arrow {
      background: #e61226;
    }

    /* --- 響應式箭頭定位 --- */

    /* 電腦版 (4 欄) */
    @media (min-width: 921px) {
      .flow-process-card .flow-arrow {
        right: -16px;
        top: 50%;
        transform: translateY(-50%);
      }
      .flow-process-card:hover .flow-arrow {
        transform: translateY(-50%) scale(1.1) translateX(4px);
      }
    }

    /* 平板版 (2 欄) */
    @media (max-width: 920px) and (min-width: 561px) {
      /* 第一個卡片：指向右邊的卡片 2 */
      .flow-process-grid .flow-process-card:nth-child(1) .flow-arrow {
        right: -16px;
        top: 50%;
        transform: translateY(-50%);
      }
      .flow-process-grid .flow-process-card:nth-child(1) .flow-arrow::before {
        content: '→';
      }
      .flow-process-grid .flow-process-card:nth-child(1):hover .flow-arrow {
        transform: translateY(-50%) scale(1.1) translateX(4px);
      }
      
      /* 第二個卡片：指向下方的卡片 3 */
      .flow-process-grid .flow-process-card:nth-child(2) .flow-arrow {
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
      }
      .flow-process-grid .flow-process-card:nth-child(2) .flow-arrow::before {
        content: '↓';
      }
      .flow-process-grid .flow-process-card:nth-child(2):hover .flow-arrow {
        transform: translateX(-50%) scale(1.1) translateY(4px);
      }
      
      /* 第三個卡片：指向右邊的卡片 4 */
      .flow-process-grid .flow-process-card:nth-child(3) .flow-arrow {
        right: -16px;
        top: 50%;
        transform: translateY(-50%);
      }
      .flow-process-grid .flow-process-card:nth-child(3) .flow-arrow::before {
        content: '→';
      }
      .flow-process-grid .flow-process-card:nth-child(3):hover .flow-arrow {
        transform: translateY(-50%) scale(1.1) translateX(4px);
      }
    }

    /* 手機版 (1 欄) */
    @media (max-width: 560px) {
      .flow-process-card .flow-arrow {
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
      }
      .flow-process-card .flow-arrow::before {
        content: '↓';
      }
      .flow-process-card:hover .flow-arrow {
        transform: translateX(-50%) scale(1.1) translateY(4px);
      }
    }

    /* ==========================================================================
       團隊治理架構 v3 (左右雙欄式現代風格)
       ========================================================================== */

    /* 雙欄主版面 */
    .gov-v3-layout {
      display: grid !important;
      grid-template-columns: 1fr 1.8fr !important;
      gap: 32px !important;
      align-items: stretch !important;
      width: 100% !important;
      position: relative !important;
      z-index: 2 !important;
    }

    /* 左側決策核心面板 */
    .gov-v3-left-panel {
      display: flex !important;
      flex-direction: column !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      box-shadow: none !important;
      height: 100% !important;
    }

    /* 右側面板 */
    .gov-v3-right-panel {
      display: flex !important;
      flex-direction: column !important;
      gap: 32px !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* 子區塊標頭 */
    .gov-v3-column-header {
      position: relative !important;
      width: 100% !important;
      margin: 0 auto 28px auto !important;
      height: 1px !important;
      background: rgba(204, 16, 32, 0.2) !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }

    .gov-v3-column-title {
      background: #f3f2ee !important;
      padding: 0 16px !important;
      color: #111111 !important;
      font-size: 22px !important; /* 子標題字體放大 */
      font-weight: 700 !important;
      letter-spacing: 0.05em !important;
      position: relative !important;
      z-index: 2 !important;
      text-transform: uppercase !important;
    }

    /* 決策核心垂直樹狀結構 */
    .gov-v3-core-tree {
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      flex: 1 !important;
      align-items: center !important;
      position: relative !important;
      width: 100% !important;
    }

    .gov-v3-core-tree::before {
      content: '' !important;
      position: absolute !important;
      top: 45px !important; /* 起始於第一個卡片中心 */
      bottom: 45px !important; /* 終止於最後一個卡片中心 */
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 2px !important;
      background: rgba(204, 16, 32, 0.25) !important;
      z-index: 1 !important;
    }

    /* 治理結構 2D 連線 wrapper */
    .gov-v3-structure-wrapper {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      width: 100% !important;
    }

    .gov-v3-structure-row {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 24px !important;
      position: relative !important;
      z-index: 2 !important;
    }

    .gov-v3-row-2-connect {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 24px !important;
      position: relative !important;
      z-index: 2 !important;
    }

    /* 橫向與縱向靜態 CSS 連線系統 */
    .gov-v3-connector-line-wrapper {
      position: relative !important;
      height: 40px !important;
      width: 100% !important;
      z-index: 1 !important;
    }

    @media (min-width: 992px) {
      .gov-v3-horizontal-bar {
        position: absolute !important;
        top: 20px !important;
        left: 16.66% !important;
        right: 16.66% !important;
        height: 1px !important;
        background: rgba(204, 16, 32, 0.25) !important;
      }

      .gov-v3-vertical-stub {
        position: absolute !important;
        top: 0 !important;
        width: 1px !important;
        height: 20px !important;
        background: rgba(204, 16, 32, 0.25) !important;
      }

      .stub-1 { left: 16.66% !important; }
      .stub-2 { left: 50% !important; }
      .stub-3 { left: 83.33% !important; }

      .gov-v3-vertical-stub-down {
        position: absolute !important;
        top: 20px !important;
        bottom: 0 !important;
        left: 50% !important;
        width: 1px !important;
        background: rgba(204, 16, 32, 0.25) !important;
      }

      /* 執行長與公關的橫向連線 (從第 2 欄中心到第 3 欄中心) */
      .gov-v3-row-2-connect {
        position: relative !important;
      }
      .gov-v3-row-2-connect::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: 16.66% !important;
        height: 1px !important;
        background: rgba(204, 16, 32, 0.25) !important;
        z-index: 1 !important;
      }
    }

    /* 三大事業部橫排網格 */
    .gov-v3-dept-grid {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 20px !important;
      width: 100% !important;
    }

    /* V3 通用卡片設計 */
    .gov-v3-card {
      background: #f3f2ee !important; /* 配合背景以遮擋後方的連線 */
      border: 1px solid rgba(204, 16, 32, 0.2) !important;
      border-radius: 8px !important;
      padding: 24px 16px !important;
      text-align: center !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.3s ease,
                  background-color 0.3s ease,
                  box-shadow 0.3s ease !important;
      z-index: 2 !important;
      width: 100% !important;
      min-height: 90px !important;
    }

    /* 懸停動態效果 */
    .gov-v3-card:hover {
      transform: translateY(-4px) !important;
      border-color: rgba(204, 16, 32, 0.85) !important;
      background-color: rgba(255, 255, 255, 0.8) !important;
      box-shadow: 0 8px 24px rgba(204, 16, 32, 0.1) !important;
    }

    /* 卡片內容樣式 */
    .gov-v3-card-icon {
      width: 26px !important;
      height: 26px !important;
      color: rgba(204, 16, 32, 0.85) !important;
      margin-bottom: 10px !important;
      stroke-width: 1.5 !important;
      transition: color 0.3s ease !important;
      flex-shrink: 0 !important;
    }

    .gov-v3-card:hover .gov-v3-card-icon {
      color: rgba(204, 16, 32, 1) !important;
    }

    .gov-v3-card-title {
      color: #111111 !important;
      font-size: 22px !important; /* 職位字體放大 */
      font-weight: 700 !important;
      margin-bottom: 0 !important;
      transition: color 0.3s ease !important;
      line-height: 1.3 !important;
    }

    .gov-v3-card-desc {
      display: none !important; /* 全面取消副標題 */
    }

    /* 特殊強調卡片 (如執行長) */
    .gov-v3-card-highlight {
      border: 1px solid rgba(204, 16, 32, 0.4) !important;
    }
    .gov-v3-card-highlight:hover {
      border-color: rgba(204, 16, 32, 1) !important;
      box-shadow: 0 8px 24px rgba(204, 16, 32, 0.15) !important;
    }

    /* 響應式佈局微調 */
    @media (max-width: 991px) {
      .gov-v3-layout {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
      }
      .gov-v3-structure-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      .gov-v3-row-2-connect {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 16px !important;
        gap: 16px !important;
      }
      .gov-v3-connector-line-wrapper {
        display: none !important;
      }
      .gov-v3-row-2-connect::before {
        display: none !important;
      }
      .gov-v3-dept-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      .gov-v3-left-panel {
        padding: 0 !important;
        height: auto !important;
      }
      .gov-v3-core-tree {
        justify-content: flex-start !important;
        gap: 16px !important;
        height: auto !important;
        flex: none !important;
      }
      .gov-v3-core-tree::before {
        display: none !important;
      }
    }