:root {
  /* ── Anthropic 官方色板 (Anthropic Swatches) ── */
  --swatch-oat: #E3DACC;
  /* 招牌燕麥暖紙色 */
  --swatch-ivory-light: #FAF9F5;
  /* 暖象牙白 (紙白) */
  --swatch-ivory-medium: #F0EEE6;
  /* 象牙米灰 */
  /* 象牙深灰 */
  /* 馬尼拉米黃 */
  /* 牛皮紙黃 */
  --swatch-white: #FFFFFF;

  --swatch-slate-dark: #15161A;
  /* 深石板黑（主按鈕與文字核心） */
  /* 石板中灰（主按鈕 Hover） */
  --swatch-slate-light: #4C4B47;
  /* 石板淺灰（次要內文） */

  --swatch-cloud-light: #D1CFC5;
  /* 淺雲灰（邊框） */
  /* 雲灰（弱化標籤） */
  --swatch-cloud-dark: #87867F;
  /* 深雲灰 */

  --swatch-brand-green: #33CC33;
  /* 品牌識別主色（按鈕 hover、badge、互動強調），原本全站 32 處寫死 hex，統一收進色板 */

  /* ── 背景與表面色彩 (Surfaces & Backgrounds) ── */
  --bg-main: var(--swatch-ivory-light);
  /* 全站底色：暖象牙白 (Ivory Light var(--swatch-ivory-light)) */
  --bg-card: var(--swatch-white);
  /* 淺色卡片：純白 */
  --bg-white: var(--swatch-white);
  /* 純白表面 */

  /* ── 文字顏色 (Typography) ── */
  --text-primary: var(--swatch-slate-dark);
  /* 淺色底主文字 (var(--swatch-slate-dark)) */
  --text-secondary: var(--swatch-slate-light);
  /* 淺色底次要文字 (var(--swatch-slate-light)) */
  --text-muted: var(--swatch-cloud-dark);
  /* 淺色底輔助文字 (var(--swatch-cloud-dark)) */

  --text-inverse-primary: var(--swatch-ivory-light);
  /* 深色底主文字 (var(--swatch-ivory-light)) */
  --text-inverse-secondary: rgba(250, 249, 245, 0.75);
  /* 深色底次要文字 */

  /* 淺綠底小字（如比較表格的推薦徽章）用的深綠文字色，
     品牌綠 var(--swatch-brand-green) 直接當文字色對比不足，統一用這個加深版本 */
  --text-success: #1F7A1F;

  /* 深色底輔助文字的統一透明度分級，取代過去散落各處、數值略有差異的
     rgba(255,255,255, 0.4～0.82) 寫法，收斂成三層即可涵蓋現有視覺層級 */
  --text-inverse-muted: rgba(250, 249, 245, 0.55);
  --text-inverse-faint: rgba(250, 249, 245, 0.4);

  /* ── 邊框與分隔線 (Borders & Dividers) ── */
  --border-light-subtle: var(--swatch-ivory-medium);

  /* ── 狀態色 (State Colors) — 表單驗證／提示訊息用。成功沿用品牌綠；
     錯誤色新增一個偏暖磚紅，貼合 Oat／Slate 暖色調色盤，不用常見的冷色系紅 ── */
  --state-success: var(--swatch-brand-green);
  --state-success-bg: rgba(51, 204, 51, 0.08);
  --state-error: #B3402F;
  --state-error-bg: rgba(179, 64, 47, 0.08);

  /* ── 字型家族 (Font Stacks) ── */
  --font-sans: 'Montserrat', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Anta 是純英文/數字的展示字型，沒有中文字符，原本後面接的是
     monospace/sans-serif 通用字族，瀏覽器找不到中文字時會退回
     「系統預設」中文字型（如 Mac 的蘋方、Windows 的微軟正黑體），
     跟全站其他地方指定的 Noto Sans TC 不是同一套，混排數字+中文的
     地方（例如「42 件」「128 萬」）中文字會明顯跟旁邊文字不同款。
     在 monospace/sans-serif 之前先補上 Noto Sans TC，中文字就會
     統一走這套字型，英文數字仍然優先吃 Anta，不受影響 */
  --font-display: 'Anta', 'Noto Sans TC', monospace, sans-serif;
  --font-mono: 'Anta', 'Noto Sans TC', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── 字級規範 (Type Scale) — 收斂自 47 種客製數值，盡量對齊 Tailwind 刻度 ── */
  --text-mockup-2xs: 10px;   /* 卡片內裝飾用假 UI 文字，最小（原 8px，1920 大螢幕看太小，對齊原本的 xs） */
  --text-mockup-xs: 12px;   /* 卡片內裝飾用假 UI 文字／小徽章（原 10px，對齊 Tailwind text-xs） */
  --text-xs: 12px;          /* = Tailwind text-xs */
  --text-sm: 14px;          /* = Tailwind text-sm */
  --text-base: 16px;        /* = Tailwind text-base */
  --text-md: 18px;          /* = Tailwind text-lg */
  --text-lg: 20px;          /* = Tailwind text-xl */
  --text-xl: 24px;          /* = Tailwind text-2xl */
  --text-2xl: 30px;         /* = Tailwind text-3xl */
  --text-3xl: 36px;         /* = Tailwind text-4xl（原本此 token 誤標為 48px、比 4xl 還大，已與下方對調修正命名順序） */

  /* 語意化別名：標題底下的導讀／簡述段落，比內文(--text-base)大一階，統一全站「標題 + 簡述」區塊的字級 */
  --text-lead: var(--text-md); /* 18px */

  /* ── 圓角規範 (Border Radii) ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-card: 24px;
  --radius-xl: 32px;
  --radius-rounded: 6px;
  --radius-btn: 12px;
  --radius-full: 9999px;
  /* 按鈕專用圓角，= Tailwind rounded-xl，是 --radius-rounded 的兩倍 */

  /* ── 陰影規範 (Elevation & Shadows) ── */
  --shadow-1: 0 4px 12px rgba(21, 22, 26, 0.04);
  --shadow-2: 0 8px 24px rgba(21, 22, 26, 0.07);
  --shadow-3: 0 18px 50px rgba(21, 22, 26, 0.10);

  /* ── 動態與過渡 ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-med: 400ms;
  --duration-slow: 700ms;

  /* ── 層級規範 (Z-Index) — 只收「跨元件、系統層級」的堆疊值，
     各元件內部相對前後關係（如 -2/-1/0/1/2/5/10/20）維持區域性寫死數字，
     刻意不納入 token，避免造成不相關元件之間有虛假的層級關聯 ── */
  --z-header: 100;
  --z-header-toggle: 101;
  --z-nav-menu: 99;
  --z-overlay-top: 9999;

  /* ── 間距規範 (Spacing) — 4px 為基準網格，依全站 padding/margin/gap 實際使用頻率
     整理出的正式 token；未列出的特殊數值（如 0.375rem 圖示間距）維持個別元件手動微調 ── */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs: 0.75rem;    /* 12px */
  --space-sm: 1rem;       /* 16px */
  --space-md: 1.25rem;    /* 20px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 1.75rem;    /* 28px */
  --space-2xl: 2rem;      /* 32px */
  --space-3xl: 2.25rem;   /* 36px */
  --space-4xl: 2.5rem;    /* 40px */
  --space-5xl: 3rem;      /* 48px */
  --space-6xl: 3.5rem;    /* 56px */
  --space-7xl: 4rem;      /* 64px */
  --space-8xl: 4.5rem;    /* 72px */
  --space-9xl: 6rem;      /* 96px */
  --space-10xl: 8rem;     /* 128px */

  /* ── Mockup Dashboard 專用中性灰（刻意跟官網暖燕麥色系區隔，讓假儀表板視覺跳出）── */
  --mockup-gray-bg: #F6F6F7;
  --mockup-gray-hover: #ECECEF;

  /* ── Mockup 折線圖專用色（套用 Tailwind blue-500 / green-500，跟品牌色區隔）── */
  --mockup-chart-blue: #3B82F6;
  --mockup-chart-green: #22C55E;
  --mockup-green-600: #16A34A;
  --mockup-green-100: #DCFCE7;
  --mockup-red: #EF4444;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-main);
}

body {
  font-family: var(--font-sans);
  background: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* 不規則漸層背景：用固定在視窗（position: fixed）的偽元素疊多個不對稱、大小不一的柔和光暈，
   顏色取自既有品牌色（品牌綠、赭棕 clay、奶油 manilla），用 background-position 動畫讓
   漸層緩慢飄移變化。放在 z-index: -2，深色/白色底的區塊（About、Digital、FAQ、Footer 等
   自己有設定不透明背景色的區塊）會直接蓋過去，只有原本走淺米色底、沒有另外設背景色的
   區塊（例如 Hero、企業管理系統、CTA）才會透出這片漸層。 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--bg-main);
  background-image:
    radial-gradient(ellipse 55% 50% at 15% 20%, rgba(154, 205, 50, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 15%, rgba(212, 162, 127, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 55% at 20% 85%, rgba(235, 219, 188, 0.4) 0%, transparent 62%),
    radial-gradient(ellipse 50% 50% at 85% 85%, rgba(154, 205, 50, 0.12) 0%, transparent 65%);
  background-repeat: no-repeat;
  animation: mesh-gradient-drift 28s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mesh-gradient-drift {

  0%,
  100% {
    background-position: 15% 20%, 85% 15%, 20% 85%, 85% 85%;
  }

  50% {
    background-position: 30% 35%, 68% 30%, 35% 68%, 68% 68%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/* ── H4–H6 基礎樣式（新增提案，目前沒有任何元件在用，先立好規範供未來使用）──
   詳細規劃見 design-system.html「標題階層」區塊 */
h4 {
  font-size: var(--text-base); /* 16px，小於現有 H3 最小值 18px（.portfolio-title），維持既有比例往下延伸 */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

h5 {
  font-size: var(--text-sm); /* 14px */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

h6 {
  font-size: var(--text-xs); /* 12px，標籤／眉標用 */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.container {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  padding: 0 var(--space-2xl);
}

.section-badge {
  --badge-glow: var(--swatch-brand-green);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  flex: 0 0 auto;
  color: var(--swatch-slate-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--swatch-white);
  margin-bottom: var(--space-md);
  /* 固定用品牌綠做環繞的常駐柔光，不管在亮色或暗色區塊都看得到 */
  box-shadow: 0 0 16px 1px color-mix(in srgb, var(--badge-glow) 45%, transparent);
}

/* 動態發光外框：一根細長條像時鐘指針一樣繞中心旋轉，靠外層 overflow:hidden
   裁切成圓角膠囊形（裁切範圍單純，不會有大範圍旋轉矩形跑出邊界的問題）；
   中間再蓋一層跟自己背景色相同的不透明遮蓋，只留邊緣露出旋轉光點。
   顏色固定用品牌綠並加上模糊，確保在任何背景色上都是明顯的發光效果。 */
.section-badge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 10px;
  margin-top: -5px;
  transform-origin: 0 50%;
  transform: rotate(0deg);
  background: linear-gradient(90deg,
      transparent 0%,
      transparent 45%,
      var(--badge-glow) 88%,
      var(--badge-glow) 100%);
  filter: blur(2.5px);
  opacity: 1;
  z-index: -2;
  animation: badge-ring-spin 3s linear infinite;
  pointer-events: none;
}

.section-badge::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: var(--radius-full);
  background: inherit;
  z-index: -1;
  pointer-events: none;
}

@keyframes badge-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .section-badge::before {
    animation: none;
  }
}

.section-title {
  font-size: round(nearest, clamp(2rem, 4vw, 3rem), 2px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.section-desc {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 600px;
}

/* 專業服務列表：標題底下的簡述文字，原本吃瀏覽器預設 16px，改用導讀字級並加大行高 */
.services-row-desc {
  font-size: var(--text-lead);
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 640px;
}

/* ── 按鈕系統 (Buttons) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-xs) var(--space-xl);
  border-radius: var(--radius-btn);
  font-size: var(--text-base);
  font-weight: 700;
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
  border: 1px solid transparent;
}

/* 按鈕 Hover 掃色圓形共用技巧：從角落展開一個圓形色塊掃過整個按鈕。
   圓形直徑固定為 1200px（半徑 600px），確保大於站上任何按鈕的對角線長度，
   避免按鈕變寬時圓形掃不到對角而露出底色（design system 共用規則，
   .btn-primary / .btn-secondary / .btn-outline 皆套用同一組 ::before，
   實際顏色由各自的 --btn-hover 決定）：
   - primary：掃「實心」品牌綠 var(--swatch-brand-green)，文字轉白，層級最高、最搶眼。
   - secondary / outline：邊框與文字由黑（slate-dark）一起轉為品牌綠 var(--swatch-brand-green)，
     內部只暈染「半透明」品牌綠（10% 不透明度），刻意不做成實心色塊，
     藉此保留次要按鈕本該較低調的視覺層級。 */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-dark,
.btn-secondary-inverse,
.btn-line {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.btn-primary::before,
.btn-secondary::before,
.btn-outline::before,
.btn-dark::before,
.btn-secondary-inverse::before,
.btn-line::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 100%;
  width: 1200px;
  height: 1200px;
  margin: -600px 0 0 -600px;
  border-radius: 50%;
  background: var(--btn-hover);
  transform: scale(0);
  transition: transform 0.5s var(--ease-out);
}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-outline:hover::before,
.btn-dark:hover::before,
.btn-secondary-inverse:hover::before,
.btn-line:hover::before {
  transform: scale(1);
}

.btn-primary {
  --btn-hover: var(--swatch-brand-green);
  background: var(--swatch-slate-dark);
  color: var(--swatch-ivory-light);
  border: none;
  box-shadow: 0 4px 14px rgba(21, 22, 26, 0.15);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(51, 204, 51, 0.35);
  color: var(--swatch-ivory-light);
}

.btn-secondary {
  --btn-hover: rgba(51, 204, 51, 0.1);
  background: transparent;
  color: var(--swatch-slate-dark);
  border: 1.5px solid var(--swatch-slate-dark);
  transition: border-color 0.5s var(--ease-out), color 0.5s var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.btn-secondary:hover {
  border-color: var(--swatch-brand-green);
  color: var(--swatch-brand-green);
  transform: translateY(-2px);
}

/* White secondary for dark backgrounds */
.btn-secondary-inverse {
  --btn-hover: rgba(51, 204, 51, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: var(--swatch-white);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.5s var(--ease-out), color 0.5s var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.btn-secondary-inverse:hover {
  border-color: var(--swatch-brand-green);
  color: var(--swatch-white);
  transform: translateY(-2px);
}

/* .btn-dark 跟 .btn-primary 視覺層級相同（實心深色按鈕），
   統一套用同一組「角落圓形掃色」hover 動畫，不再用自己單獨的漸層變色 */
.btn-dark {
  --btn-hover: var(--swatch-brand-green);
  background: var(--swatch-slate-dark);
  color: var(--swatch-ivory-light);
  border: 1px solid var(--swatch-slate-dark);
  box-shadow: 0 4px 14px rgba(21, 22, 26, 0.15);
}

.btn-dark:hover {
  border-color: var(--btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(51, 204, 51, 0.35);
  color: var(--swatch-ivory-light);
}

.btn-outline {
  --btn-hover: rgba(51, 204, 51, 0.1);
  background: transparent;
  border: 1.5px solid var(--swatch-slate-dark);
  color: var(--swatch-slate-dark);
  transition: border-color 0.5s var(--ease-out), color 0.5s var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.btn-outline:hover {
  border-color: var(--swatch-brand-green);
  color: var(--swatch-brand-green);
  transform: translateY(-2px);
}

/* LINE 官方綠實心按鈕，與站內浮動 .line-btn 同色（#06C755），
   用於「客服 LINE」等需要凸顯 LINE 品牌色的 CTA */
.btn-line {
  --btn-hover: #05b34c;
  background: #06C755;
  color: var(--swatch-white);
  border: none;
  box-shadow: 0 4px 14px rgba(6, 199, 85, 0.3);
}

.btn-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.45);
  color: var(--swatch-white);
}

/* ── 標籤與徽章 (Tags & Badges) ── */
.tag {
  background: transparent; /* 改成線框樣式，降低存在感，只做提示用 */
  color: var(--text-secondary); /* var(--swatch-slate-light) */
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--swatch-cloud-light);
  white-space: nowrap;
}

/* ─ Header ─ */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  transition: background var(--duration-med) ease, box-shadow var(--duration-med) ease,
    transform var(--duration-med) ease, color var(--duration-med) ease;
  background: transparent;
  border: none;
  transform: translateY(0);
}

/* 往下捲動時收起 header，往上捲動時再滑回來（見 js/main.js 的 updateHeaderVisibility） */
#header.header-hidden {
  transform: translateY(-100%);
}

#header.scrolled {
  background: rgba(250, 249, 245, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(21, 22, 26, 0.05);
}

/* header 目前所在高度範圍剛好疊在深色區塊（數位化生態系／設計開發流程／關於我們）上方時，
   Logo／文字換成淺色版本（沿用漢堡選單原本就有的深色樣式），但背景本身保持完全透明，
   不額外疊底色或毛玻璃，讓 header 直接融入深色區塊。 */
#header.header-on-dark {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

#header.header-on-dark .logo .logo-light {
  display: none !important;
}

#header.header-on-dark .logo .logo-dark {
  display: block !important;
}

#header.header-on-dark .nav-link {
  color: var(--text-inverse-secondary);
}

#header.header-on-dark .nav-link:hover {
  color: var(--swatch-white);
  background: rgba(255, 255, 255, 0.1);
}

/* header 疊在深色區塊上時，下拉選單也跟著換成深色版本，
   不然白底選單直接浮在深色 header 下面會很突兀 */
#header.header-on-dark .dropdown-menu {
  background: rgba(21, 22, 26, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

#header.header-on-dark .dropdown-link {
  color: var(--text-inverse-secondary);
}

#header.header-on-dark .dropdown-link:hover {
  color: var(--swatch-brand-green);
  background: rgba(255, 255, 255, 0.08);
}

#header.header-on-dark .hamburger span {
  background: var(--swatch-ivory-light);
}

