/* =========================================================================
   BIOSiCHT 柏泰生醫｜新 CI 試點樣式（pilot）
   =========================================================================
   用途：pilotsicht.html（新 CI 世代試點頁）專用。
   依據：biosicht-web-style 技能（Cozy 2026-09-29 裁定）
   世代：新 CI（--ink #081631 / --primary #2A6292 / --accent #B8860B /
                --curtain #152937 / --paper #FEFEFC / --panel #F2F7F9 /
                --line #94B6D2 / --track #DFE8EF / --mute #7C8B99）
   ⚠️ 舊 CI（#073A65 #2A6295 #0AB4C1 #D6DCE3 #F4F8FB #48606F）已作廢，禁用。
   ⚠️ 金棕 --accent 每區塊 ≤1 處（Cozy 本次放寬尺度）。
   ========================================================================= */

:root {
  /* 色彩一律別名指向 styles.css 的新 CI 主 token（單一真實來源，避免漂移） */
  --p-paper: var(--paper);
  --p-panel: var(--panel);
  --p-ink: var(--ink);
  --p-body: var(--body);
  --p-line: var(--line);
  --p-primary: var(--primary);
  --p-primary-d: #24547D;
  --p-accent: var(--accent);
  --p-accent-ink: var(--accent-ink);   /* 淺底上的金棕文字（AA） */
  --p-track: var(--track);
  --p-mute: var(--mute);
  --p-curtain: var(--curtain);
  --p-r: var(--radius);
  --p-ease: cubic-bezier(.16, 1, .3, 1);
  --p-sans: "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei",
    "微軟正黑體", "PingFang TC", "Heiti TC", "Noto Sans TC",
    "Source Han Sans TC", sans-serif;

  /* 字階（流體） */
  --p-fs-display: clamp(2rem, 4.6vw, 3.4rem);
  --p-fs-h2: clamp(1.4rem, 2.6vw, 2rem);
  --p-fs-h3: clamp(1.05rem, 1.5vw, 1.22rem);
  --p-fs-lead: clamp(15px, 1.7vw, 17px);
  --p-fs-body: 15px;
  --p-fs-sm: 13.5px;
  --p-fs-xs: 12px;
}

/* ---- 版面容器（比照 .wrap 1180px）---- */
.p-wrap {
  max-width: 1180px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
  position: relative; z-index: 1;
}

/* =====================================================================
   背景系統：淺藍→白柔漸層 + 科技網格（邊緣淡出）
   ===================================================================== */
/* 註：漸層底 + 科技網格已由 styles.css 的 body / body::before 全域提供，
   本頁不再重複宣告（原本的 .p-page 規則已移除）。 */

/* =====================================================================
   HERO：兩欄 + 幾何光暈
   ===================================================================== */
.p-hero { position: relative; overflow: hidden; }
.p-hero__glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(74px); z-index: 0;
}
.p-hero__glow--1 {
  width: 580px; height: 580px; left: -150px; top: -170px;
  background: radial-gradient(circle, rgba(148, 182, 210, .52), transparent 70%);
}
.p-hero__glow--2 {
  width: 470px; height: 470px; right: -130px; bottom: -160px;
  background: radial-gradient(circle, rgba(42, 98, 146, .22), transparent 70%);
}

/* ---- HERO 沉浸版（Cozy 2026-10-04）：望遠鏡觀測藍圖背景 × 主設備前景 ----
   與首頁 .hero--immersive 同語彙、不同構：
     首頁 = 文字左／設備右（水平並置），望遠鏡鋪滿背景。
     本頁 = 非對稱舞台（1.06fr / .94fr），望遠鏡自舞台右側長出並向右淡出，
            左側以 curtain 漸層承載文字；設備加一圈背光環與規格籤。 */
