/* ==========================================================================
   首頁各區塊 — v1.4 依設計稿重新校準
   所有數值由 857px 設計稿實測 × 1.51 換算為 u（設計基準 1294）。
   ========================================================================== */

/* --- Hero：稿面高 ~340px → 513u --- */
.hero { background: var(--c-bg-hero); padding-block: calc(30 * var(--u)) calc(26 * var(--u)); }
.hero__grid {
  display: grid;
  /* 稿面：文字欄 x32–355（323px→488u）｜IDEAS x365–460（143u）｜插圖+標籤 x470–760 */
  grid-template-columns: calc(500 * var(--u)) calc(130 * var(--u)) 1fr;
  gap: 0;
  align-items: start;
}
.hero__eyebrow {
  color: var(--c-orange);
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  font-weight: 700; letter-spacing: .04em;
  margin-bottom: calc(14 * var(--u));
}
.hero__title {
  color: var(--c-navy);
  font-size: calc(50 * var(--u));
  line-height: calc(64 * var(--u));
  font-weight: 700;
}
.hero__slogan {
  color: var(--c-orange);
  font-size: calc(36 * var(--u));
  line-height: calc(50 * var(--u));
  font-weight: 700;
  margin-top: calc(2 * var(--u));
}
.hero__intro { margin-top: calc(14 * var(--u)); }
.hero__intro p {
  font-size: max(var(--u-min-font), calc(17 * var(--u)));
  line-height: calc(26 * var(--u));
  margin-bottom: calc(6 * var(--u));
}
/* 重點三條：稿面圓心間距 30px → 45u，圓 24px → 36u */
.hero__points {
  display: flex; flex-direction: column;
  gap: calc(16 * var(--u));
  margin-top: calc(20 * var(--u));
}
.hero__point { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.hero__point-title {
  color: var(--c-navy);
  font-size: max(var(--u-min-font), calc(19 * var(--u)));
  line-height: calc(26 * var(--u));
  font-weight: 700;
  display: block;
}
.hero__point-desc {
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  line-height: calc(20 * var(--u));
  display: block;
}
.hero__point .check-item__mark,
.check-item--hero .check-item__mark {
  flex: 0 0 auto;
  width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border-radius: 50%;
  background: var(--c-check-bg); margin-top: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero__point .check-item__mark svg,
.check-item--hero .check-item__mark svg { width: 56%; height: 56%; }
.hero__point .check-item__mark svg path,
.check-item--hero .check-item__mark svg path { stroke: var(--c-orange); stroke-width: 3.4; }

/* 標籤 pill：稿面高 22px → 33u */
.hero__tags {
  display: flex; flex-wrap: wrap; gap: calc(10 * var(--u));
  margin-top: calc(28 * var(--u));
}

/* IDEAS 裝飾欄：稿面文字 16px → 24u，位於區塊垂直中段 */
.hero__deco {
  position: relative;
  padding-left: calc(21 * var(--u));
  padding-top: calc(200 * var(--u));
  min-height: calc(460 * var(--u));
}
.hero__deco::before {
  content: ""; position: absolute; left: calc(21 * var(--u));
  top: calc(20 * var(--u)); bottom: calc(20 * var(--u));
  width: 1px; background: var(--c-teal); opacity: .25;
}
.hero__deco-dot {
  position: absolute; left: calc(17 * var(--u));
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  border-radius: 50%; background: var(--c-teal); opacity: .55;
}
.hero__deco-dot--1 { top: calc(16 * var(--u)); }
.hero__deco-dot--2 { bottom: calc(16 * var(--u)); }
.hero__deco-diamond {
  position: absolute; left: calc(16 * var(--u)); top: calc(288 * var(--u));
  width: calc(11 * var(--u)); height: calc(11 * var(--u));
  background: var(--c-orange); transform: rotate(45deg);
}
.hero__deco-title {
  color: var(--c-navy);
  font-size: calc(24 * var(--u));
  line-height: calc(30 * var(--u));
  font-weight: 700;
  padding-left: calc(14 * var(--u));
}
.hero__deco-title span, .hero__deco-sub span { display: block; }
.hero__deco-sub {
  color: var(--c-orange);
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  line-height: calc(19 * var(--u));
  font-weight: 700;
  padding-left: calc(14 * var(--u));
  margin-top: calc(18 * var(--u));
}

/* 插圖：稿面高 ~400px → 600u，寬依素材比例；標籤在右側等距分布 */
.hero__figure {
  display: flex; gap: calc(18 * var(--u));
  align-items: stretch;
  height: calc(600 * var(--u));
}
.hero__figure-img,
.hero__figure > svg {
  height: 100%; width: auto;
  object-fit: contain; object-position: center top;
  flex: 0 0 auto;
}
.hero__layers {
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: calc(24 * var(--u));
  flex: 1 1 auto; min-width: calc(96 * var(--u));
}
.hero__layer { display: flex; flex-direction: column; position: relative; padding-left: calc(18 * var(--u)); }
.hero__layer::before {
  content: ""; position: absolute; left: 0; top: calc(9 * var(--u));
  width: calc(6 * var(--u)); height: calc(6 * var(--u));
  border-radius: 50%; background: var(--c-teal);
}
.hero__layer-en {
  color: var(--c-navy);
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  line-height: 1.35; font-weight: 700;
}
.hero__layer-zh {
  color: var(--c-text);
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  line-height: 1.35;
}

/* --- 兩大核心應用：稿面卡 350×160px → 528×242u，標題置中 --- */
.tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(15 * var(--u)); }
.track-card { padding: calc(20 * var(--u)) calc(22 * var(--u)); display: flex; flex-direction: column; }
.track-card__title {
  color: var(--c-teal);
  font-size: calc(22 * var(--u));
  line-height: calc(30 * var(--u));
  font-weight: 700;
  margin-top: calc(10 * var(--u));
}
.track-card__title-accent { color: var(--c-orange); display: block; }
.track-card__desc {
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  line-height: calc(22 * var(--u));
  margin-top: calc(8 * var(--u));
  flex: 1 1 auto;
}
.track-card__chips { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }

/* --- 服務項目：稿面卡 226×125px → 341×189u --- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(15 * var(--u)); }
.service-card {
  position: relative;
  min-height: calc(189 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* 稿面文字欄約卡寬 55%，圖物件從約 50% 起貼到右緣、滿高 */
.service-card__text { width: 56%; display: flex; flex-direction: column; flex: 1 1 auto; position: relative; z-index: 1; }
.service-card__no {
  color: var(--c-orange);
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  line-height: 1.2; font-weight: 700;
}
.service-card__title {
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(17 * var(--u)));
  line-height: calc(23 * var(--u));
  font-weight: 700;
  margin-top: calc(2 * var(--u));
  /* 標題可略超出文字欄，圖物件靠右不會碰到 */
  width: 70%;
}
.service-card__desc {
  font-size: max(var(--u-min-font), calc(13 * var(--u)));
  line-height: calc(18 * var(--u));
  margin-top: calc(6 * var(--u));
}
.service-card__bullets { margin-top: calc(8 * var(--u)); gap: calc(3 * var(--u)); }
.service-card__bullets .check-item {
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  line-height: calc(17 * var(--u));
}
.service-card__bullets .check-item__mark {
  width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-top: calc(2 * var(--u));
}
.service-card__foot { margin-top: auto; padding-top: calc(8 * var(--u)); }
.service-card__foot .more-link { font-size: max(var(--u-min-font), calc(12 * var(--u))); }

