/* ============================================================================
   Cats War 官網首頁 — site.css
   ----------------------------------------------------------------------------
   Token 與 Ardot 設計稿「Cats War 官網首頁」一一對應（見 :root 註解）。
   原則：零外部請求（字型自架）、桌面最大內容寬 1248（設計稿 1440 − 左右各 96）。
   ========================================================================== */

/* ------------------------------- 自架字型 ------------------------------- */
/* Baloo 2 / Nunito 是**變數字型**：Google 對同一家族的每個 weight 都回同一個檔案，
   所以只留一份、用 font-weight 區間餵給瀏覽器。（下載時已用 md5 驗證過重複） */
@font-face {
  font-family: 'Baloo 2';
  src: url('fonts/baloo2.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------- 設計 token ------------------------------- */
:root {
  /* 天空（Hero 漸層） */
  --sky-top:  #9FD5F0;
  --sky-mid:  #CFEAF8;
  --sky-low:  #E9F5FC;
  /* 紙底 */
  --paper:      #FDF8EC;
  --paper-grass:#F4F9EA;
  --cream:      #FFFBF2;
  --line:       #E4D8BC;
  --line-soft:  #E0D4B8;
  --line-strong:#DCCFB0;
  /* 描邊與文字（暖棕，不用純黑） */
  --edge:     #6B4A2F;
  --ink:      #3E2A1A;
  --ink-soft: #6B5240;
  --ink-mute: #9C8368;
  --ink-faint:#8A7355;
  /* 草綠 */
  --grass-light: #C3E0A0;
  --grass:       #8CBF68;
  --grass-deep:  #5E9448;
  /* 強調色 */
  --orange:      #F59A3C;
  --orange-deep: #D97B22;
  --blue:        #6BBEE8;
  --blue-deep:   #4695C4;
  --pink:        #F5A3C7;
  --pink-deep:   #C4577F;
  --highlight:   #FFF4E2;
  /* 森林（頁尾） */
  --forest-light: #7FA862;
  --forest-mid:   #557C43;
  --forest:       #3C5A33;
  --forest-deep:  #2A4024;
  /* 陰影一律帶暖棕，不用灰黑 —— 這是繪本感的關鍵 */
  --shadow-warm:  0 5px 12px rgba(107, 74, 47, .30);
  --shadow-card:  0 18px 36px -6px rgba(107, 74, 47, .22);
  /* 字型 */
  --font-display: 'Baloo 2', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei',
                  'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei',
                  'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  /* 版心 */
  --gutter: clamp(20px, 6.6vw, 96px);
  --content: 1248px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* 行動裝置安全區（瀏海／挖孔／home indicator）。
     只有在 <meta viewport viewport-fit=cover> 下才會給非 0 值；桌機一律 0。 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* 吸頂頁首高度。CSS 與 site.js 共用這一個值 —— 要調高度只改這裡。 */
  --header-h: 96px;
  /* 錨點捲動要讓開的距離（＝吸頂頁首 + 狀態列） */
  --anchor-offset: calc(var(--header-h) + var(--safe-t));
}

/* ------------------------------- 基礎 ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 行動瀏覽器下拉回彈時露出紙色，不是刺眼的白 */
  background: var(--paper);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  /* 連續縮放：390px 手機 16px → 620px 以上 17px，不在斷點跳級 */
  font-size: clamp(16px, 0.45vw + 14.2px, 17px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* CJK 模式下把正文拉回系統字型該有的行高與字距（Nunito 沒有漢字） */
:lang(zh-Hant) body, :lang(zh-Hans) body { line-height: 1.8; }

img, svg { max-width: 100%; }
img { height: auto; }

a { color: inherit; }

/* 觸控裝置：關掉預設的灰色點擊閃光，改用下面自己的 :active 回饋；
   manipulation 去掉「雙擊縮放」的 300ms 等待。 */
a, button, summary, label { touch-action: manipulation; }
a, button, summary { -webkit-tap-highlight-color: transparent; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 8px;
}

/* 錨點目標要讓開吸頂頁首（#how #features #coins #faq #top #main）。
   ⚠️ 只在這邊做，不要再對 html 下 scroll-padding-top —— 兩者會**相加**，
      錨點會多讓開一整個頁首高度（實測 84px 變 168px）。 */
:where(section, header, main, footer, div)[id] { scroll-margin-top: var(--anchor-offset); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cream); color: var(--edge); border: 3px solid var(--edge);
  border-radius: 999px; padding: 10px 22px; font-weight: 700; text-decoration: none;
}
.skip:focus { left: max(var(--gutter), var(--safe-l)); top: calc(12px + var(--safe-t)); }

.wrap {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  /* 瀏海／挖孔落在左右時往內讓開（橫向手機才有值，桌機＝0） */
  padding-left: max(var(--gutter), var(--safe-l));
  padding-right: max(var(--gutter), var(--safe-r));
}

/* ------------------------------- 按鈕 ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; line-height: 1.15;
  border: 3px solid var(--edge); border-radius: 999px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  padding: 15px 30px; font-size: clamp(16.5px, 0.5vw + 15px, 18px);
  min-height: 48px;                       /* 觸控目標下限（Apple HIG 44 / Material 48） */
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.btn--solid { background: var(--orange); color: #fff; box-shadow: var(--shadow-warm); }
.btn--solid:hover { background: var(--orange-deep); }
.btn--ghost { background: var(--cream); color: var(--edge); }
.btn--ghost:hover { background: #FFF6E2; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: 10px 20px; font-size: 15px; border-width: 3px; }
/* 大顆 CTA（首頁 hero 與技能頁 hero 共用）。2026-10-16 補上：
   兩邊的 HTML 都早就掛了 btn--lg，但 site.css 一直沒有對應規則 ⇒ 英雄區
   按鈕實際渲染成預設大小。這是設計系統的缺口，不是頁面 bug。 */
.btn--lg { padding: 18px 38px; font-size: clamp(17px, 0.5vw + 15.4px, 19px); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ------------------------------- 頁首 ------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 3px solid #EADCC0;
  /* 全螢幕／加到主畫面時讓開狀態列；一般瀏覽器分頁為 0 */
  padding-top: var(--safe-t);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h); padding-block: 12px;
}

/* 頁首品牌區。2026-09-26 之前這裡有兩樣東西：`.brand__mark`（SVG 貓臉，46px）與
   `.brand__word`（文字「CATS WAR」）。玩家先後要求「文字換成 logo 圖」與
   「拿掉貓臉 —— 有 IP logo 就夠了」⇒ 現在**只剩 `.brand__logo` 一張圖**，
   那兩條規則已一併移除（要回復請看 git 這個日期之前的 index.html / site.css）。
   ⚠️ 這三條（含下面 media 裡的高度）是**唯一**控制頁首品牌大小的地方。 */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
/* 頁首品牌 logo（去背 webp，內容比例 418:96）。
   ⚠️ 高度由這裡決定；HTML 上的 width/height 只是**比例**（防載入時版面跳動）。
   ⚠️ `width: auto` 一定要留著：只寫 height 時，部分瀏覽器會沿用 HTML 的 width 屬性 ⇒ 圖被拉扁。 */
.brand__logo { height: 36px; width: auto; flex: none; display: block; }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a {
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--grass); }

.site-header__actions { display: flex; align-items: center; gap: 14px; }

/* 漢堡（僅小螢幕） */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 9px;
  background: var(--cream); border: 3px solid var(--edge); border-radius: 14px; cursor: pointer;
}
.hamburger span { display: block; height: 3px; border-radius: 2px; background: var(--edge); }

/* ---------------------------- 語言切換器 ---------------------------- */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream); color: var(--edge);
  border: 3px solid var(--edge); border-radius: 999px;
  padding: 9px 16px; font-family: var(--font-body); font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.lang__btn:hover { background: #FFF6E2; }
.icon { display: block; flex: none; }
.icon--globe { width: 18px; height: 18px; }
.icon--caret { width: 11px; height: 8px; transition: transform .18s var(--ease); }
.lang.is-open .icon--caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  margin: 0; padding: 6px; list-style: none; min-width: 176px;
  background: var(--cream); border: 3px solid var(--edge); border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.lang__menu[hidden] { display: none; }
.lang__menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 12px; cursor: pointer;
  padding: 10px 14px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink);
}
.lang__menu button:hover { background: var(--paper-grass); }
.lang__menu li[aria-selected="true"] button { background: var(--highlight); color: var(--orange-deep); font-weight: 800; }