.p-hero--imm {
  min-height: clamp(620px, 88vh, 900px);
  display: flex; align-items: center;
  background: var(--p-curtain);
  color: #ffffff;
  isolation: isolate;
}
.p-hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* 觀測藍圖層：三座望遠鏡以 screen 混合疊在深底，僅保留線稿亮部 */
.p-hero__blueprint {
  position: absolute; inset: -6% -10%;
  background-image: url("../img/telescopes-triptych.png");
  background-repeat: no-repeat;
  background-position: 74% 44%;
  background-size: min(1500px, 128%) auto;
  mix-blend-mode: screen;
  opacity: .52;
  -webkit-mask-image: radial-gradient(112% 86% at 74% 46%, #000 0%, rgba(0, 0, 0, .80) 44%, transparent 86%);
  mask-image: radial-gradient(112% 86% at 74% 46%, #000 0%, rgba(0, 0, 0, .80) 44%, transparent 86%);
}
/* 設備背光：讓前景儀器輪廓自藍圖中浮出 */
.p-hero__halo { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(88px); }
.p-hero__halo--dev {
  width: 720px; height: 720px; right: -6%; top: 50%; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(42, 98, 146, .46), rgba(21, 41, 55, 0) 68%);
}
.p-hero__halo--left {
  width: 560px; height: 560px; left: -160px; top: -140px;
  background: radial-gradient(circle, rgba(148, 182, 210, .26), transparent 70%);
}
/* 文字護讀層：左重右輕，右下角稍壓暗以收攏設備底座 */
.p-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(21, 41, 55, .97) 0%,
      rgba(21, 41, 55, .92) 32%,
      rgba(21, 41, 55, .60) 56%,
      rgba(21, 41, 55, .22) 78%,
      rgba(21, 41, 55, .18) 100%),
    linear-gradient(180deg,
      rgba(21, 41, 55, .44) 0%,
      rgba(21, 41, 55, 0) 26%,
      rgba(21, 41, 55, 0) 58%,
      rgba(21, 41, 55, .62) 100%);
}
.p-hero--imm .p-hero__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
  gap: clamp(26px, 4vw, 60px);
  padding-top: clamp(96px, 14vh, 168px);
  padding-bottom: clamp(56px, 9vh, 108px);
}
.p-hero--imm .p-hero__copy { max-width: 620px; }

