/* ================================================================
 * SAM Group — components.css
 * Phase 3 元件樣式：產品 Hero / 快速導覽 / 特點列表 / 規格表 /
 * 卡片網格 / 型號比較表 / 分類區塊 / CTA 列 / 方案卡 / 麵包屑。
 * 手機優先，min-width 向上疊加。
 * ================================================================ */

/* ---------- 通用區塊 ---------- */
.section {
  padding: var(--space-section) 0;
}

.section--tint {
  background: var(--c-bg);
}

.section--primary {
  background: var(--c-primary);
  color: #fff;
}

.section--primary h2,
.section--primary h3 {
  color: #fff;
}

/* 小工具類 */
.text-muted {
  color: var(--c-muted);
}

.overview-tagline {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.maint-text {
  color: var(--c-text);
  line-height: 1.8;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
}

.section-head h2 {
  margin-bottom: 12px;
}

.section-head .lead {
  color: var(--c-muted);
  font-size: 1.02rem;
}

.section--primary .section-head .lead {
  color: rgba(255, 255, 255, 0.82);
}

.section-head--left {
  text-align: left;
  margin-left: 0;
}

/* ---------- 麵包屑 ---------- */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--c-muted);
  padding: 14px 0 0;
}

.breadcrumbs a {
  color: var(--c-muted);
}

.breadcrumbs a:hover {
  color: var(--c-accent);
}

.breadcrumbs .sep {
  margin: 0 6px;
  opacity: 0.6;
}

.breadcrumbs .current {
  color: var(--c-text);
}

/* ---------- 產品/頁面 Hero ---------- */
.product-hero,
.page-hero {
  background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary) 55%, var(--c-primary-2));
  color: #fff;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}

/* 放射狀裝飾線（設計圖風格） */
.product-hero::before,
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.1), transparent 40%),
    repeating-radial-gradient(
      circle at 85% 15%,
      transparent 0,
      transparent 22px,
      rgba(255, 255, 255, 0.05) 22px,
      rgba(255, 255, 255, 0.05) 23px
    );
  pointer-events: none;
}

.product-hero .container,
.page-hero .container {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 860px) {
  .hero-grid.has-image {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-light-blue);
  margin-bottom: 12px;
}

.product-hero h1,
.page-hero h1 {
  color: #fff;
  margin-bottom: 14px;
}

.hero-tagline {
  font-size: 1.15rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 18px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 22px;
}

.hero-meta .hm-item {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.hero-meta .hm-item strong {
  color: #fff;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-image {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: rgba(255, 255, 255, 0.06);
}

.hero-image img {
  width: 100%;
}

/* ---------- 快速導覽（頁內錨點） ---------- */
.quick-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
}

.quick-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}

.quick-nav a {
  display: inline-block;
  padding: 12px 14px;
  color: var(--c-text);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.quick-nav a:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

/* ---------- 兩欄內容（左標題/右內容） ---------- */
.feature-row {
  display: grid;
  gap: 16px 32px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 768px) {
  .feature-row {
    grid-template-columns: 240px 1fr;
  }
}

.feature-row .fr-label {
  color: var(--c-accent);
  font-weight: 700;
  font-size: 0.95rem;
}

.feature-row .fr-label .fr-num {
  display: block;
  font-size: 0.78rem;
  color: var(--c-muted);
  letter-spacing: 0.1em;
}

/* ---------- 特點列表（打勾） ---------- */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .check-list {
    grid-template-columns: 1fr 1fr;
  }
}

.check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--c-text);
  line-height: 1.6;
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 1px var(--c-green);
}

.check-list li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- 場景標籤 ---------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-list .tag {
  display: inline-block;
  padding: 6px 14px;
  background: var(--c-light-blue);
  color: var(--c-primary);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ---------- 規格表 ---------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.spec-table th,
.spec-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: 0;
}

.spec-table th {
  background: var(--c-bg);
  color: var(--c-muted);
  font-weight: 600;
  width: 38%;
}

.spec-table td {
  color: var(--c-text);
  font-weight: 500;
}

/* ---------- 卡片網格 ---------- */
.cards-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, 1fr); /* 手機預設 2 列 */
}

/* 小手機縮小間距，避免兩列過擠 */
@media (max-width: 539.98px) {
  .cards-grid {
    gap: 12px;
  }
}

/* 方案卡等長文卡片：手機/平板維持單列（桌面 ≥960 仍 3 列） */
@media (max-width: 959.98px) {
  .cards-grid-article {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 960px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .cards-grid.cards-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 產品卡 */
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    box-shadow var(--t-fast),
    transform var(--t-fast);
  height: 100%;
}

.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

/* 固定正方形縮圖：寬度隨卡片列寬，圖片不裁切、置中（信箱留白顯示底色） */
.product-card .pc-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-card .pc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--t);
}

.product-card:hover .pc-thumb img {
  transform: scale(1.04);
}

.product-card .pc-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.product-card .pc-title {
  font-size: 1.1rem;
  margin-bottom: 0;
}

.product-card .pc-title a {
  color: var(--c-primary);
}

