/* :root 代表整個網頁，在這裡定義可重複使用的 CSS 變數（全站共用的柔和醫療色票與字體） */
:root {
  /* 品牌主色：主要用於行動按鈕、連結與重點標記 */
  --color-primary: #005A8D;
  /* 主要頁面背景色：晨霧白 */
  --color-bg: #F7F9FA;
  /* 柔和淺藍表面色：用於區塊過渡、媒體面板與輕柔卡片底色 */
  --color-surface: #E5EEF4;
  /* 低飽和藍綠點綴色：用於細緻邊框與次要標記 */
  --color-accent: #BCD4D0;
  /* 暖米白表面色：用於 Mission 與聯絡區柔和漸層 */
  --color-warm: #F0E9E1;
  /* 主標題與內文深色文字：深藍灰，在淺色背景上清晰沉穩 */
  --color-text: #203A49;
  /* 純白色：導覽列背景、表單輸入框與藍色按鈕文字 */
  --color-white: #FFFFFF;
  /* 標題字體：Plus Jakarta Sans，載入失敗時退回系統無襯線字體 */
  --font-heading: "Plus Jakarta Sans", sans-serif;
  /* 內文字體：Inter，載入失敗時退回系統無襯線字體 */
  --font-body: "Inter", sans-serif;
  /* 導覽列高度：影響頂端白色列的厚度 */
  --header-height: 60px;
/* :root 區塊結束 */
}

/* 讓所有元素的寬度計算包含內距與邊框,避免版面意外變寬 */
* {
  /* 寬高計算方式改為包含 padding 與 border */
  box-sizing: border-box;
/* 通用規則結束 */
}

/* 平滑捲動設定,套用在整個 html */
html {
  /* 點擊錨點連結時,頁面平滑捲動而非瞬間跳轉 */
  scroll-behavior: smooth;
/* html 規則結束 */
}

/* 整個頁面主體的基本樣式 */
body {
  /* 移除瀏覽器預設外距,避免頁面四周出現空白 */
  margin: 0;
  /* 頁面背景色使用 #F7F9FA */
  background-color: var(--color-bg);
  /* 一般文字顏色使用深藍灰 */
  color: var(--color-text);
  /* 內文使用 Inter 字體 */
  font-family: var(--font-body);
  /* 內文字重為 400(一般粗細) */
  font-weight: 400;
  /* 基本字級 16px,是舒適的閱讀大小 */
  font-size: 16px;
  /* 行高 1.6 倍,讓段落不擁擠 */
  line-height: 1.6;
/* body 規則結束 */
}

/* 所有標題共用樣式 */
h1 {
  /* 標題使用 Plus Jakarta Sans 字體 */
  font-family: var(--font-heading);
  /* 標題字重為粗體 700 */
  font-weight: 700;
  /* 不強制大寫,維持正常大小寫 */
  text-transform: none;
  /* 不加寬字距,維持正常字母間距 */
  letter-spacing: normal;
/* h1 規則結束 */
}

/* 導覽列:固定在頂端的白色長條 */
.site-header {
  /* sticky 讓導覽列捲動時黏在視窗頂端 */
  position: sticky;
  /* 黏在視窗最上方(距離頂端 0) */
  top: 0;
  /* 層級設高一點,讓導覽列蓋在其他內容上方 */
  z-index: 100;
  /* 導覽列背景為純白,所有狀態都一樣 */
  background-color: var(--color-white);
/* 導覽列規則結束 */
}

/* 捲動後的導覽列:仍維持純白,不改變顏色 */
.site-header.is-scrolled {
  /* 捲動狀態同樣是純白背景(無陰影、無邊框) */
  background-color: var(--color-white);
/* 捲動狀態規則結束 */
}

/* 導覽列內容容器 */
.header-inner {
  /* 使用 flex 讓 Logo、選單、按鈕排成一列 */
  display: flex;
  /* 垂直置中對齊所有項目 */
  align-items: center;
  /* Logo 在左,導覽在右 */
  justify-content: space-between;
  /* 內容最大寬度 1280px,與 hero 共用相同寬度,使 Logo 與 hero 文字左緣對齊 */
  max-width: 1280px;
  /* 左右自動外距,讓容器水平置中 */
  margin: 0 auto;
  /* 固定導覽列高度 */
  height: var(--header-height);
  /* 左右留 24px 空白,避免貼齊螢幕邊緣 */
  padding: 0 24px;
/* 容器規則結束 */
}

/* Logo 連結 */
.logo {
  /* 使用 flex 讓 Logo 圖片垂直置中 */
  display: flex;
  /* 垂直置中 */
  align-items: center;
  /* 不顯示底線 */
  text-decoration: none;
/* Logo 連結規則結束 */
}

/* Logo 圖片(沒有卡片、邊框或陰影裝飾) */
.logo-img {
  /* Logo 高度 34px(原 40px),寬度依原圖比例自動縮放,影響導覽列左側 Logo 大小 */
  height: 34px;
  /* 寬度自動,保持 Logo 原本比例 */
  width: auto;
  /* 顯示為區塊,避免下方多出行內空隙 */
  display: block;
/* Logo 圖片規則結束 */
}

/* 導覽區(連結 + 按鈕) */
.main-nav {
  /* 讓連結與按鈕並排 */
  display: flex;
  /* 垂直置中對齊 */
  align-items: center;
  /* 連結與按鈕之間的距離 */
  gap: 32px;
/* 導覽區規則結束 */
}

/* 導覽連結清單 */
.nav-list {
  /* 讓連結水平排列 */
  display: flex;
  /* 垂直置中 */
  align-items: center;
  /* 各連結之間的距離 */
  gap: 28px;
  /* 移除清單預設的圓點樣式 */
  list-style: none;
  /* 移除清單預設外距 */
  margin: 0;
  /* 移除清單預設內距 */
  padding: 0;
/* 清單規則結束 */
}

/* 導覽連結 */
.nav-link {
  /* 連結文字使用主色 #005A8D(白底上對比度約 7.5:1,清楚易讀) */
  color: var(--color-primary);
  /* 不顯示底線 */
  text-decoration: none;
  /* 導覽連結字級 15px(原 16px),影響頂端 About、AnXin、News 文字大小 */
  font-size: 15px;
  /* 一般字重 */
  font-weight: 400;
/* 連結規則結束 */
}

/* 滑鼠移到連結或鍵盤聚焦時 */
.nav-link:hover,
.nav-link:focus-visible {
  /* 顯示底線作為互動提示 */
  text-decoration: underline;
/* 互動狀態規則結束 */
}

/* 聯絡按鈕 */
.btn-contact {
  /* 以 inline-flex 讓文字在按鈕內垂直置中 */
  display: inline-flex;
  /* 文字垂直置中 */
  align-items: center;
  /* 按鈕背景使用主色 */
  background-color: var(--color-primary);
  /* 按鈕文字為白色(對比度約 7.5:1) */
  color: var(--color-white);
  /* 按鈕上下 8px、左右 16px 的內距,讓「Contact the team」按鈕更小巧 */
  padding: 8px 16px;
  /* 圓角 8px,讓按鈕邊角柔和 */
  border-radius: 8px;
  /* 不顯示底線 */
  text-decoration: none;
  /* 按鈕文字字級 15px(原 16px),影響導覽列右側按鈕大小 */
  font-size: 15px;
  /* 一般字重 */
  font-weight: 400;
  /* 文字不換行,避免按鈕變兩行 */
  white-space: nowrap;
/* 按鈕規則結束 */
}

/* 按鈕互動狀態 */
.btn-contact:hover,
.btn-contact:focus-visible {
  /* 稍微降低透明度,給使用者點擊回饋 */
  opacity: 0.9;
/* 按鈕互動規則結束 */
}

/* 手機選單按鈕:桌面版預設隱藏 */
.menu-toggle {
  /* 桌面版不顯示 */
  display: none;
  /* 移除按鈕預設背景 */
  background: none;
  /* 移除按鈕預設邊框 */
  border: 0;
  /* 按鈕內距,擴大可點擊範圍 */
  padding: 8px;
  /* 滑鼠移上去顯示手指游標 */
  cursor: pointer;
/* 選單按鈕規則結束 */
}

/* 漢堡選單的每一條線 */
.menu-bar {
  /* 線條需為區塊才能設定寬高 */
  display: block;
  /* 線條寬度 24px */
  width: 24px;
  /* 線條粗細 2px */
  height: 2px;
  /* 線條顏色為主色 #005A8D */
  background-color: var(--color-primary);
  /* 線條之間上下距離 */
  margin: 5px 0;
/* 線條規則結束 */
}