/* 觀測紀元軸：年份／代號／觀測語彙三欄，細線分隔，對位下方 HUBBLE·WEBB·ROMAN */
.p-epoch {
  list-style: none; margin: 26px 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid rgba(148, 182, 210, .26);
}
.p-epoch li {
  flex: 1 1 0; min-width: 108px;
  padding: 12px 16px 2px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.p-epoch li + li { padding-left: 16px; border-left: 1px solid rgba(148, 182, 210, .18); }
.p-epoch__yr {
  font-family: var(--font-en, var(--p-sans)); font-size: 11px;
  letter-spacing: .16em; color: rgba(255, 255, 255, .42);
  font-variant-numeric: tabular-nums;
}
.p-epoch b {
  font-family: var(--font-en, var(--p-sans)); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; color: var(--accent-on-dark);
}
.p-epoch li > span:last-child { font-size: var(--p-fs-xs); color: var(--p-line); letter-spacing: .04em; }

/* 深底上的文字一律改用 --line（7.04:1）；--primary 於深底僅 2.32:1，禁用 */
.p-hero--imm .p-eyebrow {
  color: var(--accent-on-dark);
  display: inline-flex; align-items: center; gap: 12px;
}
.p-hero--imm .p-eyebrow::before {
  content: ""; width: 38px; height: 3px; background: var(--accent-on-dark); display: inline-block;
}

/* ---- PILOTSiCHT 產品標誌（加強產品識別；深底用 -white 版） ---- */
.p-mark { display: block; height: auto; }
.p-eyebrow--mark { gap: 16px; }
.p-eyebrow--mark .p-mark { flex: 0 0 auto; }
.p-mark--hero { width: clamp(228px, 27vw, 320px); }
.p-mark--section { width: clamp(150px, 16vw, 190px); margin-bottom: 18px; }
.p-mark--cta { width: clamp(180px, 20vw, 240px); margin-bottom: 22px; }
.p-hero--imm .p-h1 { color: #ffffff; max-width: 22em; }
.p-hero--imm .p-h1 .ac { color: inherit; }
.p-hero--imm .p-lede { color: var(--p-line); max-width: 56em; }
/* 金棕底按鈕配深字（--curtain）；白字對金棕僅 2.90:1，禁用 */
.p-hero--imm .p-btn--pri { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--p-curtain); }
.p-hero--imm .p-btn--pri:hover { background: #E0BC6B; border-color: #E0BC6B; }
.p-hero--imm .p-btn--gho { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.p-hero--imm .p-btn--gho:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* 主設備前景 */
.p-hero__device {
  position: relative; margin: 0; justify-self: center; align-self: center;
  width: min(100%, 430px);
  display: flex; flex-direction: column; align-items: center;
}
.p-hero__device-ring {
  position: absolute; inset: auto 50% 7% auto; transform: translateX(50%);
  width: 120%; aspect-ratio: 1 / 1; border-radius: 50%;
  border: 1px solid rgba(148, 182, 210, .20);
  background: radial-gradient(circle, rgba(42, 98, 146, .24), rgba(21, 41, 55, 0) 66%);
  pointer-events: none;
}
.p-hero__device img {
  position: relative; z-index: 1;
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 42px 72px rgba(0, 0, 0, .58));
}
.p-hero__device-cap {
  position: relative; z-index: 2;
  margin-top: calc(-1 * clamp(18px, 3vw, 32px));
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: center;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(8, 22, 49, .55);
  border: 1px solid rgba(148, 182, 210, .28);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
.p-hero__device-cap b {
  font-family: var(--font-en, var(--p-sans)); font-size: 15px; letter-spacing: .04em; color: #ffffff;
}
.p-hero__device-cap span { font-size: var(--p-fs-xs); color: var(--p-line); }

@media (max-width: 1080px) {
  .p-hero--imm .p-hero__inner { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 48px); }
  .p-hero__device { order: -1; width: min(72%, 320px); }
  .p-hero__blueprint { background-position: 60% 40%; opacity: .40; }
  .p-hero--imm .p-hero__copy { max-width: none; }
}
@media (max-width: 720px) {
  .p-hero--imm { min-height: 0; }
  .p-hero__device { width: min(62%, 250px); }
  .p-hero__device-cap { flex-direction: column; gap: 4px; text-align: center; border-radius: var(--p-r); }
  .p-epoch li { flex: 1 1 100%; padding: 10px 0 2px; }
  .p-epoch li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(148, 182, 210, .14); }
}

.p-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.p-eyebrow {
  font-size: var(--p-fs-xs); letter-spacing: .18em; color: var(--p-primary);
  font-weight: 700; margin: 0 0 14px; text-transform: uppercase;
}
.p-h1 {
  font-size: var(--p-fs-display); line-height: 1.18; letter-spacing: -.015em;
  color: var(--p-ink); font-weight: 700; margin: 0 0 18px;
  text-wrap: balance;      /* 避免「全部可／能性」這類詞內斷行 */
}
/* hero 標題不加標註色（Cozy 2026-10-04）：層級僅以字重與字級建立 */
.p-h1 .ac { color: inherit; display: inline; }
/* 桌機才啟用強制換行；窄螢幕交由 text-wrap 自然流動 */
@media (max-width: 1024px) { .p-br { display: none; } }
.p-lede {
  font-size: var(--p-fs-lead); max-width: 34em; margin: 0 0 26px;
  color: var(--p-body); line-height: 1.8;
}

/* ---- 按鈕 ---- */
.p-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--p-r);
  font-size: 15px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--p-primary);
  transition: transform .25s var(--p-ease), background-color .25s, color .25s;
}
.p-btn--pri { background: var(--p-primary); color: #fff; }
.p-btn--pri:hover { background: var(--p-primary-d); }
.p-btn--gho { background: transparent; color: var(--p-primary); }
.p-btn--gho:hover { background: var(--p-panel); }
.p-btn:active { transform: translateY(1px) scale(.99); }
.p-btn__arrow { transition: transform .3s var(--p-ease); }
.p-btn:hover .p-btn__arrow { transform: translateX(3px); }
.p-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---- hero 視覺（設備圖 + 呼吸感）---- */
.p-hero__visual {
  position: relative; display: flex; align-items: center;
  justify-content: center; min-height: 320px;
}
.p-hero__img {
  width: 100%; max-width: 460px; height: auto; display: block;
  border-radius: 18px;
  box-shadow: 0 26px 64px rgba(8, 22, 49, .26);
}
/* hero 圖上的規格浮卡 */
.p-hero__badge {
  position: absolute; left: 0; bottom: 6px;
  background: var(--p-curtain); color: #fff;
  border: 1px solid rgba(148, 182, 210, .28);
  border-radius: var(--p-r); padding: 14px 18px;
  box-shadow: 0 18px 44px rgba(8, 22, 49, .22);
  display: flex; gap: 20px; align-items: center;
}
.p-hero__badge b {
  display: block; font-size: 20px; font-weight: 700; line-height: 1.1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.p-hero__badge span {
  display: block; font-size: 11px; color: var(--p-line);
  letter-spacing: .04em; margin-top: 3px;
}
.p-hero__badge-div {
  width: 1px; height: 34px; background: rgba(148, 182, 210, .3);
}

/* =====================================================================
   區塊通用
   ===================================================================== */
.p-sec { padding: clamp(34px, 5vw, 68px) 0; position: relative; z-index: 1; }
.p-sec--panel { background: rgba(242, 247, 249, .72); }
.p-sec--curtain { background: var(--p-curtain); color: #fff; }

.p-sec-head { max-width: 46em; margin-bottom: 36px; }
.p-h2 {
  font-size: var(--p-fs-h2); color: var(--p-ink); font-weight: 700;
  letter-spacing: -.01em; margin: 0 0 10px; line-height: 1.35;
}
.p-sec-head p {
  margin: 0; font-size: var(--p-fs-body); color: var(--p-body); line-height: 1.85;
}
.p-sec--curtain .p-h2, .p-sec--curtain .p-eyebrow { color: #fff; }
.p-sec--curtain .p-sec-head p { color: rgba(255, 255, 255, .82); }

/* =====================================================================
   對照區（舊 vs 新）：兩欄
   ===================================================================== */
.p-versus {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 32px);
}
.p-versus__col {
  background: rgba(255, 255, 255, .76);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(148, 182, 210, .42);
  border-radius: var(--p-r);
  padding: clamp(22px, 2.6vw, 30px);
}
/* accent 側：金棕上緣（本區塊唯一金棕使用點） */
.p-versus__col--new { border-top: 3px solid var(--p-primary); }
.p-versus__col--old { border-top: 3px solid var(--p-track); }
.p-versus__label {
  font-size: var(--p-fs-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--p-mute); display: block; margin-bottom: 6px;
}
.p-versus__col--new .p-versus__label { color: var(--p-primary); }
.p-versus__title {
  font-size: var(--p-fs-h3); color: var(--p-ink); font-weight: 700;
  margin: 0 0 18px; line-height: 1.4;
}
.p-versus__list { list-style: none; margin: 0; padding: 0; }
.p-versus__list li {
  position: relative; padding: 11px 0 11px 26px;
  font-size: var(--p-fs-sm); line-height: 1.72; color: var(--p-body);
  border-bottom: 1px solid var(--p-track);
}
.p-versus__list li:last-child { border-bottom: none; }
.p-versus__list li::before {
  content: ""; position: absolute; left: 4px; top: 19px;
  width: 9px; height: 1px; background: var(--p-mute);
}
.p-versus__col--new .p-versus__list li::before {
  content: ""; left: 2px; top: 16px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--p-primary);
  border-bottom: 2px solid var(--p-primary);
  transform: rotate(42deg);
}

/* =====================================================================
   流程步驟（橫向序號 + 細線）
   ===================================================================== */
.p-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.p-step {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--p-track);
}
.p-step:last-child { border-bottom: none; }
.p-step__no {
  font-family: var(--p-sans); font-size: 30px; font-weight: 700;
  line-height: 1; color: var(--p-track);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.p-step__body h3 {
  font-size: var(--p-fs-h3); color: var(--p-ink); font-weight: 700;
  margin: 0 0 8px; line-height: 1.4;
}
.p-step__body p {
  margin: 0; font-size: var(--p-fs-sm); line-height: 1.85; color: var(--p-body);
}

/* =====================================================================
   數據帶：四欄，數字主導
   ===================================================================== */
.p-figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 34px);
  padding-block: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--p-line);
  border-bottom: 1px solid var(--p-line);
}
.p-figure b {
  display: block; font-size: clamp(1.7rem, 2.9vw, 2.5rem); font-weight: 700;
  line-height: 1; color: var(--p-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  white-space: nowrap;   /* 數字與單位不可斷行（>95% / 30min / 10⁹ 須為一體） */
}
/* 單位須留在數字同一行：覆寫下方 .p-figure span 的 display:block */
.p-figure b .unit {
  display: inline; font-size: .45em; font-weight: 700; margin-left: 2px;
}
/* 首要指標用金棕（本區塊唯一金棕使用點） */
.p-figure--key b { color: var(--p-ink); }
/* 僅直屬說明文字用 block（避免誤傷 .unit） */
.p-figure > span {
  display: block; margin-top: 10px; font-size: var(--p-fs-sm);
  color: var(--p-mute); line-height: 1.6;
}

/* =====================================================================
   三望遠鏡技術圖（三幕結構區塊內）
   來源：index 舊 hero 主視覺移入本頁，作為 HUBBLE / WEBB / ROMAN 的視覺主角。
   深底上以細邊框 + 內發光托住藍圖線稿，讓線條浮出而不刺眼。
   ===================================================================== */
.p-triptych {
  position: relative; margin: clamp(26px, 3.4vw, 44px) 0 0;
  border: 1px solid rgba(148, 182, 210, .26);
  border-radius: var(--p-r);
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 40%, rgba(42, 98, 146, .28), rgba(21, 41, 55, .55) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.p-triptych img {
  display: block; width: 100%; height: auto;
  mix-blend-mode: screen;            /* 藍圖深底與區塊底色融合 */
}
.p-triptych figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(8, 22, 49, .55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border-top: 1px solid rgba(148, 182, 210, .22);
}
.p-triptych figcaption > span {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  justify-content: center;
  padding: 10px 12px; font-size: var(--p-fs-xs); color: var(--p-line);
}
.p-triptych figcaption b {
  font-family: var(--p-sans); font-weight: 700; letter-spacing: .1em;
  color: #fff; font-size: 12px;
}
@media (max-width: 640px) {
  .p-triptych img { min-height: 180px; object-fit: cover; }
  .p-triptych figcaption { position: static; }
  .p-triptych figcaption > span { padding: 8px 6px; font-size: 11px; }
}

/* =====================================================================
   機型卡（深底區塊內）
   ===================================================================== */
.p-models {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
.p-model {
  border-top: 2px solid rgba(148, 182, 210, .45);
  padding-top: 20px;
}
/* 主力機型高亮（本區塊唯一金棕使用點） */
.p-model--hot { border-top-color: var(--p-line); }
.p-model__code {
  font-size: var(--p-fs-xs); font-weight: 700; letter-spacing: .16em;
  color: var(--p-line); display: block; margin-bottom: 10px; text-transform: uppercase;
}
.p-model--hot .p-model__code { color: var(--p-line); }
.p-model h3 {
  font-size: var(--p-fs-h3); color: #fff; font-weight: 700;
  margin: 0 0 10px; line-height: 1.4;
}
.p-model p {
  margin: 0; font-size: var(--p-fs-sm); line-height: 1.85;
  color: rgba(255, 255, 255, .8);
}

/* =====================================================================
   玻璃擬態卡片
   ===================================================================== */
.p-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}
.p-card {
  position: relative;
  background: rgba(255, 255, 255, .76);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(148, 182, 210, .42);
  border-radius: var(--p-r);
  padding: clamp(20px, 2.4vw, 26px);
  display: flex; flex-direction: column;
  transition: transform .35s var(--p-ease), border-color .35s,
    box-shadow .35s, background-color .35s;
}
.p-card:hover {
  transform: translateY(-4px);
  border-color: var(--p-line);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 44px rgba(8, 22, 49, .12);
}
.p-card__kind {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--p-primary); background: #fff;
  border: 1px solid var(--p-track); border-radius: 999px;
  padding: 3px 11px; display: inline-block; width: fit-content;
  margin-bottom: 14px;
}
/* 卡片首項用金棕標記（每區塊僅第一張，維持 ≤1 處） */
.p-card--hot .p-card__kind { color: var(--p-primary); }
.p-card h3 {
  font-size: 17px; color: var(--p-ink); font-weight: 700;
  margin: 0 0 8px; line-height: 1.45;
}
.p-card p {
  margin: 0; font-size: var(--p-fs-sm); line-height: 1.8;
  color: var(--p-body);
}

/* =====================================================================
   CTA 收尾
   ===================================================================== */
.p-cta {
  border-top: 2px solid var(--p-primary);
  padding-top: clamp(28px, 4vw, 44px);
}

/* =====================================================================
   scroll-reveal（無障礙：prefers-reduced-motion 直接顯示）
   ===================================================================== */
.p-rv {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--p-ease), transform .7s var(--p-ease);
}
.p-rv.is-in { opacity: 1; transform: none; }
/* GSAP 接手時：關閉 CSS 過渡（避免與 GSAP tween 搶屬性），並讓元素可見基準回到 1 */
.gsap-active .p-rv { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .p-rv { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   響應式
   ===================================================================== */
@media (max-width: 1024px) {
  .p-hero__inner { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .p-hero__visual { min-height: 260px; order: -1; }
  .p-hero__img { max-width: 400px; }
  .p-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
  .p-models { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 30px); }
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .p-versus { grid-template-columns: 1fr; }
  .p-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .p-step { grid-template-columns: 1fr; gap: 8px; }
  .p-step__no { font-size: 22px; }
  .p-figures { grid-template-columns: 1fr; gap: 20px; }
  .p-grid { grid-template-columns: 1fr; }
  .p-hero__badge { position: static; margin-top: 16px; width: fit-content; }
}

/* ---- 日／越文膨脹防護 ---- */
html[lang="ja"] .p-figures,
html[lang="vi"] .p-figures { gap: clamp(12px, 1.8vw, 22px); }
html[lang="ja"] .p-versus__list li,
html[lang="vi"] .p-versus__list li { line-height: 1.9; }

/* =====================================================================
   三幕結構：ROMAN 設計目標（5 欄）
   橘色歸零（2026-10-04 裁定）— 層級僅以字重與字級建立
   ===================================================================== */
.p-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.p-stage {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; padding: 2px 10px; border-radius: 999px;
  border: 1px solid rgba(148, 182, 210, .5); color: var(--p-line);
  margin-bottom: 10px;
}
.p-stage--concept { border-color: rgba(148, 182, 210, .34); color: var(--p-mute); }

.p-goals {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px); margin-top: var(--sp-6);
}
.p-goal {
  background: rgba(255, 255, 255, .76);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(148, 182, 210, .42);
  border-top: 2px solid var(--p-line);
  border-radius: var(--p-r); padding: 20px 18px;
}
.p-goal__no {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; color: var(--p-mute); margin-bottom: 8px;
}
.p-goal h3 {
  font-size: 15px; color: var(--p-ink); font-weight: 700;
  margin: 0 0 8px; line-height: 1.45;
}
.p-goal p { font-size: 13px; line-height: 1.7; color: var(--p-body); margin: 0; }

.p-disclaimer {
  margin-top: var(--sp-5); padding: 14px 18px;
  border-left: 2px solid var(--p-line); border-radius: var(--p-r);
  background: rgba(148, 182, 210, .10);
  font-size: 13px; line-height: 1.75; color: var(--p-body);
}

@media (max-width: 1024px) { .p-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .p-goals { grid-template-columns: 1fr; } }

/* 深底區塊內的三幕卡（.p-sec--curtain） */
.p-sec--curtain .p-stage { color: var(--p-line); }
.p-sec--curtain .p-goals .p-goal {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(148, 182, 210, .28);
  border-top-color: rgba(148, 182, 210, .5);
}
.p-sec--curtain .p-goal h3 { color: #fff; }
.p-sec--curtain .p-goal p { color: rgba(255, 255, 255, .8); }
.p-sec--curtain .p-goal__no { color: var(--p-line); }
.p-sec--curtain .p-disclaimer {
  color: rgba(255, 255, 255, .8);
  border-left-color: rgba(148, 182, 210, .5);
  background: rgba(255, 255, 255, .05);
}

/* =========================================================================
   PILOTSICHT_TEST — Apple 式視差滾動敘事（試作，Cozy 2026-10-04）
   =========================================================================
   語彙：Apple 官網「scroll storytelling」——段落 pin 住、以 scrub 推進，
         影像縮放／淡出／位移由捲動進度驅動，文字分段進場。
   策略：不改動既有 .p-sec 內容結構，以「包裝 + 疊層」方式加註動效。
         - .p-chapter        ：被 pin 的敘事章節（滿版，內含 .p-chapter__stage）
         - .p-chapter__stage ：滿版影像層，隨進度 scale / opacity / y
         - .p-chapter__copy  ：文字層，分段進場
   降級：prefers-reduced-motion 或無 GSAP → 章節回歸靜態一般段落（可讀）。
   紅線：深底文字一律 --p-line（7.04:1）；金棕僅 --p-accent-on-dark。
   ========================================================================= */

/* ---- 章節骨架：預設靜態可讀（無 JS 時的安全狀態）---- */
.p-chapter {
  position: relative;
  overflow: hidden;
  background: var(--p-curtain);
  color: #fff;
  isolation: isolate;
}
.p-chapter__stage {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  will-change: transform, opacity;
}
.p-chapter__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  will-change: transform;
}
/* 護讀層（左重右輕，與 hero 同語彙） */
.p-chapter__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(21, 41, 55, .96) 0%,
      rgba(21, 41, 55, .88) 36%,
      rgba(21, 41, 55, .62) 58%,
      rgba(21, 41, 55, .30) 80%,
      rgba(21, 41, 55, .22) 100%),
    linear-gradient(180deg,
      rgba(21, 41, 55, .40) 0%,
      rgba(21, 41, 55, 0) 30%,
      rgba(21, 41, 55, 0) 62%,
      rgba(21, 41, 55, .55) 100%);
}
.p-chapter__inner {
  position: relative; z-index: 2;
  width: 100%;
  min-height: 100%;
  display: flex; align-items: center;
}
.p-chapter__copy { max-width: 620px; }
.p-chapter__copy .p-eyebrow { color: var(--p-accent-on-dark); }
.p-chapter__copy .p-h2 { color: #fff; }
.p-chapter__copy p { color: var(--p-line); }

/* ---- 數字敘事：巨幅數字（Apple 式 fact 段落）---- */
.p-chapter__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(28px, 4vw, 48px);
}
.p-chapter__stat {
  border-top: 1px solid rgba(148, 182, 210, .34);
  padding-top: 18px;
}
.p-chapter__stat b {
  display: block;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--p-accent-on-dark);
}
.p-chapter__stat span {
  display: block; margin-top: 10px;
  font-size: var(--p-fs-sm); color: var(--p-line);
}
.p-chapter__stat em {
  font-style: normal; display: block; margin-top: 4px;
  font-size: var(--p-fs-xs); color: rgba(148, 182, 210, .70);
}

