/*
GeoDay1 — Spectrum Signal 設計系統（Direction C）
把「被 AI 引用」視覺化成跨引擎的訊號頻譜：teal(檢索) → amber(抽取)。
淺色底 · 幾何無襯線 · 頻譜母題。取代舊「知識經紀人 沉香金」系統。
*/

:root {
  /* ── 中性 / 墨 ── */
  --paper:#FBFBF9; --paper-2:#F1F2EE; --surface:#FFFFFF;
  --ink:#171A21; --ink-soft:#3A3E47; --muted:#5C6069; --faint:#8A8E97;
  --line:#E6E7E2; --line-2:#D6D8D1;

  /* ── 品牌訊號（頻譜兩端）── */
  --teal:#0FB5A4; --teal-ink:#0C8A7D; --amber:#F4A81D; --amber-ink:#B87B08;
  --spectrum:linear-gradient(90deg,#0FB5A4 0%,#3BB3A0 34%,#9FB25C 60%,#F4A81D 100%);
  --spectrum-ink:linear-gradient(90deg,#0C8A7D 0%,#3E8A56 55%,#B87B08 100%); /* 文字強調用：兩端加深，白底可讀 */

  /* ── 語意 ── */
  --good:#0FB5A4; --warn:#F4A81D; --bad:#D2503A;

  /* ── 字體 ── */
  --sans:'Hanken Grotesk','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 14px 44px rgba(20,24,20,.10);
  --shadow-sm:0 6px 20px rgba(20,24,20,.07);
  --maxw:1200px;

  /* ── 向後相容別名（build_site.py inline 樣式仍引用舊名，映射到淺色語意）── */
  --gold-300:var(--teal); --gold-400:var(--teal-ink); --gold-500:var(--muted); --gold-600:var(--amber-ink);
  --cream-100:var(--ink); --cream-200:var(--ink-soft); --cream-300:var(--ink-soft); --cream-400:var(--muted);
  --celadon-300:var(--teal); --celadon-400:var(--teal-ink); --celadon-700:#0C8A7D;
  --ink-900:var(--paper); --ink-800:var(--paper-2); --ink-700:var(--paper-2); --ink-600:var(--line); --ink-card:var(--surface);
  --brick:var(--bad);
  --hairline:var(--line); --hairline-strong:var(--line-2);
  --ink-on-gold:#fff;
  --shadow-brand:var(--shadow);
  --serif:var(--sans);
}

/* ───────── base ───────── */
*{box-sizing:border-box;}
html{background:var(--paper);}
body{
  margin:0; background:var(--paper); color:var(--ink-soft);
  font-family:var(--sans); font-size:17px; line-height:1.8;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--teal-ink); text-decoration:none;}
a:hover{color:var(--amber-ink);}
img{max-width:100%; height:auto;}
::selection{background:var(--teal); color:#fff;}

/* 頻譜母題：全站頂端一道訊號條 */
.kb-spectrum{height:4px; background:var(--spectrum);}

/* ───────── layout ───────── */
.kb-shell{max-width:1360px; margin:0 auto; background:var(--paper);}
.kb-section{padding:76px 64px; border-bottom:1px solid var(--line); position:relative;}
.kb-container{max-width:var(--maxw); margin:0 auto;}
.kb-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--teal-ink); margin-bottom:14px;}
.kb-eyebrow--celadon{color:var(--amber-ink);}

/* ───────── type（幾何無襯線、重量感、緊排）───────── */
.kb-h1{font-family:var(--sans); font-weight:800; font-size:54px; line-height:1.1; color:var(--ink); margin:0; letter-spacing:-.03em; text-wrap:balance;}
.kb-h2{font-family:var(--sans); font-weight:800; font-size:33px; line-height:1.2; color:var(--ink); margin:0 0 22px; letter-spacing:-.02em; text-wrap:balance;}
.kb-h3{font-family:var(--sans); font-weight:700; font-size:20px; color:var(--ink); margin:0 0 12px; letter-spacing:-.01em;}
.kb-lead{font-family:var(--sans); font-size:27px; font-weight:600; line-height:1.5; color:var(--ink); margin:0; letter-spacing:-.015em;}
.kb-body{font-family:var(--sans); font-size:17px; line-height:1.85; color:var(--ink-soft);}
.kb-muted{color:var(--muted);}
/* 招牌一刻：頻譜漸層字（強調 span）*/
.kb-gold{background:var(--spectrum-ink); -webkit-background-clip:text; background-clip:text; color:transparent;}
.kb-mono{font-family:var(--mono); letter-spacing:.14em;}

