@charset "UTF-8";
/* ============================================================
   ENGMA HONG KONG · 設計令牌 tokens.css
   設計系統 v1.0 ｜ 產出：設計系統專家 彩格調（Phase 2）
   下游：main.css / index.html / P2–P8 子頁
   硬約束：色板與字體繼承舊站，只在字階／間距／組件／圖形語言上升維
   ============================================================ */

:root{
  /* ── COLOR · BASE ──────────────────────────────
     ★ v6 石墨無彩版：全站零強調色。
       依據：總部實景（Engma_00145/00155）為青灰藍調生態建築，
       中性象牙灰白與之同族；照片成為版面唯一的「色」。
       v6：強調色退出，全站僅石墨黑 + 象牙灰白 + 照片。
       歷史色板保留於文末註釋，便於回滾。 */
  --bg-base:#F6F6F4;
  --bg-panel:#ECEBE7;
  --bg-card:#FFFFFF;
  --bg-card-hover:#F8F8F6;
  --bg-raised:#FFFFFF;
  --bg-inset:#EDEDEA;
  --bg-overlay:rgba(246,246,244,.97);

  /* ── COLOR · BORDER ──────────────────────────── */
  --border-default:#DCDCD8;
  --border-subtle:rgba(25,27,29,.10);
  --border-strong:#B6B6B1;
  --border-bright:#8C8C87;
  --hairline:rgba(25,27,29,.14);

  /* ── COLOR · ACCENT ★限量 ──────────────────────
     ★v6 零強調色：--accent-primary 即石墨黑（實心 CTA），編號改用 --num-color 中性灰。
     --accent-gold 僅為中性灰裝飾線；--accent-blue / --accent-purple 已中性化，禁止作彩色使用。 */
  --accent-primary:#191B1D;              /* G1編號 G2路徑 G3主CTA G4 WEC */
  --accent-highlight:#2E3134;            /* 僅 hover / focus（淺色系=加深） */
  --accent-primary-dim:rgba(25,27,29,.10);
  --accent-primary-line:rgba(25,27,29,.35);
  --accent-primary-tint:rgba(25,27,29,.06);
  --accent-gold:#94958F;                 /* 已退出，勿引用 */
  --num-color:#6B6B67;              /* ★v6 編號專用中性灰（4.91:1 AA）：零強調色下編號不吃 accent */
  --accent-blue:#7E7E7A;
  --accent-blue-line:rgba(140,140,135,.30);   /* B04 右欄同心環，全站1處 */
  --accent-purple:#8C8C87;
  --accent-purple-line:rgba(140,140,135,.30);/* 建議不用 */
  --focus-ring:#191B1D;                      /* a11y，不計配額 */

  /* ── COLOR · TEXT ────────────────────────────── */
  --text-primary:#191B1D;                /* 冷墨藍，14.4:1 */
  --text-secondary:#4D4E4B;              /* 7.0:1 */
  --text-muted:#646560;                  /* 5.0:1，AA 達標 */
  --text-muted-strong:#5A5B58;           /* ≤13px 小字用此（更深） */
  --text-neutral:#63645F;                /* 僅 ≥14px 或裝飾 */
  --text-inverse:#F6F6F4;

  /* ── COLOR · INK ANCHOR ★v6 石墨無彩版 ──────────
     石墨黑錨點底（#14171A，中性不帶藍，較 v4 墨藍更沉穩，適配企業站）。
     用法：給區塊加 .is-ink，作用域內變量整體反轉，組件代碼零改動。
     全站僅 4 處錨點 —— Hero / WEC / 全球交付路徑 / 結語 CTA —— 形成明暗節奏。
     衝擊來自「明暗切換」，不來自高飽和色：故全站零強調色：衝擊純由明暗與排版承擔，唯一「色」是照片本身。 */
  --ink-base:#14171A;
  --ink-panel:#191D21;
  --ink-card:#1E2226;
  --ink-card-hover:#252A30;
  --ink-inset:#171B1F;
  --ink-border:#2A2E33;
  --ink-border-subtle:rgba(238,243,244,.10);
  --ink-border-strong:#3A4046;
  --ink-hairline:rgba(238,243,244,.14);
  --ink-accent:#F5F4F1;                    /* 深底強調：象牙白 16.36:1（零強調色，靠明度不靠色相） */
  --ink-accent-hover:#FFFFFF;              /* 10.82:1 */
  --ink-accent-line:rgba(245,244,241,.38);
  --ink-gold:#B8B8B3;                    /* 深底赭金 7.62:1；淺底另用 --accent-gold */
  --ink-text:#F5F4F1;                    /* 15.09:1 */
  --ink-text-2:#B8B8B3;                  /* 8.59:1 */
  --ink-text-muted:#92968F;              /* 6.63:1，小字達標 */
  --ink-text-muted-strong:#9BA09A;       /* 6.98:1 */

  /* ── FONT ────────────────────────────────────── */
  --font-serif:"Noto Serif TC","Songti TC","Source Han Serif TC",Georgia,"Times New Roman",serif;
  --font-sans:"Inter","Noto Sans TC","PingFang HK","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* ── TYPE SCALE · 4 LEVELS ───────────────────── */
  --fs-display-lg:clamp(44px,6.6vw,92px); --lh-display-lg:1.06; --fw-display-lg:500;
  --fs-display:clamp(34px,4.4vw,60px);    --lh-display:1.12;    --fw-display:500;
  --fs-h2:clamp(26px,2.9vw,40px);         --lh-h2:1.28;         --fw-h2:500;
  --fs-h3:clamp(18px,1.35vw,21px);        --lh-h3:1.55;         --fw-h3:600;
  --fs-body:16px;                         --lh-body:1.80;       --fw-body:400;

  /* ── TYPE · MICRO ────────────────────────────── */
  --fs-eyebrow:11px;   --ls-eyebrow:.20em;
  --fs-label-en:11px;  --ls-label-en:.18em;
  --fs-num:13px;       --ls-num:.08em;
  --fs-lead:clamp(16px,1.35vw,19px);
  --fs-small:14px;
  --fs-caption:13px;
  --fs-micro:10px;     --ls-micro:.18em;
  --fs-stat:clamp(40px,3.6vw,52px);      /* 下限提到 40px：1024 視口 3.6vw=36.9 會跌破門檻 */
  --fs-stat-unit:18px;

  /* ── MEASURE ─────────────────────────────────── */
  --measure-zh:34em;
  --measure-en:62ch;
  --measure-h1:16em;
  --measure-h2:18em;
  --measure-sub-en:46ch;

  /* ── SPACE SCALE (4px) ───────────────────────── */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px;  --space-6:32px;  --space-7:40px;  --space-8:48px;
  --space-9:64px;  --space-10:80px; --space-11:96px; --space-12:120px;
  --space-13:160px;

  /* ── SPACE · RHYTHM ──────────────────────────── */
  --section-y-lg:clamp(88px,11vw,176px);
  --section-y:clamp(72px,9vw,128px);
  --section-y-sm:clamp(56px,6vw,88px);
  --stack-block-title:clamp(32px,4vw,56px);
  --stack-group:clamp(40px,4.5vw,64px);
  --stack-item:clamp(20px,2.2vw,32px);
  --stack-tight:12px;

  /* ── LAYOUT ──────────────────────────────────── */
  --container-max:1280px;
  --container-narrow:880px;
  --container-text:720px;
  --container-pad:clamp(20px,5.5vw,80px);
  --grid-cols:12;                       /* ≥1024:12 │ 768-1023:8 │ <768:4 */
  --grid-gutter:24px;                   /* 平板 20px │ 移動 16px */
  --nav-h:72px;                         /* 移動 60px */
  --scroll-offset:96px;

  /* ── RADIUS (禁止 > 8px，禁止 999px) ─────────── */
  --radius-none:0; --radius-xs:2px; --radius-sm:3px; --radius-md:4px;

  /* ── PADDING ─────────────────────────────────── */
  --card-pad:32px;      --card-pad-sm:24px;  --card-pad-mobile:20px;
  --chip-pad:10px 16px; --btn-pad:14px 24px; --band-pad:56px;

  /* ── SHADOW（淺色下改用極淡墨影，僅導航與浮層） ── */
  --shadow-none:none;
  --shadow-nav:0 1px 0 rgba(25,27,29,.08);
  --shadow-overlay:0 24px 64px rgba(25,27,29,.20);

  /* ── Z-INDEX ─────────────────────────────────── */
  --z-base:0; --z-sticky:100; --z-nav:200; --z-overlay:300;

  /* ── MOTION ──────────────────────────────────── */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:300ms;
  --reveal-distance:8px;
  --reveal-stagger:60ms;

  color-scheme:light;
}

