/* redesign-v2.css — 設計稿視覺整合 (redesign-20260426-v1, updated redesign-20260511) */
/* 不可取代 styles.css，僅疊加新視覺語言 */

html { scroll-behavior: smooth; }

/* 文字選取反白：品牌橘半透明（light/dark 通用，color:inherit 保可讀性）*/
::selection {
  background: rgba(217,119,6,0.18);
  color: inherit;
}
body.light ::selection {
  background: rgba(217,119,6,0.22);
}

/* ===== Light mode design tokens ===== */
body {
  --rd-bg:        #ffffff;
  --rd-bg-elev:   #f8fafc;
  --rd-text:      #0f172a;
  --rd-text-muted: rgba(15,23,42,0.65);
  --rd-border:    rgba(15,23,42,0.08);
  --rd-card-bg:   #ffffff;
}
body.light {
  --rd-bg:        #f8fafc;
  --rd-bg-elev:   #ffffff;
  --rd-text:      #0f172a;
  --rd-text-muted: rgba(15,23,42,0.65);
  --rd-border:    rgba(15,23,42,0.10);
  --rd-card-bg:   #ffffff;
}
.dark body {
  --rd-bg:        #0f172a;
  --rd-bg-elev:   #0b1424;
  --rd-text:      #f1f5f9;
  --rd-text-muted: rgba(241,245,249,0.65);
  --rd-border:    rgba(255,255,255,0.08);
  --rd-card-bg:   #0f1d2e;
}

/* ===== Body light mode explicit color ===== */
body.light {
  background: #f8fafc;
  color: #0f172a;
}

