/* =============================================================================
   home.css — 首頁（AI 應用主軸）
   內容依 docs/plans/首頁_AI應用主軸_網頁文案.md：
   粒子字版 Hero → AI 的應用（四種應用）＋產品與服務入口 → 關於我們 → 最新消息 → CTA。
   字級、眉標、導言、按鈕、標籤一律使用元件庫（ds-title-*、ds-eyebrow、ds-lead、
   ds-button、ds-tag、ds-text-link），本檔只負責版面、間距、圖片構圖與動態起始狀態。
   區塊以白底／surface-inner 交替，深色只留給頁尾。
   內容預設全部可見；js/home.js 只在 GSAP 載入且未偏好減少動態時才於 <body>
   加上 .has-motion，再由動畫揭露。
   ============================================================================= */

.home-page {
  --ds-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --home-section-space: clamp(var(--ds-space-3xl), 9vw, var(--ds-space-5xl));
  --home-gutter: clamp(32px, 8vw, 64px);
  --home-ease-out: cubic-bezier(.16, 1, .3, 1);
  --home-grid-line: color-mix(in srgb, var(--ds-color-secondary) 8%, transparent);
  font-family: var(--ds-font-sans);
  background: var(--ds-color-page);
  overflow-x: clip;
}

.home-page main [id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: no-preference) {
  html:has(.home-page) { scroll-behavior: smooth; }
}

/* 只作用於主內容且權重為 0：頁首／頁尾 logo 尺寸由共用元件決定 */
:where(.home-page main img) { height: auto; }

.home-container {
  width: min(100% - var(--home-gutter), var(--ds-container-max));
  margin-inline: auto;
}

/* 中文標題以標點分句：後半句整段換行，避免在詞語中間斷開 */
.home-phrase { display: inline-block; }

.home-magnetic { will-change: transform; }

/* 區塊標題組 */
.home-intro { max-width: 46rem; margin-bottom: clamp(var(--ds-space-2xl), 6vw, var(--ds-space-3xl)); }
.home-intro__title { margin-top: var(--ds-space-sm); }
.home-intro__lead { margin-top: var(--ds-space-md); max-width: 36em; }

.home-intro--split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--ds-space-lg) clamp(var(--ds-space-xl), 5vw, var(--ds-space-4xl));
  max-width: none;
}

.home-intro--split .home-intro__lead { margin-top: 0; }

@media (width <= 1024px) {
  .home-intro--split { grid-template-columns: 1fr; align-items: start; }
}

/* =============================================================================
   1. Hero — 粒子字版主視覺：滿版建築背景＋js/home-hero.js 在 canvas 繪製的粒子字
   背景層四周多留 3% 給指標／捲動視差位移；沒有 JavaScript 時只顯示背景圖
   ============================================================================= */
.home-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ds-color-surface-inner);
}

.home-hero__bg {
  position: absolute;
  inset: -3%;
  z-index: -2;
  background: url("../assets/images/home/hero-city.webp") right center / cover no-repeat;
  animation: home-hero-bg-in 2.8s var(--home-ease-out) both;
  will-change: translate;
}

/* 直式畫面以高度撐滿、背景放大裁切，維持載入 1920 版 */
@media (width <= 1280px) and (aspect-ratio >= 1) {
  .home-hero__bg { background-image: url("../assets/images/home/hero-city-1280.webp"); }
}

/* 直式畫面把建築群主體移進可視範圍 */
@media (aspect-ratio < 1) {
  .home-hero__bg { background-position: 70% center; }
}

@keyframes home-hero-bg-in {
  from { opacity: 0; scale: 1.08; }
  to { opacity: 1; scale: 1; }
}

/* 字版後方的柔光提高粒子與背景的對比；底部淡出到頁面底色，與下一區不留硬線 */
.home-hero::before,
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.home-hero::before {
  inset: 0;
  background: radial-gradient(48% 40% at 50% 50%, color-mix(in srgb, var(--ds-color-page) 55%, transparent), transparent 75%);
}