/* ── 舊深色板（v1.x，回滾用，勿刪） ────────────────
   --bg-base:#050A12; --bg-panel:#0A1422; --bg-card:#0E1A2B;
   --bg-card-hover:#12203A; --bg-raised:#16253D; --bg-inset:#070D18;
   --bg-overlay:rgba(20,23,26,.94);
   --border-default:#1D2A3D; --border-subtle:rgba(29,42,61,.55);
   --border-strong:#2A3B54; --border-bright:#3C5273;
   --hairline:rgba(242,246,251,.10);
   --accent-primary:#00E5A0; --accent-highlight:#3DFFC4;
   --accent-primary-dim:rgba(0,229,160,.12); --accent-primary-line:rgba(0,229,160,.38);
   --accent-primary-tint:rgba(0,229,160,.07);
   --accent-blue:#4C8DFF; --accent-blue-line:rgba(76,141,255,.22);
   --text-primary:#F2F6FB; --text-secondary:#A9B6C8;
   --text-muted:#707E96; --text-muted-strong:#8A97AA; --text-neutral:#9CA3AF;
   --text-inverse:#050A12; color-scheme:dark; */

/* ── 語言特化字體 ──────────────────────────────── */
html[lang="zh-CN"]{ --font-serif:"Noto Serif SC","Songti SC",Georgia,serif;
                    --font-sans:"Inter","Noto Sans SC","PingFang SC",system-ui,sans-serif; }
