/* 鯊魚卡牌官網 — 共用樣式
   視覺依據：IG 文宣與 Logo（深藍底 ＋ 金色），Master Handoff 8.5.5 */

:root {
  --navy-900: #050f22;
  --navy-800: #0a1a35;
  --navy-700: #0f2545;
  --navy-600: #16345c;
  --gold-400: #d4af37;
  --gold-300: #e3c765;
  --gold-200: #f0dc9a;
  --ink: #f4f1e8;
  --ink-dim: #b9c2d0;
  --ink-faint: #7d8798;
  --line: rgba(212, 175, 55, 0.22);
  --line-soft: rgba(212, 175, 55, 0.1);
  --max: 1120px;
  --radius: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--navy-900);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Helvetica Neue", -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- 通用元件 ---------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--gold-400);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
}

.rule {
  width: 48px; height: 1px;
  background: var(--gold-400);
  margin: 22px 0;
}

h1, h2, h3 { font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; }
h1 { font-size: clamp(30px, 5.2vw, 52px); }
h2 { font-size: clamp(24px, 3.4vw, 34px); }
h3 { font-size: 19px; }

.lead { font-size: clamp(16px, 2vw, 18px); color: var(--ink-dim); max-width: 62ch; }
.muted { color: var(--ink-faint); font-size: 14px; }
.gold { color: var(--gold-300); }

section { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--line-soft); }

.btn {
  display: inline-block;
  padding: 15px 34px;
  background: var(--gold-400);
  color: var(--navy-900);
  font-weight: 700;
  border-radius: var(--radius);
  letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.2s;
}
.btn:hover { background: var(--gold-300); transform: translateY(-1px); }

.btn-ghost {
  display: inline-block;
  padding: 15px 34px;
  border: 1px solid var(--line);
  color: var(--gold-300);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.btn-ghost:hover { border-color: var(--gold-400); background: rgba(212,175,55,0.06); }

/* ---------- 頁首 ---------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 15, 34, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
/* 2026-08-14 換成真商標（原本是 CSS 畫的假「S」圓圈）。
   徽章細節多，縮到 36px 高時只看得出金色圓徽的輪廓——這是徽章型 logo 的必然，
   所以品牌名仍由旁邊的文字負責，圖只負責辨識。 */
/* 2026-08-14 第三版商標是接近正方形的構圖（3485×3324），
   框改成正方才不會左右留白。 */
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px;
  object-fit: contain;
}
/* 頁尾的大商標——這裡尺寸夠大，徽章的細節（波浪、鱗紋、外圈字）才真的看得到 */
.foot-logo { width: 190px; height: auto; margin-bottom: 16px; opacity: 0.92; }

.brand-name { font-weight: 600; letter-spacing: 0.06em; font-size: 15px; }
.brand-name small { display: block; font-size: 10px; letter-spacing: 0.22em; color: var(--ink-faint); font-weight: 400; }

.nav { display: flex; gap: 26px; font-size: 14px; }
.nav a { color: var(--ink-dim); transition: color 0.2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-300); }

.nav-toggle { display: none; background: none; border: 0; color: var(--gold-300); font-size: 22px; cursor: pointer; }

/* ---------- 主視覺 ---------- */

.hero {
  border-top: 0;
  padding: clamp(64px, 11vw, 128px) 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(1100px 520px at 76% -8%, rgba(212,175,55,0.13), transparent 62%),
    linear-gradient(180deg, var(--navy-800), var(--navy-900));
}
/* ⚠️ 2026-08-14 修兩個相反方向的問題（使用者用 Cmd +/− 縮放時發現）：
   放大 → 標題被 max-width:17ch 擠成三行（「送鑑定之／前，」硬斷在詞中間）
   縮小 → 內容全擠在左側 40%，右邊大片空白
   原因是同一個：17ch 這種以字元計的寬度會隨字級變動，而 .wrap 固定 1120px 不會。
   改法：標題用 text-wrap 讓瀏覽器決定斷點、不設死寬度；hero 在寬螢幕改兩欄。 */
.hero h1 {
  /* balance 讓各行長度平均，pretty 避免最後一行只剩一兩個字 */
  text-wrap: balance;
  max-width: 22ch;
}
.hero h1 em { font-style: normal; color: var(--gold-300); }
.hero .sub { margin-top: 10px; font-size: clamp(17px, 2.3vw, 21px); color: var(--gold-200); font-weight: 500; }
.hero p { margin-top: 26px; text-wrap: pretty; }
.hero .cta-row { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }

/* 寬螢幕：hero 改兩欄，右側放重點數字，消掉右邊的空白 */
@media (min-width: 1080px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  .hero-main { min-width: 0; }
  .hero-side { min-width: 0; }
  .hero h1 { max-width: none; }
}
@media (max-width: 1079px) {
  .hero-side { margin-top: 44px; }
}

/* hero 右側的重點卡 */
.hero-side {
  display: grid;
  gap: 14px;
}
.hero-stat {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  background:
    radial-gradient(100% 70% at 100% 0%, rgba(212,175,55,0.08), transparent 65%),
    rgba(255,255,255,0.015);
}
.hero-stat b {
  display: block;
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--gold-300);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero-stat span { font-size: 13px; color: var(--ink-faint); letter-spacing: 0.04em; }

.hero-note {
  margin-top: 44px; padding: 20px 24px;
  border-left: 2px solid var(--gold-400);
  background: rgba(255,255,255,0.02);
  max-width: 60ch;
}

/* ---------- 服務卡 ---------- */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
/* 四格用（例如四大流程 STEP 01–04）。用 3 欄會孤一張在最後一排，
   右邊空兩格；215px 讓四張在桌機同一排排完，手機仍會自動疊成一欄。 */
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px 26px;
  background: linear-gradient(160deg, rgba(255,255,255,0.028), transparent);
  transition: border-color 0.2s, transform 0.2s;
  display: flex; flex-direction: column;
}
.card:hover { border-color: var(--line); transform: translateY(-2px); }
.card .tag { font-size: 11px; letter-spacing: 0.2em; color: var(--gold-400); margin-bottom: 12px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--ink-dim); flex: 1; }
.card .price { margin-top: 16px; font-size: 21px; color: var(--gold-300); font-weight: 600; }
.card .price small { font-size: 13px; color: var(--ink-faint); font-weight: 400; }
.card .more { margin-top: 18px; font-size: 14px; color: var(--gold-300); }

/* ---------- 信任區 ---------- */

.trust { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.trust-item { padding-top: 22px; border-top: 1px solid var(--line); }
.trust-item h3 { color: var(--gold-200); margin-bottom: 10px; font-size: 17px; }
.trust-item p { font-size: 15px; color: var(--ink-dim); }

.pledge {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  background: linear-gradient(135deg, rgba(212,175,55,0.09), transparent 70%);
}
.pledge h3 { font-size: clamp(20px, 2.6vw, 26px); color: var(--gold-200); margin-bottom: 12px; }

/* ---------- 佔位 ---------- */

.placeholder {
  border: 1px dashed rgba(212,175,55,0.34);
  border-radius: var(--radius);
  padding: 30px 26px;
  color: var(--ink-faint);
  font-size: 14px;
  background: rgba(212,175,55,0.03);
}
.placeholder strong { color: var(--gold-300); display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: 0.08em; }

/* ---------- FAQ ---------- */

.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 20px 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 16px;
  list-style: none; display: flex; justify-content: space-between; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-400); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 12px; color: var(--ink-dim); font-size: 15px; }

/* ---------- 店面 ---------- */

.store { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; }
.store dl { display: grid; grid-template-columns: 92px 1fr; gap: 14px 18px; font-size: 15px; }
.store dt { color: var(--gold-400); font-size: 13px; letter-spacing: 0.06em; }
.store dd { color: var(--ink-dim); }

/* ---------- 結尾 CTA ---------- */

.closing { text-align: center; }
.closing h2 { max-width: 20ch; margin: 0 auto 18px; }
.closing p { color: var(--ink-dim); margin-bottom: 32px; }

/* ---------- 頁尾 ---------- */

.site-foot { border-top: 1px solid var(--line-soft); padding: 52px 0 40px; background: var(--navy-800); }
.foot-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.site-foot h4 { font-size: 12px; letter-spacing: 0.2em; color: var(--gold-400); margin-bottom: 14px; font-weight: 600; }
.site-foot ul { list-style: none; font-size: 14px; }
.site-foot li { margin-bottom: 9px; color: var(--ink-dim); }
.site-foot a:hover { color: var(--gold-300); }
.foot-base {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-faint);
}

