:root{
  --bg:#f6f6f6;
  --card:#fff;
  --text:#111;
  --muted:#666;
  --line:#e9e9e9;
  --brand:#b21f2d;
  --brand-dark:#8e1722;
  --shadow:0 10px 26px rgba(0,0,0,.08);
  --radius:16px;
  --max:1100px;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,"Noto Sans TC",sans-serif;background:var(--bg);color:var(--text);line-height:1.75}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}

/* Top bar */
.topbar{
  background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
}
.topbarInner{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;height:66px;
}
.brand{display:flex;align-items:center;min-width:200px}
.brandLogo{height:44px;width:auto;display:block} /* 桌機 LOGO */
nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
nav a{font-size:13px;color:#333;padding:8px 8px;border-radius:10px}
nav a:hover{background:#f4f4f4}
.navActive{font-weight:900;color:var(--brand)}

/* Hero */
.hero{
  background:#111;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.25) 100%),
    url("/assets/zhaitian-hero.jpg");
  background-size:cover;
  background-position:center;
  color:#fff;
}
.heroInner{padding:44px 0 26px}
.heroTitle{font-size:40px;font-weight:900;letter-spacing:.06em;margin:0 0 6px;text-align:center}
.heroCrumb{font-size:13px;color:rgba(255,255,255,.85);text-align:center}
.heroCrumb a{color:rgba(255,255,255,.92);text-decoration:underline;text-underline-offset:3px}

/* Tabs */
.tabsWrap{background:#fff;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:10px;flex-wrap:wrap;padding:12px 0}
.tab{
  font-size:13px;padding:9px 12px;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:#333;
}
.tab.active{
  border-color:var(--brand);color:var(--brand);font-weight:900;
  background:rgba(178,31,45,.06);
}

/* Layout */
main{padding:22px 0 44px}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
h2{margin:0 0 10px;font-size:20px}
.muted{color:var(--muted);font-size:14px}
.lead{font-size:15px;color:#333;margin:0}
.quote{border-left:4px solid var(--brand);padding-left:12px;margin:12px 0;color:#333}
.doubt{
  margin:16px 0;
  padding:14px 16px;
  background:#fafafa;
  border:1px solid var(--line);
  border-radius:12px;
}

.doubt h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:900;
  color:var(--brand);
}

.doubt p{
  margin:8px 0;
  font-size:14px;
  color:#333;
  line-height:1.8;
}
.steps{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.step{display:flex;gap:10px;align-items:flex-start;background:#fafafa;border:1px solid var(--line);border-radius:14px;padding:12px}
.badgeNum{width:28px;height:28px;border-radius:10px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex:0 0 auto}
.stepTitle{font-weight:900;margin:0}
.stepText{margin:2px 0 0;color:var(--muted);font-size:14px}

.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 14px;border-radius:14px;border:1px solid var(--line);
  background:#fff;font-weight:900;min-width:160px;
}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.ghost:hover{background:#f4f4f4}

.tip{margin-top:10px}
.mt16{margin-top:16px}
.list{margin:8px 0 0;padding-left:18px}

footer{padding:26px 0 40px;color:var(--muted);text-align:center}

/* ✅ Mobile fix（你現在已經在用的兩段） */
@media (max-width:720px){
  .brandLogo{height:56px !important;}
  .topbarInner{height:auto; padding:10px 0; align-items:flex-start;}
  nav{gap:8px; flex-wrap:wrap; justify-content:flex-end;}
  nav a{font-size:12px; padding:6px 8px;}
}

.ctaCenter{justify-content:center;}


.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
  justify-content:center;   /* ✅ 讓手機版置中 */
}
@media (max-width:720px){
  /* 你原本的內容... */
  .cta{justify-content:center;}
}