/* ------------------------------- Hero ------------------------------- */
.hero {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%);
}
.hero__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; opacity: .92; }
.cloud--a { top: 2%; left: 5%;  width: 19.4%; max-width: 280px; }
.cloud--b { top: 6%; right: 4%; width: 15.3%; max-width: 220px; opacity: .72; }
.sparkle { position: absolute; }
.sparkle--a { top: 14%; left: 30%;  width: 22px; }
.sparkle--b { top: 46%; right: 12%; width: 26px; }

.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px; align-items: center;
  padding-block: clamp(64px, 7.5vw, 104px) 48px;
}
.hero__copy > * + * { margin-top: 20px; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  background: var(--cream); border: 2px solid var(--edge); border-radius: 999px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--edge);
}
.icon--paw { width: 16px; height: 16px; }

.hero__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 3.5vw, 47px); line-height: 1.12; letter-spacing: -.005em;
  color: var(--ink);
}
.hero__title span { display: block; }

.hero__sub { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: 17.5px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }

.hero__trust {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13.5px; color: var(--ink-faint);
}
.icon--shield { width: 18px; height: 18px; flex: none; }

.hero__art {
  margin: 0; padding: 14px; background: var(--cream);
  border: 3px solid var(--edge); border-radius: 30px;
  transform: rotate(1.5deg); box-shadow: var(--shadow-card);
}
.hero__art img { display: block; width: 100%; border-radius: 20px; }