/* ═══════════════════════════════════════════════════════════
   視覺強化層（2026-08-14）
   研究依據：Linear（負字距、字重 510、近黑底）、Goldin（圖片驅動、
   AktivGrotesk 字重 600）、2026 趨勢（深色優先／bento／原生捲動動畫）。
   PSA 與 CGC 刻意不參考——同業走淺色機構風，與本站精品定位不符。

   核心診斷：問題不是「排版不夠花」，是缺少視覺元素。素材（照片）還沒到，
   因此改用四個不依賴照片的手法：大數字當主視覺、bento 不等寬格狀、
   卡牌比例容器、細緻光暈與邊框漸層。
   ═══════════════════════════════════════════════════════════ */

/* ---------- 標題：負字距 ＋ 較輕字重 ----------
   中文在大字級時字重 600 會顯得笨重，Linear 用 510 的道理同樣適用。 */
h1, h2 { letter-spacing: -0.02em; font-weight: 550; }
h1 { letter-spacing: -0.03em; }

/* ---------- 大數字當視覺元素 ----------
   價格本身就是最強的視覺。$200 / $1,000 用超大字級處理，
   不需要照片也能撐起版面。 */
/* ⚠️ 2026-08-14 修溢出：原本 clamp(44px, 8vw, 92px) 配上 190px 的格子，
   「NT$19,000」（9 字元）在 60px 字級需要約 348px，但格子扣掉內距只有 292px，
   於是溢出並疊到隔壁欄位上（使用者實際截圖抓到）。
   三道防線：字級改保守、容器查詢讓字級跟著格子寬度、min-width:0 允許收縮。
   貨幣符號一律放進 <small>，不進大數字。 */
.figure {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* 容器查詢：字級跟著格子實際寬度走，不跟著螢幕寬度。
   支援的瀏覽器會用這個，不支援的落回上面的 clamp。 */
@supports (container-type: inline-size) {
  .figure-cell { container-type: inline-size; }
  .figure { font-size: clamp(30px, 17cqi, 62px); }
}
.figure small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 10px;
}
.figure-row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 36px;
}
.figure-cell {
  padding: 30px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212,175,55,0.07), transparent 60%),
    rgba(255,255,255,0.015);
  transition: border-color 0.25s;
}
.figure-cell:hover { border-color: var(--line); }

/* ---------- Bento：刻意不等寬 ----------
   齊頭的三欄卡片是「文件感」的主因。讓區塊大小有落差，
   視線才有落點。 */
.bento {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(6, 1fr);
  /* ⚠️ 2026-08-14 修「右邊留一片空白」：7 張卡（2 張寬 + 5 張窄）在預設
     sparse 排法下，寬卡放不進剩下的 2 欄就整張換行，於上一列留下空洞，
     最後變成 4 列、右下角空一大塊。dense 讓後面的窄卡回填那些空洞，
     剛好排成 3 列滿版（4+2 / 4+2 / 2+2+2）。 */
  grid-auto-flow: dense;
}
.bento > * { grid-column: span 2; }
.bento > .b-wide { grid-column: span 4; }
.bento > .b-full { grid-column: span 6; }
.bento > .b-half { grid-column: span 3; }

/* ⚠️ 2026-08-14：原本這裡從 900px 起就直接掉成一欄（2 欄格線但每張都 span 2），
   在 900px 左右（筆電放大一級、平板橫放）整頁變成一長條，非常空。
   改成中間先過渡到真正的兩欄，600px 以下才收成一欄。 */
/* ⚠️ 2026-08-16：這個區塊一定要有 min-width 下界。
   原本寫成 max-width:900px（沒有下界），底下的 600px 區塊試圖用
   `.bento > *` 把所有子項改回 span 1——但 `.bento > :last-child` 的特異性
   （class + 偽類）比 `.bento > *`（class + 萬用）高，**沒有被蓋掉**。
   結果手機上最後一張卡仍要求跨 2 欄，硬把單欄撐成兩欄，
   第一欄窄到每行只剩兩三個字、$200 被裁掉。

   修法不是再補一條覆寫——列舉選擇器來覆寫一定會再漏掉下一個。
   改成讓平板區間有明確下界，手機區間根本不會被它影響。 */