/* Hero 主視覺區塊：以自然光恢復照片為背景，左側疊加寬幅霧白水平漸層，文字使用深色 #203A49 */
.hero {
  /* 相對定位，讓桌面版背景照片與漸層遮罩能填滿整個區塊 */
  position: relative;
  /* 隱藏超出範圍的照片邊緣 */
  overflow: hidden;
  /* 基底背景為晨霧白 #F7F9FA */
  background-color: var(--color-bg);
  /* 文字使用深色 #203A49 */
  color: var(--color-text);
  /* 寬敞的上下留白，但不強制佔滿整個視窗高度 */
  padding: 88px 0;
/* hero 規則結束 */
}

/* Hero 內容容器（桌面版左側文字、右側保留給照片中的患者），與導覽列共用最大寬度與內距 */
.hero-inner {
  /* 置於照片與漸層遮罩上方 */
  position: relative;
  z-index: 1;
  /* 使用 grid 排版 */
  display: grid;
  /* 左側文字欄最大 560px，右側彈性空間讓照片中的患者清楚呈現 */
  grid-template-columns: minmax(0, 560px) 1fr;
  /* 欄位間距 48px */
  gap: 48px;
  /* 垂直置中 */
  align-items: center;
  /* 最大寬度 1280px，與導覽列對齊 */
  max-width: 1280px;
  /* 水平置中 */
  margin: 0 auto;
  /* 左右內距 24px */
  padding: 0 24px;
/* 容器規則結束 */
}

/* 左側文字容器 */
.hero-text {
  /* 確保文字位於漸層遮罩之上 */
  position: relative;
  z-index: 2;
/* 左側文字容器規則結束 */
}

/* Hero 上方小標籤「Delyo | Medical technology」 */
.hero-eyebrow {
  /* 與下方主標題距離 16px */
  margin: 0 0 16px;
  /* 使用品牌藍 #005A8D，在淺色背景上清晰且具專業感 */
  color: var(--color-primary);
  /* 字級 14px、中等偏粗 */
  font-size: 14px;
  font-weight: 600;
  /* 維持正常大小寫與字距 */
  text-transform: none;
  letter-spacing: normal;
/* 小標籤規則結束 */
}

/* Hero 主標題 */
.hero h1 {
  /* 與下方說明文字距離 20px */
  margin: 0 0 20px;
  /* 響應式字級 36–62px */
  font-size: clamp(36px, 4.6vw, 62px);
  /* 行高緊湊 */
  line-height: 1.1;
  /* 使用主標題深色 #203A49 */
  color: var(--color-text);
/* 標題規則結束 */
}

/* Hero 說明文字 */
.hero-description {
  /* 移除預設外距 */
  margin: 0;
  /* 限制行寬方便閱讀 */
  max-width: 520px;
  /* 字級 18px */
  font-size: 18px;
  /* 使用深色 #203A49 */
  color: var(--color-text);
/* 說明文字規則結束 */
}

/* 開發中狀態徽章：配合淺色背景重新設計為柔和藍底與藍綠細邊框 */
.hero-status {
  /* 行內區塊，寬度貼合文字 */
  display: inline-block;
  /* 與上方說明文字距離 24px */
  margin: 24px 0 0;
  /* 上下 5px、左右 14px 內距 */
  padding: 5px 14px;
  /* 柔和淺藍表面 #E5EEF4 */
  background-color: var(--color-surface);
  /* 低飽和藍綠細邊框 #BCD4D0 */
  border: 1px solid var(--color-accent);
  /* 膠囊圓角 */
  border-radius: 999px;
  /* 深色文字 #203A49，清晰易讀 */
  color: var(--color-text);
  /* 字級 14px */
  font-size: 14px;
  font-weight: 500;
/* 徽章規則結束 */
}

/* Hero 按鈕列 */
.hero-actions {
  /* 兩顆按鈕並排 */
  display: flex;
  /* 空間不足時允許換行 */
  flex-wrap: wrap;
  /* 按鈕間距 16px */
  gap: 16px;
  /* 與上方狀態徽章距離 28px */
  margin-top: 28px;
/* 按鈕列規則結束 */
}

/* Hero 按鈕共用基礎樣式 */
.hero-btn {
  /* 文字水平與垂直置中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 內距 */
  padding: 12px 28px;
  /* 膠囊形狀 */
  border-radius: 999px;
  /* 實心品牌藍底與白字 */
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: var(--color-white);
  /* 不顯示底線 */
  text-decoration: none;
  /* 字級 16px */
  font-size: 16px;
/* 按鈕共用規則結束 */
}

/* 主視覺照片容器：桌面版鋪滿整個 Hero，右側呈現患者與自然晨光 */
.hero-media {
  /* 桌面版絕對定位鋪滿 .hero */
  position: absolute;
  inset: 0;
  z-index: 0;
  /* 移除外距 */
  margin: 0;
  /* 不攔截滑鼠點擊 */
  pointer-events: none;
/* 主視覺照片容器規則結束 */
}

/* 寬幅水平霧白漸層遮罩：左側文字後方近乎不透明，向右側照片柔和轉為透明 */
.hero-media::after {
  /* 建立偽元素遮罩 */
  content: "";
  position: absolute;
  inset: 0;
  /* 由左至右的霧白 #F7F9FA 漸層，保留右側患者的自然暖色光線與細節 */
  background: linear-gradient(
    90deg,
    #F7F9FA 0%,
    rgba(247, 249, 250, 0.97) 36%,
    rgba(247, 249, 250, 0.84) 48%,
    rgba(247, 249, 250, 0.25) 64%,
    rgba(247, 249, 250, 0) 80%
  );
/* 漸層遮罩規則結束 */
}

/* 自然光恢復照片：保留原色與細節，靠右對齊確保患者清楚可見 */
.hero-photo {
  /* 顯示為區塊 */
  display: block;
  /* 填滿主視覺容器 */
  width: 100%;
  height: 100%;
  /* 維持比例涵蓋區塊 */
  object-fit: cover;
  /* 對齊右側與垂直中央，讓右側患者完整且清楚呈現 */
  object-position: right center;
/* 主視覺照片規則結束 */
}

/* 手機版樣式：螢幕寬度 768px 以下 */
@media (max-width: 768px) {
  /* 手機版顯示漢堡按鈕 */
  .menu-toggle {
    /* 以 block 顯示 */
    display: block;
  /* 按鈕規則結束 */
  }

  /* 手機版導覽區：改為從導覽列下方展開的面板 */
  .main-nav {
    /* 預設隱藏，按下按鈕後才顯示 */
    display: none;
    /* 以導覽列為基準絕對定位 */
    position: absolute;
    /* 緊貼導覽列下緣 */
    top: var(--header-height);
    /* 左側貼齊螢幕 */
    left: 0;
    /* 右側貼齊螢幕，使面板佔滿寬度 */
    right: 0;
    /* 連結與按鈕改為上下排列 */
    flex-direction: column;
    /* 內容靠左對齊 */
    align-items: flex-start;
    /* 面板背景為純白 */
    background-color: var(--color-white);
    /* 面板底部細邊框 */
    border-bottom: 1px solid var(--color-surface);
    /* 面板內距 */
    padding: 16px 24px 24px;
    /* 項目間距 */
    gap: 20px;
  /* 導覽區規則結束 */
  }

  /* 選單展開狀態（由 JavaScript 加上 is-open） */
  .main-nav.is-open {
    /* 顯示面板 */
    display: flex;
  /* 展開規則結束 */
  }

  /* 手機版連結清單改為垂直排列 */
  .nav-list {
    /* 上下排列 */
    flex-direction: column;
    /* 靠左對齊 */
    align-items: flex-start;
    /* 連結間距 */
    gap: 16px;
  /* 清單規則結束 */
  }

  /* 手機版 hero：文字置於上方淺色背景，照片獨立顯示於下方，不壓在患者身上 */
  .hero {
    /* 上方 40px、下方 48px 留白 */
    padding: 40px 0 48px;
  /* hero 規則結束 */
  }

  /* 手機版 hero 改為單欄，文字在上、照片在下 */
  .hero-inner {
    /* 單欄堆疊 */
    grid-template-columns: 1fr;
    /* 文字與照片間距 28px */
    gap: 28px;
  /* 容器規則結束 */
  }

  /* 手機版標題字級 */
  .hero h1 {
    /* 字級 36px */
    font-size: 36px;
  /* 標題規則結束 */
  }

  /* 手機版照片容器：取消絕對定位，改為文字下方的圓角影像區塊 */
  .hero-media {
    /* 恢復一般文件流定位 */
    position: relative;
    inset: auto;
    width: 100%;
    /* 柔和圓角與細邊框 */
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--color-surface);
  /* 照片容器規則結束 */
  }

  /* 手機版文字不覆蓋照片，因此關閉桌面版水平遮罩以完整保留照片亮度與患者畫面 */
  .hero-media::after {
    /* 不顯示遮罩 */
    display: none;
  /* 遮罩規則結束 */
  }

  /* 手機版照片：使用響應式高度與原始比例，不強制套用桌面版裁切，確保患者完整可見 */
  .hero-photo {
    /* 寬度 100%、高度依原圖比例自適應 */
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: cover;
    object-position: right center;
  /* 手機版照片規則結束 */
  }
