/* ============================================================================
   HUIDUN 前台官網共用設計系統（design tokens + 共用元件樣式）
   色彩/字體 token 對齊 app.hui-dun.com 內部系統既有品牌識別（--hd-navy 等），
   確保從官網點「立即體驗」進入 Console 登入頁時視覺一致、無縫銜接。
   ============================================================================ */

:root{
  /* 品牌主色（與內部系統 --hd-navy 完全一致） */
  --navy:#091D52;
  --navy-2:#0B2B70;
  --navy-deep:#061436;
  --navy-tint:#EEF2FB;

  /* 金色點綴（尊榮/信任感，呼應會員卡等級色） */
  --gold:#B8934A;
  --gold-light:#E8D9B8;

  /* 中性色 */
  --ink:#161616;
  --sub:#525252;
  --sub-2:#8A94A6;
  --line:#E0E0E0;
  --line-soft:#EEF0F4;
  --bg:#FFFFFF;
  --bg-soft:#F7F8FB;
  --cream:#FAF7F0;

  /* 語意色 */
  --ok:#0F6027;
  --warn:#B8860B;

  /* 尺度 */
  --r:10px;
  --r-sm:6px;
  --r-lg:20px;
  --container:1180px;
  --sh-1:0 1px 3px rgba(9,29,82,.08);
  --sh-2:0 8px 30px rgba(9,29,82,.10);
  --sh-3:0 20px 60px rgba(9,29,82,.16);

  --font: 'IBM Plex Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',-apple-system,BlinkMacSystemFont,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em; font-weight:800; letter-spacing:-.01em; color:var(--navy)}