/* ---- 裝置縮放段（Apple「產品放大」）---- */
.p-zoom {
  position: relative;
  background: var(--p-curtain);
  isolation: isolate;
}
.p-zoom__stage {
  position: relative;
  height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.p-zoom__device {
  position: relative;
  width: min(46vw, 520px);
  transform-origin: 50% 50%;
  will-change: transform;
}
.p-zoom__device img { width: 100%; height: auto; display: block; }
.p-zoom__glow {
  position: absolute; left: 50%; top: 50%;
  width: 780px; height: 780px; margin: -390px 0 0 -390px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 98, 146, .48), rgba(21, 41, 55, 0) 66%);
  filter: blur(70px);
  pointer-events: none; z-index: -1;
}
/* 標註點：隨放大段依次出現（Apple 式 callout） */
.p-zoom__callout {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  font-size: var(--p-fs-xs);
  color: var(--p-line);
  opacity: 0;
  white-space: nowrap;
}
.p-zoom__callout::before {
  content: ""; width: 26px; height: 1px;
  background: var(--p-accent-on-dark);
  flex: 0 0 auto;
}
.p-zoom__callout--tl { left: -6%; top: 16%; flex-direction: row-reverse; }
.p-zoom__callout--tr { right: -8%; top: 30%; }
.p-zoom__callout--bl { left: -8%; bottom: 22%; flex-direction: row-reverse; }
.p-zoom__callout--br { right: -6%; bottom: 12%; }