/* 手機版媒體查詢結束 */
}




/* 按鈕統一樣式：導覽列聯絡按鈕、Hero 按鈕、聯絡區按鈕（品牌藍 #005A8D 膠囊形、白字、無裝飾外框） */
.btn-contact,
.hero-btn,
.hero-btn-primary,
.hero-btn-secondary,
.contact-btn,
.contact-submit {
  /* 以 inline-flex 讓文字水平與垂直置中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 邊框內含於尺寸，確保最小高度精確 */
  box-sizing: border-box;
  /* 最小觸控高度 44px */
  min-height: 44px;
  /* 上下 12px、左右 28px 的內距 */
  padding: 12px 28px;
  /* 長條膠囊形 */
  border-radius: 999px;
  /* 背景使用品牌藍 #005A8D、文字為純白 #FFFFFF */
  background-color: var(--color-primary);
  color: var(--color-white);
  /* 粗體、清楚易讀 */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  /* 不顯示底線，文字不換行 */
  text-decoration: none;
  white-space: nowrap;
  /* 邊框與背景同色，維持乾淨實心膠囊外觀且無外圈裝飾環 */
  border: 2px solid var(--color-primary);
  box-shadow: none;
  outline: none;
  /* 平滑的背景色過渡 */
  transition: background-color 0.15s ease, border-color 0.15s ease;
/* 按鈕統一樣式規則結束 */
}

/* 按鈕滑過：微加深品牌藍，文字維持白色 */
.btn-contact:hover,
.hero-btn:hover,
.hero-btn-primary:hover,
.hero-btn-secondary:hover,
.contact-btn:hover,
.contact-submit:hover {
  /* 深一階的品牌藍 #00446B */
  background-color: #00446B;
  border-color: #00446B;
  /* 文字維持白色 */
  color: var(--color-white);
  /* 不降低透明度、不顯示額外外框 */
  opacity: 1;
  outline: none;
/* 按鈕滑過規則結束 */
}

/* 按鈕鍵盤聚焦：在淺色背景上顯示清晰可見的深色聚焦外框 */
.btn-contact:focus-visible,
.hero-btn:focus-visible,
.hero-btn-primary:focus-visible,
.hero-btn-secondary:focus-visible,
.contact-btn:focus-visible,
.contact-submit:focus-visible {
  /* 背景與邊框同步加深 */
  background-color: #00446B;
  border-color: #00446B;
  /* 文字維持白色 */
  color: var(--color-white);
  opacity: 1;
  /* 深藍灰外框 #203A49，在所有淺色與漸層背景上皆清晰可辨 */
  outline: 3px solid var(--color-text);
  /* 外框與按鈕距離 3px */
  outline-offset: 3px;
/* 按鈕聚焦規則結束 */
}

/* 影片面板：極淺的 #F7F9FA 至 #E5EEF4 漸層、約 24px 圓角、克制內距、無厚重陰影 */
.demo-panel {
  /* 寬度撐滿左欄容器 */
  width: 100%;
  /* 克制的內距 16px，讓影片呼吸且不顯厚重 */
  padding: 16px;
  /* 約 24px 柔和圓角 */
  border-radius: 24px;
  /* 極細緻的淺藍綠邊框 */
  border: 1px solid var(--color-accent);
  /* 超出圓角內容隱藏 */
  overflow: hidden;
  /* 極淡的晨霧白 #F7F9FA 至柔和淺藍 #E5EEF4 靜態漸層 */
  background: linear-gradient(145deg, var(--color-bg) 0%, var(--color-surface) 100%);
  /* 無厚重陰影 */
  box-shadow: none;
/* 面板規則結束 */
}

/* 影片播放器：保持 852:480 原始比例、完整顯示不裁切 */
.demo-video {
  /* 顯示為區塊，避免底部多出空隙 */
  display: block;
  /* 寬度填滿面板內部，高度依原始比例自動計算 */
  width: 100%;
  height: auto;
  /* 維持影片原始比例 852:480 */
  aspect-ratio: 852 / 480;
  /* 內層柔和圓角 14px，與外層 24px 面板協調 */
  border-radius: 14px;
  /* 完整顯示影片、不裁切，必要時以黑色留邊 */
  object-fit: contain;
  /* 黑色底色 */
  background-color: #000000;
/* 影片規則結束 */
}

/* 螢幕閱讀器專用文字:視覺上隱藏 */
.visually-hidden {
  /* 絕對定位並縮到極小 */
  position: absolute;
  width: 1px;
  height: 1px;
  /* 移除內外距與邊框 */
  margin: -1px;
  padding: 0;
  border: 0;
  /* 裁切內容 */
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  /* 不換行 */
  white-space: nowrap;
/* 隱藏文字規則結束 */
}

/* Contact 區塊：使用均勻的極淺藍背景 #F5F9FC 與寬裕留白，無巢狀卡片或米色漸層 */
.contact {
  /* 均勻極淺藍背景 #F5F9FC */
  background-color: #F5F9FC;
  /* 移除米色漸層 */
  background-image: none;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 上方細分隔線 */
  border-top: 1px solid var(--color-surface);
  /* 桌面版寬裕的上下留白 88px */
  padding: 88px 0;
  /* 預留固定導覽列高度 + 16px，避免標題被遮住 */
  scroll-margin-top: calc(var(--header-height) + 16px);
/* Contact 區塊規則結束 */
}

/* Contact 置中容器：寬度與內距同其他區塊，內容靠左 */
.contact-inner {
  /* 最大寬度 1280px */
  max-width: 1280px;
  /* 水平置中 */
  margin: 0 auto;
  /* 左右留 24px，與其他區塊左緣對齊 */
  padding: 0 24px;
  /* 文字靠左 */
  text-align: left;
/* 容器規則結束 */
}

/* Contact 主標題「Get in touch」：粗體深色文字 #203A49 */
.contact h2 {
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 與下方雙欄距離 36px */
  margin: 0 0 36px;
  /* 響應式字級 32–44px */
  font-size: clamp(32px, 3.6vw, 44px);
  /* 行高 1.15 */
  line-height: 1.15;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 不強制大寫 */
  text-transform: none;
/* 標題規則結束 */
}

/* Contact 雙欄配置：左欄訂閱進度、右欄臨床與合作聯繫，保持輕盈無多層巢狀卡片 */
.contact-grid {
  /* 桌面版兩欄 grid */
  display: grid;
  /* 左欄表單區略寬，右欄直接聯繫區互補 */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  /* 欄距 56px */
  gap: 56px;
  /* 頂端對齊 */
  align-items: start;
/* 雙欄配置規則結束 */
}

/* 單一聯絡欄位 */
.contact-col {
  /* 允許收縮，避免橫向溢出 */
  min-width: 0;
/* 單一聯絡欄位規則結束 */
}

/* 右欄直接聯繫區：桌面版以柔和垂直細線與左欄區隔 */
.contact-col-direct {
  /* 左側內距 48px 與藍綠細分隔線 */
  padding-left: 48px;
  border-left: 1px solid var(--color-accent);
/* 右欄規則結束 */
}

/* 欄位子標題（Follow our progress / Clinical and partnership enquiries） */
.contact-subtitle {
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 與下方說明文字距離 12px */
  margin: 0 0 12px;
  /* 字級 22px */
  font-size: 22px;
  /* 行高 1.25 */
  line-height: 1.25;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 不強制大寫 */
  text-transform: none;
/* 子標題規則結束 */
}

/* Contact 說明文字 */
.contact-text {
  /* 與下方表單距離 24px */
  margin: 0 0 24px;
  /* 限制行寬方便閱讀 */
  max-width: 580px;
  /* 字級 17px */
  font-size: 17px;
  /* 行高 1.6 */
  line-height: 1.6;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 說明規則結束 */
}

/* 電子郵件表單：桌面版輸入框在左、按鈕在右，垂直對齊 */
.contact-form {
  /* 橫向排列 */
  display: flex;
  /* 兩者垂直對齊 */
  align-items: center;
  /* 輸入框與按鈕間距 16px */
  gap: 16px;
  /* 最大寬度 640px */
  max-width: 640px;
  /* 移除底部預設外距 */
  margin: 0;
/* 表單規則結束 */
}

