@charset "UTF-8";
/* ==========================================================================
   style.scss：單元頁面樣式入口
   撰寫規範：iBest 頁面開發規範（.claude/skills/ibest-guidelines）
   ========================================================================== */
/* 全域設定 --------------------------------------------------------------- */
/* ==========================================================================
   _setting：全域 CSS 變數（僅此處定義，禁止於各單元 CSS 重新定義同名變數）
   色票取樣自 Figma 設計稿 2607_Piny_Ai客服機器人_設計稿
   ========================================================================== */
:root {
  /* 顏色 ------------------------------------------------------------ */
  --mainColor: #C4252B; /* 主視覺紅（CTA、header 按鈕） */
  --secondColor: #E53935; /* 次要亮紅（大面積色塊、漸層） */
  --phoneColor: #D42742; /* 聯絡電話／信箱 icon 紅 */
  --thirdColor: #FDF3F3; /* 輔助背景（淡紅） */
  --mainLightColor: #F04A43; /* 標題漸層起始 */
  --mainDarkColor: #9C1419; /* 標題漸層結尾 */
  --titleGradient: linear-gradient(90deg,
      var(--mainLightColor) 0%, var(--mainColor) 60%, var(--mainDarkColor) 100%);
  --titleColor: #1E2022;
  --textColor: #535354;
  --lightTextColor: #8B8B8B;
  --footerNavColor: #555555; /* footer 連結欄文字 */
  --linkColor: var(--titleColor);
  --linkHoverColor: var(--mainColor);
  --chatBtnColor: #2B6CF6; /* 浮動按鈕：線上諮詢藍 */
  --lineBtnColor: #00C300; /* 浮動按鈕：LINE 綠 */
  --btnColor: #fff;
  --btnBgColor: var(--mainColor);
  --bgColor: #fff;
  --grayBgColor: #F5F5F5;
  --lineColor: #E5E0E0;
  --maskColor: rgba(30, 32, 34, .7);
  /* 字體 ------------------------------------------------------------ */
  --mainFont: 'Noto Sans TC', 'Microsoft JhengHei', Arial, sans-serif;
  --enFont: 'Roboto', 'Noto Sans TC', Arial, sans-serif;
  --secondFont: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  /* 字級：一律 --{用途}Size / SizeMedium / SizeSmall（iBest 規範）---- */
  /* 主視覺標題 */
  --kvTitleSize: 56px;
  --kvTitleSizeMedium: 44px;
  --kvTitleSizeSmall: 32px;
  /* 單元主標題 */
  --titleSize: 50px;
  --titleSizeMedium: 40px;
  --titleSizeSmall: 28px;
  /* 副標題 */
  --subtitleSize: 28px;
  --subtitleSizeMedium: 24px;
  --subtitleSizeSmall: 20px;
  /* 卡片標題（方案卡、流程卡） */
  --cardTitleSize: 36px;
  --cardTitleSizeMedium: 32px;
  --cardTitleSizeSmall: 26px;
  /* 流程序號 */
  --stepNumSize: 36px;
  --stepNumSizeMedium: 30px;
  --stepNumSizeSmall: 26px;
  /* 流程項目標題 */
  --stepTitleSize: 28px;
  --stepTitleSizeMedium: 24px;
  --stepTitleSizeSmall: 20px;
  /* 方案價格 */
  --priceSize: 44px;
  --priceSizeSmall: 32px;
  --priceUnitSize: 20px;
  --priceUnitSizeSmall: 16px;
  /* 比較表欄標題 */
  --tableHeadSize: 20px;
  /* 痛點三角標號 */
  --badgeNumSize: 20px;
  --badgeNumSizeSmall: 15px;
  --badgeTextSize: 8px;
  --badgeTextSizeSmall: 7px;
  /* 聯絡電話 */
  --phoneSize: 28px;
  --phoneSizeSmall: 24px;
  /* 裝飾標題／卡片文字 */
  --decoTitleSize: 15px;
  --textTitleSize: 22px;
  --textTitleSizeSmall: 18px;
  /* 內文 */
  --textSize: 16px;
  --textSizeSmall: 15px;
  --smallSize: 14px;
  --noteSize: 13px;
  /* 版面 ------------------------------------------------------------ */
  --wrapWidth: 1400px;
  --wrapPadding: clamp(16px, 4vw, 60px);
  --sectionSpace: clamp(60px, 8vw, 140px);
  --headerHeight: 80px; /* 比照官網 header 高度 */
  --radiusLarge: 30px;
  --radiusMedium: 20px;
  --radiusSmall: 10px;
  --shadowLight: 0 4px 20px rgba(30, 32, 34, .06);
  --shadowFloat: 0 20px 50px rgba(30, 32, 34, .12);
  --shadowMain: 0 18px 40px rgba(229, 57, 53, .25);
}

/* ==========================================================================
   _keyframes：全域共用動畫
   註：入場／滾動觸發動畫交由 GSAP 處理，此處僅放持續性、狀態性動畫
   ========================================================================== */
@keyframes slideUpAnimation {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes marqueeAnimation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes pulseAnimation {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.45);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(229, 57, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
  }
}
@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    /* 浮動幅度可由使用端以 --floatDistance 覆寫；未指定時維持原本的 -12px */
    transform: translateY(var(--floatDistance, -12px));
  }
}
@keyframes zoomAnimation {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}
/* 弱化版光波：擴散範圍較小、透明度較低（跑馬燈機器人 icon 用） */
@keyframes rippleSoftAnimation {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
@keyframes rippleAnimation {
  0% {
    opacity: 0.35;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}
/* 滑動提示箭頭：往右推出後淡出、再從左側淡入，兩個 chevron 錯拍形成前進感
   （compareArea 手機版；第一個 chevron 另以 60% 透明度呈現，故此處只動 transform
   與相對透明度，實際透明度由 .chev.isFirst 的 opacity 乘算後的視覺結果決定） */
@keyframes swipeHintAnimation {
  0% {
    transform: translateX(-4px);
    opacity: 0.3;
  }
  40% {
    transform: translateX(2px);
    opacity: 1;
  }
  70% {
    transform: translateX(6px);
    opacity: 0.6;
  }
  100% {
    transform: translateX(8px);
    opacity: 0;
  }
}
/* ==========================================================================
   _base：Reset、共用容器（wrap）、共用元件（titleBox / btn / Img / Txt）
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--headerHeight);
}

body {
  background: var(--bgColor);
  color: var(--textColor);
  font-family: var(--mainFont);
  font-size: var(--textSize);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--linkColor);
  text-decoration: none;
  transition: color 0.5s ease-in-out;
}

ul, ol {
  list-style: none;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* 內容寬度容器 ---------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrapWidth) + var(--wrapPadding) * 2);
  margin: 0 auto;
  padding-inline: var(--wrapPadding);
}

/* 單元區塊共用間距 ------------------------------------------------------ */
section[class$=Area] {
  position: relative;
  padding-block: var(--sectionSpace);
}

/* 標題群組 -------------------------------------------------------------- */
.titleBox .decoTitle {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 20px;
  border: 1px solid var(--lineColor);
  border-radius: 999px;
  background: #fff;
  color: var(--titleColor);
  font-size: var(--decoTitleSize);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.titleBox .title {
  color: var(--titleColor);
  font-size: var(--titleSize);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  /* 逐字裁切進場（由 JS initTitleReveal 拆字後加上 .isSplit）
     .ch 是 overflow:hidden 的遮罩，內層 i 才是實際往上位移的字 */
}
.titleBox .title.isSplit .ch {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.titleBox .title.isSplit {
  /* 拆字後每個字都成了獨立的 inline-block，英文單字會被逐字斷行；
     連續英數字由 JS 包進 .word，整組不換行 */
}
.titleBox .title.isSplit .word {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
}
.titleBox .title.isSplit .ch > i {
  display: inline-block;
  font-style: normal;
  white-space: pre; /* 保留半形空白的寬度 */
  will-change: transform;
}
.titleBox .title.isSplit {
  /* 漸層改掛在每個字上（見 initTitleReveal 註解），
     em 自身不再負責 background-clip，否則會與子層 transform 打架 */
}
.titleBox .title.isSplit em {
  background: none;
  -webkit-text-fill-color: currentColor;
}
.titleBox .title.isSplit em .ch > i {
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.titleBox .title {
  /* 紅字一律使用品牌漸層（設計稿 #F04A43 → #C4252B → #9C1419） */
}
.titleBox .title em {
  background: var(--titleGradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--mainColor);
  font-style: normal;
}
.titleBox .subtitle {
  margin-top: 10px;
  color: var(--titleColor);
  font-size: var(--subtitleSize);
  font-weight: 700;
}
.titleBox .text {
  margin-top: 20px;
  font-size: var(--textSize);
}
.titleBox .btnBox {
  margin-top: 40px;
}

/* 按鈕 ------------------------------------------------------------------ */
.btnBox {
  display: flex;
  align-items: center;
  gap: 16px;
}
.btnBox.single {
  margin-top: 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 50px;
  padding: 10px 30px;
  border: 1px solid transparent;
  border-radius: var(--radiusSmall);
  font-size: var(--textSize);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}
.btn.animation {
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out, border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.btn.bgMain {
  border-color: var(--mainColor);
  background: var(--btnBgColor);
  color: var(--btnColor);
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.16);
}
.btn.lineMain {
  border-color: var(--mainColor);
  background: #fff;
  color: var(--mainColor);
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.1);
}
.btn.colorMain {
  min-width: auto;
  min-height: auto;
  padding: 0;
  color: var(--mainColor);
}
.btn {
  /* 圓形箭頭按鈕（方案卡） */
}
.btn.iconArrow {
  position: relative;
  min-width: 56px;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  background: var(--mainColor);
}
.btn.iconArrow::after {
  content: "";
  width: 18px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateX(-4px) rotate(-45deg);
}

/* 圖片容器 -------------------------------------------------------------- */
.Img {
  overflow: hidden;
  border-radius: var(--radiusMedium);
}
.Img img {
  width: 100%;
}

/* 文字區塊 -------------------------------------------------------------- */
.Txt .title {
  color: var(--titleColor);
  font-size: var(--textTitleSize);
  font-weight: 700;
  line-height: 1.5;
}
.Txt .subtitle {
  margin-top: 6px;
  color: var(--textColor);
  font-size: var(--textSizeSmall);
}
.Txt .text {
  margin-top: 10px;
  font-size: var(--textSizeSmall);
}

/* 富文字編輯器 ---------------------------------------------------------- */
.textEditor {
  font-size: var(--textSizeSmall);
  line-height: 1.9;
}
.textEditor h4 {
  margin-top: 16px;
  color: var(--mainColor);
  font-size: var(--textSizeSmall);
}
.textEditor h4:first-child {
  margin-top: 0;
}
.textEditor p + p {
  margin-top: 8px;
}
.textEditor ul {
  margin-top: 8px;
  padding-left: 1.2em;
  list-style: disc;
}
.textEditor li + li {
  margin-top: 4px;
}

/* hover 僅限非觸控裝置 --------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--linkHoverColor);
  }
  .btn.bgMain:hover {
    border-color: var(--titleColor);
    background: var(--titleColor);
    box-shadow: 0 4px 20px rgba(30, 32, 34, 0.25);
  }
  .btn.lineMain:hover {
    background: var(--mainColor);
    color: #fff;
  }
  .btn.iconArrow:hover {
    background: var(--mainDarkColor);
  }
}
/* 僅手機版顯示的斷行（<br class="brSp">），桌機／平板隱藏 */
.brSp {
  display: none;
}

/* RWD：max-width 由大而小覆寫 -------------------------------------------- */
@media (max-width: 1180px) {
  .titleBox .title {
    font-size: var(--titleSizeMedium);
  }
  .titleBox .subtitle {
    font-size: var(--subtitleSizeMedium);
  }
}
@media (max-width: 768px) {
  .brSp {
    display: inline;
  }
  .titleBox .title {
    font-size: var(--titleSizeSmall);
  }
  .titleBox .subtitle {
    font-size: var(--subtitleSizeSmall);
  }
  .titleBox .btnBox {
    margin-top: 28px;
  }
  .Txt .title {
    font-size: var(--textTitleSizeSmall);
  }
  .btn {
    min-width: 140px;
    min-height: 46px;
    padding: 8px 22px;
    font-size: var(--textSizeSmall);
  }
}
/* ==========================================================================
   _form：表單共用樣式
   ========================================================================== */
.formBox .formTitle {
  margin-bottom: 30px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mainColor);
  color: var(--textColor);
  font-size: var(--textSizeSmall);
}

.formList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 44px;
}

/* 第一列：聯絡人姓名滿版（底線橫跨整列），先生／女士以絕對定位靠右，
   壓在同一條底線的上方（設計稿的排法） */
.formRow {
  position: relative;
  grid-column: 1/-1;
}

.formItem {
  position: relative;
}
.formItem.isFull {
  grid-column: 1/-1;
}

.formLabel {
  display: block;
  margin-bottom: 6px;
  color: var(--textColor);
  font-size: var(--smallSize);
}
.formLabel em {
  color: var(--mainColor);
  font-style: normal;
}

.formInput {
  width: 100%;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--lineColor);
  background: transparent;
  color: var(--titleColor);
  font-family: var(--mainFont);
  font-size: var(--textSize);
  transition: border-color 0.5s ease-in-out;
}
.formInput:focus {
  outline: 0;
  border-bottom-color: var(--mainColor);
}

.formInput.error {
  border-bottom: 2px solid #d0021b;
  background: rgba(208, 2, 27, 0.05);
}

.menuFormBox .focusItem.error {
  border-bottom: 2px solid #d0021b;
  background: rgba(208, 2, 27, 0.05);
}

textarea.formInput {
  resize: vertical;
}

/* 性別 radio ------------------------------------------------------------ */
.radioBox {
  position: absolute;
  right: 0;
  bottom: 10px;
  display: flex;
  gap: 16px;
}

.radioItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--textColor);
  font-size: var(--smallSize);
  cursor: pointer;
}
.radioItem input {
  accent-color: var(--mainColor);
}

/* 送出區：人機驗證 + 確認送出，同列靠左；空間不足時按鈕換行 ----------------- */
.formFoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  margin-top: 56px;
}

/* 滑動解鎖 -------------------------------------------------------------- */
.slideLock {
  position: relative;
  display: flex;
  align-items: center;
  width: 260px;
  height: 50px;
  border-radius: var(--radiusSmall);
  background: #EFEFEF;
  overflow: hidden;
  /* 觸控裝置：整條解鎖區不接手瀏覽器捲動手勢，避免拖曳被中斷（手機一次只動一小步的卡頓） */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.slideLock.isUnlocked .slideLockText {
  color: var(--mainColor);
}

.slideLockBtn {
  position: relative;
  z-index: 2;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: var(--radiusSmall);
  background: var(--mainColor);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.slideLockBtn:active {
  cursor: grabbing;
}
.slideLockBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-70%, -50%) rotate(-45deg);
}