#header.header-on-dark .header-cta-btn {
  background: var(--swatch-ivory-light);
  color: var(--swatch-slate-dark);
  border-color: var(--swatch-ivory-light);
}

#header.header-on-dark .header-cta-btn:hover {
  background: var(--swatch-white);
  border-color: var(--swatch-white);
  color: var(--swatch-slate-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--duration-fast) ease;
}

.logo:hover {
  opacity: 0.85;
}

.logo-img {
  height: 32px;
  width: auto;
  display: block;
  transition: transform var(--duration-fast) ease;
}

/* Logo 在淺色 Header 下始終顯示 Logo-Light */
.logo .logo-dark {
  display: none;
}

.logo .logo-light {
  display: block;
}

#header.scrolled .logo .logo-light {
  display: block;
}

#header.scrolled .logo .logo-dark {
  display: none;
}

.nav-menu {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: var(--space-md);
}

.nav-menu-container {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2xs) var(--space-sm);
  color: rgba(21, 22, 26, 0.85);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-rounded);
  transition: all var(--duration-fast) ease;
}

.nav-link:hover {
  color: var(--swatch-brand-green);
}

/* ─ Header Actions (CTA + Hamburger) ─ */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* 半徑、hover 展開圓、背景色等都交給 .btn / .btn-primary 統一控制，
   這裡只保留 header 專屬的小尺寸 padding / 字級 */
.header-cta-btn {
  padding: var(--space-2xs) var(--space-lg);
  font-size: var(--text-sm);
}

/* ─ 當 Hamburger 開啟時，Header 與選單全轉為深色模式 ─ */
#header.menu-opened {
  background: var(--swatch-slate-dark) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

#header.menu-opened .logo .logo-light {
  display: none !important;
}

#header.menu-opened .logo .logo-dark {
  display: block !important;
}

#header.menu-opened .hamburger span {
  background: var(--swatch-ivory-light);
}

#header.menu-opened .header-cta-btn {
  background: var(--swatch-ivory-light);
  color: var(--swatch-slate-dark);
  border-color: var(--swatch-ivory-light);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

#header.menu-opened .header-cta-btn:hover {
  background: var(--swatch-white);
  border-color: var(--swatch-white);
  color: var(--swatch-slate-dark);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-light-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2xs);
  min-width: 230px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: var(--shadow-3);
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--duration-fast) ease,
    transform var(--duration-fast) ease,
    visibility var(--duration-fast) ease;
  transition-delay: 0.15s;
}

/* 隱形懸浮橋樑 (防止滑鼠移動過渡時選單消失) */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

.nav-item:hover .dropdown-menu,
.dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) ease;
}

.dropdown-link:hover {
  color: var(--swatch-brand-green);
  background: rgba(21, 22, 26, 0.035);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  width: 32px;
  height: 32px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: var(--z-header-toggle);
  position: relative;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--swatch-slate-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* Hamburger 展開時切換為「✕」圖標 (附圖樣式) */
.hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─ Top Sections Wrapper (Hero + Services + Digital 共用底色與環境光效) ─
   改用 background-attachment: fixed 做不規則漸層：漸層是這個區塊自己的 background-image，
   一定會乾淨地被這個元素自己的 box（含 border-radius 圓角）裁切，不會有跑到其他區塊上層
   的問題；同時 background-attachment:fixed 讓漸層視覺上釘在視窗位置，使用者往下捲動內容時，
   背景會像固定在原地一樣，形成類似視差的效果（不用像 .cosmic-3d-bg 那樣依賴 position:sticky
   + 負 margin，也就不會有 sticky 子層跟 z-index 疊在錯的層級、蓋到後面深色區塊的問題）。
   四個色塊的顏色與位置都刻意跟 #portfolio 用同一組設定，兩處視覺上會像同一片背景。 */
.top-sections-wrapper {
  --enterprise-card-max-width: 810px;
  position: relative;
  z-index: 2; /* 蓋在 .cosmic-wrapper 之上，讓底部圓角能露出下面的深色背景 */
  background-color: var(--bg-main);
  background-image:
    radial-gradient(ellipse 50% 50%, rgba(212, 162, 127, 0.21) 0%, transparent 68%),
    radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 50% 50%, rgba(235, 219, 188, 0.25) 0%, transparent 66%),
    radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.11) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 1080px 900px, 520px 460px, 980px 820px, 480px 420px;
  background-position: 92% 8%, 78% 20%, 8% 92%, 22% 80%;
  background-attachment: fixed;
  animation: bg-gradient-drift 30s ease-in-out infinite;
  border-radius: 0 0 56px 56px;
}

@keyframes bg-gradient-drift {

  0%,
  100% {
    background-position: 92% 8%, 78% 20%, 8% 92%, 22% 80%;
  }

  50% {
    background-position: 84% 16%, 70% 28%, 16% 84%, 30% 72%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-sections-wrapper {
    animation: none;
  }
}

@media (max-width: 768px) {
  .top-sections-wrapper {
    border-radius: 0 0 28px 28px;
  }
}

@media (max-width: 1180px) {
  .top-sections-wrapper {
    /* iOS Safari（含 iPad）對 background-attachment:fixed 支援不穩定，原本只在
       768px 以下改回正常捲動，但 iPad 直式（如 iPad Pro 13 吋）寬度落在
       768～1180px 之間，仍會套用 fixed 導致背景渲染錯亂、出現硬斷層的跑版，
       所以把斷點拉高到 1180px，涵蓋平板直式寬度 */
    background-attachment: scroll;
  }
}

/* ── 平板直式（max-width:1180px）：各首頁區塊上下 padding 統一收斂 ──
   桌機版每個區塊的留白是照桌機比例調的，原本只有 #hero/#footer/#about
   在 1024px 以下收斂到桌機版的 75%，其餘區塊（#services/#digital/#process/
   #faq/#cta）完全沒有平板斷點，到了 iPad 直式（768～1180px）仍套用
   滿版桌機留白，導致整頁要滑很久。這裡統一補齊、也把斷點從 1024px
   拉高到 1180px（涵蓋 iPad Pro 13 吋等大尺寸平板），全部抓桌機版的
   75% 左右（留白愈大、收斂愈接近；小尺寸的細節間距不動），
   跟 768px 以下另一層「桌機版 50%」的手機級收斂銜接，形成「桌機
   100% → 平板 75% → 手機 50%」三段漸層，不是雜亂各自調整。 */
@media (max-width: 1180px) {
  #hero {
    padding: var(--space-9xl) 0 var(--space-lg); /* 128px/32px → 96px/24px */
  }

  #services {
    padding: var(--space-8xl) 0; /* 96px → 72px */
  }

  #digital {
    padding: var(--space-6xl) 0; /* 72px → 56px */
  }

  #process {
    padding: var(--space-6xl) 0 var(--space-9xl); /* 72px/144px → 56px/96px */
  }

  #faq {
    padding: var(--space-6xl) 0 var(--space-9xl); /* 72px/128px → 56px/96px */
  }

  #cta {
    padding: var(--space-9xl) 0; /* 128px → 96px */
  }

  #about {
    padding: 7.5rem 0; /* 160px → 120px；min-height:620px 仍保底高度 */
  }

  #footer {
    padding: 3.375rem 0 1.875rem; /* 72px/40px → 54px/30px */
  }
}

/* ─ Hero ─ (Warm Oat & Paper Editorial) */
#hero {
  position: relative;
  z-index: 1;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-10xl) 0 var(--space-2xl); /* 底部留白減半：4rem → 2rem */
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-8xl);
  width: 100%;
}

.hero-copy {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-7xl);
  align-items: center; /* 左右兩欄改成垂直置中對齊，取代原本的頂部對齊 */
  width: 100%;
}

.hero-copy-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-copy-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero-h1 {
  font-size: round(nearest, clamp(2.25rem, 2.5vw, 3.75rem), 2px); /* 36px，在 1440px 以下維持原始尺寸不變；超過 1440px 才緩慢放大，上限 60px（約 2400px 超寬螢幕才會到達），維持全站字級最大但不搶眼 */
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--swatch-slate-dark);
  margin-bottom: 0;
}

.hero-h1 .accent-text {
  font-size: round(nearest, clamp(3.75rem, 4.2vw, 4.5rem), 2px); /* 60px，在 1440px 以下維持原始尺寸不變；超過 1440px 才緩慢放大，上限 72px（約 1714px 達到上限） */
  color: var(--swatch-slate-dark);
  display: inline-block;
}

/* ─ Hero 標題「客製化系統設計開發」逐字浮現動畫 ─
   單純乾淨的寫法：每個字是一個 inline-block span，初始 opacity:0 並往下
   偏移 8px，用一個 keyframe 淡入＋回到原位，每個字用 --d 這個 CSS 變數
   錯開 animation-delay，做出逐字浮現的 stagger 節奏。只在頁面載入時播放一次。 */
.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: char-reveal-in 0.5s ease-out var(--d, 0ms) both;
}

.char-reveal.accent-green {
  color: var(--swatch-brand-green);
}

@keyframes char-reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .char-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero-tagline {
  display: block;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin-top: var(--space-sm);
  line-height: 1.6;
  -webkit-text-fill-color: var(--text-secondary);
}

.hero-desc {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-xl);
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}

.hero-stats {
  display: flex;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(21, 22, 26, 0.1);
}

.hero-stat-item strong {
  display: block;
  font-size: round(nearest, calc(var(--text-3xl) * 1.2), 2px); /* 放大 20%，token 改名後對應調整（36px*1.2） */
  font-weight: 800;
  color: var(--swatch-brand-green);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.hero-stat-item span {
  font-size: round(nearest, calc(var(--text-sm) * 1.1), 2px); /* 再放大 10% */
  color: var(--text-secondary);
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hero-mockup {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.mockup-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(21, 22, 26, 0.12), 0 4px 16px rgba(21, 22, 26, 0.04);
  position: relative;
  width: 100%;
  /* 進站時先帶一點透視傾斜（只有上下方向，不做左右旋轉），
     捲動到這張卡片時（.mockup-aligned）再回正，由 js/main.js 用第一次捲動事件觸發，
     不是滑鼠跟隨 */
  transform: perspective(1200px) rotateX(8deg);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.mockup-card.mockup-aligned {
  transform: perspective(1200px) rotateX(0deg);
}

.mockup-card:hover {
  box-shadow: 0 30px 70px rgba(21, 22, 26, 0.16), 0 8px 24px rgba(21, 22, 26, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .mockup-card {
    transform: none;
    transition: box-shadow 0.3s ease;
  }
}

.mockup-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--swatch-slate-dark);
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mockup-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mockup-dot-red {
  background: var(--mockup-red);
}

.mockup-dot-yellow {
  background: var(--swatch-ivory-medium);
}

.mockup-dot-green {
  background: var(--mockup-chart-green);
}

.mockup-url {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: var(--text-mockup-xs);
  color: var(--text-inverse-secondary);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mockup-titlebar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mockup-status-tag {
  font-size: var(--text-mockup-xs);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-family: var(--font-sans);
}

.mockup-status-tag.active {
  background: rgba(120, 140, 93, 0.25);
  color: #c0dd97;
  border: 1px solid rgba(120, 140, 93, 0.4);
}

.mockup-status-tag.version {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-inverse-secondary);
}

.mockup-body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--mockup-gray-bg);
}

/* ─ Sidebar Navigation ─ */
.mockup-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  background: var(--bg-white);
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-light-subtle);
}

.mockup-nav-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mockup-nav-title {
  font-size: var(--text-mockup-xs);
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0 8px 6px;
  text-transform: uppercase;
}

.mockup-nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.mockup-nav-item {
  padding: 8px 10px;
  border-radius: var(--radius-rounded);
  font-size: var(--text-mockup-xs);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  transition: all 0.2s;
  cursor: default;
}

.mockup-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.75;
}

.mockup-nav-badge {
  margin-left: auto;
  background: var(--mockup-red);
  color: var(--swatch-white);
  font-size: var(--text-mockup-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1.2;
}

.mockup-nav-item:hover {
  background: var(--mockup-gray-hover);
  color: var(--text-primary);
}

.mockup-nav-item.active {
  background: var(--swatch-slate-dark);
  color: var(--swatch-ivory-light);
  font-weight: 600;
}

.mockup-nav-item.active .mockup-nav-icon {
  opacity: 1;
}

.mockup-nav-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-top: 8px;
  border-top: 1px solid var(--border-light-subtle);
}

