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

html { scroll-behavior: smooth; }

/* ===== 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, body:not(.light) {
  --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.45); }
.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: transform .25s ease, opacity .25s ease; }
.rd-mobile-menu.hidden-m { 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) {
  .reveal { opacity:1 !important; transform: none !important; transition: none !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 {
  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;
}
.dark #rd-theme-toggle {
  border-color: rgba(255,255,255,0.15);
}
#rd-theme-toggle:hover { border-color: #f59e0b; }

/* 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 {
  border-color: rgba(15,23,42,0.20);
  color: #0f172a;
}
body.light #rd-theme-toggle .icon-moon {
  color: #f59e0b;
}

/* ===== 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;
}

/* ---------- 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:      #1a237e;   /* Hero 深藍 */
  --dz-primary-2:    #283593;
  --dz-cta-primary:  #f59e0b;   /* amber — 高對比主 CTA */
  --dz-accent:       #7986cb;   /* indigo — 標籤 / 次要 UI */
  --dz-success:      #66bb6a;   /* 接案方功能色 */
  --dz-teal:         #8ec5c0;   /* LOGO / badge */
  --dz-bg:           #0f172a;   /* slate-900 深底 */
}

/* 打工仔按鈕共用基礎 */
@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 漸層背景 */
.dz-hero-bg {
  background: linear-gradient(135deg, var(--dz-primary) 0%, var(--dz-primary-2) 60%, #1e3a8a 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 */
.dz-role-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-role-chip-employer {
  background: rgba(245,158,11,0.15);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,0.3);
}
.dz-role-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;
}