/* ───────── nav / header ───────── */
.kb-nav{display:flex; align-items:center; justify-content:space-between; padding:22px 64px; border-bottom:1px solid var(--line); background:rgba(251,251,249,.85); backdrop-filter:saturate(1.2) blur(6px); position:sticky; top:0; z-index:20;}
.kb-logo{display:inline-flex; align-items:baseline; font-family:var(--sans); font-weight:800; font-size:21px; letter-spacing:-.03em; color:var(--ink);}
.kb-logo .g-day{color:var(--teal-ink);}
.kb-logo .g-one{color:var(--amber-ink);}
.kb-nav-links{display:flex; align-items:center; gap:30px; font-family:var(--sans); font-size:14px; font-weight:500;}
.kb-nav-links a{color:var(--muted);}
.kb-nav-links a:hover{color:var(--ink);}

/* ───────── buttons / links ───────── */
.kb-btn{font-family:var(--sans); font-weight:600; font-size:16px; color:#fff!important; background:var(--ink); padding:14px 26px; border-radius:10px; display:inline-block; transition:transform .18s, box-shadow .18s; box-shadow:var(--shadow-sm);}
.kb-btn:hover{transform:translateY(-1px); box-shadow:var(--shadow);}
.kb-btn--sm{font-size:14px; padding:9px 16px; border-radius:8px; box-shadow:none;}
.kb-btn-ghost{font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink); background:transparent; padding:12px 22px; border:1.5px solid var(--line-2); border-radius:10px; display:inline-block; transition:border-color .18s;}
.kb-btn-ghost:hover{border-color:var(--ink);}
.kb-arrow{font-family:var(--sans); font-weight:600; font-size:16px; color:var(--teal-ink); display:inline-flex; align-items:center; gap:8px; transition:gap .18s;}
.kb-arrow:hover{gap:13px; color:var(--teal-ink);}
.kb-arrow--underline{border-bottom:2px solid var(--teal); padding-bottom:3px;}

/* ───────── hero ───────── */
.kb-hero{position:relative; padding:96px 64px 88px; border-bottom:1px solid var(--line); overflow:hidden;}
.kb-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(760px 420px at 92% -6%, rgba(15,181,164,.10), transparent 60%), radial-gradient(680px 380px at 100% 10%, rgba(244,168,29,.10), transparent 62%); pointer-events:none;}
.kb-hero-inner{position:relative; max-width:880px;}
.kb-hero .kb-eyebrow{letter-spacing:.24em; margin-bottom:22px;}
.kb-hero p{font-family:var(--sans); font-size:18px; line-height:1.85; color:var(--ink-soft); max-width:660px; margin:26px 0 0;}
.kb-hero-cta{display:flex; gap:16px; align-items:center; margin-top:34px; flex-wrap:wrap;}

/* ───────── GEO 一句話 ───────── */
.kb-oneliner{display:grid; grid-template-columns:190px 1fr; gap:44px; padding:64px; border-bottom:1px solid var(--line); background:var(--paper-2);}
.kb-oneliner .tag{font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--teal-ink); padding-top:10px;}

/* ───────── 服務 / 三欄 grid ───────── */
.kb-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
.kb-grid3 .cell{background:var(--surface); padding:34px 28px;}
.kb-num{font-family:var(--mono); font-size:13px; color:var(--teal-ink); margin-bottom:16px; font-weight:500;}
.kb-grid3 p{font-family:var(--sans); font-size:15px; line-height:1.8; color:var(--muted); margin:0;}

/* ───────── 權威證明（預設隱藏，保留樣式）───────── */
.kb-proof-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; gap:24px; flex-wrap:wrap;}
.kb-badge-dashed{font-family:var(--mono); font-size:11px; color:var(--faint); border:1px dashed var(--line-2); padding:6px 12px; border-radius:6px;}
.kb-proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.kb-proof-box{height:72px; border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:var(--faint); background:var(--surface);}
.kb-proof-note{font-family:var(--sans); font-size:13px; color:var(--faint); line-height:1.8; margin:18px 0 0;}