.mockup-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mockup-gray-hover);
  color: var(--swatch-slate-dark);
  font-size: var(--text-mockup-xs);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--swatch-cloud-light);
}

.mockup-user-name {
  font-size: var(--text-mockup-xs);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.mockup-user-role {
  font-size: var(--text-mockup-xs);
  color: var(--text-muted);
}

/* 模組說明 tooltip：滑鼠移到 sidebar 項目／KPI 卡片群組／整合狀態／趨勢分析上時，
   顯示一句話的功能說明。位置由 JS 依據目標元素位置精準量測（量完寬高才定位），
   夾在 .mockup-card 範圍內，避免被卡片本身的 overflow:hidden（圓角裁切用）擋住。
   卡片本體參考「深色卡片 + 圖示圓角標頭 + 說明文字 + 角落小菱形箭頭」的做法，
   改用站上既有的黑底、品牌綠強調色，並拿掉漸層光暈、模糊玻璃感等跟整體風格不合的
   裝飾，只保留骨架：圖示圓點 + 標題 + 說明 + 指向目標的菱形箭頭。 */
.mockup-tooltip {
  position: absolute;
  z-index: 20;
  width: 206px;
  background: var(--swatch-slate-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 16px 32px rgba(21, 22, 26, 0.35);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mockup-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.mockup-tooltip-head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: 4px;
}

/* 改成一條直線取代原本的圓點 */
.mockup-tooltip-dot {
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--swatch-brand-green);
  flex-shrink: 0;
}

.mockup-tooltip-title {
  font-size: var(--text-mockup-xs);
  font-weight: 700;
  color: var(--swatch-white);
}

.mockup-tooltip-desc {
  font-size: var(--text-mockup-xs);
  font-weight: 500;
  color: var(--text-inverse-secondary);
  line-height: 1.6;
  margin: 0;
}

/* 角落小菱形箭頭：指向目標的方向 */
.mockup-tooltip::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--swatch-slate-dark);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
}

.mockup-tooltip:not(.tip-right)::after {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}

/* sidebar 項目：tooltip 顯示在目標右側，箭頭改到左邊緣 */
.mockup-tooltip.tip-right::after {
  top: 50%;
  left: -5px;
  margin-top: -5px;
}

/* Sidebar 項目 hover 時要有可視的互動回饋，不然使用者不會知道能 hover */
.mockup-nav-item[data-tooltip],
.mockup-stat[data-tooltip],
.mockup-integration-header .mockup-card-subtitle[data-tooltip],
.mockup-chart-title-group[data-tooltip] {
  cursor: help;
}

/* ─ Main Content Area ─ */
.mockup-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* 1. Dashboard Top Split Grid (Left: Stats 2x2, Right: Integration List) */
.mockup-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 8px;
  align-items: stretch;
}

/* Left: KPI Metrics 2x2 Grid */
.mockup-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.mockup-stat {
  background: var(--bg-white);
  border: 1px solid var(--border-light-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* 讓 grid 欄位真的能縮小，避免內文 nowrap 撐爆整排卡片 */
}

.mockup-stat-label {
  font-size: var(--text-mockup-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
  font-weight: 600;
  white-space: nowrap;
}

.mockup-stat-value {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-display);
  line-height: 1.15;
  white-space: nowrap;
}

.mockup-stat-value.up {
  color: var(--mockup-green-600);
}

.mockup-stat-sub {
  font-size: var(--text-mockup-2xs);
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right: System Integration Status Card (Vertical List) */
.mockup-integration-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: var(--space-3xs) var(--space-3xs);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mockup-integration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xs);
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--swatch-ivory-medium);
}

.mockup-card-subtitle {
  font-size: var(--text-mockup-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mockup-sync-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mockup-sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--mockup-gray-bg);
  border: 1px solid var(--border-light-subtle);
  border-radius: var(--radius-rounded);
  padding: 4px 8px;
  transition: all 0.2s ease;
  min-width: 0; /* 讓這排能真的縮小，避免撐爆容器 */
}

.mockup-sync-row:hover {
  border-color: rgba(34, 197, 94, 0.4);
  background: var(--mockup-gray-hover);
}

.mockup-sync-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.mockup-sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--mockup-chart-green);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
  animation: pulseDot 2s infinite ease-in-out;
}

.mockup-sync-name {
  font-size: var(--text-mockup-xs);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.mockup-sync-right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0; /* 狀態標籤跟時間資訊優先保留完整，不被擠壓 */
}

.mockup-sync-tag {
  font-size: var(--text-mockup-2xs);
  font-weight: 700;
  color: var(--mockup-green-600);
  background: var(--mockup-green-100);
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.mockup-sync-sub {
  font-size: var(--text-mockup-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.75;
  }
}

/* 3. Velocity & Throughput Chart Card */
.mockup-chart-card {
  background: var(--bg-white);
  border-radius: var(--radius-btn);
  padding: var(--space-xs) var(--space-sm);
  box-shadow: var(--shadow-1);
}

.mockup-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xs);
  flex-wrap: wrap;
  gap: 6px;
}

.mockup-chart-title-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 8px;
}

/* 小說明文字放在分頁籤右邊，太長時才允許換行，不強制整行獨占 */
.mockup-chart-title-group .mockup-chart-title {
  min-width: 0;
  flex: 1 1 auto;
}

.mockup-badge-primary {
  background: var(--swatch-slate-dark);
  color: var(--swatch-ivory-light);
  font-size: var(--text-mockup-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.mockup-chart-title {
  font-size: var(--text-mockup-2xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-chart-legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-item {
  font-size: var(--text-mockup-2xs);
  color: var(--text-secondary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  display: inline-block;
}

.legend-dot.series-a {
  background: var(--mockup-chart-blue);
}

.legend-dot.series-b {
  background: var(--mockup-chart-green);
}

/* 時間區間分頁籤：放在「趨勢分析」徽章右邊，切換摘要卡片（3 個 chart-pill）
   跟折線圖 X 軸單位／標題文案 */
.mockup-period-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--mockup-gray-bg);
  border-radius: var(--radius-rounded);
  padding: 2px;
}

.mockup-period-tab {
  font-family: inherit;
  font-size: var(--text-mockup-2xs);
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  padding: var(--space-3xs) var(--space-2xs);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mockup-period-tab:hover {
  color: var(--text-primary);
}

.mockup-period-tab.active {
  background: var(--bg-white);
  color: var(--text-primary);
  box-shadow: var(--shadow-1);
}

/* Chart Summary Pills */
.mockup-chart-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: var(--space-2xs);
}

.chart-pill {
  background: var(--mockup-gray-bg);
  border-radius: var(--radius-rounded);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* 讓這張卡片本身也能縮小，不撐爆外層 3 欄 grid */
}

.chart-pill-k {
  font-size: var(--text-mockup-xs);
  color: var(--text-muted);
  font-weight: 600;
}

.chart-pill-v {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text-primary);
  font-family: var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.chart-pill-badge {
  align-self: flex-start;
  font-size: var(--text-mockup-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

.chart-pill-badge.up {
  color: var(--mockup-green-600);
  background: var(--mockup-green-100);
}

/* SVG Chart Container */
.mockup-svg-wrap {
  position: relative;
  width: 100%;
  background: var(--mockup-gray-bg);
  border-radius: var(--radius-rounded);
  padding: 6px 4px 2px;
}

.mockup-svg-chart {
  width: 100%;
  height: auto;
  display: block;
}

.mockup-svg-chart .chart-area {
  pointer-events: none;
}

.mockup-svg-chart .chart-line {
  pointer-events: none;
}

.mockup-svg-chart #mockupChartCapture {
  cursor: crosshair;
}

/* Hover 圓點／輔助線：用 CSS transition 讓移動變平滑，而不是瞬間跳動 */
.chart-hover-guide {
  transition: x1 0.18s var(--ease-out), x2 0.18s var(--ease-out), opacity 0.15s ease;
}

.chart-hover-dot {
  transition: cx 0.18s var(--ease-out), cy 0.18s var(--ease-out), opacity 0.15s ease;
}

/* Hover Tooltip (fake data on hover) */
.chart-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--swatch-slate-dark);
  color: var(--text-inverse-primary);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), left 0.18s var(--ease-out), top 0.18s var(--ease-out);
  white-space: nowrap;
  z-index: 5;
}

.chart-tooltip.visible {
  opacity: 1;
}

.chart-tooltip-label {
  font-family: var(--font-display);
  font-size: var(--text-mockup-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3xs);
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.chart-tooltip-row + .chart-tooltip-row {
  margin-top: 2px;
}

.chart-tooltip-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-tooltip-dot.dot-a {
  background: var(--mockup-chart-blue);
}

.chart-tooltip-dot.dot-b {
  background: var(--mockup-chart-green);
}

.chart-tooltip-key {
  font-size: var(--text-mockup-2xs);
  color: var(--text-inverse-secondary);
}

.chart-tooltip-val {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--text-mockup-xs);
  font-weight: 700;
}

/* 4. Quick Action Buttons Row */
.mockup-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.mockup-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--swatch-slate-dark);
  border: 1px solid var(--swatch-slate-dark);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: var(--text-mockup-xs);
  font-weight: 600;
  color: var(--swatch-ivory-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  width: auto;
  line-height: 1;
  text-decoration: none;
}

.mockup-action-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--swatch-oat);
  transition: color 0.2s ease, transform 0.2s ease;
}

.mockup-action-btn:hover {
  background: var(--mockup-chart-blue);
  border-color: var(--mockup-chart-blue);
  color: var(--swatch-white);
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(59, 130, 246, 0.3);
}

.mockup-action-btn:hover svg {
  color: var(--swatch-white);
  transform: scale(1.1);
}

.floating-badge {
  --badge-glow: var(--swatch-brand-green);
  position: absolute;
  z-index: 10;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 160% at 12% 15%, rgba(51, 204, 51, 0.35) 0%, transparent 55%),
    linear-gradient(135deg, var(--swatch-slate-dark) 0%, #1c1d22 100%);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  box-shadow: 0 16px 34px rgba(21, 22, 26, 0.32), 0 0 16px 1.5px color-mix(in srgb, var(--badge-glow) 40%, transparent);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: round(nearest, calc(var(--text-md) * 1.2), 2px);
  font-weight: 800;
  color: var(--text-inverse-primary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: float 4s ease-in-out infinite;
  white-space: nowrap;
}

/* 沿用 .section-badge 的旋轉光暈邊框效果 */
.floating-badge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 9px;
  margin-top: -4.5px;
  transform-origin: 0 50%;
  transform: rotate(0deg);
  background: linear-gradient(90deg,
      transparent 0%,
      transparent 45%,
      var(--badge-glow) 88%,
      var(--badge-glow) 100%);
  filter: blur(3px);
  opacity: 1;
  z-index: -2;
  animation: badge-ring-spin 3s linear infinite;
  pointer-events: none;
}

.floating-badge::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: var(--radius-full);
  background: inherit;
  z-index: -1;
  pointer-events: none;
}

.floating-badge svg {
  width: 1.32rem;
  height: 1.32rem;
  flex-shrink: 0;
  color: var(--mockup-chart-green);
}

.floating-badge-1 {
  top: -36px;
  right: 20px;
  animation-delay: 0s;
  z-index: 10;
}

.floating-badge-2 {
  bottom: -42px;
  left: 20px;
  animation-delay: 2s;
  z-index: 10;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* ─ Services (Transparent, flowing seamlessly from Hero) ─ */
#services {
  position: relative;
  z-index: 1;
  padding: var(--space-9xl) 0;
  background: transparent;
}

/* Big Card Container */
.services-big-card {
  /*background: var(--swatch-oat);*/
  /*border-radius: var(--radius-xl);*/
  /*padding: var(--space-6xl) var(--space-5xl);*/
  /*border: 1px solid var(--swatch-cloud-light);*/
  display: flex;
  flex-direction: column;
}

/* 1. 大標題塊 */
/* 左側固定欄（大標題 + 錨點一起固定，沿用 .process-header 的 position:sticky
   技巧；.faq-sticky 後來改用 grid align-items:center 垂直置中，不再 sticky）
   + 右側內容捲動。CTA 移到區塊最下方，見
   .service-cta-block（右側捲完 5 張卡片後，作為橫幅出現）。 */
.services-scroll-layout {
  display: grid;
  /* 這裡本來是裸的 1fr 1.7fr，沒有 minmax(0, ...) 保底。
     左欄是 position:sticky，捲動/縮放視窗時瀏覽器會不斷重新計算 sticky 的位置，
     這個過程中 Grid 軌道有機會短暫用「內容最小寬度」而不是 fr 比例去計算欄寬，
     導致右欄（卡片）瞬間變寬，被卡片自己的 overflow:hidden 從左邊裁掉一截文字/按鈕。
     跟先前 dashboard／chart-pill 遇到的 grid blowout 是同一種成因，加 minmax(0, 1fr) 保底即可。 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: var(--space-7xl);
  align-items: start;
  margin: var(--space-5xl) 0;
}

.services-sticky-col {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl);
}

.service-intro-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-intro-block .section-badge {
  margin-bottom: var(--space-xs);
}

.service-intro-block .section-title {
  margin-bottom: var(--space-md);
  font-size: round(nearest, clamp(2.2rem, 3.5vw, 3rem), 2px);
  line-height: 1.4;
}

.service-intro-desc {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 520px;
}

.services-anchor-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.services-anchor-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--swatch-cloud-light);
  cursor: pointer;
  transition: color var(--duration-med) ease;
}

.services-anchor-item:hover {
  color: var(--swatch-slate-light);
}

.services-anchor-item.is-active {
  color: var(--swatch-slate-dark);
}

.services-scroll-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* 卡片縮窄並等比放大，讓插畫左右不要留太多空白，靠右對齊維持原本版型
   （僅桌面雙欄版型適用；.services-scroll-layout 在 max-width:1024px 會改成單欄堆疊，
   這裡原本用 min-width:769px 沒有上限，769~1024px 這段其實已經是單欄版型，
   卻仍套用「卡片縮窄＋靠右對齊」，導致 iPad Pro 等平板寬度下卡片左側出現一大塊留白。
   改成只在真正的桌面雙欄寬度（>1024px）生效，平板以下讓卡片直接 fill 滿寬度） */
@media (min-width: 1025px) {
  .services-scroll-panels {
    align-items: flex-end;
  }

  .services-scroll-panels .service-card {
    width: 100%;
    max-width: var(--enterprise-card-max-width, 810px); /* 與上方服務總覽描述共用寬度上限及靠右對齊。 */
  }
}

/* 每個內容卡在右側捲動時，給予接近一屏的高度，讓左側錨點的切換節奏更從容 */
.services-scroll-panels .service-card {
  min-height: 55vh;
  justify-content: center;
  scroll-margin-top: 140px;
}

/* 小卡片（純白背景 + 陰影，取代原本的 Oat 燕麥色與框線） */
.service-card {
  background-color: var(--swatch-white);
  border-radius: var(--radius-card);
  padding: var(--space-3xl) var(--space-2xl);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-2);
}

.service-card-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--swatch-slate-light);
  margin-bottom: var(--space-2xs);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.service-card-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-xs); /* tailwind mb-3 (12px)，文案與標籤距離拉近 */
}

.service-card-illustration {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin-top: var(--space-lg); /* tailwind mt-6 (24px)，標籤與插畫圖片間距 */
}

