/* ============================================================
   RC DESIGN — 企業識別層樣式
   銳傑「以公司身分」對外的介面共用底層：官網、電子名片、
   報價單、提案、表單…。
   ⚠️ 產品（開賞／開夾／收藏所）不套這份 —— 各產品的視覺
      刻意不同，那是「皮骨分離」的賣點，不是缺陷。
   用法：<link rel="stylesheet" href="/brand/brand.css"> 之後
        只寫該頁自己的版面，不要重抄 token。
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root{
  /* 色彩 */
  --bg:#FAFAF7;            /* 紙白：頁面底色 */
  --surface:#fff;          /* 卡片、浮起的面 */
  --ink:#16181D;           /* 墨黑：主文字、深色區塊底 */
  --ink-soft:#4A4E58;      /* 次要文字 */
  --accent:#2447E0;        /* 鈷藍：重點、連結、主 CTA */
  --accent-deep:#1C39BD;   /* 鈷藍按下 / hover */
  --accent-soft:#E8ECFC;   /* 鈷藍淡底：icon 底、光暈 */
  --accent-on-dark:#8FA5FF;/* 深色底上的藍字 */
  --spark:#FF6B4A;         /* 橘點：僅用於 logo 與極少量強調 */
  --line:rgba(22,24,29,.12);
  --line-dark:rgba(250,250,247,.16);

  /* 字體 */
  --font-sans:'Noto Sans TC',-apple-system,"PingFang TC",sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 圓角 */
  --r-sm:8px;
  --r:12px;
  --r-lg:20px;

  /* 陰影 */
  --shadow:0 14px 30px rgba(22,24,29,.1);
  --shadow-lg:0 18px 40px rgba(22,24,29,.1);

  /* 版面 */
  --wrap:1040px;
  --gutter:24px;
}

/* ---------- 2. Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--font-sans);
  background:var(--bg);color:var(--ink);
  line-height:1.8;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}

/* ---------- 3. 版面 ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--font-mono);letter-spacing:.08em}

/* 點陣底紋（名片、輕量頁面用） */
.bg-dots{
  background-image:radial-gradient(rgba(36,71,224,.05) 1.5px,transparent 1.5px);
  background-size:24px 24px;
}

/* ---------- 4. 區塊標題 ---------- */
.sec-eyebrow{font-size:.72rem;color:var(--accent);letter-spacing:.22em;display:block;margin-bottom:12px}
h2.sec-title{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:900;margin-bottom:14px}
.sec-lead{color:var(--ink-soft);max-width:38em;margin-bottom:40px}

/* ---------- 5. 按鈕 ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:12px 26px;border-radius:var(--r-sm);font-size:.92rem;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  cursor:pointer;border:none;font-family:inherit;
}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(22,24,29,.2)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 6px 18px rgba(36,71,224,.35)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:rgba(22,24,29,.05)}

/* ---------- 6. 導覽列 ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:1.1rem}
.logo img{width:32px;height:32px;border-radius:var(--r-sm)}
.logo .en{font-size:.68rem;color:var(--ink-soft);font-weight:400}
.nav-links{display:flex;gap:26px;align-items:center;font-size:.88rem}
.nav-links a{text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-links .btn{padding:8px 18px}

/* ---------- 7. 面（卡片） ---------- */
.surface{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:28px 26px;
}
.surface-bold{
  background:var(--bg);border:1.5px solid var(--ink);
  border-radius:var(--r);padding:34px 30px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.surface-bold:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* 深色區塊（頁尾條、強調帶、名片抬頭） */
.on-dark{background:var(--ink);color:var(--bg)}
.on-dark a{color:var(--accent-on-dark)}

/* ---------- 8. 定義列表（登記資訊、規格表） ---------- */
.kv{list-style:none;font-size:.9rem}
.kv li{display:flex;gap:18px;padding:11px 0;border-bottom:1px dashed var(--line)}
.kv li:last-child{border-bottom:none}
.kv .k{flex:none;width:96px;color:var(--ink-soft);font-size:.8rem;padding-top:2px}

/* ---------- 9. 頁尾 ---------- */
footer{padding:30px 0;font-size:.75rem;color:var(--ink-soft)}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- 10. 響應式斷點 ---------- */
@media(max-width:820px){
  .nav-links a:not(.btn):not(.lang){display:none}
  .kv .k{width:76px}
}