.slideLockText {
  flex: 1;
  color: var(--lightTextColor);
  font-size: var(--smallSize);
  text-align: center;
  user-select: none;
}

/* RWD ------------------------------------------------------------------- */
@media (max-width: 991px) {
  .formList {
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .formList {
    grid-template-columns: 1fr;
  }
  .formFoot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 36px;
  }
  .slideLock {
    width: 100%;
  }
  .formFoot .btnBox .btn {
    width: 100%;
  }
}
/* 共用區塊 --------------------------------------------------------------- */
/* ==========================================================================
   header：固定頁首
   完全比照愛貝斯官網 https://www.ibest.com.tw/（樣式取自官網 inline <style>）
   結構：logo（187px）＋ rightBox（headerMenuList ＋ btnMenu 80×80）
   斷點：≥1181px 顯示主選單；≤1180px 只留漢堡鈕（漢堡鈕全尺寸都在）
   ========================================================================== */
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #fff;
  transition: all 0.5s;
  /* 官網為 .wrapMax：header 內 max-width 放到 100%、左右內距固定 20px */
}
.header .wrap {
  display: flex;
  align-items: center;
  max-width: 100%;
  height: var(--headerHeight);
  padding-left: 20px;
  padding-right: 20px;
}
.header .logo {
  flex-shrink: 0;
  width: 187px;
  line-height: 0;
}
.header .logo a {
  display: block;
  height: 38px;
}
.header .logo img {
  display: block;
  width: 187px;
  height: auto;
}
.header .rightBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(100% - 187px);
}

/* 主選單（≥1181px） ------------------------------------------------------ */
.headerMenuList ul {
  display: flex;
}
.headerMenuList li {
  margin-left: 25px;
  margin-right: 25px;
}
.headerMenuList .link {
  position: relative;
  color: #3c3c3c;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.headerMenuList .link.current {
  color: #bb1b21;
}

/* 漢堡鈕（官網版本：80×80、紅色線條、開合各自帶 delay 序列） ------------- */
.btnMenu {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border: none;
  padding: 0;
  text-align: center;
  background: none;
  outline: 0;
  cursor: pointer;
  transition: all 1s;
}
.btnMenu span {
  display: inline-flex;
}
.btnMenu i {
  display: block;
  background-color: #be242a;
  transition: all 0.3s;
}
.btnMenu {
  /* 三條橫線 */
}
.btnMenu .open {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}
.btnMenu .open i {
  width: 100%;
  height: 2px;
}
.btnMenu .open i:nth-child(1) {
  transition-delay: 0.61s;
}
.btnMenu .open i:nth-child(2) {
  transition-delay: 0.49s;
}
.btnMenu .open i:nth-child(3) {
  transition-delay: 0.37s;
}
.btnMenu {
  /* 十字（旋轉 45deg 成 ×） */
}
.btnMenu .close {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 26px;
  height: 26px;
}
.btnMenu .close i:nth-child(1) {
  position: absolute;
  top: 0;
  left: 9.5px;
  width: 2px;
  height: 0%;
  transition-delay: 0s;
}
.btnMenu .close i:nth-child(2) {
  position: absolute;
  left: 0;
  top: 9.5px;
  width: 0%;
  height: 2px;
  transition-delay: 0.25s;
}
.btnMenu.show .open i {
  width: 0;
}
.btnMenu.show .open i:nth-child(1) {
  transition-delay: 0.12s;
}
.btnMenu.show .open i:nth-child(2) {
  transition-delay: 0.24s;
}
.btnMenu.show .open i:nth-child(3) {
  transition-delay: 0.36s;
}
.btnMenu.show .close i:nth-child(1) {
  height: 80%;
  transition-delay: 0.8s;
}
.btnMenu.show .close i:nth-child(2) {
  width: 80%;
  transition-delay: 0.7s;
}

@media (hover: hover) and (pointer: fine) {
  .headerMenuList .link:hover {
    color: #bb1b21;
  }
}
/* RWD ------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .header .wrap {
    padding-right: 0;
  }
}
@media (max-width: 1180px) {
  .headerMenuList {
    display: none;
  }
}
/* ==========================================================================
   menuArea：漢堡選單展開的全螢幕選單
   完全比照愛貝斯官網 https://www.ibest.com.tw/（樣式取自官網 inline <style>）
   結構：leftBox（灰底詢價表單，≤960px 隱藏）＋ rightBox（紅底兩欄選單）
   高度依專案規範改用 dvh（官網原為 vh）
   ========================================================================== */
body.noScroll {
  overflow-y: hidden;
}

.menuArea {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  height: calc(100% - var(--headerHeight));
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.menuArea .wrap {
  display: flex;
  max-width: 100%;
  min-height: 100dvh;
  padding: 0;
}
.menuArea .leftBox,
.menuArea .rightBox {
  width: 50%;
  padding: 5% 5% 3%;
  opacity: 0;
}
.menuArea .leftBox {
  background-color: #f3f2f2;
  transform: translateX(-10%);
}
.menuArea .rightBox {
  background-color: #bb1b21;
  transform: translateX(10%);
}
.menuArea .inner {
  transform: translateY(10px);
  opacity: 0;
}
.menuArea {
  /* 進出場過場 */
}
.menuArea.transition {
  transition: opacity 0.5s;
}
.menuArea.transition .leftBox,
.menuArea.transition .rightBox {
  transition: all 0.5s;
}
.menuArea.transition .inner {
  transition: all 0.5s 0.4s;
}
.menuArea.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.menuArea.show .leftBox,
.menuArea.show .rightBox {
  transform: translateX(0);
  opacity: 1;
}
.menuArea.show .inner {
  transform: translateY(0);
  opacity: 1;
}
.menuArea {
  /* 選單下方聯絡資訊 */
}
.menuArea .menuBottom {
  margin-top: 230px;
  line-height: 2;
  letter-spacing: 0.02em;
  color: #f1d1d3;
}
.menuArea .menuBottom a {
  color: #f1d1d3;
}
.menuArea .menuCopyright {
  font-weight: 300;
  color: #e4a4a6;
}

/* 選單本體 --------------------------------------------------------------- */
.menuBox {
  display: flex;
}

.menuList {
  flex-shrink: 0;
}
.menuList a {
  position: relative;
  display: inline-block;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  line-height: 1;
  font-weight: 200;
  font-size: 30px;
  letter-spacing: 0.05em;
  color: #fff;
}
.menuList a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  opacity: 0;
  transform: translateY(-50px);
  pointer-events: none;
  transition: all 0.4s;
}

.menu {
  margin-top: 5px;
  margin-left: 120px;
}
.menu a {
  display: block;
  padding-top: 7px;
  padding-bottom: 7px;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .menuArea .menuBottom a:hover {
    text-decoration: underline;
  }
  .menuList a:hover::after {
    opacity: 1;
    transform: translateY(0);
  }
  .menu a:hover {
    opacity: 0.7;
  }
}
/* 左欄詢價表單（比照官網 menuFormBox：浮動標籤 ＋ 底線輸入框） ----------- */
.menuFormBox .mainTitle {
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.05em;
  color: #bb1b21;
}
.menuFormBox .formTitle {
  margin-bottom: 25px;
  padding-bottom: 5px;
  border-bottom: 3px solid #be242a;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #1a1a1a;
}
.menuFormBox .formList {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-left: -15px;
  margin-right: -15px;
  padding-bottom: 20px;
}
.menuFormBox .formList > li {
  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
}
.menuFormBox .formList > li.full {
  width: 100%;
}
.menuFormBox .item {
  position: relative;
  display: flex;
}
.menuFormBox .title {
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #444;
  pointer-events: none;
  transition: all 0.4s;
}
.menuFormBox .title em {
  font-style: normal;
  color: #bb1b21;
}
.menuFormBox .focus .title {
  font-size: 12px;
  transform: translateY(-12px);
}
.menuFormBox .inputBox {
  flex-grow: 1;
}
.menuFormBox input[type=text],
.menuFormBox select {
  width: 100%;
  height: 40px;
  border: none;
  border-bottom: 1px solid #dbdada;
  border-radius: 0;
  background: none;
  font-family: var(--mainFont);
  font-weight: 300;
  font-size: 16px;
  color: var(--titleColor);
  transition: all 0.5s;
}
.menuFormBox input[type=text]:focus,
.menuFormBox select:focus {
  outline: 0;
  border-bottom-color: #bb1b21;
}

/* 先生／女士 圓形單選（官網 .radio2） */
.radio2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: #444;
  cursor: pointer;
}
.radio2 input[type=radio] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.radio2 i {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #c6c6c6;
  transition: all 0.5s;
}
.radio2 i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -5px;
  margin-top: -4px;
  width: 10px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' d='M1 4.2 3.6 6.8 9 1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transition: all 0.5s;
}
.radio2 input[type=radio]:checked ~ i {
  background-color: #bb1b21;
}
.radio2 input[type=radio]:checked ~ i::before {
  opacity: 1;
}

/* RWD ------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .menu {
    margin-left: 60px;
  }
}
@media (max-width: 1023px) {
  .menuList a {
    font-size: 24px;
  }
}
@media (max-width: 960px) {
  .menuArea {
    top: 0;
    bottom: auto;
    height: 100dvh;
  }
  .menuArea .wrap {
    padding-top: var(--headerHeight);
  }
  .menuArea .leftBox {
    display: none;
  }
  .menuArea .rightBox {
    width: 100%;
    transform: translateX(0);
  }
  .menuArea .menuBottom {
    margin-top: 40px;
  }
}
@media (max-width: 480px) {
  .menuBox {
    flex-direction: column;
  }
  .menu {
    margin-left: 0;
  }
  .menuFormBox .formList > li {
    width: 100%;
  }
  .menuFormBox .item {
    flex-wrap: wrap;
  }
  .menuFormBox .sexBox {
    width: 100%;
    margin-top: 20px;
  }
}
/* ==========================================================================
   footer：頁尾（比照愛貝思官網 https://www.ibest.com.tw/）
   結構：topBox 聯絡資訊列 ／ bottomBox 品牌文字＋連結列＋copyright＋goTop
   ========================================================================== */
.footer {
  overflow: hidden;
  color: #fff;
  background: #1c1c1c;
  /* 容器比照官網 wrapMax（1320 - 左右 20 = 內容 1280），不沿用全站 .wrap 的 1400 */
}
.footer .wrap {
  max-width: 1320px;
  padding-inline: 20px;
}
.footer {
  /* topBox：地址／電話／信箱 ------------------------------------------ */
}
.footer .topBox {
  padding: 15px 0 9px;
  border-bottom: 1px solid #303030;
}
.footer .list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 20px;
}
.footer .list .itemBox {
  display: block;
  padding: 8px 0;
}
.footer {
  /* line-height 需明寫：address 會繼承 body 的 28px，讓整條聯絡列比官網高 8px */
}
.footer .list .item {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #bebebe;
  line-height: 20px;
}
.footer .list .title,
.footer .list a {
  padding: 0;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.footer .list .item a {
  color: #bebebe;
  font-weight: 300;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color 0.4s ease;
}
.footer .list svg {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: transparent;
  stroke: #fff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer {
  /* bottomBox ---------------------------------------------------------- */
}
.footer .bottomBox .wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding-top: 44px;
  padding-bottom: 33px;
}
.footer .footerText {
  width: 52%;
  color: #d4d4d4;
  font-size: var(--textSizeSmall);
  font-weight: 300;
  line-height: 1.8;
}
.footer .footerText .logo {
  width: 230px;
  margin-bottom: 20px;
}
.footer .footerText .logo img {
  display: block;
  width: 100%;
  height: auto;
}
.footer .footerText a {
  color: #fff;
  transition: color 0.4s ease;
}
.footer .copyrightBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid #303030;
  font-size: var(--textSizeSmall);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
}
.footer .copyrightBox .bottom {
  padding: 0;
  color: #606060;
}
.footer .copyrightBox .copyrightText {
  color: #828282;
  font-size: var(--smallSize);
}

/* 頁尾連結列 -------------------------------------------------------------- */
.footArticleList {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 10px 20px;
  width: 40%;
  max-width: 450px;
  padding-left: 20px;
}
.footArticleList .articleItem {
  display: block;
  width: calc((100% - 40px) / 3);
}
.footArticleList .articleItem a {
  display: block;
  padding: 5px 0;
  color: #d4d4d4;
  font-size: 16px;
  line-height: 20px;
  font-weight: 300;
  letter-spacing: 0.05em;
  transition: color 0.4s ease;
}

/* 回到頁首 ---------------------------------------------------------------- */
.goTopStyle {
  position: absolute;
  right: -130px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: none;
  background: #bc1b21;
  cursor: pointer;
  transition: background-color 0.4s ease;
}
.goTopStyle .icon-arrow {
  width: 18px;
  height: 9px;
  color: #fff;
  transform: rotate(90deg);
  transition: color 0.4s ease;
}

/* hover（僅非觸控裝置） --------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .footer .list .item a:hover,
  .footer .footerText a:hover,
  .footArticleList .articleItem a:hover {
    color: #e13131;
  }
  .goTopStyle:hover {
    background: #fff;
  }
  .goTopStyle:hover .icon-arrow {
    color: #bc1b21;
  }
}
/* RWD --------------------------------------------------------------------- */
@media (max-width: 1640px) {
  .goTopStyle {
    right: -45px;
  }
}
@media (max-width: 1440px) {
  .footer .list .title,
  .footer .list a {
    font-size: var(--textSizeSmall);
    letter-spacing: 0;
  }
  .goTopStyle {
    display: none;
  }
}
@media (max-width: 1180px) {
  .footer .list {
    max-width: 650px;
    margin: 0 auto;
    justify-content: center;
  }
  .footer .list .itemBox {
    max-width: calc(50% - 10px);
  }
  .footer .list svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 1023px) {
  .footer .footerText {
    width: 100%;
  }
  .footArticleList {
    width: 100%;
    padding: 0;
  }
  .footArticleList .articleItem {
    width: calc(50% - 10px);
  }
  .footArticleList .articleItem a {
    padding: 0;
    font-size: var(--textSizeSmall);
    line-height: 1.5;
  }
  .footer .copyrightBox {
    flex-direction: column;
    gap: 15px;
  }
}
@media (max-width: 768px) {
  .footer .list {
    padding: 10px 0;
  }
  .footer .list .itemBox {
    width: 100%;
    max-width: 100%;
    padding: 3px 0;
  }
}
@media (max-width: 480px) {
  .footer .list .item {
    flex-wrap: wrap;
  }
  .footer .copyrightBox {
    margin-top: 10px;
    padding-top: 15px;
  }
}
/* ==========================================================================
   floatBox：右下角浮動客服按鈕（四顆圓鈕，由上而下：
   立即諮詢提示 + 機器人紅鈕 / 文件鈕 / 提示泡泡 + 線上諮詢藍鈕 / LINE 綠鈕）
   ========================================================================== */