.service-card-illustration img {
  width: 100%;
  max-width: 580px; /* 728 * 0.8，縮小約 20% */
  height: auto;
  max-height: 475px; /* 595 * 0.8 */
  object-fit: contain;
}

/* 卡片的 min-height:55vh（見上方 .services-scroll-panels .service-card）
   原本只在 max-width:1024px 以下取消，但 iPad Pro 13 吋直式等大尺寸平板
   的 CSS 寬度落在 1024～1180px 之間，不在這個範圍內，導致卡片被撐到
   55vh 高、插畫上下留白過多。這裡提早在 1180px 就取消卡高下限，讓卡片
   高度貼合實際內容。 */
@media (max-width: 1180px) {
  .services-scroll-panels .service-card {
    min-height: 0;
  }
}

.service-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-card .tag {
  background: var(--swatch-ivory-medium); /* 淺灰底色填滿，不使用外框 */
  color: var(--text-secondary);
  border: none;
}

/* 3. 行動呼籲橫幅：右側內容捲完 5 張卡片後，在區塊最下方出現，
   左文右按鈕排版，用卡片感的底色跟圓角融入整體版面 */
.service-cta-block {
  margin-top: var(--space-6xl);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2xl);
  background: var(--swatch-ivory-medium);
  border-radius: 32px; /* Figma spec：這個 CTA 橫幅用了比一般卡片更大的圓角，不走共用的 --radius-card */
  padding: var(--space-5xl); /* 48px，對齊 Figma frame 的內距 */
  position: relative;
  overflow: hidden; /* 超出這個 CTA 範圍的裝飾圖直接裁掉 */
}

.service-cta-desc {
  font-size: var(--text-md); /* 放大一階：16px → 18px（Figma 原稿為 16px） */
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.6; /* Figma: leading-1.6 */
  letter-spacing: 0.022em; /* Figma: font/tracking/wide（原為 0.4px，換算成 em 與全站單位一致，數值不變） */
  /* Figma 原稿是固定 600px，但那是照 1200px 寬的 frame 設計；
     .container 是 max-width:90% 的流動版面，螢幕變寬（例如 1920px）時橫幅本身
     會跟著變寬，文字卻卡在 600px，導致段落跟右側裝飾圖之間空出一大塊。
     改成跟著容器比例走、但設一個上限避免行寬過長不好讀 */
  max-width: min(55%, 880px);
  flex: 1 1 auto;
  /* .cta-deco-* 是 position:absolute 的裝飾圖，即使 z-index:0，沒有設定 position 的
     一般文字仍然會被瀏覽器排到「定位元素」的下面，手機版只剩火箭（cta-deco-4）時
     就會直接蓋在文字上面。這裡讓文字本身也成為定位元素、疊在裝飾圖之上 */
  position: relative;
  z-index: 1;
}

.service-cta-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── CTA 橫幅裝飾用 4 個小 SVG（cta_sm），位置直接對照 Figma 原始設計稿還原
   （node 3184:30119，frame 1200×174，內距 48px）：
   cta_sm 資料夾裡的 4 張圖其實都是「已經被 CTA 範圍裁切過」的最終輸出——
   例如 cta01/cta03 的 viewBox 剛好等於它們超出 frame 邊界後剩下的可視範圍，
   cta04 火箭也已經是套用旋轉、並被底部裁掉一截之後的樣子——所以這裡不需要再
   額外旋轉或裁切，只要把每張圖的寬高設成跟圖片原生尺寸一致即可完全貼合設計稿。
   定位改用 right（而非 left）——因為 .container 是 max-width:90% 的流動版面，
   橫幅實際寬度會隨螢幕變寬（不會卡在 Figma 稿的 1200px），如果用 left 定位，
   螢幕越寬、裝飾圖跟右側按鈕之間就會空出越大一塊空白，所以全部改成從右邊
   往內量（= 1200 − Figma 座標右緣），才會不論版面多寬都貼齊按鈕那一側：
   1 = cta01 大圓形色塊：right 0 / top 0（原始 y=-19，上緣已裁掉）/ 262×174
   2 = cta03 圓形外框線：right 0 / top 0（原始 y=-26，上緣已裁掉）/ 285×174
   3 = cta02 小白點：right 224 / top 10 / 15×15
   4 = cta04 火箭剪影：right 114 / top 13 / 231×161（原始旋轉 50.19deg 已烘進圖檔本身，不用再轉）
   進場動畫：隨 .service-cta-block 進入視窗被加上 .reveal → .visible 時，
   依 1→2→3→4 順序用 transition-delay 依序淡入/滑入，4 號火箭是明顯「飛進來」的位移 */
.cta-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  z-index: 0;
}

.service-cta-block.visible .cta-deco {
  opacity: var(--cta-deco-final-opacity, 1);
  transform: none;
}

/* 1、2、3 號（圓形色塊／外框線／小白點）原本各自用 Figma 稿的固定 px 定位。
   容器高度會隨 CTA 文案行數變動，如果三張圖各自用自己的 aspect-ratio 縮放，
   縮放比例會不一致，小白點就會偏離線條。
   改成把三張圖包在 .cta-deco-group 裡：容器本身 height:100% + aspect-ratio 285/174
   等比縮放，三張圖再用「相對於這個容器的百分比」定位／設尺寸，
   縮放時三者永遠用同一個比例一起變化，小白點才會一直貼在線條上 */
.cta-deco-group {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 285 / 174;
  pointer-events: none;
  z-index: 0;
}

.cta-deco-1 {
  right: 0;
  top: 0;
  width: 91.93%; /* 262 / 285 */
  height: 100%;
  --cta-deco-final-opacity: 1;
  transform: translateY(18px);
  transition-delay: 0.1s;
}

.cta-deco-2 {
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  --cta-deco-final-opacity: 1;
  transform: translateY(-16px);
  transition-delay: 0.25s;
}

.cta-deco-3 {
  right: 78.6%; /* 224 / 285 */
  top: 5.75%; /* 10 / 174 */
  width: 5.26%; /* 15 / 285 */
  height: 8.62%; /* 15 / 174 */
  --cta-deco-final-opacity: 1;
  transform: translateY(-14px);
  transition-delay: 0.4s;
}

/* 4 號火箭：圖檔本身已經是旋轉+裁切過的最終樣子，進場前先在更左下方、
   角度更平（疊加一個較小的旋轉當作「飛進來之前」的姿態），進場後歸位到 0deg */
.cta-deco-4 {
  right: 254px; /* 原本 114px，先 +60px 再 +80px，共往左移 140px */
  top: 0; /* 改用 top:0 + height:100% 撐滿容器高度，不再用固定 top/height——
              容器高度會隨文案換行行數變動（螢幕變寬、文字只剩 2 行時容器變矮），
              原本固定 top:13px + height:161px 在容器變矮時會讓火箭下緣超出容器，
              被 overflow:hidden 裁掉；width:auto + aspect-ratio 讓寬度隨高度等比縮放，不會變形 */
  height: 100%;
  width: auto;
  aspect-ratio: 231 / 161;
  --cta-deco-final-opacity: 1;
  transform: translate(-60px, 70px) rotate(-22deg);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.55s;
}

/* ─ Digital (Transparent, flowing seamlessly from Services) ─ */
/* .cosmic-wrapper 包住 #digital + #process，兩者共用同一顆宇宙星球背景（.cosmic-3d-bg），
   用 position:sticky + 負 margin 的「固定背景、內容捲動而過」技巧：
   .cosmic-3d-bg 先在文件流中佔滿 100vh，再用等量負 margin 把後面的內容拉上來緊接著，
   自己則因為 sticky 在使用者往下捲動這兩個區塊的整個過程中都維持釘在視窗內。
   （原本試過改成 CSS Grid 疊層 + 在 .cosmic-wrapper 加 overflow:hidden 想順便解決下方
   跑版問題，結果意外發現 display:grid + overflow:hidden + sticky 子層這個組合在
   Chromium 裡會直接讓 sticky 失效，整顆宇宙星球完全消失——已經證實並改回這個版本。
   .cosmic-wrapper 本身依然不可加 overflow:hidden，理由同上。） */
.cosmic-wrapper {
  position: relative;
  z-index: 1;
  background: var(--swatch-slate-dark);
  margin-top: -56px; /* 往上疊到 .top-sections-wrapper 的圓角缺口下面 */
  padding-top: 56px; /* 用 padding 抵銷上面的負 margin，讓 #digital 內容維持原本的視覺高度 */
}

@media (max-width: 768px) {
  .cosmic-wrapper {
    margin-top: -28px;
    padding-top: 28px;
  }
}

.cosmic-3d-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: calc(-100vh);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cosmic-3d-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 在 3D 場景上蓋一層深色漸層，避免星環/水晶亮度太高蓋過上方文字與卡片的可讀性 */
.cosmic-3d-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0.5) 0%, rgba(8, 9, 12, 0.62) 55%, rgba(8, 9, 12, 0.72) 100%);
  pointer-events: none;
}

#digital {
  position: relative;
  z-index: 1; /* 蓋在 .cosmic-3d-bg 之上 */
  padding: var(--space-8xl) 0;
  background: transparent; /* 改用 .cosmic-wrapper 的共用深色背景 + 宇宙星球，不再自己蓋一層純色 */
  overflow: hidden; /* 只用來裁切 .digital-bg-glow，#digital 內沒有 sticky 子元素，不影響 .cosmic-3d-bg 的 sticky */
}

#digital > .container {
  position: relative;
  z-index: 2;
}

.digital-bg-glow {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  max-width: 140vw;
  background: radial-gradient(circle, rgba(76, 217, 100, 0.14) 0%, rgba(227, 218, 204, 0.05) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.digital-header {
  text-align: center;
  margin-bottom: var(--space-7xl);
}

.digital-header .section-badge {
  justify-content: center;
  color: var(--swatch-white);
  background: var(--swatch-slate-dark);
}

.digital-header .section-title {
  color: var(--swatch-white);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.digital-header .section-desc {
  margin: var(--space-md) auto 0;
  text-align: center;
  max-width: 960px;
  color: var(--text-inverse-muted);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.digital-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

/* 液態玻璃（Liquid Glass）卡片：強力模糊 + 高飽和度把背後的宇宙星球揉成柔和色塊，
   同時用深色底 tint 確保文字對比，玻璃感則來自上緣高光（inset）與漸層光澤層 */
.digital-card {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.02) 100%),
    rgba(10, 11, 14, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-card);
  padding: var(--space-3xl) var(--space-2xl);
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}

/* 這裡選擇器前面刻意加上 #digital，是為了拉高優先權蓋過 .reveal.visible 的
   transform: none（兩者都是兩個 class 疊加，優先權其實一樣，寫在後面的
   .reveal.visible 平常會贏，加了 #digital 之後才能確保 hover 微浮起來的效果
   在卡片滑入畫面、reveal 動畫結束後仍然生效） */
#digital .digital-card:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.03) 100%),
    rgba(10, 11, 14, 0.5);
  border-color: var(--swatch-brand-green);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-24px);
}

/* GlareHover 效果（參考同名 Vue Bits 元件概念改寫成 vanilla JS + CSS）：
   跟前面拿掉的 BorderGlow 不一樣，這個效果不需要追蹤滑鼠位置，
   只在滑入／滑出時觸發一次「斜向光澤掃過卡片」的位移動畫（改 background-position，
   由瀏覽器合成，不會每個 mousemove 都重算遮罩），效能成本低很多、不會卡頓。
   js/main.js 負責動態幫每張 .digital-card 插入這層 overlay 並掛上滑入／滑出事件。 */
#digital .digital-card:hover .digital-card-title,
#digital .digital-card:focus-within .digital-card-title {
  color: var(--swatch-brand-green);
}

#digital .digital-card:focus-within {
  border-color: var(--swatch-brand-green);
}

.digital-card-title {
  transition: color var(--duration-fast) ease;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--swatch-white);
  margin-bottom: var(--space-xs);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.digital-card-desc {
  font-size: var(--text-base);
  color: var(--text-inverse-muted);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.digital-card-list {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  min-width: 0;
  width: 100%;
}

.digital-card-list li {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-inverse-muted);
  line-height: 1.7;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: 100%;
}

.digital-card-list .tag {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--swatch-white);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-right: var(--space-2xs);
  vertical-align: baseline;
  border-radius: 0;
}

.digital-card-actions {
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
}

/* 卡片上的按鈕統一改用共用的 .btn-secondary-inverse（暗背景用的次要按鈕元件），
   不再另外客製一份專屬配色／hover，只保留這裡需要的小尺寸變化 */
.digital-card-actions .btn {
  padding: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm);
}

/* ─ Process (Dark Editorial Section) ─ */
#process {
  padding: var(--space-8xl) 0 9rem;
  background: transparent; /* 改用 .cosmic-wrapper 的共用深色背景 + 宇宙星球，跟 #digital 無縫銜接 */
  position: relative;
  z-index: 1; /* 蓋在 .cosmic-3d-bg 之上 */
  overflow: hidden; /* 只用來裁切 .process-bg-glow；.process-header 的 sticky 定位不受影響
                        （它是相對 #process 自己這個夠高的盒子，不是被裁切的外層祖先） */
}

.process-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(227, 218, 204, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.process-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--space-8xl);
  align-items: start;
  position: relative;
  z-index: 1;
}

.process-header {
  text-align: left;
  position: sticky;
  top: 120px;
}

.process-header .section-badge {
  justify-content: flex-start;
  color: var(--swatch-white);
  background: var(--swatch-slate-dark);
}

.process-header .section-title {
  color: white;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.process-header .section-desc {
  color: var(--text-inverse-muted);
  margin: var(--space-md) 0 0;
  max-width: 100%;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.process-video-wrapper {
  margin-top: var(--space-2xl);
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  background: var(--swatch-slate-dark);
}

.process-video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.process-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  /* 右側 5 個步驟區塊相對於左側介紹區塊垂直置中（左側標題是 sticky，
     不受這裡影響，只調整右側這欄自己在格線列裡的對齊方式） */
  align-self: center;
}

/* 同一套液態玻璃處理，維持與 .digital-card 一致的質感語彙 */
.process-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.02) 100%),
    rgba(10, 11, 14, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-card);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.process-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--swatch-slate-dark);
  border: 2px solid rgba(227, 218, 204, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--swatch-white);
  flex-shrink: 0;
}

.process-step-body {
  flex: 1;
  min-width: 0;
}

.process-step-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-3xs);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.process-step-desc {
  font-size: var(--text-base);
  color: var(--text-inverse-muted);
  line-height: 1.6;
  margin: 0;
}

