/* ENSCON 主題層（J1087，2026-08-07）
   ——深淺色雙 palette ＋ 從「AI 感」反轉成編輯排版感。

   Joey 的原話：「優化美感、增強人類設計感、降低 AI 感」「偵測系統是黑模式還是白模式，
   網頁會跟著變」。參考的四個站共同點是：淺色暖底、雜誌式排版、大量留白、真實素材。
   我們現在的深藍底＋橘漸層＋發光按鈕，正是他說的 AI 感本體。

   ⚠️ 為什麼是「覆蓋層」而不是逐支改 20 幾個 CSS：
   實測各頁的 :root 變數命名高度一致（--bg / --text / --dim / --bright / --accent
   是共同集），所以只要這支**排在各頁 CSS 之後**載入，同特異性後者勝，
   一次覆蓋全站。逐支改的代價是 20 幾個檔案各改一遍、漏掉一支就有一頁是舊配色，
   而那種漏最難發現——它只在某一頁、某一個模式下才看得到。

   ⚠️ 三態的處理（這是最容易寫錯的地方）：
   使用者的主題狀態有三種，不是兩種——
     ① 明確選淺色 → 根元素有 data-theme="light"
     ② 明確選深色 → 根元素有 data-theme="dark"
     ③ 沒選過（預設）→ **根元素什麼都沒有**，只能靠 prefers-color-scheme 分辨
   所以：完整的淺色 palette 定義在裸 :root（③ 的淺色情況與 ① 都吃這份），
   深色只覆寫變數、且要寫兩次——一次在 media query 裡（給 ③ 的深色情況，
   但要用 :not([data-theme="light"]) 排除已明確選淺色的人），
   一次在 [data-theme="dark"]（給 ②，讓手動切換贏過系統值）。
   少寫任何一個，就會有一種狀態的顏色是錯的。 */

:root {
  /* 淺色（預設）：米白暖底、墨色文字。
     不是純白 #fff——純白配黑字在長文上會刺眼，暖一階的米白是印刷品的作法。 */
  --bg: #F7F3EC;
  --bg-soft: #FFFDF9;          /* 卡片、浮起區塊 */
  --text: #2A2620;             /* 墨色，不是純黑 */
  --bright: #14110E;           /* 標題用，比內文再深一階 */
  --dim: #6B6459;              /* 次要文字 */
  --accent: #C2410C;           /* 橘降為單一強調色，飽和度收斂 */
  --accent-soft: #E8DED0;      /* 強調色的低調版（底線、標籤底） */
  --border: rgba(42, 38, 32, .12);
  --card: #FFFDF9;

  /* 舊變數的相容值。各頁 CSS 還在用 --purple / --cyan / --blue 做漸層與點綴，
     整批改掉是另一輪工程；先讓它們指到同一個強調色系，
     **漸層就自然消失了**（起訖同色＝看起來是純色），不用去追每一條 gradient。 */
  --purple: #C2410C;
  --cyan: #A8622F;
  --blue: #C2410C;
  --green: #4A7C59;
  --red: #B3452B;
  --orange: #C2410C;
  --card-hover: #F2ECE1;
  --accent-glow: rgba(194, 65, 12, .18);

  color-scheme: light;
}

/* ③ 沒選過 + 系統是深色。:not([data-theme="light"]) 是必要的——
   少了它，明確選淺色的人在深色系統下會被這條蓋回深色。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110E;             /* 暖黑，不是原本的藍黑 #050510 */
    --bg-soft: #1E1A16;
    --text: #E8E1D6;
    --bright: #FBF7F0;
    --dim: #A39A8C;
    --accent: #E08050;         /* 深底上要提亮，不然對比度不足 */
    --accent-soft: #3A2E24;
    --border: rgba(232, 225, 214, .14);
    --card: #1E1A16;
    --purple: #E08050;
    --cyan: #D4A574;
    --blue: #E08050;
    --green: #7FA88C;
    --red: #D97757;
    --card-hover: #262019;
    --accent-glow: rgba(224, 128, 80, .2);
    color-scheme: dark;
  }
}

/* ② 手動選深色：要贏過系統的淺色，所以獨立寫一份 */
:root[data-theme="dark"] {
  --bg: #14110E;
  --bg-soft: #1E1A16;
  --text: #E8E1D6;
  --bright: #FBF7F0;
  --dim: #A39A8C;
  --accent: #E08050;
  --accent-soft: #3A2E24;
  --border: rgba(232, 225, 214, .14);
  --card: #1E1A16;
  --purple: #E08050;
  --cyan: #D4A574;
  --blue: #E08050;
  --green: #7FA88C;
  --red: #D97757;
  --card-hover: #262019;
  --accent-glow: rgba(224, 128, 80, .2);
  color-scheme: dark;
}