/* ---------- Themed surfaces ---------- */
.dark body { background:#0f172a; color:#f1f5f9; }

.surface-1 { background: #ffffff; }
.dark .surface-1 { background: #0f172a; }
.surface-2 { background: #f1f5f9; }
.dark .surface-2 { background: #0b1424; }

.border-soft { border-color: rgba(15,23,42,0.08); }
.dark .border-soft { border-color: rgba(255,255,255,0.08); }

.text-muted-redesign { color: rgba(15,23,42,0.65); }
.dark .text-muted-redesign { color: rgba(241,245,249,0.65); }
.text-dimmer { color: rgba(15,23,42,0.60); }
.dark .text-dimmer { color: rgba(241,245,249,0.45); }

/* ---------- Card primitive ---------- */
.rd-card {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dark .rd-card {
  background: #0f1d2e;
  border-color: rgba(255,255,255,0.08);
}
.rd-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,0.35);
  box-shadow: 0 18px 50px -20px rgba(0,0,0,0.45);
}

/* ---------- Buttons (new style layer) ---------- */
.rd-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.75rem 1.25rem; border-radius:.85rem;
  font-weight:600; font-size:.95rem; line-height:1;
  transition: all .2s ease;
  border: 1px solid transparent;
  white-space:nowrap;
  text-decoration: none;
}
.rd-btn-amber { background:#f59e0b; color:#0f172a; }
.rd-btn-amber:hover { background:#fbbf24; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(245,158,11,0.55); color:#0f172a; }
.rd-btn-outline-light { border-color: rgba(255,255,255,0.25); color:#f1f5f9; background:transparent; }
.rd-btn-outline-light:hover { border-color:#fff; transform:translateY(-2px); background:rgba(255,255,255,0.05); color:#f1f5f9; }
.rd-btn-outline { border-color: rgba(15,23,42,0.18); color:inherit; background:transparent; }
.dark .rd-btn-outline { border-color: rgba(255,255,255,0.18); color:#f1f5f9; }
.rd-btn-outline:hover { transform:translateY(-2px); border-color: currentColor; }
.rd-btn-red { background:#dc3545; color:#fff; }
.rd-btn-red:hover { background:#e4495a; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(220,53,69,.5); color:#fff; }
.rd-btn-blue { background:#3b82f6; color:#fff; }
.rd-btn-blue:hover { background:#5a96f8; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(59,130,246,.5); color:#fff; }
.rd-btn-cyan { background:#06b6d4; color:#0f172a; }
.rd-btn-cyan:hover { background:#22d3ee; transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(6,182,212,.5); color:#0f172a; }
.rd-btn-gold-outline { border-color:#daa520; color:#daa520; background:transparent; }
.dark .rd-btn-gold-outline { color:#fbbf24; border-color:#daa520; }
.rd-btn-gold-outline:hover { background: rgba(218,165,32,.1); transform:translateY(-2px); }
.rd-btn-gold { background: linear-gradient(135deg, #daa520, #b8860b); color:#0f172a; }
.rd-btn-gold:hover { transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(218,165,32,.6); color:#0f172a; }

/* ---------- Highlight ---------- */
.hl-amber {
  background: linear-gradient(180deg, transparent 60%, rgba(245,158,11,0.35) 60%);
  color:#fbbf24;
  font-weight:700;
  padding: 0 .15em;
}

/* ---------- Online dot pulse ---------- */
.pulse-dot {
  position:relative; display:inline-block; width:.55rem; height:.55rem;
  background:#22c55e; border-radius:9999px;
  vertical-align: middle;
}
.pulse-dot::after {
  content:''; position:absolute; inset:-4px; border-radius:9999px;
  background:#22c55e; opacity:.45; animation: rd-pulse 1.6s ease-out infinite;
}
@keyframes rd-pulse { 0%{transform:scale(.6);opacity:.6} 100%{transform:scale(2.2);opacity:0} }

/* ---------- Mesh backgrounds ---------- */
.mesh-hero {
  background:
    radial-gradient(60% 80% at 20% 10%, rgba(124,58,237,.55) 0%, rgba(124,58,237,0) 60%),
    radial-gradient(60% 80% at 90% 20%, rgba(59,130,246,.55) 0%, rgba(59,130,246,0) 60%),
    radial-gradient(80% 80% at 70% 90%, rgba(37,99,235,.6) 0%, rgba(37,99,235,0) 70%),
    linear-gradient(135deg, #2563eb, #7c3aed);
}
.mesh-subsidy {
  background:
    radial-gradient(50% 70% at 80% 20%, rgba(218,165,32,.25) 0%, transparent 60%),
    radial-gradient(60% 70% at 10% 90%, rgba(184,134,11,.3) 0%, transparent 60%),
    linear-gradient(135deg, #1a0a00, #3d1f00 40%, #5a2d00 70%, #1a0a00);
}
.mesh-pipeline {
  background:
    radial-gradient(60% 70% at 80% 30%, rgba(59,130,246,.25) 0%, transparent 60%),
    radial-gradient(60% 70% at 10% 80%, rgba(6,182,212,.18) 0%, transparent 60%),
    linear-gradient(135deg, #0d1117, #0d2137);
}

/* ===== Mesh Section — Light Variant ===== */

/* --- mesh-subsidy light --- */
body.light .mesh-subsidy {
  background:
    radial-gradient(50% 70% at 80% 20%, rgba(251,191,36,.30) 0%, transparent 60%),
    radial-gradient(60% 70% at 10% 90%, rgba(217,119,6,.20) 0%, transparent 60%),
    linear-gradient(135deg, #fef3c7, #fde68a 40%, #fcd34d 100%);
  color: #1c1917;
  border-bottom-color: #d97706 !important;
}
body.light .mesh-subsidy *:not(.rd-chat-card):not(.rd-chat-card *) {
  color: inherit;
}
body.light .mesh-subsidy h1,
body.light .mesh-subsidy h2,
body.light .mesh-subsidy h3 {
  color: #1c1917;
}
body.light .mesh-subsidy p,
body.light .mesh-subsidy li,
body.light .mesh-subsidy span:not([class*="text-"]) {
  color: #44403c;
}
/* subsidy stat card — 原 rgba(255,255,255,0.65) 改深色 */
body.light .mesh-subsidy .subsidy-stat-card [style*="rgba(255,255,255,0.65)"],
body.light .mesh-subsidy .subsidy-stat-card [style*="rgba(255,255,255,0.6)"] {
  color: #78716c !important;
}
/* subsidy badge/button */
body.light .mesh-subsidy a[style*="rgba(255,255,255,0.1)"] {
  background: rgba(120,53,15,.08) !important;
  border-color: rgba(120,53,15,.20) !important;
  color: #78350f !important;
}
/* subsidy stat card 背景 */
body.light .mesh-subsidy .subsidy-stat-card {
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(180,120,0,.20) !important;
}

/* --- mesh-hero light --- */
body.light .mesh-hero {
  background:
    radial-gradient(60% 80% at 20% 10%, rgba(139,92,246,.25) 0%, rgba(139,92,246,0) 60%),
    radial-gradient(60% 80% at 90% 20%, rgba(99,102,241,.20) 0%, rgba(99,102,241,0) 60%),
    radial-gradient(80% 80% at 70% 90%, rgba(79,70,229,.22) 0%, rgba(79,70,229,0) 70%),
    linear-gradient(135deg, #ede9fe, #ddd6fe 50%, #c4b5fd 100%);
  color: #1e1b4b;
}
body.light .mesh-hero h1,
body.light .mesh-hero h2,
body.light .mesh-hero h3 {
  color: #1e1b4b;
}
body.light .mesh-hero p,
body.light .mesh-hero li {
  color: #3730a3;
}
/* hero badge pill */
body.light .mesh-hero a[style*="rgba(255,255,255,0.1)"] {
  background: rgba(99,102,241,.12) !important;
  border-color: rgba(99,102,241,.25) !important;
  color: #312e81 !important;
}
/* hero mini stat cards — 原 rgba(255,255,255,0.05) */
body.light .mesh-hero .rounded-xl[style*="rgba(255,255,255,0.05)"] {
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(99,102,241,.20) !important;
}
/* chat card 下方 caption — 原 rgba(255,255,255,0.7) */
body.light .rd-chat-card ~ div[style*="rgba(255,255,255,0.7)"] {
  color: #4338ca !important;
}

/* --- mesh-pipeline light --- */
body.light .mesh-pipeline {
  background:
    radial-gradient(60% 70% at 80% 30%, rgba(59,130,246,.20) 0%, transparent 60%),
    radial-gradient(60% 70% at 10% 80%, rgba(6,182,212,.15) 0%, transparent 60%),
    linear-gradient(135deg, #dbeafe, #bfdbfe 50%, #93c5fd 100%);
  color: #0c4a6e;
}
body.light .mesh-pipeline h1,
body.light .mesh-pipeline h2,
body.light .mesh-pipeline h3 {
  color: #0c4a6e;
}
body.light .mesh-pipeline p,
body.light .mesh-pipeline li,
body.light .mesh-pipeline span:not([class*="text-"]) {
  color: #075985;
}

/* ===== inline style="color:rgba(255,255,255,...)" override — light mode !important ===== */
/* 蓋過 ul/ol 直接寫 inline style="color:rgba(255,255,255,0.9)" 的情況 */
body.light .mesh-subsidy [style*="color:rgba(255,255,255"],
body.light .mesh-subsidy [style*="color: rgba(255,255,255"] {
  color: #44403c !important;
}
body.light .mesh-subsidy ul li,
body.light .mesh-subsidy ol li {
  color: #44403c !important;
}
body.light .mesh-subsidy .text-white {
  color: #1c1917 !important;
}
body.light .mesh-hero [style*="color:rgba(255,255,255"],
body.light .mesh-hero [style*="color: rgba(255,255,255"] {
  color: #3730a3 !important;
}
body.light .mesh-hero ul li,
body.light .mesh-hero ol li {
  color: #3730a3 !important;
}
body.light .mesh-hero .text-white {
  color: #1e1b4b !important;
}
body.light .mesh-pipeline [style*="color:rgba(255,255,255"],
body.light .mesh-pipeline [style*="color: rgba(255,255,255"] {
  color: #075985 !important;
}
body.light .mesh-pipeline ul li,
body.light .mesh-pipeline ol li {
  color: #075985 !important;
}
body.light .mesh-pipeline .text-white {
  color: #0c4a6e !important;
}

/* ===== dot-grid opacity — light 版調低 ===== */
body.light .mesh-subsidy  .dot-grid { opacity: 0.18; }
body.light .mesh-hero     .dot-grid { opacity: 0.20; }
body.light .mesh-pipeline .dot-grid { opacity: 0.22; }

/* ---------- Quote glyph ---------- */
.quote-glyph::before {
  content:'\201C';
  position:absolute; top:-2.5rem; left:1rem;
  font-family: Georgia, serif;
  font-size: 9rem; line-height:1;
  color: rgba(245,158,11,0.12);
  pointer-events:none;
}

/* ---------- Grain/dotted bg ---------- */
.dot-grid {
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------- Nav dropdown (redesign) ---------- */
.rd-nav-dropdown { position:relative; }
.rd-nav-dropdown > .rd-menu {
  position:absolute; top: calc(100% + .5rem); left:0;
  min-width: 240px;
  background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:14px;
  box-shadow: 0 20px 50px -15px rgba(15,23,42,.25);
  padding:.5rem; opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.dark .rd-nav-dropdown > .rd-menu {
  background:#0f1d2e; border-color: rgba(255,255,255,.08);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.6);
}
.rd-nav-dropdown:hover > .rd-menu,
.rd-nav-dropdown:focus-within > .rd-menu { opacity:1; visibility:visible; transform:translateY(0); }
.rd-menu a {
  display:flex; align-items:center; padding:.6rem .75rem; border-radius:9px;
  font-size:.92rem; color:inherit; gap:.6rem;
  text-decoration: none;
}
.rd-menu a:hover { background: rgba(245,158,11,.08); color:#f59e0b; }

/* ---------- Announcement shimmer ---------- */
.ann-shimmer {
  background: linear-gradient(90deg, #b8860b, #daa520, #b8860b);
  background-size: 200% 100%;
  animation: rd-shimmer 8s linear infinite;
}
@keyframes rd-shimmer { 0%{background-position:0 0} 100%{background-position:200% 0} }

/* Stats */
.stat-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Chat bubbles */
.bubble {
  max-width: 85%;
  padding: .65rem .85rem;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.45;
}
.bubble-user { background:#3b82f6; color:#fff; border-bottom-right-radius:4px; margin-left:auto; }
.bubble-bot { background: rgba(255,255,255,0.08); color:#f1f5f9; border:1px solid rgba(255,255,255,0.08); border-bottom-left-radius:4px; }
.light .bubble-bot { background:#f1f5f9; color:#0f172a; border-color: rgba(15,23,42,0.08); }

/* Announcement hide */
.ann-hidden { display:none !important; }

/* Mobile menu */
.rd-mobile-menu { transition: max-height .25s ease, opacity .25s ease, transform .25s ease; max-height: 600px; overflow: hidden; }
.rd-mobile-menu.hidden-m { max-height: 0; transform: translateY(-10px); opacity:0; pointer-events:none; }

/* Footer link hover */
.flink { transition: color .15s ease; text-decoration:none; }
.flink:hover { color:#fbbf24; }

/* Section dividers */
.section-divider { height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
.light .section-divider { background: linear-gradient(90deg, transparent, rgba(15,23,42,0.08), transparent); }

/* Featured card highlight ring */
.ring-feature {
  position:relative;
}
.ring-feature::before {
  content:''; position:absolute; inset:-1px; border-radius:17px;
  background: linear-gradient(135deg, rgba(220,53,69,.55), rgba(220,53,69,0) 60%);
  z-index:-1;
}

/* Reveal on scroll */
.reveal { opacity:0; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease; }
.reveal.in { opacity:1; transform: translateY(0); }

/* Above-the-fold fallback */
.reveal-atf { opacity:1; transform: translateY(0); }
.reveal-atf.reveal { opacity:0; transform: translateY(16px); }
.reveal-atf.in { opacity:1; transform: translateY(0); }

/* noscript / no-JS fallback */
@media (prefers-reduced-motion: reduce) {
  /* 世界級 a11y（WCAG 2.3.3）：尊重「減少動態」偏好——關閉所有非必要動畫/transition。
     原本只關 .reveal，未涵蓋裝飾動畫(hs-float/hs-spin/sq-blink/rd-pulse/rd-shimmer)。
     全域 reset 為 a11y 社群標準寫法；0.01ms 而非 0 以保留 transitionend 事件不破 JS。 */
  .reveal { opacity:1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- New navbar (redesign) ---------- */
#rd-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(15,23,42,0.08);
}
.dark #rd-nav {
  background: rgba(15,23,42,0.7);
  border-bottom-color: rgba(255,255,255,0.08);
}
#rd-ann {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Announcement z-index stacking with new navbar */
#rd-ann + #rd-nav {
  top: 0;
}

/* Theme toggle button */
#rd-theme-toggle,
#hs-theme-toggle {
  width: 2.25rem; height: 2.25rem;
  border-radius: .5rem;
  border: 1px solid rgba(15,23,42,0.12);
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  color: rgba(255,255,255,0.7);
}
.dark #rd-theme-toggle,
.dark #hs-theme-toggle {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}
#rd-theme-toggle:hover,
#hs-theme-toggle:hover { border-color: #f59e0b; color: #f59e0b; }

body.light #hs-theme-toggle {
  border-color: rgba(15,23,42,0.20);
  color: #0f172a;
}

/* Show/hide theme icons */
.dark .icon-sun { display:inline-block !important; }
.dark .icon-moon { display:none !important; }
.icon-sun { display:none; }
.icon-moon { display:inline-block; }

/* ===== Navbar nav link color in light mode ===== */
body.light #rd-nav nav a,
body.light #rd-nav nav button {
  color: #1e293b;
}
body.light #rd-nav nav a:hover,
body.light #rd-nav nav button:hover {
  color: #f59e0b;
}

/* Navbar brand text */
body.light #rd-nav .font-bold {
  color: #0f172a;
}

body.light #rd-theme-toggle,
body.light #hs-theme-toggle {
  border-color: rgba(15,23,42,0.20);
  color: #0f172a;
}
body.light #rd-theme-toggle .icon-moon,
body.light #hs-theme-toggle .icon-moon {
  color: #b45309;
}

/* ===== rd-btn-outline-light safety override for light surfaces ===== */
body.light .surface-1 .rd-btn-outline-light,
body.light .surface-2 .rd-btn-outline-light {
  color: #1e293b !important;
  border-color: rgba(15,23,42,0.25) !important;
  background: transparent;
}
body.light .surface-1 .rd-btn-outline-light:hover,
body.light .surface-2 .rd-btn-outline-light:hover {
  background: rgba(15,23,42,0.05) !important;
}

/* ---------- Light mode: Amber Accent 對比度 ---------- */
body.light .rd-btn-amber,
body.light .rd-btn-amber:link,
body.light .rd-btn-amber:visited {
  background: #d97706;
  color: #fff;
}
body.light .rd-btn-amber:hover {
  background: #b45309;
}

/* ---------- Light mode: Chat card 白底 ---------- */
body.light .rd-chat-card {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(15,23,42,0.10) !important;
  color: #0f172a;
}
body.light .rd-chat-card .rd-chat-glow {
  background: rgba(15,23,42,0.04) !important;
}

/* ---------- Light mode: dot-grid 深色點 ---------- */
body.light .dot-grid {
  background-image: radial-gradient(rgba(15,23,42,0.08) 1px, transparent 1px) !important;
}

/* ---------- 打工仔頁：intentional dark，不被 body.light 影響 ---------- */
/* 舊規則已移除；dagongzai light mode 由下方「dagongzai 全面淺色化」區塊統管 */


/* ---------- Subsidy hero number card ---------- */
.subsidy-stat-card {
  border-radius: 1.5rem;
  border: 1px solid rgba(218,165,32,0.25);
  background: linear-gradient(135deg, rgba(154,100,0,0.3), rgba(30,15,0,0.4) 40%, rgba(0,0,0,0.4));
  backdrop-filter: blur(12px);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 50px -25px rgba(0,0,0,.8);
}
.subsidy-stat-card::before {
  content:'';
  position:absolute; top:-4rem; right:-4rem;
  width:16rem; height:16rem;
  border-radius:9999px;
  background: rgba(245,158,11,0.2);
  filter: blur(40px);
}

/* ---------- Hero chat mockup ---------- */
.rd-chat-card {
  border-radius: 1.5rem;
  background: rgba(15,29,46,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 60px -20px rgba(0,0,0,.8);
  overflow: hidden;
}
.rd-chat-glow {
  position: absolute;
  inset: -1rem;
  background: rgba(255,255,255,0.1);
  filter: blur(1.5rem);
  border-radius: 2rem;
  z-index: -1;
}

/* ===================================================================
 * T3 Mobile RWD — Bug 2 Fix (2026-04-26)
 * 根因：
 *   1. .rd-btn (display:inline-flex) 覆蓋 Tailwind .hidden (display:none)
 *      → navbar CTA buttons 在 <640px 溢出 viewport 右側
 *   2. about 頁聯絡 email 長字串無換行控制 → scrollWidth > 375
 *   3. footer / hero min-height 在 mobile 累積過高
 * =================================================================== */

/* ---- 1. Navbar: 強制 .hidden 在 mobile (<640px) 不被 .rd-btn 覆蓋 ---- */
@media (max-width: 639px) {
  /* sm: breakpoint boundary: Tailwind sm = 640px
     .hidden.sm\:inline-flex 在 375px 下必須為 none，
     但 .rd-btn display:inline-flex 後置 cascade 覆蓋了 Tailwind .hidden。
     用 !important 補上。 */
  #rd-nav .hidden {
    display: none !important;
  }
  /* hamburger menu button: 確保 lg:hidden 按鈕正常顯示 */
  #rd-nav button.lg\:hidden {
    display: flex !important;
  }
}

/* ---- 2. lg:hidden nav items: 桌機版隱藏 (<1024px) ---- */
@media (min-width: 1024px) {
  #rd-nav .lg\:hidden {
    display: none !important;
  }
}

/* ---- 3. About 頁聯絡 email — 長字串 break-word ---- */
.contact-list a,
.footer-contact-list a,
a[href^="mailto:"] {
  overflow-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
}

/* ---- 4. Footer mobile — 縮小 padding/margin ---- */
@media (max-width: 767px) {
  footer {
    padding-top: 36px !important;
    padding-bottom: 20px !important;
    margin-top: 40px !important;
  }
  footer .row {
    row-gap: 1.25rem !important;
  }
  .footer-heading {
    margin-bottom: 0.5rem !important;
  }
}

/* ---- 5. hero-* min-height 在 mobile 收緊 ---- */
@media (max-width: 575px) {
  .hero-squid,
  .hero-lf,
  .hero-tianji,
  .hero-aicad,
  .hero-domino,
  .hero-pipeline,
  .hero-mcp,
  .hero-triton,
  .hero-lids,
  .hero-localids {
    min-height: auto !important;
  }
  /* jumbotron (about 頁) padding 收緊 */
  .jumbotron {
    padding: 48px 16px !important;
  }
  .jumbotron p.lead {
    font-size: 1rem !important;
  }
}

/* ---- 6. Home sections: Tailwind py-N 在 mobile 收緊 ---- */
/* py-14=3.5rem、py-16=4rem、py-20=5rem、py-24=6rem、py-28=7rem → mobile max 2.5rem */
@media (max-width: 575px) {
  .py-14, section.py-14 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-16, section.py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-20, section.py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-24, section.py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-28, section.py-28 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  /* inner wrapper padding */
  .max-w-7xl[class*="py-14"],
  .max-w-7xl[class*="py-16"],
  .max-w-7xl[class*="py-20"],
  .max-w-7xl[class*="py-24"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ---- 7. Images: 確保圖片不溢出 ---- */
img {
  max-width: 100%;
  height: auto;
}

/* ---- 8. Global overflow guard ---- */
@media (max-width: 639px) {
  body {
    overflow-x: hidden;
  }
  .container,
  .container-fluid {
    overflow-x: hidden;
  }
}

/* ====================================================================== */
/* == 打工仔 (Dagongzai) Design Tokens — feat/dagongzai-redesign       == */
/* == 僅限 dagongzai.php 使用，不污染全域                               == */
/* ====================================================================== */

/* CSS custom properties — 全頁共用色彩錨點 */
:root {
  --dz-primary:      #0A1628;   /* HS Design System v2 深海軍藍 */
  --dz-primary-2:    #0D1E38;
  --dz-cta-primary:  #F5A623;   /* HS Design System v2 琥珀金 */
  --dz-accent:       #7986cb;   /* indigo — 標籤 / 次要 UI */
  --dz-success:      #66bb6a;   /* 接案方功能色 */
  --dz-teal:         #8ec5c0;   /* LOGO / badge */
  --dz-bg:           #0A1628;   /* HS Design System v2 深海軍藍 */
}

/* 打工仔按鈕共用基礎 */
@layer components {
  .dz-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.025em;
    transition: transform 200ms, box-shadow 200ms;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
  }
  .dz-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  }
  .dz-btn-amber {
    background: var(--dz-cta-primary);
    color: #0f172a;
  }
  .dz-btn-amber:hover {
    background: #fbbf24;
    color: #0f172a;
  }
  .dz-btn-indigo {
    background: transparent;
    color: #c7d2fe;
    border: 1.5px solid var(--dz-accent);
  }
  .dz-btn-indigo:hover {
    background: rgba(121,134,203,0.15);
    color: #c7d2fe;
  }
}

/* Hero 漸層背景 — HS Design System v2 深海軍藍 */
.dz-hero-bg {
  background: linear-gradient(135deg, #0A1628 0%, #0D1E38 60%, #112244 100%);
}

/* 底部暖色 CTA 漸層 */
.dz-cta-warm {
  background: linear-gradient(135deg, #78350f 0%, #92400e 50%, #b45309 100%);
}

/* 統計 widget 卡片 */
.dz-stat-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  backdrop-filter: blur(8px);
  transition: transform 200ms;
}
.dz-stat-card:hover { transform: translateY(-2px); }

/* 功能區 role chip (wave 2b2: dz-role-chip → dz-chip) */
.dz-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dz-chip-employer {
  background: rgba(245,158,11,0.15);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,0.3);
}
.dz-chip-freelancer {
  background: rgba(102,187,106,0.15);
  color: #86efac;
  border: 1px solid rgba(102,187,106,0.3);
}

/* 見證卡片 */
.dz-testimonial-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(121,134,203,0.2);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 200ms, box-shadow 200ms;
}
.dz-testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(121,134,203,0.15);
}

/* Mobile sticky CTA bar */
.dz-sticky-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.75rem 1rem;
  display: flex;
  gap: 0.75rem;
}

/* section 間距 */
.dz-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (max-width: 768px) {
  .dz-section { padding-top: 4rem; padding-bottom: 4rem; }
  /* Mobile: 頁面底部留白，避免被 sticky bar 遮擋 */
  .dz-page-wrapper { padding-bottom: 5rem; }
}

/* Placeholder 數字樣式提示（待行銷填入真實數據） */
.dz-placeholder {
  font-style: italic;
  opacity: 0.8;
}

/* ======================================================================
 * HS Design System v2 — redesign-20260511
 * 新設計語言 CSS（深海軍藍 + 琥珀金）
 * 僅加在 home 等新設計頁，不影響現有 .rd-* classes
 * ====================================================================== */

/* --- HS Design Tokens --- */
:root {
  --hs-bg:          #070912;
  --hs-bg-1:        #0b1020;
  --hs-bg-2:        #10162a;
  --hs-panel:       #131a30;
  --hs-panel-2:     #1a2240;
  --hs-hairline:    rgba(255,255,255,0.08);
  --hs-hairline-2:  rgba(255,255,255,0.14);
  /* surface/border 別名（products 等頁 inline 用到但從未定義 → 背景透明/邊框消失，補上）*/
  --hs-surface:     #131a30;             /* = --hs-panel 卡片表面 */
  --hs-border:      rgba(255,255,255,0.08); /* = --hs-hairline */
  --hs-fg:          #f5f6fa;
  --hs-fg-dim:      #b6bdd1;
  --hs-fg-mute:     #7c85a0;
  --hs-accent:      #ffc24a;
  --hs-accent-2:    #ffd37a;
  --hs-accent-deep: #a3690f;
  --hs-accent-glow: 255,194,74;
  --hs-radius:      14px;
  --hs-radius-lg:   22px;
  --hs-radius-sm:   8px;
  --hs-maxw:        1240px;
}

/* --- HS Navbar (hs-nav.js に対応) --- */
.hs-announce {
  height: 40px; display: flex; align-items: center; justify-content: center;
  padding: 0 20px;
  background: linear-gradient(90deg, rgba(255,194,74,0.08), rgba(255,194,74,0.16), rgba(255,194,74,0.08));
  border-bottom: 1px solid rgba(255,194,74,0.18);
  font-size: 13px; color: #ffd37a; position: relative; text-align: center; line-height: 1.3;
  font-family: "Noto Sans TC","Inter",system-ui,sans-serif;
}
.hs-announce .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #ffc24a;
  box-shadow: 0 0 12px rgba(255,194,74,0.7); margin-right: 10px; flex: none;
}
.hs-announce a {
  margin-left: 12px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); text-decoration: none;
}

.hs-nav {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(7,9,18,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: "Noto Sans TC","Inter",system-ui,sans-serif;
}
.hs-nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 32px;
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hs-brand {
  display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 18px;
  letter-spacing: 0.02em; color: #f5f6fa; text-decoration: none; flex: none;
}
.hs-brand-mark {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  color: #8ec5c0; flex: none;
}
.hs-brand-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hs-brand small {
  display: block; font-size: 10px; font-weight: 500; color: #7c85a0;
  letter-spacing: 0.2em; margin-top: 2px;
}

.hs-nav-links {
  display: flex; gap: 30px; font-size: 15px; color: #b6bdd1;
  align-items: center; flex: 1; justify-content: center;
}
.hs-nav-item { position: relative; }
.hs-nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 26px 0;
  color: inherit; text-decoration: none; background: transparent; border: none;
  font: inherit; cursor: pointer; transition: color .18s; font-family: inherit; line-height: 1;
}
.hs-nav-link:hover, .hs-nav-item.is-active > .hs-nav-link { color: #f5f6fa; }
.hs-nav-item.is-active > .hs-nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: #ffc24a; border-radius: 2px;
}
.hs-nav-link .chev {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.55; transition: transform .2s; display: inline-block;
}
.hs-nav-item:hover .hs-nav-link .chev { transform: rotate(225deg) translateY(-1px); opacity: 1; }

.hs-dropdown {
  position: absolute; top: calc(100% - 4px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px;
  background: rgba(11,16,32,0.96); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  padding: 10px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 80;
}
.hs-nav-item:hover .hs-dropdown,
.hs-nav-item:focus-within .hs-dropdown {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.hs-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

.hs-drop-item {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 9px;
  color: #dfe3f2; text-decoration: none; transition: background .15s, color .15s; line-height: 1.35;
}
.hs-drop-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.hs-drop-item.is-active { background: rgba(255,194,74,0.10); color: #ffd37a; }
.hs-drop-item .lbl { font-size: 14px; font-weight: 600; }
.hs-drop-item .desc { font-size: 12px; color: #7c85a0; }
.hs-drop-item.is-active .desc { color: rgba(255,211,122,0.75); }

.hs-nav-ctrl { display: flex; align-items: center; gap: 12px; flex: none; }
.hs-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px;
  /* !important 蓋過 nav 連結色覆寫（淺金底配近白字僅 ~1.5:1）*/
  background: #ffc24a; color: #1a1000 !important; font-weight: 600; font-size: 14px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(255,194,74,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .15s, box-shadow .2s; white-space: nowrap;
}
.hs-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(255,194,74,0.42), inset 0 1px 0 rgba(255,255,255,0.5);
  color: #1a1000 !important;
}

.hs-burger {
  display: none; width: 40px; height: 40px; border-radius: 8px; background: transparent;
  border: 1px solid rgba(255,255,255,0.14); cursor: pointer;
  align-items: center; justify-content: center; flex: none; padding: 0;
}
.hs-burger span {
  display: block; width: 18px; height: 1.5px; background: #f5f6fa; position: relative;
  transition: transform .25s, opacity .2s;
}
.hs-burger span::before,
.hs-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: #f5f6fa; transition: transform .25s;
}
.hs-burger span::before { top: -6px; }
.hs-burger span::after  { top:  6px; }
.hs-burger.is-open span { background: transparent; }
.hs-burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.hs-burger.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* mobile sheet */
.hs-sheet {
  position: fixed; inset: 0; background: rgba(7,9,18,0.98); backdrop-filter: blur(20px);
  z-index: 55; padding: 96px 24px 32px; overflow-y: auto;
  display: none; flex-direction: column; gap: 8px;
  font-family: "Noto Sans TC","Inter",system-ui,sans-serif;
}
.hs-sheet.is-open { display: flex; }
.hs-sheet-group { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 12px 0; }
.hs-sheet-link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px 4px; font-size: 18px; font-weight: 600; color: #f5f6fa;
  text-decoration: none; background: transparent; border: none; font-family: inherit; cursor: pointer;
}
.hs-sheet-link.is-active { color: #ffc24a; }
.hs-sheet-link .chev {
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.6; transition: transform .2s;
}
.hs-sheet-group.is-open .hs-sheet-link .chev { transform: rotate(225deg); }
.hs-sheet-children { display: none; flex-direction: column; gap: 2px; padding: 4px 4px 12px; }
.hs-sheet-group.is-open .hs-sheet-children { display: flex; }
.hs-sheet-child {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px;
  color: #b6bdd1; text-decoration: none; line-height: 1.35;
}
.hs-sheet-child:hover { background: rgba(255,255,255,0.04); color: #fff; }
.hs-sheet-child.is-active { color: #ffd37a; background: rgba(255,194,74,0.08); }
.hs-sheet-child .lbl { font-size: 15px; font-weight: 600; }
.hs-sheet-child .desc { font-size: 12px; color: #7c85a0; }
.hs-sheet-bottom { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }

/* hs-nav responsive */
@media (max-width: 920px) {
  .hs-nav-links { display: none; }
  .hs-nav-ctrl .hs-cta { display: none; }
  .hs-burger { display: inline-flex; }
  .hs-nav-inner { padding: 0 20px; gap: 12px; }
  .hs-announce { font-size: 12px; padding: 0 14px; }
}
body.hs-sheet-open { overflow: hidden; }

/* --- HS Home Page Styles --- */
.hs-page {
  background: var(--hs-bg);
  color: var(--hs-fg);
  font-family: "Noto Sans TC","Inter",system-ui,-apple-system,sans-serif;
  font-size: 16px; line-height: 1.6;
  background-image:
    radial-gradient(1200px 800px at 80% -10%, rgba(var(--hs-accent-glow),0.08), transparent 55%),
    radial-gradient(900px 600px at -10% 20%, rgba(80,100,200,0.06), transparent 60%);
}
.hs-wrap { max-width: var(--hs-maxw); margin: 0 auto; padding: 0 32px; }
.hs-mono { font-family: "JetBrains Mono",ui-monospace,monospace; letter-spacing: 0.02em; }
.hs-num  { font-family: "Inter",sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.hs-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono",monospace; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--hs-fg-mute);
}
.hs-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--hs-accent); }
.hs-eyebrow.accent { color: var(--hs-accent); }

.hs-page h1, .hs-page h2, .hs-page h3, .hs-page h4 {
  margin: 0; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15;
}
.hs-page h2 { font-size: 44px; font-weight: 800; }
.hs-page h3 { font-size: 22px; }
.hs-page p  { margin: 0; }
.hs-page a  { color: inherit; text-decoration: none; }

/* buttons */
.hs-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px;
  border-radius: 10px; font-size: 15px; font-weight: 600;
  transition: transform .15s, box-shadow .2s, background .2s;
  cursor: pointer; border: none; white-space: nowrap; font-family: inherit;
}
.hs-btn-primary {
  background: var(--hs-accent); color: #1a1000;
  box-shadow: 0 8px 24px rgba(var(--hs-accent-glow),0.28), inset 0 1px 0 rgba(255,255,255,0.5);
  text-decoration: none;
}
/* dark 模式按鈕底是亮金 --hs-accent(#ffc24a)，需深字（白字 1.49 讀不到）。base 的
   color:#1a1000 被 .hs-page a{color:inherit}(0,1,1) 蓋過 → 用 .dark(0,2,0) 復原深字。
   light 不命中(.dark)，仍由 body.light .hs-btn-primary 的白字接手、不受影響。 */
.dark .hs-btn-primary { color: #1a1000; }
/* dark 模式 Bootstrap danger red #dc3545 在深卡上對比僅 3.75(<AA)——必填星號 +
   表單驗證錯誤訊息加亮到 AA(#f87171=6.14)。!important 蓋過 Bootstrap utility 的
   !important。light 不命中 .dark、紅字維持原色不變。 */
.dark .text-danger, .dark .invalid-feedback { color: #f87171 !important; }
.hs-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(var(--hs-accent-glow),0.42), inset 0 1px 0 rgba(255,255,255,0.5);
  color: #1a1000;
}
.hs-btn-ghost {
  background: transparent; color: var(--hs-fg);
  border: 1px solid var(--hs-hairline-2); text-decoration: none;
}
.hs-btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--hs-fg-dim); color: var(--hs-fg); }
.hs-btn .arrow::after { content: "→"; transition: transform .2s; display: inline-block; }
.hs-btn:hover .arrow::after { transform: translateX(3px); }

/* hero */
.hs-hero {
  position: relative; padding: 100px 0 120px; overflow: hidden;
  border-bottom: 1px solid var(--hs-hairline);
}
.hs-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
}
.hs-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center;
  position: relative; z-index: 2;
}
@media (max-width: 900px) {
  .hs-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  /* hero 漩渦圖純裝飾：窄螢幕浮動數據卡已 display:none，只剩近乎全透明的漩渦
     會變成 hero 與數據帶之間一大塊空白 —— 直接隱藏，手機版 hero = 文案+CTA */
  .hs-swirl-wrap { display: none; }
}

.hs-hero h1 {
  font-size: 68px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 22px 0 28px;
}
@media (max-width: 640px) { .hs-hero h1 { font-size: 42px; } }
.hs-hero h1 .em { color: var(--hs-accent); position: relative; }
.hs-hero h1 .em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px;
  background: linear-gradient(90deg, transparent, rgba(var(--hs-accent-glow),0.35), transparent);
  filter: blur(6px);
}
.hs-hero-sub {
  font-size: 18px; color: var(--hs-fg-dim); max-width: 520px; line-height: 1.7; margin-bottom: 40px;
}
.hs-hero-sub b { color: var(--hs-fg); font-weight: 600; }
.hs-hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* swirl animation */
.hs-swirl-wrap { position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
/* 修正：上方 @media(≤900) 的 .hs-swirl-wrap{display:none} 被本 base 規則(後置)蓋過而失效 →
   手機版浮動卡 display:none 後，漩渦裝飾留一大塊空白。在 base 之後重設 display:none 才生效。*/
@media (max-width: 900px) { .hs-swirl-wrap { display: none; } }
.hs-swirl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hs-swirl svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 40px rgba(var(--hs-accent-glow),0.18)); }
.hs-swirl .core {
  position: absolute; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hs-accent-glow),0.8), rgba(var(--hs-accent-glow),0.2) 40%, transparent 70%);
  filter: blur(14px);
}
.hs-swirl-rotate { animation: hs-spin 60s linear infinite; transform-origin: center; }
.hs-swirl-rotate-rev { animation: hs-spin 80s linear infinite reverse; transform-origin: center; }
@keyframes hs-spin { to { transform: rotate(360deg); } }

/* floating stat cards */
.hs-stat-card {
  position: absolute;
  background: linear-gradient(160deg, rgba(19,26,48,0.95), rgba(19,26,48,0.6));
  border: 1px solid var(--hs-hairline-2); border-radius: 14px; padding: 16px 20px;
  backdrop-filter: blur(8px); display: flex; align-items: center; gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6); z-index: 3;
}
.hs-stat-card .lbl { font-size: 10px; color: var(--hs-fg-mute); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.hs-stat-card .val { font-size: 20px; font-weight: 700; color: var(--hs-fg); }
.hs-stat-card .val .unit { font-size: 12px; color: var(--hs-fg-dim); margin-left: 4px; font-weight: 500; }
.hs-stat-card .ic {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--hs-hairline-2);
  background: rgba(var(--hs-accent-glow),0.08); display: flex; align-items: center; justify-content: center;
  color: var(--hs-accent); font-family: "JetBrains Mono"; font-size: 16px;
}
.hs-card-tl { top: 12%; left: -8%; animation: hs-float 5s ease-in-out 0s infinite; }
.hs-card-ml { top: 50%; left: -12%; transform: translateY(-50%); animation: hs-float 5s ease-in-out 0.8s infinite; }
.hs-card-br { bottom: 10%; right: -8%; animation: hs-float 5s ease-in-out 1.6s infinite; }
@media (max-width: 900px) { .hs-stat-card { display: none; } }
@keyframes hs-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* sections */
.hs-section { padding: 110px 0; position: relative; }
@media (max-width: 640px) { .hs-section { padding: 64px 0; } }
.hs-section-alt { background: var(--hs-bg-1); }
.hs-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 56px; gap: 40px; flex-wrap: wrap;
}
.hs-section-head h2 { max-width: 620px; margin-top: 16px; }
.hs-section-head p   { max-width: 420px; color: var(--hs-fg-dim); font-size: 15px; }

/* trust strip */
.hs-trust {
  border-top: 1px solid var(--hs-hairline); border-bottom: 1px solid var(--hs-hairline);
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
}
.hs-trust-inner {
  display: grid; grid-template-columns: repeat(3,auto); justify-content: center; padding: 44px 0; gap: 20px;
}
/* ≤640px：信任數據條原為 repeat(3,1fr) + item padding 0 28px，3-4 個 item 在 375px 橫向溢出
   (home/conch/abacus 實測 scrollWidth 379-396>371)。改 2 欄 + 收窄 padding，右欄不畫 border。 */
@media (max-width: 640px) {
  .hs-trust-inner { grid-template-columns: repeat(2,1fr); gap: 20px 0; padding: 28px 0; }
  .hs-trust-item { padding: 8px 16px; }
  .hs-trust-item .num { font-size: 30px; }
  .hs-trust-item:nth-child(even) { border-right: none; }
}
.hs-trust-item {
  display: flex; flex-direction: column; gap: 6px; padding: 0 28px;
  border-right: 1px solid var(--hs-hairline);
}
.hs-trust-item:last-child { border-right: none; }
.hs-trust-item .num { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; color: var(--hs-fg); }
.hs-trust-item .num .plus { color: var(--hs-accent); font-weight: 700; }
.hs-trust-item .lbl { font-size: 13px; color: var(--hs-fg-mute); }

/* card primitive */
.hs-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  border: 1px solid var(--hs-hairline); border-radius: var(--hs-radius-lg); padding: 28px;
  transition: transform .3s, border-color .3s, background .3s; position: relative; overflow: hidden;
}
.hs-card:hover {
  transform: translateY(-3px); border-color: var(--hs-hairline-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}

/* SaaS product cards */
.hs-saas-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 900px) { .hs-saas-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .hs-saas-grid { grid-template-columns: 1fr; } }

.hs-product-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  border: 1px solid var(--hs-hairline); border-radius: var(--hs-radius-lg); padding: 28px;
  transition: transform .3s, border-color .3s; display: flex; flex-direction: column; gap: 16px;
}
.hs-product-card:hover { transform: translateY(-3px); border-color: var(--hs-hairline-2); }
.hs-product-card .ic {
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid rgba(var(--hs-accent-glow),0.3);
  background: rgba(var(--hs-accent-glow),0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--hs-accent); font-family: "JetBrains Mono"; font-size: 18px;
}
.hs-product-card h3 { font-size: 18px; color: var(--hs-fg); }
.hs-product-card p  { font-size: 14px; color: var(--hs-fg-dim); line-height: 1.7; flex: 1; }
.hs-product-card .tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 6px; background: rgba(var(--hs-accent-glow),0.08);
  color: var(--hs-accent); font-size: 11px; font-weight: 600;
}

/* pill */
.hs-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 999px; background: rgba(var(--hs-accent-glow),0.12);
  color: var(--hs-accent); border: 1px solid rgba(var(--hs-accent-glow),0.3);
  font-size: 12px; font-weight: 500;
}
.hs-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hs-accent); box-shadow: 0 0 10px var(--hs-accent); }

/* CTA final */
.hs-cta-final {
  position: relative; overflow: hidden;
  background: radial-gradient(800px 400px at 50% 100%, rgba(var(--hs-accent-glow),0.16), transparent 60%),
    linear-gradient(180deg, var(--hs-bg), var(--hs-bg-1));
}
.hs-cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 70%);
}
.hs-cta-card { text-align: center; max-width: 820px; margin: 0 auto; position: relative; z-index: 2; }
.hs-cta-card h2 { font-size: 56px; line-height: 1.1; margin: 24px 0; letter-spacing: -0.02em; color: var(--hs-fg); }
@media (max-width: 640px) { .hs-cta-card h2 { font-size: 36px; } }
.hs-cta-card h2 .em { color: var(--hs-accent); }
.hs-cta-card p { color: var(--hs-fg-dim); font-size: 17px; margin-bottom: 40px; max-width: 560px; margin-left: auto; margin-right: auto; }
.hs-cta-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* GOV section */
.hs-gov-section {
  background: var(--hs-bg-1); border-top: 1px solid var(--hs-hairline);
  border-bottom: 1px solid var(--hs-hairline);
}
.hs-gov-section h2 { font-size: 42px; line-height: 1.2; color: var(--hs-fg); }
.hs-gov-section h2 .big { color: var(--hs-accent); }
@media (max-width: 640px) { .hs-gov-section h2 { font-size: 28px; } }

/* Footer (new hs design) */
.hs-footer {
  background: var(--hs-bg); border-top: 1px solid var(--hs-hairline);
  padding: 80px 0 40px;
  font-family: "Noto Sans TC","Inter",system-ui,-apple-system,sans-serif;
  color: var(--hs-fg);
}
.hs-foot-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, minmax(180px, 1fr));
  gap: 40px; margin-bottom: 56px;
}
@media (max-width: 1023px) and (min-width: 768px) { .hs-foot-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 36px; } }
@media (max-width: 767px)  { .hs-foot-grid { grid-template-columns: 1fr; gap: 28px; } }
.hs-foot-brand .hs-brand { font-size: 16px; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px; color: var(--hs-fg); text-decoration: none; }
.hs-foot-brand p { color: var(--hs-fg-mute); font-size: 13px; line-height: 1.8; max-width: 280px; }
.hs-foot-col h4 {
  font-size: 11px; color: var(--hs-accent); letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 20px; font-weight: 700;
}
.hs-foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hs-foot-col ul a { font-size: 13px; color: var(--hs-fg-dim); transition: color .15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; word-break: keep-all; }
.hs-foot-col ul a:hover { color: var(--hs-accent); }
/* product icon in footer links */
.hs-foot-prod-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; border-radius: 3px; }
/* company contact list in brand column */
.hs-foot-contact { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.hs-foot-contact li { font-size: 12px; color: var(--hs-fg-mute); display: flex; align-items: flex-start; gap: 6px; line-height: 1.5; }
.hs-foot-contact a { color: var(--hs-fg-mute); text-decoration: none; transition: color .15s; }
.hs-foot-contact a:hover { color: var(--hs-accent); }
.hs-foot-icon { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; opacity: 0.6; }
/* GitHub icon */
.hs-foot-social { margin-top: 16px; }
.hs-foot-social a { color: var(--hs-fg-mute); transition: color .15s; display: inline-flex; }
.hs-foot-social a:hover { color: var(--hs-accent); }
/* version tag */
.hs-foot-ver { margin-left: 8px; opacity: 0.3; font-size: 10px; font-variant-numeric: tabular-nums; }
.hs-foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 32px; border-top: 1px solid var(--hs-hairline); font-size: 12px; color: var(--hs-fg-mute);
}
.hs-foot-bottom .links { display: flex; gap: 24px; }
.hs-foot-bottom .links a { color: var(--hs-fg-mute); text-decoration: none; transition: color .15s; }
.hs-foot-bottom .links a:hover { color: var(--hs-fg-dim); }
/* iOS App showcase strip */
.hs-foot-ios {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding: 20px 0; border-top: 1px solid var(--hs-hairline);
}
.hs-foot-ios__label {
  font-size: 11px; color: var(--hs-accent); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
}
.hs-foot-ios a {
  font-size: 13px; color: var(--hs-fg-dim); text-decoration: none;
  transition: color .15s; display: inline-flex; align-items: center; gap: 6px;
}
.hs-foot-ios a:hover { color: var(--hs-accent); }