/* ─ Portfolio ─ */
#portfolio {
  position: relative; /* 明確給 z-index，確保一定蓋在 .cosmic-wrapper（z-index:1）之上，
                          不受 sticky 子層渲染時機影響，避免宇宙背景在區塊交界處蓋到作品集卡片 */
  z-index: 2;
  padding-bottom: var(--space-8xl);
  /* 這個負 margin + padding-top 的組合是「往上疊、露出圓角」的技巧：
     -56px margin 只是把整個區塊的背景／圓角往上移，不會抵銷 padding-top 本身，
     所以標題實際離「可視背景頂端（圓角處）」的距離＝整個 padding-top 的值，
     不是 padding-top 扣掉 56px。要讓這個距離跟 CTA 卡片下方留白（#services
     的 padding-bottom: var(--space-9xl) = 96px）視覺一致，基準值要抓 96px - 56px = 40px（var(--space-4xl)），
     而不是原本的 var(--space-9xl) 或 var(--space-10xl)。 */
  padding-top: calc(var(--space-4xl) + 56px);
  margin-top: -56px; /* 往上疊到 .cosmic-wrapper 底部，讓自己的圓角缺口能露出下面的深色宇宙背景，
                         跟 .top-sections-wrapper／.cosmic-wrapper 交界處是同一套技巧，只是方向相反 */
  border-radius: 56px 56px 0 0;
  /* 跟 .top-sections-wrapper 用同一組不規則漸層設定（同顏色、同 background-attachment:fixed），
     視覺上會像同一片固定背景，只是中間被 About／Digital／Process 的深色區塊蓋住一段而已 */
  background-color: var(--swatch-ivory-medium);
  background-image:
    radial-gradient(ellipse 50% 50%, rgba(212, 162, 127, 0.21) 0%, transparent 68%),
    radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 50% 50%, rgba(235, 219, 188, 0.25) 0%, transparent 66%),
    radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.11) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 1080px 900px, 520px 460px, 980px 820px, 480px 420px;
  background-position: 92% 8%, 78% 20%, 8% 92%, 22% 80%;
  background-attachment: fixed;
  animation: bg-gradient-drift 30s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #portfolio {
    animation: none;
  }
}

@media (max-width: 1180px) {
  #portfolio {
    /* 同上：斷點拉高到 1180px，涵蓋 iPad 直式等平板寬度，避免 iOS Safari
       的 fixed 背景渲染異常 */
    background-attachment: scroll;
    /* padding-top 原始公式是「目標視覺間距 + 56px圓角位移」，桌機版目標間距
       抓 40px（= #services 桌機版 padding-bottom 96px - 56px），是刻意讓這裡
       的留白跟 #services 卡片下方留白視覺等高。#services 在平板斷點收斂到
       72px 後，照同樣邏輯目標間距變成 72-56=16px，padding-top 公式结果剛好
       等於 72px（= var(--space-8xl)），跟 #services 的 padding 一致；
       圓角位移（margin-top/border-radius）維持不變，只有手機 768px 以下
       才進一步縮小 */
    padding-top: var(--space-8xl); /* 96px → 72px */
    padding-bottom: var(--space-6xl); /* 72px → 56px */
  }
}

@media (max-width: 768px) {
  #portfolio {
    padding-top: calc(var(--space-4xl) + 28px);
    margin-top: -28px;
    border-radius: 28px 28px 0 0;
  }
}

.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-5xl);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4xl) var(--space-xl);
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  transition: transform var(--duration-med) var(--ease-out);
  cursor: pointer;
}

.portfolio-card:hover {
  transform: translateY(-6px);
}

.portfolio-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--swatch-ivory-medium);
  border: 1px solid var(--border-light-subtle);
  transition: all var(--duration-med) var(--ease-out);
}

.portfolio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.portfolio-card:hover .portfolio-img {
  box-shadow: var(--shadow-3), 0 0 0 1px var(--swatch-brand-green);
  border-color: var(--swatch-brand-green);
}

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

.portfolio-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(21, 22, 26, 0.35) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-med) ease;
}

.portfolio-card:hover .portfolio-img-overlay {
  opacity: 1;
}

.portfolio-tag-group {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2;
  max-width: calc(100% - 28px);
}

.portfolio-tag-item {
  /* 預設隱藏，hover 卡片時淡入（全站作品集卡片統一） */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  /* 改成半透明玻璃感的深色小標籤，疊在圖片上仍保有辨識度，
     但不再是全黑實心色塊，視覺重量感降低、感覺更輕量 */
  background: rgba(21, 22, 26, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--swatch-white);
  font-size: var(--text-mockup-xs);
  font-weight: 600;
  padding: 4px 10px;
  /* 改成全圓角藥丸形，跟其他標籤樣式統一 */
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  transition: opacity var(--duration-med) var(--ease-out), transform var(--duration-med) var(--ease-out);
}

.portfolio-card:hover .portfolio-tag-item {
  opacity: 1;
  transform: none;
}

.portfolio-body {
  padding: var(--space-md) var(--space-3xs) 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: transparent;
}

.portfolio-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2xs);
  line-height: 1.4;
  letter-spacing: 0.02em;
  transition: color var(--duration-fast) ease;
}

.portfolio-card:hover .portfolio-title {
  color: var(--swatch-brand-green);
}

.portfolio-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ─ 第 6 張：查看全部作品按鈕卡片 ─ */
.portfolio-card-cta {
  background: var(--swatch-slate-dark);
  border: 1px solid var(--swatch-slate-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  transition: all var(--duration-med) var(--ease-out);
}

.portfolio-card-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(51, 204, 51, 0.22), transparent 65%),
    radial-gradient(circle at bottom left, rgba(51, 204, 51, 0.08), transparent 60%);
  pointer-events: none;
  transition: opacity var(--duration-med) var(--ease-out);
}

.portfolio-card-cta:hover {
  background: #1C1C1A;
  border-color: var(--swatch-brand-green);
  transform: translateY(-6px);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--swatch-brand-green);
}

.portfolio-card-cta:hover::before {
  opacity: 1;
}

.portfolio-cta-content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.portfolio-cta-icon-wrap {
  margin-bottom: var(--space-xs);
}

.portfolio-cta-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swatch-oat);
  transition: all var(--duration-med) var(--ease-out);
}

.portfolio-card-cta:hover .portfolio-cta-icon {
  background: var(--swatch-brand-green);
  color: var(--swatch-white);
  border-color: var(--swatch-brand-green);
  transform: scale(1.1) rotate(45deg);
  box-shadow: 0 0 24px rgba(51, 204, 51, 0.4);
}

.portfolio-cta-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--swatch-white);
  margin: 0;
  letter-spacing: 0.02em;
  transition: color var(--duration-fast) ease;
}

.portfolio-card-cta:hover .portfolio-cta-title {
  color: var(--swatch-brand-green);
}

/* ─ FAQ ─ */
/* FAQ 跟 #portfolio（作品集）要看起來是同一片背景：兩者用完全相同的漸層設定（顏色、
   background-size、background-position）＋ background-attachment: fixed。因為 fixed
   背景是以「視窗」為基準定位，不是各自的元素框，所以只要參數一致，兩個區塊之間就會像是
   同一張固定在視窗上的漸層圖無縫延續過去，跟 #portfolio／.top-sections-wrapper 共用同一套
   手法一樣。 */
#faq {
  padding: var(--space-8xl) 0 var(--space-10xl);
  position: relative;
  overflow: hidden;
  background-color: var(--swatch-ivory-medium);
  background-image:
    radial-gradient(ellipse 50% 50%, rgba(212, 162, 127, 0.21) 0%, transparent 68%),
    radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 50% 50%, rgba(235, 219, 188, 0.25) 0%, transparent 66%),
    radial-gradient(ellipse 50% 50%, rgba(154, 205, 50, 0.11) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 1080px 900px, 520px 460px, 980px 820px, 480px 420px;
  background-position: 92% 8%, 78% 20%, 8% 92%, 22% 80%;
  background-attachment: fixed;
  animation: bg-gradient-drift 30s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  #faq {
    animation: none;
  }
}

@media (max-width: 1180px) {
  #faq {
    /* iOS Safari（含 iPad）對 background-attachment: fixed 支援不穩定，原本只在
       768px 以下改回一般捲動，但 iPad 直式寬度落在 768～1180px 之間，仍會套用
       fixed 背景導致渲染錯亂、出現跑版，所以把斷點拉高到 1180px，跟
       #portfolio／.top-sections-wrapper 做法一致 */
    background-attachment: scroll;
  }
}

#faq > .container {
  position: relative;
  z-index: 1;
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: center;
}

.faq-sticky {
  /* 不使用 sticky 跟隨捲動，靠 .faq-layout 的 align-items: center 讓這欄
     相對右側手風琴清單「垂直置中」，位置固定不隨捲動變化 */
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-card);
}

/* 原本卡片背景是 rgba(255,255,255,0.55) 純白疊在暖色漸層上會被染成髒灰白；也不希望
   完全不透明（那樣就看不到背景了）。改用跟 .process-step（需求訪談等流程卡片）同一套
   玻璃質感手法：一層斜角白色高光 linear-gradient 疊在低透明度的奶油白底色上，
   加 backdrop-filter 模糊＋飽和，讓卡片微微透出背後的漸層色，同時還是清楚可讀。 */
.faq-item {
  /* 收合狀態下的不透明度分兩次調整：先 +20%（0.55→0.66、0.22→0.26、0.14→0.17、
     底色 0.38→0.46），這次再 +30%（0.66→0.86、0.26→0.34、0.17→0.22、
     底色 0.46→0.6），讓題目卡片在還沒展開前也更加清晰、不易被底圖干擾，
     跟原本的漸層／模糊質感比例保持一致，只是整體再實一點 */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.34) 45%, rgba(255, 255, 255, 0.22) 100%),
    rgba(255, 253, 247, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-card);
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 3px rgba(21, 22, 26, 0.04);
  transition: background var(--duration-fast) ease, box-shadow var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

/* 展開狀態：不用突兀的左側色條，改成卡片底色更不透明、陰影更明顯，
   讓它自然「浮」起來跟其他收合中的題目區隔，視覺上更柔和 */
.faq-item.open {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.28) 100%),
    rgba(255, 253, 247, 0.7);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 32px rgba(21, 22, 26, 0.1);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  text-align: left;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  transition: background var(--duration-fast) ease;
  gap: var(--space-sm);
}

.faq-question:hover {
  background: rgba(255, 255, 255, 0.18);
}

.faq-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--swatch-slate-dark); /* 收合狀態（＋）：黑色 */
  color: var(--swatch-white);
  flex-shrink: 0;
  transition: background var(--duration-fast) ease;
}

/* 用 CSS 畫十字（展開時只留橫線變成減號），取代 SVG 旋轉 45 度變 X 的做法 */
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--duration-fast) ease;
}

.faq-icon::before {
  width: 10px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 10px;
}

.faq-item.open .faq-icon {
  background: var(--swatch-brand-green); /* 展開狀態（－）：品牌綠 */
  color: var(--swatch-white);
}

.faq-item.open .faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* 改用 JS 動態量測內容實際高度、設定精確的 max-height px 值再做 transition，
   取代先前 grid-template-rows 0fr→1fr 的做法（該做法在部分瀏覽器下無法完全收合成 0，
   導致每一題看起來都像「打開一半」）。這裡的 CSS 只負責過渡動畫本身，
   實際的 max-height 數值由 js/main.js 在展開/收合當下計算並寫入 inline style。 */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-med) var(--ease-out);
}

.faq-answer-inner {
  position: relative;
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.85;
}

/* 分隔線改為與內文同寬（左右內縮 space-xl），不再滿版 */
.faq-answer-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-xl);
  right: var(--space-xl);
  height: 1px;
  background: var(--border-light-subtle);
}

/* ─ About ─ */
#about {
  padding: 10rem 0;
  background: #0A0A0C;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 620px;
}

.about-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(212, 162, 127, 0.08) 0%, transparent 65%),
    radial-gradient(circle at 15% 25%, rgba(227, 218, 204, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(227, 218, 204, 0.06) 0%, transparent 45%);
  pointer-events: none;
}

.about-content-center {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.about-badge {
  align-self: center; /* 覆蓋 .section-badge 預設的 flex-start，避免在置中版面裡跑到最左邊 */
  color: var(--swatch-white);
  margin-bottom: var(--space-md);
  background: #0A0A0C; /* 跟 #about 區塊背景同色，才能讓發光外框的裁切遮蓋無縫融入 */
}

.about-title {
  font-size: round(nearest, clamp(2rem, 4.2vw, 2.9rem), 2px);
  font-weight: 800;
  color: var(--swatch-white);
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.about-desc {
  font-size: var(--text-base);
  color: var(--text-inverse-secondary);
  line-height: 1.95;
  margin-bottom: var(--space-4xl);
  text-align: center;
  max-width: 680px;
}

.about-actions {
  display: flex;
  justify-content: center;
}

/* 改用共用的 .btn-secondary-inverse，這裡只保留這顆按鈕專屬的尺寸／陰影微調 */
.about-cta-btn {
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-3xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ─ Connector Lines SVG in About Section ─ */
.about-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.connector-line {
  fill: none;
  stroke: rgba(227, 218, 204, 0.22);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  transition: stroke var(--duration-fast) ease,
    stroke-width var(--duration-fast) ease,
    opacity var(--duration-fast) ease,
    filter var(--duration-fast) ease;
  animation: connectorDash 25s linear infinite;
}

.connector-dot {
  fill: var(--swatch-oat);
  opacity: 0.7;
  transition: transform var(--duration-fast) ease,
    fill var(--duration-fast) ease,
    opacity var(--duration-fast) ease,
    filter var(--duration-fast) ease;
}

.connector-dot.start-dot {
  fill: var(--swatch-ivory-medium);
  opacity: 0.9;
}

.connector-dot.end-dot {
  /* 標籤本身有浮動動畫（aboutFloat 上下漂浮），但這顆端點小圓點的座標是固定的，
     標籤飄開的瞬間就會露出後面這顆點，所以乾脆整個隱藏，改由標籤本身當作終點 */
  fill: var(--swatch-oat);
  opacity: 0;
}

/* Hover 高亮連動：原本的虛線 .connector-line 保持原樣（不整條變綠色），
   「光點沿線跑向標籤」改成在 hover 時由 js/main.js 動態插入一條疊加在上面、
   一模一樣路徑的 .connector-flow-dot，只讓這條疊加線用 Web Animations API
   （line.animate(...)）反覆 loop 播放一小截發光的 stroke-dasharray 區段，
   看起來就是一個亮點沿著原本的虛線持續跑動，而不是整條線變成實心綠色。
   （用 CSS @keyframes 搭配 calc(var(--自訂屬性)) 計算實測會被這個瀏覽器當成離散跳格
   播放，光點會像用跳的，所以改用 WAAPI 讓瀏覽器做真正平滑的數值補間。）
   滑鼠移開時這條疊加線會被整個移除，不會留下殘影。
   連接線兩端的小圓點（start-dot / end-dot）hover 時維持原本樣式，不額外放大發亮，
   避免看起來像多出一顆不相關的白色圓點。 */
.connector-flow-dot {
  fill: none;
  stroke: var(--swatch-brand-green);
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(51, 204, 51, 0.9));
  pointer-events: none;
}

@keyframes connectorDash {
  to {
    stroke-dashoffset: -100;
  }
}

/* ─ Floating Badges in About Section ─ */
.about-badges-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

/* 跟 hero 區塊的 .floating-badge（「人工作業減少 60%」）同一套樣式語彙：
   深色膠囊 + 品牌綠放射光暈背景 + 邊緣旋轉光圈，維持全站浮動標籤視覺一致 */
/* 外層 <a> 只負責定位與滑鼠命中範圍，永遠靜止不動；
   真正會浮動／hover 位移縮放的視覺（底色、外框、光暈）都畫在內層 .badge-visual 上。
   這樣滑鼠停在標籤邊緣時，不會因為視覺位移導致命中範圍跟著跑走、
   反覆觸發 mouseenter/mouseleave 而閃爍。*/
.about-floating-badge {
  position: absolute;
  pointer-events: auto;
  display: inline-flex;
}

.about-floating-badge .badge-visual {
  --badge-glow: var(--swatch-brand-green);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-xs) var(--space-md);
  background:
    radial-gradient(120% 160% at 12% 15%, rgba(51, 204, 51, 0.3) 0%, transparent 55%),
    linear-gradient(135deg, var(--swatch-slate-dark) 0%, #1c1d22 100%);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--swatch-ivory-light);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 0 14px 1px color-mix(in srgb, var(--badge-glow) 35%, transparent);
  transition: transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  animation: aboutFloat 5s ease-in-out infinite alternate;
}

/* 邊緣旋轉光圈：跟 .section-badge / .floating-badge 同一套技巧 */
.about-floating-badge .badge-visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 9px;
  margin-top: -4.5px;
  transform-origin: 0 50%;
  transform: rotate(0deg);
  background: linear-gradient(90deg,
      transparent 0%,
      transparent 45%,
      var(--badge-glow) 88%,
      var(--badge-glow) 100%);
  filter: blur(3px);
  opacity: 1;
  z-index: -2;
  animation: badge-ring-spin 3s linear infinite;
  pointer-events: none;
}

.about-floating-badge .badge-visual::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: var(--radius-full);
  background: inherit;
  z-index: -1;
  pointer-events: none;
}

