/* =========================================================
   鈦可數位 共用元件（規格書 T6）
   全站每種元件只有一種寫法。顏色、字級、間距一律引用 tokens.css。
   ========================================================= */

/* ---------- 基礎 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--c-surface);color:var(--c-ink);
  font-family:var(--font-zh);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.3;margin:0 0 var(--sp-4);font-weight:900;letter-spacing:.01em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:700}
p{margin:0 0 var(--sp-4)}
a{color:var(--c-accent);text-decoration:underline;text-underline-offset:.2em}
a:hover{color:var(--c-accent-strong)}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-4);top:var(--sp-4);z-index:100;background:var(--c-surface);padding:var(--sp-2) var(--sp-4)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.prose{max-width:var(--measure)}
.lead{font-size:var(--fs-lead);line-height:1.7}
.small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--c-muted)}

/* ---------- 開發中標記：上線前 check-tmp 腳本會掃「【暫】」 ---------- */
.tmp{
  display:inline-block;font-size:var(--fs-small);font-weight:500;line-height:1.4;
  color:var(--c-ink);background:#FFE58A;border-radius:4px;padding:0 6px;margin:0 2px;
  vertical-align:.1em;
}
.tmp-block{
  border:2px dashed #E0B400;border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-5);
  background:#FFFBEA;color:var(--c-ink);font-size:var(--fs-small);line-height:var(--lh-small);
}
.tmp-block strong{font-weight:700}

/* ---------- 頁首 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--c-line);
}
.site-header .bar{display:flex;align-items:center;gap:var(--sp-4);min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--c-ink);margin-right:auto}
.brand .mark{width:40px;height:40px;flex:none}
.brand .words{display:flex;flex-direction:column;line-height:1.1}
.brand .en{font-family:var(--font-en);font-size:21px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.brand .en b{font-weight:600;color:var(--c-accent)}
.brand .zh{font-size:16px;font-weight:700;letter-spacing:.35em;margin-top:3px}
.brand:hover{color:var(--c-ink)}

.nav{display:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--sp-2)}
.nav a{
  display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-3);
  color:var(--c-ink);text-decoration:none;font-weight:500;border-radius:var(--r-sm);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--c-accent)}
.header-cta{display:flex;gap:var(--sp-2)}
.header-cta .btn-secondary{display:none}

.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:var(--tap);min-height:var(--tap);padding:0 var(--sp-3);
  border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-surface);
  font:inherit;font-size:16px;font-weight:500;color:var(--c-ink);cursor:pointer;white-space:nowrap;
}
.mobile-nav{display:none;border-top:1px solid var(--c-line);background:var(--c-surface)}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none;margin:0;padding:var(--sp-2) 0 var(--sp-4)}
.mobile-nav a{display:flex;align-items:center;min-height:52px;color:var(--c-ink);text-decoration:none;font-size:19px;font-weight:500;border-bottom:1px solid var(--c-line)}
.mobile-nav .btn{margin-top:var(--sp-4);width:100%}

/* 手機頁首：logo 與按鈕縮小，避免擠出畫面 */
@media (max-width:599px){
  .site-header .bar{gap:8px}
  .site-header .brand{gap:7px}
  .site-header .brand .mark{width:32px;height:32px}
  .site-header .brand .en{font-size:18px}
  .site-header .brand .zh{letter-spacing:.2em}
  .header-cta .btn{padding:8px 14px;font-size:16px}
  .menu-toggle{padding:0 10px}
}
@media (max-width:359px){.header-cta{display:none}}
@media (min-width:960px){
  .nav{display:block}
  .menu-toggle,.mobile-nav,.mobile-nav.open{display:none}
  .header-cta .btn-secondary{display:inline-flex}
}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:10px 24px;border-radius:var(--r-pill);
  font:inherit;font-size:17px;font-weight:700;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--c-accent);color:var(--c-surface)}