html[lang="en"]{ --font-serif:"Noto Serif",Georgia,"Times New Roman",serif;
                 --font-sans:"Inter",system-ui,-apple-system,sans-serif;
                 --lh-body:1.65; --lh-display:1.06; --lh-h2:1.20; --lh-h3:1.45; }

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg-base); color:var(--text-secondary);
      font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans);
      letter-spacing:.01em; font-variant-numeric:tabular-nums;
      line-break:strict; word-break:normal; overflow-wrap:anywhere;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html[lang="en"] body{ letter-spacing:0; }
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

[id]{ scroll-margin-top:var(--scroll-offset); }
:focus-visible{ outline:1px solid var(--focus-ring); outline-offset:3px; }

/* ── 基礎排版 ──────────────────────────────────── */
.h1{ font-family:var(--font-serif); font-size:var(--fs-display); line-height:var(--lh-display);
     font-weight:var(--fw-display); letter-spacing:.01em; color:var(--text-primary); text-wrap:balance; }
.h2{ font-family:var(--font-serif); font-size:var(--fs-h2); line-height:var(--lh-h2);
     font-weight:var(--fw-h2); letter-spacing:.01em; color:var(--text-primary); text-wrap:balance; }
.h3{ font-family:var(--font-sans); font-size:var(--fs-h3); line-height:var(--lh-h3);
     font-weight:var(--fw-h3); letter-spacing:.01em; color:var(--text-primary); }
p{ text-wrap:pretty; }
html[lang="en"] .h1{ letter-spacing:0; }
html[lang="en"] .h2{ letter-spacing:0; }
html[lang="en"] .h3{ letter-spacing:0; }

/* ── 微排版原子類 ──────────────────────────────── */
.t-eyebrow{ font-family:var(--font-mono); font-size:var(--fs-eyebrow); line-height:1.4;
            font-weight:500; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
            color:var(--text-muted-strong); }
.t-label-en{ font-family:var(--font-mono); font-size:var(--fs-label-en); line-height:1.4;
             font-weight:500; letter-spacing:var(--ls-label-en); text-transform:uppercase;
             color:var(--text-secondary); }
.t-num{ font-family:var(--font-mono); font-size:var(--fs-num); line-height:1.4;
        font-weight:500; letter-spacing:var(--ls-num); color:var(--num-color); }
.t-lead{ font-size:var(--fs-lead); line-height:1.80; color:var(--text-secondary); }
.t-small{ font-size:var(--fs-small); line-height:1.75; color:var(--text-secondary); }
.t-caption{ font-size:var(--fs-caption); line-height:1.70; color:var(--text-muted-strong); }
.t-micro{ font-family:var(--font-mono); font-size:var(--fs-micro); line-height:1.4;
          font-weight:500; letter-spacing:var(--ls-micro); text-transform:uppercase;
          color:var(--text-muted); }