.product-card .pc-title a:hover {
  color: var(--c-accent);
}

/* 「適合：／賣點：」行（值為空時該行不輸出） */
.product-card .pc-meta {
  color: var(--c-muted);
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.product-card .pc-meta-label {
  color: var(--c-text);
  font-weight: 700;
}

/* 產品標籤（灰色圓角小籤，最多 3 個） */
.product-card .pc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.product-card .pc-pill {
  background: var(--c-light-blue);
  color: var(--c-muted);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}

/* 雙按鈕：查看詳情（白底描邊）＋ WhatsApp（深藍實底，全站同一連結） */
.product-card .pc-actions {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 8px;
}

.product-card .pc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
}

.product-card .pc-btn--detail {
  background: #fff;
  border: 1px solid var(--c-sam-primary);
  color: var(--c-sam-primary);
  transition:
    background var(--t-fast),
    color var(--t-fast);
}

.product-card .pc-btn--detail:hover {
  background: rgb(239 246 255);
}

.product-card .pc-btn--wa {
  background: var(--c-sam-primary);
  border: 1px solid var(--c-sam-primary);
  color: #fff;
  transition: background var(--t-fast);
}

.product-card .pc-btn--wa > svg {
  width: 14px;
  max-width: none;
}

/* 小手機 2 列下卡片過窄，雙按鈕改直排避免文字溢出 */
@media (max-width: 539.98px) {
  .product-card .pc-actions {
    flex-direction: column;
  }
}

.product-card .pc-coverage {
  font-size: 0.82rem;
  color: var(--c-accent);
  font-weight: 700;
  margin-bottom: 12px;
}

.product-card .pc-thumb a {
  display: contents;
}

/* TOP 排名角標（product_rank：1 = TOP 1、2 = TOP 2） */
.pc-rank {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 3px 10px;
  border-bottom-right-radius: var(--radius);
  letter-spacing: 0.02em;
}

.pc-rank--1 {
  background: #dc2626; /* 主題調色板無紅色 token，故硬編碼 */
}

.pc-rank--2 {
  background: var(--c-sam-accent);
}

.pc-crown {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  color: #f59e0b; /* 金色皇冠 */
  font-size: 1.05rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* TOP 1 卡片橙色描邊高亮 */
.product-card--top1 {
  border-color: var(--c-sam-accent);
  box-shadow: 0 0 0 1px var(--c-sam-accent);
}

.product-card--top1:hover {
  box-shadow:
    var(--shadow),
    0 0 0 1px var(--c-sam-accent);
}

/* 空狀態（分類尚無產品） */
.empty-note {
  color: var(--c-muted);
  padding: 24px 0;
}

/* ---------- 子分類卡 ---------- */
.cat-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .cat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .cat-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cat-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  text-decoration: none;
  background: var(--c-primary);
}

.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 26, 50, 0.05), rgba(6, 26, 50, 0.78));
}

.cat-card .cc-label {
  position: relative;
  z-index: 1;
  padding: 16px;
}

.cat-card .cc-label .cc-name {
  font-size: 1.1rem;
  font-weight: 700;
}

.cat-card .cc-label .cc-arrow {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.82rem;
  opacity: 0.85;
}

.cat-card:hover {
  color: #fff;
}

.cat-card:hover img {
  transform: scale(1.05);
}

.cat-card img {
  transition: transform var(--t);
}

/* ---------- 型號比較表 ---------- */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 560px;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  text-align: center;
  font-size: 0.92rem;
}

.compare-table thead th {
  background: var(--c-primary);
  color: #fff;
}

.compare-table thead th:first-child {
  background: var(--c-primary-dark);
  text-align: left;
}

.compare-table tbody th {
  text-align: left;
  color: var(--c-muted);
  font-weight: 600;
  background: var(--c-bg);
}

.compare-table tbody tr:hover td {
  background: var(--c-light-blue);
}

.compare-table .col-name {
  font-weight: 700;
  color: var(--c-primary);
}

.compare-table .col-name a {
  color: var(--c-primary);
}

/* ---------- CTA 橫條 ---------- */
.cta-bar {
  background: linear-gradient(135deg, var(--c-accent-dark), var(--c-accent));
  color: #fff;
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.cta-bar h3 {
  color: #fff;
  margin: 0;
}

.cta-bar p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.9);
}

.cta-bar .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* CTA 直列（產品頁底部多按鈕） */
.cta-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 方案卡 ---------- */
.solution-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition:
    box-shadow var(--t-fast),
    transform var(--t-fast);
  height: 100%;
}

.solution-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.solution-card .sc-deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: var(--c-light-blue);
  border-bottom-left-radius: 100%;
  opacity: 0;
  z-index: 0;
  transition:
    opacity var(--t-fast),
    transform var(--t-fast);
}

.solution-card:hover .sc-deco {
  opacity: 0.5;
  transform: scale(1.1);
}

.solution-card .sc-link {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  height: 100%;
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: inherit;
}

.solution-card .sc-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-light-blue);
  color: var(--c-accent);
  font-weight: 900;
}

