/* ============================================================
   Claim｜實證行銷 — 全域樣式
   設計概念：診斷書 / 卷宗（Dossier）。冷靜、精準、有判決感。
   ============================================================ */

/* Google Fonts 載入（備援；主字型由 @fontsource 在 BaseLayout 引入） */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');

/* --- 設計 Token --- */
:root {
  --paper:  #ECEDE8;  /* 主背景 */
  --panel:  #F4F4F0;  /* 卡片、輸入框底色 */
  --ink:    #181A1B;  /* 主文字、主結構線 */
  --slate:  #585E62;  /* 次要文字、註解 */
  --line:   #C9CAC4;  /* 分隔線、邊框 */
  --signal: #C8472E;  /* 判決紅：極度節制，全頁最多一兩處 */
  --warn:   #C98A2B;  /* 警示黃 */
  --good:   #3F7A6B;  /* 良好綠 */

  --fr:   'Fraunces', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --body: 'Newsreader', Georgia, serif;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Base --- */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--fr);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1 { font-size: clamp(28px, 4.6vw, 48px); }
h2 { font-size: clamp(22px, 3.4vw, 36px); }
h3 { font-size: clamp(18px, 2.4vw, 24px); }

p { line-height: 1.7; }

a { color: inherit; text-decoration: none; }

/* --- Layout --- */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px); }

.sec { padding: clamp(40px, 6vw, 72px) 0; }
.sec + .sec { border-top: 1px solid var(--line); }

/* --- Eyebrow (眉標) --- */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 12px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  padding: 13px 22px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
}
.btn-primary {
  background: var(--signal);
  color: #fff;
  border-color: var(--signal);
}
.btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
.cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Topbar --- */
.topbar {
  position: sticky;
  top: 0;
  background: rgba(236, 237, 232, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  flex-wrap: wrap;
  gap: 10px;
}
.mark {
  font-family: var(--fr);
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  color: var(--ink);
}
.mark .div { color: var(--line); margin: 0 5px; font-weight: 400; }
.mark small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.08em;
  font-weight: 400;
}
nav {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
nav a {
  color: var(--slate);
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s;
}
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--ink); border-color: var(--signal); }

/* --- Footer --- */
footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 48px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--slate);
}
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* --- Card --- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px;
}

/* --- Proof blocks --- */
.proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.pf {
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  background: var(--panel);
  border-radius: 2px;
  padding: 16px 18px;
}
.pf b { font-family: var(--fr); font-size: 16px; }
.pf span { display: block; font-size: 13.5px; color: var(--slate); margin-top: 5px; line-height: 1.55; }

/* --- Blog list --- */
.posts { margin-top: 24px; border-top: 1px solid var(--line); }
.post-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: color 0.15s;
}
.post-item:hover h3 { color: var(--signal); }
.post-item h3 { font-family: var(--fr); font-size: 20px; font-weight: 500; margin-bottom: 6px; transition: color 0.15s; }
.post-item p { font-size: 14px; color: var(--slate); max-width: 60ch; }
.post-meta { font-family: var(--mono); font-size: 11px; color: var(--slate); white-space: nowrap; letter-spacing: 0.04em; }

/* --- Prose (blog article) --- */
.prose { max-width: 68ch; }
.prose h2 { margin: 2em 0 0.6em; }
.prose h3 { margin: 1.6em 0 0.5em; }
.prose p { margin-bottom: 1.2em; }
.prose ul, .prose ol { margin: 0 0 1.2em 1.4em; }
.prose li { margin-bottom: 0.4em; line-height: 1.65; }
.prose blockquote {
  border-left: 3px solid var(--signal);
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  background: var(--panel);
  color: var(--slate);
  font-style: italic;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 2px;
}

/* --- Service cards --- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.svc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.svc.main { box-shadow: 0 0 0 1.5px var(--ink); border-color: var(--ink); }
.svc h3 { font-family: var(--fr); font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.svc .price { font-family: var(--mono); font-size: 14px; color: var(--signal); margin-bottom: 12px; }
.svc p { font-size: 14.5px; color: var(--slate); line-height: 1.6; flex: 1; }
.tagm { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }

/* --- Utilities --- */
.sub { color: var(--slate); max-width: 56ch; line-height: 1.7; }
.lead { font-size: clamp(16px, 2vw, 18px); color: var(--slate); max-width: 44ch; }

/* --- Responsive --- */
@media (max-width: 780px) {
  .cards3 { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  nav { gap: 12px; }
}


/* ============================================================
   首頁 版面配置
   ============================================================ */

/* Hero Grid */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(26px, 5vw, 48px);
  align-items: center;
}
@media (max-width: 780px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-copy h1 { margin: 16px 0 0; }
.byline {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--slate);
  margin-top: 22px;
  letter-spacing: 0.03em;
}

/* 範例診斷卡 */
.sample-card { position: relative; overflow: hidden; }
.stamp-badge {
  position: absolute;
  top: 14px; right: -8px;
  transform: rotate(-7deg);
  border: 2px solid var(--signal);
  color: var(--signal);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 3px;
  opacity: 0.9;
}
.card-ey {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 14px;
}
.gauge-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.v-tag {
  display: inline-block;
  background: var(--signal);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 7px;
}
.v-txt { font-size: 14.5px; line-height: 1.5; }
.bars { border-top: 1px solid var(--line); padding-top: 12px; }
.br { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.bn { font-size: 12.5px; width: 74px; flex-shrink: 0; }
.bt { flex: 1; height: 5px; background: var(--line); border-radius: 3px; }
.bf { height: 100%; border-radius: 3px; }
.bnum { font-family: var(--mono); font-size: 11.5px; color: var(--slate); width: 24px; text-align: right; }

/* 戰績 */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 640px) { .cases-grid { grid-template-columns: 1fr; } }
.case-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px;
}
.case-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.case-metrics {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.metric { display: flex; flex-direction: column; gap: 3px; }
.metric-num {
  font-family: var(--fr);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.metric-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--slate);
}
.case-desc { font-size: 13.5px; color: var(--slate); line-height: 1.65; margin-bottom: 10px; }
.case-disclaimer {
  font-size: 11.5px;
  color: var(--slate);
  line-height: 1.6;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  margin-top: 10px;
  font-family: var(--mono);
  letter-spacing: 0.01em;
}

/* 差異化支柱 (Pillars) */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 20px;
}
.pillar-num {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--signal);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.pillar h3 { font-family: var(--fr); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.pillar p { font-size: 13.5px; color: var(--slate); line-height: 1.6; }

/* 合作流程 */
.process-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: start;
}
@media (max-width: 720px) {
  .process-steps { grid-template-columns: 1fr; gap: 20px; }
  .step-arrow { display: none; }
}
.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px 22px;
}
.step-num {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--signal);
  margin-bottom: 10px;
}
.step-body h3 { font-family: var(--fr); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.step-body p { font-size: 13.5px; color: var(--slate); line-height: 1.65; }
.step-cta {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--signal);
  text-decoration: none;
}
.step-cta:hover { text-decoration: underline; }
.step-arrow {
  font-size: 20px;
  color: var(--line);
  padding: 28px 12px 0;
  font-family: var(--mono);
}