@media (min-width: 601px) and (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > * { grid-column: span 1; }
  .bento > .b-wide, .bento > .b-full, .bento > .b-half { grid-column: span 2; }
  /* 目前 7 張卡（2 寬 + 5 窄）在兩欄下共佔 9 格 → 最後一張會落單、右邊空一格。
     讓落單那張補滿整排。⚠️ 前提是總格數為奇數；日後增減卡片要回頭檢查這行。 */
  .bento > :last-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  /* ⚠️ 這裡必須逐一列出 .b-wide／.b-full／.b-half，不能只寫 `.bento > *`。
     它們的基礎規則寫在所有 media query 之外（`.bento > .b-wide { span 4 }`），
     那條永遠生效，而 `.bento > .b-wide`（class+class）的特異性高於
     `.bento > *`（class+萬用），蓋不掉。

     2026-08-16 實測：只寫 `.bento > *` 時，手機上 grid 雖然是單欄，
     但 b-wide 仍要求 span 4，grid 自動長出 3 個隱式欄
     （量到 118.8px 92.9px 104.4px 123.5px），卡片寬 494px > 畫面 390px 直接溢出。 */
  .bento > *,
  .bento > .b-wide,
  .bento > .b-full,
  .bento > .b-half { grid-column: span 1; }
}

/* ---------- 卡牌比例容器 ----------
   2.5 : 3.5 是實體卡的比例。用它當圖片佔位與視覺元素，
   讓「這是賣卡的」在版面上就講出來。 */
.card-frame {
  aspect-ratio: 2.5 / 3.5;
  border-radius: 6px;
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(212,175,55,0.1), transparent 55%),
    linear-gradient(0deg, var(--navy-800), var(--navy-700));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.card-frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212,175,55,0.14);
  border-radius: 3px;
  pointer-events: none;
}
.card-frame span { font-size: 13px; color: var(--ink-faint); line-height: 1.7; }

/* ---------- 前後對比：滑桿式 ----------
   修復前後用並排而非上下，並加中線分隔，一眼看得出對照關係。 */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
/* ⚠️ 2026-08-14：figure 需要 min-width:0 ＋ overflow:hidden。
   原本只在父層 .compare 設 overflow:hidden，配上 grid 1fr 讓兩欄塌成 0 寬
   （實測 .compare 只有 2px＝gap 寬度，圖片 natural 0x0 但手動載入正常）。
   這是「圖片沒顯示」但實際上是版面問題的典型誤診。 */
.compare figure {
  margin: 0; position: relative;
  background: var(--navy-800);
  min-width: 0; overflow: hidden;
}
.compare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare figcaption {
  position: absolute; top: 10px; left: 10px;
  background: rgba(5,15,34,0.82);
  border: 1px solid var(--line);
  padding: 4px 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  border-radius: 3px;
  color: var(--gold-200);
}
.compare-meta {
  margin-top: 12px; font-size: 13px; color: var(--ink-faint);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.compare-meta b { color: var(--ink-dim); font-weight: 500; }

/* ---------- 區塊標號 ----------
   讓長頁面有進度感，也讓每個區塊有視覺錨點。 */
.sec-no {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gold-400);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* ---------- 分隔用細線光暈 ---------- */
.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  opacity: 0.35;
  margin: 0;
  border: 0;
}

/* ═══════════ 互動元件（2026-08-14）═══════════
   使用者反饋「很單調、沒有互動性」。加入可操作的元件，
   而非更多裝飾動畫——精品感來自回饋精準，不是動畫多。 */

/* ---------- 分頁式切換鈕 ---------- */
.tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 26px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.tab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--ink-dim);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.22s;
}
.tab:hover { border-color: var(--line); color: var(--gold-200); }
.tab[aria-selected="true"] {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--navy-900);
  font-weight: 600;
}

/* ---------- 報價器 ---------- */
.quote {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(212,175,55,0.09), transparent 60%),
    rgba(255,255,255,0.015);
  margin-top: 24px;
}
.quote-facts {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px; color: var(--ink-dim);
}
.quote-facts b { color: var(--gold-300); font-weight: 600; }

.opt {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px; font-size: 14px; color: var(--ink-dim);
  cursor: pointer; user-select: none;
}
.opt input { accent-color: var(--gold-400); width: 17px; height: 17px; cursor: pointer; }