/* 電子郵件輸入框：純白底色、柔和邊框、深色文字 */
.contact-input {
  /* 佔滿剩餘寬度 */
  flex: 1 1 auto;
  /* 允許縮小，避免溢出 */
  min-width: 0;
  /* 高度約 56px */
  box-sizing: border-box;
  height: 56px;
  /* 左右內距 20px */
  padding: 0 20px;
  /* 純白背景 #FFFFFF */
  background-color: var(--color-white);
  /* 細緻的藍綠邊框 #BCD4D0，在淺色漸層背景上清楚界定輸入框 */
  border: 1px solid var(--color-accent);
  /* 柔和圓角 12px */
  border-radius: 12px;
  /* 沿用內文字體，字級 16px */
  font-family: var(--font-body);
  font-size: 16px;
  /* 深色輸入文字 #203A49 */
  color: var(--color-text);
/* 輸入框規則結束 */
}

/* 輸入框預留文字：可讀的柔和灰藍色 */
.contact-input::placeholder {
  /* 柔和且具足夠對比的文字色 */
  color: #5B7080;
  /* 避免瀏覽器降低透明度 */
  opacity: 1;
/* 預留文字規則結束 */
}

/* 輸入框鍵盤/點擊聚焦：顯示清楚的品牌藍外框 */
.contact-input:focus-visible {
  /* 品牌藍邊框與外框，在淺色背景上清晰可見 */
  border-color: var(--color-primary);
  outline: 3px solid var(--color-primary);
  /* 外框與輸入框距離 2px */
  outline-offset: 2px;
/* 輸入框聚焦規則結束 */
}

/* Keep me updated 送出按鈕：#005A8D 品牌藍實心膠囊、白色粗體字 */
.contact-submit {
  /* 不縮小 */
  flex: 0 0 auto;
  /* 高度約 56px */
  box-sizing: border-box;
  height: 56px;
  min-height: 44px;
  /* 左右內距 36px */
  padding: 0 36px;
  /* 長條膠囊形 */
  border-radius: 999px;
  /* 品牌藍背景 #005A8D、純白文字 #FFFFFF */
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: var(--color-white);
  /* 粗體 16px */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  /* 滑鼠游標 */
  cursor: pointer;
/* Submit 規則結束 */
}

/* 表單狀態訊息 */
.contact-status {
  /* 與上方表單距離 16px */
  margin: 16px 0 0;
  /* 字級 16px */
  font-size: 16px;
  /* 深色文字 #203A49，確保送出後的提示在淺色背景上清晰可見 */
  color: var(--color-text);
  /* 最大寬度同表單 */
  max-width: 640px;
/* 狀態訊息規則結束 */
}

/* 直接聯絡說明 */
.contact-direct {
  /* 移除外距 */
  margin: 0;
  /* 字級 17px、行高舒適 */
  font-size: 17px;
  line-height: 1.65;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 長信箱可換行，避免手機溢出 */
  overflow-wrap: anywhere;
/* 直接聯絡規則結束 */
}

/* 直接聯絡的電子郵件連結 */
.contact-direct a {
  /* 獨立換行或保持清晰間距 */
  display: inline-block;
  margin-top: 4px;
  /* 品牌藍 #005A8D，在淺色背景上清晰醒目 */
  color: var(--color-primary);
  /* 粗體讓信箱清楚 */
  font-weight: 600;
  /* 底線表示可點擊 */
  text-decoration: underline;
  text-underline-offset: 3px;
/* 電子郵件連結規則結束 */
}

/* 電子郵件連結鍵盤聚焦 */
.contact-direct a:focus-visible {
  /* 深色清楚外框 */
  outline: 2px solid var(--color-primary);
  /* 外框距離 4px */
  outline-offset: 4px;
/* 連結聚焦規則結束 */
}

/* 手機版：雙欄與表單皆改為上下堆疊 */
@media (max-width: 768px) {
  /* 手機版 Contact 區塊留白 */
  .contact {
    /* 上下 56px */
    padding: 56px 0;
  /* 區塊規則結束 */
  }

  /* 手機版主標題距離微調 */
  .contact h2 {
    /* 下方 28px */
    margin-bottom: 28px;
  /* 主標題規則結束 */
  }

  /* 雙欄改為單欄堆疊 */
  .contact-grid {
    /* 單欄 */
    grid-template-columns: 1fr;
    /* 上下間距 32px */
    gap: 32px;
  /* 雙欄規則結束 */
  }

  /* 手機版右欄改為上方細橫線分隔 */
  .contact-col-direct {
    /* 取消左內距與左線，改為上內距與上細線 */
    padding-left: 0;
    border-left: 0;
    padding-top: 28px;
    border-top: 1px solid var(--color-accent);
  /* 右欄規則結束 */
  }

  /* 表單改為直向排列 */
  .contact-form {
    /* 直向堆疊 */
    flex-direction: column;
    /* 子項目滿版寬度 */
    align-items: stretch;
  /* 表單規則結束 */
  }

  /* 按鈕滿版 */
  .contact-submit {
    /* 寬度 100% */
    width: 100%;
  /* 按鈕規則結束 */
  }
/* 手機版媒體查詢結束 */
}

/* About Delyo 區塊：純白背景 #FFFFFF，內部依序為：A. 標題與簡介 → B. Our Mission 整合式引言陳述 → C. 單一連貫的雙欄團隊版面 */
.about {
  /* 純白背景 #FFFFFF */
  background-color: #FFFFFF;
  /* 移除漸層與裝飾背景 */
  background-image: none;
  /* 上方細分隔線，與上方 Prototype development 區塊柔和銜接 */
  border-top: 1px solid var(--color-surface);
  /* 桌面版上下留白 72px */
  padding: 72px 0;
  /* 預留固定導覽列高度 + 16px，避免標題被遮住 */
  scroll-margin-top: calc(var(--header-height) + 16px);
/* About 區塊規則結束 */
}

/* About 置中容器：寬度與內距同其他區塊 */
.about-inner {
  /* 最大寬度 1280px */
  max-width: 1280px;
  /* 水平置中 */
  margin: 0 auto;
  /* 左右留 24px */
  padding: 0 24px;
/* 容器規則結束 */
}

/* A. 頂部簡介區：橫跨整個區塊寬度 */
.about-intro {
  /* 與下方 Our Mission 整合式引言距離 28px */
  margin-bottom: 28px;
/* 簡介區規則結束 */
}

/* 小標籤「About Delyo」 */
.about-label {
  /* 與下方標題距離 12px */
  margin: 0 0 12px;
  /* 品牌藍 #005A8D */
  color: var(--color-primary);
  /* 字級 14px */
  font-size: 14px;
  /* 加粗，強化層次 */
  font-weight: 600;
  /* 不強制大寫、不加寬字距 */
  text-transform: none;
  letter-spacing: normal;
/* 小標籤規則結束 */
}

/* About 主標題 */
.about h2 {
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 與下方內文距離 20px */
  margin: 0 0 20px;
  /* 響應式字級 32–44px */
  font-size: clamp(32px, 3.6vw, 44px);
  /* 行高 1.15 */
  line-height: 1.15;
  /* 深色標題 #203A49 */
  color: var(--color-text);
  /* 不強制大寫、不加寬字距 */
  text-transform: none;
  letter-spacing: normal;
/* 主標題規則結束 */
}

/* About 簡介內文：限制行寬維持舒適閱讀 */
.about-body {
  /* 移除預設外距 */
  margin: 0;
  /* 最大寬度 720px */
  max-width: 720px;
  /* 字級 18px */
  font-size: 18px;
  /* 行高 1.65 */
  line-height: 1.65;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 內文規則結束 */
}

/* B. Our Mission：位於整個團隊雙欄版面之前，作為整合式引言陳述（移除獨立卡片外框與滿版裝飾色帶） */
.mission {
  /* 與下方雙欄團隊區距離 44px */
  margin: 0 0 44px;
  /* 移除獨立卡片內距、背景與邊框 */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
/* Mission 規則結束 */
}

/* Mission 標題 */
.mission-title {
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 與下方內文距離 8px */
  margin: 0 0 8px;
  /* 字級 20px */
  font-size: 20px;
  line-height: 1.3;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 不強制大寫 */
  text-transform: none;
/* Mission 標題規則結束 */
}

/* Mission 內文：正常非斜體字型，行寬與上方 About Delyo 簡介一致 */
.mission-text {
  /* 移除外距 */
  margin: 0;
  /* 限制行寬 720px，與 .about-body 對齊 */
  max-width: 720px;
  /* 字級 18px */
  font-size: 18px;
  /* 行高 1.65 */
  line-height: 1.65;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 正常非斜體字型 */
  font-style: normal;
/* Mission 內文規則結束 */
}

/* 雙欄區：左 40%、右 60% */
.about-columns {
  /* 使用 grid 排成兩欄 */
  display: grid;
  /* 2fr : 3fr = 40% : 60% */
  grid-template-columns: 2fr 3fr;
  /* 欄距 56px */
  gap: 56px;
  /* 由上對齊 */
  align-items: start;
/* 雙欄規則結束 */
}