/* 手繪草丘過渡帶（preserveAspectRatio=none ⇒ 任何寬度都貼齊） */
.hills { display: block; width: 100%; height: clamp(80px, 10.4vw, 150px); }

/* ------------------------------ 章節共用 ------------------------------ */
.section { padding-block: clamp(64px, 8vw, 96px); }
.section--grass { background: var(--paper-grass); }
.section--paper { background: var(--paper); }
.section--flush { padding-top: 0; }

.sec-head { max-width: 820px; margin-inline: auto; text-align: center; }
.sec-head--tight { margin-top: clamp(64px, 8vw, 96px); }

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grass-deep);
}
.eyebrow--blue  { color: var(--blue-deep); }
.eyebrow--amber { color: var(--orange-deep); }
.eyebrow--pink  { color: var(--pink-deep); }

.sec-head__title {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.16; color: var(--ink);
}
.sec-head__desc { margin: 0; color: var(--ink-soft); font-size: 17px; }

/* ------------------------------- 三步驟 ------------------------------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none;
}
.step {
  background: var(--cream); border: 3px solid var(--line-strong);
  border-radius: 28px; padding: 30px;
}
.step__num {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 16px;
  border: 3px solid var(--edge); border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #fff;
}
.step__num--1 { background: var(--orange); }
.step__num--2 { background: var(--blue); }
.step__num--3 { background: var(--pink); }
.step__title {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.3; color: var(--ink);
}
.step__desc { margin: 0; font-size: 15.5px; color: var(--ink-soft); }

/* ------------------------------- 特色三塊 ------------------------------- */
.feat {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 552px);
  gap: 56px; align-items: center;
}
.feat + .feat { margin-top: clamp(56px, 7vw, 72px); }
.feat--flip .feat__copy  { order: 2; }
.feat--flip .feat__media { order: 1; }
.feat__title {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.3vw, 30px); line-height: 1.2; color: var(--ink);
}
.feat__desc { margin: 0; color: var(--ink-soft); font-size: 16.5px; }
.feat__media {
  margin: 0; padding: 12px; background: var(--cream);
  border: 3px solid var(--line-strong); border-radius: 24px;
}
.feat__media img { display: block; width: 100%; border-radius: 16px; }

/* ------------------------------- 喵幣卡 ------------------------------- */
.coins {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; list-style: none;
}
.coin {
  background: var(--cream); border: 2px solid var(--line-soft);
  border-radius: 24px; padding: 26px;
}
.coin--feature { background: var(--highlight); border: 3px solid var(--orange); }
.coin__icon { display: block; width: 32px; height: 32px; margin-bottom: 12px; }
.coin__title {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: 700;
  font-size: 19px; line-height: 1.3; color: var(--ink);
}
.coin__desc { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }

/* -------------------------------- FAQ -------------------------------- */
:root {
  --m-plus:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 4v12M4 10h12' stroke='black' stroke-width='2.6' stroke-linecap='round'/></svg>");
  --m-minus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4 10h12' stroke='black' stroke-width='2.6' stroke-linecap='round'/></svg>");
}
.faq { display: grid; gap: 18px; }
.faq__item {
  background: var(--cream); border: 2px solid var(--line); border-radius: 20px;
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 28px; cursor: pointer; list-style: none;
  font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; width: 20px; height: 20px; flex: none;
  background-color: var(--ink-mute);
  -webkit-mask-image: var(--m-plus); mask-image: var(--m-plus);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color .18s var(--ease);
}
.faq__item[open] summary::after {
  background-color: var(--orange-deep);
  -webkit-mask-image: var(--m-minus); mask-image: var(--m-minus);
}
.faq__item summary:hover::after { background-color: var(--orange-deep); }
.faq__item > p {
  margin: 0; padding: 0 28px 24px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.78;
}

