/* Wayne AI v2 — 主官網樣式
   本檔為 index.html 原本 inline style 與 <style> 區塊的等值抽離：
   所有數值（色票、尺寸、間距、圓角、動效時間）與抽離前完全相同，未調整任何視覺設計。
   設計 token 沿用 /enterprise/style.css 與 /marketing/style.css 的 :root 命名與數值。 */

:root {
  /* --- 與 enterprise/marketing 共用（數值相同） --- */
  --ink:        #0f1729;
  --ink-deep:   #0a1121;
  --ink-darker: #070d19;
  --panel:      #111a2c;
  --brand:      #2f6bff;
  --brand-dark: #1f4fd8;
  --brand-soft: #1f3d8f;
  --bg:         #f4f5f7;
  --card:       #ffffff;
  --line:       #e4e7ec;
  --muted:      #5c6779;
  --muted-2:    #8a94a6;
  --on-dark:    #b9c3d6;
  --on-dark-2:  #8fa4cc;
  --on-dark-3:  #7f8da8;

  /* --- 主官網額外使用到的色值（沿用同一命名邏輯） --- */
  --on-dark-4:  #c3cbdb;  /* nav 連結、footer 品牌字 */
  --on-dark-5:  #7d8ba6;  /* STUDIO 副標 */
  --on-dark-6:  #a8b4cc;  /* 深色區段落 */
  --on-dark-7:  #94a2bd;  /* 深色區小字 */
  --on-dark-8:  #8a97b0;  /* footer 連結 */
  --on-dark-9:  #5d6b86;  /* footer 版權 */
  --media:      #131c30;  /* 圖片載入前底色 */
  --ink-2:      #1f2937;
  --ink-3:      #3d4759;
  --ink-4:      #4a5567;
  --tint:       #eceff4;
  --field-line: #d7dce5;
  --danger:     #e0483c;
  --accent-lite:#4f8cff;
  --eyebrow-fg: #9fb3e0;
  --band-line:  #c9d6f5;
  --outline-ln: #ccd5e6;
  --figure-ln:  #dfe3ea;
  --dash-line:  #c8cfdc;
  --step-num:   #dde3f2;
  --check-bg:   #eaf0ff;
  --sec-line:   #e0e4ea;
  --chrome:     #3c4761;
  --chrome-fg:  #6d7d9c;
  --placeholder:#9aa3b2;

  --font-sans: "Noto Sans TC", "Space Grotesk", system-ui, sans-serif;
  --font-mono-brand: "Space Grotesk", sans-serif;
}