/* 團隊合照容器 */
.about-photo {
  /* 移除 figure 預設外距 */
  margin: 0;
  /* 允許收縮，避免橫向溢出 */
  min-width: 0;
/* 合照容器規則結束 */
}

/* 團隊合照圖片：裁掉上方多餘天花板，三人與獎項完整可見，保留原始照片色彩 */
.about-photo-img {
  /* 顯示為區塊，避免底部多出空隙 */
  display: block;
  /* 寬度撐滿左欄 */
  width: 100%;
  /* 高度由比例決定 */
  height: auto;
  /* 顯示比例約 768:694，約裁掉原圖上方 1/3 的天花板與展板標題 */
  aspect-ratio: 768 / 694;
  /* 以 cover 填滿，不拉伸 */
  object-fit: cover;
  /* 對齊底部，保留三人頭部、手持獎項與腰部以上 */
  object-position: center bottom;
  /* 柔和圓角 12px */
  border-radius: 12px;
/* 合照圖片規則結束 */
}

/* 單一成員簡介：以柔和細分隔線區隔，間距一致 */
.profile {
  /* 上下內距 24px */
  padding: 24px 0;
  /* 下方柔和藍綠細分隔線 #BCD4D0 */
  border-bottom: 1px solid var(--color-accent);
/* 成員規則結束 */
}

/* 第一位成員：上方也有細線 */
.profile:first-child {
  /* 上方柔和細線 */
  border-top: 1px solid var(--color-accent);
/* 第一位規則結束 */
}

/* 成員姓名：20px、深色粗體 #203A49 */
.profile h3 {
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 與下方職稱距離 4px */
  margin: 0 0 4px;
  /* 字級 20px */
  font-size: 20px;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 不強制大寫、不加寬字距 */
  text-transform: none;
  letter-spacing: normal;
/* 姓名規則結束 */
}

/* 成員職稱：品牌藍標籤 #005A8D */
.profile-role {
  /* 與下方簡介距離 10px */
  margin: 0 0 10px;
  /* 品牌藍 #005A8D */
  color: var(--color-primary);
  /* 字級 16px */
  font-size: 16px;
  /* 中等粗細 */
  font-weight: 600;
/* 職稱規則結束 */
}

/* 成員簡介：16px 深色文字 */
.profile-bio {
  /* 移除外距 */
  margin: 0;
  /* 字級 16px */
  font-size: 16px;
  /* 行高 1.6 */
  line-height: 1.6;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 簡介規則結束 */
}

/* 手機版：簡介、Our Mission 整合式引言、團隊照片、三位成員依序上下堆疊 */
@media (max-width: 768px) {
  /* About 區塊手機版上下留白 */
  .about {
    /* 上下 48px */
    padding: 48px 0;
  /* About 規則結束 */
  }

  /* 簡介與下方 Mission 距離縮小 */
  .about-intro {
    /* 下方 24px */
    margin-bottom: 24px;
  /* 簡介規則結束 */
  }

  /* 手機版 Mission 下方間距（無獨立卡片內距） */
  .mission {
    /* 與下方團隊照片距離 32px */
    margin: 0 0 32px;
    /* 內距 0 */
    padding: 0;
  /* Mission 規則結束 */
  }

  /* 手機版 Mission 內文字級 */
  .mission-text {
    /* 字級 17px */
    font-size: 17px;
  /* 內文規則結束 */
  }

  /* 雙欄改為單欄：照片在上、成員在下 */
  .about-columns {
    /* 單欄 */
    grid-template-columns: 1fr;
    /* 間距 32px */
    gap: 32px;
  /* 雙欄規則結束 */
  }
/* 手機版媒體查詢結束 */
}

/* Milestones & Recognition 區塊：晨霧白背景，整合四項精簡指標與兩張計畫獎項卡片 */
.milestones {
  /* 晨霧白背景 #F7F9FA */
  background-color: var(--color-bg);
  /* 上下細分隔線，與前後區塊區隔 */
  border-top: 1px solid var(--color-surface);
  border-bottom: 1px solid var(--color-surface);
  /* 桌面版上下留白 64px */
  padding: 64px 0;
  /* 預留固定導覽列高度 + 16px，避免標題被遮住 */
  scroll-margin-top: calc(var(--header-height) + 16px);
/* 區塊規則結束 */
}

/* Milestones 置中容器：寬度與內距同其他區塊 */
.milestones-inner {
  /* 最大寬度 1280px */
  max-width: 1280px;
  /* 水平置中 */
  margin: 0 auto;
  /* 左右留 24px */
  padding: 0 24px;
/* 容器規則結束 */
}

/* Milestones & Recognition 主標題 */
.milestones h2 {
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 與下方簡介距離 12px */
  margin: 0 0 12px;
  /* 響應式字級 30–36px */
  font-size: clamp(30px, 3vw, 36px);
  /* 行高 1.15 */
  line-height: 1.15;
  /* 深色標題 #203A49 */
  color: var(--color-text);
  /* 不強制大寫 */
  text-transform: none;
/* 標題規則結束 */
}

/* Milestones 簡介：與下方面板距離 28px */
.milestones-intro {
  /* 下方距離 28px */
  margin: 0 0 28px;
  /* 限制行寬 */
  max-width: 600px;
  /* 字級 16px */
  font-size: 16px;
  /* 行高 1.6 */
  line-height: 1.6;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 簡介規則結束 */
}

/* 成果指標面板：桌面版四欄等寬，共用柔和淺藍橫向面板 */
.milestone-list {
  /* 移除項目符號 */
  list-style: none;
  margin: 0;
  /* 面板上下內距 28px */
  padding: 28px 0;
  /* 桌面版四欄等寬 */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 柔和淺藍表面 #E5EEF4 與細緻藍綠邊框 #BCD4D0 */
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent);
  /* 圓角 16px */
  border-radius: 16px;
  /* 無陰影 */
  box-shadow: none;
/* 面板規則結束 */
}

/* 單一指標欄：左右內距 28px */
.milestone {
  /* 允許收縮，避免溢出 */
  min-width: 0;
  /* 左右內距 */
  padding: 0 28px;
/* 成果規則結束 */
}

/* 第 2、3、4 欄左側的細直線分隔 */
.milestone + .milestone {
  /* 低飽和藍綠細分隔線 #BCD4D0 */
  border-left: 1px solid var(--color-accent);
/* 分隔線規則結束 */
}

/* 指標數字：品牌藍 #005A8D 凸顯關鍵數據 */
.milestone-number {
  /* 與下方標籤距離 6px */
  margin: 0 0 6px;
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 響應式字級，四欄配置下桌面約 56px */
  font-size: clamp(44px, 4.2vw, 56px);
  /* 行高 1.05 */
  line-height: 1.05;
  /* 品牌藍 #005A8D */
  color: var(--color-primary);
  /* 「5th」不換行 */
  white-space: nowrap;
/* 數字規則結束 */
}

/* 指標標籤：粗體深色 #203A49 */
.milestone-label {
  /* 移除外距，保持指標精簡緊湊 */
  margin: 0;
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 字級 18px */
  font-size: 18px;
  /* 行高 1.35 */
  line-height: 1.35;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 標籤規則結束 */
}

/* 成果說明（若使用時） */
.milestone-text {
  /* 與上方標籤距離 6px */
  margin: 6px 0 0;
  /* 字級 16px */
  font-size: 16px;
  /* 行高 1.5 */
  line-height: 1.5;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 說明規則結束 */
}

/* 獎項卡片區：與上方四欄指標保持一致的 24px 間距，形成單一連貫區塊 */
.recognition {
  /* 上方間距 24px，與兩張卡片之間的欄距一致 */
  margin-top: 24px;
/* 子區塊規則結束 */
}

/* 獎項卡片列表：桌面版兩欄，同列等高 */
.recognition-list {
  /* 移除項目符號與內距 */
  list-style: none;
  margin: 0;
  padding: 0;
  /* 兩欄 grid */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 卡片間距 24px */
  gap: 24px;
/* 列表規則結束 */
}

/* 獎項卡片：純白底、細緻邊框、16px 圓角、28px 內距 */
.award-card {
  /* 允許收縮，避免溢出 */
  min-width: 0;
  /* 純白背景 #FFFFFF */
  background-color: var(--color-white);
  /* 柔和藍綠細邊框 #BCD4D0 */
  border: 1px solid var(--color-accent);
  /* 圓角 16px */
  border-radius: 16px;
  /* 內距 28px */
  padding: 28px;
  /* 無陰影 */
  box-shadow: none;
/* 卡片規則結束 */
}

