/* ============================================================
   ENSCON AI — LINE 智能客服銷售頁・設計系統
   延續 projects/enscon/enscon-v2 品牌色（暖米白＋墨色＋單一橘強調），
   非套用該站樣式檔，是獨立 tokens（本頁不掛在 enscon-v2 部署鏈上）。
   字體：Space Grotesk（英數／自帶 woff2）＋ 系統中文黑體（PingFang TC 等）。
   禁 Inter / Roboto / Arial / Helvetica；禁紫漸層＋白底。
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-latin.woff2') format('woff2');
}

:root {
  /* 色彩 tokens */
  --bg: #F7F3EC;
  --bg-soft: #FFFDF9;
  --text: #2A2620;
  --bright: #14110E;
  --dim: #6B6459;
  --accent: #C2410C;
  --accent-soft: #E8DED0;
  --accent-strong: #9A340A;
  /* 🔴 2026-09-03：小字（.eyebrow 標籤、.step-num 序號）改用 accent-strong 而非 accent。
     #C2410C 配 --accent-soft 底只有 3.89，WCAG AA 小字需 4.5。
     大面積與大字仍用 --accent 保品牌識別。
     理由不只合規：Joey 讀字本來就吃力，而這幾處全是小字（Atlas 9/3 拍板）。
     驗法：node scripts/web/verify-page-quality.mjs <url> */
  --border: rgba(42, 38, 32, .14);
  --card: #FFFDF9;
  --card-hover: #F2ECE1;
  --line-green: #06C755; /* LINE 品牌色，僅用於 LINE CTA 圖示，非主色 */
  --ok: #4A7C59;
  --warn: #B3452B;

  /* 字階 */
  --fs-hero: clamp(2.1rem, 5vw + 1rem, 3.6rem);
  --fs-h2: clamp(1.6rem, 2.6vw + 1rem, 2.4rem);
  --fs-h3: clamp(1.15rem, 1.2vw + 1rem, 1.4rem);
  --fs-body: 1.05rem;
  --fs-small: .92rem;

  /* 間距 */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.6rem;
  --sp-4: 2.4rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow-card: 0 12px 32px rgba(42, 38, 32, .08);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

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

h1, h2, h3 { color: var(--bright); font-weight: 700; line-height: 1.3; margin: 0; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: .3em .8em;
  border-radius: 999px;
  margin-bottom: var(--sp-2);
}

.section {
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--border);
}

.section-head {
  max-width: 640px;
  margin: 0 auto var(--sp-4);
  text-align: center;
}

.section-head p { color: var(--dim); margin-top: var(--sp-2); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 243, 236, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem var(--sp-3);
  max-width: 1080px;
  margin: 0 auto;
}
.nav-logo { font-weight: 700; font-size: 1.1rem; color: var(--bright); text-decoration: none; }
.nav-logo span { color: var(--accent); }
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--accent);
  color: #FFFDF9;
  font-weight: 700;
  padding: .7em 1.4em;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-small);
  font-family: inherit;
  transition: transform .15s ease, background .15s ease;
}
.btn-cta:hover { background: var(--accent-strong); transform: translateY(-1px); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7em 1.3em;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
}