/* ---------- Base（原 <style> 區塊，數值不變） ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
input, select, textarea, button { font-family: inherit; }
::placeholder { color: var(--placeholder); }

.page { width: 100%; overflow-x: hidden; }

/* 圖文並排：圖片佔較大權重；窄螢幕自動改為上下堆疊（圖在上） */
.split-media { display: grid; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split-media { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  /* 交錯版面：圖片改放右欄（較寬的一欄） */
  .split-media.is-reversed { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .split-media.is-reversed > :first-child { order: 2; }
}
.split-media--work { margin-top: 22px; gap: clamp(24px, 4vw, 48px); }
.split-media--case { margin-top: clamp(44px, 6vw, 64px); gap: clamp(22px, 4vw, 44px); }

.media-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.media-img--top { object-position: top; }

button[disabled] { opacity: .7; cursor: progress; }

/* ---------- Layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; }
.section { scroll-margin-top: 80px; padding: clamp(72px, 10vh, 116px) clamp(20px, 6vw, 80px); }
.section--light { background: var(--bg); }
.section--white { background: #fff; }
.section--dark { background: var(--ink-deep); color: #fff; }
.section--process {
  border-top: 1px solid var(--sec-line);
  padding-top: clamp(66px, 9vh, 100px);
  padding-bottom: clamp(66px, 9vh, 100px);
}

.h2 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.01em; }
.h3 { margin: 0; font-size: 21px; font-weight: 700; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  background: rgba(10, 17, 33, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-brand { display: flex; align-items: center; gap: 12px; color: #fff; flex-shrink: 0; white-space: nowrap; }
.nav-brand:hover { color: #fff; }
.nav-brand img { width: 34px; height: 34px; border-radius: 9px; display: block; object-fit: cover; }
.nav-brand .stack { display: flex; flex-direction: column; line-height: 1.1; }
.nav-brand .n1 { font-family: var(--font-mono-brand); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }
.nav-brand .n2 { font-size: 10px; letter-spacing: 0.22em; color: var(--on-dark-5); }
.nav-actions { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 32px); overflow-x: auto; max-width: 74vw; }
.nav-link { color: var(--on-dark-4); font-size: 14px; white-space: nowrap; }
.nav-link:hover { color: #fff; }

/* ---------- Buttons ---------- */
.btn-primary { background: var(--brand); color: #fff; font-weight: 500; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-nav { font-size: 14px; padding: 10px 20px; border-radius: 8px; white-space: nowrap; }
.btn-md { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; padding: 14px 26px; border-radius: 10px; }
.btn-arrow { font-size: 13px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.btn-hero {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--brand); color: #fff; font-size: 16px; font-weight: 500;
  padding: 16px 30px; border-radius: 10px;
  transition: transform .25s ease, background .2s ease;
  box-shadow: 0 8px 20px rgba(15, 23, 41, 0.28);
}
.btn-hero:hover { background: var(--brand-dark); color: #fff; transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.26); color: #fff;
  font-size: 16px; font-weight: 500; padding: 16px 30px; border-radius: 10px;
  transition: background .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); color: #fff; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--outline-ln); background: #fff; color: var(--brand);
  font-size: 15px; font-weight: 500; padding: 14px 26px; border-radius: 10px;
  transition: border-color .2s ease, color .2s ease;
}
/* 抽離前 inline color 會蓋掉 a:hover，hover 時文字不變色；此處保持相同結果 */
.btn-outline:hover { color: var(--brand); }

/* ---------- Hero ---------- */
.hero {
  position: relative; background: var(--ink-deep); color: #fff;
  padding: clamp(130px, 16vh, 190px) clamp(20px, 6vw, 80px) clamp(90px, 12vh, 130px);
  overflow: hidden;
}
.hero-grid {
  position: relative; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px;
  font-size: 12px; letter-spacing: 0.08em; color: var(--eyebrow-fg);
  background: rgba(47, 107, 255, 0.08);
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-lite); }
.hero-title {
  margin: 26px 0 0; font-size: clamp(36px, 5.6vw, 68px); line-height: 1.14;
  font-weight: 900; letter-spacing: -0.01em; text-wrap: balance;
}
.hero-sub {
  margin: 26px 0 0; max-width: 640px; font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.95; color: var(--on-dark); font-weight: 300; text-wrap: pretty;
}
.hero-sub--tight { margin-top: 12px; }
.hero-cards { display: flex; flex-direction: column; gap: 14px; }
.hero-card {
  display: block; color: #fff;
  padding: 24px 26px; border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--brand); border-radius: 12px; background: var(--panel);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.hero-card:hover { color: #fff; transform: translateX(4px); border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); }
.hero-card-label { font-size: 12px; letter-spacing: 0.04em; color: var(--on-dark-2); }
.hero-card-title { margin-top: 10px; font-size: 17px; font-weight: 500; }
.hero-card-body { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--on-dark-7); font-weight: 300; }

/* ---------- 服務項目 ---------- */
.services-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.services-note { font-size: 14px; color: var(--muted); line-height: 1.9; max-width: 420px; font-weight: 300; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 44px; }
.service-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 28px 32px; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#website-service { scroll-margin-top: 88px; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(15, 23, 41, 0.1); border-color: var(--band-line); }
.card-head { display: flex; align-items: center; justify-content: space-between; }
.card-num { font-family: var(--font-mono-brand); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--brand); }
.card-rule { width: 34px; height: 2px; background: var(--line); }
.card-title { margin-top: 20px; font-size: 19px; font-weight: 700; line-height: 1.5; }
.card-title--tight { text-wrap: balance; letter-spacing: -0.01em; }
.card-kicker { margin-top: 14px; font-size: 15px; font-weight: 500; line-height: 1.75; color: var(--brand-soft); }
.card-body { margin-top: 14px; font-size: 14px; line-height: 1.95; color: var(--muted); font-weight: 300; text-wrap: pretty; }
.card-cta { margin-top: auto; padding-top: 22px; font-size: 14px; font-weight: 500; color: var(--brand); }
.card-cta:hover { color: var(--brand-dark); }
.card-note {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tint);
  font-size: 12px; line-height: 1.85; color: var(--muted-2); font-weight: 300; text-wrap: pretty;
}