/* ── 反轉「AI 感」的三件事 ─────────────────────────────────────────
   這三樣是 Joey 指名的：深藍底、橘漸層、發光按鈕。
   用覆蓋而不是回去刪各頁 CSS，因為刪要動 20 幾個檔、而且會跟下一波改版打架。 */

/* ① 背景點陣：那個 32px 的網點是「科技感示意圖」的標準配件，拿掉 */
body {
  background-image: none !important;
  background: var(--bg);
  color: var(--text);
}

/* ② 發光：脈衝、光暈、滑鼠跟隨光球——參考的四個站一個都沒有 */
#mouse-glow,
.glow,
.glow-cyan,
.glow-orange,
.glow-purple { display: none !important; }

/* 同一批光暈，但用**偽元素**實作的那些。
   ⚠️ 這是今天第三次被同一件事咬到：上面那組選擇器是照「名字有沒有 glow」挑的，
      而偽元素不在 DOM 裡、名字裡也沒有 glow，所以三次都漏——
      節點圖（.brain-node）、回頂端鈕（inline style）、現在是 .hero::before。
      **用語意名猜選擇器，一定會漏掉實作方式不同的同類元素。**

   ⚠️ 它不只是難看，還是一個實際的版面 bug：
      這顆是 600–800px 寬、置中的模糊圓，在 390px 的手機上左右各撐出約 105px，
      body 的 scrollWidth 因此比視窗寬 —— 而 opacity 只有 .05～.06，**根本看不見**。
      看不見的東西撐寬版面，是最難查的那一類。

   套用範圍：只有載入本檔的頁面會受影響，而其中有這顆光暈的正好是
   about / cases / contact / faq 四頁（全部都是 blur + 低透明度的裝飾）。
   其餘用 .hero::before 做別的事的頁面（atlas-* / demo / tech-moat…）沒有載入本檔，不受波及。 */
.hero::before,
.cta-section::before { display: none !important; }

/* ⚠️ 上面兩條是逐一列舉，而我已經列了兩次（先 .hero::before，量完發現還有
   .cta-section::before，同一種寫法、同一個毛病）。**清單型的修法就是這樣一直漏。**
   所以再加一道不依賴清單的守衛：任何頁面都不該有橫向捲動。
   這條治的是「症狀」，上面兩條治的是「原因」——兩個都要，
   因為下一顆裝飾光暈長出來時，沒有人會記得回來加第三條選擇器。

   用 overflow-x: clip 不用 hidden：hidden 會建立捲動容器，
   讓子孫的 position:sticky 失效（首頁的滾動敘事正靠 sticky）；clip 不會。 */
body { overflow-x: clip; }

.nav-cta,
.btn-glow {
  animation: none !important;
  box-shadow: none !important;
  background: var(--accent);
  color: #fff;
}
.nav-cta:hover,
.btn-glow:hover {
  transform: translateY(-1px);      /* 微位移取代放大＋發光 */
  box-shadow: none !important;
}

/* ③ 標題的漸層文字：改成單色。
   -webkit-text-fill-color 一定要一起還原成 currentColor——
   只改 background 的話字會保持透明，變成**看不見的標題**。 */
.scene-title em,
h1 em, h2 em {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--accent);
  font-style: normal;
}

/* 進度條原本是 cyan→orange 漸層，同色化後就是純色 */
.progress-bar { background: var(--accent) !important; }

/* 首頁的節點圖：八顆節點各自帶 box-shadow 光暈 ＋ pulse-node 呼吸動畫。
   ⚠️ 我上面的 .glow / #mouse-glow 一條都沒抓到它們——它們的樣式掛在
   [data-csp-s="x724f9619"] 這種雜湊選擇器上（CSP 化把 inline style 抽成雜湊），
   選擇器名字裡沒有 "glow" 這個字。**用語意命名去猜選擇器就是這樣漏的**，
   要回去看實際的 CSS 才找得到。共同 class 是 .brain-node，一條收齊八顆。 */
.brain-node {
  box-shadow: none !important;
  animation: none !important;
}

/* ── 編輯排版：讓它讀起來像雜誌不像 dashboard ──────────────────── */

/* 中文標題上襯線。Noto Serif TC 在 wrap 站用過、系統的 Songti TC 是後備，
   兩者都不是禁用的 generic 字體（Inter/Roboto/Arial/Helvetica）。 */
.scene-title, h1, h2 {
  font-family: "Noto Serif TC", "Songti TC", Georgia, serif;
  letter-spacing: .01em;
}

/* 內文行高放寬——參考站的共同特徵是「敢空」 */
.scene-sub, p { line-height: 1.85; }