/* ---------- 1. Hero ---------- */
.hero {
  padding: var(--sp-5) 0 var(--sp-6);
  text-align: center;
}
.hero h1 {
  font-size: var(--fs-hero);
  max-width: 820px;
  margin: 0 auto var(--sp-3);
}
.hero .sub {
  max-width: 620px;
  margin: 0 auto var(--sp-4);
  color: var(--dim);
  font-size: 1.15rem;
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.hero-stat { text-align: center; }
.hero-stat b { display: block; font-size: 1.8rem; color: var(--accent); }
.hero-stat span { font-size: var(--fs-small); color: var(--dim); }

/* ---------- 2. 三步驟 ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  position: relative;
}
.step-num {
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.step h3 { margin-bottom: .5em; }
.step p { color: var(--dim); margin: 0; font-size: var(--fs-small); }

/* ---------- 3. Demo + 大腦錨點 ---------- */
.demo-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--sp-4);
  align-items: start;
}
.chat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.chat-card-head {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.chat-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--line-green); }
.chat-card-head span { font-size: var(--fs-small); color: var(--dim); }
.chat-body {
  padding: var(--sp-3);
  min-height: 320px;
}
.chat-panel {
  display: none;
  flex-direction: column;
  gap: var(--sp-2);
}
.chat-panel.active { display: flex; }
.bubble {
  max-width: 78%;
  padding: .7em 1em;
  border-radius: 16px;
  font-size: var(--fs-small);
  line-height: 1.6;
  white-space: pre-line;
}
.bubble.user {
  align-self: flex-end;
  background: var(--accent);
  color: #FFFDF9;
  border-bottom-right-radius: 4px;
}
.bubble.bot {
  align-self: flex-start;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.bubble.bot.human {
  border-color: var(--ok);
  background: #EEF4EF;
}
.chat-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.chat-picker button {
  font-family: inherit;
  font-size: .85rem;
  padding: .5em .9em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #FFFDF9;
  color: var(--text);
  cursor: pointer;
}
.chat-picker button.active,
.chat-picker button:hover { background: var(--accent); color: #FFFDF9; border-color: var(--accent); }
.chat-note {
  font-size: .78rem;
  color: var(--dim);
  padding: 0 var(--sp-3) var(--sp-2);
}

.brain-anchor {
  background: var(--bright);
  color: #FBF7F0;
  border-radius: var(--radius);
  padding: var(--sp-4);
  height: 100%;
}
.brain-anchor .eyebrow { background: rgba(255,255,255,.12); color: #F5C99B; }
.brain-anchor h3 { color: #FBF7F0; margin-bottom: var(--sp-2); }
.brain-anchor p { color: #C9C1B3; font-size: var(--fs-small); }
.brain-anchor ul { padding-left: 1.1em; margin: var(--sp-2) 0; color: #C9C1B3; font-size: var(--fs-small); }
.brain-anchor li { margin-bottom: .5em; }
.brain-anchor a.link { color: #F5C99B; font-weight: 700; text-decoration: underline; }

/* ---------- 4. 產業帶入 ---------- */
.tabs {
  display: flex;
  gap: .6em;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.tab-btn {
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: .6em 1.3em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--dim);
  cursor: pointer;
}
.tab-btn.active { background: var(--accent); color: #FFFDF9; border-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.tab-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}
.tab-card h4 { margin: 0 0 .4em; color: var(--bright); font-size: 1rem; }
.tab-card p { margin: 0; color: var(--dim); font-size: var(--fs-small); }

/* ---------- 5. 信任 ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.trust-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  text-align: center;
}
.trust-card b { display: block; font-size: 1.6rem; color: var(--accent); margin-bottom: .3em; }
.trust-card span { font-size: var(--fs-small); color: var(--dim); }
.trust-quote {
  margin-top: var(--sp-4);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  text-align: center;
}
.trust-quote p { font-size: 1.1rem; color: var(--bright); margin: 0 0 var(--sp-1); }
.trust-quote span { font-size: var(--fs-small); color: var(--dim); }

/* ---------- 6. 價格 ---------- */
.price-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border);
}
.price-row:last-of-type { border-bottom: none; }
.price-row .label { color: var(--dim); font-size: var(--fs-small); }
.price-row .value { font-weight: 700; color: var(--bright); font-size: 1.15rem; }
.price-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: .78rem;
  font-weight: 700;
  padding: .25em .7em;
  border-radius: 999px;
  margin-left: .5em;
}
.price-note {
  margin-top: var(--sp-3);
  font-size: .82rem;
  color: var(--dim);
  line-height: 1.7;
}

/* ---------- 7. CTA ---------- */
.cta-final {
  text-align: center;
  background: var(--bright);
  color: #FBF7F0;
  border-radius: 28px;
  padding: var(--sp-6) var(--sp-3);
  margin: 0 var(--sp-3);
}
.cta-final h2 { color: #FBF7F0; margin-bottom: var(--sp-2); }
.cta-final p { color: #C9C1B3; max-width: 520px; margin: 0 auto var(--sp-4); }

footer {
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  color: var(--dim);
  font-size: .82rem;
}

/* ---------- RWD：手機優先斷點 ---------- */
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; }
  .tab-panel.active { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: var(--sp-4); }
}
@media (max-width: 480px) {
  .trust-grid { grid-template-columns: 1fr; }
  .nav-inner .btn-ghost { padding: .6em 1em; font-size: .82rem; }
  .nav-inner .btn-cta { padding: .6em 1em; font-size: .82rem; }
  .price-row { flex-direction: column; align-items: flex-start; gap: .3em; }
}