/* ───────── 導向指南 funnel ───────── */
.kb-funnel{display:grid; grid-template-columns:1.4fr 1fr; gap:52px; align-items:center; position:relative;}
.kb-funnel .lead-col h2{margin-bottom:16px; line-height:1.25;}
.kb-funnel .lead-col p{font-family:var(--sans); font-size:16px; line-height:1.85; color:var(--ink-soft); margin:0 0 26px; max-width:520px;}
.kb-pillar-list{border:1px solid var(--line); border-radius:12px; padding:8px; background:var(--surface); box-shadow:var(--shadow-sm);}
.kb-pillar-list .row{display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line);}
.kb-pillar-list .row:last-child{border-bottom:none;}
.kb-pillar-list .row .n{font-family:var(--mono); font-size:12px; color:var(--teal-ink);}
.kb-pillar-list .row .t{font-family:var(--sans); font-size:14px; color:var(--ink-soft); font-weight:500;}
.kb-pillar-list .row.more .n{color:var(--amber-ink);}
.kb-pillar-list .row.more .t{color:var(--muted);}

/* ───────── 工具入口卡 ───────── */
.kb-tool{position:relative; margin:8px 0 0; padding:44px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.kb-tool h2{font-size:27px; margin:0 0 10px;}
.kb-tool p{font-family:var(--sans); font-size:15px; line-height:1.85; color:var(--muted); margin:0; max-width:560px;}

/* ───────── CTA 區 ───────── */
.kb-cta{padding:88px 64px; text-align:center; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.kb-cta::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--spectrum);}
.kb-cta h2{font-size:38px; line-height:1.2; margin:0 0 16px;}
.kb-cta p{font-family:var(--sans); font-size:17px; color:var(--ink-soft); margin:0 0 32px;}

/* ───────── footer ───────── */
.kb-footer{padding:38px 64px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--paper-2);}
.kb-footer .nm{font-family:var(--sans); font-weight:800; color:var(--ink); font-size:16px; letter-spacing:-.02em;}
.kb-footer .nm .g-day{color:var(--teal-ink);} .kb-footer .nm .g-one{color:var(--amber-ink);}
.kb-copy{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.08em;}

/* ───────── 文章 / Boss ───────── */
.kb-article{max-width:820px; margin:0 auto;}
.kb-breadcrumb{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--muted); margin-bottom:20px;}
.kb-breadcrumb a{color:var(--muted);}
.kb-breadcrumb a:hover{color:var(--teal-ink);}
.kb-article-h1{font-family:var(--sans); font-weight:800; font-size:44px; line-height:1.15; color:var(--ink); margin:0; letter-spacing:-.03em; text-wrap:balance;}

.kb-prose{font-family:var(--sans); font-size:17px; line-height:1.9; color:var(--ink-soft);}
.kb-prose > *:first-child{margin-top:0;}
.kb-prose h2{font-family:var(--sans); font-weight:800; font-size:28px; line-height:1.25; color:var(--ink); margin:52px 0 16px; letter-spacing:-.02em;}
.kb-prose h3{font-family:var(--sans); font-weight:700; font-size:20px; color:var(--ink); margin:34px 0 12px; letter-spacing:-.01em;}
.kb-prose p{margin:0 0 20px;}
.kb-prose strong,.kb-prose b{color:var(--ink); font-weight:700;}
.kb-prose a{color:var(--teal-ink); border-bottom:1px solid rgba(15,181,164,.35); padding-bottom:1px;}
.kb-prose a:hover{border-bottom-color:var(--teal);}
.kb-prose ul,.kb-prose ol{margin:0 0 20px; padding-left:24px;}
.kb-prose li{margin:0 0 8px;}
/* 答案前置 blockquote：頻譜漸層左邊框 */
.kb-prose blockquote{margin:0 0 26px; padding:4px 0 4px 22px; border-left:3px solid transparent; border-image:var(--spectrum) 1;}
.kb-prose blockquote p{font-size:20px; font-weight:600; line-height:1.75; color:var(--ink); margin:0; letter-spacing:-.01em;}
.kb-prose hr{border:none; border-top:1px solid var(--line); margin:44px 0;}

/* ───────── 響應式 ───────── */
@media (max-width:980px){
  .kb-section,.kb-hero,.kb-oneliner,.kb-cta{padding-left:26px; padding-right:26px;}
  .kb-nav,.kb-footer{padding-left:26px; padding-right:26px;}
  .kb-h1,.kb-article-h1{font-size:36px;}
  .kb-h2,.kb-cta h2{font-size:27px;}
  .kb-lead{font-size:22px;}
  .kb-oneliner,.kb-funnel{grid-template-columns:1fr; gap:22px;}
  .kb-grid3,.kb-proof-grid{grid-template-columns:1fr;}
  .kb-tool{flex-direction:column; align-items:flex-start;}
  .kb-nav-links{gap:16px; font-size:13px;}
  .kb-hero{padding-top:60px; padding-bottom:60px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important; animation-duration:.001ms!important;}
}
