/* Fervela 品牌色：深海藍 #0D1B3D、探索青 #008B8B、敢帆金 #F5A623、科技灰 #6B7280、雲霧白 #F5F7FA */
:root{
  --navy:#0D1B3D; --teal:#008B8B; --gold:#F5A623; --grey:#6B7280; --mist:#F5F7FA;
  --txt:#1c2430; --line:#dde3ec; --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--mist); color:var(--txt);
  font:16px/1.75 system-ui,-apple-system,"PingFang TC","Noto Sans TC","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* ── 頁首：深海藍。品牌陳述放這裡，往下才是產品 ── */
.hero{background:var(--navy);color:#fff;padding:52px 0 46px}
.hero .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.brandrow{display:flex;align-items:center;gap:16px}
.mark{width:60px;height:60px;flex-shrink:0}
.mark svg{width:100%;height:100%;display:block;border-radius:14px}
.bname{font-size:30px;font-weight:700;letter-spacing:.01em;line-height:1.2}
.tag{color:var(--gold);font-size:12.5px;letter-spacing:.16em;margin-top:4px;text-transform:uppercase}
.lead{margin-top:22px;font-size:19px;line-height:1.7;max-width:38em}
.lead b{color:#fff}
.sub{margin-top:12px;color:#aab6c8;font-size:14.5px;max-width:40em}

/* ── 語言切換 ── */
.langbar{position:absolute;top:18px;right:20px;display:flex;gap:2px;
  background:rgba(255,255,255,.12);border-radius:9px;padding:3px}
.langbar button{background:none;border:0;color:#c7d2e0;font-size:13px;
  padding:4px 11px;border-radius:7px;cursor:pointer;font-family:inherit}
.langbar button.on{background:#fff;color:var(--navy);font-weight:600}
.heroouter{position:relative}

/* ── 產品卡 ── */
.sec{margin:38px 0}
.sech{font-size:13px;letter-spacing:.13em;color:var(--grey);text-transform:uppercase;margin-bottom:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;margin-bottom:14px;box-shadow:0 2px 10px rgba(13,27,61,.04)}
.card h2{margin:0;font-size:20px;color:var(--navy);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{font-size:11.5px;letter-spacing:.06em;padding:3px 9px;border-radius:999px;font-weight:600}
.pill.live{background:#e6f4f4;color:#046b6b}
.pill.wip{background:#fdf3d7;color:#8a6d1a}
.card p{margin:9px 0 0;font-size:15px;color:var(--txt)}
.card .meta{margin-top:8px;font-size:13.5px;color:var(--grey)}
.card.soon{background:transparent;border-style:dashed;box-shadow:none}
.card.soon p{color:var(--grey);font-size:14.5px}
.card.soon p b{color:var(--txt)}
.acts{margin-top:15px;display:flex;gap:9px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
  padding:9px 17px;border-radius:10px;font-size:14.5px;font-weight:600}
.btn:hover{filter:brightness(1.15)}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn.ghost:hover{background:#eef2f7;filter:none}


/* ── 頁尾 ── */
footer{border-top:1px solid var(--line);margin-top:44px;padding:26px 0 40px;
  color:var(--grey);font-size:13.5px}
footer a{color:var(--teal)}
.fnote{margin-top:8px;font-size:12.5px}

@media (max-width:640px){
  .hero{padding:44px 0 38px}
  .bname{font-size:25px}
  .lead{font-size:17px}
  .langbar{top:14px;right:16px}
}
[data-lang="en"] .zh,[data-lang="zh"] .en{display:none}
/* ── 筆記內文 ── */
.post{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:34px 38px;margin:30px 0;box-shadow:0 2px 10px rgba(13,27,61,.04)}
.post h1{font-size:27px;line-height:1.45;color:var(--navy);margin:0 0 6px}
.post .date{color:var(--grey);font-size:13.5px;margin-bottom:26px}
.post h2{font-size:19px;color:var(--navy);margin:34px 0 10px;
  padding-top:22px;border-top:1px solid #eef1f6}
.post p{font-size:16.5px;line-height:1.95;margin:0 0 17px}
.post blockquote{margin:22px 0;padding:14px 20px;background:var(--mist);
  border-left:3px solid var(--teal);border-radius:0 10px 10px 0;color:#2a3441}
.post blockquote p{margin:0;font-size:16px;line-height:1.85}
.post em{color:var(--grey);font-style:normal;font-size:14.5px}
.post .foot{margin-top:30px;padding-top:20px;border-top:1px solid #eef1f6;
  color:var(--grey);font-size:14.5px}
.post a{color:var(--teal)}
.back{display:inline-block;margin-top:26px;color:var(--grey);
  text-decoration:none;font-size:14.5px}
.back:hover{color:var(--navy)}
.pinfo{margin-top:10px;color:var(--grey);font-size:14px}
@media (max-width:640px){
  .post{padding:24px 20px;border-radius:14px}
  .post h1{font-size:22px}
  .post p{font-size:16px}
}

/* ── 文章頁的頁首色帶 ─────────────────────────────
   原本文章頁一進來就是一張白卡，沒有品牌也沒有導覽，
   跟首頁的深藍色帶斷開，看起來像另一個站。 */
.topbar{background:var(--navy)}
.topbar .wrap{display:flex;align-items:center;gap:18px;padding-top:13px;padding-bottom:13px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.tmark{width:30px;height:30px;flex:0 0 30px}
.tmark svg{width:100%;height:100%;display:block;border-radius:8px}
.tname{color:#fff;font-size:16px;font-weight:700;letter-spacing:.01em}
.tlink{color:#aab6c8;text-decoration:none;font-size:14px}
.tlink:hover{color:#fff}

/* 標題下的金色短線——整頁只有這一個亮色，用來斷開標題與內文 */
.post h1{position:relative;padding-bottom:14px}
.post h1::after{content:"";position:absolute;left:0;bottom:0;
  width:52px;height:3px;border-radius:2px;background:var(--gold)}
.post .date{margin-top:12px}

/* 導言：把 posts.json 的摘要放在正文之前，給眼睛一個緩衝 */
.lede{font-size:17.5px;line-height:1.85;color:#3a4655;
  margin:0 0 26px;padding-left:16px;border-left:3px solid var(--line)}

/* 段落之間有節奏：第一個小標不要再頂一條線（上面已經有導言分隔） */
.post h2:first-of-type{border-top:0;padding-top:6px;margin-top:26px}

@media (max-width:640px){
  .topbar .wrap{gap:12px}
  .tname{font-size:15px}
  .lede{font-size:16.5px;padding-left:13px}
}

/* 文章內的截圖（2026-09-20 加）：寬度跟著內文走，圖說在下方；點圖開原圖 */
.post figure{margin:26px 0 28px}
.post figure img,.post figure video{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
.post figcaption{margin-top:9px;color:var(--grey);font-size:14px;line-height:1.7;text-align:center}
.post figure video{background:#0b1430}