.floatBox {
  position: fixed;
  right: 20px; /* 官網圓鈕右緣一律 right:20（.ai-chat-toggle 20、LINE 綠圓 25-5） */
  bottom: 20px;
  z-index: 10000; /* 對齊官網 .sideFiLineBtn，選單展開時仍浮在最上層 */
}

.floatList {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px; /* 官網 .ai-chat-toggle 與 LINE 鈕的實測間距 */
}

.floatItem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  /* 上面兩組間距逐層放寬（都帶外擴光圈，統一 10px 太擠）：
     第 1↔2 顆最寬鬆（10 + 12 = 22px）、第 2↔3 顆次之（10 + 6 = 16px），
     第 3↔4 顆維持基礎 gap 10px */
}
.floatItem:first-child {
  margin-bottom: 12px;
}
.floatItem:nth-child(2) {
  margin-bottom: 6px;
}
.floatItem {
  /* 帶對話提示泡泡的項目改直排：泡泡佔位在鈕正上方，把上方兩顆紅鈕推開，
     關閉泡泡（.isHide → display:none）後 flex 自動收合，四顆按鈕即回到等距 */
}
.floatItem.hasTip {
  flex-direction: column;
  align-items: flex-end;
  gap: 12px; /* 官網泡泡底距鈕頂 12px */
}

/* 按鈕本體：60px 圓形（對齊 ibest 官網 .sideFiLineBtn 的 60px 綠圓鈕） ------- */
.floatLink {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--mainColor);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 官網 .ai-chat-toggle */
  transition: transform 0.3s ease-in-out;
  /* 機器人紅鈕：亮紅 + 同心淡紅外圈 */
}
.floatLink.isRobot {
  background: var(--secondColor);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--secondColor) 22%, transparent), 0 0 0 12px color-mix(in srgb, var(--secondColor) 10%, transparent);
}
.floatLink {
  /* 文件鈕：深紅 + 淡紅外圈（設計稿為紅底白色文件圖示） */
}
.floatLink.isInquiry {
  background: var(--mainColor);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--secondColor) 14%, transparent);
}
.floatLink.isChat {
  background: var(--chatBtnColor);
}
.floatLink {
  /* LINE 鈕完全比照官網 .sideFiLineBtn：本體透明、綠膠囊由 ::before 畫，
     hover 時 ::before 橫向展開成膠囊、文字滑出（見下方 hover 區塊） */
}
.floatLink.isLine {
  width: auto;
  height: 60px;
  /* ::before 以 right:-5px 外掛綠圓，本體右緣需內縮 5px，
     綠圓右緣才會跟其他三顆鈕切齊（官網是靠容器 right:25 達成同一件事） */
  margin-right: 5px;
  padding: 5px 7px 5px 10px;
  gap: 10px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.floatLink.isLine::before {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  z-index: -1;
  width: 60px;
  height: 100%;
  border-radius: 30px;
  background: var(--lineBtnColor);
  transition: width 0.4s ease-in-out;
}

/* 圖示尺寸：PNG 已裁成「墨水滿框」的 2x 素材，故框寬即視覺尺寸。
   官網 chat 圖示 path 墨水 23.3x21 → 框 24px；LINE 品牌 logo 墨水滿 36 → 框 36px。 */
.floatLinkIcon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  /* <picture> 只是切圖用的容器，不參與排版（否則 img 的 height:100% 會失去參考高度） */
}
.floatLinkIcon picture {
  display: contents;
}
.floatLinkIcon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.isLine .floatLinkIcon {
  width: 36px;
  height: 36px;
}

/* 圓鈕內文字僅供輔助閱讀（視覺以圖示為主） */
.floatLinkText {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  /* LINE 鈕例外：文字要跟著膠囊滑出（官網 .sideFiLineBtn .text） */
}
.isLine .floatLinkText {
  position: static;
  width: 0;
  height: 30px;
  padding-left: 5px;
  overflow: visible;
  clip-path: none;
  opacity: 0;
  color: #fff;
  font-size: var(--textSize);
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.5px;
  transform: translateX(5px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, width 0.4s ease-in-out;
}

/* 上方兩顆按鈕的擴散光圈 -------------------------------------------------- */
.floatRipple {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}
.floatRipple::before, .floatRipple::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--secondColor);
  opacity: 0;
  animation: rippleAnimation 2.4s ease-out infinite;
}
.floatRipple::after {
  animation-delay: 1.2s;
}

/* 第一顆（立即諮詢）預設就播放，進站後緩緩淡入 */
.floatLink.isRobot .floatRipple {
  opacity: 1;
  transition: opacity 1.6s ease-in-out 0.8s;
}

/* 使用者點過第二顆（了解方案）後，第一顆的預設光波收起，hover 時仍會出現 */
.floatBox.isRippleStop .floatLink.isRobot .floatRipple {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .floatRipple::before,
  .floatRipple::after {
    animation: none;
  }
}
/* 白色膠囊說明標籤 -------------------------------------------------------- */
.floatLabel {
  position: absolute;
  top: 50%;
  right: calc(100% + 20px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radiusLarge);
  background: var(--bgColor);
  box-shadow: var(--shadowFloat);
  color: var(--titleColor);
  font-size: var(--noteSize);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(10px, -50%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  /* 指向按鈕的小尾巴 */
}
.floatLabel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  border-width: 5px 0 5px 7px;
  border-style: solid;
  border-color: transparent transparent transparent var(--bgColor);
  transform: translateY(-50%);
}

.floatLabelArrow {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 8px;
}
.floatLabelArrow::before, .floatLabelArrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--lightTextColor);
  border-right: 1.5px solid var(--lightTextColor);
  transform: translateY(-50%) rotate(45deg);
}
.floatLabelArrow::before {
  left: 0;
}
.floatLabelArrow::after {
  left: 6px;
}

/* 對話提示泡泡 ------------------------------------------------------------ */
.floatTip {
  position: relative;
  margin-right: 4px; /* 官網泡泡右緣比圓鈕右緣內縮 4px（24 vs 20） */
  width: 220px;
  padding: 12px 30px 12px 14px;
  border-radius: 14px;
  background: var(--bgColor);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  /* 尾巴：官網作法是 12x12 白方塊轉 45 度露出泡泡底緣，不是三角形 border */
}
.floatTip::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  background: var(--bgColor);
  transform: rotate(45deg);
}
.floatTip.isHide {
  display: none;
}

.floatTipText {
  color: #1F2937; /* 官網 .ai-chat-greeting 文字色 */
  font-size: var(--smallSize); /* 14px */
  font-weight: 400;
  line-height: 21px;
}

.floatTipClose {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 19px;
  height: 20px;
  padding: 2px 4px;
  color: #9CA3AF; /* 官網 .ai-chat-greeting-close */
  /* 官網 widget 用 system stack 畫「×」；沿用 Noto Sans TC 的話同樣 16px 會大一圈 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 16px;
}
.floatTipClose::before {
  content: "×"; /* 官網用的是「×」字元，不是兩條斜線 */
}

/* hover：僅限非觸控裝置 ---------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .floatLink:hover {
    transform: scale(1.08);
  }
  /* LINE 鈕不放大，改為橫向展開成膠囊 */
  .floatLink.isLine:hover {
    transform: none;
  }
  .floatLink.isLine:hover::before {
    width: calc(100% + 5px);
  }
  .floatLink.isLine:hover .floatLinkText {
    width: 80px;
    opacity: 1;
    transform: translateX(0);
    /* 先把膠囊拉開，文字才浮現；收合時不延遲 */
    transition: opacity 0.2s ease-in-out 0.3s, transform 0.2s ease-in-out 0.3s, width 0.4s ease-in-out;
  }
  .floatLink:hover ~ .floatLabel {
    opacity: 1;
    transform: translate(0, -50%);
  }
  /* 上方兩顆按鈕：hover 時顯示光波脈動（特異性需高於 isRippleStop） */
  .floatBox .floatLink:hover .floatRipple,
  .floatBox.isRippleStop .floatLink.isRobot:hover .floatRipple {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }
  /* hover 到其他顆按鈕時，第一顆的常駐光波收起（焦點轉移） */
  .floatList:has(.floatItem:not(:first-child) .floatLink:hover) .floatLink.isRobot .floatRipple {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
}
/* RWD ------------------------------------------------------------------- */
/* 官網（ibest）懸浮元件全站只有 480px 一個斷點：實測 481px 以上完全不變，
   480px 以下也是固定值、不再隨寬度縮放。本站沿用同一組斷點。
   .floatLabel 是本站自有的 hover 白膠囊，官網沒有對應元件，一併收在同一個斷點 */
@media (max-width: 480px) {
  .floatLabel {
    display: none;
  }
}
/* ≤480px 的數值全部取自官網實測：客服鈕 50×50、right:10 bottom:20，
   泡泡仍然顯示（right:14 bottom:82 ＝右緣內縮 4px、底距鈕頂 12px，與桌機同）。
   官網此斷點會把 LINE 鈕改成 145×45 貼底橫條，本站有四顆鈕、照搬會塞不下，
   故 LINE 維持圓形（見下方 .isLine 覆寫） */
@media (max-width: 480px) {
  .floatBox {
    right: 10px;
    bottom: 20px;
  }
  .floatList {
    gap: 10px;
  }
  .floatLink {
    width: 50px;
    height: 50px;
    /* 手機版沒有 hover，LINE 鈕直接畫成與其他三顆同尺寸的實心綠圓：
       務必連桌機版的 width:auto 與 gap 一起覆寫，否則寬度會被
       「圖示 + gap + 文字左內距」撐開，變成偏左的橢圓（歪掉） */
  }
  .floatLink.isLine {
    width: 50px;
    /* 基準樣式的 .floatLink.isLine{height:60px} 特異性高於此區塊的 .floatLink，
       不一起覆寫的話會變成 52x60 的橢圓（看起來就不是正圓） */
    height: 50px;
    margin-right: 0;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    background: var(--lineBtnColor);
  }
  .floatLink.isLine::before {
    display: none;
  }
  .floatLink.isLine .floatLinkText {
    display: none;
  }
  .floatLinkIcon {
    width: 20px;
    height: 20px;
    /* LINE 鈕手機版改用 btn-line-icon.png：原氣泡 logo 重新排版成 72x78 的
       畫布（墨水上方留 9px、下方留 5px），讓「墨水的 alpha 加權重心」落在圓心
       略上方，與旁邊 isChat 對話框圖示的光學位置一致（實測皆為圓心上方 0.6px）。
       直接用原圖會偏高、把本體對齊圓心又會因尾巴的視覺重量而偏低。
       框寬高比需貼近素材的 72:78，本體才不會被 contain 縮小。 */
  }
  .isLine .floatLinkIcon {
    width: 30px;
    height: 32px;
  }
}
/* ==========================================================================
   loadingArea：開場載入畫面（比照愛貝思官網 www.ibest.com.tw）
   白底滿版覆蓋 → LOGO 淡入 → 約 1.7 秒後整層淡出，動畫結束由 JS 移除節點
   ========================================================================== */