/* ------------------------------- 頁尾 ------------------------------- */
/* 山丘 SVG 要壓在「紙 → 森林」之間：footer 本身透明（露出 body 的紙色），
   森林漸層放在 __body 上，山丘才不會被自己的底色蓋掉。 */
.site-footer { position: relative; }
.hills--footer { margin-bottom: -1px; }
.site-footer__body {
  background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  padding-block: clamp(56px, 6vw, 80px) 40px;
  color: #D6E6C6;
}
.site-footer__top {
  display: flex; justify-content: space-between; gap: 64px; flex-wrap: wrap;
}
.foot-brand { max-width: 400px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* 頁尾品牌區：與頁首同步 —— `.foot-brand__mark`（綠描邊的 SVG 貓臉）與 `.foot-brand__word`
   都在 2026-09-26 移除，只剩 `.foot-brand__logo`（舊內容見 git 該日期之前的檔案）。 */
.foot-brand__row { display: flex; align-items: center; gap: 12px; }
/* 頁尾品牌 logo —— 與頁首同一張圖。footer 底色是深綠（--forest）⇒ 白填充的 logo 在這裡最清楚，
   所以可以比頁首大一級。 */
.foot-brand__logo { height: 40px; width: auto; flex: none; display: block; }
.foot-brand__tagline { margin: 0; font-size: 15px; line-height: 1.78; color: #C3D9B0; }

.foot-col { display: flex; flex-direction: column; gap: 14px; min-width: 186px; }
.foot-col__head {
  margin: 0 0 2px; font-family: var(--font-display); font-weight: 700;
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: #A8C68F;
}
.foot-col a, .foot-col > span { font-size: 15px; color: #D6E6C6; text-decoration: none; }
.foot-col a:hover { color: #fff; text-decoration: underline; }

.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(40px, 5vw, 52px); padding-top: 22px;
  border-top: 1px solid var(--forest-mid);
}
.site-footer__bottom p { margin: 0; font-size: 13px; color: #9FBB88; }

.paw-trail { display: block; width: 100%; height: auto; margin-top: 34px; }

/* ══════════════════════════════════════════════════════════════════════════
   行動瀏覽器自動適配層
   --------------------------------------------------------------------------
   刻意分三個**互相獨立**的維度判斷，而不是只看「寬度斷點」：
     ① 寬度    → 版面重排（單欄／雙欄／格線欄數）
     ② 指標型態 → 觸控還是滑鼠（hover 會不會黏住、目標夠不夠大）
     ③ 方向＋高度 → 橫向手機是「矮視窗」，跟平板不是同一種問題
   斷點與 --header-h 集中在這一段；JS 只讀 `(min-width: 901px)` 判斷導覽型態
   （見 site.js 的 NAV_DESKTOP_MQ），改這裡就要同步改那裡。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 寬度：版面重排 ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .coins { grid-template-columns: repeat(2, 1fr); }
  .feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 1000px) {
  /* 主視覺改成上下堆疊；傾斜的畫框在窄螢幕容易撞到邊，直接擺正 */
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero__art { transform: none; max-width: 640px; margin-inline: auto; }
  .hero__sub { max-width: none; }
  .feat, .feat--flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feat--flip .feat__copy, .feat--flip .feat__media { order: 0; }
  .feat__copy { order: 0; }
}

@media (max-width: 900px) {
  .hamburger { display: flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 3px solid #EADCC0;
    padding: 8px max(var(--gutter), var(--safe-r)) 20px max(var(--gutter), var(--safe-l));
    display: none;
  }
  .site-nav.is-open { display: flex; box-shadow: 0 18px 30px -12px rgba(107, 74, 47, .28); }
  .site-nav a { padding: 14px 2px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
  .brand__logo { height: 31px; }
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .coins { grid-template-columns: 1fr; }
  .step { padding: 24px; }
  /* 窄螢幕頁首要塞下「品牌 ＋ 漢堡 ＋ 語言」三件東西 ⇒ 上方 CTA 讓位（footer 還有一顆） */
  .site-header__actions .btn--sm { display: none; }
  :root { --header-h: 84px; }
  .sec-head__title { font-size: clamp(25px, 7vw, 32px); }
  /* 22px ⇒ logo 寬 96px。原本這一格還要跟一顆 34px 的 SVG 貓臉（＋收窄 `.brand` 的 gap 12→8）
     一起塞進 390px，貓臉移除後那些讓位的規則都不需要了 ⇒ 已一併刪掉。
     ⚠️ 高度維持 22px：玩家只要求「移除貓臉」，沒有要改 logo 大小 —— 空間變鬆不是改大小的理由。 */
  .brand__logo { height: 22px; }
  .site-header__inner { gap: 14px; }
  .lang__btn { padding: 9px 12px; font-size: 14px; gap: 6px; }
  .hamburger { width: 40px; height: 40px; }
}

/* ── ② 連續縮放：用 clamp 取代「斷點前後跳一級」 ─────────────────────
   同一組規則在所有寬度都成立，字級隨視窗連續變化，不會在 900px 突然變大。 */
.hero__sub      { font-size: clamp(16.5px, 0.8vw + 13.4px, 17.5px); }
.sec-head__desc { font-size: clamp(16px,   0.6vw + 13.7px, 17px); }
.step__title    { font-size: clamp(19px,   1.4vw + 13.5px, 22px); }
.step__desc     { font-size: clamp(14.5px, 0.6vw + 12.2px, 15.5px); }
.feat__desc     { font-size: clamp(15.5px, 0.7vw + 12.5px, 16.5px); }
.coin__title    { font-size: clamp(17px,   1.0vw + 12.6px, 19px); }
.coin__desc     { font-size: clamp(13.5px, 0.6vw + 11.2px, 14.5px); }
.faq__item summary { font-size: clamp(16.5px, 0.9vw + 12.9px, 18px); }
.faq__item > p  { font-size: clamp(14.5px, 0.6vw + 12.2px, 15.5px); }

/* ── ③ 指標型態：觸控 ───────────────────────────────────────────────
   觸控沒有 hover 的概念 —— 不擋掉的話 :hover 會在點完之後「黏住」
   （例如按鈕一直維持浮起的 -2px）。 */
@media (hover: none) {
  .btn:hover { transform: none; }
  .btn--solid:hover { background: var(--orange); }
  .btn--ghost:hover { background: var(--cream); }
  .site-nav a:hover { color: var(--ink-soft); border-bottom-color: transparent; }
  .lang__btn:hover { background: var(--cream); }
  .lang__menu button:hover { background: none; }
  .faq__item summary:hover::after { background-color: var(--ink-mute); }
  .foot-col a:hover { color: #D6E6C6; text-decoration: none; }
}

/* 改成用 :active 給回饋（滑鼠按住時也適用，回饋更即時） */
.btn:active { transform: translateY(1px) scale(.985); box-shadow: 0 2px 6px rgba(107, 74, 47, .28); }
.site-nav a:active { color: var(--ink); border-bottom-color: var(--grass); }
.lang__btn:active, .hamburger:active { background: #FFF6E2; }
.lang__menu button:active { background: var(--highlight); }
.faq__item summary:active { background: var(--paper-grass); }

/* 觸控目標下限（Apple HIG 44pt / Material 48dp） */
@media (pointer: coarse) {
  .site-nav a { display: flex; align-items: center; min-height: 48px; }
  .lang__btn, .hamburger { min-height: 44px; }
  .lang__menu button { min-height: 48px; }
  .foot-col { gap: 4px; }
  .foot-col a { display: flex; align-items: center; min-height: 44px; }
}

/* ── ④ 橫向手機：矮視窗是另一個問題，不是「小一點的平板」 ──────────── */
@media (orientation: landscape) and (max-height: 520px) {
  /* 吸頂頁首在 390px 高的畫面會吃掉四分之一 ⇒ 這一段改成不吸頂 */
  :root { --header-h: 72px; --anchor-offset: 12px; }
  .site-header { position: static; padding-top: 0; }
  .hero__sky { display: none; }              /* 矮視窗不需要雲，只會擠壓內容 */
  .hero__inner { padding-block: 32px 28px; gap: 32px; }
  .hills { height: 72px; }
  .section { padding-block: 48px; }
  .hero__art { max-width: 460px; }
}

/* ── ⑤ 頁尾安全區（home indicator 不會壓到版權列）────────────────── */
.site-footer__body { padding-bottom: calc(40px + var(--safe-b)); }

/* ── ⑥ 減少動態 ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn, .icon--caret, .faq__item summary::after { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}