/* 卡片頂部：計畫名稱與年份地點 */
.award-card-head {
  /* 與下方獎項列距離 8px */
  margin-bottom: 8px;
/* 卡片頂部規則結束 */
}

/* 完整計畫/競賽名稱 */
.award-program {
  /* 與下方年份距離 4px */
  margin: 0 0 4px;
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 字級 18px */
  font-size: 18px;
  /* 行高 1.35 */
  line-height: 1.35;
  /* 品牌藍 #005A8D */
  color: var(--color-primary);
  /* 長名稱自然換行 */
  overflow-wrap: break-word;
/* 計畫名稱規則結束 */
}

/* 年份與地點（每張卡片一次） */
.award-meta {
  /* 移除外距 */
  margin: 0;
  /* 字級 14px */
  font-size: 14px;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 年份地點規則結束 */
}

/* 獎項列表 */
.award-rows {
  /* 移除項目符號與內距 */
  list-style: none;
  margin: 0;
  padding: 0;
/* 獎項列表規則結束 */
}

/* 單一獎項列：徽章 + 文字，列與列以細線區隔 */
.award-row {
  /* 橫向排列 */
  display: flex;
  /* 頂端對齊 */
  align-items: flex-start;
  /* 徽章與文字間距 14px */
  gap: 14px;
  /* 上下內距 16px */
  padding: 16px 0;
  /* 上方柔和細線 */
  border-top: 1px solid var(--color-surface);
/* 獎項列規則結束 */
}

/* 低飽和度小徽章：使用柔和淺藍底與藍綠細邊框 */
.award-badge {
  /* 不縮小 */
  flex: 0 0 auto;
  /* 圓形 32px */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* 置中星號 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 柔和淺藍底色 #E5EEF4 與低飽和藍綠邊框 #BCD4D0 */
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent);
  /* 品牌藍星號 #005A8D */
  color: var(--color-primary);
  /* 星號字級 15px */
  font-size: 15px;
  /* 與標題第一行對齊的微調 */
  margin-top: 2px;
/* 徽章規則結束 */
}

/* 獎項文字容器 */
.award-info {
  /* 允許收縮與換行 */
  min-width: 0;
/* 文字容器規則結束 */
}

/* 獎項名稱：23px 深色粗體 #203A49 */
.award-name {
  /* 移除外距 */
  margin: 0;
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 字級 23px */
  font-size: 23px;
  /* 行高 1.25 */
  line-height: 1.25;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 自然換行 */
  overflow-wrap: break-word;
/* 獎項名稱規則結束 */
}

/* 組別：16px */
.award-category {
  /* 與上方名稱距離 4px */
  margin: 4px 0 0;
  /* 字級 16px */
  font-size: 16px;
  /* 行高 1.45 */
  line-height: 1.45;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 自然換行 */
  overflow-wrap: break-word;
/* 組別規則結束 */
}

/* 平板尺寸：四項指標改為兩欄 2x2 排列 */
@media (max-width: 960px) {
  /* 成果指標面板改為兩欄 */
  .milestone-list {
    /* 兩欄等寬 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 內距交由各指標格控制，讓縱橫分隔線貼齊面板 */
    padding: 0;
  /* 面板規則結束 */
  }

  /* 平板版單一指標格內距 */
  .milestone {
    /* 上下 24px、左右 28px */
    padding: 24px 28px;
  /* 單一指標規則結束 */
  }

  /* 重設預設左分隔線，僅在右欄（偶數項）加上左分隔線 */
  .milestone + .milestone {
    /* 取消全部左線 */
    border-left: 0;
  /* 分隔線重設規則結束 */
  }

  /* 右欄項目（第 2、4 項）左側加上細直線 */
  .milestone:nth-child(even) {
    /* 左側柔和藍綠細線 */
    border-left: 1px solid var(--color-accent);
  /* 偶數欄分隔線規則結束 */
  }

  /* 第二列項目（第 3、4 項）上方加上細橫線 */
  .milestone:nth-child(n + 3) {
    /* 上方柔和藍綠細線 */
    border-top: 1px solid var(--color-accent);
  /* 第二列分隔線規則結束 */
  }
/* 平板媒體查詢結束 */
}

/* 手機版：獎項卡片改為單欄堆疊 */
@media (max-width: 768px) {
  /* 手機版區塊留白 */
  .milestones {
    /* 上下 48px */
    padding: 48px 0;
  /* 區塊規則結束 */
  }

  /* 獎項卡片改為單欄 */
  .recognition-list {
    /* 單欄 */
    grid-template-columns: 1fr;
  /* 列表規則結束 */
  }

  /* 手機版獎項名稱 */
  .award-name {
    /* 字級 22px */
    font-size: 22px;
  /* 名稱規則結束 */
  }
/* 手機版媒體查詢結束 */
}

/* 窄螢幕手機：四項指標進一步改為單欄垂直堆疊 */
@media (max-width: 560px) {
  /* 指標面板改為單欄 */
  .milestone-list {
    /* 單欄 */
    grid-template-columns: 1fr;
    /* 上下內距 8px */
    padding: 8px 0;
  /* 面板規則結束 */
  }

  /* 單欄時指標格內距 */
  .milestone {
    /* 上下 18px、左右 24px */
    padding: 18px 24px;
  /* 指標格規則結束 */
  }

  /* 單欄時取消偶數欄左線，改為第 2、3、4 項上方皆有細橫線 */
  .milestone:nth-child(even) {
    /* 取消左線 */
    border-left: 0;
  /* 取消左線規則結束 */
  }

  /* 第 2 項起皆以橫線分隔 */
  .milestone + .milestone {
    /* 上方柔和藍綠細線 */
    border-top: 1px solid var(--color-accent);
  /* 單欄分隔線規則結束 */
  }
/* 窄螢幕媒體查詢結束 */
}

/* AnXin 介紹區塊：使用晨霧白 #F7F9FA 至柔和淺藍 #E5EEF4 的低對比靜態漸層 */
.intro {
  /* 靜態漸層背景：由 #F7F9FA 柔和過渡至 #E5EEF4 */
  background-color: var(--color-bg);
  background-image: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  /* 上方細分隔線 */
  border-top: 1px solid var(--color-surface);
  /* 上下留白 72px */
  padding: 72px 0;
  /* 預留固定導覽列高度 + 16px，避免標題被遮住 */
  scroll-margin-top: calc(var(--header-height) + 16px);
/* 介紹區塊規則結束 */
}

/* 介紹區塊置中容器 */
.intro-inner {
  /* 最大寬度 1280px */
  max-width: 1280px;
  /* 水平置中 */
  margin: 0 auto;
  /* 左右留 24px */
  padding: 0 24px;
/* 容器規則結束 */
}

/* 第一組視覺重點（產品簡介與示範影片）：桌面版左欄（約 40%）為標題與簡介段落、右欄（約 60%）為示範影片，兩欄垂直置中且欄距 48px */
.intro-lead {
  /* 使用雙欄 grid */
  display: grid;
  /* 左欄約 40%（2fr）、右欄約 60%（3fr），minmax(0, ...) 防止內容撐出橫向溢出 */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  /* 欄距 48px（符合 40–48px 範圍） */
  gap: 48px;
  /* 左欄文字與右欄影片垂直置中對齊 */
  align-items: center;
/* 第一組雙欄規則結束 */
}

/* 左欄：標題與簡介區（桌面版位於左欄，移除先前滿版置中配置留下的底部外距） */
.intro-copy {
  /* 移除外距，交由雙欄 grid 控制垂直置中與間距 */
  margin: 0;
  /* 允許收縮，避免溢出 */
  min-width: 0;
/* 標題簡介規則結束 */
}

/* 小標籤「Meet AnXin」 */
.intro-label {
  /* 與下方標題距離 12px */
  margin: 0 0 12px;
  /* 品牌藍 #005A8D */
  color: var(--color-primary);
  /* 字級 14px */
  font-size: 14px;
  /* 加粗 */
  font-weight: 600;
  /* 不強制大寫 */
  text-transform: none;
  letter-spacing: normal;
/* 小標籤規則結束 */
}

/* 介紹主標題：深色 #203A49，保留字體與粗體 700，微調響應式字級讓左欄 40% 寬度下自然換行且比例均衡 */
.intro h2 {
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 與下方簡介距離 16px */
  margin: 0 0 16px;
  /* 響應式字級 28–36px，適合左欄 40% 寬度自然多行換行 */
  font-size: clamp(28px, 3vw, 36px);
  /* 行高 1.18 */
  line-height: 1.18;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 不強制大寫 */
  text-transform: none;
  /* 允許長字詞自然換行 */
  overflow-wrap: break-word;
/* 主標題規則結束 */
}