.home-hero::after {
  inset: auto 0 0;
  height: 22%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ds-color-page) 70%, transparent));
}

/* 觸控拖曳推動粒子時仍保留垂直捲動 */
.home-hero__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--home-ease-out);
  touch-action: pan-y;
}

.home-hero__canvas.is-ready { opacity: 1; }

/* 影片主視覺：底色與影片底色一致（#f9fbfc 取自影片畫面），影片完整顯示不裁切，
   放在頁首下方的空間，邊緣與底色融為一體 */
.home-hero--video { background: #f9fbfc; }
.home-hero--video::before,
.home-hero--video::after { content: none; }

.home-hero__video {
  position: absolute;
  inset: var(--ds-navbar-height) 0 var(--ds-space-3xl);
  width: 100%;
  height: calc(100% - var(--ds-navbar-height) - var(--ds-space-3xl));
  object-fit: contain;
}

.home-hero__controls {
  position: absolute;
  right: var(--home-gutter);
  bottom: var(--ds-space-lg);
  z-index: 1;
  display: flex;
  gap: var(--ds-space-xs);
}

.home-hero__controls[hidden] { display: none; }

.home-hero__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--ds-border-hairline);
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-card);
  color: var(--ds-color-text-primary);
  box-shadow: var(--ds-shadow-sm);
  transition: background-color var(--ds-duration-fast) var(--ds-ease);
}

.home-hero__toggle:hover { background: var(--ds-color-surface-muted); }
.home-hero__toggle:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }
/* 聲音開啟時以主色標示目前狀態 */
.home-hero__toggle[aria-pressed="true"] { border-color: var(--ds-color-secondary); color: var(--ds-color-secondary); }

/* 捲動提示細線 */
.home-hero__cue {
  position: absolute;
  left: calc(50% - .5px);
  bottom: var(--ds-space-xl);
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ds-color-text-primary) 18%, transparent);
}

.home-hero__cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ds-color-secondary);
  animation: home-cue 2.2s var(--ds-ease) infinite;
}

@keyframes home-cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* =============================================================================
   2. AI 的應用＋產品與服務 — 深淺轉場
   兩區包在 .home-tone 內，背景、文字、線條一律取用 --tone-* 變數。
   js/home.js 依捲動位置在容器上切換 data-tone="dark"／"light"，顏色隨之過渡；
   沒有 JavaScript 時 AI 區固定深色、產品與服務固定淺色。
   ============================================================================= */
.home-tone[data-tone="dark"],
.home-tone:not([data-tone]) .home-ai {
  --tone-bg: var(--ds-color-surface-dark);
  --tone-heading: var(--ds-color-on-dark);
  --tone-ink: var(--ds-color-on-dark);
  --tone-text: var(--ds-color-on-dark-strong);
  --tone-muted: var(--ds-color-on-dark-muted);
  --tone-line: var(--ds-color-on-dark-hairline);
  --tone-strong-line: var(--ds-color-on-dark-muted);
  --tone-stage: rgba(255, 255, 255, .04);
  --tone-grid: rgba(255, 255, 255, .05);
  --tone-chip-bg: rgba(255, 255, 255, .08);
  --tone-link: var(--ds-color-cyan);
  --tone-link-hover: var(--ds-color-on-dark);
  --tone-accent: var(--ds-color-cyan);
  --tone-hover: rgba(255, 255, 255, .05);
}

.home-tone[data-tone="light"],
.home-tone:not([data-tone]) .home-catalog {
  --tone-bg: var(--ds-color-surface-inner);
  --tone-heading: var(--ds-color-action-ink);
  --tone-ink: var(--ds-color-text-primary);
  --tone-text: var(--ds-color-text-secondary);
  --tone-muted: var(--ds-color-text-muted);
  --tone-line: var(--ds-color-border);
  --tone-strong-line: var(--ds-color-text-primary);
  --tone-stage: var(--ds-color-card);
  --tone-grid: var(--home-grid-line);
  --tone-chip-bg: var(--ds-color-card);
  --tone-link: var(--ds-color-secondary);
  --tone-link-hover: var(--ds-color-secondary-hover);
  --tone-accent: var(--ds-color-secondary);
  --tone-hover: var(--ds-color-card);
}