.solution-card .sc-body {
  flex: 1;
  min-width: 0;
}

.solution-card .sc-title {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--c-primary);
}

.solution-card:hover .sc-title {
  color: var(--c-accent);
}

.solution-card .sc-summary {
  color: var(--c-muted);
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 單文/方案內文排版（補強 .entry-content） ---------- */
.single-solution .entry-header,
.single-product .section {
  scroll-margin-top: calc(var(--header-h) + 60px);
}

/* ================================================================
 * Phase 3-B：首頁 / 關於我們 / 聯絡我們
 * ================================================================ */

/* 首頁 Hero（更高、更壯觀） */
.home-hero {
  position: relative;
  background: url(../img/banner-home.png) center center / cover no-repeat;
  color: #fff;
  padding: 96px 0 150px;
  overflow: hidden;
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 40, 90, 0.72) 0%, rgba(8, 40, 90, 0.45) 55%, rgba(8, 40, 90, 0.25) 100%);
  pointer-events: none;
}

.home-hero .container {
  position: relative;
  z-index: 1;
}

.home-hero .hh-inner,
.about-hero .hh-inner,
.solution-hero .hh-inner {
  max-width: 672px;
}

.home-hero .hero-eyebrow {
  color: var(--c-light-blue);
}

.home-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 24px;
}

.home-hero .hh-sub,
.about-hero .hh-sub,
.solution-hero .hh-sub {
  font-size: 1.125rem;
  color: #dbeafe;
  max-width: 36rem;
  margin-bottom: 32px;
  line-height: 1.7;
}

.home-hero .hero-cta,
.about-hero .hero-cta,
.solution-hero .hero-cta {
  gap: 16px;
}

/* Hero 徽章（毛玻璃膠囊 + 盾牌圖標） */
.home-hero .hero-badge,
.about-hero .hero-badge,
.solution-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #dbeafe;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* H1 第二行：漸變色文字 */
.home-hero .h1-grad,
.about-hero .h1-grad,
.solution-hero .h1-grad {
  background: linear-gradient(to right, #93c5fd, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hero 按鈕：圓角膠囊 */
.home-hero .btn,
.about-hero .btn,
.solution-hero .btn {
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 1.05rem;
}

.btn-hero-primary {
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 10px 30px rgba(8, 40, 90, 0.45);
}

.btn-hero-primary:hover {
  background: var(--c-accent-dark);
  color: #fff;
}

.btn-hero-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}

.btn-hero-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-hero-glass .icon-whatsapp {
  color: #4ade80;
}

/* 手機版 Hero 內容置中（≥1024px 桌面維持左對齊） */
@media (max-width: 1023.98px) {
  .home-hero .hh-inner,
  .about-hero .hh-inner,
  .solution-hero .hh-inner {
    text-align: center;
  }

  .home-hero .hero-cta,
  .about-hero .hero-cta,
  .solution-hero .hero-cta {
    flex-direction: column;
    gap: 12px;
  }

  .home-hero .hero-cta .btn,
  .about-hero .hero-cta .btn,
  .solution-hero .hero-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
  }
}

/* 核心入口（系列大卡） */
.entry-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .entry-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.entry-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  text-decoration: none;
  background: var(--c-primary);
}

.entry-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t);
}

.entry-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 26, 50, 0.1), rgba(6, 26, 50, 0.82));
}

.entry-card .ec-body {
  position: relative;
  z-index: 1;
  padding: 22px;
}

.entry-card .ec-name {
  font-size: 1.4rem;
  font-weight: 800;
}

.entry-card .ec-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 6px 0 12px;
}

.entry-card .ec-go {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}

.entry-card:hover {
  color: #fff;
}

.entry-card:hover img {
  transform: scale(1.05);
}

/* 為何選擇我們 */
.value-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .value-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.value-card {
  padding: 28px 20px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow var(--t-fast),
    transform var(--t-fast);
}

.value-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.value-card .vc-icon {
  color: var(--c-primary);
  margin-bottom: 14px;
  display: inline-flex;
}

.value-card .vc-icon--green {
  color: var(--c-green);
}

.value-card .vc-title {
  font-size: 1.02rem;
  margin-bottom: 6px;
  color: var(--c-primary);
}