/* ---- 水平敘事段（Apple 式橫向卡片）---- */
.p-hscroll {
  position: relative;
  background: var(--p-curtain);
  overflow: hidden;
  isolation: isolate;
}
.p-hscroll__viewport {
  height: 100vh; height: 100dvh;
  display: flex; align-items: center;
  overflow: hidden;
}
.p-hscroll__track {
  display: flex; gap: clamp(20px, 3vw, 40px);
  padding-left: max(24px, calc((100vw - 1180px) / 2));
  padding-right: 40px;
  will-change: transform;
}
.p-hscroll__card {
  flex: 0 0 auto;
  width: min(78vw, 440px);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(148, 182, 210, .22);
  border-radius: var(--p-r);
  padding: clamp(24px, 3vw, 36px);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
.p-hscroll__card .p-hscroll__no {
  font-size: var(--p-fs-xs); letter-spacing: .18em;
  color: var(--p-accent-on-dark);
}
.p-hscroll__card h3 {
  margin: 14px 0 12px;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: #fff; line-height: 1.3;
}
.p-hscroll__card p { color: var(--p-line); font-size: var(--p-fs-sm); line-height: 1.75; }
.p-hscroll__card ul { margin: 16px 0 0; padding: 0; list-style: none; }
.p-hscroll__card li {
  position: relative; padding-left: 18px; margin-top: 8px;
  color: var(--p-line); font-size: var(--p-fs-xs);
}
.p-hscroll__card li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--p-accent-on-dark);
}
/* 進度指示（Apple 式細長進度條） */
.p-hscroll__bar {
  position: absolute; left: max(24px, calc((100vw - 1180px) / 2));
  right: 40px; bottom: 9vh;
  height: 2px; background: rgba(148, 182, 210, .22);
}
.p-hscroll__bar i {
  display: block; height: 100%; width: 0;
  background: var(--p-accent-on-dark);
}

