/* ==========================================================================
   index.html — 首頁專屬樣式（手機版體驗與視覺動態深度優化）
   只放這頁專屬樣式；共用 token／元件請見 css/style.css，不在此重複定義、不改動該檔。
   ========================================================================== */

/* --------------------------------------------------------------------------
   全站背景層次感 — 讓淺色區塊之間用 --paper / --canvas 交替，滾動時更有節奏。
   hero(暗) → what-we-do(paper,預設) → cta-band(canvas,既有) → case(暗,既有)
   → 實績數字(canvas,新增) → 工具資源(paper,預設) — 深/淺交替不再連續同色。
   -------------------------------------------------------------------------- */
.section-kpi {
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   Hero 輪播 — 手機版文字級距、留白節奏、控制列觸控區

   註：.hero 是 <section>，會繼承 style.css 的通用 `section{padding:96px 0}`，
   但 .hero-slide 本身已經有自己的 `padding:130px var(--edge) 120px`，兩層疊加
   造成 hero 上下各多出約 96px 的純色留白（在手機上等於多滑一整屏才看得到
   內容）。.case-section 有明確覆寫回 96px 0 避免這個問題，.hero 沒有覆寫，
   屬於既有 style.css 的疏漏。這裡不改 style.css，只在首頁範圍內覆寫回 0。
   -------------------------------------------------------------------------- */
.hero { padding: 0; }
.hero .eyebrow { transition: opacity .3s var(--ease); }

@media (max-width: 640px) {
  .hero-slide { padding: 108px var(--edge) 100px; }
  .hero .eyebrow { letter-spacing: 1.6px; }
  .hero h1 {
    font-size: clamp(2.35rem, 9.5vw, 2.9rem);
    line-height: 1.18;
    margin: 16px 0 22px;
  }
  .hero-sub { letter-spacing: 3px; margin-bottom: 26px; }
  .btn-hero {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 15px 24px;
    font-size: 0.9375rem;
  }

  /* 箭頭觸控區放大到建議的 44px 最小點擊尺寸（同時套用到下方精選案例的箭頭，共用 .hero-arrow） */
  .hero-arrow { width: 44px; height: 44px; font-size: 1.25rem; }
  .hero-controls { gap: 14px; bottom: 22px; }
  .hero-dots { gap: 14px; }
}

/* 輪播滑動手感 — 快速滑動時逐張定格，不因手勢過快而跳過整張 */
.hero-slide, .case-card { scroll-snap-stop: always; }

/* --------------------------------------------------------------------------
   我們做什麼 — 服務清單手機版：加大「了解更多」觸控區、交替背景增加層次
   （不加圓角／陰影，只靠 --canvas 與 --hairline 做分層，符合品牌規範）
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .service-row {
    padding-left: var(--edge);
    padding-right: var(--edge);
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
  }
  .service-row:nth-child(even) { background: var(--canvas); }
  .service-row .go {
    display: inline-block;
    padding: 13px 2px;
    margin: 2px -2px -11px;
  }
}

/* --------------------------------------------------------------------------
   精選案例輪播 — 手機版卡片寬度採 vw 級距，維持「露出下一張」的滑動提示
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .case-card { flex-basis: clamp(220px, 74vw, 264px); }
  .case-viewport { scroll-padding-left: var(--edge); }
}

/* --------------------------------------------------------------------------
   實績數字 — 手機版加大字級，發揮「大數字」的科技感視覺重量
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .kpi-grid { gap: 34px 24px; }
  .kpi .num { font-size: clamp(3rem, 15vw, 3.75rem); }
  .kpi .unit { font-size: 1rem; }
  .kpi h3 { font-size: 1.0625rem; }
  .note { margin-top: 22px; }
}

/* --------------------------------------------------------------------------
   雙路徑 CTA — 手機版按鈕改滿版寬、垂直堆疊，間距更清楚好按
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .cta-band { padding: 52px 0; }
  .cta-band h2 { font-size: 1.375rem; }
  .cta-actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .cta-actions .btn { text-align: center; min-height: 48px; }
}

/* --------------------------------------------------------------------------
   行動裝置底部導覽列淨空 — 檢查後 footer 內容在 body 既有的 64px 底部留白
   內已完整顯示、無被遮擋，這裡不需額外補 padding。保留此段以便未來若
   footer 內容加長時，第一時間知道加大留白的地方在這裡。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive — 平板／小螢幕整體留白微調
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  section { padding: 64px 0; }
  .case-section { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }
}
@media (max-width: 640px) {
  section { padding: 52px 0; }
  .case-section { padding: 52px 0; }
}