/* 去背型圖區：滿高、從 48% 到右緣，物件靠右。素材已裁去透明邊，
   contain 之後物件即貼近卡緣，與稿面一致。 */
.service-card__media {
  position: absolute;
  left: 48%; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  display: flex; align-items: center; justify-content: flex-end;
  padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)) 0;
}
.service-card__media svg,
.service-card__media img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: right center;
}
/* 滿版型：稿面照片從約 45% 起、滿高、右側圓角、左緣淡出 */
.service-card__media--full { left: 44%; padding: 0; }
.service-card__media--full svg,
.service-card__media--full img {
  object-fit: cover;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, rgba(0,0,0,.3) 30%, #000 46%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 18%, rgba(0,0,0,.3) 30%, #000 46%);
}

/* --- 流程：稿面卡 100×90px → 151×136u；編號與圖示同列 --- */
.process {
  display: grid;
  grid-template-columns: repeat(var(--process-cols, 7), 1fr);
  gap: calc(15 * var(--u));
  position: relative;
}
/* 卡高與圖示尺寸取自參考稿：卡寬 158u、圖示圓 79u、編號圓 35u */
.process-step {
  position: relative;
  /* 左右內距收窄，讓說明文字有更多寬度，減少不必要的換行 */
  padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  /* 不設 min-height：grid 的 stretch 已讓同列等高，
     再加下限只會讓文字少的卡片被撐出多餘空白。 */
}
.process-step__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-bottom: calc(6 * var(--u));
}
.process-step__no {
  flex: 0 0 auto;
  width: calc(35 * var(--u)); height: calc(35 * var(--u));
  border-radius: 50%;
  background: var(--c-orange-soft); color: var(--c-orange);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: max(var(--u-min-font), calc(17 * var(--u)));
  font-weight: 700;
}
/* 無圖時用線稿，外層補一個圓底；有圖時素材自帶淡青圓，不再疊圓 */
.process-step__icon {
  flex: 0 0 auto;
  width: calc(58 * var(--u)); height: calc(58 * var(--u));
  border-radius: 50%;
  background: var(--c-teal-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.process-step__icon svg { width: 60%; height: 60%; }
.process-step__icon--img {
  width: calc(79 * var(--u)); height: calc(79 * var(--u));
  background: none; border-radius: 0;
}
.process-step__icon--img img { width: 100%; height: 100%; object-fit: contain; }
.process-step__title {
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  line-height: calc(21 * var(--u));
  font-weight: 700;
}
.process-step__desc {
  font-size: max(var(--u-min-font), calc(13 * var(--u)));
  line-height: calc(19 * var(--u));
  margin-top: calc(5 * var(--u));
  /* 中英混排時避免英文詞組被拆開造成過多短行 */
  overflow-wrap: break-word;
  word-break: normal;
}
.process-step__body { width: 100%; }
.process-step__arrow {
  position: absolute;
  right: calc(-15 * var(--u)); top: calc(40 * var(--u));
  width: calc(15 * var(--u));
  display: flex; justify-content: center;
  color: var(--c-orange);
}
.process-step__arrow svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.process-step:last-child .process-step__arrow { display: none; }

/* --- 公司特色：稿面卡 226×50px → 341×75u --- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(15 * var(--u)); }
.why-card {
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  display: flex; flex-direction: column;
  min-height: calc(75 * var(--u));
}
.why-card__title {
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(14 * var(--u)));
  line-height: calc(20 * var(--u));
  font-weight: 700;
  margin-bottom: calc(5 * var(--u));
}
.why-card__no { color: var(--c-orange); margin-right: calc(6 * var(--u)); }
.why-card .check-list { gap: calc(2 * var(--u)); }
.check-item--soft {
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  line-height: calc(18 * var(--u));
}
.check-item--soft .check-item__mark {
  width: calc(12 * var(--u)); height: calc(12 * var(--u));
  background: var(--c-check-bg-sm); margin-top: calc(3 * var(--u));
}
.check-item--soft .check-item__mark svg path { stroke: var(--c-orange); }

/* --- 內頁 --- */
.page-hero { background: var(--c-bg-hero); padding-block: calc(36 * var(--u)); }
.page-hero__title { color: var(--c-navy); font-size: calc(34 * var(--u)); line-height: 1.3; font-weight: 700; }
.page-hero__summary {
  font-size: max(var(--u-min-font), calc(16 * var(--u)));
  line-height: calc(26 * var(--u));
  margin-top: calc(10 * var(--u));
  max-width: calc(760 * var(--u));
}
.breadcrumb {
  font-size: max(var(--u-min-font), calc(13 * var(--u)));
  color: var(--c-text); margin-bottom: calc(12 * var(--u));
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); list-style: none; padding: 0; margin: 0; }
.breadcrumb a { color: var(--c-teal); }
.breadcrumb a:hover { color: var(--c-orange); }
.breadcrumb li + li::before { content: "／"; opacity: .5; margin-right: calc(8 * var(--u)); }

.faq-list { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.faq-item { padding: calc(16 * var(--u)); }
.faq-item__q { color: var(--c-navy); font-weight: 700; font-size: max(var(--u-min-font), calc(16 * var(--u))); }
.faq-item__a { margin-top: calc(6 * var(--u)); font-size: max(var(--u-min-font), calc(14 * var(--u))); line-height: 1.8; }

.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(15 * var(--u)); }
.info-card { padding: calc(20 * var(--u)); }
.info-card__label {
  color: var(--c-orange); font-size: max(var(--u-min-font), calc(12 * var(--u)));
  font-weight: 700; letter-spacing: .04em; margin-bottom: calc(5 * var(--u));
}
.info-card__value { color: var(--c-navy); font-size: max(var(--u-min-font), calc(16 * var(--u))); line-height: 1.7; }
.info-card__value a { color: var(--c-teal); }
.info-card__value a:hover { color: var(--c-orange); }

.glossary-list { display: grid; gap: calc(12 * var(--u)); }
.glossary-item { padding: calc(16 * var(--u)); }
.glossary-item__term { color: var(--c-teal); font-weight: 700; font-size: max(var(--u-min-font), calc(17 * var(--u))); }
.glossary-item__def { margin-top: calc(5 * var(--u)); font-size: max(var(--u-min-font), calc(14 * var(--u))); line-height: 1.8; }

.empty-state { padding: calc(36 * var(--u)); text-align: center; color: var(--c-text); font-size: max(var(--u-min-font), calc(15 * var(--u))); }

/* ==========================================================================
   v1.6 新增區塊 — 數值沿用既有節奏（卡距 15u、區段標題 24u、內文 13–15u）
   ========================================================================== */

/* --- 專業把關：3 欄，比特色卡厚一級（有段落說明） --- */
.standards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(15 * var(--u)); }
.standard-card {
  padding: calc(20 * var(--u)) calc(22 * var(--u));
  display: flex; flex-direction: column;
  border-top: calc(3 * var(--u)) solid var(--c-orange);
}
.standard-card__eyebrow {
  color: var(--c-orange);
  font-size: max(var(--u-min-font), calc(11 * var(--u)));
  font-weight: 700; letter-spacing: .06em;
  margin-bottom: calc(8 * var(--u));
}
.standard-card__title {
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(18 * var(--u)));
  line-height: calc(25 * var(--u));
  font-weight: 700;
}
.standard-card__no { color: var(--c-orange); margin-right: calc(6 * var(--u)); }
.standard-card__desc {
  font-size: max(var(--u-min-font), calc(14 * var(--u)));
  line-height: calc(22 * var(--u));
  margin-top: calc(10 * var(--u));
}