/* ---------- 精選作品 ---------- */
.works-lede { margin: 14px 0 0; max-width: 560px; font-size: 15px; line-height: 1.95; color: var(--on-dark-6); font-weight: 300; text-wrap: pretty; }
.work-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
/* 啟用狀態的底色／文字色／框線由 main.js 的 paintTab() 寫入（與抽離前相同） */
.work-tab { cursor: pointer; border-radius: 999px; padding: 10px 20px; font-size: 14px; transition: all .2s ease; }

.work-group { margin-top: 44px; }
.work-group--gap { margin-top: 56px; }
.group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.group-meta { font-size: 13px; color: var(--on-dark-3); }

.browser { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); background: var(--ink); }
.browser-bar {
  height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 14px;
  background: var(--media); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.browser-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chrome); }
.browser-url { margin-left: 12px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--chrome-fg); }
.browser-shot { aspect-ratio: 16 / 10; background-color: var(--media); }
.browser-link { display: block; width: 100%; height: 100%; }

.work-kicker { font-size: 13px; color: var(--on-dark-2); }
.work-title { margin-top: 12px; font-size: 26px; font-weight: 700; }
.work-desc { margin: 16px 0 0; font-size: 15px; line-height: 1.95; color: var(--on-dark-6); font-weight: 300; text-wrap: pretty; }
.btn-work { margin-top: 26px; }

.work-card {
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px;
  overflow: hidden; background: var(--panel);
  transition: transform .25s ease, border-color .25s ease;
}
/* color 需明寫，否則 <a> 版卡片在 hover 時會被 a:hover 蓋掉（抽離前由 inline color 擋住） */
.work-card:hover { transform: translateY(-5px); border-color: rgba(79, 140, 255, 0.6); color: #fff; }
.work-card--zoom { cursor: zoom-in; }

.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 22px; }
.media-3x4 { aspect-ratio: 3 / 4; background-color: var(--media); }
.poster-cap { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.poster-name { font-size: 14px; font-weight: 500; }
.poster-zoom { font-size: 11px; color: var(--on-dark-3); }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 22px; }
.video-grid--fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.media-16x9 { position: relative; aspect-ratio: 16 / 9; background-color: var(--media); }
.media-9x12 { position: relative; aspect-ratio: 9 / 12; background-color: var(--media); }
.play {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10, 17, 33, 0.72); border: 1px solid rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff;
}
.video-body { padding: 16px 18px; }
.video-title { font-size: 15px; font-weight: 500; }
.video-meta { margin-top: 6px; font-size: 12px; color: var(--on-dark-3); }

/* ---------- 企業問題解決案例 ---------- */
.ent-lede { margin: 16px 0 0; max-width: 640px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.95; color: var(--ink-3); font-weight: 400; text-wrap: pretty; }
.ent-lede-2 { margin: 10px 0 0; max-width: 640px; font-size: 15px; line-height: 1.95; color: var(--muted); font-weight: 300; text-wrap: pretty; }

.flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 34px; }
.flow-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.flow-n { font-size: 12px; font-weight: 700; color: var(--brand); letter-spacing: 0.06em; }
.flow-t { margin-top: 8px; font-size: 16px; font-weight: 500; line-height: 1.6; }

.case-figure {
  cursor: zoom-in; border: 1px solid var(--figure-ln); border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 41, 0.07);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.case-figure:hover { box-shadow: 0 18px 44px rgba(15, 23, 41, 0.12); border-color: #b9c6e4; }
.case-figure img { width: 100%; height: auto; display: block; }
.case-n { font-size: 13px; font-weight: 700; color: var(--brand); letter-spacing: 0.06em; }
.case-title { margin: 10px 0 0; font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; line-height: 1.5; }
.case-block { margin-top: 20px; }
.case-block--tight { margin-top: 18px; }
.case-label { font-size: 14px; font-weight: 700; color: var(--ink); }
.case-text { margin: 8px 0 0; font-size: 15px; line-height: 1.95; color: var(--muted); font-weight: 300; text-wrap: pretty; }
.case-hint { margin-top: 18px; font-size: 13px; color: var(--muted-2); font-weight: 300; }
.case-callout {
  margin-top: 20px; padding: 16px 18px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; font-size: 14px; line-height: 1.9; color: var(--ink-3); font-weight: 400; text-wrap: pretty;
}
.disclaimer {
  margin-top: clamp(36px, 5vw, 52px); padding: 20px 24px;
  border: 1px dashed var(--dash-line); border-radius: 12px; background: var(--tint);
  font-size: 14px; line-height: 1.95; color: var(--ink-4); font-weight: 300; text-wrap: pretty;
}
.ent-cta { margin-top: 26px; }

/* ---------- 合作流程 ---------- */
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 44px; }
.step-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; transition: box-shadow .25s ease; }
.step-card:hover { box-shadow: 0 14px 36px rgba(15, 23, 41, 0.08); }
.step-num { font-family: var(--font-mono-brand); font-size: 36px; font-weight: 700; color: var(--step-num); line-height: 1; }
.step-title { margin-top: 14px; font-size: 18px; font-weight: 700; }
.step-body { margin-top: 12px; font-size: 14px; line-height: 1.95; color: var(--muted); font-weight: 300; text-wrap: pretty; }
.process-band {
  margin-top: 28px; padding: 22px 26px; border-radius: 14px; background: #fff;
  border: 1px dashed var(--band-line); font-size: 16px; font-weight: 500; color: var(--brand-soft);
}

/* ---------- 關於 ---------- */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 72px); }
.about-brand { margin-top: 24px; display: flex; align-items: center; gap: 12px; }
.about-brand img { width: 44px; height: 44px; border-radius: 11px; display: block; object-fit: cover; }
.about-brand-text { font-size: 13px; color: var(--muted); line-height: 1.6; }
.about-copy { display: flex; flex-direction: column; gap: 18px; }
.about-p1 { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 2; color: var(--ink-2); font-weight: 400; text-wrap: pretty; }
.about-strong { font-weight: 700; color: var(--brand-soft); }
.about-p { margin: 0; font-size: 16px; line-height: 2; color: var(--muted); font-weight: 300; text-wrap: pretty; }

/* ---------- 洽談合作 ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact-title { margin: 0; font-size: clamp(28px, 3.6vw, 46px); font-weight: 900; line-height: 1.28; letter-spacing: -0.01em; text-wrap: balance; }
.contact-p { margin: 24px 0 0; font-size: 16px; line-height: 2; color: var(--on-dark-6); font-weight: 300; text-wrap: pretty; }
.contact-p--tight { margin-top: 12px; }
.social-wrap { margin-top: 36px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.social-label { font-size: 14px; color: var(--on-dark-8); font-weight: 300; }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.social-btn {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2); color: var(--on-dark-4);
  font-size: 14px; padding: 11px 18px; border-radius: 9px;
  transition: border-color .2s ease, color .2s ease;
}
.social-btn:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.social-ico {
  width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono-brand); font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
}
.social-ico--fb { font-size: 11px; letter-spacing: normal; }

/* 社群連結尚未提供時的停用樣式 */
.social-btn[data-disabled="1"],
.footer-link[data-disabled="1"] { opacity: .5; cursor: default; }
.social-btn[data-disabled="1"]:hover { border-color: rgba(255, 255, 255, 0.2); color: var(--on-dark-4); }
.footer-link[data-disabled="1"]:hover { color: var(--on-dark-8); }