.btn-primary:hover{background:var(--c-accent-strong);color:var(--c-surface)}
.btn-secondary{background:var(--c-surface);color:var(--c-ink);border-color:var(--c-ink)}
.btn-secondary:hover{background:var(--c-soft);color:var(--c-ink)}
.btn-lg{min-height:54px;padding:12px 30px;font-size:18px}
.dark .btn-secondary{background:transparent;color:var(--c-on-dark);border-color:var(--c-accent-on-dark)}
.dark .btn-secondary:hover{background:rgba(255,255,255,.08);color:var(--c-on-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
@media (max-width:599px){.btn-row .btn{width:100%}}

/* ---------- 區塊 ---------- */
.section{padding:var(--section-gap) 0}
.section.soft{background:var(--c-soft)}
.dark{background:var(--c-ink);color:var(--c-on-dark)}
.dark a{color:var(--c-accent-on-dark)}
.dark .small{color:var(--c-on-dark-muted)}
.section-head{margin-bottom:var(--sp-6)}
.section-head p{color:var(--c-muted);font-size:var(--fs-lead);max-width:var(--measure)}
.dark .section-head p{color:var(--c-on-dark-muted)}

/* ---------- 首頁第一屏 ---------- */
.hero{position:relative;overflow:hidden;padding:var(--sp-7) 0 var(--sp-8)}
.hero-grid{display:grid;gap:var(--sp-6);align-items:center}
.hero h1{margin-bottom:var(--sp-4)}
.hero h1 .accent{color:var(--c-accent)}
.hero .sub{font-size:var(--fs-lead);font-weight:500;margin-bottom:var(--sp-5)}
.diffs{list-style:none;margin:0 0 var(--sp-6);padding:0;display:grid;gap:var(--sp-2)}
.diffs li{display:flex;gap:var(--sp-3);align-items:baseline;font-size:var(--fs-body);font-weight:500}
.diffs li::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--c-accent);transform:translateY(-1px)}
.hero-art{justify-self:center;width:min(60vw,400px);aspect-ratio:220/232}
@media (min-width:960px){
  .hero{padding:var(--sp-9) 0}
  .hero-grid{grid-template-columns:1.25fr 1fr}
  .hero-art{width:100%;max-width:400px}
}

/* 招牌效果：logo 彩帶星一條一條就位（logo 為暫用稿，D-17 美編定案後換） */
.ribbon-star{width:100%;height:100%;overflow:visible}
.ribbon-star path{stroke-width:5;stroke-linejoin:round}
.ribbon-star .p{fill:var(--c-accent);stroke:var(--c-accent)}
.ribbon-star .k{fill:var(--c-ink);stroke:var(--c-ink)}
.ribbon-star.play path{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6) rotate(-25deg);
  animation:rib-in .9s var(--ease) forwards;animation-delay:calc(var(--i) * 110ms + 150ms)}
@keyframes rib-in{to{opacity:1;transform:none}}

/* ---------- 頁面標題區（內頁） ---------- */
.page-head{padding:var(--sp-7) 0 var(--sp-6);background:var(--c-soft)}
.page-head .crumb{font-size:var(--fs-small);color:var(--c-muted);margin-bottom:var(--sp-3)}
.page-head .crumb a{color:var(--c-muted)}
.page-head h1{max-width:20em}
.page-head .lead{max-width:var(--measure);color:var(--c-ink)}

/* ---------- 引言（整句一個顏色） ---------- */
.quote{
  margin:var(--sp-6) 0;padding:0 0 0 var(--sp-5);border-left:4px solid var(--c-accent);
  font-size:var(--fs-quote);font-weight:700;line-height:1.5;color:var(--c-accent);max-width:22em;
}
.quote cite{display:block;margin-top:var(--sp-2);font-size:var(--fs-small);font-weight:400;font-style:normal;color:var(--c-muted)}
.dark .quote{color:var(--c-accent-on-dark)}

/* ---------- 兩欄文章段落 ---------- */
.split{display:grid;gap:var(--sp-5)}
@media (min-width:960px){.split{grid-template-columns:1fr 1.4fr;gap:var(--sp-8)}}

/* ---------- 步驟 ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4);counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:start;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--sp-5)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--c-ink);color:var(--c-on-dark);font-family:var(--font-en);font-weight:700;font-size:18px}
.steps h3{margin:4px 0 var(--sp-2)}
.steps p{margin:0}
@media (min-width:960px){.steps.row{grid-template-columns:repeat(4,1fr)}.steps.row li{grid-template-columns:1fr}}

/* ---------- 處境入口 ---------- */
.situations{display:grid;gap:var(--sp-4)}
@media (min-width:600px){.situations{grid-template-columns:repeat(2,1fr)}}
.situation{
  display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5) var(--sp-5) var(--sp-5);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);
  color:var(--c-ink);text-decoration:none;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;
}
.situation:hover{color:var(--c-ink);border-color:var(--c-accent);transform:translateY(-3px);box-shadow:0 10px 30px -18px var(--c-accent)}
.situation .k{font-size:var(--fs-h3);font-weight:700;line-height:1.4}
.situation .d{color:var(--c-muted);margin:0}
.situation .go{margin-top:auto;padding-top:var(--sp-2);color:var(--c-accent);font-weight:700}