/* --- 關於佳泰：左文右時間軸 --- */
.about { display: grid; grid-template-columns: 1fr calc(300 * var(--u)); gap: calc(40 * var(--u)); align-items: start; }
.about__para {
  font-size: max(var(--u-min-font), calc(15 * var(--u)));
  line-height: calc(25 * var(--u));
  margin-bottom: calc(12 * var(--u));
  max-width: calc(640 * var(--u));
}
.about__quote {
  margin: calc(20 * var(--u)) 0 0;
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  background: var(--c-white);
  border-left: calc(3 * var(--u)) solid var(--c-orange);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  color: var(--c-navy);
  font-size: max(var(--u-min-font), calc(16 * var(--u)));
  line-height: calc(26 * var(--u));
  font-weight: 500;
  max-width: calc(560 * var(--u));
}
.about__quote::before { content: "「"; }
.about__quote::after { content: "」"; }

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: calc(5 * var(--u));
  top: calc(8 * var(--u)); bottom: calc(8 * var(--u));
  width: var(--hairline); background: var(--c-teal); opacity: .25;
}
.timeline__item {
  position: relative; padding-left: calc(26 * var(--u));
  padding-bottom: calc(20 * var(--u));
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: 0; top: calc(6 * var(--u));
  width: calc(11 * var(--u)); height: calc(11 * var(--u));
  background: var(--c-orange); transform: rotate(45deg);
}
.timeline__year {
  color: var(--c-orange);
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  font-weight: 700; letter-spacing: .04em;
}
.timeline__text {
  color: var(--c-navy);
  font-size: max(var(--u-min-font), calc(16 * var(--u)));
  line-height: calc(22 * var(--u));
  font-weight: 700;
}
.timeline__note {
  display: block; color: var(--c-text); font-weight: 400;
  font-size: max(var(--u-min-font), calc(11 * var(--u)));
  letter-spacing: .04em; margin-top: calc(2 * var(--u));
}