/* --- HS GOV Section --- */
.hs-gov-card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(600px 300px at 85% 110%, rgba(var(--hs-accent-glow),0.18), transparent 60%),
    linear-gradient(135deg, #131a30 0%, #1a2240 100%);
  border: 1px solid var(--hs-hairline-2); border-radius: var(--hs-radius-lg);
  padding: 56px 64px;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 60px; align-items: center;
}
@media (max-width: 900px) { .hs-gov-card { grid-template-columns: 1fr; padding: 36px 28px; gap: 36px; } }
.hs-gov-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 1px 24px;
  mask-image: linear-gradient(90deg, transparent, #000 40%, transparent);
  pointer-events: none;
}
.hs-gov-left { position: relative; z-index: 1; }
.hs-gov-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(var(--hs-accent-glow),0.12); color: var(--hs-accent);
  border: 1px solid rgba(var(--hs-accent-glow),0.3); font-size: 12px; font-weight: 500; margin-bottom: 18px;
}
.hs-gov-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hs-accent); box-shadow: 0 0 10px var(--hs-accent); }
.hs-gov-left h2 { font-size: 40px; margin-bottom: 18px; color: var(--hs-fg); }
@media (max-width: 640px) { .hs-gov-left h2 { font-size: 28px; } }
.hs-gov-left h2 .big { color: var(--hs-accent); font-weight: 800; }
.hs-gov-desc { color: var(--hs-fg-dim); font-size: 16px; max-width: 460px; line-height: 1.7; margin-bottom: 28px; }
.hs-gov-bullets { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.hs-gov-bullets li { font-size: 14px; color: var(--hs-fg-dim); display: flex; align-items: center; gap: 10px; }
.hs-gov-bullets li::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(var(--hs-accent-glow),0.15); border: 1.5px solid var(--hs-accent); flex: none;
}
.hs-gov-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hs-gov-right { position: relative; z-index: 1; }
.hs-budget-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--hs-hairline-2); border-radius: 16px; padding: 28px;
  position: relative; overflow: hidden;
}
.hs-budget-panel .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.hs-budget-panel .head .t { font-size: 13px; color: var(--hs-fg-mute); letter-spacing: 0.14em; text-transform: uppercase; }
.hs-budget-panel .head .y {
  font-family: "JetBrains Mono",monospace; font-size: 12px; color: var(--hs-accent);
  padding: 3px 8px; border: 1px solid rgba(var(--hs-accent-glow),0.3); border-radius: 4px;
}
.hs-budget-big {
  font-size: 56px; font-weight: 800; letter-spacing: -0.03em; color: #fff;
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
  font-family: "Inter",sans-serif; font-variant-numeric: tabular-nums;
}
.hs-budget-big .unit { font-size: 20px; color: var(--hs-fg-dim); font-weight: 500; }
.hs-budget-sub { font-size: 13px; color: var(--hs-fg-mute); margin-bottom: 22px; }
.hs-budget-bars { display: flex; flex-direction: column; gap: 10px; }
.hs-bar-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.hs-bar-row .name { width: 80px; color: var(--hs-fg-dim); }
.hs-bar-row .track { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.hs-bar-row .fill { height: 100%; background: linear-gradient(90deg, var(--hs-accent-deep), var(--hs-accent)); border-radius: 4px; }
.hs-bar-row .val { width: 68px; text-align: right; color: var(--hs-fg); font-weight: 600; font-family: "Inter",sans-serif; font-variant-numeric: tabular-nums; }

/* --- HS SaaS Section --- */
.hs-saas-bg { background: var(--hs-bg-1); }
.hs-saas-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 900px) { .hs-saas-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hs-saas-cards { grid-template-columns: 1fr; } }
.hs-saas-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  border: 1px solid var(--hs-hairline); border-radius: var(--hs-radius-lg);
  padding: 32px; overflow: hidden;
  transition: transform .3s ease, border-color .3s, background .3s;
  min-height: 520px; display: flex; flex-direction: column;
}
.hs-saas-card:hover { transform: translateY(-4px); border-color: var(--hs-hairline-2); }
.hs-saas-card .pvis {
  height: 200px; border-radius: 12px; margin-bottom: 28px;
  position: relative; overflow: hidden; border: 1px solid var(--hs-hairline);
}
.hs-pvis-lobster {
  background: radial-gradient(circle at 30% 70%, rgba(var(--hs-accent-glow),0.25), transparent 50%),
    linear-gradient(135deg, #1a1205, #2a1a05);
}
.hs-pvis-squid {
  background: linear-gradient(135deg, #051a1a, #0a2a2a);
  font-family: "JetBrains Mono",monospace; font-size: 11px; color: #6fd8c6;
  padding: 20px; line-height: 1.8; overflow: hidden;
}
.hs-pvis-nautilus {
  background: linear-gradient(135deg, #0a0a1f, #18183a);
}
.hs-pvis-nautilus::after {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0%, rgba(var(--hs-accent-glow),0.15) 12%, transparent 25%, rgba(var(--hs-accent-glow),0.15) 37%, transparent 50%, rgba(var(--hs-accent-glow),0.15) 62%, transparent 75%, rgba(var(--hs-accent-glow),0.15) 87%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0, #000 40%, transparent 72%);
}
.hs-pvis-badge {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  font-family: "JetBrains Mono",monospace; font-size: 10px; letter-spacing: 0.15em;
  padding: 4px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.5); border: 1px solid var(--hs-hairline-2); color: var(--hs-fg-dim);
}
.hs-pvis-logo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Inter",sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -0.02em; color: var(--hs-fg); z-index: 1;
}
.hs-saas-card .p-name { font-family: "Inter",sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hs-saas-card .p-name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hs-accent); }
.hs-saas-card .p-tag { font-size: 13px; color: var(--hs-fg-mute); margin-bottom: 18px; letter-spacing: 0.05em; font-family: "JetBrains Mono",monospace; }
.hs-saas-card .p-desc { font-size: 15px; color: var(--hs-fg-dim); line-height: 1.7; margin-bottom: 20px; flex: 1; }
.hs-saas-card .p-feats { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.hs-saas-card .p-feats li { font-size: 13px; color: var(--hs-fg-dim); display: flex; gap: 8px; align-items: flex-start; }
.hs-saas-card .p-feats li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--hs-accent); margin-top: 8px; flex: none; }
.hs-saas-card .p-cta { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid var(--hs-hairline); }
.hs-saas-card .p-cta a { color: var(--hs-accent); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: gap .2s; text-decoration: none; }
.hs-saas-card .p-cta a:hover { gap: 10px; }
.hs-saas-card .p-cta .price { font-size: 12px; color: var(--hs-fg-mute); font-family: "JetBrains Mono",monospace; }