/* 介紹內文 */
.intro-text {
  /* 移除外距 */
  margin: 0;
  /* 撐滿左欄寬度並保持舒適閱讀行寬 */
  max-width: 560px;
  /* 字級 17px */
  font-size: 17px;
  /* 行高 1.65 */
  line-height: 1.65;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 內文規則結束 */
}

/* 右欄：示範影片容器（移除先前獨立滿版置中寬度限制與自動外距，完整填滿右欄 60% 空間） */
.intro-media {
  /* 填滿右欄寬度，不留多餘空白 */
  width: 100%;
  max-width: none;
  margin: 0;
  /* 錨點 #demo 捲動時預留固定導覽列高度 + 16px */
  scroll-margin-top: calc(var(--header-height) + 16px);
  /* 允許收縮，防止橫向溢出 */
  min-width: 0;
/* 媒體容器規則結束 */
}

/* 左欄上方第五代原型機圖片：於左欄內水平置中（約 260px 寬，手機版自適應不溢出）、自然高度、下方留白 28px，無外框卡片或陰影並完整顯示 */
.intro-media-img {
  /* 顯示為區塊並於左欄內水平置中，下方與三項特色距離 28px（符合 24–32px 範圍） */
  display: block;
  /* 寬度自適應且上限 260px（符合 240–280px 範圍），手機版不造成橫向溢出 */
  width: 100%;
  max-width: 260px;
  /* 高度依原圖比例自然調整，完整呈現不裁切、不拉伸 */
  height: auto;
  margin: 0 auto 28px;
  object-fit: contain;
  /* 不加卡片、裝飾邊框、圓角或陰影 */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
/* 原型圖片規則結束 */
}

/* 原型圖片說明：小而清楚 */
.intro-media-caption {
  /* 與圖片距離 12px */
  margin-top: 12px;
  /* 字級 14px */
  font-size: 14px;
  /* 行高 1.5 */
  line-height: 1.5;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 圖片說明規則結束 */
}

/* 第二組視覺重點（Features and system connection）：桌面版左欄為第五代原型圖片與三項特色、右欄為系統連接示意圖，兩欄頂端對齊且高度隨內容自然延伸 */
.intro-product {
  /* 與上方第一組示範影片以適度留白銜接，不使用誇張大卡片或過大間距 */
  margin-top: 48px;
  /* 使用雙欄 grid */
  display: grid;
  /* 左欄原型圖片與三項特色、右欄系統連接示意圖（右欄略寬確保圖表標示清晰可讀） */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  /* 均衡欄距 48px */
  gap: 48px;
  /* 兩欄頂端對齊，高度依各自內容自然延伸 */
  align-items: start;
/* 第二組視覺重點規則結束 */
}

/* 左欄容器：包含上方置中的第五代原型機圖片與下方三項產品特色 */
.intro-features-col {
  /* 允許收縮，防止橫向溢出 */
  min-width: 0;
/* 左欄容器規則結束 */
}

/* 左欄：三項設計特色清單 */
.intro-features {
  /* 移除項目符號與外距 */
  list-style: none;
  margin: 0;
  padding: 0;
  /* 允許收縮，避免溢出 */
  min-width: 0;
/* 特色清單規則結束 */
}

/* 單一特色：圖示 + 文字，以細線區隔 */
.intro-feature {
  /* 橫向排列 */
  display: flex;
  /* 頂端對齊 */
  align-items: flex-start;
  /* 圖示與文字間距 16px */
  gap: 16px;
  /* 上下內距 18px */
  padding: 18px 0;
  /* 上方柔和藍綠細線 #BCD4D0 */
  border-top: 1px solid var(--color-accent);
/* 單一特色規則結束 */
}

/* 最後一項特色下方加上細線，讓左欄與右欄垂直置中時視覺上下均衡 */
.intro-feature:last-child {
  /* 下方柔和藍綠細線 #BCD4D0 */
  border-bottom: 1px solid var(--color-accent);
/* 最後一項特色規則結束 */
}

/* 特色圖示：小型線條圖示，品牌藍點綴 */
.intro-feature-icon {
  /* 不縮小 */
  flex: 0 0 24px;
  /* 品牌藍線條 #005A8D */
  color: var(--color-primary);
  /* 與文字第一行對齊 */
  margin-top: 1px;
/* 圖示規則結束 */
}

/* 特色文字 */
.intro-feature-text {
  /* 移除外距 */
  margin: 0;
  /* 字級 16px */
  font-size: 16px;
  /* 行高 1.55 */
  line-height: 1.55;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 特色文字規則結束 */
}

/* 特色名稱：深色粗體 #203A49 */
.intro-feature-text strong {
  /* 粗體 */
  font-weight: 700;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 特色名稱規則結束 */
}

/* 右欄：系統連接區（與左欄三項特色並排並垂直置中） */
.intro-system {
  /* 移除舊版滿版上外距與上邊框，融入第二組雙欄版面 */
  margin: 0;
  padding: 0;
  border: 0;
  /* 允許收縮，避免橫向溢出 */
  min-width: 0;
/* 系統連接規則結束 */
}

/* 系統連接標題：直接置於示意圖上方作為較小的子區塊標題 */
.intro-system-title {
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 與下方說明距離 8px */
  margin: 0 0 8px;
  /* 子標題字級 24px（明顯小於主標題 30–42px） */
  font-size: 24px;
  /* 行高 1.25 */
  line-height: 1.25;
  /* 深色文字 #203A49 */
  color: var(--color-text);
  /* 不強制大寫 */
  text-transform: none;
/* 連接標題規則結束 */
}

/* 系統連接說明 */
.intro-system-caption {
  /* 與下方圖片距離 16px */
  margin: 0 0 16px;
  /* 字級 16px */
  font-size: 16px;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 連接說明規則結束 */
}

/* 系統連接示意圖：保持原始比例與顏色，標示文字清晰可讀 */
.intro-system-img {
  /* 顯示為區塊 */
  display: block;
  /* 寬度撐滿右欄容器 */
  width: 100%;
  max-width: 100%;
  /* 高度依原圖比例自動調整 */
  height: auto;
  /* 純白背景、柔和圓角與細邊框 */
  background-color: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--color-accent);
/* 連接圖規則結束 */
}

/* 「View full-size diagram」放大檢視連結 */
.intro-link {
  /* 與圖片距離 12px */
  display: inline-block;
  margin-top: 12px;
  /* 品牌藍文字 #005A8D */
  color: var(--color-primary);
  /* 中等粗細 */
  font-weight: 600;
  /* 底線表示可點擊 */
  text-decoration: underline;
  text-underline-offset: 3px;
/* 連結規則結束 */
}

/* 連結鍵盤聚焦 */
.intro-link:focus-visible {
  /* 清楚的外框 */
  outline: 2px solid var(--color-primary);
  /* 外框距離 4px */
  outline-offset: 4px;
/* 連結聚焦規則結束 */
}

/* 手機版：第一組（簡介文字堆疊於示範影片上方） → 第二組（三項特色堆疊於系統連接示意圖上方） */
@media (max-width: 768px) {
  /* 手機版區塊留白 */
  .intro {
    /* 上下 48px */
    padding: 48px 0;
  /* 區塊規則結束 */
  }

  /* 手機版第一組改為單欄，簡介文字在上、示範影片在下，保持舒適間距並防止橫向溢出 */
  .intro-lead {
    /* 單欄（minmax 0 防止橫向溢出） */
    grid-template-columns: minmax(0, 1fr);
    /* 簡介文字與影片間距 24px */
    gap: 24px;
  /* 第一組規則結束 */
  }

  /* 第二組改為單欄，三項特色堆疊於系統連接示意圖上方 */
  .intro-product {
    /* 與上方示範影片距離 36px */
    margin-top: 36px;
    /* 單欄（minmax 0 防止溢出） */
    grid-template-columns: minmax(0, 1fr);
    /* 三項特色與系統連接區間距 32px */
    gap: 32px;
  /* 第二組規則結束 */
  }
/* 手機版媒體查詢結束 */
}

/* 第五代主視覺說明：兩行（名稱 + 開發階段說明） */
.intro-media-caption-title {
  /* 名稱獨占一行 */
  display: block;
  /* 粗體深色 #203A49 */
  font-weight: 700;
  color: var(--color-text);
  /* 字級 16px */
  font-size: 16px;
  /* 與下方說明距離 2px */
  margin-bottom: 2px;
/* 說明名稱規則結束 */
}

/* 開發階段說明 */
.intro-media-caption-note {
  /* 獨占一行 */
  display: block;
/* 開發階段說明規則結束 */
}

/* Prototype development 區塊：乾淨晨霧白背景，搭配輕柔淺藍調圖片面板 */
.history {
  /* 晨霧白背景 #F7F9FA */
  background-color: var(--color-bg);
  /* 上方細分隔線 */
  border-top: 1px solid var(--color-surface);
  /* 桌面版上下留白 64px */
  padding: 64px 0;
  /* 預留固定導覽列高度 + 16px */
  scroll-margin-top: calc(var(--header-height) + 16px);
/* 區塊規則結束 */
}

