/* =========================
   Base / Reset
========================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans TC', system-ui, -apple-system, Arial, sans-serif;
  color: #000;
  background: #f7f7f7;
  line-height: 1.6;
}

/* =========================
   Header / Navbar
========================= */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #1565C0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}
header h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .5px; }

#navbar { margin-left: auto; display: flex; gap: 16px; }
#navbar a { color: #fff; text-decoration: none; font-weight: 700; }
#navbar a:hover { text-decoration: underline; }

.menu-toggle { display: none; font-size: 20px; cursor: pointer; color:#fff; }

@media (max-width: 768px) {
  #navbar {
    display: none;
    flex-direction: column;
    gap: 12px;
    background: #1565C0;
    padding: 12px 16px;
    position: absolute; left: 0; right: 0; top: 56px;
  }
  .menu-toggle { display: block; margin-left: auto; }
  body.nav-open #navbar, #navbar.show { display: flex; }
}

/* =========================
   Main wrapper
========================= */
main { padding: 20px 16px 56px; max-width: 1100px; margin: 0 auto; }

/* =========================
   HERO（首頁）— 乾淨兩欄
   - 無黑框、無四色條
   - 左：主標 + 清單 + CTA（固定在最下）
   - 右：形象圖（置中放大）
========================= */
.hero { position: relative; background: transparent; padding: 24px 0; margin-bottom: 20px; border: none; text-align: left; overflow: hidden; }
.hero .content-surface { position: relative; background: transparent; color:#000; padding: 0; }
.hero .content-surface::before { content: none; display: none; }

/* 兩欄（等高） */
.hero .content{
  display: grid;
  grid-template-columns: 1.3fr 0.7fr; /* 左寬右窄，可視需要調整 */
  gap: 24px;
  align-items: stretch;            /* 讓左右等高，便於 CTA 壓底 */
}

/* 左欄：主標更大、CTA 壓底 */
.hero h2{ margin: 0 0 12px 0; font-size: clamp(34px, 3.2vw + 12px, 48px); font-weight: 800; }
.hero .left{ display:flex; flex-direction:column; gap:12px; }
.hero .left .cta-btn{ margin-top:auto; align-self:flex-start; }

/* 右欄：圖片置中且放大 */
.hero .right{ display:flex; justify-content:center; align-items:center; }
.hero .hero-graphic{ max-width: 640px; width:100%; height:auto; display:block; }

/* 手機：上下堆疊，CTA 不強制壓底避免留白過大 */
@media (max-width: 768px){
  .hero .content{ grid-template-columns: 1fr; gap: 16px; }
  .hero .left .cta-btn{ margin-top:12px; }
  .hero .right{ justify-content:flex-start; }
  .hero .hero-graphic{ max-width: 360px; }
}

/* CTA 按鈕（含首頁橘紅） */
.cta-btn{ display:inline-block; background:#000; color:#fff; text-decoration:none; padding:10px 20px; border-radius:20px; font-weight:700; }
.cta-btn:hover{ background:#333; }
.cta-btn.cta-orange{ background:#FF6B00; color:#fff; }
.cta-btn.cta-orange:hover{ background:#E65F00; }

/* =========================
   Sections / Lists（共用）
========================= */
section { margin-bottom: 24px; }
section h3 { font-size: 20px; margin: 0 0 8px 0; color: #1565C0; }
ul { padding-left: 1.4rem; margin: 0; }
li { margin: .25rem 0; }

/* =========================
   Services 頁：三卡版型（白卡圓角陰影）
========================= */
.features { margin-top: 24px; text-align: center; }
.features h3 { font-size: 24px; margin: 0 0 8px 0; color: #1565C0; }
.features .features-intro { margin: 0 0 20px 0; color: #444; }

.features .cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; text-align:left; }
.features .card{ background:#fff; border-radius:14px; border:1px solid #e6e6e6; box-shadow:0 6px 22px rgba(0,0,0,.08); padding:20px; }
.features .card h4{ margin:0 0 8px 0; font-size:18px; font-weight:800; color:#0F6CD3; }
.features .card p{ margin:0; color:#333; line-height:1.8; }

@media (max-width: 1024px){ .features .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .features .cards{ grid-template-columns: 1fr; } }

/* =========================
   Footer
========================= */
footer{ text-align:center; color:#666; padding:24px 12px; font-size:14px; background:#f0f0f0; margin-top:20px; }
footer a{ color:#1565C0; text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* 服務卡片：上方大圖＋卡片間距統一 */
.features {
  --svc-img-h: 240px;     /* 桌機圖高度：想更大改 260/280px */
  --svc-gap: 24px;        /* 圖與白框的間距：想再低一點改 28/32px */
}

.features .card-wrap { display: flex; flex-direction: column; align-items: center; }

.features .card-img{
  display: block;
  width: auto;            /* 依比例縮放 */
  max-width: 100%;
  height: var(--svc-img-h);   /* 統一高度 → 圖1、圖2會放大 */
  object-fit: contain;        /* 不裁切，完整顯示圖 */
  margin: 6px auto var(--svc-gap);  /* 讓白框「更下面」 */
}

.features .card{
  width: 100%;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 22px 20px 18px;
}

/* 手機：圖稍微縮小，間距也收一點 */
@media (max-width: 600px){
  .features { --svc-img-h: 160px; --svc-gap: 16px; }
}