.home-tone[data-tone],
.home-tone:not([data-tone]) .home-ai,
.home-tone:not([data-tone]) .home-catalog {
  background: var(--tone-bg);
  color: var(--tone-text);
  transition: background-color 900ms var(--ds-ease), color 900ms var(--ds-ease);
}

/* 元件庫字級／標籤／連結的顏色改取用 --tone-*，深淺兩種底都可讀 */
.home-tone :is(.ds-title-lg, .ds-title-md, .ds-title-sm) { color: var(--tone-ink); }
.home-tone :is(h1, h2):is(.ds-title-lg, .ds-title-md, .ds-title-sm) { color: var(--tone-heading); }
.home-tone .ds-lead { color: var(--tone-text); }
.home-tone .ds-tag--neutral { background: var(--tone-chip-bg); color: var(--tone-ink); }
.home-tone .ds-text-link { color: var(--tone-link); }
.home-tone .ds-text-link:hover { color: var(--tone-link-hover); }

:where(.home-tone) :where(h1, h2, h3, p, span, li, a, .ds-tag) {
  transition: color 900ms var(--ds-ease), background-color 900ms var(--ds-ease), border-color 900ms var(--ds-ease);
}

.home-ai {
  position: relative;
  padding-block: var(--home-section-space);
  /* clip 不建立捲動容器，左側章節索引的 sticky 仍以視窗為準 */
  overflow: clip;
}

.home-ai__content { position: relative; z-index: 1; }

/* 滑鼠光暈：只在深色狀態、滑鼠裝置顯示；位置由 js/home.js 寫入 --glow-x／--glow-y */
.home-ai__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: var(--ds-radius-full);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ds-color-cyan) 30%, transparent), color-mix(in srgb, var(--ds-color-cyan) 10%, transparent) 45%, transparent 75%);
  opacity: 0;
  transform: translate3d(var(--glow-x, 50vw), var(--glow-y, 30vh), 0);
  transition: opacity 400ms var(--ds-ease);
  pointer-events: none;
}

.home-tone[data-tone="dark"] .home-ai[data-glow-active] .home-ai__glow { opacity: 1; }

.home-ai__layout {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 4.4fr);
  gap: clamp(var(--ds-space-xl), 5vw, var(--ds-space-4xl));
  align-items: start;
}

.home-rail {
  position: sticky;
  top: calc(var(--ds-navbar-height) + var(--ds-space-2xl));
  padding-left: var(--ds-space-lg);
}

.home-rail ol { margin: 0; padding: 0; list-style: none; }

.home-rail a {
  display: flex;
  gap: var(--ds-space-sm);
  padding-block: var(--ds-space-xs);
  color: var(--tone-muted);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-cta-line);
  font-weight: var(--ds-weight-medium);
  transition: color var(--ds-duration-slow) var(--ds-ease);
}

.home-rail a span {
  font-size: var(--ds-text-label-sm-size);
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
}

.home-rail a:hover,
.home-rail a.is-active { color: var(--tone-ink); }

.home-rail a.is-active span { color: var(--tone-accent); }

.home-rail a:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); border-radius: var(--ds-radius-sm); }

.home-rail__track {
  position: absolute;
  inset: var(--ds-space-xs) auto var(--ds-space-xs) 0;
  width: 2px;
  border-radius: var(--ds-radius-full);
  background: var(--tone-line);
}

.home-rail__track span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ds-color-primary);
  transform-origin: top center;
  transform: scaleY(var(--home-rail-progress, 1));
}

/* 每項應用圖左文右並排、垂直置中，圖片與文字份量相近 */
.home-app {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--ds-space-xl), 4vw, var(--ds-space-3xl));
  padding-block: clamp(var(--ds-space-2xl), 5vw, var(--ds-space-3xl));
}
.home-app:first-child { padding-top: 0; }
.home-app + .home-app { border-top: var(--ds-border-width) solid var(--tone-line); }