.loadingArea {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999; /* 高於 floatBox(10000) 與 menuArea，開場時蓋住全站 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100dvh; /* 專案規範：滿版高度一律 dvh（官網為 100%） */
  background-color: #fff;
}
.loadingArea .logo {
  display: flex;
  align-items: center;
  position: relative;
  width: 186px;
}
.loadingArea .logo img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateX(15px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.loadingArea.show .logo img { /* JS 於 50ms 後加上 .show：LOGO 淡入並回位 */
  opacity: 1;
  transform: translateX(0);
}
.loadingArea.out { /* JS 於 1700ms 後加上 .out：整層淡出 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

/* 開場期間鎖住捲動，淡出後由 JS 解除 */
body.isLoading {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .loadingArea .logo img {
    transition: none;
  }
  .loadingArea.out {
    transition: none;
  }
}
/* 各單元 ----------------------------------------------------------------- */
/* ==========================================================================
   kvArea：主視覺（影片背景 + 機器人 + 標題群組）
   對位依據 Figma 設計稿 1920 版面：
   影片 0,54~970 全寬／機器人 x1028 y330 w462／內容起點 x263（=wrap 左緣）
   ========================================================================== */
section.kvArea {
  /* 寬螢幕補償量：超過 1920px 後機器人的 top / width（min() 上限）會鎖住，
     但影片是滿寬 cover 會繼續放大，機器人相對影片會偏左上且偏小。
     依超出 1920px 的量往右下移動並放大（≤1920px 為 0，2560px 以上封頂 55px）。
     section 高度同步加上補償量，避免放大＋下移的機器人被 overflow 切到底部光暈 */
  --kvWideOffset: clamp(0px, (100vw - 1920px) / 12, 55px);
  /* 影片下緣的白色收白漸層（.kvMask 最後一層）起訖點。抽成變數是因為
     CSS 無法單獨覆寫多層 background 中的某一層，斷點要調整只能整組重寫 */
  --kvMaskFadeStart: 50%;
  --kvMaskFadeEnd: 92%;
  position: relative;
  height: calc(clamp(600px, 42vw, 806px) + var(--kvWideOffset) * 2.2);
  padding-block: 0;
  background: #fff;
  overflow: hidden;
  /* 影片背景：全寬滿版，object-fit 裁切 */
}
section.kvArea .kvVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* 縮小並右靠，避免面板場景貼近標題 */
  transform: translateX(-1%) scale(0.92);
  transform-origin: 100% 55%;
}
section.kvArea {
  /* 遮罩：左側／上緣白色漸層 + 下緣收白 + 左上粉色光暈（影片邊界不露餡） */
}
section.kvArea .kvMask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(28vw 36vw at 0% 0%, rgba(255, 81, 87, 0.2) 0%, rgba(255, 207, 209, 0.06) 55%, rgba(255, 207, 209, 0) 75%), linear-gradient(90deg, #fff 12%, rgba(255, 255, 255, 0.9) 32%, rgba(255, 255, 255, 0) 58%), linear-gradient(270deg, #fff 0%, #fff 1%, rgba(255, 255, 255, 0.75) 2.2%, rgba(255, 255, 255, 0) 4.5%), linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0) var(--kvMaskFadeStart), #fff var(--kvMaskFadeEnd));
}
section.kvArea .wrap {
  position: relative;
  height: 100%;
  padding-top: clamp(90px, var(--headerHeight) + 6.15vw, 196px);
}
section.kvArea .titleBox {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
section.kvArea .titleBox .decoTitle {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-bottom: 34px;
  padding: 0 24px;
  line-height: 1;
  border: 0;
  box-shadow: 0 0 5px rgba(208, 16, 16, 0.13);
  color: #343434;
  font-size: var(--decoTitleSize);
}
section.kvArea .titleBox .title {
  font-size: var(--kvTitleSize);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}
section.kvArea .titleBox .text {
  margin-top: 40px;
  max-width: 430px;
  line-height: 2;
  letter-spacing: 0.5px;
}
section.kvArea .titleBox .btnBox {
  margin-top: 82px;
  gap: 33px;
}

/* 機器人：疊在影片的玻璃面板場景前方 */
.kvRobot {
  /* --kvWideOffset 定義於 section.kvArea（2560px 時約 53px，2580px 以上封頂 55px）。
     2560px 換算：往下約 96px／往右約 53px／寬度 +48px（585 → 633px，約放大 8%） */
  position: absolute;
  z-index: 1;
  top: calc(min(15.9vw, 305px) + var(--kvWideOffset) * 1.8);
  left: calc(51.2% + var(--kvWideOffset));
  width: calc(min(30.5vw, 585px) + var(--kvWideOffset) * 0.9);
  margin: 0;
}
.kvRobot img {
  width: 100%;
  height: auto;
}

/* RWD ------------------------------------------------------------------- */
@media (max-width: 1180px) {
  /* 992~1180px：影片場景的高度由視窗高度決定、不會隨寬度縮小，但機器人原本的
     top 是 min(15.9vw, 305px)（隨寬度線性），於是視窗越窄機器人越往上、與場景
     脫節——實測機器人在場景中的垂直位置 1440px 為 36.3%、1180px 剩 29.3%、
     1024px 只剩 24.8%。這裡改用「相對 section 高度的百分比」定位（桌機 1440
     實測為 37.8%），讓此區間與桌機的相對位置一致（等同往下移，1024 約 +63px、
     1180 約 +38px），並把寬度由 30.5vw 放大為 35vw（約 +15%）。
     註：1181px 以上仍是桌機公式，斷點處寬度會有一次跳階，屬預期行為 */
  section.kvArea {
    /* 影片下緣的收白漸層往上拉：50%/92% → 44%/86%（section 高 600px 時
       約等於白色起點由 300px 提前到 264px、全白由 552px 提前到 516px） */
    --kvMaskFadeStart: 44%;
    --kvMaskFadeEnd: 86%;
  }
  .kvRobot {
    top: 41%;
    width: 38vw;
  }
  section.kvArea .titleBox .title {
    font-size: var(--kvTitleSizeMedium);
  }
  section.kvArea .titleBox .text {
    margin-top: 28px;
  }
  section.kvArea .titleBox .btnBox {
    margin-top: 48px;
  }
}
@media (max-width: 991px) {
  /* 影片改為一般流排在文案（按鈕）下方，機器人以絕對定位疊在影片上 */
  section.kvArea {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding-bottom: 20px;
    /* 影片區塊尺寸（.kvVideo 與其上方的白色漸層共用，避免兩處各寫一份）。
       7/5 裁切框：讓偏右的面板群能水平置中（換算見下方 .kvVideo 註解） */
    --kvVideoH: calc(100vw * 5 / 7);
    --kvVideoBottom: 20px; /* = section 的 padding-bottom */
    /* 桌機版的滿版背景遮罩改為：只蓋在影片上的白色漸層，
       讓影片下緣自然淡出到白色底，不出現硬邊 */
  }
  section.kvArea .kvMask {
    top: auto;
    right: 0;
    bottom: var(--kvVideoBottom);
    left: 0;
    z-index: 2; /* 蓋在影片之上、機器人（z-index 3）之下 */
    height: var(--kvVideoH);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.45) 66%, rgba(255, 255, 255, 0.85) 86%, #fff 100%);
  }
  section.kvArea .kvVideo {
    position: relative;
    order: 2;
    width: 100%;
    /* 影片原始比例約 2.5:1，面板群偏右（約佔畫面 47%~98%，中心約在 72.5%）。
       裁切框比例需 ≦ 1.38 才有足夠的左右裁切量把面板群拉到正中央，
       因此固定 7/5（1.4）滿寬裁切框 + 靠右對齊：影片放大、面板群水平置中 */
    height: auto;
    aspect-ratio: 7/5;
    margin-top: 28px;
    object-position: 100% center;
    transform: none;
    /* 上下緣柔化收白，避免影片邊界出現硬線 */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 76%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 76%, transparent 100%);
  }
  section.kvArea {
    /* position: static → 讓 .kvRobot 以 section 為定位基準 */
  }
  section.kvArea .wrap {
    order: 1;
    position: static;
  }
  section.kvArea {
    /* 影片與機器人本來就是滿寬置中，文案群組同步改為水平置中 */
  }
  section.kvArea .titleBox {
    max-width: 100%;
    text-align: center;
  }
  section.kvArea .titleBox .title {
    white-space: normal;
  }
  section.kvArea .titleBox .text {
    /* 置中後限制行寬，避免整段拉滿造成閱讀斷行過長 */
    max-width: 560px;
    margin-inline: auto;
  }
  section.kvArea .titleBox .btnBox {
    justify-content: center;
  }
  /* 機器人：置中疊在影片上（不使用 transform，避免與 GSAP 進場位移衝突） */
  .kvRobot {
    position: absolute;
    z-index: 3;
    top: auto;
    right: 0;
    bottom: 10px;
    left: 0;
    width: min(52vw, 404px);
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  section.kvArea .wrap {
    padding-top: calc(var(--headerHeight) + 44px);
  }
  section.kvArea .titleBox {
    /* 手機版標題群組置中（與 769~991px 一致） */
    text-align: center;
    /* text-wrap: balance：各行長度自動平均，避免大標題／內文末行只剩
       一兩個字的孤字（此屬性可繼承，故寫在 titleBox 一次套用標題與內文；
       舊瀏覽器不支援時自動退回一般折行，無副作用） */
    text-wrap: balance;
  }
  section.kvArea .titleBox .decoTitle {
    margin-bottom: 22px;
  }
  section.kvArea .titleBox .title {
    /* 手機版與各單元主標題（painPointArea 等）同級 */
    font-size: var(--titleSizeSmall);
  }
  section.kvArea .titleBox .text {
    margin-top: 18px;
    max-width: none;
    margin-inline: 0;
    /* 手機版標題下內文統一行距（桌機 2 → 手機 1.8，與 painPointArea 一致） */
    line-height: 1.8;
    /* 字距由桌機的 .5px 收到 .2px：置中後行尾容易只剩一個字，
       縮字距讓每行多容納一點字元、改善折行（七區塊同步） */
    letter-spacing: 0.2px;
  }
  section.kvArea .titleBox .text br {
    display: none;
  }
  section.kvArea .titleBox .btnBox {
    margin-top: 32px;
    gap: 14px;
  }
  section.kvArea .titleBox .btnBox .btn {
    flex: 1;
    min-width: 0;
  }
  section.kvArea .kvVideo {
    /* 7/5 裁切框與靠右對齊已於 ≤991px 設定，此處僅收上方間距 */
    margin-top: 22px;
  }
  .kvRobot {
    bottom: 2px;
    width: min(78vw, 404px);
  }
}
/* ==========================================================================
   painPointArea：導入痛點
   左側清單 + 右側 HTML 動畫（iframe 嵌入），由 JS 自動輪播切換
   ========================================================================== */
section.painPointArea {
  padding-top: clamp(16px, 1.6vw, 30px);
  background: linear-gradient(180deg, #fff 0%, #FDF3F3 100%);
}
section.painPointArea .titleBox {
  text-align: center;
}
section.painPointArea .titleBox .text {
  margin-inline: auto;
}

.painPointBox {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 4vw, 60px);
  margin-top: 60px;
  padding: 50px;
  border-radius: var(--radiusLarge);
  background: linear-gradient(135deg, var(--secondColor) 0%, var(--mainColor) 100%);
  box-shadow: var(--shadowFloat);
}

.painPointList {
  display: flex;
  flex-direction: column;
  padding-inline: clamp(16px, 1.8vw, 30px);
  border-radius: var(--radiusMedium);
  background: rgba(0, 0, 0, 0.08);
}

.painPointItem {
  cursor: pointer;
}
.painPointItem + .painPointItem {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.painPointItem .item {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 28px);
  padding: 22px 0;
  opacity: 0.4;
  transition: opacity 0.5s;
}
.painPointItem .numBox {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.painPointItem {
  /* 白色圓角三角形 + 內部紅字標號 */
}
.painPointItem .num {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 58px;
  padding-top: 18px;
}
.painPointItem .num svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}
.painPointItem .num b {
  position: relative;
  color: var(--mainColor);
  font-size: var(--badgeNumSize);
  font-weight: 900;
  line-height: 1;
}
.painPointItem .num small {
  position: relative;
  color: var(--mainColor);
  font-size: var(--badgeTextSize);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: capitalize;
}
.painPointItem .label {
  font-size: var(--smallSize);
  font-weight: 700;
}
.painPointItem .Txt {
  flex: 1;
  min-width: 0;
  color: #fff;
}
.painPointItem .Txt .title {
  color: #fff;
}
.painPointItem .Txt .text {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.8);
}
.painPointItem {
  /* 目前輪播中的痛點（由 JS 切換 isActive）：標號與文案亮起 */
}
.painPointItem.isActive {
  cursor: default;
}
.painPointItem.isActive .item {
  opacity: 1;
}
.painPointItem.isActive .Txt .text {
  -webkit-line-clamp: 10;
}

@media (hover: hover) and (pointer: fine) {
  .painPointItem:not(.isActive):hover .item {
    opacity: 0.7;
  }
  .painPointNav .arrow:hover {
    color: #fff;
  }
  .painPointDots .dot:not(.isActive):hover::before {
    background: rgba(255, 255, 255, 0.7);
  }
}
/* 右側動畫：iframe 以 1180 設計寬度渲染，再由 JS 等比縮放至容器 */
.painPointFigure {
  min-width: 0;
}
.painPointFigure .figureList {
  position: relative;
  aspect-ratio: 1180/660;
}

/* .figureItem／.figureFrame 寫在最外層（不巢狀在 .painPointFigure 內），
   因為行動版輪播時 JS 會把 .figureItem 搬進各 .painPointItem 內 */
.figureItem {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s;
}
.figureItem.isActive {
  opacity: 1;
  visibility: visible;
}

.figureFrame {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* 輪播控制列：左右箭頭 + 導覽點（僅行動版輪播模式顯示） */
.painPointNav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
}
.painPointNav .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.painPointNav .arrow svg {
  width: 20px;
  height: 20px;
}
.painPointNav .arrow:active {
  color: #fff;
}

.painPointDots {
  display: flex;
  justify-content: center;
  align-items: center;
}
.painPointDots .dot {
  position: relative;
  width: 20px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.painPointDots .dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.35s, background-color 0.35s;
}
.painPointDots .dot.isActive::before {
  width: 20px;
  background: #fff;
}

