/* ============================================================================
   rhythm.css — 區塊節奏、主題切分與深淺過渡
   ----------------------------------------------------------------------------
   問題（見診斷報告）：原本每個區塊都是相同的 1080px 寬 + 相同的 128px 留白
   + 一條 1px 分隔線，整頁變成一條節奏完全一致的长条，滾動時感受不到「換主題」；
   唯一的深色區塊上下又是硬切。

   這裡做三件事：
     1. 節奏：相鄰區塊使用不同的上下留白，滾動時有快慢差
     2. 錨點：每個區塊左側有一個大號區塊編號，作為滾動時的視覺定錨
     3. 過渡：深淺交界用漸層帶接起來，不再硬切

   全部純 CSS，不需要任何素材。
   ========================================================================= */

/* ---- 1. 節奏：相鄰區塊留白不同 ---------------------------------------- */
main { counter-reset: secnum; }

.sec {
  position: relative;
  padding: var(--gap-loose) 0;      /* 預設：寬鬆 */
  counter-increment: secnum;
}
/* 交替節奏——這是「滾動不流暢」的主要修法 */
.sec:nth-of-type(even) { padding: var(--gap-tight) 0; }

.sec-alt { background: var(--bg-alt); }

/* 淺色區塊之間的髮絲線保留，但只出現在「同色相接」時 */
.sec + .sec { border-top: 1px solid var(--line); }
.sec-alt + .sec-alt { border-top: none; }

/* ---- 2. 視覺錨點：大號區塊編號 ---------------------------------------- */
.sec > .wrap { position: relative; z-index: 1; }

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 22px;
}
.eyebrow::before {
  content: counter(secnum, decimal-leading-zero);
  flex: none;
  font-size: var(--fs-anchor);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--anchor);
}
#how .eyebrow::before { color: var(--anchor-dark); }

/* ---- 3. 過渡：深淺交界用漸層帶接起來 --------------------------------- */
/* 除了最後一個區塊，每個區塊底部都有一個過渡帶，顏色由「本區塊底色」
   漸變到「下一個區塊底色」。底色一改，只改這裡的變數即可。 */
.sec::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--fade);
  pointer-events: none;
  /* 注意：這裡刻意不用 transparent（＝透明黑），否則中段會插值出一條髒灰帶。
     要用「同色的 0 alpha」，漸層才會乾淨。 */
  background: linear-gradient(180deg, var(--next-bg-0, rgba(255,255,255,0)) 0%, var(--next-bg) 100%);
}

/* 各區塊的「下一個底色」——這裡就是全站的深淺順序，改順序只改這幾行。
   --next-bg-0 是同一色的 0 alpha 版本，避免漸層中段出現髒灰。 */
#why      { --next-bg: var(--bg-alt);   --next-bg-0: rgba(246,249,253,0); }
#services { --next-bg: var(--dark-bg);  --next-bg-0: rgba(16,35,63,0); }
#how      { --next-bg: var(--bg-alt);   --next-bg-0: rgba(246,249,253,0); }
#faq      { --next-bg: var(--bg-alt);   --next-bg-0: rgba(246,249,253,0); }
#contact  { --next-bg: var(--foot-bg);  --next-bg-0: rgba(16,35,63,0); }
/* 聯絡區塊與頁腳同為深色，過渡帶收短，避免出現一片霧 */
#contact  { --fade: 2.5rem; }
/* 最後一個（頁腳之前）由頁腳自己的上緣漸層接手 */
#contact::after { height: var(--fade); }

/* 深色區塊本身要有上下兩段過渡（上緣由 #services 的 ::after 負責） */
#how { background: var(--dark-bg); color: var(--dark-sub); }
#how h2, #how h3, #how strong { color: var(--dark-ink); }
#how p, #how .evidence-sub { color: var(--dark-sub); }
#how .eyebrow { color: var(--dark-sub); }
#how li::before { background: var(--dark-ink); }
#how .evidence-row {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--dark-line);
  box-shadow: none;
}
#how .cost-note {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--dark-line);
  border-left: 3px solid var(--accent);
}

/* 頁腳上緣也加一段過渡，和 #contact 的下緣漸層對接 */
.foot {
  position: relative;
  background: var(--foot-bg);
  color: var(--foot-sub);
}
.foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(var(--fade) * -1);
  height: var(--fade);
  background: linear-gradient(180deg, rgba(16,35,63,0) 0%, var(--foot-bg) 100%);
  pointer-events: none;
}

/* ---- 4. 服務區塊的分段：避免六種內容疊成同一長條 -------------------- */
/* 診斷：服務區塊一段就約 3,500px，內含「介紹＋表格＋分頁＋卡片＋案例」
   五個層級。這裡在層級之間插入明確的主題分隔，讓滾動時讀得到段落。 */
.svc-tier {
  position: relative;
  padding-top: var(--gap-tier);
}
.svc-tier::before {
  content: attr(data-tier);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 600;
  padding-top: 2px;
}
.svc-tier::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.svc-tier > *:first-child { margin-top: 0; }

/* 案例卡：從服務卡片內拉出來，成為獨立的一層。
   卡片本身只負責「這個服務是什麼」，案例集中在下方，兩者不再交錯。 */
.svc-cases {
  position: relative;
  margin: var(--gap-case) 0 0;
  padding-top: var(--gap-tier);
}
.svc-cases::before {
  content: attr(data-tier);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 600;
}
.svc-cases::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 3.4em;
  right: 0;
  height: 1px;
  background: var(--line);
}
.case-title {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
}
.case-group {
  margin: 0 0 var(--gap-case);
}
.case-group:last-child { margin-bottom: 0; }

/* ---- 5. 響應式 -------------------------------------------------------- */
@media (max-width: 860px) {
  .sec, .sec:nth-of-type(even) { padding: var(--gap-tight) 0; }
  :root { --fade: 56px; }
}