.value-card .vc-text {
  color: var(--c-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* 關於我們 內文 */
.about-body {
  max-width: 820px;
  margin: 0 auto;
}

.about-body .entry-content {
  margin-bottom: 0;
}

.about-stats {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  margin: 28px 0;
}

@media (min-width: 700px) {
  .about-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-stat {
  text-align: center;
}

.about-stat .as-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-accent);
}

.about-stat .as-label {
  font-size: 0.85rem;
  color: var(--c-muted);
}

/* 聯絡我們 雙欄 */
.contact-split {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 860px) {
  .contact-split {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.contact-info {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 26px;
}

.contact-info h3 {
  font-size: 1.1rem;
  margin-bottom: 14px;
}

.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info li {
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.contact-info li:last-child {
  border-bottom: 0;
}

.contact-info .ci-label {
  min-width: 80px;
  color: var(--c-muted);
  font-weight: 600;
}

.contact-form-box {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 26px;
}

.contact-form-box h3 {
  margin-bottom: 14px;
}

/* WPForms 表單排版微調 */
.contact-form-box .wpforms-form .wpforms-field {
  padding: 8px 0;
}

.contact-form-box .wpforms-form .wpforms-field-label {
  font-weight: 600;
  color: var(--c-text);
}

.contact-form-box .wpforms-form input[type='text'],
.contact-form-box .wpforms-form input[type='email'],
.contact-form-box .wpforms-form input[type='tel'],
.contact-form-box .wpforms-form textarea,
.contact-form-box .wpforms-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
}

.contact-form-box .wpforms-form button[type='submit'],
.contact-form-box .wpforms-form .wpforms-submit {
  background: var(--c-accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  font-weight: 700;
  cursor: pointer;
}

.contact-form-box .wpforms-form button[type='submit']:hover {
  background: var(--c-accent-dark);
}

/* ---------- 導覽列右側：電話 + 取得報價（點擊直接撥號） ---------- */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-primary);
  text-decoration: none;
  line-height: 1.1;
}

.nav-phone:hover {
  color: var(--c-accent);
}

.nav-phone-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--c-light-blue);
  color: var(--c-accent);
  flex: none;
}

.nav-phone-text {
  display: flex;
  flex-direction: column;
}

.nav-phone-label {
  font-size: 0.68rem;
  color: var(--c-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.nav-phone-num {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--c-primary);
  white-space: nowrap;
  transition: color var(--t-fast);
}

.nav-phone:hover .nav-phone-num {
  color: var(--c-accent);
}

.nav-quote {
  flex: none;
}

/* 手機側欄：CTA 直列、按鈕全寬 */
@media (max-width: 1023.98px) {
  .nav-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .nav-quote {
    width: 100%;
    justify-content: center;
  }
}

/* 中等桌面（1024–1199px）隱藏小字標籤，避免擠 */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .nav-phone-label {
    display: none;
  }
}

/* Home floating services bar (overlaps hero bottom; design Section 1.5) */
.home-features {
  position: relative;
  z-index: 20;
  margin-top: -100px;
  padding-bottom: 48px;
}

.hf-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  box-shadow: 0 15px 30px -5px rgba(30, 64, 175, 0.15);
  padding: 16px;
  display: flex;
  flex-direction: row; /* 手機也橫排三欄 */
}

.hf-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  text-decoration: none;
  color: #1f2937;
  transition: transform 0.3s ease;
}

.hf-item + .hf-item {
  border-left: 1px solid #f1f5f9;
}

.hf-item:hover {
  transform: translateY(-4px);
}

.hf-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #1e40af;
  margin-bottom: 6px;
}

.hf-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0a2540;
  margin-bottom: 0;
  text-align: center;
  line-height: 1.3;
}

.hf-desc {
  display: none; /* 手機隱藏，窄列只顯示圖標+標題 */
}

/* 桌面 ≥768：放大並顯示描述 */
@media (min-width: 768px) {
  .hf-card {
    padding: 24px;
  }

  .hf-item {
    padding: 16px 12px;
  }

  .hf-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
  }

  .hf-title {
    font-size: 1.125rem;
    margin-bottom: 4px;
  }

  .hf-desc {
    display: block;
    font-size: 0.875rem;
    color: #6b7280;
  }
}

/* Care service cards (static: round icon + centered text) */
.care-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow var(--t-fast),
    transform var(--t-fast);
}

.care-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.care-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-light-blue);
  color: var(--c-accent);
  margin: 0 auto 16px;
}

.care-icon--green {
  background: #e7f7ee;
  color: var(--c-green);
}

.care-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 8px;
}

.care-text {
  color: var(--c-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Inquiry form card (WPForms embed) */
.inquiry-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
}

@media (max-width: 600px) {
  .inquiry-card {
    padding: 24px 18px;
  }
}

.inquiry-head {
  text-align: center;
  margin-bottom: 28px;
}

.inquiry-head h2 {
  font-size: 1.6rem;
  color: var(--c-primary);
  margin-bottom: 6px;
}

.inquiry-head .lead {
  color: var(--c-muted);
  font-size: 0.9rem;
}

.inquiry-card .wpforms-container {
  width: 100%;
}

.inquiry-card .wpforms-form .wpforms-field {
  margin-bottom: 16px;
  padding: 0;
}

.inquiry-card .wpforms-form .wpforms-field-label {
  font-weight: 600;
  color: var(--c-text);
  font-size: 0.9rem;
  margin-bottom: 6px;
  display: block;
}

.inquiry-card .wpforms-form .wpforms-field input[type='text'],
.inquiry-card .wpforms-form .wpforms-field input[type='tel'],
.inquiry-card .wpforms-form .wpforms-field input[type='email'],
.inquiry-card .wpforms-form .wpforms-field textarea,
.inquiry-card .wpforms-form .wpforms-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 0.92rem;
  color: var(--c-text);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    background var(--t-fast);
}