/* --- HS OpenClaw Section --- */
.hs-oc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .hs-oc-grid { grid-template-columns: 1fr; gap: 48px; } }
.hs-oc-price {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: rgba(var(--hs-accent-glow),0.1); border: 1px solid rgba(var(--hs-accent-glow),0.3);
  font-size: 14px; color: var(--hs-accent); margin-bottom: 16px;
}
.hs-oc-price .p { font-weight: 700; font-size: 16px; }
.hs-oc-desc { color: var(--hs-fg-dim); font-size: 16px; line-height: 1.8; margin-bottom: 32px; max-width: 500px; }
.hs-oc-tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 36px; }
.hs-oc-task {
  padding: 14px 16px; border: 1px solid var(--hs-hairline); border-radius: 10px;
  background: rgba(255,255,255,0.02); display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--hs-fg-dim);
}
.hs-oc-task .n {
  width: 24px; height: 24px; border-radius: 6px; background: rgba(var(--hs-accent-glow),0.12);
  color: var(--hs-accent); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: "JetBrains Mono",monospace; flex: none;
}
.hs-oc-mock {
  background: #0e1426; border: 1px solid var(--hs-hairline-2); border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5); position: relative;
}
.hs-oc-mock .mhead { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hs-hairline); background: rgba(255,255,255,0.02); }
.hs-oc-mock .mavatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--hs-accent), var(--hs-accent-deep)); display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono",monospace; font-weight: 700; color: #1a1000; font-size: 14px; }
.hs-oc-mock .mtitle { font-size: 14px; font-weight: 600; color: var(--hs-fg); }
.hs-oc-mock .mstat { font-size: 11px; color: #6ed58d; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.hs-oc-mock .mstat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6ed58d; }
.hs-oc-mock .mbody { padding: 20px; display: flex; flex-direction: column; gap: 12px; max-height: 380px; overflow: hidden; }
.hs-msg { max-width: 78%; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; position: relative; color: var(--hs-fg); }
.hs-msg .time { font-size: 10px; color: var(--hs-fg-mute); margin-top: 6px; display: block; }
.hs-msg.bot { background: rgba(255,255,255,0.05); border: 1px solid var(--hs-hairline); align-self: flex-start; border-top-left-radius: 3px; }
.hs-msg.user { background: var(--hs-accent); color: #1a1000; align-self: flex-end; border-top-right-radius: 3px; }
.hs-msg.user .time { color: rgba(26,16,0,0.5); }
.hs-msg b { font-weight: 600; }
.hs-msg.user b { color: #1a1000; }
.hs-msg ul { margin: 6px 0 0; padding-left: 18px; }
.hs-msg li { margin-bottom: 2px; }

/* --- HS Cases Section --- */
.hs-cases-bg { background: var(--hs-bg-1); }
.hs-case-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 900px) { .hs-case-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hs-case-grid { grid-template-columns: 1fr; } }
/* 客戶實績區：只有 2 張卡，用 2 欄置中（避免 3 欄留空格）。.hs-case 卡片樣式沿用。 */
.hs-clients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; }
@media (max-width: 560px) { .hs-clients-grid { grid-template-columns: 1fr; } }
.hs-case { border: 1px solid var(--hs-hairline); border-radius: 14px; padding: 28px; background: rgba(255,255,255,0.02); transition: border-color .2s; }
.hs-case:hover { border-color: var(--hs-hairline-2); }
.hs-case .quote { font-size: 15px; color: var(--hs-fg); line-height: 1.7; margin-bottom: 24px; min-height: 90px; }
.hs-case .quote::before { content: "\201C"; color: var(--hs-accent); font-size: 32px; font-family: Georgia,serif; line-height: 0; vertical-align: -12px; margin-right: 4px; }
.hs-case .who { padding-top: 20px; border-top: 1px solid var(--hs-hairline); }
.hs-case .name { font-size: 13px; font-weight: 600; color: var(--hs-fg); }
.hs-case .co { font-size: 12px; color: var(--hs-fg-mute); }

/* ── 平台架構 section ── */
.hs-arch { max-width: 860px; margin: 8px auto 0; }
.hs-arch-layer { border: 1px solid var(--hs-hairline); border-radius: 12px; padding: 20px 24px; background: rgba(255,255,255,0.02); }
.hs-arch-cap { font-family: "JetBrains Mono",monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--hs-fg-mute); margin-bottom: 14px; }
.hs-arch-product-desc { font-size: 14px; color: var(--hs-fg-dim); line-height: 1.6; }
.hs-arch-conn { text-align: center; font-size: 12px; color: var(--hs-fg-mute); padding: 12px 0; font-family: "JetBrains Mono",monospace; }
.hs-arch-conn::before { content: "↓ "; color: var(--hs-accent); }
.hs-arch-platform { border-color: rgba(255,140,0,0.4); background: linear-gradient(180deg, rgba(255,140,0,0.07), rgba(255,140,0,0.02)); }
.hs-arch-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 640px) { .hs-arch-pillars { grid-template-columns: 1fr !important; } }
.hs-arch-pillar { border: 1px solid var(--hs-hairline); border-radius: 8px; padding: 14px 16px; background: var(--hs-bg-1); }
.hs-arch-pillar .k { font-weight: 700; font-size: 15px; color: var(--hs-fg); margin-bottom: 4px; }
.hs-arch-pillar .d { font-size: 12.5px; color: var(--hs-fg-dim); line-height: 1.55; }
.hs-arch-pillar-ai { border-color: rgba(255,140,0,0.5); }
.hs-arch-pillar-ai .k { color: var(--hs-accent); }
.hs-arch-infra { text-align: center; font-family: "JetBrains Mono",monospace; font-size: 12px; color: var(--hs-fg-mute); margin-top: 14px; padding: 14px; }
.hs-arch-takeaway { max-width: 700px; margin: 28px auto 0; text-align: center; font-size: 15px; line-height: 1.7; color: var(--hs-fg); }

/* ── 平台基礎區塊（產品頁共用 partial）── */
.hs-platbase { max-width: 820px; margin: 0 auto; border: 1px solid var(--hs-hairline); border-radius: 14px; padding: 32px 34px; background: rgba(255,255,255,0.02); }
.hs-platbase__head { margin-bottom: 20px; }
.hs-platbase__head h3 { font-size: 22px; color: var(--hs-fg); margin: 10px 0 8px; }
.hs-platbase__head p { font-size: 14px; color: var(--hs-fg-dim); line-height: 1.65; }
.hs-platbase__pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 640px) { .hs-platbase__pillars { grid-template-columns: 1fr; } }
.hs-platbase__pillar { border: 1px solid var(--hs-hairline); border-radius: 8px; padding: 14px 16px; background: var(--hs-bg-1); }
.hs-platbase__pillar .k { font-weight: 700; font-size: 14px; color: var(--hs-fg); margin-bottom: 4px; }
.hs-platbase__pillar .d { font-size: 12px; color: var(--hs-fg-dim); line-height: 1.5; }
.hs-platbase__pillar--ai { border-color: rgba(255,140,0,0.5); }
.hs-platbase__pillar--ai .k { color: var(--hs-accent); }
.hs-platbase__link { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--hs-accent); font-family: "JetBrains Mono",monospace; }
.hs-logo-row { margin-top: 60px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 28px 0; border-top: 1px solid var(--hs-hairline); border-bottom: 1px solid var(--hs-hairline); flex-wrap: wrap; }
.hs-logo-row .lbl { font-size: 12px; color: var(--hs-fg-mute); letter-spacing: 0.14em; text-transform: uppercase; flex: none; }
.hs-logo-slot { display: flex; align-items: center; justify-content: center; color: var(--hs-fg-mute); font-family: "Inter",sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; opacity: 0.55; transition: opacity .2s; }
.hs-logo-slot:hover { opacity: 1; }

/* ===== ai-subsidy 專屬 components (redesign-20260511) ===== */

/* 1. hs-sub-grid — 4 欄補助方案格 */
.hs-sub-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 900px) { .hs-sub-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .hs-sub-grid { grid-template-columns: 1fr; } }

/* 2. hs-sub-card — 單一補助方案卡片 */
.hs-sub-card { padding: 28px; border: 1px solid var(--hs-hairline); border-radius: 14px; background: linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.005)); position: relative; overflow: hidden; }
.hs-sub-card .tag { font-family: "JetBrains Mono",monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--hs-fg-mute); margin-bottom: 16px; }
.hs-sub-card h3 { font-size: 20px; margin-bottom: 12px; color: var(--hs-fg); }
.hs-sub-card .amt { font-size: 32px; font-weight: 800; color: var(--hs-accent); margin-bottom: 8px; font-family: "Inter",sans-serif; letter-spacing: -0.02em; }
.hs-sub-card .d { font-size: 13px; color: var(--hs-fg-dim); line-height: 1.7; margin-bottom: 18px; min-height: 72px; }
.hs-sub-card .meta { font-size: 11px; color: var(--hs-fg-mute); padding-top: 14px; border-top: 1px solid var(--hs-hairline); display: flex; justify-content: space-between; font-family: "JetBrains Mono",monospace; }

/* 3. hs-tl — 流程 timeline 容器 */
.hs-tl { position: relative; padding: 20px 0; }
.hs-tl::before { content: ""; position: absolute; left: 32px; top: 40px; bottom: 40px; width: 2px; background: linear-gradient(180deg,transparent,var(--hs-accent) 10%,var(--hs-accent) 90%,transparent); }

/* 4. hs-tl-step — 單一流程步驟 */
.hs-tl-step { display: grid; grid-template-columns: 64px 1fr; gap: 32px; padding: 20px 0; position: relative; }
.hs-tl-step .dot { width: 64px; height: 64px; border-radius: 50%; background: var(--hs-bg-1,#070912); border: 2px solid var(--hs-accent); display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono",monospace; font-weight: 700; color: var(--hs-accent); font-size: 18px; z-index: 1; flex: none; }
.hs-tl-step .body { padding: 8px 0; }
.hs-tl-step .title { font-size: 20px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 14px; color: var(--hs-fg); }
.hs-tl-step .title .time { font-family: "JetBrains Mono",monospace; font-size: 12px; color: var(--hs-fg-mute); font-weight: 500; background: rgba(255,255,255,0.04); padding: 3px 10px; border-radius: 20px; border: 1px solid var(--hs-hairline); }
.hs-tl-step .desc { font-size: 14px; color: var(--hs-fg-dim); line-height: 1.7; max-width: 620px; }

/* 5. hs-fee-card — 費用結構 card */
.hs-fee-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 48px; border: 1px solid var(--hs-hairline-2,rgba(255,255,255,0.15)); border-radius: 20px; background: linear-gradient(135deg,rgba(19,26,48,0.8),rgba(26,34,64,0.6)); position: relative; overflow: hidden; }
@media (max-width: 760px) { .hs-fee-card { grid-template-columns: 1fr; } }
.hs-fee-card h2 { font-size: 40px; color: var(--hs-fg); }
.hs-fee-card .tag { font-size: 12px; color: var(--hs-accent); font-family: "JetBrains Mono",monospace; letter-spacing: 0.16em; margin-bottom: 18px; }
.hs-fee-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.hs-fee-card ul li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; color: var(--hs-fg-dim); padding: 14px 20px; background: rgba(255,255,255,0.03); border-radius: 10px; border-left: 2px solid var(--hs-accent); }
.hs-fee-card ul li b { color: var(--hs-fg); font-weight: 600; }