/* 置中容器 */
.history-inner {
  /* 最大寬度 1280px */
  max-width: 1280px;
  /* 水平置中 */
  margin: 0 auto;
  /* 左右留 24px */
  padding: 0 24px;
/* 容器規則結束 */
}

/* 標題 */
.history h2 {
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 與下方簡介距離 12px */
  margin: 0 0 12px;
  /* 響應式字級 30–36px */
  font-size: clamp(30px, 3vw, 36px);
  /* 行高 1.15 */
  line-height: 1.15;
  /* 深色標題 #203A49 */
  color: var(--color-text);
  /* 不強制大寫 */
  text-transform: none;
/* 標題規則結束 */
}

/* 簡介 */
.history-intro {
  /* 與下方圖庫距離 32px */
  margin: 0 0 32px;
  /* 限制行寬 */
  max-width: 640px;
  /* 字級 16px */
  font-size: 16px;
  /* 行高 1.6 */
  line-height: 1.6;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 簡介規則結束 */
}

/* 原型圖庫：桌面版五欄一列 */
.history-list {
  /* 移除項目符號與內距 */
  list-style: none;
  margin: 0;
  padding: 0;
  /* 五欄 grid */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* 間距 20px */
  gap: 20px;
/* 圖庫規則結束 */
}

/* 單一世代 */
.history-item {
  /* 允許收縮，避免溢出 */
  min-width: 0;
  /* 相對定位，供標籤使用 */
  position: relative;
/* 世代規則結束 */
}

/* 縮圖按鈕：統一尺寸的輕柔淺色圖片面板 */
.history-thumb {
  /* 顯示為區塊 */
  display: block;
  /* 寬度撐滿 */
  width: 100%;
  /* 統一 4:3 面板比例 */
  aspect-ratio: 4 / 3;
  /* 面板內距 10px */
  padding: 10px;
  /* 輕柔淺藍調面板與細邊框 */
  background-color: var(--color-surface);
  background-image: linear-gradient(180deg, var(--color-white) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-accent);
  /* 圓角 14px */
  border-radius: 14px;
  /* 滑鼠游標 */
  cursor: zoom-in;
  /* 內容不超出圓角 */
  overflow: hidden;
  box-sizing: border-box;
/* 縮圖按鈕規則結束 */
}

/* 縮圖按鈕鍵盤聚焦 */
.history-thumb:focus-visible {
  /* 清楚的品牌藍外框 */
  outline: 3px solid var(--color-primary);
  /* 外框距離 3px */
  outline-offset: 3px;
/* 縮圖聚焦規則結束 */
}

/* 縮圖圖片：完整顯示，不裁切 */
.history-thumb img {
  /* 填滿面板 */
  display: block;
  width: 100%;
  height: 100%;
  /* 完整顯示整個原型 */
  object-fit: contain;
/* 縮圖圖片規則結束 */
}

/* 世代標籤 */
.history-label {
  /* 與圖片距離 12px */
  margin: 12px 0 0;
  /* 沿用標題字體 */
  font-family: var(--font-heading);
  /* 粗體 */
  font-weight: 700;
  /* 字級 16px */
  font-size: 16px;
  /* 深色文字 #203A49 */
  color: var(--color-text);
/* 世代標籤規則結束 */
}

/* 世代開發細節說明文字 */
.history-desc {
  /* 與上方標籤距離 6px */
  margin: 6px 0 0;
  /* 字級 15px、行高舒適且自然換行 */
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text);
/* 世代說明規則結束 */
}

/* 第 5 代：克制的視覺強調（品牌藍邊框取代先前的亮青色） */
.history-item-current .history-thumb {
  /* 1.5px 品牌藍邊框 #005A8D */
  border: 1.5px solid var(--color-primary);
/* 第 5 代強調規則結束 */
}

/* 「Current prototype」小標籤：克制的柔和淺藍底與品牌藍文字 */
.history-tag {
  /* 行內區塊 */
  display: inline-block;
  /* 與上方標籤距離 4px */
  margin-top: 4px;
  /* 內距 */
  padding: 2px 10px;
  /* 柔和淺藍底色 #E5EEF4、藍綠細邊框 #BCD4D0 與品牌藍文字 #005A8D */
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent);
  color: var(--color-primary);
  /* 膠囊形 */
  border-radius: 999px;
  /* 字級 13px、中等粗細 */
  font-size: 13px;
  font-weight: 600;
/* 小標籤規則結束 */
}

/* 燈箱（dialog） */
.lightbox {
  /* 寬度上限 */
  width: min(92vw, 960px);
  max-width: 92vw;
  /* 內距 20px */
  padding: 20px;
  /* 白底、圓角、柔和邊框 */
  background-color: var(--color-white);
  border: 1px solid var(--color-surface);
  border-radius: 16px;
  /* 文字顏色 */
  color: var(--color-text);
  /* 高度上限，內容過高時可捲動 */
  max-height: 92vh;
  overflow: auto;
  box-sizing: border-box;
/* 燈箱規則結束 */
}

/* 燈箱背景遮罩 */
.lightbox::backdrop {
  /* 深藍灰半透明遮罩 */
  background-color: rgba(32, 58, 73, 0.72);
/* 遮罩規則結束 */
}

/* 燈箱圖片區 */
.lightbox-figure {
  /* 移除外距 */
  margin: 0;
/* 圖片區規則結束 */
}

/* 燈箱圖片：完整顯示 */
.lightbox-img {
  /* 區塊顯示並置中 */
  display: block;
  margin: 0 auto;
  /* 不超出視窗 */
  max-width: 100%;
  max-height: 68vh;
  width: auto;
  height: auto;
  /* 完整顯示 */
  object-fit: contain;
/* 燈箱圖片規則結束 */
}

/* 燈箱說明 */
.lightbox-caption {
  /* 與圖片距離 12px */
  margin-top: 12px;
  /* 置中 */
  text-align: center;
  /* 粗體深色 #203A49 */
  font-weight: 700;
  color: var(--color-text);
/* 說明規則結束 */
}

/* 燈箱關閉按鈕 */
.lightbox-close {
  /* 固定在右上角 */
  position: absolute;
  top: 8px;
  right: 8px;
  /* 觸控尺寸 44px */
  width: 44px;
  height: 44px;
  /* 簡潔圓形、柔和淺藍底 */
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-text);
  /* 字級 28px */
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
/* 關閉按鈕規則結束 */
}

/* 燈箱導覽列 */
.lightbox-nav {
  /* 橫向排列、置中 */
  display: flex;
  justify-content: center;
  /* 按鈕間距 16px */
  gap: 16px;
  /* 與上方距離 16px */
  margin-top: 16px;
/* 導覽列規則結束 */
}

/* 燈箱上一張/下一張按鈕：品牌藍膠囊、白字 */
.lightbox-prev,
.lightbox-next {
  /* 最小觸控高度 44px */
  min-height: 44px;
  /* 內距 */
  padding: 0 20px;
  /* 品牌藍膠囊 #005A8D、純白文字 #FFFFFF */
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 0;
  border-radius: 999px;
  /* 粗體 */
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
/* 導覽按鈕規則結束 */
}

/* 燈箱按鈕滑過 */
.lightbox-prev:hover,
.lightbox-next:hover {
  /* 微加深品牌藍 */
  background-color: #00446B;
/* 燈箱按鈕滑過規則結束 */
}

/* 燈箱按鈕鍵盤聚焦 */
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  /* 清楚的深色外框 */
  outline: 3px solid var(--color-text);
  /* 外框距離 2px */
  outline-offset: 2px;
/* 聚焦規則結束 */
}

/* 中等螢幕：三欄 */
@media (max-width: 1099px) {
  /* 圖庫改為三欄 */
  .history-list {
    /* 三欄 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 圖庫規則結束 */
  }
/* 中等螢幕媒體查詢結束 */
}

/* 手機版：兩欄 */
@media (max-width: 768px) {
  /* 區塊留白 */
  .history {
    /* 上下 48px */
    padding: 48px 0;
  /* 區塊規則結束 */
  }

  /* 圖庫改為兩欄 */
  .history-list {
    /* 兩欄 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 間距 16px */
    gap: 16px;
  /* 圖庫規則結束 */
  }
/* 手機版媒體查詢結束 */
}

/* 極窄螢幕：單欄 */
@media (max-width: 380px) {
  /* 圖庫改為單欄 */
  .history-list {
    /* 單欄 */
    grid-template-columns: 1fr;
  /* 圖庫規則結束 */
  }
/* 極窄螢幕媒體查詢結束 */
}