.inquiry-card .wpforms-form .wpforms-field input:focus,
.inquiry-card .wpforms-form .wpforms-field textarea:focus,
.inquiry-card .wpforms-form .wpforms-field select:focus {
  background: #fff;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(23, 105, 201, 0.15);
  outline: none;
}

.inquiry-card .wpforms-form .wpforms-submit {
  width: 100%;
  background: var(--c-primary);
  color: #fff;
  border: 0;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background var(--t-fast);
}

.inquiry-card .wpforms-form .wpforms-submit:hover {
  background: var(--c-accent);
}

.inquiry-card .wpforms-form .wpforms-field select {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 10px 14px;
  cursor: pointer;
}

.inquiry-card .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.inquiry-card .wpforms-field-container .wpforms-field {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* .inquiry-card .wpforms-field-container .wpforms-field-text,
.inquiry-card .wpforms-field-container .wpforms-field-name,
.inquiry-card .wpforms-field-container .wpforms-field-phone {
  grid-column: span 1;
} */

@media (max-width: 600px) {
  .inquiry-card .wpforms-field-container {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
 * Phase 3-C：關於我們頁（About）— 對應設計草稿 about 頁
 * ================================================================ */

/* ---------- Hero Banner ---------- */
.about-hero {
  position: relative;
  background: url(../img/banner-about-us.png) center center / cover no-repeat;
  /* sam-dark */
  color: #fff;
  min-height: 400px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 72px 0;
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 40, 90, 0.55);
  opacity: 1;
}

.about-hero .container {
  position: relative;
  z-index: 1;
}

.about-hero-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.about-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 16px;
}

.about-hero .ah-grad {
  background: linear-gradient(to right, #93c5fd, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.about-hero .ah-sub {
  font-size: 1.125rem;
  color: #dbeafe;
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------- 全局快速導覽（sticky） ---------- */
.about-quicknav {
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 64px;
  z-index: 40;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.about-quicknav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0;
}

@media (min-width: 768px) {
  .about-quicknav-inner {
    gap: 32px;
    padding: 16px 0;
  }
}

.about-quicknav-label {
  color: #9ca3af;
  font-weight: 700;
  font-size: 0.85rem;
  display: none;
}

.about-quicknav-label i {
  margin-right: 4px;
}

@media (min-width: 768px) {
  .about-quicknav-label {
    display: inline;
  }
}

.about-quicknav a {
  color: var(--c-primary);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color var(--t-fast);
}

@media (min-width: 768px) {
  .about-quicknav a {
    font-size: 1rem;
  }
}

.about-quicknav a:hover {
  color: var(--c-sam-primary);
}

.about-quicknav a i {
  color: var(--c-sam-light);
  font-size: 0.75rem;
}

/* ---------- Feature 區段（交替左右圖文） ---------- */
.about-feature {
  padding: 80px 0;
  scroll-margin-top: 140px;
}

.about-feature--tint {
  background: var(--c-bg);
}

/* sam-bg */
.about-feature--white {
  background: #fff;
}

.about-feature--bb {
  border-bottom: 1px solid #f1f5f9;
}

.af-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 768px) {
  .af-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  /* reverse：桌面時圖左、文右 */
  .about-feature--reverse .af-text {
    order: 2;
    padding-left: 32px;
  }

  .about-feature--reverse .af-image {
    order: 1;
  }

  .about-feature:not(.about-feature--reverse) .af-text {
    padding-right: 32px;
  }
}

/* 文字欄 */
.af-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.af-text h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 900;
  color: var(--c-primary);
  line-height: 1.25;
  margin: 0 0 12px;
}

.af-text h3 {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  color: var(--c-sam-primary);
  margin: 0 0 24px;
}

.af-lead {
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 24px;
}

/* 打勾清單 */
.af-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 14px;
}

.af-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.af-check-icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dbeafe;
  color: var(--c-sam-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  font-size: 0.7rem;
}

.af-check-text {
  color: #374151;
  font-weight: 500;
  line-height: 1.5;
}

/* 快速導覽按鈕（小藥丸） */
.af-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.btn-quick-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--c-primary);
  border: 1px solid var(--c-border);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    transform var(--t-fast);
}

.btn-quick-nav:hover {
  background: var(--c-sam-primary);
  color: #fff;
  border-color: var(--c-sam-primary);
  transform: translateY(-1px);
}

.btn-quick-nav i {
  font-size: 0.7rem;
}

/* 圖片欄 + 旋轉背景裝飾 */
.af-image {
  position: relative;
}

.af-image-deco {
  position: absolute;
  inset: -16px;
  border-radius: 24px;
  transform: rotate(3deg);
  z-index: 0;
}