/* 預覽舞台：統一 16:9 圖紙格線底，內容依應用各自構圖 */
.home-app__stage {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background:
    linear-gradient(to right, var(--tone-grid) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, var(--tone-grid) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--tone-stage);
  transition: background-color 900ms var(--ds-ease);
}

.home-app__body { min-width: 0; }

.home-app__kicker {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  color: var(--tone-ink);
  font-size: var(--ds-text-body-md-size);
  line-height: var(--ds-text-cta-line);
  font-weight: var(--ds-weight-semibold);
}

.home-app__kicker span {
  color: var(--tone-accent);
  font-size: var(--ds-text-label-sm-size);
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
}

.home-app__title { margin-top: var(--ds-space-xs); }

/* 簡介以約三行為基準控制寬度；標籤與連結依序收尾，四項對齊一致 */
.home-app__text {
  max-width: 30em;
  margin-top: var(--ds-space-md);
  color: var(--tone-text);
}

.home-app__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-xs);
  margin: var(--ds-space-md) 0 0;
  padding: 0;
  list-style: none;
}

.home-app__link { margin-top: var(--ds-space-md); }

/* 01 企劃：照片滿版 */
.home-page .home-app__photo {
  position: absolute;
  inset: -8% 0 auto;
  width: 100%;
  height: 116%;
  object-fit: cover;
  transition: transform 1.2s var(--home-ease-out);
}

.home-app__stage--photo:hover .home-app__photo { transform: scale(1.04); }

/* 02 短影音：三張直式畫面並排，中間為播放中的片段 */
.home-app__stage--reel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 20px);
}

.home-reel__frame {
  position: relative;
  height: 66%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-strong);
  box-shadow: var(--ds-shadow-panel);
  transition: transform 900ms var(--home-ease-out);
}

.home-reel__frame--lead {
  height: 84%;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55);
}

.home-reel__frame--side:first-child { transform: translateY(-6%); }
.home-reel__frame--side:last-child { transform: translateY(6%); }

.home-app__stage--reel:hover .home-reel__frame--side:first-child { transform: translateY(-9%) rotate(-2deg); }
.home-app__stage--reel:hover .home-reel__frame--side:last-child { transform: translateY(9%) rotate(2deg); }

.home-page .home-reel__frame img,
.home-reel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 03 行銷與內容服務：瀏覽器視窗中的建案網站＋直立電子展板播放建築動畫 */
.home-browser {
  position: absolute;
  left: 6%;
  top: 20%;
  width: 68%;
  overflow: hidden;
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-card);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .45);
}

.home-browser__bar {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
  background: var(--ds-color-surface-muted);
}

.home-browser__bar span { width: 7px; height: 7px; border-radius: var(--ds-radius-full); background: var(--ds-color-border); }

.home-page .home-browser__shot { display: block; width: 100%; }

.home-kiosk {
  position: absolute;
  right: 7%;
  top: 10%;
  bottom: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24%;
}

.home-kiosk__screen {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  border: 6px solid var(--ds-color-text-primary);
  border-radius: 16px;
  background: var(--ds-color-surface-muted);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5);
}

.home-page .home-kiosk__shot {
  position: absolute;
  inset: -8% 0 auto;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 40% center;
}

.home-kiosk__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-full);
  background: color-mix(in srgb, var(--ds-color-card) 90%, transparent);
  color: var(--ds-color-secondary);
  transform: translate(-50%, -50%);
  box-shadow: var(--ds-shadow-md);
}

/* 展板立柱與底座 */
.home-kiosk__stand {
  position: relative;
  width: 22%;
  height: 7%;
  background: var(--ds-color-text-primary);
}

.home-kiosk__stand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 360%;
  height: 8px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-text-primary);
  transform: translateX(-50%);
}

/* 04 程式開發：兩張系統畫面前後交疊 */
.home-page .home-screens__back {
  position: absolute;
  left: 5%;
  top: 9%;
  width: 62%;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .25));
}