html[lang="en"] .t-lead{ line-height:1.65; }

/* ── 抽象圖形 · 經緯線網格 ─────────────────────── */
.grid-lines{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right,  var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
}
.grid-lines--dense{ background-size:40px 40px; }

/* ── 分隔線 ────────────────────────────────────── */
.rule-full{ display:block; height:1px; width:100%; background:var(--border-subtle); }
.rule-short{ display:block; width:40px; height:1px; background:var(--accent-gold); } /* 中性灰裝飾線（v6 去彩） */

/* ── 滾動淡入 ──────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(var(--reveal-distance)); }
.reveal.is-in{ opacity:1; transform:none;
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out); }

/* ── 降級 ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1!important; transform:none!important; }
}

/* ══ v4 混合色調：深墨藍錨點作用域 ══════════════════
   給任何區塊加 .is-ink，內部所有組件自動切到深底版本 ——
   這是「只改一處變量、不改任何組件代碼」的設計，避免深淺兩套樣式分叉。
   衝擊力來自明暗切換的節奏（深→淺淺→深→淺淺→深→淺淺淺→深），
   而非高飽和撞色，因此不會流於另類。 */
.is-ink{
  --bg-base:var(--ink-base);
  --bg-panel:var(--ink-panel);
  --bg-card:var(--ink-card);
  --bg-card-hover:var(--ink-card-hover);
  --bg-raised:var(--ink-card);
  --bg-inset:var(--ink-inset);
  --bg-overlay:rgba(20,23,26,.97);

  --border-default:var(--ink-border);
  --border-subtle:var(--ink-border-subtle);
  --border-strong:var(--ink-border-strong);
  --border-bright:#4A5157;
  --hairline:var(--ink-hairline);

  --num-color:var(--ink-text-2);            /* 深底編號灰 9.03:1 */
  --accent-primary:var(--ink-accent);
  --accent-highlight:var(--ink-accent-hover);
  --accent-primary-dim:rgba(245,244,241,.14);
  --accent-primary-line:var(--ink-accent-line);
  --accent-primary-tint:rgba(245,244,241,.08);
  --accent-gold:var(--ink-gold);
  --accent-blue-line:rgba(200,205,210,.28);
  --focus-ring:var(--ink-accent);

  --text-primary:var(--ink-text);
  --text-secondary:var(--ink-text-2);
  --text-muted:var(--ink-text-muted);
  --text-muted-strong:var(--ink-text-muted-strong);
  --text-neutral:var(--ink-text-muted);
  --text-inverse:var(--ink-base);

  background:var(--ink-base);
  color:var(--text-secondary);
}
/* 錨點區內的網格線要重新取色（--border-subtle 已隨作用域反轉，此處僅加密度） */
.is-ink .grid-lines{ opacity:.55; }
/* 錨點區內卡片若貼在深底上，需自帶底色才分得出層次 */
.is-ink .card,
.is-ink .acc-panel-inner{ background:var(--ink-card); border-color:var(--ink-border); }
/* 主 CTA 在深底上：實心象牙白 + 石墨字 → hover 反轉為描邊（16.36:1） */
.is-ink .btn-primary{ background:var(--ink-accent); border-color:var(--ink-accent); color:var(--ink-base); }
.is-ink .btn-primary:hover{ background:transparent; color:var(--ink-accent); }
/* 路徑條未激活節點：深底上 --border-strong(#3A4046) 僅 1.71:1 幾乎看不見，
   改用中性灰 #7A8085（4.50:1）。零強調色下，HK 起點靠「象牙白 vs 灰」的明度差突出。 */
.is-ink .path-node .dot,
.is-ink .path-dot{ background:#7A8085; }
.is-ink .btn-secondary{ border-color:var(--ink-border-strong); color:var(--ink-text); }
.is-ink .btn-secondary:hover{ border-color:var(--ink-accent); background:var(--ink-card-hover); }
/* 錨點區緊鄰的上下邊界不做分隔線 —— 明暗切換本身就是分隔 */

/* ── 無障礙 ────────────────────────────────────── */
.skip-link{ position:absolute; left:-100vw; top:0; z-index:400;
  background:var(--bg-raised); color:var(--text-primary);
  padding:12px 20px; font-size:var(--fs-small); border:1px solid var(--border-strong); }
.skip-link:focus{ left:12px; top:12px; }