.af-image-deco--blue {
  background: linear-gradient(to bottom right, #dbeafe, #fff);
}

.af-image-deco--orange {
  background: linear-gradient(to top right, #ffedd5, #fff);
  transform: rotate(-3deg);
}

.af-image-deco--green {
  background: linear-gradient(to bottom left, #dcfce7, #fff);
  transform: rotate(2deg);
}

.af-image-deco--purple {
  background: linear-gradient(to bottom right, #f3e8ff, #eff6ff, #fff);
  transform: rotate(-2deg);
}

.af-image > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(10, 38, 71, 0.15);
}

/* 雙圖網格（產品系統） */
.af-image-pair {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.af-image-pair img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(10, 38, 71, 0.12);
}

.af-image-pair img:last-child {
  margin-top: 32px;
}

/* 產品系統：4 小卡 */
.af-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.af-mini-card {
  background: #f8fafc;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 12px;
}

.af-mini-card i {
  color: var(--c-sam-light);
  font-size: 1.5rem;
  flex: none;
}

.af-mini-card h4 {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-primary);
  margin: 0;
  line-height: 1.35;
}

/* 產品亮點（橙邊框塊） */
.af-highlight {
  background: #fff7ed;
  border-left: 4px solid var(--c-sam-accent);
  padding: 16px;
  border-radius: 0 12px 12px 0;
  margin-bottom: 24px;
}

.af-highlight h4 {
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.af-highlight h4 i {
  color: var(--c-sam-accent);
}

.af-highlight p {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.7;
  margin: 0;
}

.af-highlight strong {
  color: var(--c-sam-accent);
}

/* 服務對象：標籤 pill */
.af-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.af-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* 風險下降指標 */
.af-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.af-metric {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.af-metric--red {
  background: #fef2f2;
  color: #dc2626;
}

.af-metric--orange {
  background: #fff7ed;
  color: #ea580c;
}

.af-metric--blue {
  background: #eff6ff;
  color: var(--c-sam-primary);
}

/* 需求清單（灰底卡） */
.af-needbox {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.af-needbox h4 {
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 14px;
}

.af-needbox ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.af-needbox li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.af-needbox li i {
  color: var(--c-sam-light);
  font-size: 1.125rem;
}

.af-needbox li span {
  font-weight: 500;
  color: #374151;
}

/* ---------- 為何選擇我們（5 列） ---------- */
.about-why {
  background: #f8fafc;
  padding: 80px 0;
  scroll-margin-top: 140px;
}

.about-why-head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 48px;
}

.about-why-head h2 {
  font-size: clamp(1.6rem, 3.5vw, 1.875rem);
  font-weight: 900;
  color: var(--c-primary);
  margin: 0 0 16px;
}

.about-why-head h2 span {
  color: #9ca3af;
  font-weight: 400;
  font-size: 1.25rem;
  margin-left: 4px;
}

.about-why-head p {
  color: #6b7280;
  margin: 0;
}

.about-why-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .about-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .about-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .about-why-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.why-card {
  background: #fff;
  padding: 24px 18px;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    box-shadow var(--t-fast),
    transform var(--t-fast);
}

.why-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.why-card .why-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eff6ff;
  color: var(--c-sam-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.why-card h3 {
  font-weight: 700;
  color: var(--c-primary);
  font-size: 0.9rem;
  margin: 0 0 8px;
}

.why-card p {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
}

/* ---------- CTA 收口 ---------- */
.about-cta {
  position: relative;
  padding: 64px 0;
  background: linear-gradient(to bottom right, var(--c-sam-primary), var(--c-primary));
  color: #fff;
  overflow: hidden;
}

.about-cta-deco {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
}

.about-cta-deco::before,
.about-cta-deco::after {
  content: '';
  position: absolute;
  border: 40px solid #fff;
  border-radius: 50%;
}

.about-cta-deco::before {
  right: -80px;
  top: -80px;
  width: 384px;
  height: 384px;
}

.about-cta-deco::after {
  left: -80px;
  bottom: -80px;
  width: 320px;
  height: 320px;
  border-width: 30px;
}

.about-cta .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.about-cta h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 900;
  margin: 0 0 16px;
  color: white;
}

.about-cta p {
  color: #dbeafe;
  font-size: 1.05rem;
  max-width: 36rem;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.about-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

@media (min-width: 640px) {
  .about-cta-actions {
    flex-direction: row;
  }
}

.about-cta .btn-wa {
  background: var(--c-green);
  color: #fff;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(6, 78, 59, 0.3);
  transition:
    background var(--t-fast),
    transform var(--t-fast);
}

.about-cta .btn-wa:hover {
  background: #22c55e;
  color: #fff;
  transform: translateY(-3px);
}

.about-cta .btn-call {
  background: #fff;
  color: var(--c-primary);
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition:
    background var(--t-fast),
    transform var(--t-fast);
}

.about-cta .btn-call:hover {
  background: #f9fafb;
  transform: translateY(-3px);
}

.about-cta .btn-call i {
  color: var(--c-sam-primary);
}

.about-cta .btn-cu {
  color: #fff;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition:
    background var(--t-fast),
    transform var(--t-fast);
  border: 1px solid #fff;
}

.about-cta .btn-cu:hover {
  background: #f9fafb;
  color: var(--c-sam-primary);
  transform: translateY(-3px);
}

/* ================================================================
 * Phase 3-D：聯絡我們頁（Contact）— 對應設計草稿 contact 頁
 * 表單欄位樣式直接複用 .inquiry-card 規則（容器同時掛 .contact-form-card .inquiry-card）
 * ================================================================ */

/* ---------- Hero Banner ---------- */
.contact-hero {
  position: relative;
  background: var(--c-primary);
  color: #fff;
  padding: 72px 0;
  overflow: hidden;
}

.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, var(--c-primary), var(--c-sam-primary));
  opacity: 0.9;
}

.contact-hero-deco {
  position: absolute;
  right: -40px;
  bottom: -40px;
  color: rgba(255, 255, 255, 0.05);
  font-size: 12rem;
  line-height: 1;
  pointer-events: none;
}

.contact-hero .container {
  position: relative;
  z-index: 1;
}

.contact-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  margin: 0 0 16px;
}

.contact-hero h3 {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 24px;
}

.contact-hero p {
  color: #dbeafe;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
}

/* ---------- 雙欄佈局 ---------- */
.contact-layout {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1fr 2fr;
    gap: 56px;
  }
}

/* 左側：公司聯絡資料 */
.contact-meta h2 {
  font-size: clamp(1.3rem, 3vw, 1.5rem);
  font-weight: 900;
  color: var(--c-primary);
  margin: 0 0 6px;
  padding-left: 12px;
  border-left: 4px solid var(--c-sam-primary);
}

.contact-meta .cm-en {
  color: #6b7280;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 0 32px;
  padding-left: 16px;
}

.cm-cards {
  display: grid;
  gap: 16px;
}

.cm-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #f8fafc;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  transition:
    box-shadow var(--t-fast),
    transform var(--t-fast);
}