.home-page .home-screens__front {
  position: absolute;
  right: 3%;
  bottom: 6%;
  width: 70%;
}

@media (width <= 1024px) {
  .home-ai__layout { grid-template-columns: 1fr; }
  .home-rail { display: none; }
}

@media (width <= 768px) {
  .home-app { grid-template-columns: 1fr; gap: var(--ds-space-lg); }
  .home-kiosk { width: 24%; right: 5%; }
  .home-kiosk__play { width: 32px; height: 32px; }
}

/* 產品與服務入口 — 三欄圖文：分類主視覺＋名稱＋說明＋服務清單 */
.home-catalog { padding-block: var(--home-section-space); }

.home-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--ds-space-xl), 3vw, var(--ds-space-2xl));
  align-items: start;
}

/* 分類主視覺只作說明，不設連結與互動效果 */
.home-catalog__media {
  margin: 0 0 var(--ds-space-lg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background: var(--tone-stage);
}

.home-page .home-catalog__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-catalog__tagline {
  min-height: calc(var(--ds-text-body-sm-line) * 2);
  margin-top: var(--ds-space-xs);
  color: var(--tone-text);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.home-catalog__list {
  margin: var(--ds-space-md) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--tone-strong-line);
}

.home-catalog__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-space-xxs) var(--ds-space-md);
  padding: var(--ds-space-md) var(--ds-space-sm) var(--ds-space-md) 0;
  border-bottom: var(--ds-border-width) solid var(--tone-line);
  transition: padding var(--ds-duration-slow) var(--home-ease-out), background-color var(--ds-duration-slow) var(--ds-ease);
}

/* 底線由左向右填滿，標示目前指向的項目 */
.home-catalog__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ds-color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--home-ease-out);
}

.home-catalog__item:hover,
.home-catalog__item:focus-visible { padding-left: var(--ds-space-sm); background: var(--tone-hover); }

.home-catalog__item:hover::after,
.home-catalog__item:focus-visible::after { transform: scaleX(1); }

.home-catalog__item:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }

.home-catalog__name {
  color: var(--tone-ink);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
  font-weight: var(--ds-weight-semibold);
}

.home-catalog__desc {
  grid-column: 1;
  color: var(--tone-text);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.home-catalog__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--tone-muted);
  transition: transform 600ms var(--home-ease-out), color var(--ds-duration-slow) var(--ds-ease);
}

.home-catalog__item:hover .home-catalog__arrow,
.home-catalog__item:focus-visible .home-catalog__arrow { transform: translateX(4px); color: var(--ds-color-primary); }

@media (width <= 1024px) {
  .home-catalog__grid { grid-template-columns: 1fr; gap: var(--ds-space-3xl); }
  .home-catalog__tagline { min-height: 0; }
  .home-catalog__media { max-width: 560px; }
}

/* =============================================================================
   3. 關於我們 — 公司素材＋單一年資重點
   ============================================================================= */
.home-about { padding-block: var(--home-section-space); }

.home-about__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--ds-space-2xl), 6vw, var(--ds-space-4xl));
  align-items: center;
}

.home-about__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-muted);
}

.home-page .home-about__media img {
  position: absolute;
  inset: -8% 0 auto;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 40% center;
}

.home-about__stat {
  position: absolute;
  left: var(--ds-space-lg);
  bottom: var(--ds-space-lg);
  display: grid;
  gap: var(--ds-space-xxs);
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-radius: var(--ds-radius-md);
  background: color-mix(in srgb, var(--ds-color-card) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--ds-shadow-panel);
}

.home-about__stat-value {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-xxs);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-display-hero-size);
  line-height: var(--ds-text-display-hero-line);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-hero);
  font-variant-numeric: tabular-nums;
}

.home-about__stat-unit {
  font-size: var(--ds-text-headline-sm-size);
  line-height: var(--ds-text-headline-sm-line);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}

.home-about__stat-label { color: var(--ds-color-text-secondary); font-size: var(--ds-text-body-sm-size); }