/* ---------- 合作詢問表單 ---------- */
.form-panel {
  background: #fff; color: var(--ink); border-radius: 18px;
  padding: clamp(24px, 3vw, 40px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.form-success { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 0; }
.form-check {
  width: 52px; height: 52px; border-radius: 50%; background: var(--check-bg); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.form-success-title { font-size: 20px; font-weight: 700; }
.form-success-text { font-size: 15px; line-height: 1.9; color: var(--muted); font-weight: 300; }
.reset-btn {
  cursor: pointer; margin-top: 6px; background: none; border: 1px solid var(--field-line);
  color: var(--ink); font-size: 14px; padding: 11px 20px; border-radius: 9px;
  transition: border-color .2s ease, color .2s ease;
}
.reset-btn:hover { border-color: var(--brand); color: var(--brand); }

.form-title { font-size: 20px; font-weight: 700; }
.form-req { margin-top: 8px; font-size: 13px; color: var(--muted); font-weight: 300; }
.req { color: var(--danger); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 26px; }
.form-label { display: flex; flex-direction: column; gap: 8px; }
.form-label--stack { margin-top: 16px; }
.form-label-text { font-size: 13px; font-weight: 500; }

.field { border: 1px solid var(--field-line); border-radius: 9px; font-size: 15px; outline: none; }
input.field { height: 46px; padding: 0 14px; }
select.field { height: 46px; padding: 0 12px; background: #fff; }
textarea.field { padding: 13px 14px; line-height: 1.8; resize: vertical; }
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.14); }

.btn-submit {
  cursor: pointer; width: 100%; margin-top: 24px; height: 54px; border: none; border-radius: 10px;
  font-size: 16px; box-shadow: 0 6px 16px rgba(15, 23, 41, 0.16);
}
.form-error { margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--danger); }
.form-foot { margin-top: 14px; font-size: 12px; color: var(--muted-2); line-height: 1.8; font-weight: 300; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-darker); color: var(--on-dark-8); padding: 48px clamp(20px, 6vw, 80px); }
.footer-inner {
  max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 30px; height: 30px; border-radius: 8px; display: block; object-fit: cover; }
.footer-brand span { font-family: var(--font-mono-brand); font-size: 14px; letter-spacing: 0.06em; color: var(--on-dark-4); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13px; }
.footer-link { color: var(--on-dark-8); }
.footer-link:hover { color: #fff; }
.footer-social { display: flex; gap: 14px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.footer-copy { font-size: 12px; color: var(--on-dark-9); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(5, 9, 18, 0.88);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5vw, 60px); cursor: zoom-out;
}
/* max-width / aspect-ratio / background-color 會由 main.js 依直式或橫式改寫（與抽離前相同） */
.lightbox-shell { max-width: 520px; width: 100%; }
.lightbox-frame {
  aspect-ratio: 3 / 4; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: var(--media); overflow: hidden;
}
.lightbox-img { width: 100%; height: 100%; display: block; object-fit: contain; }
.lightbox-cap { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.lightbox-name { font-size: 17px; font-weight: 500; }
.lightbox-hint { font-size: 13px; color: var(--on-dark-8); }

/* ---------- Reduced motion ---------- */
.enterprise-problems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .enterprise-problems { grid-template-columns: minmax(0, 1fr); }
}

/* Keep existing grids within narrow screens, including the contact form. */
@media (max-width: 480px) {
  .hero-grid, .about-grid, .contact-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field { min-width: 0; width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}