/* ---------- 卡框：3D 傾斜與光澤 ---------- */
.card-frame {
  transition: transform 0.18s ease-out, border-color 0.25s;
  transform-style: preserve-3d;
  will-change: transform;
}
.card-frame::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(160px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(212,175,55,0.16), transparent 65%);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.card-frame:hover { border-color: var(--gold-400); }
.card-frame:hover::before { opacity: 1; }

/* ---------- 前後對比：刻意用並排，不做拖曳滑桿 ----------
   兩張圖拍攝角度與距離不同，疊在一起會對不齊，
   反而讓人懷疑「不是同一張卡」——正是 Google 評論質疑過的問題。 */
.compare img { transition: transform 0.4s; }
.compare figure:hover img { transform: scale(1.06); }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }

/* ---------- 原生捲動進場動畫 ----------
   CSS scroll-driven animation，不需要 JS。
   ⚠️ 必須包在 @supports 裡：不支援的瀏覽器如果套了 opacity:0
   會導致內容永遠看不見——這是「動畫失效變成內容消失」的典型陷阱。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    section > .wrap > * {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    /* 主視覺不做進場——首屏應該立刻可見 */
    .hero > .wrap > * { animation: none; }
  }
}

/* ---------- 手機 ---------- */

@media (max-width: 820px) {
  .nav {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--navy-800);
    border-bottom: 1px solid var(--line-soft);
    padding: 8px 24px 18px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
  .nav-toggle { display: block; }
  .site-head { position: relative; }
  .store dl { grid-template-columns: 78px 1fr; }
}

/* ---------- 送鑑成本試算（2026-08-14）----------
   刻意不做「輸入預測分數」——分數要看到卡才知道，那是 $200 預查的內容。
   這裡只算客人自己就能回答的部分：先付多少、佔卡價幾成。 */