/* RWD ------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .painPointBox {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    padding: 36px;
  }
}
/* 平板直式以下：改為「一張卡＝一個痛點＋自己的動畫」的左右滑動輪播 */
@media (max-width: 991px) {
  /* KV 影片下緣與痛點區之間留出較充裕的呼吸空間 */
  section.painPointArea {
    padding-top: 56px;
  }
  .painPointBox {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .painPointList {
    flex-direction: row;
    gap: 12px;
    padding-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: none;
  }
  .painPointList::-webkit-scrollbar {
    display: none;
  }
  .painPointItem {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-inline: clamp(16px, 3vw, 24px);
    /* 不加圓角：下方滿版動畫貼齊卡片下緣，圓角會讓動畫下緣有削角感；
       不另加深色底（原本的 rgba(0,0,0,.08) 疊在紅色漸層上會形成一層深紅面板），
       讓卡片內容直接坐在 painPointBox 的紅色漸層上 */
    background: none;
    cursor: default;
  }
  .painPointItem + .painPointItem {
    border-top: 0;
  }
  .painPointItem .item {
    opacity: 1;
  }
  .painPointItem {
    /* 卡片各自獨立，文案一律完整顯示；標題與內文間距放寬（_base 全域為 10px） */
  }
  .painPointItem .Txt .text {
    display: block;
    overflow: visible;
    margin-top: 18px;
  }
  .painPointItem {
    /* 對應動畫由 JS 在行動版搬進卡片內，接在文案下方 */
    /* 動畫齊卡片左右下三邊滿版，畫面可放到最大 */
  }
  .painPointItem .figureItem {
    position: relative;
    inset: auto;
    aspect-ratio: 1180/660;
    overflow: hidden;
    margin-top: auto;
    margin-inline: calc(clamp(16px, 3vw, 24px) * -1);
    opacity: 1;
    visibility: visible;
  }
  .painPointItem {
    /* 痛點一、二的動畫面板本身帶圓角（card-storm 的 .desk、handoff-alert 的
       console 皆有圓角＋邊框），貼齊卡片下緣時圓角會壓在裁切邊界上、看起來
       像被切掉；往上提一點讓下緣圓角完整離開邊界。
       痛點三（data-overload）手機版實測下緣仍被卡片邊界裁到，提得比一、二再多一些。
       痛點四維持滿版貼齊，不受影響。
       註：此規則的對象隨動畫對調而變動，日後若再調換動畫順序須一併檢查。 */
  }
  .painPointItem:nth-child(1) .figureItem, .painPointItem:nth-child(2) .figureItem {
    margin-bottom: 10px;
  }
  .painPointItem:nth-child(3) .figureItem {
    margin-bottom: 24px;
  }
  /* 桌機用的右側動畫容器停用（動畫已搬進各卡片） */
  .painPointFigure {
    display: none;
  }
  .painPointNav {
    display: flex;
  }
}
@media (max-width: 768px) {
  section.painPointArea {
    padding-top: 48px;
    /* 手機版標題群組置中（大標題＋膠囊小標＋灰色內文） */
  }
  section.painPointArea .titleBox {
    text-align: center;
    /* text-wrap: balance：各行長度自動平均，避免大標題／內文末行只剩
       一兩個字的孤字（此屬性可繼承，故寫在 titleBox 一次套用標題與內文；
       舊瀏覽器不支援時自動退回一般折行，無副作用） */
    text-wrap: balance;
  }
  section.painPointArea {
    /* 手機版說明文案：與 kvArea 主視覺內文同樣式——不硬斷行、一整段自然折行、
       置中對齊、letter-spacing .2px、行距 1.8（比 kvArea 桌機的 2 略小）；
       桌機用的 <br> 在手機隱藏 */
  }
  section.painPointArea .titleBox .text {
    margin-top: 18px;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.2px;
  }
  section.painPointArea .titleBox .text br {
    display: none;
  }
  .painPointBox {
    margin-top: 40px;
    padding: 24px;
    border-radius: var(--radiusMedium);
  }
  .painPointItem .item {
    gap: 14px;
    padding: 16px 0;
  }
  .painPointItem .num {
    width: 52px;
    height: 47px;
    padding-top: 12px;
  }
  .painPointItem .num b {
    font-size: var(--badgeNumSizeSmall);
  }
  .painPointItem .num small {
    font-size: var(--badgeTextSizeSmall);
  }
}
/* ==========================================================================
   valueArea：核心價值（中央標題 + 周邊懸浮卡片群）
   對位依據 Figma 設計稿 1920 版面（區塊參考原點 y1880、高 1090）
   ========================================================================== */
section.valueArea {
  position: relative;
  height: clamp(760px, 56.8vw, 1090px);
  padding-block: 0;
  background: #fff;
  overflow: hidden;
}
section.valueArea .wrap {
  position: relative;
  z-index: 2;
  padding-top: clamp(120px, 14.7vw, 282px);
}
section.valueArea .titleBox {
  text-align: center;
  /* 標題與內文縮成「貼齊文字」的寬度並置中：視覺不變，
     但左右兩側不再形成透明的攔截區，讓底下的懸浮卡片能被 hover 到 */
}
section.valueArea .titleBox .title,
section.valueArea .titleBox .text {
  width: fit-content;
  margin-inline: auto;
}
section.valueArea .titleBox .btnBox {
  justify-content: center;
  margin-top: 48px;
}
section.valueArea {
  /* 磁吸 hover 用：.wrap 整塊不攔截滑鼠，只有實際要互動的文字與按鈕保留
     （.wrap z-index 2 蓋在 .valueBox 之上，不放行的話卡片完全 hover 不到） */
}
section.valueArea .wrap {
  pointer-events: none;
}
section.valueArea .titleBox .title,
section.valueArea .titleBox .text,
section.valueArea .titleBox .btn {
  pointer-events: auto;
}

/* 同心圓背景 -------------------------------------------------------------- */
.valueBg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 100%;
  min-width: 1100px;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.valueBg img {
  width: 100%;
  height: auto;
}

/* 周邊懸浮元素畫布 --------------------------------------------------------- */
.valueBox {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.valueItem {
  position: absolute;
  margin: 0;
  /* 行動版無限循環輪播用的複製卡（由 JS initValueSlider 在 ≤991px 產生），
     桌機（含 JS 尚未移除時）一律不顯示，避免疊在懸浮卡牌版面上 */
}
.valueItem.isClone {
  display: none;
}
.valueItem {
  /* 平常的懸浮幅度（未 hover 時）：預設 -12px 太不明顯，卡片加大到 -22px，
     下方小方塊裝飾另外再加大，讓整體漂浮感更清楚 */
  --floatDistance: -22px;
  /* 磁吸 hover：由 JS（initValueMagnetic）在非觸控桌機為 .valueBox 加上
     .isMagnetic 後才開啟，.valueBox 本身維持穿透，不擋標題與 CTA 按鈕 */
}
.valueBox.isMagnetic .valueItem {
  pointer-events: auto;
}
.valueItem img {
  width: 100%;
  height: auto;
  /* 持續懸浮（進場動畫由 GSAP 控制外層 figure，互不衝突） */
  animation: floatAnimation var(--floatDuration, 6s) ease-in-out var(--floatDelay, 0s) infinite;
}
.valueItem {
  /* 卡片 —————————————————————————— */
}
.valueItem.isEfficiency {
  top: 6.7%;
  left: 14%;
  width: min(21vw, 404px);
  --floatDuration: 5.6s;
}
.valueItem.isHandover {
  top: 8.4%;
  left: 67.3%;
  width: min(19.2vw, 368px);
  --floatDuration: 6.4s;
  --floatDelay: -2.2s;
}
.valueItem.isHelper {
  top: 38.3%;
  left: 2%;
  width: min(19.2vw, 368px);
  --floatDuration: 7s;
  --floatDelay: -1.4s;
}
.valueItem.isChannels {
  top: 37%;
  left: 75.2%;
  width: min(19.4vw, 373px);
  --floatDuration: 6.8s;
  --floatDelay: -3.6s;
}
.valueItem.isRecords {
  top: 61.2%;
  left: 50.3%;
  width: min(20.9vw, 401px);
  --floatDuration: 6.2s;
  --floatDelay: -4.4s;
}
.valueItem.isData {
  top: 62.2%;
  left: 11.2%;
  width: min(34.8vw, 669px);
  --floatDuration: 7.4s;
  --floatDelay: -2.8s;
}
.valueItem {
  /* 方塊裝飾 ————————————————————— */
}
.valueItem.isCubeLeft {
  top: 26.8%;
  left: 2.4%;
  width: min(10.6vw, 203px);
  --floatDuration: 8s;
  --floatDelay: -1s;
}
.valueItem.isCubeRight {
  top: 34.4%;
  left: 94.6%;
  width: min(8vw, 153px);
  --floatDuration: 7.6s;
  --floatDelay: -5s;
}
.valueItem.isCubeRed {
  top: 40.1%;
  left: 17%;
  width: min(3.8vw, 73px);
  --floatDuration: 5s;
  --floatDelay: -.8s;
}
.valueItem {
  /* 紅方塊光暈（設計稿的同心光環） */
}
.valueItem.isCubeRed::before, .valueItem.isCubeRisk::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 57, 53, 0.28) 0%, rgba(229, 57, 53, 0.1) 45%, rgba(229, 57, 53, 0) 70%);
  transform: translate(-50%, -50%);
}
.valueItem.isCubeRisk {
  top: 35.4%;
  left: 72%;
  width: min(4.4vw, 84px);
  --floatDuration: 5.4s;
  --floatDelay: -3s;
}
.valueItem.isCubeGlass {
  top: 58.5%;
  left: 66.8%;
  width: min(5.8vw, 112px);
  --floatDuration: 8.4s;
  --floatDelay: -6s;
}
.valueItem {
  /* 小尺寸方塊裝飾：同樣位移量看起來會比大卡片不明顯，因此再加大 */
}
.valueItem.isCubeLeft, .valueItem.isCubeRight, .valueItem.isCubeRed, .valueItem.isCubeRisk, .valueItem.isCubeGlass {
  --floatDistance: -30px;
}

/* 手機版輪播控制：左右箭頭＋點點（桌機不顯示） ----------------------------- */
.valueNav {
  /* 必須 position + z-index：.valueBg（絕對定位、z-index:0）會蓋在靜態流內容之上，
     箭頭若維持 static 會被同心圓背景圖整個蓋掉（點點看得到是因為 .dot 本身
     position:relative，剛好被推到上層），實際排查時箭頭連紅色都畫不出來 */
  position: relative;
  z-index: 2;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  /* 結構與尺寸比照 .painPointNav 的箭頭；valueArea 是白底，配色改為深色 */
}
.valueNav .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition: color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.valueNav .arrow svg {
  width: 20px;
  height: 20px;
}
.valueNav .arrow:active {
  color: var(--mainColor);
}

@media (hover: hover) and (pointer: fine) {
  .valueNav .arrow:hover {
    color: var(--mainColor);
  }
}
.valueDots {
  display: flex;
  justify-content: center;
  align-items: center;
}
.valueDots .dot {
  position: relative;
  width: 20px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.valueDots .dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  /* valueArea 為白底，點點改深色（painPointArea 是紅底用白點） */
  background: rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  transition: width 0.35s, background-color 0.35s;
}
.valueDots .dot.isActive::before {
  width: 20px;
  background: var(--mainColor);
}

/* RWD ------------------------------------------------------------------- */
@media (max-width: 991px) {
  section.valueArea {
    height: auto;
    padding-block: clamp(60px, 8vw, 100px) 60px;
  }
  section.valueArea .wrap {
    padding-top: 0;
  }
  /* 卡片改為左右滑動輪播（scroll-snap，一次一張）；裝飾方塊隱藏。
     作法與 painPointArea 行動版一致：軌道橫向捲動 + 下方點點（.valueNav），
     索引同步與點擊切換由 JS 的 initValueSlider() 處理 */
  .valueBox {
    position: relative;
    inset: auto;
    /* 桌機為了不擋標題與 CTA 設了 pointer-events:none；此斷點改成橫向捲動
       軌道，必須還原成 auto，否則觸控會整個穿透過去、手指滑不動 */
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 820px;
    margin: 32px auto 0;
    padding-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .valueBox::-webkit-scrollbar {
    display: none;
  }
  .valueItem {
    position: static;
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    /* 複製卡在此斷點要參與排列（前後各一組，用來做無限循環） */
  }
  .valueItem.isClone {
    display: flex;
  }
  .valueItem {
    align-items: center;
    justify-content: center;
    width: 100% !important;
    /* 各張卡片原始比例差異大（404×132 ~ 401×402），統一給一個高度區間，
       讓輪播每一頁高度一致、切換時版面不跳動 */
    min-height: clamp(210px, 46vw, 300px);
    padding-inline: var(--wrapPadding);
    text-align: center;
  }
  .valueItem img {
    width: auto;
    max-width: 100%;
    height: auto;
    /* --cardScale：各張卡的個別倍率（預設 1）。六張卡的原始比例差異大，
       統一 max-height 後有幾張視覺上偏小／偏大，故逐張微調。
       max-width 維持 100%，放大後也不會超出卡片寬度 */
    max-height: calc(clamp(190px, 42vw, 280px) * var(--cardScale, 1));
  }
  .valueItem {
    /* 第 2 張：RAG 精準檢索回答 */
  }
  .valueItem.isHandover {
    --cardScale: 1.15;
  }
  .valueItem {
    /* 第 3 張：自訂處理守則 */
  }
  .valueItem.isHelper {
    --cardScale: .88;
  }
  .valueItem {
    /* 第 4 張：熱點主題分析 */
  }
  .valueItem.isChannels {
    --cardScale: 1.15;
  }
  .valueItem {
    /* 第 5 張：對話摘要與風險辨識——指定為 320×320（圖片原始 401×402，
       限高 320 時寬約 319，視覺上即 320 見方）。不用 --cardScale 倍率是因為
       倍率的基準值會隨 42vw 浮動，要固定尺寸就直接寫死上限；
       螢幕窄於 320 + 左右留白時仍由 max-width:100% 自動縮 */
  }
  .valueItem.isRecords img {
    /* min(320px, 100%)：這條會覆寫上面的 max-width:100%，
       不夾住 100% 的話 320px 寬的螢幕會撐破卡片左右留白 */
    max-width: min(320px, 100%);
    max-height: 320px;
  }
  .valueItem.isData img {
    max-width: 560px;
  }
  .valueItem.isCubeLeft, .valueItem.isCubeRight, .valueItem.isCubeRed, .valueItem.isCubeRisk, .valueItem.isCubeGlass {
    display: none;
  }
  .valueNav {
    display: flex;
  }
  /* CTA 按鈕由 JS 搬到 .valueNav 之後（與卡牌交換位置後成為 section 的直接子層），
     原本 .titleBox .btnBox 的置中與 margin 選不到，這裡重新給 */
  section.valueArea > .btnBox {
    justify-content: center;
    margin-top: 44px;
    padding-inline: var(--wrapPadding);
  }
}
@media (max-width: 768px) {
  /* 手機版標題群組置中（大標題＋膠囊小標＋灰色內文） */
  section.valueArea .titleBox {
    text-align: center;
    /* text-wrap: balance：各行長度自動平均，避免大標題／內文末行只剩一兩個字
       的孤字（此屬性可繼承，寫在 titleBox 一次套用標題與內文；舊瀏覽器不支援
       時自動退回一般折行，無副作用） */
    text-wrap: balance;
  }
  /* 手機版標題下內文統一樣式（同 kvArea／painPointArea）：
     置中、一整段不斷行、行距 1.8。width 還原 100%（桌機為 fit-content 置中） */
  section.valueArea .titleBox .text {
    width: 100%;
    margin-top: 18px;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.2px;
  }
  section.valueArea .titleBox .text br {
    display: none;
  }
}
/* ==========================================================================
   compareArea：與傳統 SaaS AI 客服比較
   ========================================================================== */
section.compareArea {
  /* 下方留白取全站 --sectionSpace 的一半（與下方 processArea 銜接較緊） */
  padding-bottom: calc(var(--sectionSpace) / 2);
  /* 區塊內部專用色（_setting.scss 無對應變數，僅於此區塊使用） */
  --compareRed: #D12542; /* 區塊漸層底 / 欄3 邊框主紅 */
  --compareDarkBg: #3C3C3C; /* 欄2 header 底色 */
  --compareGrayHead: #D0D0D0; /* 欄1 header 底色 */
  --compareDarkText: #202020; /* 欄1 文字 */
  --compareGrayText: #595959; /* 欄2 資料列文字 */
  background: linear-gradient(180deg, var(--compareRed) 0%, rgba(209, 37, 66, 0.4) 46%, transparent 100%);
  /* 白色漸淡大標 -------------------------------------------------------- */
}
section.compareArea .compareDeco {
  margin-bottom: clamp(50px, 5vw, 96px);
  background: linear-gradient(90deg, #fff 60%, rgba(255, 255, 255, 0) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: var(--titleSize);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  /* JS 逐字拆解後：漸層色改由各字元 color 承接（transform 會破壞 background-clip） */
}
section.compareArea .compareDeco.isSplit {
  background: none;
  -webkit-text-fill-color: currentColor;
}
section.compareArea .compareDeco .ch {
  display: inline-block;
  will-change: opacity, transform;
}
section.compareArea {
  /* 白色圓角大卡片 ------------------------------------------------------ */
}
section.compareArea .compareCard {
  padding: clamp(40px, 4vw, 64px) clamp(20px, 3.5vw, 49px) clamp(48px, 5vw, 76px);
  border-radius: 50px;
  background: var(--bgColor);
  box-shadow: var(--shadowFloat);
}
section.compareArea .titleBox {
  text-align: center;
}
section.compareArea .titleBox .text {
  margin-inline: auto;
}
section.compareArea {
  /* 比較表：三張獨立圓角卡 ---------------------------------------------- */
}
section.compareArea .compareBox {
  margin-top: 50px;
}
section.compareArea .compareTable {
  display: grid;
  grid-template-columns: 199fr 494fr 574fr;
  gap: 18px;
  align-items: center;
  min-width: 1000px;
}
section.compareArea .compareCol {
  overflow: hidden;
  border-radius: var(--radiusSmall);
}
section.compareArea .compareCol .colHead {
  display: flex;
  align-items: center;
  min-height: 59px;
  padding-inline: 32px;
  font-size: var(--textTitleSizeSmall);
  font-weight: 700;
}
section.compareArea .compareCol .colList li {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding-inline: 32px;
  line-height: 1.6;
}
section.compareArea .compareCol .colList li:last-child {
  min-height: 59px;
}
section.compareArea {
  /* 欄1：比較項目 */
}
section.compareArea .colLabel {
  background: var(--bgColor);
}
section.compareArea .colLabel .colHead {
  background: var(--compareGrayHead);
  color: var(--compareDarkText);
}
section.compareArea .colLabel .colList li {
  border-bottom: 1px solid var(--lineColor);
  color: var(--compareDarkText);
  font-size: var(--textTitleSizeSmall);
  font-weight: 500;
}
section.compareArea .colLabel .colList li:last-child {
  border-bottom: 0;
}
section.compareArea {
  /* 欄2：傳統 SaaS AI 專案 */
}
section.compareArea .colOld .colHead {
  background: var(--compareDarkBg);
  color: #fff;
  padding-inline: 44px;
}
section.compareArea .colOld .colList li {
  padding-inline: 44px;
  background: var(--grayBgColor);
  color: var(--compareGrayText);
  font-size: var(--textSize);
  transition: background-color 1s ease, color 1s ease;
}
section.compareArea .colOld {
  /* hover 色彩反轉：灰底深字 → 深底白字（僅非觸控裝置，標題列不變化） */
}
@media (hover: hover) and (pointer: fine) {
  section.compareArea .colOld .colList li:hover {
    background: var(--compareDarkBg);
    color: #fff;
  }
}
section.compareArea {
  /* 欄3：愛貝斯 AI 機器人（上下突出、紅框光暈） */
}
section.compareArea .colNew {
  position: relative;
  overflow: visible;
  border: 4px solid var(--compareRed);
  background: var(--bgColor);
  box-shadow: 0 0 44px rgba(255, 0, 0, 0.12);
}
section.compareArea .colNew .colHead {
  min-height: 85px;
  padding-inline: 50px;
  border-radius: calc(var(--radiusSmall) - 4px) calc(var(--radiusSmall) - 4px) 0 0;
  background: linear-gradient(90deg, #F1636C 0%, var(--compareRed) 38%, #CF0325 100%);
  color: #fff;
  font-size: var(--tableHeadSize);
}
section.compareArea .colNew .colList {
  position: relative;
  z-index: 2;
  /* 裁掉 li hover 底色超出圓角的部分 */
  overflow: hidden;
  background: var(--bgColor);
  border-radius: 0 0 calc(var(--radiusSmall) - 4px) calc(var(--radiusSmall) - 4px);
}
section.compareArea .colNew .colList li {
  min-height: 84px;
  padding-inline: 50px;
  border-bottom: 1px solid var(--lineColor);
  color: var(--compareDarkText);
  font-size: var(--textSize);
  transition: background-color 1s ease, color 1s ease;
}
section.compareArea .colNew .colList li:last-child {
  min-height: 60px;
  border-bottom: 0;
}
section.compareArea .colNew {
  /* hover 色彩反轉：白底黑字 → 紅底白字（僅非觸控裝置，標題列不變化） */
}
@media (hover: hover) and (pointer: fine) {
  section.compareArea .colNew .colList li:hover {
    background: var(--compareRed);
    color: #fff;
  }
}
section.compareArea {
  /* 「勝」徽章 ----------------------------------------------------------- */
}
section.compareArea .winBadge {
  position: absolute;
  top: -44px;
  right: 46px;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  /* 半透明白同心圓光暈（兩層）：外側兩圈再收小，內圈維持原大小，貼近設計稿 */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.38) 0% 57%, rgba(255, 255, 255, 0.22) 58% 100%);
  animation: floatAnimation 5s ease-in-out infinite;
  /* 持續向外擴散的光波（同懸浮按鈕 rippleAnimation） */
}
section.compareArea .winBadge::before, section.compareArea .winBadge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  animation: rippleAnimation 3s ease-out infinite;
}
section.compareArea .winBadge::after {
  animation-delay: 1.5s;
}
section.compareArea .winBadge .Img {
  position: relative;
  z-index: 3;
  width: 88px;
  /* 裝飾圖不需裁切：覆寫 _base 的 .Img overflow:hidden，
     避免 img 自身的 floatAnimation 位移時上緣被 figure 裁掉 */
  overflow: visible;
  border-radius: 0;
}
section.compareArea .winBadge .Img img {
  width: 100%;
  height: auto;
  transform: rotate(8deg);
}
section.compareArea .winBadge {
  /* 右上角迷你方塊：隨徽章一同懸浮，再帶一點自身的錯拍漂浮 */
}
section.compareArea .winBadge .Img.isMini {
  position: absolute;
  top: 24%;
  right: 10%;
  width: 11%;
  transform: rotate(-12deg);
}
section.compareArea .winBadge .Img.isMini img {
  transform: none;
  animation: floatAnimation 4.6s ease-in-out -2s infinite;
}
section.compareArea .winBadge .winText {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--subtitleSize);
  font-weight: 700;
}

