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

/* ★HUIDUN 品牌CI定調（2026-08-18）：標題與內文全站統一使用黑體（無襯線），
   不再走「襯線標題＋無襯線內文」混搭。四語系（繁中/EN/日/韓）標題與內文
   一律套用同一套無襯線字體堆疊（--font），不再依語言切換不同襯線字體。
   完整品牌規範另見 huidun-marketing-site/BRAND-GUIDELINES.md。 */

: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;
  /* 標題／內文全站統一黑體（無襯線），四語系不再各自覆寫成不同襯線字體 */
  --font-display: var(--font);
}

*{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,h2{font-family:var(--font-display); font-weight:700}
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;
  letter-spacing:.01em; border:none; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
/* ★2026-08-04：主要按鈕改用細緻漸層（原本是純色平塗），質感更接近精品品牌而非一般表單按鈕 */
.btn.primary{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%); color:#fff; box-shadow:var(--sh-1)}
.btn.primary:hover{background:linear-gradient(135deg,var(--navy-2) 0%,var(--navy) 100%); box-shadow:var(--sh-2)}
.btn.gold{background:linear-gradient(135deg,#CBA968 0%,var(--gold) 55%,#9C7935 100%); color:#fff}
.btn.gold:hover{background:linear-gradient(135deg,var(--gold) 0%,#9C7935 100%)}
.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}

/* ---------- 頂部導覽 ---------- */
/* ★修復（2026-08-04 實測發現嚴重bug：手機版選單「不見」）：.nav 原本帶 backdrop-filter:blur(10px)，
   而 CSS 規則是「祖先元素只要有 filter/backdrop-filter，就會變成後代 position:fixed 元素的
   containing block」（MDN 明文記載的行為，不是瀏覽器bug）。.navlinks 在手機版是
   position:fixed + inset:76px 0 0 0，設計上要撐滿「視窗扣掉頂部76px」的整個下方畫面，
   但因為 .nav 變成了 containing block，inset 全部改成相對 .nav 自己那個 76px 高的窄列在算，
   算出來的可視高度趨近於 0，選單因此整個被壓扁、幾乎完全不可見（只會透出一點點殘影文字）。
   已用 Chrome 實機模擬 + getBoundingClientRect 實測驗證：拿掉 backdrop-filter 後
   navlinks 立刻正確變成 top:76/height:684（正確撐滿到視窗底部）。改用不透明度更高的純色底
   （.94）取代「半透明+模糊」，同樣有質感、但不再產生 containing block，徹底解決此類bug
   （也預防未來任何其他放在 .nav 底下的 fixed 元素踩到同一個坑）。 */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line-soft);
}
/* ★2026-08-04：改成「logo貼左、導覽貼著logo、操作區靠右」的高端SaaS常見版型（原本
   justify-content:space-between 會讓導覽列浮在中間一大段留白裡，不夠俐落）。導覽列跟
   logo之間留固定40px間距，操作區用 margin-left:auto 頂到最右邊，中間彈性留白全部集中在
   導覽列跟操作區之間，不會被拆兩半。 */
.nav .container{display:flex; align-items:center; height:76px; gap:40px}
/* ★2026-08-04：logo再放大一點更有品牌存在感（46→54px），頁尾同步放大（40→46px）。 */
.brand{display:flex; align-items:center; flex-shrink:0}
.brand .mark{width:54px;height:54px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand .mark img{width:100%;height:100%;object-fit:contain}
.footer .brand .mark{width:46px;height:46px}
.footer .brand .mark img{filter:brightness(0) invert(1)}   /* 頁尾深藍底：logo一律轉全白，不需要另外準備深底版檔案也能保證對比度 */

/* ---------- 語言切換 ---------- */
/* ★修復（2026-08-04 實測發現：8個navlinks+4個語言連結+2顆按鈕在筆電寬度下擠成中文字被硬拆兩行，
   不能接受）。CSS端維持原本4個<a>逐字可見的樣式當「JS失效時的保底」；site.js會在載入時把它改造
   成「只顯示目前語言+一個小箭頭」的精簡下拉觸發器，點擊才展開其餘3個選項，大幅省下橫向空間。
   這樣完全不用改動36個頁面各自的langswitch HTML，只改這一份共用檔案就能套用到全站。 */
.langswitch{position:relative; display:flex; align-items:center; font-size:13px; font-weight:700; border-right:1px solid var(--line-soft); padding-right:14px; margin-right:2px}
.langswitch a{padding:5px 7px; border-radius:6px; color:var(--sub)}
.langswitch a.on{color:var(--navy); background:var(--navy-tint)}
.langswitch a:hover{color:var(--navy)}
.langswitch .langtrigger{display:flex; align-items:center; gap:4px; padding:6px 9px; border-radius:6px; color:var(--navy); background:var(--navy-tint); cursor:pointer; border:none; font:inherit; font-weight:700; font-size:13px; white-space:nowrap}
.langswitch .langtrigger svg{width:11px;height:11px;flex-shrink:0;transition:transform .15s}
.langswitch.open .langtrigger svg{transform:rotate(180deg)}
.langswitch .langlist{position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--line-soft); border-radius:10px; box-shadow:var(--sh-2); padding:6px; display:none; min-width:112px; z-index:60}
.langswitch.open .langlist{display:block}
.langswitch .langlist a{display:block; padding:8px 10px; border-radius:6px; white-space:nowrap}
@media (max-width:900px){.langswitch{border-right:none;padding-right:0}}

/* ---------- 情境圖片（真實飯店場景照片，取代抽象mock時使用） ---------- */
.photo{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); position:relative}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.ratio-16-9{aspect-ratio:16/9}
.photo.ratio-4-3{aspect-ratio:4/3}
.photo.ratio-1-1{aspect-ratio:1/1}
.photo-caption{position:absolute;left:16px;bottom:16px;background:rgba(9,29,82,.85);color:#fff;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:99px;backdrop-filter:blur(4px)}
.navlinks{display:flex; align-items:center; gap:22px; font-size:14px; 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}

/* ---------- 導覽「更多」下拉（JS動態產生，收納企業合作/資安與信任/關於我們3項） ---------- */
.navmore{position:relative}
.navmore-trigger{display:flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer; font:inherit; font-weight:600; font-size:14px; color:var(--sub); padding:8px 0}
.navmore-trigger:hover,.navmore-trigger.on{color:var(--navy)}
.navmore-trigger.on::after{content:'';position:absolute;left:0;right:16px;bottom:-2px;height:2px;background:var(--gold);border-radius:2px}
.navmore-trigger svg{width:10px;height:10px;transition:transform .15s}
.navmore.open .navmore-trigger svg{transform:rotate(180deg)}
.navmore-list{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--line-soft); border-radius:10px; box-shadow:var(--sh-2); padding:6px; display:none; min-width:140px; z-index:60}
.navmore.open .navmore-list{display:block}
.navmore-list a{display:block; padding:9px 12px; border-radius:6px; white-space:nowrap; color:var(--sub)}
.navmore-list a:hover,.navmore-list a.on{color:var(--navy); background:var(--navy-tint)}
.navmore-list a.on::after{display:none}
@media (max-width:900px){
  .navmore-list{position:static; transform:none; display:block; box-shadow:none; border:none; padding:0 0 0 14px; margin-top:4px}
  .navmore-trigger{pointer-events:none}
  .navmore-trigger svg{display:none}
}
.navcta{display:flex; align-items:center; gap:12px; margin-left:auto}
.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}
/* ★2026-08-04：hero區右側加一圈淡金色柔光，讓整個版面有深度、不是純白平面，呼應「精緻高端」訴求 */
.hero::before{
  content:''; position:absolute; top:-12%; right:-6%; width:600px; height:600px; z-index:0;
  background:radial-gradient(circle,rgba(184,147,74,.16) 0%,rgba(184,147,74,0) 70%); pointer-events:none;
}
.hero .container{position:relative; z-index:1}
.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); border-color:var(--gold-light)}
.card .icon{
  width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--navy-tint) 0%,#E3E9F8 100%); 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), 0 0 0 1px rgba(184,147,74,.18); 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-family:var(--font-display); font-size:19px; color:var(--ink); position:relative; z-index:1}
.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}