/* Hover：連接線的光會先從中央傳導過來，抵達的同時標籤本身也一起亮成品牌綠 */
.about-floating-badge:hover .badge-visual {
  border-color: var(--badge-glow);
  color: var(--swatch-white);
  transform: translateY(-6px) scale(1.06) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 28px rgba(51, 204, 51, 0.6);
  animation-play-state: paused;
}

.about-floating-badge:hover .badge-visual::before {
  animation-duration: 1.1s;
}

.about-floating-badge .badge-icon {
  font-size: round(nearest, calc(var(--text-md) * 1.1), 2px);
  line-height: 1;
  color: var(--mockup-chart-green);
}

.about-floating-badge .badge-text {
  /* 用 em 相對父層目前的 font-size 放大 20%，響應式斷點（RWD 版縮小字級）也能正確等比放大 */
  font-size: round(nearest, 1.2em, 2px);
}

/* 位置與浮動延遲定位 */
.about-badge-1 {
  top: 13%;
  left: 4%;
}

.about-badge-1 .badge-visual {
  animation-delay: 0s;
  animation-duration: 5.5s;
}

.about-badge-2 {
  top: 14%;
  right: 4%;
}

.about-badge-2 .badge-visual {
  animation-delay: 1.2s;
  animation-duration: 4.8s;
}

.about-badge-3 {
  top: 48%;
  left: 2%;
}

.about-badge-3 .badge-visual {
  animation-delay: 2.4s;
  animation-duration: 6s;
}

.about-badge-4 {
  top: 48%;
  right: 2%;
}

.about-badge-4 .badge-visual {
  animation-delay: 0.8s;
  animation-duration: 5.2s;
}

.about-badge-5 {
  bottom: 13%;
  left: 6%;
}

.about-badge-5 .badge-visual {
  animation-delay: 1.8s;
  animation-duration: 5.8s;
}

.about-badge-6 {
  bottom: 13%;
  right: 6%;
}

.about-badge-6 .badge-visual {
  animation-delay: 2.8s;
  animation-duration: 4.5s;
}

@keyframes aboutFloat {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(0.8deg);
  }

  100% {
    transform: translateY(6px) rotate(-0.8deg);
  }
}

@media (max-width: 1200px) {
  /* 平板寬度下 #about 沒有 max-width 限制，原本用很小的 1~2% 當左右邊距，
     換算成實際 px 會太貼邊界，改用 max() 保證無論如何都至少留 20px 呼吸空間 */
  .about-badge-1 {
    top: 8%;
    left: max(3%, 20px);
  }

  .about-badge-2 {
    top: 8%;
    right: max(3%, 20px);
  }

  .about-badge-3 {
    top: 50%;
    left: max(3%, 20px);
  }

  .about-badge-4 {
    top: 50%;
    right: max(3%, 20px);
  }

  .about-badge-5 {
    bottom: 8%;
    left: max(3%, 20px);
  }

  .about-badge-6 {
    bottom: 8%;
    right: max(3%, 20px);
  }

  /* 文字區塊原本固定 max-width:740px（.about-desc 680px），在這個斷點的
     寬度下（尤其 iPad Pro 13 吋直式 1032px）會跟左右兩側貼邊的徽章
     （top:50% 那兩顆）幾乎貼在一起、甚至文字框邊緣蓋到徽章框，所以
     把文字區塊收窄，讓文字跟兩側徽章之間留出實際的呼吸空間 */
  .about-content-center {
    max-width: 600px;
  }

  .about-desc {
    max-width: 560px;
  }
}

@media (max-width: 900px) {
  #about {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  /* 桌機版 .about-bg 的光暈是配合桌機寬扁比例調的。手機版 #about 窄長，
     先前試過改成固定 px 半徑（220px/160px）想維持「淡淡角落光暈」的效果，
     但實測在 400px 出頭的手機寬度下，即使收小半徑，三層光暈疊在一起
     還是會在畫面上形成一大片明顯灰色色塊，看起來像跑版。裝飾用光暈
     不是內容必要的元素，手機版直接拿掉最乾淨，不用再繼續調數值 */
  .about-bg {
    background: none;
  }

  .about-connectors {
    display: none;
  }

  #about .container {
    order: 1;
    width: 100%;
  }

  .about-content-center {
    max-width: 100%;
    padding: 0;
  }

  .about-title {
    font-size: round(nearest, clamp(1.85rem, 5vw, 2.35rem), 2px);
    margin-bottom: var(--space-md);
  }

  .about-desc {
    font-size: var(--text-md);
    line-height: 1.85;
    margin-bottom: var(--space-2xl);
  }

  .about-badges-wrapper {
    /* 2 欄 × 3 列的 grid，每顆徽章 fill 滿整個格子寬度，排列才會整齊對齊；
       間距加大避免手機點擊誤觸 */
    order: 2;
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 14px;
    margin-top: 2.75rem;
    pointer-events: auto;
    width: 100%;
    max-width: 460px;
    padding: 0 var(--space-md);
  }

  .about-floating-badge {
    /* 桌機版靠 .about-badges-wrapper（position:absolute; inset:0）當定位基準，
       用 top/left/right/bottom 百分比疊放在 #about 正中央區塊。
       手機版上面已把 wrapper 改成 position:static + flex-wrap，讓徽章排成一般膠囊列，
       這裡原本用 position:static 讓徽章跟著失去自己的定位基準——六個徽章的
       ::before 發光外框（position:absolute）因此改成往上一層抓到 #about
       （position:relative）當基準，全部疊在同一塊區域，就是先前一直除不掉的
       「跑版灰色色塊」真正成因。改成 relative：重新讓徽章自己成為 ::before 外框的定位基準。
       但 .about-badge-1 ~ .about-badge-6 各自還留著桌機版用的 top/left/right/bottom 百分比，
       在 position:static 時瀏覽器會忽略這些偏移值，改成 relative 後這些偏移值會生效，
       把每顆徽章從原本 flex-wrap 排好的位置再往外推，變成互相重疊——下面統一歸零
       手機版沒有浮動動畫，外層 <a> 直接撐滿格子寬度即可，
       視覺樣式（底色/圓角/陰影等）統一交給內層 .badge-visual 負責 */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: block;
    width: 100%; /* fill 滿格子寬度，六顆排起來才整齊對齊 */
  }

  .about-floating-badge .badge-visual {
    animation: none;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 內文改成統一靠左 */
    width: 100%;
    font-size: var(--text-base); /* 放大一點，手機版比較好點 */
    font-weight: 600;
    padding: 0.85rem var(--space-sm); /* 加大觸控範圍 */
    border-radius: var(--radius-btn); /* 改成方形圓角，不再是膠囊 */
    background: rgba(255, 255, 255, 0.08);
    border: none; /* 去掉邊框 */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    white-space: normal;
    text-align: left;
    line-height: 1.3;
  }

  /* 內層發光底色跟著改成方形圓角，避免膠囊形狀的 ::after 露出邊角 */
  .about-floating-badge .badge-visual::after {
    border-radius: calc(var(--radius-btn) - 2px);
  }

  .about-floating-badge:hover .badge-visual {
    transform: translateY(-2px) scale(1.03) !important;
  }
}

/* ─ CTA ─ */
#cta {
  padding: var(--space-10xl) 0;
  background: transparent;
  position: relative;
}

/* ── CTA 周邊浮動插畫群組（依序浮現 → 微微浮動；10 為可拖曳鼠標、11 為鼠標缺口） ── */
.cta-illustrations {
  position: absolute;
  inset: 0 5%; /* 對齊 .container（width:100%; max-width:90%）置中後的範圍，
                  避免超寬螢幕（如 1920px）下插畫仍以整個 section 滿版寬度為基準定位，
                  導致左側插畫離文字太遠、右側插畫又太貼邊甚至被截切 */
  /* 不設 z-index（維持 auto），裝飾用插畫 1-9 才會蓋在 .cta-title/.cta-desc/.cta-actions 底下，
     不會遮住文字；需要蓋在按鈕之上的鼠標拼圖互動已獨立成 .cta-cursor-layer，見下方 */
  pointer-events: none;
}

/* 鼠標拼圖互動區塊需要獨立於裝飾插畫之外、蓋在 .cta-actions（z-index:1）之上，
   才能收到 hover/pointer 事件；同時裝飾插畫（.cta-illustrations）維持在文字底下 */
.cta-cursor-layer {
  position: absolute;
  inset: 0 5%;
  z-index: 2;
  pointer-events: none;
}

.cta-illust {
  position: absolute;
  width: auto;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(21, 22, 26, 0.12));
  /* 移除持續浮動動畫，避免畫面太花俏；進場時的 .reveal 動畫仍保留 */
  /* 用 margin 做鼠標接近時的位移效果，避免跟 transform（進場動畫）互相搶值 */
  transition: margin 0.35s var(--ease-out);
}

.cta-illust-1 {
  left: 0%;
  top: calc(18% - 40px);
  width: 224px; /* 280px 縮小 20% */
  animation-delay: 0s;
}

.cta-illust-2 {
  /* 圖1 left:0%、寬度固定 200px，右邊界永遠等於「容器左邊 + 200px」，
     跟視窗寬度無關；改用純 px 位移（而不是用 % 位移）才能在各種螢幕寬度下
     都跟圖1保持固定間距，不會在較窄的螢幕（如 1280～1440px）又疊回去 */
  left: 144px; /* 124px 再往右移 20px */
  top: calc(23% + 30px);
  width: 108px;
  animation-delay: 0.4s;
}

.cta-illust-3 {
  left: 2%;
  top: 50%;
  width: 320px;
  animation-delay: 0.9s;
}

.cta-illust-4 {
  left: 3%;
  top: 47%;
  width: 120px;
  animation-delay: 1.3s;
}

.cta-illust-5 {
  left: calc(69% + 60px);
  top: calc(20% - 40px);
  width: 320px;
  animation-delay: 0.2s;
}

.cta-illust-6 {
  left: calc(67% + 60px);
  top: calc(13% - 40px);
  width: 96px;
  animation-delay: 1.6s;
}

.cta-illust-7 {
  left: calc(85% + 60px);
  top: calc(44% + 10px); /* 往上移 40px，疊在圖5卡片上方 */
  width: 160px;
  animation-delay: 0.7s;
}

.cta-illust-8 {
  left: calc(84% + 20px);
  top: calc(57% + 10px); /* 往下移 10px */
  width: 122px;
  animation-delay: 1.1s;
}

.cta-illust-9 {
  left: calc(79% + 20px);
  top: 75%;
  width: 112px;
  animation-delay: 1.8s;
}

.cta-cursor-slot {
  position: absolute;
  left: 74%;
  top: 65%;
  width: 54px;
  height: 63px;
}

.cta-cursor-slot .cta-illust-10,
.cta-cursor-slot .cta-illust-11 {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  animation: none;
}

.cta-cursor-slot .cta-illust-11 {
  z-index: 1;
  filter: drop-shadow(0 6px 14px rgba(21, 22, 26, 0.1));
  transform: scale(0.96); /* 等比縮小 4%，避免邊線超出 10 號鼠標圖 */
  transform-origin: center;
}

.cta-cursor-slot .cta-illust-10 {
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transform: translate(0px, 0px);
}

/* 拖曳跟隨中：隱藏使用者真實鼠標，讓 10 號圖本身就是「放大版鼠標」；
   同時讓 10 號圖不再攔截 pointer 事件，底下的按鈕 / 插畫才能正常收到 hover。
   按鈕、連結等元素自己有 cursor:pointer 規則，直接寫在該元素上，
   優先權會蓋過從 body 繼承下來的 cursor:none，所以滑過按鈕時鼠標又會冒出來，
   這裡額外用 * 選擇器＋!important，確保拖曳期間所有子元素都維持隱藏鼠標。 */
body.cta-drag-active,
body.cta-drag-active * {
  cursor: none !important;
}

.cta-cursor-slot .cta-illust-10.is-dragging {
  pointer-events: none;
}

.cta-cursor-slot .cta-illust-10.is-dragging {
  filter: drop-shadow(0 10px 18px rgba(21, 22, 26, 0.22));
}

.cta-cursor-slot .cta-illust-10.is-snapping {
  /* 吸附動畫過程中也要保持 pointer-events:none，
     否則動畫剛開始那一瞬間，10 號圖其實還疊在滑鼠原本的位置上，
     一旦提早恢復 pointer-events，會立刻重新觸發 pointerenter，導致「吸回去馬上又被拖走」 */
  pointer-events: none;
  transition: transform 0.28s var(--ease-out);
}

/* ── 手機／平板插畫排版：參考 Figma「平板」「手機」兩份設計稿
   （node-id 3230:143737、3230:144481）的插畫分組與裁切風格，
   但座標改成用「文字安全區」實測換算，不是直接套 Figma 的百分比。
   原因：Figma 那兩份稿是在一個 768×642（平板）／349×400（手機）的
   固定方框裡排版，但我們的 #cta 是高度隨內容變動的流動版面，
   實測平板 641px 寬時方框只有 414px 高，文字區塊上下可用空間
   最少只剩 65px 左右，直接套 Figma 百分比會整批壓到文字上。

   改用的規則：
   - 平板（641–1024px）：文字區塊左右各有 ≥80px 安全邊界（隨寬度變寬），
     插畫改成貼左右邊「橫向」躲開文字，只要插畫左右邊界落在安全邊界內，
     不管插畫多高、怎麼上下跨都不會壓到文字，所以可以大膽做出跟電腦版
     一樣「兩側堆疊」的視覺效果。
   - 手機（≤640px）：左右安全邊界剩不到 26px（塞不下插畫），但文字上下
     還有 ≥65px 空間，所以改成貼「上下」邊，插畫壓縮到安全高度內，
     橫向反而可以大方一點、甚至貼齊或超出左右邊裁切掉。
   兩種做法都用實際量測到的最小安全值再扣一點緩衝，確保各斷點都不會
   壓到文字。 */