.cm-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.cm-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.cm-icon--phone {
  background: #dbeafe;
  color: var(--c-sam-primary);
}

.cm-icon--wa {
  background: #dcfce7;
  color: var(--c-green);
  font-size: 1.5rem;
}

.cm-icon--fax {
  background: #e2e8f0;
  color: #475569;
}

.cm-icon--mail {
  background: #ffedd5;
  color: var(--c-sam-accent);
}

.cm-card .cm-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cm-card .cm-cap {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 700;
  margin: 0 0 4px;
}

.cm-card .cm-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--c-primary);
  margin: 0;
  line-height: 1.3;
  word-break: break-all;
}

.cm-card .cm-val--sm {
  font-size: 1rem;
  font-weight: 700;
}

/* 右側：表單卡片（複用 .inquiry-card 的欄位樣式） */
.contact-form-card.inquiry-card {
  max-width: none;
  margin: 0;
}

.contact-form-card .cf-head {
  margin-bottom: 28px;
}

.contact-form-card .cf-head h2 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-primary);
  margin: 0 0 6px;
}

.contact-form-card .cf-head p {
  color: #6b7280;
  font-size: 0.9rem;
  margin: 0;
}

/* ================================================================
 * Phase 3-E：產品分類頁（電商式佈局）— 篩選 pills 工具列 + 產品網格 + 適用場景
 * 卡片沿用 .product-card；此處僅工具列 + 分頁 + 場景卡
 * ================================================================ */

/* 篩選工具列：pills（左）+ 顯示數量（右），小白卡外殼 */
.filterbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
  .filterbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

.filterbar-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #374151;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background var(--t-fast),
    color var(--t-fast);
}

.filter-pill:hover {
  background: #e2e8f0;
  color: var(--c-primary);
}

.filter-pill.is-active {
  background: var(--c-sam-primary);
  color: #fff;
}

.filterbar-count {
  font-size: 0.88rem;
  color: #6b7280;
  white-space: nowrap;
}

.filterbar-count strong {
  color: var(--c-primary);
  font-weight: 900;
}

/* 適用場景：分類頁網格後的場景卡（頂層 term cat_scenarios 提供） */
.scenario-block {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--c-border);
}

.scenario-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .scenario-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .scenario-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.scenario-card {
  background: rgb(239 246 255 / 0.5);
  border: 1px solid rgb(239 246 255 / 0.5);
  border-radius: 12px;
  padding: 20px 24px;
  transition: box-shadow var(--t-fast);
}

.scenario-card:hover {
  box-shadow: 0 6px 16px rgba(10, 38, 71, 0.08);
}

.scenario-title {
  color: var(--c-sam-primary);
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0 0 4px;
  line-height: 1.35;
}

.scenario-sub {
  color: var(--c-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* 分頁 */
.shop-pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.shop-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  color: #374151;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  margin: 0 3px;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast);
}

.shop-pagination .page-numbers:hover {
  background: #f8fafc;
}

.shop-pagination .page-numbers.current {
  background: var(--c-sam-primary);
  color: #fff;
  border-color: var(--c-sam-primary);
}

.shop-pagination .page-numbers.dots {
  border: 0;
  color: #9ca3af;
}

/* ================================================================
 * Phase 3-F：產品詳情頁（PDP）— 麵包屑 + 圖廊 + 信息卡
 * ================================================================ */

/* 麵包屑 */
.pdp-crumbs {
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  padding: 12px 0;
  font-size: 0.75rem;
  color: #6b7280;
}

.pdp-crumbs .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pdp-crumbs a {
  color: #6b7280;
  text-decoration: none;
}

.pdp-crumbs a:hover {
  color: var(--c-sam-primary);
}

.pdp-crumbs .fa-chevron-right {
  font-size: 10px;
  color: #cbd5e1;
}

.pdp-crumbs .current {
  color: var(--c-primary);
  font-weight: 700;
}

/* 產品區 */
.pdp-section {
  padding: 48px 0 64px;
  background: #fff;
}

.pdp-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 768px) {
  .pdp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}