/* ---------- 包含項目列 ---------- */
.includes{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-line)}
.includes li{display:grid;gap:var(--sp-1) var(--sp-5);padding:var(--sp-4) 0;border-bottom:1px solid var(--c-line)}
.includes .name{font-weight:700}
.includes .plain{color:var(--c-muted);margin:0}
@media (min-width:960px){.includes li{grid-template-columns:14em 1fr auto;align-items:baseline}}

/* ---------- 術語卡 ---------- */
.term{background:var(--c-soft);border-radius:var(--r-md);padding:var(--sp-5)}
.term .t{font-weight:900;font-size:var(--fs-h3)}
.term .t small{font-family:var(--font-en);font-weight:600;font-size:var(--fs-small);color:var(--c-accent);margin-left:8px}
.term p{margin:var(--sp-2) 0 0}

/* ---------- 文章卡 ---------- */
.cards{display:grid;gap:var(--sp-4)}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);border:1px solid var(--c-line);border-radius:var(--r-md);
  background:var(--c-surface);color:var(--c-ink);text-decoration:none;transition:border-color .2s}
.card:hover{border-color:var(--c-accent);color:var(--c-ink)}
.card .cat{font-size:var(--fs-small);color:var(--c-accent);font-weight:500}
.card .title{font-size:var(--fs-h3);font-weight:700;line-height:1.45}
.card p{color:var(--c-muted);margin:0}

/* ---------- 三欄 ---------- */
.cols{display:grid;gap:var(--sp-5)}
@media (min-width:960px){.cols.c3{grid-template-columns:repeat(3,1fr)}.cols.c2{grid-template-columns:repeat(2,1fr)}}
.col h3{margin-bottom:var(--sp-2)}
.col p{margin:0;color:var(--c-muted)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--c-line)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) 0;min-height:var(--tap);font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-en);font-size:24px;line-height:1;color:var(--c-accent)}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 var(--sp-4);max-width:var(--measure)}

/* ---------- 轉換區 ---------- */
.cta-band{padding:var(--section-gap) 0}
.cta-band h2{max-width:16em}
.cta-band p{max-width:var(--measure);font-size:var(--fs-lead)}

/* ---------- 表單 ---------- */
.form{display:grid;gap:var(--sp-5);max-width:36em}
.field label{display:block;font-weight:700;margin-bottom:var(--sp-2)}
.field .req{color:var(--c-accent);font-weight:500;font-size:var(--fs-small);margin-left:6px}
.field .hint{font-size:var(--fs-small);color:var(--c-muted);margin:var(--sp-1) 0 0}
.field input,.field textarea,.field select{
  width:100%;min-height:var(--tap);padding:10px 14px;font:inherit;color:var(--c-ink);
  background:var(--c-surface);border:1px solid var(--c-muted);border-radius:var(--r-sm);
}
.field textarea{min-height:140px;resize:vertical}
.checks{display:grid;gap:var(--sp-2)}
.checks label{display:flex;gap:var(--sp-3);align-items:center;font-weight:400;min-height:var(--tap)}
.checks input{width:22px;height:22px;min-height:0;accent-color:var(--c-accent)}
.hp{position:absolute;left:-9999px}

/* ---------- 頁尾 ---------- */
.site-footer{background:var(--c-ink);color:var(--c-on-dark-muted);padding:var(--sp-8) 0 var(--sp-6);font-size:var(--fs-small);line-height:var(--lh-small)}
.site-footer .brand{color:var(--c-on-dark);margin-bottom:var(--sp-4)}
.site-footer .brand .en b{color:var(--c-accent-on-dark)}
.foot-grid{display:grid;gap:var(--sp-6)}
@media (min-width:960px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h2{font-size:16px;color:var(--c-on-dark);margin-bottom:var(--sp-3);letter-spacing:.08em}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-footer a{color:var(--c-on-dark-muted);text-decoration:none;display:inline-flex;min-height:36px;align-items:center}
.site-footer a:hover{color:var(--c-on-dark);text-decoration:underline}
.site-footer .legal{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.14)}

/* ---------- 進場動態（減少動態時不跑） ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .ribbon-star.play path{animation:none;opacity:1;transform:none}
  .situation,.btn{transition:none}
}
.no-js .reveal{opacity:1;transform:none}