/* 6. hs-case-mini — 成果小卡片 (3 欄格) */
.hs-case-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 760px) { .hs-case-mini-grid { grid-template-columns: 1fr; } }
.hs-case-mini { padding: 28px; border: 1px solid var(--hs-hairline); border-radius: 14px; background: rgba(255,255,255,0.02); }
.hs-case-mini .ind { font-family: "JetBrains Mono",monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--hs-accent); margin-bottom: 16px; }
.hs-case-mini .stat { font-size: 36px; font-weight: 800; color: var(--hs-fg); letter-spacing: -0.02em; margin-bottom: 6px; font-family: "Inter",sans-serif; }
.hs-case-mini .stat .u { font-size: 14px; color: var(--hs-fg-dim); font-weight: 500; margin-left: 6px; }
.hs-case-mini .t { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--hs-fg); }
.hs-case-mini .d { font-size: 13px; color: var(--hs-fg-dim); line-height: 1.7; margin-bottom: 20px; }
.hs-case-mini .meta { font-size: 11px; color: var(--hs-fg-mute); padding-top: 16px; border-top: 1px solid var(--hs-hairline); }

/* 7. hs-form-embed — 表單嵌入容器 */
.hs-form-embed { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 60px; background: linear-gradient(135deg,rgba(13,20,38,0.95),rgba(19,26,48,0.9)); border: 1px solid var(--hs-hairline-2,rgba(255,255,255,0.12)); border-radius: 20px; }
@media (max-width: 900px) { .hs-form-embed { grid-template-columns: 1fr; padding: 36px; gap: 36px; } }
.hs-form-embed h2 { font-size: 36px; margin-bottom: 20px; color: var(--hs-fg); }
.hs-form-embed .lead { color: var(--hs-fg-dim); font-size: 15px; line-height: 1.8; margin-bottom: 28px; }
.hs-form-embed ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hs-form-embed ul li { font-size: 14px; color: var(--hs-fg-dim); display: flex; gap: 10px; align-items: flex-start; }
.hs-form-embed ul li::before { content: "✓"; color: var(--hs-accent); font-weight: 700; flex: none; margin-top: 1px; }

/* 8. hs-form — 表單欄位樣式 */
.hs-form label { display: block; font-size: 12px; color: var(--hs-fg-mute); margin-bottom: 6px; font-family: "JetBrains Mono",monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.hs-form input, .hs-form select, .hs-form textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--hs-hairline); border-radius: 8px; padding: 13px 14px; color: var(--hs-fg); font-family: inherit; font-size: 14px; margin-bottom: 14px; transition: border-color .2s; box-sizing: border-box; }
.hs-form input:focus, .hs-form select:focus, .hs-form textarea:focus { outline: none; border-color: var(--hs-accent); }
.hs-form textarea { resize: vertical; min-height: 90px; }
.hs-form select option { background: #0d1117; color: var(--hs-fg); }
.hs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .hs-form-row { grid-template-columns: 1fr; } }

/* 9. hs-big-num — 大數字顯示 (Hero 右側) */
.hs-big-num { font-size: 140px; font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; color: var(--hs-fg); font-family: "Inter",sans-serif; }
.hs-big-num .em { color: var(--hs-accent); }
.hs-big-num .u { font-size: 28px; color: var(--hs-fg-dim); margin-left: 8px; font-weight: 500; }
@media (max-width: 900px) { .hs-big-num { font-size: 80px; } }

/* ===== abacus 專屬 components (redesign-20260511) ===== */

/* A. hs-hero-vis-card — Hero 右側資產負債表視覺卡 */
.hs-hero-vis-card {
  aspect-ratio: 1.05/1; border: 1px solid var(--hs-hairline-2); border-radius: var(--hs-radius-lg,22px);
  background: linear-gradient(160deg,rgba(19,26,48,0.96),rgba(10,14,28,0.7));
  padding: 28px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden;
}
.hs-hero-vis-card::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 1px 24px; pointer-events: none;
}
.hs-tabs-row { display: flex; gap: 8px; font-family: "JetBrains Mono",monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--hs-fg-mute); }
.hs-tab-pill { padding: 5px 11px; border-radius: 6px; border: 1px solid var(--hs-hairline); }
.hs-tab-pill.on { color: #0a0d15; background: var(--hs-accent); border-color: var(--hs-accent); font-weight: 700; }

/* B. hs-bs-table — 資產負債表格 */
.hs-bs-table { font-family: "Inter",sans-serif; font-variant-numeric: tabular-nums; font-size: 13px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.hs-bs-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; padding: 9px 12px; border-radius: 6px; }
.hs-bs-row.h { font-family: "JetBrains Mono",monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--hs-fg-mute); text-transform: uppercase; border-bottom: 1px solid var(--hs-hairline); padding-bottom: 10px; margin-bottom: 6px; }
.hs-bs-row.sub { color: var(--hs-fg-dim); padding-left: 24px; font-size: 12.5px; }
.hs-bs-row.tot { border-top: 1px solid var(--hs-hairline); margin-top: 6px; padding-top: 12px; font-weight: 700; color: var(--hs-fg); }
.hs-bs-row.tot .v { color: var(--hs-accent); }
.hs-bs-row .v { text-align: right; color: var(--hs-fg); }
.hs-bs-row .d { text-align: right; color: var(--hs-fg-mute); font-size: 11px; }
.hs-bs-row.hi { background: rgba(var(--hs-accent-glow),0.06); box-shadow: inset 2px 0 0 var(--hs-accent); }

/* floating stat card (abacus variant) */
.hs-vis-stat {
  background: linear-gradient(160deg,rgba(19,26,48,0.95),rgba(19,26,48,0.6));
  border: 1px solid var(--hs-hairline-2); border-radius: 14px; padding: 14px 18px;
  backdrop-filter: blur(8px); box-shadow: 0 20px 60px rgba(0,0,0,0.6); font-size: 12px;
}
.hs-vis-stat .lbl { font-family: "JetBrains Mono",monospace; font-size: 10px; color: var(--hs-fg-mute); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.hs-vis-stat .val { font-size: 18px; font-weight: 700; color: var(--hs-fg); }
.hs-vis-stat .val .em { color: var(--hs-accent); }
/* 手機版：浮動統計卡用 inline position:absolute; right:-6%/left:-6% 負偏移，
   窄螢幕(≤640)會擠出/被切在視窗邊緣 → 隱藏；主 mockup + 下方數據帶已傳達數字 */
@media (max-width: 640px) { .hs-vis-stat { display: none; } }
@media (max-width: 480px) {
  .hs-bs-row { grid-template-columns: 1fr auto; gap: 10px; }
  .hs-bs-row .d { display: none; }
}

/* C. hs-pain-grid — 痛點三格 */
.hs-pain-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 960px) { .hs-pain-grid { grid-template-columns: 1fr; } }
.hs-pain { padding: 30px; border: 1px solid var(--hs-hairline); border-radius: var(--hs-radius-lg,22px); background: rgba(255,255,255,0.02); position: relative; }
.hs-pain .n { font-family: "JetBrains Mono",monospace; font-size: 11px; color: var(--hs-accent); letter-spacing: 0.16em; margin-bottom: 14px; }
.hs-pain h3 { font-size: 20px; margin-bottom: 12px; line-height: 1.4; color: var(--hs-fg); }
.hs-pain p { font-size: 14px; color: var(--hs-fg-dim); line-height: 1.7; }
.hs-pain .strike { display: inline-block; color: var(--hs-fg-mute); text-decoration: line-through; text-decoration-color: rgba(255,100,100,0.6); text-decoration-thickness: 2px; }

/* D. hs-cmp — 比較表 */
.hs-cmp { border: 1px solid var(--hs-hairline); border-radius: var(--hs-radius-lg,22px); background: rgba(255,255,255,0.02); overflow: hidden; }
.hs-cmp-head { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 0; font-family: "JetBrains Mono",monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--hs-fg-mute); text-transform: uppercase; }
.hs-cmp-head > div { padding: 22px 26px; border-bottom: 1px solid var(--hs-hairline); }
.hs-cmp-head .old { background: rgba(0,0,0,0.2); }
.hs-cmp-head .new { background: rgba(var(--hs-accent-glow),0.06); color: var(--hs-accent); }
.hs-cmp-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 0; border-bottom: 1px solid var(--hs-hairline); }
.hs-cmp-row:last-child { border-bottom: none; }
.hs-cmp-row > div { padding: 22px 26px; font-size: 14px; line-height: 1.6; }
.hs-cmp-row .label { font-weight: 700; color: var(--hs-fg); font-size: 15px; display: flex; align-items: center; gap: 10px; }
.hs-cmp-row .label::before { content: ""; width: 4px; height: 24px; border-radius: 2px; background: var(--hs-accent); }
.hs-cmp-row .old { color: var(--hs-fg-mute); background: rgba(0,0,0,0.18); }
.hs-cmp-row .new { color: var(--hs-fg); background: rgba(var(--hs-accent-glow),0.04); }
.hs-cmp-row .new b { color: var(--hs-accent); }
@media (max-width: 960px) { .hs-cmp-head, .hs-cmp-row { grid-template-columns: 1fr; } .hs-cmp-head > div, .hs-cmp-row > div { border-bottom: 1px solid var(--hs-hairline); } }

/* E. hs-mod-grid — 八大模組 grid */
.hs-mod-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width: 960px) { .hs-mod-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .hs-mod-grid { grid-template-columns: 1fr; } }
.hs-mod { padding: 28px 26px; border: 1px solid var(--hs-hairline); border-radius: var(--hs-radius-lg,22px); background: linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.005)); min-height: 240px; display: flex; flex-direction: column; transition: all .18s; }
.hs-mod:hover { border-color: rgba(var(--hs-accent-glow),0.35); transform: translateY(-2px); }
.hs-mod .ico { width: 36px; height: 36px; border-radius: 9px; background: rgba(var(--hs-accent-glow),0.1); border: 1px solid rgba(var(--hs-accent-glow),0.25); color: var(--hs-accent); display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono",monospace; font-weight: 700; font-size: 13px; margin-bottom: 18px; }
.hs-mod h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--hs-fg); }
.hs-mod p { font-size: 13px; color: var(--hs-fg-dim); line-height: 1.7; flex: 1; }
.hs-mod .n { font-family: "JetBrains Mono",monospace; font-size: 10px; color: var(--hs-fg-mute); letter-spacing: 0.16em; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hs-hairline); }

/* F. hs-aud-grid — 適用對象 */
.hs-aud-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 960px) { .hs-aud-grid { grid-template-columns: 1fr; } }
.hs-aud { padding: 36px 32px; border: 1px solid var(--hs-hairline); border-radius: var(--hs-radius-lg,22px); background: linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.005)); display: flex; flex-direction: column; }
.hs-aud .who { font-family: "JetBrains Mono",monospace; font-size: 11px; color: var(--hs-accent); letter-spacing: 0.16em; margin-bottom: 14px; }
.hs-aud h3 { font-size: 24px; margin-bottom: 8px; color: var(--hs-fg); }
.hs-aud .scale { font-size: 13px; color: var(--hs-fg-mute); margin-bottom: 22px; font-family: "JetBrains Mono",monospace; letter-spacing: 0.06em; }
.hs-aud ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hs-aud ul li { font-size: 13.5px; color: var(--hs-fg-dim); line-height: 1.6; display: flex; gap: 10px; align-items: flex-start; }
.hs-aud ul li::before { content: "✓"; color: var(--hs-accent); font-weight: 700; flex: none; margin-top: 1px; }

/* G. hs-sec-grid — 安全合規四格 */
.hs-sec-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 960px) { .hs-sec-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .hs-sec-grid { grid-template-columns: 1fr; } }
.hs-sec-item { padding: 24px; border: 1px solid var(--hs-hairline); border-radius: 14px; background: rgba(255,255,255,0.02); }
.hs-sec-item .k { font-family: "JetBrains Mono",monospace; font-size: 11px; color: var(--hs-accent); letter-spacing: 0.14em; margin-bottom: 10px; }
.hs-sec-item h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--hs-fg); }
.hs-sec-item p { font-size: 12.5px; color: var(--hs-fg-dim); line-height: 1.6; }

/* H. hs-faq — FAQ 兩欄格 */
.hs-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 960px) { .hs-faq { grid-template-columns: 1fr; } }
.hs-faq-item { padding: 24px 26px; border: 1px solid var(--hs-hairline); border-radius: 12px; background: rgba(255,255,255,0.02); }
.hs-faq-item .q { font-size: 15px; font-weight: 700; margin-bottom: 10px; display: flex; gap: 10px; color: var(--hs-fg); }
.hs-faq-item .q::before { content: "Q"; color: var(--hs-accent); font-family: "JetBrains Mono",monospace; flex: none; }
.hs-faq-item .a { font-size: 13px; color: var(--hs-fg-dim); line-height: 1.7; padding-left: 22px; }
@media (max-width: 560px) { .hs-big-num { font-size: 60px; } }

/* ===== Conch Hero Device Mockup ===== */
.hs-conch-vis { position: relative; display: grid; grid-template-columns: 0.75fr 1fr; gap: 18px; align-items: center; }
@media (max-width: 960px) { .hs-conch-vis { grid-template-columns: 1fr; gap: 24px; max-width: 520px; margin: 0 auto; } }

.hs-phone { aspect-ratio: 9/18; border-radius: 34px; background: linear-gradient(160deg,#1a2240,#0a0d1a); border: 1px solid var(--hs-hairline-2); padding: 14px; box-shadow: 0 30px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 10px; position: relative; }
.hs-phone::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 60px; height: 5px; border-radius: 3px; background: #000; }
@media (max-width: 960px) { .hs-phone { max-width: 280px; margin: 0 auto; } }

.hs-ph-bar { display: flex; justify-content: space-between; align-items: center; font-family: "JetBrains Mono",monospace; font-size: 10px; color: var(--hs-fg-mute); padding: 6px 6px 0; }
.hs-ph-title { font-size: 13px; font-weight: 700; color: var(--hs-fg); padding: 0 6px; }
.hs-ph-sub { font-size: 11px; color: var(--hs-fg-mute); padding: 0 6px; font-family: "JetBrains Mono",monospace; letter-spacing: 0.06em; }

.hs-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; padding: 6px; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid var(--hs-hairline); }
.hs-cal .d { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--hs-fg-dim); border-radius: 5px; background: rgba(255,255,255,0.02); }
.hs-cal .d.full { color: var(--hs-fg-mute); background: rgba(255,255,255,0.01); text-decoration: line-through; text-decoration-color: rgba(255,100,100,0.4); }
.hs-cal .d.sel { background: var(--hs-accent); color: #1a1000; font-weight: 700; }
.hs-cal .d.has { background: rgba(var(--hs-accent-glow),0.12); color: var(--hs-accent); }

.hs-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 0 6px; }
.hs-slot { padding: 8px; border-radius: 8px; border: 1px solid var(--hs-hairline); font-size: 11px; text-align: center; color: var(--hs-fg-dim); background: rgba(255,255,255,0.02); }
.hs-slot.on { background: rgba(var(--hs-accent-glow),0.12); border-color: rgba(var(--hs-accent-glow),0.45); color: var(--hs-accent); font-weight: 600; }
.hs-slot.full { opacity: 0.4; text-decoration: line-through; }

