body {
  /* 提醒：body 樣式若為全站，應在 main.css */
  background: #181e24;
  color: #fff;
  font-family: "Noto Sans TC", Arial, sans-serif;
  padding-bottom: 40px;
}


.section-title {
  /* 這個 .section-title 在你的 CSS 中有多個定義，我採用了較後面且通用的那個 */
  font-size: 1.8rem; /* 或者你之前用的 2rem，請確認 */
  font-weight: bold;
  color: #ffe27a;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 6px rgba(255, 226, 122, 0.6);
  text-align: center; /* 大部分是置中，設為預設 */
}
.section-title.text-left {
  /* 若有需要靠左的，可加上 Bootstrap class */
  text-align: left;
}

.highlight-yellow {
  color: #ffe27a;
  font-weight: bold;
}

.highlight-blue {
  color: #36c3f4;
  font-weight: bold;
}

.btn-dark-blue {
  background: #233146;
  color: #fff;
  border: none;
  font-weight: bold;
  border-radius: 8px;
  margin-right: 0.6em;
  margin-bottom: 0.6em;
  min-width: 120px;
}

.btn-dark-blue:hover {
  background: #34425a;
  color: #ffe27a;
}


.story-row {
  margin-bottom: 1.2em;
}

.main-title {
  font-size: 2rem;
  font-weight: bold;
  color: #ffe27a;
  text-align: center;
  margin-bottom: 0.5rem;
  text-shadow: 1px 1px 8px rgba(255, 226, 122, 0.6);
}

.sub-title {
  font-size: 1.2rem;
  color: #e0d9cd;
  text-align: center;
  margin-bottom: 2rem;
}

case-card {
  background: linear-gradient(145deg, #23272e, #1a1e24);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.5rem;
}

.case-card img {
  width: 100%;
  height: 300px;
  /* 固定圖片高度，適合直式圖片 */
  object-fit: cover;
  /* 確保圖片完整顯示 */
}

.case-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #ffe27a;
  margin: 0.8rem 1rem 0.5rem;
}

.case-subtitle {
  font-size: 1rem;
  color: #e0d9cd;
  margin: 0 1rem 1rem;
}

.case-stats {
  display: flex;
  justify-content: space-around;
  padding: 0.8rem 1rem;
  background: #282f38;
  color: #e0d9cd;
  font-size: 0.9rem;
  border-top: 1px solid #444;
}

.case-stats span {
  display: block;
  text-align: center;
}

.other-cases img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.other-cases img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
}


/* Mobile Version */
@media (max-width: 768px) {
  .main-title {
    font-size: 1.8rem;
  }

  .sub-title {
    font-size: 1rem;
  }

  .case-title {
    font-size: 1.1rem;
  }

  .case-subtitle {
    font-size: 0.9rem;
  }

  .case-stats {
    font-size: 0.8rem;
  }

  .section-title {
    font-size: 2rem;
  }
}

.pricing-card {
  background: #232b35;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffe27a;
  margin-bottom: 1rem;
}

.pricing-card p {
  font-size: 1rem;
  line-height: 1.8;
  color: #d3d3d3;
}

.pricing-card .price {
  font-size: 1.4rem;
  font-weight: bold;
  color: #ff5c5c;
  margin-bottom: 1rem;
}

.pricing-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
}