/* --- 專案實績：3 欄，圖上文下 --- */
.applications { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(15 * var(--u)); }
.app-card { display: flex; flex-direction: column; overflow: hidden; }
.app-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-navy);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* <img> 帶 width/height 屬性時瀏覽器會用內在比例，蓋掉容器的 aspect-ratio。
   改用絕對定位撐滿容器，六張圖的外框才會等高。 */
.app-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.app-card__placeholder { opacity: .5; }
.app-card__placeholder svg { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
.app-card__placeholder svg g { stroke: var(--c-teal-soft); }
.app-card__body { padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
.app-card__eyebrow {
  color: var(--c-orange);
  font-size: max(var(--u-min-font), calc(11 * var(--u)));
  font-weight: 700; letter-spacing: .06em;
  margin-bottom: calc(5 * var(--u));
}
.app-card__title {
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(17 * var(--u)));
  line-height: calc(23 * var(--u));
  font-weight: 700;
}
.app-card__desc {
  font-size: max(var(--u-min-font), calc(13 * var(--u)));
  line-height: calc(19 * var(--u));
  margin-top: calc(6 * var(--u));
}

/* --- FAQ 摺疊（首頁區塊用） --- */
.faq-item--toggle { padding: 0; overflow: hidden; }
.faq-item--toggle summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: calc(12 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  color: var(--c-navy);
  font-size: max(var(--u-min-font), calc(16 * var(--u)));
  line-height: calc(24 * var(--u));
  font-weight: 700;
  min-height: calc(44 * var(--u));
}
.faq-item--toggle summary::-webkit-details-marker { display: none; }
.faq-item__no { color: var(--c-orange); flex: 0 0 auto; }
.faq-item__sign {
  margin-left: auto; flex: 0 0 auto;
  color: var(--c-orange);
  font-size: max(var(--u-min-font), calc(20 * var(--u)));
  line-height: 1; transition: transform var(--transition);
}
.faq-item--toggle[open] .faq-item__sign { transform: rotate(45deg); }
.faq-item--toggle .faq-item__a {
  margin: 0; padding: 0 calc(20 * var(--u)) calc(18 * var(--u)) calc(46 * var(--u));
  font-size: max(var(--u-min-font), calc(14 * var(--u)));
  line-height: calc(23 * var(--u));
}
@media (hover: hover) { .faq-item--toggle summary:hover { background: var(--c-teal-soft); } }

/* --- CTA 色帶 --- */
.section--dark .section__eyebrow { color: var(--c-orange); }
.cta-band { text-align: center; }
.cta-band__title {
  color: var(--c-white);
  font-size: calc(26 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 700;
}
.cta-band__meta {
  color: rgba(255, 255, 255, .82);
  font-size: max(var(--u-min-font), calc(13 * var(--u)));
  line-height: calc(22 * var(--u));
  margin-top: calc(10 * var(--u));
}
/* CTA 與頁尾相連成一整塊深底。
   注意：頁尾在 </main> 之外，與 section 不是兄弟節點，
   不能用 .section--cta + .site-footer，分隔線直接做在頁尾上。 */
.section--cta { padding-bottom: calc(22 * var(--u)); }

/* 首頁 FAQ 區塊下方的「看更多」 */
.faq-more { margin-top: calc(16 * var(--u)); text-align: center; }