/* RWD ------------------------------------------------------------------- */
@media (max-width: 1180px) {
  section.compareArea .compareDeco {
    font-size: var(--titleSizeMedium);
  }
  section.compareArea .compareBox {
    /* overflow-x 捲動容器會一併裁掉垂直突出的內容（勝徽章 top 為負值、
       浮動時更往上）：與標題的間距改用 padding-top 吸收，
       讓徽章突出量落在捲動範圍內不被裁切；總間距維持 40px 不變 */
    margin-top: 0;
    padding-top: 40px;
    overflow-x: auto;
  }
  section.compareArea .winBadge {
    top: -35px;
    right: 20px;
    width: 140px;
    height: 140px;
  }
  section.compareArea .winBadge .Img {
    width: 72px;
  }
}
@media (max-width: 768px) {
  /* 手機版標題群組置中（大標題＋膠囊小標＋灰色內文） */
  section.compareArea .titleBox {
    text-align: center;
    /* text-wrap: balance：各行長度自動平均，避免大標題／內文末行只剩一兩個字
       的孤字（此屬性可繼承，寫在 titleBox 一次套用標題與內文；舊瀏覽器不支援
       時自動退回一般折行，無副作用） */
    text-wrap: balance;
  }
  /* 手機版標題下內文統一樣式（同 kvArea／painPointArea 等六區塊）：
     置中、一整段不斷行、行距 1.8 */
  section.compareArea .titleBox .text {
    margin-top: 18px;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.2px;
  }
  section.compareArea .titleBox .text br {
    display: none;
  }
  section.compareArea .compareDeco {
    margin-bottom: 40px;
    /* 手機版一定要維持單行：JS initDecoReveal() 的白色漸淡是依「字元中心的
       x 座標 ÷ 元素寬度」逐字上色，換行後第二行的字座標回到最左、alpha 會
       跳回純白，看起來就像最後一個字特別深。字級改為隨視窗縮放（實測各
       寬度單行所需字級約 6.34~6.48vw，取 6.1vw 留約 4% 安全邊距），
       並以 nowrap 鎖住不折行 */
    font-size: min(var(--titleSizeSmall), 6.1vw);
    white-space: nowrap;
  }
  section.compareArea .compareCard {
    border-radius: var(--radiusLarge);
  }
  section.compareArea .compareBox {
    /* 1180 斷點已有 padding-top: 40px（防徽章被裁），負 margin 收回 10px
       → 淨間距 30px，與原設定相同 */
    margin-top: -10px;
  }
  section.compareArea .compareTable {
    min-width: 860px;
    gap: 12px;
  }
  section.compareArea .compareCol .colHead,
  section.compareArea .compareCol .colList li {
    padding-inline: 20px;
  }
  section.compareArea .colLabel .colList li {
    font-size: var(--textSize);
  }
  section.compareArea .colOld .colHead,
  section.compareArea .colOld .colList li {
    padding-inline: 24px;
  }
  section.compareArea .colOld .colList li {
    font-size: var(--textSizeSmall);
  }
  section.compareArea .colNew .colHead,
  section.compareArea .colNew .colList li {
    padding-inline: 28px;
  }
  section.compareArea .colNew .colHead {
    font-size: var(--textTitleSizeSmall);
  }
  section.compareArea .colNew .colList li {
    font-size: var(--textSizeSmall);
  }
  section.compareArea {
    /* 手機版整體放大 1.3 倍（100→130、52→68、字級 ×1.3），
       top/right 各外移 15px 讓圓心視覺位置不變；
       不能用 transform:scale——.winBadge 的 floatAnimation 會覆蓋 transform */
  }
  section.compareArea .winBadge {
    /* 2026-09-03 再往下微調：-40px → -25px */
    top: -25px;
    right: -3px;
    width: 130px;
    height: 130px;
  }
  section.compareArea .winBadge .Img {
    width: 68px;
  }
  section.compareArea .winBadge .winText {
    font-size: calc(var(--tableHeadSize) * 1.3);
  }
}
/* 手機版滑動提示 -----------------------------------------------------------
   遮罩只壓暗 .compareCard 這張白色大卡（不是整個畫面），膠囊在卡片範圍內置中。
   兩者都是 .compareCard 的絕對定位子層，因此 .compareCard 需要 position:relative。
   皆 pointer-events:none，不擋使用者操作；桌機表格完整顯示故不需要，直接隱藏。 */
.compareCard {
  position: relative;
}

.compareMask {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  /* 跟著卡片的圓角，避免四角露出直角的暗塊 */
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.compareMask.isShow {
  opacity: 1;
}

.compareHint {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 疊在遮罩（z-index 4）之上 */
  z-index: 5;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 15px 24px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.88);
  color: #fff;
  font-size: var(--textSize);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  /* 收起狀態略低 10px，淡入時往上帶一點位移 */
  transform: translate(-50%, calc(-50% + 10px));
  transition: opacity 0.45s, transform 0.45s;
  pointer-events: none;
}
.compareHint.isShow {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.compareHint {
  /* 雙箭頭「>>」：兩個 chevron 錯拍往右推出再從左邊補進來，做出前進感 */
}
.compareHint .hintIcon {
  display: flex;
  align-items: center;
  gap: 1px;
}
.compareHint .chev {
  width: 15px;
  height: 15px;
  animation: swipeHintAnimation 1.3s ease-out infinite;
}
.compareHint {
  /* 第一個箭頭固定 60% 透明度（動畫的 opacity 會再乘上這層的 opacity） */
}
.compareHint .chev.isFirst {
  opacity: 0.6;
  animation-delay: -0.18s;
}

@media (max-width: 1180px) {
  .compareMask {
    display: block;
  }
  .compareHint {
    display: flex;
  }
}
/* ==========================================================================
   planArea：兩種導入方案
   ========================================================================== */
.planArea {
  /* 白 → 下方漸入淺灰，結尾色對齊 processArea 的起始色 #F5F5F5，消除交界線 */
  background: linear-gradient(180deg, #fff 0%, #fff 55%, #F5F5F5 100%);
}
.planArea .titleBox {
  text-align: center;
}
.planArea .titleBox .text {
  margin-inline: auto;
}

.planBox {
  margin-top: 60px;
}

.planList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
}

.planItem .item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 50px;
  border-radius: 50px;
  background: #fff;
  box-shadow: var(--shadowFloat);
  transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.planItem {
  /* 主推狀態切換時，文字／線條同步變色（.title 另用漸層洗色，見下方） */
}
.planItem .Txt .subtitle,
.planItem .featureItem,
.planItem .infoTitle,
.planItem .infoTitle::after,
.planItem .infoText,
.planItem .price {
  transition: color 0.4s ease-in-out;
}
.planItem .featureList {
  transition: border-color 0.4s ease-in-out;
}
.planItem .featureItem::before,
.planItem .btn.iconArrow .circle::before {
  transition: background 0.4s ease-in-out;
}
.planItem .btn.iconArrow {
  transition: border-color 0.4s ease-in-out;
}
.planItem .btn.iconArrow::before {
  transition: border-color 0.4s ease-in-out;
}
.planItem .btn.iconArrow .circle {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s ease-in-out;
}
.planItem .btn.iconArrow .circle::after {
  transition: border-color 0.4s ease-in-out;
}
.planItem {
  /* 頂部媒體：影片 580×343 */
}
.planItem .videoBox {
  overflow: hidden;
  border-radius: var(--radiusMedium);
}
.planItem .videoBox video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 580/343;
  object-fit: cover;
}
.planItem .Txt {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 40px;
  /* 主推切換時由左至右「洗」成白色，取代整段瞬間變色：
     畫一條左白右深的漸層裁進文字，靠 background-position 位移決定
     目前露出哪一段（100% = 深色端，0 = 白色端）。
     畫布刻意設為元素的三倍寬：靜止時可見範圍只會落在 0~33%（純白）
     或 67~100%（純深），45%~55% 的柔邊完全在可見範圍外，
     才不會讓首字或末字在靜止狀態下透出灰邊；柔邊只在掃過時出現。 */
}
.planItem .Txt .title {
  background-image: linear-gradient(90deg, #fff 0 45%, var(--titleColor) 55% 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: var(--cardTitleSize);
  font-weight: 700;
  line-height: 1.4;
  transition: background-position 0.7s ease-in-out;
}
.planItem .Txt .subtitle {
  margin-top: 12px;
  color: var(--textColor);
  font-size: var(--textSize);
}
.planItem {
  /* 主推方案（左卡：純色紅底、白字） */
}
.planItem.isMain .item {
  background: #D12542;
  box-shadow: none;
  color: #fff;
}
.planItem.isMain .item .Txt .subtitle,
.planItem.isMain .item .featureItem,
.planItem.isMain .item .infoTitle,
.planItem.isMain .item .infoText,
.planItem.isMain .item .price {
  color: #fff;
}
.planItem.isMain .item {
  /* 標題不直接改 color，改讓漸層往左位移，白色那半掃過文字 */
}
.planItem.isMain .item .Txt .title {
  background-position: 0 0;
}
.planItem.isMain .item .infoTitle::after {
  color: #fff;
}
.planItem.isMain .item .featureList {
  border-color: rgba(255, 255, 255, 0.6);
}
.planItem.isMain .item .featureItem::before {
  background: #fff;
}
.planItem.isMain .item .btn.iconArrow {
  border-color: rgba(255, 255, 255, 0.35);
}
.planItem.isMain .item .btn.iconArrow::before {
  border-color: rgba(255, 255, 255, 0.6);
}
.planItem.isMain .item .btn.iconArrow .circle {
  background: #fff;
}
.planItem.isMain .item .btn.iconArrow .circle::before {
  background: var(--mainColor);
}
.planItem.isMain .item .btn.iconArrow .circle::after {
  border-color: var(--mainColor);
}

/* 特點列表（分隔線：左卡白線、右卡紅線） */
.featureList {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--mainColor);
}

.featureItem {
  position: relative;
  padding-left: 18px;
  font-size: var(--textSize);
  line-height: 30px;
}
.featureItem::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mainColor);
}

/* 適合對象／核心價值 */
.infoList {
  margin-top: 32px;
}

.infoItem {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.infoItem + .infoItem {
  margin-top: 14px;
}

.infoTitle {
  flex: none;
  color: var(--titleColor);
  font-size: var(--textSize);
  font-weight: 700;
}
.infoTitle::after {
  content: "→";
  margin-left: 12px;
  color: var(--mainColor);
  font-weight: 400;
}

.infoText {
  flex: 1;
  font-size: var(--textSize);
  line-height: 1.8;
}

/* 底部價格列 */
.priceBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: 44px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--titleColor);
}
.price b {
  display: inline-flex;
  font-size: var(--priceSize);
  font-weight: 700;
  line-height: 1;
}
.price {
  /* 數字由 JS 拆成「每字元一個遮罩格」，格內上下疊兩份相同字元；
     hover 時整欄上滾一格，形成翻牌般的滾動替換（高度多留 .16em 給逗號下伸） */
}
.price .priceChar {
  display: block;
  overflow: hidden;
  height: 1.16em;
}
.price .priceRoll {
  display: block;
  will-change: transform;
}
.price .priceRoll i {
  display: block;
  height: 1.16em;
  font-style: normal;
  line-height: 1.16;
}
.price {
  /* 單位文字（元起／月）：限直接子層，避免選到上面的內層 span */
}
.price > span {
  font-size: var(--priceUnitSize);
}