/* ---- 段落標題帶（章節之間的呼吸）---- */
.p-interlude {
  background: var(--p-curtain);
  text-align: center;
  padding: clamp(4rem, 12vh, 9rem) 24px;
}
.p-interlude h2 {
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  font-weight: 800; line-height: 1.18; letter-spacing: -.015em;
  color: #fff; margin: 0 auto; max-width: 30ch;
}
.p-interlude p {
  margin: 18px auto 0; max-width: 56ch;
  color: var(--p-line); font-size: var(--p-fs-lead);
}

/* ---- 動效開場狀態（僅在 .gsap-active 時隱藏，避免無 JS 白畫面）---- */
.gsap-active .p-chapter__copy > *,
.gsap-active .p-interlude > * { opacity: 0; }
.gsap-active .p-chapter__copy .p-eyebrow { transform: translateY(18px); }
.gsap-active .p-interlude h2, .gsap-active .p-interlude p { transform: translateY(24px); }

@media (max-width: 900px) {
  .p-chapter__inner { min-height: auto; padding-block: clamp(4rem, 14vh, 7rem); }
  .p-chapter__copy { max-width: none; }
  .p-zoom__callout { display: none; }
  .p-hscroll__card { width: 82vw; }
  .p-hscroll__bar { bottom: 6vh; }
}

@media (prefers-reduced-motion: reduce) {
  .gsap-active .p-chapter__copy > *,
  .gsap-active .p-interlude > * { opacity: 1; transform: none; }
  .p-zoom__callout { opacity: 1; }
  .p-hscroll__track { transform: none !important; }
}