/* 平板直式以下（≤1180px）：不管怎麼縮放／位移，插畫都很容易跟文字
   擠在一起、邊緣裁切也不好看，乾脆整組隱藏，只留文字跟按鈕，版面更乾淨 */
@media (max-width: 1180px) {
  .cta-cursor-layer {
    display: none;
  }

  .cta-illustrations {
    display: none;
  }

  #cta {
    overflow: hidden;
  }
}

.cta-box {
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 0;
  text-align: center;
  position: relative;
  overflow: visible;
  box-shadow: none;
}

.cta-title {
  font-size: round(nearest, clamp(2.2rem, 5.2vw, 3.4rem), 2px);
  font-weight: 800; /* 原本 900 與 H1 同級，降回跟其他 H2（.section-title / .about-title）一致的 800，維持 H1 字重獨佔性 */
  color: var(--text-primary);
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

/* 手機版字級下限原本跟 H1 一樣高（min 2.2rem=35.2px），窄螢幕下
   標題又有 <br> 強制斷行，兩行文字還各自再自動換行，斷行過多，
   這裡單獨把手機版的字級下限壓低，減少自動換行的次數 */
@media (max-width: 640px) {
  .cta-title {
    font-size: round(nearest, clamp(1.5rem, 7.2vw, 2.2rem), 2px);
  }
}

.cta-desc {
  font-size: var(--text-md);
  color: var(--text-secondary);
  margin-bottom: var(--space-4xl);
  position: relative;
  z-index: 1;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.cta-note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

/* ─ Footer ─ */
#footer {
  background: var(--swatch-slate-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-8xl) 0 var(--space-4xl);
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-7xl);
  padding-bottom: var(--space-6xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-2xl);
}

.footer-brand {
  max-width: 360px;
}

.footer-brand .logo {
  display: inline-block;
  margin-bottom: var(--space-xs);
}

.footer-brand .logo-img {
  height: calc(32px * 1.3 * 1.3); /* footer logo 累計再放大 30%（共放大兩次），不影響 header logo */
}

/* 「中小企業的數位科技顧問團隊」跟下面地址／email／電話合併成同一個容器，
   用同一組 flex column + gap 統一控制間距，不再各自用 margin-bottom 各管各的 */
/* gap 跟下面 .footer-contact-list 內部的間距（--space-2xs）統一，
   「中小企業的數位科技顧問團隊」到地址這行的間距，才會跟地址／email／
   電話彼此之間的間距一致，不會一邊鬆一邊緊 */
.footer-contact-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

/* 文字樣式比照下方地址／email／電話（.footer-contact-item），
   左側菱形標記沿用 .contact-info-label::before 的旋轉方塊造型，
   但顏色改成跟文字一致的灰階，不要用品牌綠（避免看起來像強調色） */
.footer-brand-desc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  color: var(--text-inverse-secondary);
  line-height: 1.75;
}

/* 寬度跟下面地址／email／電話的 svg 圖示（14px）對齊，裡面的菱形本身維持
   8px，用 flex 置中在這個 14px 的盒子裡，文字才會跟下面幾行同一個起始點 */
.footer-brand-desc-marker {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.footer-brand-desc-marker::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  /* 改成跟文字、下面圖示同一個灰階顏色，不要綠色 */
  background: var(--text-inverse-secondary);
  transform: rotate(45deg);
}

.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-base);
  color: var(--text-inverse-secondary);
}

.footer-contact-item svg {
  transition: color var(--duration-fast) ease;
}

.footer-contact-item a {
  color: inherit;
  transition: color var(--duration-fast) ease;
}

/* 只在「真的有滑鼠、支援 hover」的裝置上套用綠色 hover 效果；
   手機/平板是觸控裝置，:hover 點一下會卡住不放開，圖示跟文字會一直維持
   綠色、誤以為是預設顏色，所以用 (hover: hover) 排除觸控裝置 */
@media (hover: hover) and (pointer: fine) {
  .footer-contact-item a:hover {
    color: var(--swatch-brand-green);
  }

  /* data-icon 的 span 實際上會被 js/icons.js 換成 <svg stroke="currentColor">，
     跟文字連結是平輩元素，文字 hover 時圖示不會跟著變色；
     用 :has() 偵測「這個項目裡的連結正在被 hover」，讓圖示一起變成品牌綠 */
  .footer-contact-item:has(a:hover) svg {
    color: var(--swatch-brand-green);
  }
}

.footer-social {
  display: flex;
  gap: var(--space-xs);
}

.social-link {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse-muted);
  transition: all var(--duration-fast) ease;
}

.social-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
  transition: transform var(--duration-fast) ease;
}

.social-link:hover {
  background: rgba(51, 204, 51, 0.15);
  border-color: rgba(51, 204, 51, 0.4);
  color: var(--swatch-brand-green);
}

.social-link:hover svg {
  transform: scale(1.12);
}

/* 連結選單靠右，三欄等寬 */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8xl);
  margin-left: auto;
}

.footer-col {
  min-width: 100px;
}

.footer-col-title {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inverse-muted);
  margin-bottom: var(--space-md);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-base);
  color: var(--text-inverse-secondary);
  transition: color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

/* 前綴改用 CSS 畫出的直線（非文字符號），高度對齊文字本身 */
.footer-link::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: rgba(255, 255, 255, 0.35);
  transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.footer-link:hover {
  color: var(--swatch-brand-green);
  transform: translateX(8px);
}

.footer-link:hover::before {
  background-color: var(--swatch-brand-green);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: var(--text-xs);
  color: var(--text-inverse-faint);
}

.footer-legal-links {
  display: flex;
  gap: var(--space-md);
}

.footer-legal-link {
  font-size: var(--text-xs); /* 與版權聲明字級一致 */
  color: var(--text-inverse-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) ease;
}

.footer-legal-link:hover {
  color: var(--swatch-brand-green);
}

/* ─ LINE Fixed ─ */
#line-fixed {
  position: fixed;
  right: 1.5rem;
  bottom: 1.75rem;
  bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  z-index: var(--z-overlay-top);
  pointer-events: auto;
}

.line-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #06C755;
  color: var(--swatch-white);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-rounded);
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.45);
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}

.line-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--swatch-white);
  flex-shrink: 0;
}

.line-btn:hover {
  background: #05b34c;
  color: var(--swatch-white);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 28px rgba(6, 199, 85, 0.55);
}

/* ─ Reveal Animations ─ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

/* 注意：transform 用 none 而非 translateY(0) ——
   後者在視覺上雖然相同，但仍會讓這個元素變成內部 position:sticky
   子元素的 containing block，導致 sticky 失效（例如 .process-header、
   .services-anchor-nav 這類「本身帶 reveal、內部又有 sticky 子元素」的區塊）。 */
.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 {
  transition-delay: 100ms;
}

.reveal-delay-2 {
  transition-delay: 200ms;
}

.reveal-delay-3 {
  transition-delay: 300ms;
}

.reveal-delay-4 {
  transition-delay: 400ms;
}

.reveal-delay-5 {
  transition-delay: 500ms;
}

/* ══════════════════════════════════════════════════════════
   表單元件與提示訊息（新增提案，目前網站沒有任何頁面使用到，
   先立好規範供未來聯絡表單／訂閱表單／頁面提示等需求使用）
   詳細規劃見 design-system.html「表單元件」「提示訊息 Alert」區塊
   ══════════════════════════════════════════════════════════ */

/* ── 表單元件 Form ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-lg);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.form-label .form-required {
  color: var(--state-error);
  margin-left: 2px;
}

.form-input,
.form-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--swatch-white);
  border: 1px solid var(--border-light-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-input:hover,
.form-textarea:hover {
  border-color: var(--swatch-cloud-light);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--swatch-brand-green);
  box-shadow: 0 0 0 3px rgba(51, 204, 51, 0.15);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.form-input:disabled,
.form-textarea:disabled {
  background: var(--swatch-ivory-medium);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-group.has-error .form-input,
.form-group.has-error .form-textarea {
  border-color: var(--state-error);
}

.form-group.has-error .form-input:focus,
.form-group.has-error .form-textarea:focus {
  box-shadow: 0 0 0 3px var(--state-error-bg);
}

.form-error-message {
  font-size: var(--text-xs);
  color: var(--state-error);
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-submit-btn {
  margin-top: var(--space-2xs);
}

/* ── 提示訊息 Alert ── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-body {
  flex: 1;
  min-width: 0;
}

.alert-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.alert-desc {
  color: var(--text-secondary);
}

.alert-success {
  background: var(--state-success-bg);
  border-color: rgba(51, 204, 51, 0.3);
}

.alert-success .alert-icon {
  color: var(--state-success);
}

/* ─ Responsive ─ */
@media (max-width: 1024px) {
  .header-inner {
    height: 64px;
  }

  .logo-img {
    height: 28px;
  }

  .header-actions {
    gap: var(--space-xs);
  }

  .header-cta-btn {
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .hamburger {
    display: flex;
  }

  /* ─ 平板與手機版展開選單：改成滿版全螢幕覆蓋＋由右往左滑入，
     取代原本只在 header 底下展開一小塊、還會被裁切出捲軸的下拉樣式，
     質感與桌機版的滿版體驗更一致 ─ */
  .nav-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    background: var(--swatch-slate-dark);
    padding: 0;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.45s ease;
    overflow-y: auto;
    z-index: var(--z-nav-menu);
  }

  .nav-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
  }

  .nav-menu-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 90%;
    margin: auto;
    padding: var(--space-9xl) var(--space-2xl) var(--space-5xl);
    gap: 0;
  }

  .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-lg) 0;
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--swatch-ivory-light);
    border-bottom: 1px solid rgba(227, 218, 204, 0.12);
    border-radius: 0;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .nav-link:hover,
  .nav-link:active {
    background: rgba(227, 218, 204, 0.04);
    color: var(--swatch-oat);
  }

  .nav-item {
    width: 100%;
    position: static;
  }

  /* 文字連結獨占整列（含編號）；子選單維持在連結下方的正常文件流 */
  .nav-item.has-dropdown {
    position: relative;
    border-bottom: 1px solid rgba(227, 218, 204, 0.12);
  }

  .nav-item.has-dropdown .nav-link-dropdown {
    border-bottom: none;
    width: 100%;
  }

  .dropdown-menu {
    grid-column: 1 / 3;
    grid-row: 2;
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.22);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
    min-width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dropdown-menu::before {
    display: none;
  }

  /* 子選單現在有 5 個項目（服務總覽＋4 個分類），原本 260px 只夠裝 4 個、
     最後一項「聊天機器人」會被切掉一半。改用足夠大的高度（600px，遠大於
     實際內容高度）取代固定算死的數字，展開時一定完整顯示全部項目，
     不用每次增減子選單項目都要回來重算這個值 */
  .nav-item.dropdown-open .dropdown-menu {
    max-height: 600px;
    border-top: 1px solid rgba(227, 218, 204, 0.08);
  }

  .dropdown-link {
    padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    color: rgba(250, 249, 245, 0.8);
    border-radius: 0;
    border-bottom: 1px solid rgba(227, 218, 204, 0.06);
  }

  .dropdown-link:last-child {
    border-bottom: none;
  }

  .dropdown-link:hover,
  .dropdown-link:active {
    background: rgba(227, 218, 204, 0.06);
    color: var(--swatch-white);
  }

  /* 「服務總覽」是連到 services.html 本身，跟底下其他四個子分類
     性質不同，用品牌綠＋加粗區隔出來，避免被誤認成第五個子分類 */
  .dropdown-link-overview {
    color: var(--swatch-brand-green);
    font-weight: 700;
  }

  .dropdown-link-overview:hover,
  .dropdown-link-overview:active {
    color: var(--swatch-brand-green);
    background: rgba(51, 204, 51, 0.08);
  }

  .hero-content {
    gap: var(--space-6xl);
  }

  .hero-copy {
    grid-template-columns: 1fr;
    gap: var(--space-sm); /* 文字跟儀表板之間的間距縮減一半 */
  }

  .hero-visual {
    width: 100%;
  }

  .hero-mockup {
    max-width: 100%;
    width: 100%;
  }

  .mockup-card {
    width: 100%;
  }

  .floating-badge-1 {
    right: 10px;
  }

  .floating-badge-2 {
    left: 10px;
  }

  /* 平板以下：退回一般直式排版，不做 sticky 固定。
     DOM 順序本來就是「大標題 → 錨點(隱藏) → 服務卡片 → CTA」，
     不需要額外用 order 重新排序。 */
  .services-scroll-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin: var(--space-2xl) 0;
  }

  .services-sticky-col {
    position: static;
    gap: var(--space-lg);
  }

  .services-anchor-nav {
    display: none;
  }

  .services-scroll-panels {
    gap: var(--space-md);
  }

  .services-scroll-panels .service-card {
    min-height: 0;
  }

  .service-cta-block {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-xl);
    margin-top: var(--space-xl);
  }

  .service-cta-desc {
    max-width: 100%; /* 直向堆疊時不再照桌面版的比例限寬，讓文字用滿寬度 */
  }

  /* 手機版空間有限，1/2/3 號裝飾圖先隱藏，只留火箭 */
  .cta-deco-1,
  .cta-deco-2,
  .cta-deco-3 {
    display: none;
  }

  /* 火箭原本的 right:254px 是照桌機版寬版橫幅（1200px）算的位置，
     手機版卡片窄很多，同一個數值會把火箭大半推到卡片外、
     只露出一小塊疊在文字左上角。改成真的貼在右下角當背景裝飾（文字現在也墊高了 z-index，
     不會再被蓋住），尺寸與不透明度維持跟桌機版一樣，不縮小、不調淡 */
  .cta-deco-4 {
    right: -20px;
    top: auto;
    bottom: -20px;
    width: 231px; /* 手機版維持桌機版原本的固定尺寸，不套用桌機版新增的撐滿高度邏輯 */
    height: 161px;
  }

  .digital-header {
    text-align: left;
    margin-bottom: var(--space-4xl);
  }

  .digital-header .section-badge {
    justify-content: flex-start;
  }

  .digital-header .section-desc {
    margin: var(--space-sm) 0 0;
    text-align: left;
    max-width: 100%;
  }

  .digital-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5xl);
  }

  .process-header {
    position: static;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .faq-sticky {
    position: static;
  }

}