/* 圖廊 */
.pdp-main-img-wrap {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 24px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
}

.pdp-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.pdp-main-img-placeholder {
  color: #cbd5e1;
  font-size: 6rem;
}

.pdp-thumbs {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.pdp-thumb {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 2px solid var(--c-border);
  background: #f8fafc;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  flex: none;
  opacity: 0.6;
  transition:
    border-color var(--t-fast),
    opacity var(--t-fast);
}

.pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.pdp-thumb:hover,
.pdp-thumb.is-active {
  opacity: 1;
  border-color: var(--c-sam-primary);
}

/* 信息卡 */
.pdp-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pdp-info h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 900;
  color: var(--c-primary);
  margin: 0 0 8px;
}

.pdp-tagline {
  font-size: 1.125rem;
  color: #6b7280;
  font-weight: 500;
  margin: 0 0 24px;
}

/* 適合／賣點（tagline 下方，包於 .pdp-meta-lines；字級 16px，行距緊） */
.pdp-meta-lines {
  margin: 0 0 6px;
}

.pdp-meta {
  color: var(--c-muted);
  font-size: 16px;
  margin: 0;
}

.pdp-meta + .pdp-meta {
  margin-top: 2px;
}

.pdp-meta-label {
  color: var(--c-text);
  font-weight: 700;
}

.pdp-card {
  background: rgba(239, 246, 255, 0.5);
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.pdp-coverage {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdp-coverage > .fa-expand {
  color: var(--c-sam-primary);
  font-size: 1.25rem;
  flex: none;
}

.pdp-card-cap {
  display: block;
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 700;
  margin-bottom: 2px;
}

.pdp-card-val {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-primary);
}

.pdp-card-sep {
  height: 1px;
  background: rgba(191, 219, 254, 0.6);
  margin: 16px 0;
}

.pdp-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pdp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pdp-checks .fa-check-circle {
  color: var(--c-green);
  margin-top: 2px;
  flex: none;
}

.pdp-checks span {
  font-size: 0.9rem;
  font-weight: 700;
  color: #374151;
  line-height: 1.5;
}

/* 保養徽章 */
.pdp-warranty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 24px;
}

.pdp-warranty .fa-shield-alt {
  color: var(--c-sam-light);
}

/* WhatsApp CTA */
.pdp-cta-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--c-green);
  color: #fff;
  padding: 16px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.2);
  transition:
    background var(--t-fast),
    transform var(--t-fast);
}

.pdp-cta-wa:hover {
  background: var(--c-green-dark);
  color: #fff;
  transform: translateY(-2px);
}

.pdp-cta-wa .fa-whatsapp {
  font-size: 1.5rem;
}

/* 下載產品資料按鈕（藍色） */
.pdp-cta-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--c-sam-primary);
  color: #fff;
  padding: 16px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(30, 64, 175, 0.2);
  margin-top: 12px;
  transition:
    background var(--t-fast),
    transform var(--t-fast);
}

.pdp-cta-download:hover {
  background: #163a9e;
  color: #fff;
  transform: translateY(-2px);
}

.pdp-cta-download .fa-file-pdf {
  font-size: 1.25rem;
}

/* ================================================================
 * 技術與應用方案（solutions)
 * ================================================================ 
 */

/* ---------- Hero Banner ---------- */
.solution-hero {
  position: relative;
  background: url(../img/banner-solution.png) center center / cover no-repeat;
  /* sam-dark */
  color: #fff;
  min-height: 400px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 72px 0;
}

.solution-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.solution-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 40, 90, 0.55);
  opacity: 1;
}

.solution-hero .container {
  position: relative;
  z-index: 1;
}

.solution-hero-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.solution-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 16px;
}

.solution-hero .ah-grad {
  background: linear-gradient(to right, #93c5fd, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.solution-hero .ah-sub {
  font-size: 1.125rem;
  color: #dbeafe;
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.7;
}

/* ================================================================
 * 聯絡我們（contact-us)
 * ================================================================ 
 */

.page-contact .section-head {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 48px;
}

.page-contact h3 {
  font-size: 24px;
}

.page-contact .contact-form-section .section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-contact .contact-form-section .section-head::after {
  content: '';
  display: flex;
  width: 130px;
  height: 3px;
  background: var(--c-sam-primary);
  margin-top: 10px;
}

.page-contact .contact-meta {
  background: var(--c-light-blue);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}

@media (min-width: 860px) {
  .page-contact .cm-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}