/* 導覽列在淺色底下要換底色，不然捲動後那層半透明黑會蓋在米白上 */
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── Cookie 同意橫幅 ────────────────────────────────────────────
   原本寫死 rgba(5,5,16,.95) 深藍底 ＋ #94a3b8 灰藍字 ＋ #f97316 亮橘鈕，
   淺色模式下整條是唯一一塊深色，而且它固定在畫面底部**每個新訪客都會看到**——
   第一眼就破功。
   ⚠️ 它的樣式同樣掛在雜湊選擇器上（見上方 .brain-node 的說明），
   全站每頁共用同一組雜湊，所以在這裡覆蓋一次就全站生效。 */
[data-csp-s="x8f687615"] {                 /* 橫幅本體 */
  background: color-mix(in srgb, var(--bg-soft) 96%, transparent) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--dim) !important;
}
[data-csp-s="x1f096a36"] { color: var(--accent) !important; }   /* 隱私政策連結 */
[data-csp-s="x3e557f23"] {                 /* 「接受」主要鈕 */
  background: var(--accent) !important;
  color: #fff !important;
}
[data-csp-s="x1a03bf30"] {                 /* 「僅必要」次要鈕 */
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* ── 右下角浮動鈕：排成一欄 ────────────────────────────────────
   Joey 2026-08-07：「右下那一坨不太對」。實際量出來確實是一坨——
   三顆鈕的右邊距各是 24 / 28 / 16，而且**回頂端（bottom 100–144）
   和主題鈕（bottom 84–126）有 26px 是重疊的**，滑鼠移過去會點到另一顆。

   ⚠️ 這是我加主題鈕造成的：我只確認了「不要蓋到客服氣泡」（bottom 84 > 56+24），
      沒有去看那一區還有沒有第三顆。**只跟已知的那一顆比對，就會撞上沒去查的那一顆。**

   排法：以客服氣泡（56 寬、右 24）的中軸為準，其餘兩顆置中對齊，
   由下而上固定間距 12px。回頂端放最上面——它是捲動後才出現的，
   放中間會在出現時把上面那顆頂走，畫面會跳。 */
:root { --fab-lift: 0px; }   /* Cookie 橫幅顯示時墊高用，見下方 */

#joey-chatbot-btn {
  bottom: calc(24px + var(--fab-lift)) !important;
  right: 24px !important;
}
.theme-toggle {
  bottom: calc(92px + var(--fab-lift)) !important;
  right: 31px !important;    /* 42 寬置中於 56 寬的中軸：24 + (56-42)/2 */
}
/* 回頂端鈕是 JS 用 inline cssText 產生的（assets/csp/index.5.js），
   inline 樣式的優先度高過任何選擇器——**只有 !important 蓋得掉**。
   它沒有 id 也沒有 class，只能靠 aria-label 抓。 */
button[aria-label="回到頂端"] {
  bottom: calc(146px + var(--fab-lift)) !important;
  right: 30px !important;    /* 44 寬置中：24 + (56-44)/2 */
  box-shadow: none !important;   /* 它自帶橘色光暈，屬於要拔掉的 AI 感 */
}

/* Cookie 橫幅出現時整欄要讓開。橫幅是滿版固定在最底、z-index 9999，
   手機上高 141px——**主題鈕原本整顆被埋在橫幅底下**，看起來就是「一坨」。
   :has() 讓這件事純 CSS 就能做（橫幅由既有 JS 設 inline display:block）。 */
body:has(#cookieConsent[style*="block"]) { --fab-lift: 90px; }
@media (max-width: 560px) {
  body:has(#cookieConsent[style*="block"]) { --fab-lift: 152px; }
}

/* ── 主題切換鈕 ──────────────────────────────────────────────── */
/* ⚠️ 這裡只管長相，**位置一律在上面的浮動鈕區統一管**。
   位置寫兩處是這次「一坨」的成因之一：改了一處以為改完了。 */
.theme-toggle {
  position: fixed; z-index: 300;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; padding: 0;
  transition: transform .15s ease, background .2s ease;
}
.theme-toggle:hover { transform: translateY(-2px); background: var(--card-hover); }

/* ── nexus 落地頁的頁尾回程連結（J1086，2026-08-08）───────────── */
/* 這排只出現在 nexus.html。它的導覽列是頁內錨點（#pillars/#flow/#pricing），
   從全站導覽列點進來的人原本沒有任何路回得去其他頁。
   ⚠️ 樣式寫在 theme.css 而不是 nexus.css，是因為 theme.css 在 nexus.css
      之後載入——寫在 nexus.css 會被主題層的 .footer a 顏色覆蓋。 */
.footer-sitelinks {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px 28px;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.footer-sitelinks a {
  color: var(--text); text-decoration: none;
  font-size: 15px; opacity: .85;
  transition: opacity .2s ease;
}
.footer-sitelinks a:hover { opacity: 1; text-decoration: underline; }
/* 鍵盤使用者要看得到焦點——hover 樣式對他們不存在。 */
.footer-sitelinks a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; opacity: 1; }