/* ─────────────────────────────────────────────────────────────
   站台介紹頁（public/index.html）。

   **這一支刻意不共用 p.css。** 那支消費的 :root 變數是前台 SSR
   依使用者主題即時序列化注進去的，介紹頁是純靜態檔、沒有那段
   <style>，套上去會拿到一整組沒有值的變數。

   配色沿用 zinzan.info 的品牌語彙（slate 底 + 電光藍 + 綠），
   數值與後台 admin/src/styles.css 對齊，兩邊看起來要像同一個產品。

   三種狀態（硬性約束 2）：
     bare :root                                   → 淺色
     @media (prefers-color-scheme: dark) + 護欄   → 跟隨系統的深色
     :root[data-theme='dark']                     → 手動指定一律優先

   介紹頁目前沒有主題切換鈕（保持零 JS，這是全站最該快的一頁），
   data-theme 那一段是為了日後要加時不必回來重寫。
   ───────────────────────────────────────────────────────────── */

/* ── 淺色（預設） ── */
:root {
  --ground: #f1f5f9;
  --surface: #ffffff;
  --surface-hi: #f8fafc;
  --hairline: #d5dde7;

  --text: #0f172a;
  --text-2: #334155;
  --muted: #5b6b7f;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #e6edfd;
  --on-primary: #ffffff;

  --live: #15803d;
  --live-soft: #dcfce7;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.09);

  /**
   * 中文一律走系統字型，不下載 CJK 字型 —— 見 index.html 的註解。
   * `system-ui` 在中文環境已經會選對，後面兩個是給它選不到時的明確指名。
   */
  --cjk: system-ui, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --display: 'JetBrains Mono', ui-monospace, SFMono-Regular, var(--cjk);
  --ui: 'IBM Plex Sans', var(--cjk);

  --r: 12px;
  --r-sm: 8px;

  color-scheme: light;
}