.hs-ph-cta { margin: auto 6px 4px; padding: 11px; border-radius: 10px; background: var(--hs-accent); color: #1a1000; text-align: center; font-weight: 700; font-size: 13px; box-shadow: 0 8px 20px rgba(var(--hs-accent-glow),0.35), inset 0 1px 0 rgba(255,255,255,0.5); }

.hs-pos { aspect-ratio: 1.4/1; border-radius: 14px; background: linear-gradient(160deg,rgba(19,26,48,0.96),rgba(10,14,28,0.7)); border: 1px solid var(--hs-hairline-2); padding: 18px; display: flex; flex-direction: column; gap: 12px; position: relative; box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
.hs-pos-head { display: flex; justify-content: space-between; align-items: center; font-family: "JetBrains Mono",monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--hs-fg-mute); text-transform: uppercase; border-bottom: 1px solid var(--hs-hairline); padding-bottom: 10px; }
.hs-pos-head .live { color: var(--hs-accent); display: inline-flex; align-items: center; gap: 6px; }
.hs-pos-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hs-accent); box-shadow: 0 0 10px var(--hs-accent); }
.hs-pos-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.hs-pos-cart { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.hs-pos-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 7px 10px; border-radius: 6px; background: rgba(255,255,255,0.02); }
.hs-pos-row .nm { color: var(--hs-fg); }
.hs-pos-row .qty { color: var(--hs-fg-mute); font-family: "JetBrains Mono",monospace; }
.hs-pos-row .pr { color: var(--hs-fg); font-variant-numeric: tabular-nums; font-family: "Inter",sans-serif; }
.hs-pos-tot { margin-top: auto; padding: 10px 12px; border-radius: 8px; background: rgba(var(--hs-accent-glow),0.08); border: 1px solid rgba(var(--hs-accent-glow),0.25); display: flex; justify-content: space-between; align-items: center; }
.hs-pos-tot .lbl { font-size: 11px; color: var(--hs-accent); font-family: "JetBrains Mono",monospace; letter-spacing: 0.1em; }
.hs-pos-tot .v { font-size: 20px; font-weight: 800; color: var(--hs-fg); font-variant-numeric: tabular-nums; }
.hs-pos-pay { display: flex; flex-direction: column; gap: 6px; }
.hs-pay-tile { padding: 9px 10px; border-radius: 7px; border: 1px solid var(--hs-hairline); background: rgba(255,255,255,0.02); font-size: 11px; color: var(--hs-fg-dim); display: flex; justify-content: space-between; align-items: center; }
.hs-pay-tile.on { border-color: rgba(var(--hs-accent-glow),0.45); background: rgba(var(--hs-accent-glow),0.08); color: var(--hs-accent); }
@media (max-width: 480px) { .hs-pos-grid { grid-template-columns: 1fr; } }

/* ===== Squid page — redesign-20260511 ===== */