.pricing-card .btn {
  background: linear-gradient(90deg, #7f3f98, #ff5c5c);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 6px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.pricing-card .btn:hover {
  background: linear-gradient(90deg, #ff5c5c, #7f3f98);
  transform: scale(1.1);
}

.pricing-card .btn:active {
  background: linear-gradient(90deg, #5e2d73, #c43d3d);
  transform: scale(0.95);
}

.pricing-card-ip-note {
  font-size: 60%;
  font-weight: normal; /* 取消繼承 h3 的 bold */
}


/* --- tk-operation.php - New Operation Package Cards --- */

/* 新的方案卡片樣式 */
.package-card-op {
    background: linear-gradient(145deg, #23272e, #1a1e24);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
    display: flex;
    flex-direction: column; /* 讓 header, body, footer 垂直排列 */
    border-top: 4px solid transparent; /* 預留給 hover 的邊框 */
    text-align: left; /* 卡片內容預設靠左 */
    padding: 1.5rem;
}

.package-card-op:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(54, 195, 244, 0.2);
    border-top-color: #36c3f4; /* 滑鼠移過時頂部出現強調色 */
}

/* 卡片頭部 */
.package-header-op {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1rem;
}
.package-title-op {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffe27a; /* 強調色 */
    margin-bottom: 0.25rem;
}
.package-audience-op {
    font-size: 0.85rem;
    color: #b0b8c3;
}

/* 卡片主體 (服務內容) */
.package-body-op {
    flex-grow: 1; /* 讓 body 填滿中間的空間，將 footer 推到底部 */
}
.package-features-op {
    list-style: none;
    padding: 0;
    margin: 0;
}
.package-features-op li {
    font-size: 0.95rem;
    color: #e0d9cd;
    margin-bottom: 0.8rem;
    padding-left: 1.8em;
    position: relative;
    line-height: 1.5;
}
.package-features-op li .fa-check { /* 使用 Font Awesome 的勾勾圖示 */
    position: absolute;
    left: 0;
    top: 4px;
    color: #36c3f4; /* 強調色 */
    font-size: 0.9em;
}

/* 卡片底部 (價格與按鈕) */
.package-footer-op {
    margin-top: 1.5rem; /* 與上方內容的間距 */
    text-align: center;
}
.package-price-op {
    font-size: 1.8rem;
    font-weight: 700;
    color: #e04c4c; /* 紅色強調價格 */
    margin-bottom: 0.25rem;
}
.package-price-note-op {
    font-size: 0.8rem;
    color: #a0a8b3;
}
.btn-package-buy-op {
    margin-top: 1rem;
    background: linear-gradient(90deg, #ffe27a 0%, #ffc107 100%);
    color: #181e24;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.7rem 2rem;
    border-radius: 25px;
    border: none;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 226, 122, 0.2);
    transition: all 0.3s ease;
    display: inline-block;
}
.btn-package-buy-op:hover {
    background: linear-gradient(90deg, #ffc107 0%, #ffe27a 100%);
    color: #181e24;
    box-shadow: 0 6px 20px rgba(255, 226, 122, 0.4);
    transform: translateY(-2px);
}


/* 讓圖片容器有相對定位，以便定位播放按鈕 */
.case-video-wrapper {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    
    /* 預設為 9:16 的直立長形，適合手機觀看 */
    aspect-ratio: 9 / 16; 
    
    /* 在手機上設定最大寬度，避免在稍大的螢幕上過度拉伸，並置中 */
    max-width: 350px; 
    margin: 0 auto; /* 水平置中 */

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    border-radius: 10px; /* 可選：加個圓角更像手機 App 風格 */
}

.case-video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 讓圖片填滿容器，多餘部分會被裁切 */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.case-video-wrapper:hover img {
    transform: scale(1.05); /* 滑鼠懸停時圖片放大效果 */
    opacity: 0.8;
}

/* 播放按鈕的樣式 */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    pointer-events: none; /* 讓點擊事件穿透到父層 */
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 用 CSS 畫出三角形播放圖示 */
.play-button-overlay::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid white;
    margin-left: 5px; /* 微調三角形位置使其置中 */
}

.case-video-wrapper:hover .play-button-overlay {
    background-color: rgba(255, 0, 0, 0.7); /* 滑鼠懸停時按鈕變色 */
}

/* 影片播放器樣式 */
.case-video-wrapper video {
    width: 100%;
    height: 100%;
}


.package-card-op {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    width: 100%; /* 確保卡片填滿其 Bootstrap 欄位寬度 */
}

/* 最重要的一步！ */
/* 讓中間的內容區塊 (包含特色列表) 自動伸展，填滿所有可用的多餘空間 */
/* 這會有效地將下方的 footer 推到卡片的最底部 */
.package-card-op .package-body-op {
    flex-grow: 1; 
}

/* (可選) 優化特色列表的排版，使其更一致 */
.package-card-op .package-features-op {
    padding-left: 20px; /* 統一左邊內距 */
    text-align: left;   /* 確保文字靠左對齊 */
}

.package-card-op .package-features-op li {
    margin-bottom: 12px; /* 統一列表項目的間距 */
}


/* 特色優勢區塊的樣式 */
.feature-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 合作流程時間軸的樣式 */
.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: #eeeeee;
    left: 50%;
    margin-left: -1.5px;
}

.timeline > li {
    margin-bottom: 20px;
    position: relative;
}

.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline > li > .timeline-panel {
    width: 46%;
    float: left;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.timeline > li > .timeline-badge {
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -25px;
    background-color: #999999;
    z-index: 100;
    border-radius: 50%;
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timeline-badge.primary { background-color: #007bff !important; }
.timeline-badge.warning { background-color: #ffc107 !important; }
.timeline-badge.danger { background-color: #dc3545 !important; }
.timeline-badge.success { background-color: #28a745 !important; }
.timeline-badge.info { background-color: #17a2b8 !important; }

.timeline-title {
    margin-top: 0;
    color: inherit;
}

/* 響應式調整 for 時間軸 */
@media (max-width: 767px) {
    .timeline:before {
        left: 40px;
    }
    .timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        float: right;
    }
    .timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px;
    }
}

/* ---------------------------------------------------- */
/* 2. 英雄區塊 (Hero Section) - 加入背景圖與動畫      */
/* ---------------------------------------------------- */
.hero-section-dark {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* 產生視差滾動效果 */
    color: #fff;
}

/* 背景遮罩，確保文字清晰可讀 */
.hero-section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

/* 讓內容浮在遮罩之上 */
.hero-section-dark .container {
    position: relative;
    z-index: 2;
}

/* 主要操作按鈕的懸停動畫 */
.btn-gold {
    background-color: var(--accent-gold);
    color: #1a1a1a;
    border: none;
    border-radius: 50px;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    color: #000;
}


/* ---------------------------------------------------- */
/* 3. 優勢區塊 -> 改為圖片卡片式設計                  */
/* ---------------------------------------------------- */
.advantage-card {
    background: var(--dark-card);
    border-radius: 15px;
    overflow: hidden;
    text-align: left;
    border: 1px solid #333;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    height: 100%;
}

.advantage-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.advantage-card .card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.advantage-card:hover .card-image {
    transform: scale(1.08);
}

.advantage-card .card-content {
    padding: 25px;
}

.advantage-card .card-content h4 {
    color: var(--accent-gold);
    font-weight: 700;
    margin-bottom: 15px;
}

.advantage-card .card-content p {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.section-gap {
    padding: 100px 0;
}

:root {
    --dark-bg: #1a1a1a; /* 深邃的炭灰色背景 */
    --dark-card: #2a2a2a; /* 卡片/區塊的背景色 */
    --text-primary: #f0f0f0; /* 主要文字顏色，柔和的白色 */
    --text-secondary: #a0a0a0; /* 次要文字顏色，灰色 */
    --accent-gold: #DAA520; /* 香檳金/暗金色，作為亮點 */
    --accent-gold-hover: #F0C427; /* 金色懸停時的亮色 */
}