/* 圓形箭頭按鈕：雙層圓環（外 83 / 內 71 / 實心 50） */
.planItem .btn.iconArrow {
  min-width: 83px;
  width: 83px;
  height: 83px;
  border: 1px solid rgba(196, 37, 43, 0.2);
  background: none;
  /* 內圈 71px */
}
.planItem .btn.iconArrow::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(196, 37, 43, 0.4);
  border-radius: 50%;
}
.planItem .btn.iconArrow {
  /* 覆蓋 base 的箭頭 ::after（箭頭改畫在 .circle 內） */
}
.planItem .btn.iconArrow::after {
  content: none;
}
.planItem .btn.iconArrow {
  /* 中心實心圓 50px */
}
.planItem .btn.iconArrow .circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--mainColor);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s ease-in-out;
  /* 箭頭桿 */
}
.planItem .btn.iconArrow .circle::before {
  content: "";
  width: 16px;
  height: 2px;
  background: #fff;
}
.planItem .btn.iconArrow .circle {
  /* 箭頭頭 */
}
.planItem .btn.iconArrow .circle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* 方案頁籤（僅 ≤991px 輪播模式顯示）：兩個方案標題並排，
   目前選中的下方畫紅色底線，未選中的半透明 */
.planTab {
  display: none;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(36px, 10vw, 72px);
  margin: 16px 0 40px;
  /* 未選中：色彩與字重比照內文（灰色、不加粗）；選中才是深色粗體＋紅底線 */
}
.planTab .tab {
  position: relative;
  padding: 0 0 10px;
  border: 0;
  background: none;
  color: var(--textColor);
  font-size: var(--textTitleSizeSmall);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: color 0.3s;
  -webkit-tap-highlight-color: transparent;
  /* 底線：未選中時收在中央、寬度 0，選中時展開至滿寬 */
}
.planTab .tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--mainColor);
  transform: translateX(-50%);
  transition: width 0.35s ease-in-out;
}
.planTab .tab.isActive {
  color: var(--titleColor);
  font-weight: 700;
}
.planTab .tab.isActive::after {
  width: 100%;
}

/* 輪播控制列：左右箭頭 + 導覽點（僅 ≤991px 輪播模式顯示）
   結構與尺寸比照 .painPointNav；planArea 為白底，配色沿用 valueArea 的深色版 */
.planNav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.planNav .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition: color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.planNav .arrow svg {
  width: 20px;
  height: 20px;
}
.planNav .arrow:active {
  color: var(--mainColor);
}

.planDots {
  display: flex;
  justify-content: center;
  align-items: center;
}
.planDots .dot {
  position: relative;
  width: 20px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.planDots .dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  transition: width 0.35s, background-color 0.35s;
}
.planDots .dot.isActive::before {
  width: 20px;
  background: var(--mainColor);
}

/* hover 僅限非觸控裝置 --------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .planItem .btn.iconArrow:hover {
    background: none;
  }
  .planItem .btn.iconArrow:hover .circle {
    transform: scale(1.12);
  }
  .planNav .arrow:hover {
    color: var(--mainColor);
  }
  .planDots .dot:not(.isActive):hover::before {
    background: rgba(0, 0, 0, 0.32);
  }
}
/* RWD：max-width 由大而小覆寫 -------------------------------------------- */
@media (max-width: 991px) {
  /* 兩張方案卡改為左右滑動輪播（scroll-snap，一次一張），不再上下堆疊。
     作法與 painPointArea／valueArea 行動版一致：橫向軌道 + 下方點點（.planNav），
     索引同步、箭頭／點點切換與目前卡片的 .isMain 主推樣式由 JS 的 initPlanSlider() 處理。
     上下 padding 是留給卡片 box-shadow 的空間（overflow-x:auto 會連帶裁切垂直方向） */
  .planList {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    padding-block: 10px 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .planList::-webkit-scrollbar {
    display: none;
  }
  .planItem {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .planItem .item {
    max-width: 678px;
    margin-inline: auto;
    width: 100%;
  }
  /* 方案卡的標題群組置中（一次只看一張卡，置中重心較穩）。
     只置中 .title／.subtitle：下方的 .featureList 有項目符號、
     .infoList 是「標籤－說明」左右對照、.priceBox 是價格與按鈕分置兩端，
     這些置中反而不好讀，維持靠左 */
  .planItem .Txt > .title,
  .planItem .Txt > .subtitle {
    text-align: center;
  }
  .planTab,
  .planNav {
    display: flex;
  }
}
@media (max-width: 768px) {
  /* 手機版標題群組置中（大標題＋膠囊小標＋灰色內文） */
  .planArea .titleBox {
    text-align: center;
    /* text-wrap: balance：各行長度自動平均，避免大標題／內文末行只剩一兩個字
       的孤字（此屬性可繼承，寫在 titleBox 一次套用標題與內文；舊瀏覽器不支援
       時自動退回一般折行，無副作用） */
    text-wrap: balance;
  }
  /* 手機版標題下內文統一樣式（同 kvArea／painPointArea）：置中、一整段不斷行、行距 1.8 */
  .planArea .titleBox .text {
    margin-top: 18px;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.2px;
  }
  .planArea .titleBox .text br {
    display: none;
  }
  .planBox {
    margin-top: 40px;
  }
  /* 手機寬度：兩個標題並排總寬吃緊（共 17 字），字級由 18px 收到 17px、
     間距縮到 12px，才不會擠成兩行；仍比內文 16px 大一級 */
  .planTab {
    gap: 24px;
    margin: 8px 0 32px;
  }
  .planTab .tab {
    padding-bottom: 8px;
    font-size: 17px;
  }
  .planItem .item {
    padding: 28px;
    border-radius: var(--radiusLarge);
  }
  .planItem .Txt {
    margin-top: 28px;
  }
  .planItem .Txt .title {
    font-size: var(--cardTitleSizeSmall);
  }
  .planItem .Txt .subtitle {
    margin-top: 8px;
    font-size: var(--textSize);
  }
  .featureList {
    margin-top: 26px;
    padding-top: 26px;
  }
  .infoList {
    margin-top: 24px;
  }
  /* 適合對象／核心價值：手機版標題與內文改為上下兩行、移除標題後的箭頭 */
  .infoItem {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .infoTitle::after {
    content: none;
  }
  .priceBox {
    padding-top: 32px;
  }
  .price b {
    /* 手機版價格數字放大：原 --priceSizeSmall 32px → 36px（桌機卡牌標題級距） */
    font-size: var(--cardTitleSize);
  }
  .price {
    /* 限直接子層（同桌機基準規則）：不加 > 會連 JS 拆字產生的
       .priceChar／.priceRoll span 一併選中，把數字蓋成單位小字級 */
  }
  .price > span {
    font-size: var(--priceUnitSizeSmall);
  }
  .planItem .btn.iconArrow {
    min-width: 66px;
    width: 66px;
    height: 66px;
  }
  .planItem .btn.iconArrow::before {
    inset: 4px;
  }
  .planItem .btn.iconArrow .circle {
    width: 42px;
    height: 42px;
  }
  .planItem .btn.iconArrow .circle::before {
    width: 13px;
  }
  .planItem .btn.iconArrow .circle::after {
    right: 13px;
    width: 7px;
    height: 7px;
  }
}
/* ==========================================================================
   processArea：導入流程
   設計稿：左欄標題 + 01–05 步驟手風琴（isActive 展開），右欄三層疊卡
   ========================================================================== */
section.processArea {
  overflow: hidden;
  background: linear-gradient(180deg, #F5F5F5 0%, #EFEFEF 100%);
  /* 左欄標題群組：左對齊，膠囊加紅色光暈 */
}
section.processArea .titleBox .decoTitle {
  border: 0;
  box-shadow: 0 4px 18px rgba(208, 16, 16, 0.15);
}
section.processArea > .wrap > .btnBox {
  justify-content: center;
  margin-top: clamp(50px, 6vw, 90px);
}

.processBox {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 120px);
  margin-top: 50px;
}

/* 左欄：步驟列表 --------------------------------------------------------- */
.processList {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.processItem {
  border-bottom: 1px solid var(--lineColor);
  cursor: pointer;
  transition: border-color 0.3s;
}
.processItem .item {
  padding: 28px 0;
}
.processItem .Txt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 26px;
}
.processItem .Txt .title {
  color: #B2B2B2;
  font-size: var(--stepTitleSize);
  font-weight: 700;
  transition: color 0.3s;
}
.processItem .Txt .text {
  display: none;
  grid-column: 2;
  margin-top: 10px;
  color: var(--textColor);
  font-size: var(--textSize);
  font-weight: 700;
}
.processItem .num {
  color: #B2B2B2;
  font-size: var(--stepNumSize);
  font-weight: 900;
  line-height: 1;
  transition: color 0.3s;
}
.processItem {
  /* 目前步驟 */
}
.processItem.isActive {
  border-bottom-color: var(--mainColor);
}
.processItem.isActive .num {
  color: var(--titleColor);
}
.processItem.isActive .Txt .title {
  color: var(--mainColor);
}
.processItem.isActive .Txt .text {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .processItem:hover .Txt .title {
    color: var(--mainColor);
  }
}
/* 右欄：三層疊卡 --------------------------------------------------------- */
.processCardBox {
  position: relative;
  left: clamp(10px, 2.2vw, 36px); /* 整體略往右上偏移 */
  top: -26px;
  justify-self: center;
  width: min(519px, 100%);
  animation: floatAnimation 6s ease-in-out infinite;
}

.processCard {
  border-radius: var(--radiusLarge);
  background: #fff;
  /* 最底白卡：往左下扇形展開（依設計稿） */
}
.processCard.cardBack {
  position: absolute;
  top: 6%;
  left: -22%;
  width: 97.5%; /* 506 / 519 */
  aspect-ratio: 506/605;
  transform: rotate(-14deg);
  box-shadow: var(--shadowLight);
}
.processCard {
  /* 中層白卡：略微左傾、下移 */
}
.processCard.cardMid {
  position: absolute;
  top: 3%;
  left: -11%;
  width: 100%;
  aspect-ratio: 519/616;
  transform: rotate(-7deg);
  box-shadow: var(--shadowLight);
}
.processCard {
  /* 最上紅卡：輕微右傾 */
}
.processCard.cardFront {
  position: relative;
  aspect-ratio: 519/616;
  background: none;
  transform: rotate(2.5deg);
}

/* 卡牌切換：點擊左側步驟顯示對應卡牌（由 JS 切換 isActive） */
.processCardBox .cardList {
  position: absolute;
  inset: 0;
}
.processCardBox .cardList .cardItem {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 8.3%, 43px);
  border-radius: var(--radiusLarge);
  background: #D12542;
  box-shadow: var(--shadowMain);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
.processCardBox .cardList .cardItem.isActive {
  opacity: 1;
  visibility: visible;
}
.processCardBox .cardList .cardItem .Img {
  flex: none;
  overflow: hidden;
  aspect-ratio: 433/392;
  border-radius: var(--radiusMedium);
  background: #D9D9D9; /* 圖檔尚未提供時的灰色佔位 */
}
.processCardBox .cardList .cardItem .Img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 圖片緩慢逐漸放大 */
  animation: zoomAnimation 9s ease-in-out infinite alternate;
}
.processCardBox .cardList .cardItem .Txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin-top: 16px;
}
.processCardBox .cardList .cardItem .Txt .title {
  color: #B51F38;
  font-size: var(--cardTitleSize);
  font-weight: 900;
  letter-spacing: 0.02em;
}
.processCardBox .cardList .cardItem .Txt .text {
  margin-top: 10px;
  color: #fff;
  font-size: var(--textSizeSmall);
  line-height: 1.8;
}

/* 輪播控制列：左右箭頭 + 導覽點（僅 ≤991px 顯示，對應 01~05 五個步驟）
   結構與尺寸比照 .painPointNav；processArea 為淺灰底，配色沿用 planNav 的深色版 */
.processNav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.processNav .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition: color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.processNav .arrow svg {
  width: 20px;
  height: 20px;
}
.processNav .arrow:active {
  color: var(--mainColor);
}

.processDots {
  display: flex;
  justify-content: center;
  align-items: center;
}
.processDots .dot {
  position: relative;
  width: 20px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.processDots .dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  transition: width 0.35s, background-color 0.35s;
}
.processDots .dot.isActive::before {
  width: 20px;
  background: var(--mainColor);
}

@media (hover: hover) and (pointer: fine) {
  .processNav .arrow:hover {
    color: var(--mainColor);
  }
  .processDots .dot:not(.isActive):hover::before {
    background: rgba(0, 0, 0, 0.32);
  }
}
/* RWD ------------------------------------------------------------------- */
/* 桌機的 grid 左欄是固定 640px、右欄吃剩下的空間，視窗一窄右欄就被壓到遠小於
   卡牌設計寬 519px（1024px 寬時只剩約 241px），卡片會變成細長條、內容也裝不下。
   ≤1366px 改成「右欄＝卡牌設計寬、左欄吃剩下的」，卡牌就固定拿到 519px、
   維持 519/616 的原比例，被縮小的是步驟列表那一欄（1024px 時約 380px）。
   1366px 時左欄約 670px、與桌機的 640px 幾乎一樣，銜接不會跳動 */
@media (max-width: 1366px) {
  .processBox {
    /* 右欄＝卡牌在此斷點的寬度（設計稿 519 → 430，避免卡牌在平板上過大），
       左欄吃剩下的空間（1024px 時約 471px） */
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: clamp(32px, 4vw, 60px);
  }
  .processCardBox {
    /* 卡牌寬度已等於右欄寬，往右挪多少就會伸進 wrap 內距多少（1024px 時只有 41px），
       再加上紅卡 2.5deg 旋轉多出的約 11px，挪超過 30px 就會被
       section 的 overflow: hidden 切掉右緣。這裡只做小幅右移 */
    left: clamp(8px, 1.5vw, 20px);
    width: min(430px, 100%);
  }
  /* 疊卡扇形收斂：旋轉角度越大、水平佔幅越寬（底卡 -14deg 時左右各多出約 54px），
     在欄距只剩 40px 左右的平板寬度會直接蓋到左側步驟文字，
     因此同步縮小左移量與旋轉角度（層疊感保留） */
  .processCard.cardBack {
    /* 整組卡的右移量收小後，扇形也要再收一點才不會蓋到左欄文字：
       -6%（-26px）+ -7deg 旋轉多出的約 29px ≈ 55px，扣掉右移量後仍在欄距內 */
    left: -6%;
    transform: rotate(-7deg);
  }
  .processCard.cardMid {
    left: -4%;
    transform: rotate(-5deg);
  }
  .processCardBox .cardList .cardItem {
    /* 維持 519/616 原比例的關鍵：卡片縮到 430px 後，原本 433/392 的圖片
       會佔掉太多高度、文字放不下（就是先前爆版與被撐成細長條的原因）。
       這裡把圖片裁切框改扁一點（433/330，object-fit: cover 本來就會裁），
       讓出約 43px 給文字區塊：430px 寬時卡片高 510px、內距 36px、
       圖片 273px，文字區可用 149px，而最長的一張（第 3 步，3 行）需要 136px，
       仍有餘裕。圖片維持固定比例、切換步驟時高度不跳動 */
  }
  .processCardBox .cardList .cardItem .Img {
    aspect-ratio: 433/330;
  }
  .processCardBox .cardList .cardItem .Txt {
    /* 卡內字級重新配比：英文標題原 32px 過於搶眼、內文 15px 偏小，
       在縮小後的卡牌上更明顯。標題收為 26px、內文放大到一般內文 16px */
  }
  .processCardBox .cardList .cardItem .Txt .title {
    font-size: var(--cardTitleSizeSmall);
  }
  .processCardBox .cardList .cardItem .Txt .text {
    font-size: var(--textSize);
  }
}
@media (max-width: 1180px) {
  .processItem .num {
    font-size: var(--stepNumSizeMedium);
  }
  .processItem .Txt .title {
    font-size: var(--stepTitleSizeMedium);
  }
  /* 卡內英文標題字級改由 ≤1366px 統一設定為 26px，此處不再覆寫 */
}
@media (max-width: 991px) {
  /* 由上而下：卡牌 → 步驟列點（保留紅色底線）→ 輪播圓點與箭頭；
     CTA 按鈕的 .btnBox 在 .processBox 之外、本來就接在最後 */
  /* 769~991px（折疊機／小平板）文案統一置中，比照 kvArea 的作法；
     ≤768px 手機版仍維持靠左（見下方 768 斷點） */
  section.processArea .titleBox {
    text-align: center;
  }
  .processBox {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 40px;
  }
  .processCardBox {
    order: 1;
    left: 0;
    top: 0;
    width: min(440px, 92%);
  }
  /* 步驟列點一次只出現一個（目前這一步），切換交給下方的輪播點點／箭頭；
     桌機仍維持完整 01~05 手風琴清單。
     五步改用 grid 疊在同一格（而非 display:none 只留一個）：容器高度固定
     取最高的那一步，切換時下方的輪播控制列才不會被長短不一的文案推上推下。
     為了讓每一步都以「完整高度」參與計算，此斷點的 .text 一律佔位顯示 */
  .processList {
    order: 2;
    display: grid;
    width: 100%;
    margin-top: 24px; /* 與上方卡牌再拉開一些（另有 .processBox 的 28px gap） */
  }
  .processItem {
    grid-area: 1/1;
    border-bottom: 0;
    opacity: 0;
    visibility: hidden;
    /* 刻意不做交叉淡出：五步疊在同一格，若上一步也慢慢淡出，
       它的灰色標題（#B2B2B2）會與新的一步同時可見，看起來像淺灰殘影。
       非目前步驟 transition:none（瞬間隱藏），只有目前這步淡入 */
    transition: none;
  }
  .processItem .item {
    padding: 12px 0 0;
  }
  .processItem {
    /* 桌機是「序號 auto｜文字 1fr」左靠的兩欄 grid。此斷點改用 flex 換行：
       序號與標題並排在第一列且整列置中，說明文字 flex-basis 100% 自成一列。
       （不沿用 grid 是因為說明文字跨欄時，多出來的寬度會被分配到兩個 auto
       欄軌，導致上方「序號＋標題」那一列的視覺中心偏掉） */
  }
  .processItem .Txt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .processItem .Txt .text {
    flex: 0 0 100%;
  }
  .processItem .Txt .text {
    display: block;
    /* 行動版改一般內文樣式：字級／字重／字距／色彩皆同一般文案
       （桌機為 700 粗體強調） */
    color: var(--textColor);
    font-size: var(--textSize);
    font-weight: 400;
    letter-spacing: normal;
  }
  .processItem.isActive {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease-out;
  }
  .processNav {
    order: 3;
    display: flex;
    margin-top: -8px; /* 與上方列表的距離收回一些（.dot 本身有 44px 點擊區） */
  }
  /* 卡牌改為滿寬單欄後，寬度由視窗決定（min(440px, 92%)），已不再是設計稿的
     519px，固定的 519/616 比例會裝不下「圖片 + 英文標題 + 2~3 行內文」，
     文案會掉出卡片外。此斷點改由內容撐高：.cardList 用 grid 把五張卡疊在
     同一格（切換仍是 opacity 淡入淡出），容器取最高的那張；
     下層兩張裝飾白卡同樣取消比例、跟著前卡的高度。
     992~1366px 不走這條路——那裡是把左欄縮小、讓卡牌拿回 519px 維持原比例 */
  .processCard.cardFront {
    aspect-ratio: auto;
  }
  .processCard.cardMid, .processCard.cardBack {
    aspect-ratio: auto;
    height: 100%;
  }
  .processCardBox .cardList .cardItem {
    /* 此斷點卡片高度改由內容決定，圖片不需要為了塞進固定比例而壓扁，
       還原為原始的 433/392 */
  }
  .processCardBox .cardList .cardItem .Img {
    aspect-ratio: 433/392;
  }
  .processCardBox .cardList .cardItem .Txt {
    text-align: center;
  }
  .processCardBox .cardList {
    position: relative;
    inset: auto;
    display: grid;
  }
  .processCardBox .cardList .cardItem {
    position: relative;
    inset: auto;
    grid-area: 1/1;
  }
}
@media (max-width: 768px) {
  /* 標題群組（大標題＋膠囊小標＋灰色內文）手機版同樣置中；
     卡牌內文才是還原為靠左（見下方）。
     步驟列（.processItem）沿用 ≤991px 的置中，此處不再還原 */
  section.processArea .titleBox {
    text-align: center;
    /* text-wrap: balance：各行長度自動平均，避免大標題／內文末行只剩一兩個字
       的孤字（此屬性可繼承，寫在 titleBox 一次套用標題與內文；舊瀏覽器不支援
       時自動退回一般折行，無副作用） */
    text-wrap: balance;
  }
  .processCardBox .cardList .cardItem .Txt {
    text-align: left;
  }
  /* 手機版標題下內文統一樣式（同 kvArea／painPointArea）：置中、一整段不斷行、行距 1.8 */
  section.processArea .titleBox .text {
    margin-top: 18px;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.2px;
  }
  section.processArea .titleBox .text br {
    display: none;
  }
  .processBox {
    margin-top: 30px;
  }
  .processItem {
    /* .item 的內距在 ≤991px 已改為 12px 0 0（步驟列點移到卡牌下方、
       底線也移除），這裡不再另外覆寫 */
  }
  .processItem .Txt {
    column-gap: 16px;
  }
  .processItem .Txt .title {
    font-size: var(--stepTitleSizeSmall);
  }
  .processItem .num {
    font-size: var(--stepNumSizeSmall);
  }
  /* 縮小旋轉角度、隱藏最底白卡，避免超出畫面 */
  .processCard.cardBack {
    display: none;
  }
  .processCard.cardMid {
    top: 3%;
    left: -6%;
    transform: rotate(-6deg);
  }
  .processCard {
    /* 手機版紅卡擺正（後方裝飾白卡的傾斜保留，維持層疊感） */
  }
  .processCard.cardFront {
    transform: rotate(0);
  }
  .processCardBox .cardList .cardItem .Txt .title {
    font-size: var(--cardTitleSizeSmall);
  }
}
/* ==========================================================================
   faqArea：常見問題
   ========================================================================== */
.faqArea {
  background: linear-gradient(180deg, #fff 0%, #FDF3F3 100%);
}
.faqArea .titleBox {
  text-align: center;
}

.faqBox {
  max-width: 1013px;
  margin: 50px auto 0;
}

.faqList {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.faqItem .item {
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--secondColor) 8%, transparent);
  overflow: hidden;
}
.faqItem {
  /* 展開狀態由 JS 切換 isActive；高度動畫交給 GSAP */
}
.faqItem.isActive .arrow {
  transform: rotate(225deg);
}

.faqQuestion {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  min-height: 88px;
  padding: 20px 40px;
  text-align: left;
}
.faqQuestion .num {
  flex: none;
  min-width: 46px;
  color: var(--mainColor);
  font-size: var(--subtitleSize);
  font-weight: 700;
  line-height: 1.2;
}
.faqQuestion .title {
  flex: 1;
  color: var(--titleColor);
  font-size: var(--textTitleSize);
  font-weight: 700;
  transition: color 0.3s;
}
.faqQuestion .arrow {
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--titleColor);
  border-bottom: 2px solid var(--titleColor);
  border-radius: 0 0 3px 0; /* 箭頭尖端微幅圓角 */
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 內距與分隔線放在內層 textEditor，讓 GSAP 將 faqAnswer 收合到 0 時完全隱藏 */
.faqAnswer .textEditor {
  padding: 0 40px 36px;
  font-size: var(--textSize);
}
.faqAnswer .textEditor h4 {
  font-size: var(--textTitleSizeSmall);
}
.faqAnswer .textEditor::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 24px;
  background: var(--lineColor);
}