/* ── 深色：跟隨系統，但明確指定 light 時不套用 ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #0b1120;
    --surface: #0f172a;
    --surface-hi: #1e293b;
    --hairline: #26334a;

    --text: #f8fafc;
    --text-2: #cbd5e1;
    --muted: #94a3b8;

    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-soft: rgba(59, 130, 246, 0.16);
    --on-primary: #0b1120;

    --live: #22c55e;
    --live-soft: rgba(34, 197, 94, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}

/* ── 手動指定深色：兩個方向都要贏得過系統設定 ── */
:root[data-theme='dark'] {
  --ground: #0b1120;
  --surface: #0f172a;
  --surface-hi: #1e293b;
  --hairline: #26334a;

  --text: #f8fafc;
  --text-2: #cbd5e1;
  --muted: #94a3b8;

  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-soft: rgba(59, 130, 246, 0.16);
  --on-primary: #0b1120;

  --live: #22c55e;
  --live-soft: rgba(34, 197, 94, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* ── 版面 ── */

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 頁首 ── */

.top {
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}

.top__in {
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.top__spacer {
  flex: 1;
}

/* ── Hero ── */

.hero {
  /**
   * **只動垂直方向。** `.hero` 與 `.wrap` 是同一個元素上的兩個 class
   * （`<section class="wrap hero">`），用 `padding` 簡寫會把 `.wrap` 的
   * `padding: 0 24px` 一起蓋掉，左右留白歸零、內容貼齊螢幕邊緣。
   * 桌面上還看得出是「滿版設計」，手機上就是字貼著邊。
   */
  padding-block: 72px 56px;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.hero__lede {
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--text-2);
  margin: 0 0 12px;
  max-width: 46ch;
}

.hero__sub {
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 52ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.hero__note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* 桌面：左文右手機。手機示意在窄螢幕移到文字下方（見檔尾的 media query） */
@media (min-width: 760px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 48px;
    align-items: center;
  }
}

/* ── 手機示意 ──
   連結一條一條長出來：延遲寫在 nth-child 上，不用 inline style（硬性約束 3）。
   只播一次，不循環 —— 這是示意，不是跑馬燈。 */

.mock {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.mock__phone {
  inline-size: 240px;
  aspect-ratio: 9 / 18;
  border: 8px solid var(--text);
  border-radius: 32px;
  background: var(--surface-hi);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.mock__screen {
  block-size: 100%;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* 內容比畫面高時不要讓 flex 去壓縮它們 —— 大頭貼會被壓成橢圓。超出的部分由外框裁掉 */
.mock__screen > * {
  flex-shrink: 0;
}

.mock__avatar {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-size: 1.3rem;
  animation: mock-in 0.5s ease-out 0.1s both;
}

.mock__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  margin-block-start: 4px;
  animation: mock-in 0.5s ease-out 0.2s both;
}

.mock__bio {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
  animation: mock-in 0.5s ease-out 0.3s both;
}

.mock__socials {
  display: flex;
  gap: 10px;
  margin-block: 6px 8px;
  animation: mock-in 0.5s ease-out 0.4s both;
}

.mock__socials i {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--text-2);
}

.mock__links {
  align-self: stretch;
  display: grid;
  gap: 8px;
}

.mock__link {
  padding: 9px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 600;
  animation: mock-grow 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

.mock__link:nth-child(1) { animation-delay: 0.7s; }
.mock__link:nth-child(2) { animation-delay: 1.05s; }
.mock__link:nth-child(3) { animation-delay: 1.4s; }
.mock__link:nth-child(4) { animation-delay: 1.75s; }

.mock__cap {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  max-inline-size: 22ch;
}

@keyframes mock-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes mock-grow {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* 系統設定減少動態效果：直接顯示完成的樣子 */
@media (prefers-reduced-motion: reduce) {
  .mock__screen > *,
  .mock__link {
    animation: none;
  }
}

/* ── 三步 ── */

.steps {
  /* 不可用 padding 簡寫，會蓋掉 .wrap 的左右留白（同 .hero） */
  padding-block: 8px 56px;
}

.steps__title {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 16px;
}

.steps__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.step {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.step__n {
  display: inline-grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
}

.step__t {
  font-family: var(--display);
  font-size: 0.95rem;
  margin: 12px 0 6px;
}

.step__d {
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.65;
}

.step__d code {
  font-family: var(--display);
  font-size: 0.85em;
}

/* ── 按鈕 ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 觸控目標不小於 44px（行動裝置的可點擊下限） */
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn--primary:hover {
  background: var(--primary-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--hairline);
}

.btn--ghost:hover {
  background: var(--surface-hi);
}

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── 功能 ── */

.feats {
  /* 同上：不可用 padding 簡寫，會蓋掉 .wrap 的左右留白 */
  padding-block: 8px 56px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.feat {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.feat h2 {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.feat p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ── 開始使用 ── */

.start {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 28px;
  margin-bottom: 56px;
  box-shadow: var(--shadow-sm);
}

.start h2 {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 0 0 12px;
}

.start p {
  margin: 0 0 12px;
  color: var(--text-2);
  max-width: 56ch;
}

.start__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--live-soft);
  color: var(--live);
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* ── 頁尾 ── */

.foot {
  border-top: 1px solid var(--hairline);
  padding: 24px 0 40px;
  color: var(--muted);
  font-size: 0.9rem;
}

.foot a {
  color: var(--text-2);
  /*
    常駐下劃線。連結色與周圍文字色實測只有 1.90:1（淺色）／1.73:1（深色），
    低於「純用顏色區分連結」所需的 3:1，而 hover 對觸控裝置等於不存在。
  */
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.foot a:hover {
  color: var(--primary);
}

/* ── 窄螢幕 ──
   桌面的留白照搬到手機會很浪費：iPhone SE（375×667）上光是 hero 就吃掉
   480px，第一張卡片要捲到 569px 才露臉。這裡把垂直節奏收緊，
   左右留白從 24px 縮到 20px（再小字就貼邊了）。 */
@media (max-width: 600px) {
  .wrap {
    padding: 0 20px;
  }

  .top__in {
    padding: 14px 20px;
  }

  .hero {
    padding-block: 40px 36px;
  }

  .hero h1 {
    margin-bottom: 16px;
  }

  .hero__sub {
    margin-bottom: 24px;
  }

  .feats {
    padding-block: 0 36px;
  }

  .steps {
    padding-block: 0 36px;
  }

  /* 手機示意在文字下方，縮小一點，不要一進來就把整個畫面佔滿 */
  .mock {
    margin-top: 32px;
  }

  .mock__phone {
    inline-size: 200px;
  }

  /* 200px 寬的框只有 384px 高，間距收一點，四條連結才放得下 */
  .mock__screen {
    padding: 20px 12px;
  }

  .mock__link {
    padding: 7px 8px;
  }

  .feat {
    padding: 18px;
  }

  .start {
    padding: 22px;
    margin-bottom: 36px;
  }

  /* 兩顆 CTA 在窄螢幕各佔一行會比擠成一排好按 */
  .hero__cta .btn,
  .start__cta .btn {
    flex: 1 1 auto;
  }
}