.calc { margin-top: 30px; }
.calc-row {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.calc-field { display: grid; gap: 8px; }
.calc-field > span { font-size: 13px; color: var(--ink-dim); letter-spacing: 0.04em; }
.calc-input { display: flex; align-items: center; gap: 8px; }
.calc-input i { font-style: normal; color: var(--ink-faint); font-size: 14px; }
.calc-field input, .calc-field select {
  width: 100%; min-width: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  color: var(--ink); font: inherit; font-size: 16px;
  padding: 13px 14px;
  -webkit-appearance: none; appearance: none;
}
.calc-field select {
  /* 自繪箭頭：原生箭頭在深色底下幾乎看不見 */
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-300) 50%),
                    linear-gradient(135deg, var(--gold-300) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.calc-field input:focus, .calc-field select:focus {
  outline: none; border-color: var(--gold-400);
}
.calc-out { margin-top: 26px; }
.calc-head {
  display: grid; gap: 22px; align-items: center;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  padding: 24px 26px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), transparent);
}
.calc-facts { display: grid; gap: 10px; font-size: 14px; color: var(--ink-dim); }
.calc-facts b { color: var(--gold-300); font-size: 17px; }
.calc-band {
  margin-top: 14px; padding: 20px 24px;
  border-left: 3px solid var(--line-soft); border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255,255,255,0.02);
}
.calc-band h4 { font-size: 16px; }
.calc-band p { margin-top: 8px; color: var(--ink-dim); font-size: 14px; line-height: 1.85; }
.calc-ok   { border-left-color: #4ea87a; }
.calc-mid  { border-left-color: var(--gold-400); }
.calc-warn { border-left-color: #d98a3a; }
.calc-stop { border-left-color: #c4564e; }
.calc-na   { border-left-color: var(--line-soft); }
.calc-note { margin-top: 16px; font-size: 14px; color: var(--ink-dim); line-height: 1.9; }

@media (max-width: 720px) {
  .calc-head { grid-template-columns: 1fr; gap: 16px; }
}

/* 服務卡的一句話 slogan（2026-08-17，學自 Apple Store 的「名稱→slogan→說明」順序）。
   目的是讓掃視的人不必讀完整段描述就抓到差異。
   刻意比說明文字亮、比標題小——它是標題的延伸，不是另一段內容。 */
.card-slogan {
  color: var(--gold-200);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  flex: 0 0 auto;          /* .card 是 flex column，這行避免 slogan 被拉開 */
}

/* ---------- 頂部時效公告（2026-08-17）----------
   由 app.js 動態插入到 body 最前面，所以它在 .site-head 之上。
   .site-head 是 sticky，公告不 sticky——捲下去就消失，不佔永久空間。 */
.notice {
  background: linear-gradient(90deg, rgba(212,175,55,0.16), rgba(212,175,55,0.06));
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.notice .wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 24px;
}
.notice p { flex: 1; min-width: 0; color: var(--ink); }
.notice a { color: var(--gold-300); white-space: nowrap; }
.notice a:hover { text-decoration: underline; }
.notice-x {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 15px; line-height: 1;
  padding: 4px 6px;
}
.notice-x:hover { color: var(--ink); }

@media (max-width: 600px) {
  .notice { font-size: 13px; }
  .notice .wrap { padding: 10px 16px; gap: 10px; }
  /* 手機上連結另起一行，不然三個元素擠在一起會把文字壓成一個字一行 */
  .notice p { display: block; }
  .notice a { display: inline-block; margin-top: 4px; }
}

/* 標題的補充句（2026-08-17，學自 Apple Store 的「斷言. 說明.」同行雙色）。
   目的是提高資訊密度——原本要「小標＋標題＋分隔線＋說明段落」四層、佔五行高度，
   現在標題自己就把「這一節在講什麼」說完。

   刻意用 inline 而非 block：它要跟標題同一行、一起換行，是標題的延續不是另一段。
   字級用 em 跟著標題縮放，手機上才不會變成標題很大、補充句很小的斷裂感。 */
.h2-sub {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: 0;
}

/* ---------- 註腳（2026-08-17）----------
   主文掛一個小上標，條件寫在頁尾。清單與編號由 app.js 自動生成。 */
/* 註腳標記（2026-08-17 改）
   ──────────────────────────────────────────────────────────
   原本是純上標數字，緊貼中文時會被讀成數學次方或錯字——
   實機上「不用來台中³」「全額退款²」看起來就像打錯字。
   （Apple 官網用 ∆ § ± ◊ 這類符號而不是數字，正是為了避開這個問題；
     我當初的分析文件寫了，實作時卻還是用了數字。）

   改成有描邊的小圓徽章：一眼看得出是「可以點的註解」，不是內文的一部分。
   保留數字而不用符號，是因為數字對應頁尾清單時比 ∆ § 好找。 */
.fn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  margin: 0 1px 0 4px;
  padding: 0 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-300);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  vertical-align: 2px;      /* 略高於基線，但不像上標那樣飛起來 */
  text-decoration: none;
}
.fn:hover { border-color: var(--gold-400); background: rgba(212, 175, 55, 0.16); }

.footnotes {
  border-top: 1px solid var(--line-soft);
  padding: clamp(36px, 5vw, 56px) 0;
}
.footnotes ol {
  margin-top: 16px;
  padding-left: 22px;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.95;
}
.footnotes li { margin-bottom: 8px; }
.footnotes li:target { color: var(--ink); }   /* 從內文跳過來時高亮 */
.footnotes a { color: var(--gold-400); margin-left: 4px; }

/* ══════════════════════════════════════════════════════════
   橫向捲動卡片列（2026-08-17）
   ──────────────────────────────────────────────────────────
   為什麼：首頁在手機上高 16700px＝約 19 個螢幕，而且只能往下滑。
   負責人的原話是「沒有辦法左右滑動」「有些東西邏輯是可以左右操控的」。

   Apple 官網在 375px 下產品分類列仍是橫捲，沒有攤成十列長清單，
   而且整頁 scrollWidth === innerWidth——橫捲發生在**容器內部**，不是頁面。
   我們的渲染檢查器會跳過 overflow-x:auto 容器，正是為這種情況。

   ⚠️ 卡片寬度刻意用 78%，讓下一張露出一小塊邊緣。
   這是視覺暗示「可以滑」，比放箭頭直覺——不要改成 100%。
   ══════════════════════════════════════════════════════════ */
.hscroll-hint {
  /* ⚠️ 這條必須留在下面那個 @media 的**前面**。
     特異性相同時後寫的贏——放在 media query 之後會把 display:flex 蓋掉，
     提示就永遠不顯示（2026-08-17 實際踩過，量測才發現）。 */
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.hscroll-hint svg { width: 26px; height: 10px; stroke: var(--gold-400); }

@media (max-width: 700px) {
  .hscroll.hscroll {
    /* ⚠️ 用 flex 而不是 grid（2026-08-17 改）。
       第一版寫 grid-auto-flow:column + grid-auto-columns:78%，
       桌機 Chrome 量得到 scrollWidth > clientWidth（看起來沒問題），
       但實機滑不動——iOS Safari 對「grid 容器 + overflow-x」的支援
       遠不如 flex 可靠。flex + flex-basis 是橫捲最保險的寫法。

       display 要蓋掉各容器自己的設定（.grid／.trust／.bento 都是 grid）；
       同特異性時後寫的贏，而這段在檔案最後——所以不必加 !important。 */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* ⚠️ 選擇器故意寫成 .hscroll.hscroll——把特異性從 (0,1,0) 提到 (0,2,0)，
       這樣就**不依賴它在檔案裡的位置**。

       原因：`.plan-row { display: grid }` 後來加在檔案更下面，同特異性後寫的贏，
       於是把這裡的 display:flex 蓋掉，方案卡那兩區在手機上完全滑不動——
       而且畫面看起來正常，只是手指滑沒反應。
       同一種順序錯誤今天犯了第二次（第一次是滑動提示的 display:none），
       所以改成從根本上不受順序影響，而不是再搬一次位置。 */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    /* 負 margin 讓第一張能貼齊 .wrap 的左邊界，最後一張右側仍留白 */
    margin-inline: -24px;
    padding-inline: 24px;
    scrollbar-width: none;
  }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll.hscroll > * {
    scroll-snap-align: start;
    flex: 0 0 78%;      /* 78% 讓下一張露出邊緣，當作「可以滑」的暗示 */
    min-width: 0;       /* 沒有這行，長字串會把 flex 項目撐開、破壞 78% */
  }

  /* .trust 的項目只有一條上框線、沒有自身左右內距，
     所以「出血到螢幕邊緣」的寫法會讓第一段文字直接貼齊螢幕最左（實測 0px）。
     其他容器裡的 .card 自帶 padding，文字落在 27px，看起來正常。
     這一個容器改成不出血，讓文字對齊正文左界。 */
  .trust.hscroll.hscroll {
    margin-inline: 0;
    padding-inline: 0;
  }

  /* 橫捲時 .trust-item 要看起來像一張卡。
     它平常只有一條上框線——在直向堆疊時很好看，但橫捲時
     露出邊緣的下一張會變成「一段沒有邊界的破碎文字」，
     實機截圖上就是左邊那塊孤立的「錢全部／款裡」。
     加上邊框與底色之後，露出的半張才讀得出是另一張卡。 */
  .trust.hscroll.hscroll > * {
    padding: 20px 18px;
    border: 1px solid var(--line-soft);
    border-top-color: var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.015);
  }

  /* 改用 flex 後 grid-column 已不生效，但把它歸零可避免日後改回 grid 時又踩一次 */
  .bento.hscroll.hscroll > *,
  .bento.hscroll.hscroll > .b-wide,
  .bento.hscroll.hscroll > .b-full,
  .bento.hscroll.hscroll > .b-half { grid-column: auto; }

  /* 滑動提示：只在手機顯示，因為桌機是一般排列不需要滑 */
  .hscroll-hint { display: flex; }
}

/* ── 流程帶：編號圓圈 ＋ 連接線，讓流程看起來像流程 ── */
.flow { counter-reset: flow; }
.flow > * { position: relative; counter-increment: flow; }
.flow > *::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  top: -13px; left: 20px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy-900);
  border: 1px solid var(--gold-400);
  color: var(--gold-300);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  z-index: 2;
}
/* 連接線：桌機水平串接，手機不畫（橫捲時線會斷得很醜）*/
@media (min-width: 701px) {
  .flow > *:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2px; left: calc(100% + 1px);
    width: 18px; height: 1px;
    background: var(--line);
  }
}
.flow > * { padding-top: 30px; }

