/*
 * Landing 的區塊樣式（信任列、功能卡、截圖展示、隱私四點）。
 * 殼層（色票、字階、頁首、按鈕、頁尾）在 `style.css`，兩頁共用；首屏在 `hero.css`。
 * 顏色一律引用 `style.css` 的 token，這裡不定義色值 —— 樣式表各自漂移的第一步就是有人抄一顆色過來。
 *
 * **色階的節奏**（從上到下刻意交替，讓一頁奶油不會糊成一片）：
 * 首屏暖白 → 信任列暖帶 `--bg-2` → 功能區頁面底色 `--bg` → 隱私區亮帶 `--surface` → 頁尾暖帶。
 * 分隔一律只用一條 hairline，不用陰影 —— 亮色底上的區塊陰影會糊，該收邊的是線。
 */

/* ---------- 共用小元件 ---------- */

/* hero 與隱私區塊的 CTA 都用它；顏色各自在所屬區塊裡蓋 */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

/* ---------- 截圖外框 ---------- */

.frame {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-frame);
}

.frame img {
  width: 100%;
}

/* ---------- 信任列 ---------- */

.strip {
  margin-top: 72px;
  border-block: 1px solid var(--border);
  background: var(--bg-2);
}

.strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  list-style: none;
  margin: 0;
  padding: 22px 0;
}

.strip li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-2);
}

/*
 * 勾勾墊一塊圓形**綠**底：綠是貓眼睛那顆鼠尾草綠，站在「沒有伺服器、沒有帳號」這排字旁邊
 * 剛好就是「已確認、安全」的意思 —— 綠色在這裡有語意，不是隨手撒的第二個顏色。
 * 墊底也解決對比：原色 #a9bc8b 直接當 16px 線條色會糊，「淡綠底 ＋ 加深綠線條」才站得住。
 */
.strip .icon {
  width: 15px;
  height: 15px;
  padding: 5px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--cat-sage-ink);
}

/* ---------- 區塊標題 ---------- */

section {
  padding: 104px 0;
}

.section-head {
  max-width: 62ch;
  margin-bottom: 52px;
}

.section-head h2 {
  font-size: clamp(32px, 4.4vw, 46px);
}

.section-head p {
  margin-top: 18px;
  color: var(--text-2);
  font-size: 18px;
}

/* 掛 `.brand-dot`（共用層那顆橘點），全站掃視時認得出「這一段開始了」 */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

/* ---------- 功能卡 ---------- */

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

/*
 * 卡面比頁面底色**亮**（`--surface` 是整站最亮的一階），加一層極淡的暖影把它托起來。
 * 深色時代反過來 —— 卡片比底色暗。直接沿用深色那組會讓四張卡在奶油上變成四塊凹陷。
 */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(58, 54, 50, 0.04), 0 16px 30px -24px rgba(58, 54, 50, 0.5);
}

.card h3 {
  font-size: 21px;
  margin-bottom: 12px;
}

.card p {
  color: var(--text-2);
  font-size: 16px;
}

/* 功能 icon 墊一塊圓角橘磚：線條 icon 單獨浮在奶油上很輕，墊底之後才站得住 */
.card .icon {
  /* 換成 block：inline 的替換元素會在底下留一條基線縫，墊底之後那條縫看得出來 */
  display: block;
  width: 22px;
  height: 22px;
  padding: 9px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--cat-orange-ink);
  margin-bottom: 18px;
}

kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
}

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* ---------- 截圖展示（圖 + 文字） ---------- */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 56px;
  margin-top: 72px;
}

/*
 * 交錯的那一組：文字換到右邊，**欄寬也要跟著換**。只調 order 的話圖片會落進 1fr 那一欄，
 * 兩張截圖就一大一小 —— order 換的是元素順序，不是它站的那一欄有多寬。
 */
.showcase.reverse {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.showcase.reverse .showcase-copy {
  order: 2;
}

.showcase h3 {
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 16px;
}

.showcase p {
  color: var(--text-2);
}

/* ---------- 隱私四點 ---------- */

/* 隱私區反過來用**最亮**的一階：講「你的資料留在你這裡」的段落該是全頁最乾淨的一塊 */
.privacy-section {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/*
 * 首屏那兩團暖光在頁面收尾前再出現一次（左下橘、右上粉，同一組色、濃度更低）。
 * 頭尾呼應之後中段的功能區才讀得出是「內容」，而不是一整頁沒有起伏的奶油。
 */
.privacy-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38% 46% at 88% 6%, rgba(245, 184, 196, 0.24), transparent 70%),
    radial-gradient(32% 42% at 4% 96%, rgba(232, 162, 92, 0.18), transparent 72%);
  pointer-events: none;
}

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

.pillar h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.pillar p {
  color: var(--text-2);
  font-size: 16px;
}

/*
 * 隱私四點跟信任列同一顆綠：兩處講的是同一件事（你的資料安全），顏色就該是同一個。
 * 跟功能卡的橘磚分色是刻意的 —— 一頁裡兩個 icon 群組長得一模一樣，就分不出是兩件事。
 * 粉腮那顆留在首屏的貓與書籤磚上，不進區塊層：三種色磚散在一頁上會變成彩紙屑。
 */
.pillar .icon {
  display: block;
  width: 20px;
  height: 20px;
  padding: 10px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--cat-sage-ink);
  margin-bottom: 14px;
}

/* ---------- 響應式 ---------- */

@media (max-width: 900px) {
  section {
    padding: 72px 0;
  }

  .cards,
  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .pillars {
    gap: 32px;
  }

  .showcase,
  .showcase.reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 56px;
  }

  /* 單欄之後圖文順序一律「文字在上」，reverse 的交錯只在雙欄成立 */
  .showcase.reverse .showcase-copy {
    order: 0;
  }
}

@media (max-width: 620px) {
  .strip {
    margin-top: 56px;
  }

  .strip ul {
    gap: 12px 28px;
  }

  .card {
    padding: 22px;
  }
}