.home-about__title { margin-block: var(--ds-space-sm) var(--ds-space-lg); }
.home-about__body > p:not(.ds-eyebrow) + p { margin-top: var(--ds-space-md); }
.home-about__body .ds-text-link { margin-top: var(--ds-space-md); }

@media (width <= 1024px) {
  .home-about__layout { grid-template-columns: 1fr; }
}

/* =============================================================================
   4. 最新消息 — 文字列表：日期、分類、標題
   ============================================================================= */
.home-news {
  background: var(--ds-color-surface-inner);
  padding-block: var(--home-section-space);
}

.home-news__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--ds-border-width) solid var(--ds-color-text-primary);
}

.home-news__item {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem 7rem 7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-space-lg);
  padding: var(--ds-space-lg) var(--ds-space-sm) var(--ds-space-lg) 0;
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
  transition: padding var(--ds-duration-slow) var(--home-ease-out), background-color var(--ds-duration-slow) var(--ds-ease);
}

.home-news__item:hover,
.home-news__item:focus-visible { padding-left: var(--ds-space-md); background: var(--ds-color-card); }

.home-news__item:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }

.home-news__thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface-muted);
}

.home-page .home-news__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--home-ease-out);
}

.home-news__item:hover .home-news__thumb img { transform: scale(1.06); }

.home-news__date {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* 沿用元件庫的新聞分類徽章配色，取消其疊在圖片上的絕對定位 */
.home-news__badge { position: static; justify-self: start; }

.home-news__title {
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-body-lg-size);
  line-height: var(--ds-text-body-lg-line);
  font-weight: var(--ds-weight-semibold);
}

.home-news__arrow {
  color: var(--ds-color-text-muted);
  transition: transform 600ms var(--home-ease-out), color var(--ds-duration-slow) var(--ds-ease);
}

.home-news__item:hover .home-news__arrow,
.home-news__item:focus-visible .home-news__arrow { transform: translate(3px, -3px); color: var(--ds-color-primary); }

.home-news__more { margin-top: var(--ds-space-2xl); }

@media (width <= 768px) {
  .home-news__item { grid-template-columns: 6rem auto minmax(0, 1fr); gap: var(--ds-space-xs) var(--ds-space-md); }
  .home-news__thumb { grid-row: span 2; align-self: start; }
  .home-news__title { grid-column: 2 / -1; }
  .home-news__arrow { display: none; }
}

/* =============================================================================
   5. CTA — 圖紙格線與品牌色光暈的寬幅留白
   ============================================================================= */
.home-cta {
  position: relative;
  padding-block: clamp(var(--ds-space-4xl), 11vw, var(--ds-space-5xl));
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(closest-side, var(--ds-color-primary-wash), transparent 70%) 20% 50% / 60% 120% no-repeat,
    radial-gradient(closest-side, var(--ds-color-secondary-wash), transparent 70%) 85% 40% / 55% 110% no-repeat;
}

.home-cta__grid {
  position: absolute;
  inset: -25% 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--home-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--home-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}

.home-cta__eyebrow { color: var(--ds-color-secondary); letter-spacing: var(--ds-tracking-wide); }
.home-cta__title { margin-block: var(--ds-space-md) var(--ds-space-lg); }
.home-cta__lead { max-width: 38em; margin-inline: auto; }
.home-cta__actions { display: flex; justify-content: center; margin-top: var(--ds-space-xl); }

@media (prefers-reduced-motion: reduce) {
  .home-tone[data-tone],
  :where(.home-tone) :where(h1, h2, h3, p, span, li, a, .ds-tag),
  .home-app__stage { transition: none; }
  .home-hero__cue::after { animation: none; }
  .home-hero__canvas { transition: none; }
  .home-hero__bg { animation: none; }
  .home-rail a,
  .home-page .home-app__photo,
  .home-reel__frame,
  .home-catalog__item,
  .home-catalog__item::after,
  .home-catalog__arrow,
  .home-news__item,
  .home-news__arrow { transition: none; }
}