h1{font-size:clamp(32px,5vw,56px); line-height:1.15}
h2{font-size:clamp(26px,3.6vw,38px); line-height:1.25}
h3{font-size:20px; line-height:1.4}
p{margin:0 0 1em; color:var(--sub)}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.section{padding:88px 0}
.section.tight{padding:56px 0}
.section.soft{background:var(--bg-soft)}
.section.navy{background:var(--navy); color:#fff}
.section.navy h1,.section.navy h2,.section.navy h3{color:#fff}
.section.navy p{color:rgba(255,255,255,.78)}
.section.cream{background:var(--cream)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--gold);display:inline-block}
.lead{font-size:19px; color:var(--sub); max-width:640px}
.center{text-align:center; margin-left:auto; margin-right:auto}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 26px; border-radius:var(--r-sm); font-weight:700; font-size:15px;
  border:none; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
.btn.primary{background:var(--navy); color:#fff; box-shadow:var(--sh-1)}
.btn.primary:hover{background:var(--navy-2); box-shadow:var(--sh-2)}
.btn.gold{background:var(--gold); color:#fff}
.btn.gold:hover{background:#a37f3d}
.btn.outline{background:transparent; color:var(--navy); border:1.5px solid var(--navy)}
.btn.outline:hover{background:var(--navy-tint)}
.btn.outline.on-navy{color:#fff; border-color:rgba(255,255,255,.5)}
.btn.outline.on-navy:hover{background:rgba(255,255,255,.1)}
.btn.ghost{background:transparent; color:var(--navy); height:auto; padding:0}
.btn.lg{height:56px; padding:0 34px; font-size:16px}
.btn.sm{height:38px; padding:0 18px; font-size:13.5px}

/* ---------- 頂部導覽 ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav .container{display:flex; align-items:center; justify-content:space-between; height:76px; gap:28px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--navy)}
.brand .mark{width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--sub-2);letter-spacing:.03em}
.navlinks{display:flex; align-items:center; gap:30px; font-size:14.5px; font-weight:600; color:var(--ink)}
.navlinks a{color:var(--sub); padding:8px 0; position:relative}
.navlinks a:hover,.navlinks a.on{color:var(--navy)}
.navlinks a.on::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);border-radius:2px}
.navcta{display:flex; align-items:center; gap:12px}
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
@media (max-width:900px){
  .navlinks{position:fixed; inset:76px 0 0 0; background:#fff; flex-direction:column; align-items:flex-start; padding:24px; gap:6px; display:none; overflow-y:auto}
  .navlinks.open{display:flex}
  .navlinks a{width:100%; padding:14px 4px; border-bottom:1px solid var(--line-soft)}
  .navtoggle{display:block}
  .navcta .btn.outline{display:none}
}

/* ---------- Hero ---------- */
.hero{padding:76px 0 40px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
.hero-badge{font-size:12.5px; font-weight:700; color:var(--navy); background:var(--navy-tint); padding:8px 14px; border-radius:99px}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}
.hero-stats{display:flex; gap:0; margin-top:48px; border-top:1px solid var(--line-soft); padding-top:28px}
.hero-stat{flex:1; padding-right:20px}
.hero-stat b{display:block; font-size:30px; color:var(--navy); font-weight:800}
.hero-stat span{font-size:13px; color:var(--sub-2)}

/* ---------- 卡片 ---------- */
.grid{display:grid; gap:24px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
@media (max-width:1100px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
.card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r); padding:30px;
  box-shadow:var(--sh-1); transition:.2s ease;
}
.card:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.card .icon{
  width:48px; height:48px; border-radius:12px; background:var(--navy-tint); color:var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.card .icon svg{width:24px;height:24px}
.card h3{margin-bottom:8px}
.card p{font-size:14.5px; margin-bottom:0}
.card.feature{padding:34px}
.tag{display:inline-block; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:6px; background:var(--navy-tint); color:var(--navy); margin-bottom:10px}

/* ---------- 情境示意面板（取代真實系統截圖，向量化風格） ---------- */
.mock{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sh-3); position:relative; overflow:hidden;
}
.mock-screen{background:#fff; border-radius:calc(var(--r-lg) - 8px); padding:22px; min-height:280px}
.mock-bar{display:flex; gap:6px; margin-bottom:16px}
.mock-dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.mock-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft)}
.mock-row:last-child{border-bottom:none}
.mock-avatar{width:34px;height:34px;border-radius:8px;background:var(--navy-tint)}
.mock-lines{flex:1}
.mock-line{height:8px;border-radius:4px;background:var(--line-soft);margin-bottom:6px}
.mock-line.w60{width:60%}
.mock-line.w40{width:40%}
.mock-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--navy-tint);color:var(--navy)}
.mock-pill.gold{background:var(--gold-light);color:#8a6d1f}

/* ---------- Logo 條 / 見證 ---------- */
.logostrip{display:flex; gap:40px; align-items:center; justify-content:center; flex-wrap:wrap; opacity:.55; filter:grayscale(1)}
.quote{background:var(--bg-soft); border-radius:var(--r-lg); padding:44px; position:relative}
.quote::before{content:'"'; font-size:80px; color:var(--gold-light); position:absolute; top:6px; left:24px; font-family:Georgia,serif}
.quote p{font-size:18px; color:var(--ink); position:relative; z-index:1; font-style:italic}
.quote .who{font-weight:700; color:var(--navy); font-style:normal}

/* ---------- 表單 ---------- */
.field{margin-bottom:18px}
.field label{display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; font-size:14.5px;
  font-family:var(--font); background:#fff; color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-tint)}
.field textarea{min-height:120px; resize:vertical}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:700px){.field-row{grid-template-columns:1fr}}
.msg{font-size:13.5px; margin-top:10px}
.msg.ok{color:var(--ok)}
.msg.err{color:#B3261E}

/* ---------- 頁尾 ---------- */
.footer{background:var(--navy-deep); color:rgba(255,255,255,.72); padding:64px 0 28px; font-size:14px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer h4{color:#fff; font-size:13.5px; letter-spacing:.03em; margin-bottom:16px}
.footer a{display:block; color:rgba(255,255,255,.65); padding:5px 0}
.footer a:hover{color:#fff}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12.5px; flex-wrap:wrap; gap:10px}

/* ---------- 中/英切換、雜項 ---------- */
.langsel{font-size:13px; font-weight:600; color:var(--sub); display:flex; align-items:center; gap:4px; cursor:pointer}
.divider{height:1px; background:var(--line-soft); margin:0}
.badge-num{width:40px;height:40px;border-radius:10px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0}
.numbered{display:flex; gap:18px; align-items:flex-start; margin-bottom:28px}
.numbered:last-child{margin-bottom:0}
.checklist{list-style:none; margin:0; padding:0}
.checklist li{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:15px; color:var(--sub)}
.checklist li svg{flex-shrink:0; margin-top:3px; color:var(--gold)}
.pillrow{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.pillrow .p{font-size:13px;font-weight:700;color:var(--navy);background:var(--navy-tint);padding:7px 14px;border-radius:99px}

/* ---------- Reveal 動畫（輕量，無依賴） ---------- */
/* ★修復（2026-08-03 實測發現：整頁曾經因為 reveal 動畫的「先藏起來、靠JS才顯示」設計，
   在部分情況下 JS 顯示邏輯沒有正確觸發，導致整頁看起來一片空白——這對行銷網站是不可接受的失敗
   模式）。改成「預設可見、JS 才能選擇性加上進場動畫」的漸進增強寫法：.reveal 本身不隱藏內容，
   只有 JS 確認自己有在正常執行時才會另外加上 .pre（表示「動畫尚未播放的起始狀態」），因此就算
   JS 完全沒執行、被封鎖、或任何原因失效，內容永遠維持預設可見，不會有任何一種情境變成空白頁。 */
.reveal{transition:opacity .6s ease, transform .6s ease}
.reveal.pre{opacity:0; transform:translateY(16px)}
.reveal.on{opacity:1; transform:none}

/* ---------- Banner（頂部提示：非正式網域） ---------- */
.previewbar{background:var(--gold); color:#3a2c0d; text-align:center; font-size:13px; font-weight:700; padding:8px 16px}