/* ══════════════════════════════════════════
   cases.html 專屬樣式
   所有字級皆引用 style.css 的 --fs-* token
   ══════════════════════════════════════════ */

* {  margin: 0; padding: 0; box-sizing: border-box;  }
.navbar {  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10,31,60,0.97); backdrop-filter: blur(12px); padding: 0 40px;  }
.page-hero {  background: linear-gradient(160deg, #0A1F3C 0%, #162247 100%); padding: 120px 40px 60px; text-align: center; color: white;  }
.filter-bar {  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px;  }
.filter-btn {  padding: 8px 20px; border: 1.5px solid rgba(255,255,255,0.3); background: transparent; color: rgba(255,255,255,0.7); border-radius: 50px; font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit;  }
.filter-btn:hover {  border-color: white; color: white;  }
.filter-btn.active {  background: var(--primary); border-color: var(--primary); color: white;  }
.section {  padding: 72px 40px;  }
.cases-grid {  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;  }
.case-img::after {  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to top, rgba(10,31,60,0.3), transparent);  }
.case-badge {  position: absolute; top: 12px; left: 12px; background: var(--accent); color: #0A1F1C; font-size: var(--fs-3xs); font-weight: 800; padding: 3px 10px; border-radius: 50px;  }
.case-body > p {  font-size: var(--fs-3xs); color: var(--text2); margin-bottom: 14px; line-height: 1.6;  }
.case-quote {  background: var(--primary-light); border-left: 3px solid var(--primary); padding: 10px 12px; border-radius: 0 8px 8px 0; margin-top: 12px;  }
.case-quote p {  font-size: var(--fs-3xs); color: var(--text); line-height: 1.6; font-style: italic;  }
.case-quote p::before {  content: '"';  }
.case-quote p::after {  content: '"';  }
.summary-stats {  background: white; border-radius: var(--radius); padding: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-bottom: 40px;  }
.summary-stat {  text-align: center;  }
.summary-stat .num {  font-size: var(--fs-3xl); font-weight: 900; color: var(--primary);  }
.summary-stat .lbl {  font-size: var(--fs-3xs); color: var(--text2); margin-top: 4px;  }
.cta-section {  background: linear-gradient(160deg, var(--primary), #0049CC); padding: 72px 40px; text-align: center; color: white;  }
.cta-section h2 {  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); font-weight: 900; margin-bottom: 12px;  }
.cta-section p {  font-size: var(--fs-sm); opacity: 0.8; margin-bottom: 32px;  }
.cta-phone {  font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl)); font-weight: 900; color: white; text-decoration: none; display: block; margin-bottom: 32px;  }
footer {  background: var(--navy); color: white; padding: 56px 40px 0;  }
@media (max-width: 1024px) {
.cases-grid {  grid-template-columns: repeat(2, minmax(0, 1fr));  }
.summary-stats {  grid-template-columns: repeat(2, minmax(0, 1fr));  }
}
@media (max-width: 768px) {
.section {  padding: 56px 20px;  }
.page-hero {  padding: 110px 20px 50px;  }
.cases-grid {  grid-template-columns: minmax(0, 1fr);  }
.summary-stats {  grid-template-columns: repeat(2, minmax(0, 1fr));  }
.navbar {  padding: 0 20px;  }
}