@media (hover: hover) and (pointer: fine) {
  .faqQuestion:hover .title {
    color: var(--mainColor);
  }
}
/* RWD ------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* 行動裝置問題標題用小標題層級（18px，比內文大一級）；769~991 區間一併涵蓋 */
  .faqQuestion .title {
    font-size: var(--textTitleSizeSmall);
  }
}
@media (max-width: 768px) {
  .faqBox {
    margin-top: 36px;
  }
  .faqList {
    gap: 16px;
  }
  .faqQuestion {
    gap: 12px;
    min-height: 0;
    padding: 16px 20px;
  }
  .faqQuestion .num {
    min-width: 34px;
    font-size: var(--subtitleSizeSmall);
  }
  .faqQuestion .title {
    font-size: var(--textTitleSizeSmall);
  }
  .faqAnswer .textEditor {
    padding: 0 20px 24px;
  }
  .faqAnswer .textEditor h4 {
    font-size: var(--textSize);
  }
  .faqAnswer .textEditor::before {
    margin-bottom: 16px;
  }
}
/* ==========================================================================
   contactArea：聯絡我們（含 Let's Connect 跑馬燈）
   ========================================================================== */
section.contactArea {
  padding-top: 0;
  /* 右上與左下的大型淡紅光暈 + 上粉下白底。
     第一層（最上層）是與 faqArea 銜接用的「上緣淡出遮罩」：faqArea 底色收在
     #FDF3F3，但下面兩層光暈從本區塊上緣就已有強度，交界處會由 (253,243,243)
     直接跳到 (251,228,228)、看得到一條橫線。加上這層由 #FDF3F3 不透明淡出到
     透明（260px）的線性漸層後，上緣顏色與 faqArea 底部完全相同，光暈則由上而下
     慢慢浮現，兩區塊自然融合（桌機、手機皆適用，不需分斷點） */
  background: linear-gradient(180deg, #FDF3F3 0%, rgba(253, 243, 243, 0) 260px), radial-gradient(1000px 760px at 100% 6%, color-mix(in srgb, var(--secondColor) 9%, transparent) 0%, transparent 70%), radial-gradient(900px 700px at 0% 100%, color-mix(in srgb, var(--secondColor) 7%, transparent) 0%, transparent 70%), linear-gradient(180deg, #FDF3F3 0%, #fff 40%);
  overflow: hidden;
}
section.contactArea .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 60px;
  margin-top: var(--sectionSpace);
}
section.contactArea .titleBox .text a {
  color: var(--mainColor);
  font-weight: 700;
}

/* 跑馬燈 ---------------------------------------------------------------- */
.marqueeBox {
  padding-block: clamp(30px, 5vw, 70px);
  overflow: hidden;
}

.marqueeList {
  display: flex;
  width: max-content;
  /* 內容複製為 4 份後位移距離變長，等比放慢維持原本速度感 */
  animation: marqueeAnimation 80s linear infinite;
}

.marqueeItem {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;
}

.marqueeText {
  color: var(--secondColor);
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 機器人圓形圖示：同心圓（外淡粉 / 中粉 / 內實心紅）+ 白色機器人臉 */
.marqueeIcon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(72px, 9vw, 128px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* 兩圈同心圓（略縮小）：外圈淡底、中心實心圓 */
}
.marqueeIcon::before, .marqueeIcon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.marqueeIcon::before {
  inset: 6%;
  background: color-mix(in srgb, var(--secondColor) 15%, transparent);
}
.marqueeIcon::after {
  inset: 24%;
  background: var(--secondColor);
}
.marqueeIcon img {
  position: relative;
  z-index: 1;
  width: 52%;
  width: 36%;
  height: auto;
}
.marqueeIcon {
  /* 持續向外擴散的光波（弱化版：範圍小、更淡，單一波紋） */
}
.marqueeIcon .marqueeRipple {
  position: absolute;
  inset: 6%; /* 對齊縮小後的外圈 */
}
.marqueeIcon .marqueeRipple::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--secondColor);
  opacity: 0;
  animation: rippleSoftAnimation 2.4s ease-out infinite;
}

/* RWD ------------------------------------------------------------------- */
@media (max-width: 991px) {
  section.contactArea .wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* 769~991px（折疊機／小平板）文案統一置中，比照 kvArea 的作法；
     右側 .contactBox 表單維持原樣（label／輸入框不置中），≤768px 手機版仍靠左 */
  section.contactArea .titleBox {
    text-align: center;
  }
}
@media (max-width: 768px) {
  /* 標題群組（大標題＋灰色內文）手機版同樣置中；表單維持原樣 */
  section.contactArea .titleBox {
    text-align: center;
    /* text-wrap: balance：各行長度自動平均，避免大標題／內文末行只剩一兩個字
       的孤字（此屬性可繼承，寫在 titleBox 一次套用標題與內文；舊瀏覽器不支援
       時自動退回一般折行，無副作用） */
    text-wrap: balance;
  }
  /* 手機版標題下內文統一樣式（同 kvArea／painPointArea）：置中、一整段不斷行、行距 1.8
     （兩段 .text 皆套用，段落之間以 margin-top 18px 區隔） */
  section.contactArea .titleBox .text {
    margin-top: 18px;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.2px;
    /* 標示 .isKeep 的斷行保留（手機版仍要在「與您聯繫！」後換行），其餘取消 */
  }
  section.contactArea .titleBox .text br:not(.isKeep) {
    display: none;
  }
}