/* Terminal mockup */
.sq-term {
  background: #0a1520;
  border: 1px solid var(--hs-hairline-2);
  border-radius: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.8;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
}
.sq-term-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hs-hairline);
  background: rgba(255,255,255,0.02);
}
.sq-tdot { width: 10px; height: 10px; border-radius: 50%; }
.sq-tt { margin-left: 12px; font-size: 11px; color: var(--hs-fg-mute); letter-spacing: 0.1em; }
.sq-term-body { padding: 22px; min-height: 320px; color: #9fc8b8; }
.sq-prompt { color: #ffc24a; }
.sq-dim { color: rgba(255,255,255,0.4); }
.sq-ok { color: #6ed58d; }
.sq-info { color: #7cb8ff; }
.sq-blink::after { content: "\25CA"; color: #ffc24a; animation: sq-blink 1s steps(2) infinite; }
@keyframes sq-blink { 50% { opacity: 0; } }

/* Metric grid */
.sq-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 40px 0;
}
@media (max-width: 900px) { .sq-metric-grid { grid-template-columns: 1fr; } }
.sq-metric {
  padding: 36px 32px;
  border: 1px solid var(--hs-hairline);
  border-radius: var(--hs-radius, 14px);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
}
.sq-metric .big {
  font-size: 52px;
  font-weight: 800;
  color: var(--hs-accent);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
}
.sq-metric .lbl { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--hs-fg); }
.sq-metric .d { font-size: 13px; color: var(--hs-fg-mute); line-height: 1.7; }

/* Flow steps */
.sq-flow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 0;
}
@media (max-width: 900px) {
  .sq-flow { grid-template-columns: 1fr 1fr; }
  .sq-flow-arrow { display: none; }
}
.sq-flow-step {
  padding: 20px 16px;
  border: 1px solid var(--hs-hairline);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  text-align: center;
}
.sq-flow-step .n { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--hs-accent); letter-spacing: 0.18em; margin-bottom: 8px; }
.sq-flow-step .t { font-size: 14px; font-weight: 600; color: var(--hs-fg); margin-bottom: 4px; }
.sq-flow-step .sub { font-size: 11px; color: var(--hs-fg-mute); font-family: "JetBrains Mono", monospace; }
.sq-flow-step-accent {
  border-color: rgba(var(--hs-accent-glow), 0.4);
  background: rgba(var(--hs-accent-glow), 0.06);
}
.sq-flow-arrow { color: var(--hs-accent); text-align: center; font-size: 18px; opacity: 0.6; }

/* Integrations grid */
.sq-int-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}
@media (max-width: 900px) { .sq-int-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sq-int-grid { grid-template-columns: 1fr; } }
.sq-int {
  padding: 24px 20px;
  border: 1px solid var(--hs-hairline);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  display: flex;
  align-items: center;
  gap: 14px;
}
.sq-int .lg {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgba(var(--hs-accent-glow), 0.1);
  border: 1px solid rgba(var(--hs-accent-glow), 0.25);
  color: var(--hs-accent);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.sq-int .n { font-size: 14px; font-weight: 600; color: var(--hs-fg); }
.sq-int .d { font-size: 11px; color: var(--hs-fg-mute); margin-top: 2px; font-family: "JetBrains Mono", monospace; }

/* Pricing grid */
.sq-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  align-items: start;
}
@media (max-width: 900px) { .sq-price-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } }
.sq-price-card {
  padding: 32px 28px;
  border: 1px solid var(--hs-hairline);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sq-price-featured {
  border-color: rgba(var(--hs-accent-glow), 0.5);
  background: rgba(var(--hs-accent-glow), 0.04);
  box-shadow: 0 0 0 1px rgba(var(--hs-accent-glow), 0.2), 0 20px 60px -20px rgba(var(--hs-accent-glow), 0.25);
}
.sq-price-flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hs-accent);
  color: #1a1000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 14px;
  border-radius: 99px;
  white-space: nowrap;
}
.sq-price-card .tier {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--hs-accent);
  margin-bottom: 6px;
}
.sq-price-card .pname {
  font-size: 18px;
  font-weight: 700;
  color: var(--hs-fg);
  margin-bottom: 14px;
}
.sq-price-card .price {
  font-size: 36px;
  font-weight: 800;
  color: var(--hs-fg);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.sq-price-card .price .u {
  font-size: 14px;
  font-weight: 400;
  color: var(--hs-fg-mute);
}
.sq-price-card .pdesc {
  font-size: 13px;
  color: var(--hs-fg-mute);
  margin-bottom: 20px;
  line-height: 1.6;
}
.sq-price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.sq-price-card ul li {
  font-size: 13px;
  color: var(--hs-fg-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sq-price-card ul li::before {
  content: "\2713";
  color: var(--hs-accent);
  font-size: 11px;
  flex: none;
}
.sq-price-card .hs-btn { width: 100%; justify-content: center; margin-top: auto; }
.hs-pay-tile .ic { font-family: "JetBrains Mono",monospace; font-size: 9px; letter-spacing: 0.1em; }

/* ================================================================
   body.light — hs- 元件系統亮色覆蓋 (Phase 2)
   生成日期：2026-06-04
   ================================================================ */

/* ── 1. CSS 變數全域覆蓋（讓所有用 var(--hs-*) 的元件自動適配） ── */
body.light, html.light {
  --hs-bg:          #f8fafc;
  --hs-bg-1:        #f1f5f9;
  --hs-bg-2:        #e8eef5;
  --hs-panel:       #ffffff;
  --hs-panel-2:     #f8fafc;
  --hs-hairline:    rgba(15,23,42,0.10);
  --hs-hairline-2:  rgba(15,23,42,0.18);
  /* surface/border 別名（light 版）*/
  --hs-surface:     #ffffff;             /* = --hs-panel light */
  --hs-border:      rgba(15,23,42,0.10); /* = --hs-hairline light */
  --hs-fg:          #0f172a;
  --hs-fg-dim:      rgba(15,23,42,0.60);
  --hs-fg-mute:     rgba(15,23,42,0.45);
  --hs-accent:      #d97706;
  --hs-accent-2:    #b45309;
  --hs-accent-deep: #92400e;
  --hs-accent-glow: 217,119,6;
}

/* ── 1b. glass 面板光模式修正：rgba(255,255,255,0.0X) 在 light 白底幾乎不可見，覆蓋為帶層次的淺灰 ── */
body.light [style*="rgba(255,255,255,0.02)"],
body.light [style*="rgba(255,255,255,0.03)"],
body.light [style*="rgba(255,255,255,0.04)"],
body.light [style*="rgba(255,255,255,0.05)"],
body.light [style*="rgba(255,255,255,0.06)"],
body.light [style*="rgba(255,255,255,0.07)"],
body.light [style*="rgba(255,255,255,0.08)"] {
  background: var(--hs-bg-1) !important;
}
/* progress bar 軌道 light mode（CSS class 版，非 inline style，需獨立規則）*/
body.light .progress { background: rgba(15,23,42,0.08) !important; }
/* assess-opt 問卷選項 light mode */
body.light .assess-opt {
  background: #ffffff;
  border-color: rgba(15,23,42,0.15);
  color: rgba(15,23,42,0.70);
}
body.light .assess-opt:hover {
  border-color: var(--hs-accent);
  background: rgba(217,119,6,0.06);
  color: #0f172a;
}
body.light .assess-opt.is-selected {
  border-color: var(--hs-accent);
  background: rgba(217,119,6,0.10);
  color: #0f172a;
}

/* ── 2. .hs-page — 頁面底色與背景裝飾 ── */
body.light .hs-page {
  background: #f8fafc;
  background-image:
    radial-gradient(1200px 800px at 80% -10%, rgba(217,119,6,0.06), transparent 55%),
    radial-gradient(900px 600px at -10% 20%, rgba(80,100,200,0.04), transparent 60%);
}
body.light .hs-page h1,
body.light .hs-page h2,
body.light .hs-page h3,
body.light .hs-page h4 { color: #0f172a; }

/* ── 3. .hs-hero ── */
body.light .hs-hero { border-bottom-color: rgba(15,23,42,0.10); }
body.light .hs-hero::before {
  background-image:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
}
body.light .hs-hero h1,
body.light .hs-hero h2,
body.light .hs-hero h3 { color: #0f172a; }
body.light .hs-hero p,
body.light .hs-hero-sub { color: rgba(15,23,42,0.65); }
body.light .hs-hero-sub b { color: #0f172a; }

/* ── 4. .hs-section / .hs-section-alt ── */
body.light .hs-section { background: transparent; }
body.light .hs-section-alt { background: #f1f5f9; }
body.light .hs-section-head p { color: rgba(15,23,42,0.60); }

/* Bootstrap .card：styles.css 全域 !important 暗色(rgba(30,41,59,0.7))在 light mode 破版；覆蓋為白 */
body.light .card {
  background-color: #ffffff !important;
  border-color: rgba(15,23,42,0.12) !important;
}

/* ── 5. .hs-card ── */
body.light .hs-card {
  background: #ffffff;
  border-color: rgba(15,23,42,0.10);
  color: #0f172a;
}
body.light .hs-card:hover {
  border-color: #d97706;
  background: #ffffff;
  box-shadow: 0 8px 28px -8px rgba(15,23,42,0.12);
}
body.light .hs-product-card:hover {
  border-color: rgba(217,119,6,0.45);
  box-shadow: 0 8px 28px -8px rgba(15,23,42,0.12);
}
body.light .hs-saas-card:hover {
  border-color: rgba(217,119,6,0.45);
  box-shadow: 0 10px 32px -8px rgba(15,23,42,0.13);
}
/* 卡片靜止陰影：淺底下做出物件層次（hover 仍用既有較強 shadow）*/
body.light .hs-saas-card,
body.light .hs-product-card {
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 4px 16px rgba(15,23,42,0.05);
  border-color: rgba(15,23,42,0.12);
}
body.light .rd-card:hover {
  box-shadow: 0 8px 28px -8px rgba(15,23,42,0.12);
}

/* ── 6. .hs-eyebrow ── */
body.light .hs-eyebrow { color: rgba(15,23,42,0.65); }
body.light .hs-eyebrow::before { background: #d97706; }
body.light .hs-eyebrow.accent { color: #d97706; }

/* ── accent 文字色在 light mode 加深以達 WCAG AA（背景/按鈕維持 --hs-accent）── */
body.light { --hs-accent-text: #b45309; }
body.light .hs-eyebrow.accent { color: var(--hs-accent-text); }
body.light .hs-product-card .tag { color: var(--hs-accent-text); }
body.light .hs-case-mini .ind,
body.light .hs-pain .n,
body.light .hs-aud .who,
body.light .hs-sec-item .k,
body.light .hs-pos-tot .lbl { color: var(--hs-accent-text); }
body.light .hs-fee-card .tag,
body.light .sq-flow-step .n { color: var(--hs-accent-text); }
/* .sub 子標籤 light mode 提高對比：--hs-fg-mute(0.45α,~2.8:1 AA fail) → --hs-fg-dim(0.60α,~4.56:1 AA) */
body.light .sq-flow-step .sub { color: var(--hs-fg-dim); }
/* about 頁 inline color:var(--hs-accent)(=#d97706) 當文字在淺底僅 2.9~3.2:1 WCAG fail：
   email 純文字連結(非 .hs-btn 按鈕，按鈕要保留白字)、合作夥伴 h3 名稱 → 加深為 --hs-accent-text(#b45309)。
   僅 body.light 生效、!important 蓋過 inline；:not(.hs-btn) 確保不動 amber 底的 CTA 按鈕。 */
body.light .hs-section a[href^="mailto:"]:not(.hs-btn) { color: var(--hs-accent-text) !important; }
body.light .hs-mod h3[style*="--hs-accent)"] { color: var(--hs-accent-text) !important; }
/* FAQ「Q」前綴 + 比較表 .new 高亮粗字：var(--hs-accent)(#d97706) 當文字在淺底 ~2.9:1 fail
   → --hs-accent-text(#b45309) ~4.6:1 AA。faq-item 在 7 個產品頁、cmp-row 在 conch/abacus。
   ::before/b 路徑無 .hs-btn，無誤傷按鈕風險；僅 body.light 生效、dark 不變。 */
body.light .hs-faq-item .q::before,
body.light .hs-cmp-row .new b { color: var(--hs-accent-text); }
body.light .hs-platbase__link,
body.light .hs-saas-card .p-cta a { color: var(--hs-accent-text); }

/* ── 7. .hs-btn ── */
body.light .hs-btn-primary {
  background: #d97706;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(217,119,6,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
body.light .hs-btn-primary:hover {
  background: #b45309;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(217,119,6,0.40), inset 0 1px 0 rgba(255,255,255,0.25);
}
body.light .hs-btn-ghost {
  color: #0f172a;
  border-color: rgba(15,23,42,0.25);
}
body.light .hs-btn-ghost:hover {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.40);
  color: #0f172a;
}

/* ── 8. .hs-nav (hardcoded rgba 需個別覆蓋) ── */
body.light .hs-nav {
  background: rgba(248,250,252,0.88);
  border-bottom-color: rgba(15,23,42,0.10);
}
body.light .hs-brand { color: #0f172a; }
body.light .hs-brand small { color: rgba(15,23,42,0.58); }
/* 針對性提升次要閱讀文字對比，不動 --hs-fg-mute 全域 token */
body.light .hs-saas-card .p-tag,
body.light .hs-saas-card .p-cta .price { color: rgba(15,23,42,0.55); }
body.light .hs-nav-links { color: rgba(15,23,42,0.70); }
body.light .hs-nav-link:hover,
body.light .hs-nav-item.is-active > .hs-nav-link { color: #0f172a; }
body.light .hs-nav-item.is-active > .hs-nav-link::after { background: #d97706; }
body.light .hs-cta { background: #d97706; color: #ffffff; }
body.light .hs-cta:hover { background: #b45309; }

/* ── 9. .hs-dropdown ── */
body.light .hs-dropdown {
  background: rgba(255,255,255,0.97);
  border-color: rgba(15,23,42,0.12);
  box-shadow: 0 24px 60px rgba(15,23,42,0.12);
}

/* ── 10. .hs-announce ── */
body.light .hs-announce {
  background: linear-gradient(90deg, rgba(217,119,6,0.06), rgba(217,119,6,0.12), rgba(217,119,6,0.06));
  border-bottom-color: rgba(217,119,6,0.20);
  color: #92400e;
}
body.light .hs-announce .dot { background: #d97706; }
body.light .hs-announce a { color: #b45309; }

/* ── 11. .hs-trust ── */
body.light .hs-trust {
  border-color: rgba(15,23,42,0.10);
  background: linear-gradient(180deg, rgba(15,23,42,0.02), transparent);
}
body.light .hs-trust-item { border-right-color: rgba(15,23,42,0.10); }
body.light .hs-trust-item .num { color: #0f172a; }
body.light .hs-trust-item .lbl { color: rgba(15,23,42,0.65); }

/* ── 12. .hs-cta-final / .hs-cta-card ── */
body.light .hs-cta-final::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(217,119,6,0.10) 0%, transparent 70%);
}
body.light .hs-cta-card { background: transparent; }
body.light .hs-cta-card h2 { color: #0f172a; }
body.light .hs-cta-card p { color: rgba(15,23,42,0.60); }

/* ── 13. .hs-platbase ── */
body.light .hs-platbase {
  background: #ffffff;
  border-color: rgba(15,23,42,0.10);
}
body.light .hs-platbase__head h3 { color: #0f172a; }
body.light .hs-platbase__head p { color: rgba(15,23,42,0.60); }
body.light .hs-platbase__pillar { border-color: rgba(15,23,42,0.08); }
body.light .hs-platbase__pillar .k { color: #0f172a; }
body.light .hs-platbase__pillar .d { color: rgba(15,23,42,0.55); }

/* ── 14. .hs-section-alt 內的卡片文字 ── */
body.light .hs-section-alt .hs-card { background: #ffffff; }

/* ── 15. .hs-gov-section ── */
body.light .hs-gov-section {
  background: #f1f5f9;
  border-color: rgba(15,23,42,0.10);
}
/* hs-gov-card：light mode 改為「淺底深字」CTA 卡——亮色系就該是亮的，
   不在亮色頁塞深色塊。保留 orange accent 光暈與 2026 tag；右側預算面板同步淺色。
   文字沿用 body.light 預設深色 var，故 gov-card 不在下方 var re-scope 清單。 */
body.light .hs-gov-card {
  background:
    radial-gradient(620px 320px at 88% 112%, rgba(var(--hs-accent-glow),0.12), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #eef2f7 100%);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 24px 60px -28px rgba(15,23,42,0.20);
}
body.light .hs-budget-panel {
  background: linear-gradient(180deg, rgba(15,23,42,0.04), rgba(15,23,42,0.015));
  border-color: rgba(15,23,42,0.10);
}
body.light .hs-budget-big { color: #0f172a; }
body.light .hs-bar-row .track { background: rgba(15,23,42,0.08); }
/* 首頁 light mode：架構圖 產品層/基礎層 + 見證卡片，原 rgba(255,255,255,0.02)（dark 值）疊淺底
   幾乎隱形＝卡片扁平。給 --hs-surface(#fff)+--hs-border 表面。平台層有橘色漸層保留故 :not 排除。*/
body.light .hs-arch-layer:not(.hs-arch-platform),
body.light .hs-case {
  background: var(--hs-surface);
  border-color: var(--hs-border);
  box-shadow: 0 2px 10px rgba(15,23,42,0.05);
}
/* 痛點卡 / 區段項 / FAQ 卡：同 rgba(255,255,255,0.02) dark 值在淺底扁平隱形（跨 12+ 產品頁）
   → 白色表面浮出。不含 mockup 內部元件(pos-row/pay-tile/slot/cal)。ai-cad 的 .hs-pain accent
   變體用 inline style，優先級高於此 class 規則，自動豁免不誤傷。*/
body.light .hs-pain,
body.light .hs-sec-item,
body.light .hs-faq-item {
  background: var(--hs-surface);
  border-color: var(--hs-border);
  box-shadow: 0 2px 10px rgba(15,23,42,0.05);
}
/* .hs-mod 模組功能卡（72 個，跨 about/ai-cad/abacus/conch 等 13 頁）：dark 預設
   linear-gradient(rgba(255,255,255,0.025)…) 在淺底幾乎透明＝扁平消失，與已修的
   hs-pain/hs-sec-item 同群組標準不一致 → 同值白卡浮出。文字全用 token 自動翻深、
   inline style 皆只設版面無 background 故不衝突；內部 mockup 子元件保留自身樣式。dark 零影響。 */
body.light .hs-mod {
  background: var(--hs-surface);
  border-color: var(--hs-border);
  box-shadow: 0 2px 10px rgba(15,23,42,0.05);
}
/* 比較表外框(conch/abacus) + 成果小卡(ai-subsidy)：原 rgba(255,255,255,0.02) 淺底無卡片框/扁平
   → 白色卡浮出。.hs-cmp 內部 .old/.new 欄各有自己 background，外框白底不覆蓋＝分欄保留。 */
body.light .hs-cmp,
body.light .hs-case-mini {
  background: var(--hs-surface);
  border-color: var(--hs-border);
  box-shadow: 0 2px 10px rgba(15,23,42,0.05);
}

/* ===== 全面淺色化（用戶定調：亮色系不留黑塊）===== */

/* OpenClaw 聊天 mock → 淺色聊天 UI */
body.light .hs-oc-mock {
  background: #ffffff; border-color: rgba(15,23,42,0.10);
  box-shadow: 0 30px 70px -32px rgba(15,23,42,0.28);
}
body.light .hs-oc-mock .mhead { background: rgba(15,23,42,0.025); border-bottom-color: rgba(15,23,42,0.08); }
/* .mstat 亮綠 #6ed58d 在白底對比度 ~2.5:1 不達 WCAG AA；light 改 green-600 (#16a34a) 對比 5.1:1 */
body.light .hs-oc-mock .mstat { color: #16a34a; }
body.light .hs-oc-mock .mstat::before { background: #16a34a; }
body.light .hs-msg.bot { background: #f1f5f9; border-color: rgba(15,23,42,0.08); }
/* .mtitle/.hs-msg/.time 用 var(--hs-fg*)，body.light 預設深色即可讀；.hs-msg.user 維持橘色 */

/* OpenClaw 六個功能任務卡：dark default bg=rgba(255,255,255,0.02) 在白底幾乎透明＝扁平，
   給白色卡面+邊框+輕投影浮出（與 .hs-oc-mock light 同語言）。dark 不受影響。 */
body.light .hs-oc-task {
  background: var(--hs-surface);
  border-color: var(--hs-border);
  box-shadow: 0 1px 4px rgba(15,23,42,0.06);
}

/* 三大產品視覺卡 → 淺色品牌磚（保留品牌色調性） */
body.light .hs-pvis-lobster {
  background: radial-gradient(circle at 30% 70%, rgba(var(--hs-accent-glow),0.14), transparent 55%),
    linear-gradient(135deg, #fff7ed, #ffe8d6);
}
body.light .hs-pvis-nautilus { background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
body.light .hs-pvis-squid { background: linear-gradient(135deg, #ecfdf5, #d6f5e8); color: #0f766e; }
body.light .hs-pvis-badge {
  background: rgba(255,255,255,0.78); color: rgba(15,23,42,0.62); border-color: rgba(15,23,42,0.12);
}
/* .hs-pvis-logo 用 var(--hs-fg) → 深字，於淺磚可讀 */
/* squid 終端機字色（class 化以支援雙主題；原為 inline 硬色只支援深色）*/
.sq-pre { color: #6fd8c6; font-size: 11px; margin: 28px 0 0; padding-left: 4px; line-height: 1.7; font-family: "JetBrains Mono",monospace; }
.sq-prompt { color: #ff8e6e; }
.sq-ok { color: #6fd8c6; }
.sq-dim { opacity: .5; }
.sq-idle { color: #ffc24a; }
body.light .sq-pre { color: #0f766e; }
body.light .sq-prompt { color: #ea580c; }
body.light .sq-ok { color: #0d9488; }
body.light .sq-dim { color: rgba(15,23,42,0.40); }
body.light .sq-idle { color: #d97706; }

/* hero-vis-card 預設 light mode 淺底深字（純文字卡）；ai-cad/pipeline 用 .hs-vis-keepdark 排除 */
body.light .hs-hero-vis-card:not(.hs-vis-keepdark) {
  background: linear-gradient(160deg, #f8fafc, #f1f5f9);
  border-color: rgba(15,23,42,0.12);
  box-shadow: 0 4px 24px rgba(15,23,42,0.08);
  --hs-fg: #0f172a;
  --hs-fg-dim: #475569;
  --hs-fg-mute: #64748b;
  --hs-hairline: rgba(15,23,42,0.10);
  --hs-hairline-2: rgba(15,23,42,0.08);
}
body.light .hs-hero-vis-card:not(.hs-vis-keepdark)::before {
  background-image: linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px);
}
/* ai-cad / pipeline 暫維持深底淺字（SVG 線條待下一批 class 化）*/
body.light .hs-hero-vis-card.hs-vis-keepdark {
  --hs-fg: #f5f6fa;
  --hs-fg-dim: #b6bdd1;
  --hs-fg-mute: #7c85a0;
}
/* nautilus / lobsterfarm 內嵌 row（原 inline rgba(255,255,255,0.04)）在淺底改淺灰 */
body.light .hs-hero-vis-card:not(.hs-vis-keepdark) .hs-vis-row {
  background: rgba(15,23,42,0.03) !important;
  border-color: rgba(15,23,42,0.08) !important;
}

/* ── 16. Footer 亮色專業化設計 ──
   修正：footer bg 本來就跟著 var(--hs-bg) 變淺，但 logo(品牌淺青 #8ec5c0)在淺底隱形、
   文字 alpha 太低、無區隔感。重新設計：可見深青 logo + 提升對比 + 微區隔底。 */
body.light .hs-footer {
  background: #eef2f7;
  border-top-color: rgba(15,23,42,0.10);
}
/* logo 描邊改深青：淺底清楚可見、保留品牌青（同步讓 navbar logo 也更明顯）*/
body.light .hs-brand-mark { color: #0d9488; }
/* 品牌簡介 + 聯絡資訊提升對比 */
body.light .hs-foot-brand p { color: rgba(15,23,42,0.64); }
body.light .hs-foot-contact li { color: rgba(15,23,42,0.60); }
body.light .hs-foot-contact a { color: rgba(15,23,42,0.62); }
body.light .hs-foot-contact a:hover { color: var(--hs-accent-text); }
/* 連結加深更好讀 */
body.light .hs-foot-col ul a { color: rgba(15,23,42,0.72); }
/* footer 次要文字 + 見證卡公司名：原 alpha 太低在淺底 < 4.5:1 WCAG fail → 0.62 (~4.8-5.0:1 AA) */
body.light .hs-foot-social a { color: rgba(15,23,42,0.62); }
body.light .hs-foot-bottom { color: rgba(15,23,42,0.62); }
body.light .hs-foot-bottom .links a { color: rgba(15,23,42,0.62); }
body.light .hs-case .co { color: rgba(15,23,42,0.62); }
/* 產品圖示原為白色單色 SVG(<img>，內部色不可用 CSS 改)，淺底隱形 →
   filter invert 把白翻深灰，淺底可見（保留圖案形狀）*/
body.light .hs-foot-prod-icon { opacity: 1; filter: invert(0.78); }
/* products 產品卡白線 SVG icon 在淺底隱形 → 同樣 invert 翻深灰可見（dark 不變） */
body.light .hs-prod-card-icon { filter: invert(0.78); }

/* ── mobile sheet menu ── */
body.light .hs-sheet {
  background: #ffffff;
  border-top-color: rgba(15,23,42,0.10);
}
body.light .hs-drop-item:hover,
body.light .hs-sheet-item:hover { background: rgba(15,23,42,0.04); color: #0f172a; }
body.light .hs-drop-item.is-active { background: rgba(217,119,6,0.10); color: #b45309; }
body.light .hs-drop-item.is-active .desc { color: rgba(180,83,9,0.65); }
body.light .hs-drop-item .lbl,
body.light .hs-drop-item .name,
body.light .hs-sheet-item .lbl,
body.light .hs-sheet-item .name { color: #0f172a; }
body.light .hs-drop-item .desc,
body.light .hs-sheet-item .desc { color: rgba(15,23,42,0.65); }

/* mobile sheet + hairline light 修正 */

/* R1 sheet 主連結 */
body.light .hs-sheet-link { color: #0f172a; }
body.light .hs-sheet-link.is-active { color: #b45309; }
body.light .hs-sheet-link .chev { border-right-color: rgba(15,23,42,0.45); border-bottom-color: rgba(15,23,42,0.45); }

/* R2 sheet 子項目文字 */
body.light .hs-sheet-child { color: rgba(15,23,42,0.75); }
body.light .hs-sheet-child .lbl { color: #0f172a; }
body.light .hs-sheet-child .desc { color: rgba(15,23,42,0.55); }
body.light .hs-sheet-child.is-active { color: #b45309; background: rgba(217,119,6,0.06); }

/* R3 sheet-child hover */
body.light .hs-sheet-child:hover { background: rgba(15,23,42,0.05); color: #0f172a; }

/* R4 sheet-group 分隔線 */
body.light .hs-sheet-group { border-bottom-color: rgba(15,23,42,0.08); }

/* R6 burger 漢堡線條（base 為 #f5f6fa，light 白底不可見，改深色） */
body.light .hs-burger span,
body.light .hs-burger span::before,
body.light .hs-burger span::after { background: #0f172a; }


/* ================================================================
   body.light 補丁 — 視覺親測後修正的 hardcoded dark 元件
   2026-06-04
   ================================================================ */

/* ── 首頁 / 各產品頁 浮動統計卡 (.hs-stat-card) ── */
body.light .hs-stat-card {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(15,23,42,0.12) !important;
  box-shadow: 0 8px 32px rgba(15,23,42,0.10) !important;
}
body.light .hs-stat-card .lbl { color: rgba(15,23,42,0.65); }
body.light .hs-stat-card .val { color: #0f172a; }
body.light .hs-stat-card .val .unit { color: rgba(15,23,42,0.55); }
body.light .hs-stat-card .ic { background: rgba(217,119,6,0.08); border-color: rgba(217,119,6,0.20); }

/* ── hero 視覺面板 (.hs-hero-vis-card) 在 light mode 保持深色 ──
   這是「展示型深色面板」(P&ID 藍圖 / 資料流圖 / 公司資料表)，
   13 頁共用；其中 12 頁內嵌淺色 stroke 的 SVG 視覺(ai-cad 藍圖、
   pipeline 資料流、rgba(255,255,255,.4) 線條)，強制白底會讓視覺消失。
   與 eye-section / Squid 終端機同屬「刻意深色展示元件」，故 light 維持深色，
   不另外覆寫(沿用 :root 深色 base 即可)。 */

/* ── 算盤頁浮動統計卡 (.hs-vis-stat) ── */
body.light .hs-vis-stat {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(15,23,42,0.12) !important;
  box-shadow: 0 8px 32px rgba(15,23,42,0.10) !important;
}
body.light .hs-vis-stat .lbl { color: rgba(15,23,42,0.65); }
body.light .hs-vis-stat .val { color: #0f172a; }

/* ── AI補助頁 hero stat cards (.hs-hero-stat-mini) ── */
body.light .hs-hero-stat-mini {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(15,23,42,0.12) !important;
}

/* ── 首頁 big number ── */
body.light .hs-big-num { color: #0f172a; }
body.light .hs-big-num .em { color: #d97706; }

/* ── ai-cad P&ID SVG 雙主題線條色 ── */
.aicad-grid-line { stroke: rgba(100,180,255,0.12); }
.aicad-pipe { stroke: #4fc3f7; fill: #4fc3f7; }
.aicad-valve-gate { stroke: #ffd54f; }
.aicad-valve-circle { stroke: #81c784; }
.aicad-instrument-diamond { stroke: #ce93d8; fill: #ce93d8; }
.aicad-instrument-bubble { stroke: #80cbc4; fill: #80cbc4; }
.aicad-scan-frame { stroke: rgba(255,194,74,0.5); }
.aicad-caption { fill: rgba(255,255,255,0.35); }
body.light .aicad-grid-line { stroke: rgba(0,100,180,0.12); }
body.light .aicad-pipe { stroke: #0284c7; fill: #0284c7; }
body.light .aicad-valve-gate { stroke: #d97706; }
body.light .aicad-valve-circle { stroke: #16a34a; }
body.light .aicad-instrument-diamond { stroke: #9333ea; fill: #9333ea; }
body.light .aicad-instrument-bubble { stroke: #0d9488; fill: #0d9488; }
body.light .aicad-scan-frame { stroke: rgba(217,119,6,0.65); }
body.light .aicad-caption { fill: rgba(15,23,42,0.5); }

/* ── pipeline SVG 雙主題 ── */
.pip-mid-box { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.1); }
.pip-sub-label { fill: rgba(255,255,255,0.4); }
.pip-conn-white { stroke: rgba(255,255,255,0.12); }
.pip-legend-tools { fill: rgba(255,255,255,0.35); }
body.light .pip-mid-box { fill: rgba(15,23,42,0.03); stroke: rgba(15,23,42,0.15); }
body.light .pip-sub-label { fill: rgba(15,23,42,0.58); }
body.light .pip-conn-white { stroke: rgba(15,23,42,0.20); }
body.light .pip-legend-tools { fill: rgba(15,23,42,0.5); }

/* ===== eye-dark-section 全面淺色化 ===== */
.eye-section-bg { background: linear-gradient(180deg, #070d1a 0%, #0c1526 60%, #0f172a 100%); }
body.light .eye-section-bg { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 60%, #e8eef5 100%); }
.eye-text-primary { color: #fff; }
.eye-text-secondary { color: rgba(255,255,255,0.65); }
.eye-text-muted { color: rgba(255,255,255,0.4); }
.eye-text-faint { color: rgba(255,255,255,0.25); }
.eye-text-subdued { color: rgba(255,255,255,0.35); }
.eye-divider-line { background: rgba(255,255,255,0.15); }
.eye-divider { border-bottom: 1px solid rgba(255,255,255,0.06); }
body.light .eye-text-primary { color: #0f172a; }
body.light .eye-text-secondary { color: rgba(15,23,42,0.65); }
body.light .eye-text-muted { color: rgba(15,23,42,0.45); }
body.light .eye-text-faint { color: rgba(15,23,42,0.30); }
body.light .eye-text-subdued { color: rgba(15,23,42,0.45); }
body.light .eye-divider-line { background: rgba(15,23,42,0.15); }
body.light .eye-divider { border-bottom-color: rgba(15,23,42,0.08); }
.eye-feat-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
body.light .eye-feat-card { background: #fff; border-color: rgba(15,23,42,0.10); box-shadow: 0 1px 4px rgba(15,23,42,0.06); }
.eye-lang-pill { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
body.light .eye-lang-pill { background: rgba(15,23,42,0.06); border-color: rgba(15,23,42,0.12); color: rgba(15,23,42,0.65); }
.eye-lang-cs { background: rgba(139,92,246,0.18); border: 1px solid rgba(139,92,246,0.45); color: #c4b5fd; }
body.light .eye-lang-cs { background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.30); color: #6d28d9; }
.eye-lang-swift { background: rgba(249,115,22,0.18); border: 1px solid rgba(249,115,22,0.45); color: #fdba74; }
body.light .eye-lang-swift { background: rgba(194,65,12,0.08); border-color: rgba(194,65,12,0.30); color: #c2410c; }
.eye-lang-java { background: rgba(245,158,11,0.2); border: 1px solid rgba(245,158,11,0.5); color: var(--hs-accent); }
body.light .eye-lang-java { background: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.35); }
.eye-stat-purple { color: #c4b5fd; }
body.light .eye-stat-purple { color: #6d28d9; }
.eye-trial-card { background: linear-gradient(135deg,rgba(16,185,129,0.1),rgba(5,150,105,0.04)); border: 1px solid rgba(16,185,129,0.25); }
body.light .eye-trial-card { background: linear-gradient(135deg,rgba(16,185,129,0.08),rgba(5,150,105,0.03)); border-color: rgba(5,150,105,0.20); box-shadow: 0 1px 4px rgba(5,150,105,0.08); }
.eye-trial-title { color: #6ee7b7; }
body.light .eye-trial-title { color: #065f46; }
.eye-trial-check { color: rgba(255,255,255,0.6); }
body.light .eye-trial-check { color: rgba(15,23,42,0.65); }
.eye-trial-icon { color: #6ee7b7; }
body.light .eye-trial-icon { color: #059669; }
.eye-dl-icon-apple { color: #e8e8e8; }
body.light .eye-dl-icon-apple { color: #1d1d1f; }
body.light [style*="color:#f4a118"] { color: #b45309 !important; } /* GitHub icon on white: #f4a118 ~2.1:1 → #b45309 ~5.1:1 */
.eye-wsl-badge { background: rgba(0,173,239,0.15); color: #7dd3fc; }
body.light .eye-wsl-badge { background: rgba(0,120,210,0.10); color: #0369a1; }

/* ======================================================================
 * dagongzai 全面淺色化 — light mode 覆寫
 * dark default 全部保留原值；所有改動只加 body.light 前綴
 * ====================================================================== */

/* --- Section 背景 dark default --- */
.dz-sec-a { background: #0d1b2a; }
.dz-sec-b { background: rgba(15,23,42,0.6); }
.dz-sec-c { background: #0a1628; }

/* --- Section 背景 light mode --- */
body.light .dz-sec-a { background: #f0f4f8; }
body.light .dz-sec-b { background: #f8fafc; }
body.light .dz-sec-c { background: #eef2f7; }

/* --- 卡片背景 dark default --- */
.dz-hero-card    { background: rgba(255,255,255,0.04); }
.dz-feature-card { background: rgba(255,255,255,0.03); }
.dz-trust-card   { background: rgba(255,255,255,0.04); }

/* --- 卡片背景 light mode --- */
body.light .dz-hero-card    { background: rgba(255,255,255,0.85); }
body.light .dz-feature-card { background: rgba(255,255,255,0.80); }
body.light .dz-trust-card   { background: #ffffff; border-color: rgba(15,23,42,0.12) !important; }

/* --- 全頁文字 light mode：.hs-page 範圍覆寫 text-white 與 inline 淺色 --- */
body.light .hs-page .text-white {
  color: #1e293b !important;
}

/* inline style color:#94a3b8 → 中灰，淺底可讀 */
body.light .hs-page [style*="color:#94a3b8"] {
  color: #475569 !important;
}
/* inline style color:#cbd5e1 → 深灰 */
body.light .hs-page [style*="color:#cbd5e1"] {
  color: #334155 !important;
}
/* inline style color:#64748b — 已接近可讀，稍微加深 */
body.light .hs-page [style*="color:#64748b"] {
  color: #374151 !important;
}

/* --- Hero 裝飾光暈 — 淺底保持低調 --- */
body.light .hs-hero [style*="background:rgba(121,134,203"] {
  opacity: 0.25;
}
body.light .hs-hero [style*="background:rgba(245,158,11"] {
  opacity: 0.20;
}

/* --- Hero badge（teal 邊框 + 淺綠底） — 淺底維持 --- */
/* badge background: rgba(142,197,192,0.10) 淺底下稍加深邊框即可，已自洽 */

/* --- Hero H1：淺底改深色 --- */
body.light .hs-hero h1.text-white {
  color: #0f172a !important;
}
/* hero_slogan2 用 var(--dz-cta-primary) 琥珀金 — 淺底上足夠對比，保留 */

/* --- hero 登入提示 SVG icon color:#8ec5c0 — 品牌色，淺底可接受，保留 --- */

/* --- Features section 標題與說明 --- */
body.light .dz-sec-a .text-white,
body.light .dz-sec-c .text-white {
  color: #1e293b !important;
}
body.light .dz-sec-b .text-white {
  color: #1e293b !important;
}

/* --- SVG 流程圖 text 節點：fill="#94a3b8" 淺底不可讀 → 深灰 --- */
/* 發案方流程 SVG（amber box）*/
body.light .dz-sec-a svg text[fill="#94a3b8"] {
  fill: #475569;
}
/* 接案方流程 SVG（green box）*/
body.light .dz-sec-a svg text[fill="#64748b"] {
  fill: #374151;
}

/* --- Features item 說明文字 --- */
body.light .dz-sec-a [style*="color:#94a3b8"],
body.light .dz-sec-b [style*="color:#94a3b8"],
body.light .dz-sec-c [style*="color:#94a3b8"] {
  color: #475569 !important;
}

/* --- SVG 流程圖容器背景 — 淺底下半透明琥珀/green box 仍可接受 --- */
/* rgba(245,158,11,0.05) amber box 在淺底幾乎看不見 → 稍加深 */
body.light .dz-sec-a .rounded-xl[style*="background:rgba(245,158,11,0.05)"] {
  background: rgba(245,158,11,0.08) !important;
}
body.light .dz-sec-a .rounded-xl[style*="background:rgba(102,187,106,0.05)"] {
  background: rgba(102,187,106,0.08) !important;
}

/* --- step icon box（how-it-works amber/indigo/teal box） --- */
/* 這些是 rgba(..,0.12) — 淺底下仍有輕微色調，可接受，不動 */

/* --- step 圓形數字 badge：var(--dz-accent) indigo 底＋白字 — 雙主題都可讀，保留 --- */

/* --- CTA final section light mode 文字 --- */
/* 底色 light: fef3c7→fbbf24，是暖黃；文字必須深棕才可讀 */
body.light .hs-cta-final .text-white {
  color: #78350f !important;
}
/* badge: color:#fcd34d 在暖黃底不夠對比 → 深棕 */
body.light .hs-cta-final [style*="color:#fcd34d"] {
  color: #92400e !important;
}
/* cta_subtitle span color:#fcd34d */
body.light .hs-cta-final span[style*="color:#fcd34d"] {
  color: #92400e !important;
}
/* cta_desc: color:rgba(254,243,199,0.70) — 極淺，不可讀 → 深棕 */
body.light .hs-cta-final [style*="color:rgba(254,243,199"] {
  color: #78350f !important;
}
/* CTA badge border & background 在暖黃底 */
body.light .hs-cta-final [style*="background:rgba(245,166,35,0.10)"] {
  background: rgba(120,53,15,0.10) !important;
  border-color: rgba(120,53,15,0.25) !important;
}
/* 光暈裝飾在淺底偏暗，降低 opacity */
body.light .hs-cta-final [style*="background:rgba(245,158,11,0.10)"],
body.light .hs-cta-final [style*="background:rgba(180,83,9,0.10)"] {
  opacity: 0.3;
}
/* CTA 第二顆按鈕：border:2px solid rgba(254,243,199,0.40); color:#fef3c7 — 極淺不可讀 */
body.light .hs-cta-final .hs-btn[style*="border:2px solid rgba(254,243,199"] {
  border-color: rgba(120,53,15,0.50) !important;
  color: #78350f !important;
}
/* 底部信任小字: color:rgba(253,224,133,0.40) — 不可讀 → 深棕半透明 */
body.light .hs-cta-final [style*="color:rgba(253,224,133"] {
  color: rgba(120,53,15,0.65) !important;
}

/* --- dz-sticky-mobile-bar light mode --- */
body.light .dz-sticky-mobile-bar {
  background: rgba(255,255,255,0.95);
  border-top-color: rgba(15,23,42,0.12);
}

/* --- dz-chip light mode（chip 已有色彩，淺底上需確認對比） --- */
/* dz-chip-employer: amber 底 + #fbbf24 字 → 淺底改深棕字 */
body.light .dz-chip-employer {
  background: rgba(245,158,11,0.15);
  color: #92400e;
  border-color: rgba(245,158,11,0.4);
}
/* dz-chip-freelancer: green 底 + #86efac 字 → 淺底改深綠字 */
body.light .dz-chip-freelancer {
  background: rgba(102,187,106,0.15);
  color: #166534;
  border-color: rgba(102,187,106,0.4);
}

/* --- hs-btn-ghost indigo 在 scoped style 已處理，確保 dz-sec-a/b/c 內也覆寫 --- */
body.light .dz-sec-a .hs-btn-ghost,
body.light .dz-sec-b .hs-btn-ghost,
body.light .dz-sec-c .hs-btn-ghost {
  border-color: #5c6bc0;
  color: #3949ab;
}

/* --- feature card list item 圓圈 icon：color 是 inline var(--dz-success) / #f59e0b — 保留（品牌色） --- */

/* --- dz-testimonial-card（若日後啟用）light mode 預留 --- */
body.light .dz-testimonial-card {
  background: #ffffff;
  border-color: rgba(121,134,203,0.25);
}

/* ===== focus-visible：light mode 鍵盤焦點環（WCAG 2.4.7）===== */
body.light .hs-btn:focus-visible,
body.light .rd-btn:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 3px;
}
body.light .hs-btn-primary:focus-visible,
body.light .rd-btn-amber:focus-visible {
  outline: 3px solid #0f172a;
  outline-offset: 3px;
}
body.light .hs-nav-link:focus-visible,
body.light .hs-cta:focus-visible,
body.light #rd-nav nav a:focus-visible,
body.light #rd-nav nav button:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 4px;
  border-radius: 4px;
}
body.light .hs-drop-item:focus-visible,
body.light .hs-sheet-child:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 2px;
  border-radius: 6px;
}
body.light .hs-form input:focus-visible,
body.light .hs-form select:focus-visible,
body.light .hs-form textarea:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 2px;
}

/* ---------- install 方案速覽 band：雙主題 background ---------- */
.hs-pricing-band { background: linear-gradient(135deg, #0d1117 0%, #0d2137 100%); }
body.light .hs-pricing-band { background: linear-gradient(135deg, #f0f4f8 0%, #e8eef5 100%); }

/* ---------- body.light form placeholder ---------- */
body.light .hs-form input::placeholder,
body.light .hs-form select::placeholder,
body.light .hs-form textarea::placeholder {
  color: rgba(15,23,42,0.40);
  opacity: 1;
}

/* ── Conch hero mockup phone + POS light mode ── */
body.light .hs-phone { background: linear-gradient(160deg,#f1f5f9,#e8eef5); border-color: rgba(15,23,42,0.14); box-shadow: 0 20px 48px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.9); }
body.light .hs-phone::before { background: #334155; }
body.light .hs-pos { background: linear-gradient(160deg,#f8fafc,#f1f5f9); border-color: rgba(15,23,42,0.14); box-shadow: 0 20px 48px rgba(15,23,42,0.12); }
body.light .hs-cal { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.10); }
body.light .hs-cal .d { background: rgba(15,23,42,0.03); }
body.light .hs-cal .d.full { background: rgba(15,23,42,0.02); }
body.light .hs-slot { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.10); }
body.light .hs-pos-row { background: rgba(15,23,42,0.03); }
/* POS 數量小字(.qty)用 --hs-fg-mute(0.45)在淺底 ~3.2:1，11px 小字 AA fail → 提到 0.62 約 4.6:1。
   nm/pr 用 --hs-fg(#0f172a)已是深字可讀不動；維持 qty 比 nm 略淡的次要層級。 */
body.light .hs-pos-row .qty { color: rgba(15,23,42,0.62); }
body.light .hs-pay-tile { background: rgba(15,23,42,0.03); border-color: rgba(15,23,42,0.10); }
body.light .hs-pos-head { border-bottom-color: rgba(15,23,42,0.10); }

/* ── AI補助頁 費用結構卡 (.hs-fee-card) 淺色化 ── */
body.light .hs-fee-card {
  background: linear-gradient(135deg, #ffffff, #f1f5f9);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 4px 24px rgba(15,23,42,0.08);
}
body.light .hs-fee-card ul li { background: rgba(15,23,42,0.03); }

/* ── 法務頁 terms/privacy：舊 styles.css 的 .policy-* 從深色卡淺色化 ──
   legacy 是 .policy-section background:rgba(30,41,59,0.7) 深卡、title 用 amber #f59e0b，
   在淺色頁上深卡突兀 + amber 標題對比不足。重新設計成白底文件卡 + 深字 + 達 AA 的深橘標題。*/
body.light .policy-container { background: transparent; backdrop-filter: none; padding: 0; }
body.light .policy-section {
  background: #ffffff;
  border-left-color: var(--hs-accent);
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 4px 16px rgba(15,23,42,0.05);
}
body.light .policy-title { color: var(--hs-accent-text); border-bottom-color: rgba(15,23,42,0.10); }
body.light .policy-subtitle { color: var(--hs-accent-text); }
body.light .policy-subsection { color: var(--hs-accent-text); border-left-color: var(--hs-accent); }
body.light .policy-text { color: rgba(15,23,42,0.78); }
body.light .policy-list li { color: rgba(15,23,42,0.78); }