@media (max-width: 1180px) {
  /* footer-main/footer-nav 間距原本只在 1024px 以下收窄，但 iPad Pro 13 吋
     直式等大尺寸平板寬度落在 1024～1180px 之間，仍套用桌機版的寬間距
     （footer-main gap 64px、footer-nav 兩欄間距各 72px），導致導覽三欄
     （專業／分享／我們）把左側地址欄硬壓縮到換行，所以把這個收窄斷點
     拉高到 1180px，涵蓋這些平板直式寬度 */
  .footer-main {
    gap: var(--space-4xl);
  }

  .footer-nav {
    gap: var(--space-4xl);
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 var(--space-md);
  }

  .nav-menu-container {
    max-width: 100%;
    padding: 0 var(--space-md);
  }

  /* footer 內容直接貼齊 .container 左右邊界（20px），沒有像上面卡片區塊那樣
     多一層卡片內距，視覺上會比較貼邊、擁擠，這裡額外加一點左右留白 */
  #footer .container {
    padding: 0 var(--space-xl);
  }

  .header-actions {
    gap: var(--space-xs);
  }

  .header-cta-btn {
    padding: 0.375rem var(--space-sm);
    font-size: var(--text-sm);
  }

  .hero-visual {
    width: 100%;
  }

  .hero-mockup {
    max-width: 100%;
    width: 100%;
  }

  .mockup-card {
    width: 100%;
  }

  .mockup-body {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-sm);
  }

  .mockup-top-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 系統整合列表在手機版寬度更緊，次要的時間戳資訊先隱藏，
     避免跟狀態標籤擠在同一行時把整排撐爆、被外層裁切 */
  .mockup-sync-sub {
    display: none;
  }

  .mockup-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 手機版兩個浮動標籤放大一倍，並往內移一點讓它稍微疊在儀表板卡片上，
     營造更有層次的漂浮感；但要避開卡片底部「觸發 ERP 同步」按鈕（在快速操作
     兩欄按鈕格的左下角，跟 floating-badge-2 同一側），所以 badge-2 保留在按鈕列
     上緣附近、不往下疊到按鈕列本身 */
  .floating-badge {
    font-size: round(nearest, calc(var(--text-base) * 1.7), 2px);
    padding: 1.1rem var(--space-lg);
    gap: 10px;
  }

  .floating-badge svg {
    width: 1.7rem;
    height: 1.7rem;
  }

  .floating-badge-1 {
    top: -32px; /* 8px 再往上移 40px */
    right: 8px;
  }

  .floating-badge-2 {
    bottom: -74px; /* 移到儀表板最底部，貼齊卡片下緣，避開下方按鈕列 */
    left: 8px;
  }

  /* 手機版趨勢分析摘要卡片（本月累積處理 / 平均簽核耗時 / SLA 準時達成率）
     欄位太窄導致數字跟徽章換行變擠，縮小內距與字級讓「142 件」「↑ 18%」
     這類數值＋徽章維持同一行，不換行 */
  .mockup-chart-pills {
    gap: 4px;
  }

  .chart-pill {
    padding: 8px 6px;
  }

  .chart-pill-v {
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chart-pill-badge {
    font-size: var(--text-mockup-2xs);
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chart-pill-k {
    font-size: var(--text-mockup-2xs);
  }

  .service-card {
    padding: var(--space-xl) var(--space-md);
  }

  .digital-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .process-layout {
    grid-template-columns: 1fr;
    gap: var(--space-4xl);
  }

  .process-header {
    position: static;
  }

  .process-step {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }

  .process-step-num {
    width: 38px;
    height: 38px;
    font-size: var(--text-base);
  }

  .process-step-title {
    font-size: var(--text-base);
  }

  .process-step-desc {
    font-size: var(--text-sm);
  }

  .portfolio-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-3xl);
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .footer-main {
    flex-direction: column;
    gap: var(--space-4xl);
  }

  .footer-nav {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 原本三欄太擠，手機版改成兩欄 */
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
  }

  #line-fixed {
    right: 1.15rem;
    bottom: 1.25rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    right: calc(1.15rem + env(safe-area-inset-right, 0px));
  }

  .line-btn {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
  }
}

@media (max-width: 480px) {
  /* 手機窄螢幕（iPhone SE 等 375～409px 寬）下，100+/200+/300+ 三個統計數字
     原本的字級＋間距加總寬度會超過螢幕，導致整頁被撐寬出現橫向捲動、
     最右邊數字被切掉，因此縮小字級並收緊間距，並加上 flex-wrap 當保險，
     確保無論如何都不會超出螢幕寬度 */
  .hero-stats {
    gap: var(--space-md);
    flex-wrap: wrap;
  }

  .hero-stat-item strong {
    font-size: 28px;
  }

  .hero-stat-item span {
    font-size: var(--text-xs);
  }

  .mockup-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-xs);
  }

  .mockup-nav {
    display: none;
  }

  .mockup-titlebar {
    padding: var(--space-xs) var(--space-sm);
  }

  .mockup-titlebar-status {
    display: none;
  }

  .mockup-stat {
    padding: 8px 10px;
  }

  .mockup-stat-value {
    font-size: var(--text-base);
  }

  .floating-badge {
    font-size: round(nearest, calc(var(--text-sm) * 1.7), 2px);
    padding: 0.7rem var(--space-sm);
    gap: 8px;
  }

  .floating-badge svg {
    width: 1.3rem;
    height: 1.3rem;
  }

  .about-title {
    font-size: var(--text-2xl);
  }

  .about-desc {
    font-size: var(--text-base);
    line-height: 1.8;
  }

  .about-badges-wrapper {
    gap: 14px 10px;
    margin-top: var(--space-3xl);
    padding: 0 var(--space-2xs);
  }

  .about-floating-badge .badge-visual {
    font-size: var(--text-sm);
    padding: var(--space-xs) 0.85rem;
  }
}
/* ================================================
   入場動畫 Splash Intro（Logo 全螢幕開場）
   Logo 拆成圖示／文字兩張圖：圖示先在畫面正中央淡入、停留一下，
   接著整個往左推移到跟文字組合後最終該在的位置，文字緊接著淡入＋
   輕輕滑入定位，動作連貫滑順。停留片刻後整個淺色畫面往上滑走
   （不是淡出），露出網站內容，只在首次載入頁面時播放一次。
   尺寸比原本 Logo 放大 40%（原本 design height 36px → 50px）。
   背景改用跟網站主背景同一色（暖象牙白），搭配深色版 Logo，
   跟後面露出的網站內容亮度銜接自然，眼睛不會被反差嚇到。 */
.splash-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--swatch-ivory-light);
  overflow: hidden;
  animation: splash-panel-up 0.4s cubic-bezier(0.6, 0, 0.2, 1) 1.55s forwards;
}

.splash-logo-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 47px;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: splash-icon-move 1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}

.splash-logo-text {
  position: absolute;
  top: 50%;
  left: calc(50% - 69.5px);
  width: 200px;
  height: auto;
  opacity: 0;
  transform: translateY(-50%) translateX(-8px);
  animation: splash-text-in 0.45s ease-out 1s forwards;
}

@keyframes splash-icon-move {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateX(-107px);
  }
}

@keyframes splash-text-in {
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes splash-panel-up {
  to {
    transform: translateY(-100%);
  }
}

body.splash-locked {
  overflow: hidden;
}

/* 手機選單改成滿版全螢幕後，背後頁面內容不該還能被滑動 */
body.nav-menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .splash-intro {
    animation: none;
    display: none;
  }
}

@media (max-width: 768px) {
  .splash-logo-icon {
    width: 38px;
    animation-name: splash-icon-move-mobile;
  }

  .splash-logo-text {
    width: 160px;
    left: calc(50% - 56px);
  }

  @keyframes splash-icon-move-mobile {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%);
    }
    25% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
    55% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) translateX(-86px);
    }
  }
}

/* ── 行動裝置：各區塊上下留白整體抓半，避免捲動距離過長 ──
   桌機版每個區塊的 padding 是照桌機比例調的，手機螢幕窄，同樣的留白
   比例顯得空洞、要滑很久才能看到下一個區塊，這裡統一抓「大約桌機版的
   一半」，视覺節奏維持一致但更緊湊。只調上下 padding，不動左右間距
   （左右由 .container 統一控制）跟區塊內部各元件自己的間距。 */
@media (max-width: 768px) {
  #hero {
    padding: 76px 0 72px; /* 上方桌機版 8rem 的 60%（76.8px 取整為偶數）；
      下方維持 72px 固定值，避免浮動標籤「人工作業減少 60%」跟下一區塊重疊
      （若照 60% 算只剩 38.4px，不夠標籤所需的疊出高度） */
  }

  /* 「客製化系統設計開發」用 .accent-text 特別放大到 60px，
     「為您的營運流程打造一套系統」是 .hero-h1 本身的 36px，
     手機版兩行都偏大、佔掉太多版面，一起縮小一階 */
  .hero-h1 {
    font-size: 34px;
  }

  .hero-h1 .accent-text {
    font-size: 56px; /* 48px 再放大 8px → 56px */
  }

  #services {
    padding: var(--space-5xl) 0;
  }

  #digital {
    padding: var(--space-3xl) 0;
  }

  #process {
    padding: var(--space-3xl) 0 var(--space-8xl);
  }

  #portfolio {
    padding-bottom: var(--space-3xl);
  }

  #faq {
    padding: var(--space-3xl) 0 var(--space-7xl);
  }

  #cta {
    padding: var(--space-7xl) 0;
  }

  #footer {
    padding: var(--space-3xl) 0 var(--space-md); /* 桌機版 4.5rem/2.5rem 的 50% */
  }

  /* #about 原本用 900px 切版、480px 又再切一次 padding，跟其他區塊統一改在
     768px 這個斷點，比例也統一抓桌機版 10rem 的 50% */
  #about {
    padding: 5rem 0;
  }
}

/* 首頁服務總覽：左側大標題、右側服務說明。 */
.services-overview {
  position: relative;
  z-index: 1;
  padding-top: var(--space-9xl);
}

.services-overview-header {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5xl);
  text-align: left;
}

.services-overview .section-title {
  margin: 0;
  font-size: round(nearest, clamp(2rem, 3.6vw, 4.5rem), 2px);
  line-height: 1.45;
  letter-spacing: -0.035em;
  scroll-margin-top: 100px;
}

.services-overview .section-desc {
  width: 100%;
  max-width: var(--enterprise-card-max-width, 810px);
  justify-self: end;
  margin: 0;
  font-size: round(nearest, clamp(1.125rem, 1.5vw, 1.375rem), 2px);
  line-height: 1.85;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .services-overview-header {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .services-overview .section-desc {
    max-width: none;
    justify-self: start;
  }
}

@media (max-width: 768px) {
  .services-overview {
    padding-top: var(--space-5xl);
  }

  .services-overview .section-title {
    font-size: round(nearest, clamp(1.875rem, 8.2vw, 3.75rem), 2px);
  }
}

/* 以語意分組換行，避免服務名稱或句尾只剩零星文字。 */
.services-copy-line {
  display: block;
  text-wrap: balance;
}

.services-copy-phrase {
  display: inline-block;
}

/* 標記位於文字後方，隨既有進場狀態由左至右畫出。 */
.services-marker,
.cta-marker {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.services-marker::before,
.cta-marker::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.035em;
  right: -0.035em;
  bottom: 0.13em;
  height: 0.46em;
  background: rgba(51, 204, 51, 0.45); /* 品牌綠 var(--swatch-brand-green) 的淺色版本，與設計系統同色系 */
  border-radius: 0.06em 0.1em 0.04em 0.08em;
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left center;
  transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;
}

.services-overview-header.visible .services-marker::before,
.cta-box.visible .cta-marker::before {
  transform: scaleX(1) rotate(-1deg);
}

@media (prefers-reduced-motion: reduce) {
  .services-marker::before,
  .cta-marker::before {
    transition: none;
    transform: scaleX(1) rotate(-1deg);
  }
}

.services-title-phrase {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .services-title-phrase {
    white-space: normal;
  }
}

/* ─ 手機版選單：分層滑入效果（js/staggered-menu.js，GSAP 控制開合動畫） ─ */
/* 桌機版隱藏增強元素（手機版於下方 media 中顯示） */
.sm-prelayers,
.sm-socials {
  display: none;
}

@media (max-width: 1024px) {
  .sm-prelayers,
  .sm-socials {
    display: flex;
  }

  body.nav-menu-open .line-btn {
    opacity: 0;
    pointer-events: none;
  }

  .sm-prelayers {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    z-index: calc(var(--z-nav-menu) - 1);
  }

  .sm-prelayers.is-active {
    visibility: visible;
  }

  .sm-prelayer {
    position: absolute;
    inset: 0;
  }

  /* 開合交由 GSAP 控制：清除 CSS 的 translateX 與 transition，
     避免 GSAP 把初始位移重複計算進去 */
  .nav-menu.sm-enhanced,
  .nav-menu.sm-enhanced.is-active {
    transform: none;
    transition: none;
  }

  .nav-menu.sm-enhanced .nav-link {
    position: relative;
    overflow: hidden;
    padding: var(--space-md) 0;
    font-size: round(nearest, clamp(2rem, 9vw, 3rem), 2px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  .nav-menu.sm-enhanced .sm-itemLabel {
    display: inline-block;
    will-change: transform;
    transform-origin: 50% 100%;
  }

  .nav-menu.sm-enhanced .nav-link[data-index]::before {
    content: attr(data-index);
    position: absolute;
    top: calc(var(--space-md) + 2px); /* 與標題字形頂端對齊 */
    right: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    /* 明確指定行高（而不是沿用字體預設值），下面箭頭按鈕的 top 位置
       才能用固定的 px 數字精準算出「正好落在這個數字下方」，不會因為
       不同環境實際載入的字體、預設行高不同而跟著跑位 */
    line-height: 16px;
    letter-spacing: 0.1em;
    color: var(--swatch-brand-green);
  }

  .nav-menu.sm-enhanced .dropdown-link {
    font-size: var(--text-base);
  }

  .sm-socials {
    margin-top: var(--space-3xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    width: 100%;
    text-align: left;
  }

  .sm-socials-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--swatch-brand-green);
  }

  .sm-socials-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-xl);
  }

  .sm-socials-link {
    font-size: var(--text-base);
    color: var(--swatch-ivory-light);
    text-decoration: none;
  }

  .sm-socials-link:hover {
    color: var(--swatch-brand-green);
  }
}

/* 桌機導覽使用固定字級，避免寬螢幕過度放大；手機維持原有斷點。 */
@media (min-width: 1025px) {
  #header .nav-link,
  #header .header-cta-btn {
    font-size: var(--text-base);
  }
  #header .dropdown-link {
    font-size: var(--text-base);
  }
  /* 桌機由「專業服務」直達總覽；手機仍保留子選單入口。 */
  #header .dropdown-link-overview {
    display: none;
  }
}

/* 全站鍵盤焦點統一品牌綠，保留可見的操作位置。 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--swatch-brand-green);
  outline-offset: 3px;
}
#header .header-cta-btn { white-space: nowrap; }

/* 知識筆記卡片：日期與分類為同一列小字 meta，標題為主層級 */
.article-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
	margin-bottom: var(--space-xs);
}

.article-card-meta .portfolio-desc {
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0 var(--space-2xs) 0 0;
}

.article-card-meta .blog-tag-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.article-card-meta .blog-tag-item {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.6;
	color: var(--text-secondary);
	background: var(--swatch-ivory-medium);
	border: 1px solid var(--border-light-subtle);
}

/* 三個主列表頁共用 Hero 標題，避免各頁字級隨版型分歧。 */
.page-hero-title {
  font-family: var(--font-sans);
  font-size: round(nearest, clamp(2.25rem, 4vw, 4rem), 2px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

@media (max-width: 991px) {
  .page-hero-title { font-size: round(nearest, clamp(2.1rem, 7vw, 3rem), 2px); }
}

/* 全站字級以 2px 為單位；相對字級也需取偶數，避免繼承後出現小數。 */
small { font-size: round(nearest, 0.8em, 2px); }
sub, sup { font-size: round(nearest, 0.75em, 2px); }