/* ── 服務圖示 ── */
.svc-ico {
  width: 34px; height: 34px;
  stroke: var(--gold-300); stroke-width: 1.4;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 14px;
}

/* ── 價格橫條比較：把文字價目變成看得出差距的圖 ── */
.barcmp { margin-top: 28px; display: grid; gap: 14px; }
.barcmp-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; }
.barcmp-row b { font-size: 13px; color: var(--ink-dim); font-weight: 500; }
.barcmp-track { height: 26px; background: rgba(255,255,255,0.04); border-radius: 2px; overflow: hidden; }
.barcmp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy-600), var(--gold-400));
  border-right: 1px solid var(--gold-300);
}
.barcmp-row s { font-size: 14px; color: var(--gold-200); font-variant-numeric: tabular-nums; text-decoration: none; }
.barcmp-note { margin-top: 12px; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 600px) {
  .barcmp-row { grid-template-columns: 66px 1fr auto; gap: 8px; }
  .barcmp-row b { font-size: 12px; }
  .barcmp-row s { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════
   方案比較卡（2026-08-17）
   ──────────────────────────────────────────────────────────
   換掉原本的做法：每個方案用 32–52px 的巨大字級各佔一整列，
   PSA 三個主方案加四個額外服務就把區塊撐到 1373px（手機要滑快兩個螢幕）。

   更重要的是「看不懂」——客人真正在比的是「多少錢、要等多久」，
   但工期只是一串文字（60 工作日／40 工作日／15 工作日），
   要自己心算差幾倍。改成長度條之後長短一眼就分得出來。

   工期條的基準是**所有家所有方案裡最長的那個**，不是各家自己最長，
   否則跨家比較會失真（CGC 自己最長 ≠ CGC 比 PSA 慢）。
   ══════════════════════════════════════════════════════════ */
.plan-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-card h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.plan-card .plan-price {
  font-size: clamp(24px, 4.4vw, 32px);
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.plan-card .plan-price small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
/* 工期條 */
.dur { display: grid; gap: 5px; margin-top: auto; }
.dur-track { height: 5px; background: rgba(255, 255, 255, 0.07); border-radius: 3px; }
.dur-fill { height: 100%; border-radius: 3px; background: var(--gold-400); }
.dur-fill.slow { background: var(--navy-600); }
.dur b { font-size: 12px; font-weight: 500; color: var(--ink-dim); letter-spacing: 0.04em; }
.dur .none { font-size: 12px; color: var(--ink-faint); }
.plan-ins { font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.02em; }

.plan-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ══════════════════════════════════════════════════════════
   送鑑成本分級軸（2026-08-17）
   ──────────────────────────────────────────────────────────
   「佔卡價 29.0%」是整個試算器的結論，但它原本只是一行文字，
   客人得自己記住 10%／30%／100% 三個門檻在哪，才知道 29% 算好還是不好。

   軸是 0–100% **線性**的。10% 那一段因此只佔十分之一寬、看起來很窄——
   這是誠實的代價：把它畫寬一點會讓人以為門檻比實際寬鬆。
   ══════════════════════════════════════════════════════════ */
.gauge { margin-top: 20px; }
.gauge-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.gauge-label span { font-size: 12px; letter-spacing: 0.1em; color: var(--ink-faint); }
.gauge-label b { font-size: 19px; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.gauge-track { position: relative; display: flex; height: 12px; border-radius: 2px; overflow: hidden; }
.gauge-seg { height: 100%; }
.gauge-seg.s-ok { background: rgba(120, 190, 140, 0.5); }
.gauge-seg.s-mid { background: rgba(212, 175, 55, 0.45); }
.gauge-seg.s-warn { background: rgba(205, 130, 60, 0.5); }
.gauge-mark {
  position: absolute; top: -4px; bottom: -4px; width: 3px;
  background: var(--ink); border-radius: 2px;
  box-shadow: 0 0 0 2px var(--navy-900);
}
.gauge-ticks { display: flex; margin-top: 7px; font-size: 11px; color: var(--ink-faint); }
.gauge-ticks i { font-style: normal; text-align: right; letter-spacing: 0.04em; }
.calc-more { margin-top: 16px; }
.calc-more summary {
  cursor: pointer; font-size: 13px; color: var(--ink-dim);
  letter-spacing: 0.04em; padding: 6px 0;
}
.calc-more summary::marker { color: var(--gold-400); }
.calc-more p { margin-top: 10px; font-size: 13px; line-height: 1.9; color: var(--ink-faint); }