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

.main-title {
  /* tk-operation.css 中也有，若風格一致應移至 main.css */
  color: #ffe27a;
  font-size: 2.3rem; /* 或 2rem，請確認 */
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5rem; /* 或 1.5em，請確認 */
  text-shadow: 1px 1px 8px rgba(255, 226, 122, 0.6);
}

.sub-title {
  /* tk-operation.css 中也有，若風格一致應移至 main.css */
  font-size: 1.2rem;
  text-align: center;
  color: #d3d3d3; /* 或 #e0d9cd，請確認 */
  margin-bottom: 2rem; /* 或 0.6em，請確認 */
}

.section-title {
  /* tk-operation.css, tk-ad-service.css 等都有，強烈建議移至 main.css */
  font-size: 2rem; /* 或 1.5rem / 1.8rem / 2.2rem，您的 CSS 中有多個不同定義 */
  font-weight: bold;
  color: #ffe27a; /* 預設為黃色 */
  text-align: center;
  margin-bottom: 2rem; /* 或 1.5rem / 1.2em，請確認 */
  text-shadow: 1px 1px 8px rgba(255, 226, 122, 0.6); /* 預設陰影 */
}

/* Case Study */
.case-study-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
}

.phone-mockup {
  max-width: 300px;
  margin-bottom: 1.5rem;
}

.case-study-content {
  max-width: 500px;
  text-align: left;
  padding-left: 2rem;
}

.case-study-content h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffe27a;
}

.case-study-content h4 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ff5c5c;
  margin-bottom: 1rem;
}

.case-study-content p {
  font-size: 1rem;
  line-height: 1.5;
  color: #d3d3d3;
  margin-bottom: 1rem;
}

.case-study-content .icon-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.case-study-content .icon-row img {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem;
}

.case-study-content .icon-row span {
  font-size: 1rem;
  color: #e0d9cd;
}

/* Services */
.service-card {
  background-color: #232b35;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  color: #e0d9cd;
}

.service-card h4 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffe27a;
}

.service-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #d3d3d3;
}

.service-card .btn {
  font-size: 0.9rem;
  background-color: #7f3f98;
  border: none;
  color: #fff;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  border-radius: 6px;
}

.service-card .btn:hover {
  background-color: #5e2d73;
}

/* Q&A Section */
.qna-section {
  background-color: #232b35;
  padding: 2rem;
  border-radius: 12px;
  margin-top: 3rem;
}

.qna-title {
  font-size: 2rem;
  font-weight: bold;
  color: #ffe27a;
  text-align: center;
  margin-bottom: 2rem;
}

.qna-card {
  border: 1px solid #7f3f98;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #e0d9cd;
}

.qna-card h5 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffe27a;
  margin-bottom: 1rem;
}

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

/* Media Query */
@media (max-width: 768px) {
  .case-study-container {
    flex-direction: column;
    text-align: center;
  }

  .case-study-content {
    padding-left: 0;
    text-align: center;
  }
}

.faq-section-dark {
  background: linear-gradient(120deg, #181e24 85%, #23272e 100%);
}

.faq-accordion-dark .faq-card-dark {
  background: #23272e;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  border: none;
  margin-bottom: 1rem;
}

.faq-accordion-dark .card-header {
  background: #1a1e24;
  border-bottom: 1px solid #32363c;
  border-radius: 12px 12px 0 0;
  padding: 0;
}

.faq-btn-dark {
  color: #36c3f4;
  font-size: 1.08rem;
  font-weight: 600;
  text-decoration: none;
  background: none;
  width: 100%;
  text-align: left;
  padding: 1.1rem 1rem;
  box-shadow: none;
  outline: none;
  border-radius: 12px 12px 0 0;
  transition: color 0.2s, background 0.2s;
}

.faq-btn-dark:focus,
.faq-btn-dark:hover {
  color: #ffe27a;
  background: #23272e;
  text-decoration: none;
}

.faq-accordion-dark .card-body {
  color: #e0d9cd;
  background: #23272e;
  font-size: 1rem;
  border-radius: 0 0 12px 12px;
  padding: 1.2rem 1.4rem;
}

@media (max-width: 768px) {
  .faq-section-dark {
    padding: 2rem 0 1rem 0;
  }

  .faq-btn-dark {
    font-size: 0.95rem;
    padding: 1rem 0.65rem;
  }

  .faq-accordion-dark .card-body {
    font-size: 0.95rem;
    padding: 1rem 0.65rem;
  }
}

.pricing-section-dark {
  background: linear-gradient(120deg, #181e24 85%, #23272e 100%);
}

.pricing-card-dark {
  background: linear-gradient(145deg, #22252b 60%, #181e24 100%);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  padding: 2.2rem 1.2rem 2rem 1.2rem;
  color: #e0d9cd;
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pricing-card-dark:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 36px rgba(54, 195, 244, 0.22);
}

.pricing-title-dark {
  font-size: 1.28rem;
  font-weight: bold;
  color: #36c3f4;
  margin-bottom: 0.6rem;
  letter-spacing: 0.03em;
}

.pricing-amount-dark {
  font-size: 2.1rem;
  font-weight: bold;
  color: #ffe27a;
  margin-bottom: 0.7rem;
  text-shadow: 1px 1px 10px rgba(255, 226, 122, 0.09);
}

.pricing-desc-dark {
  color: #b5b5b5;
  font-size: 1.05rem;
}

@media (max-width: 767.98px) {
  .pricing-section-dark {
    padding: 2.2rem 0 1.3rem 0;
  }

  .pricing-card-dark {
    min-height: 0;
    padding: 1.2rem 0.7rem 1.3rem 0.7rem;
  }

  .pricing-title-dark {
    font-size: 1.07rem;
  }

  .pricing-amount-dark {
    font-size: 1.3rem;
  }

  .pricing-desc-dark {
    font-size: 0.96rem;
  }
}

.workflow-section-dark {
  background: linear-gradient(120deg, #181e24 85%, #23272e 100%);
}

.workflow-step-card {
  background: linear-gradient(145deg, #23272e 60%, #181e24 100%);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  padding: 2.2rem 1.2rem 2rem 1.2rem;
  color: #e0d9cd;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 220px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.workflow-step-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 36px rgba(54, 195, 244, 0.22);
}

.workflow-step-num {
  background: linear-gradient(90deg, #36c3f4 70%, #ffe27a 100%);
  color: #181e24;
  font-size: 2.2rem;
  font-weight: 800;
  width: 54px;
  height: 54px;
  line-height: 54px;
  border-radius: 50%;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(54, 195, 244, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-step-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: #36c3f4;
  margin-bottom: 0.7rem;
}

.workflow-step-desc {
  font-size: 1rem;
  color: #e0d9cd;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .workflow-section-dark {
    padding: 2.2rem 0 1.3rem 0;
  }

  .workflow-step-card {
    min-height: 0;
    padding: 1.2rem 0.7rem 1.3rem 0.7rem;
  }

  .workflow-step-num {
    font-size: 1.4rem;
    width: 38px;
    height: 38px;
    line-height: 38px;
  }

  .workflow-step-title {
    font-size: 1.05rem;
  }

  .workflow-step-desc {
    font-size: 0.96rem;
  }
}

.features-section-dark {
  background: linear-gradient(120deg, #181e24 85%, #23272e 100%);
}

.feature-card-dark {
  background: linear-gradient(145deg, #23272e 60%, #181e24 100%);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.46);
  padding: 2rem 1.1rem 1.5rem 1.1rem;
  color: #e0d9cd;
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.feature-card-dark:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 32px rgba(54, 195, 244, 0.17);
}

.feature-icon-dark {
  font-size: 2.3rem;
  color: #36c3f4;
  text-shadow: 0 2px 12px rgba(54, 195, 244, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  margin: 0 auto 0.5rem auto;
}

.feature-title-dark {
  font-size: 1.2rem;
  font-weight: bold;
  color: #36c3f4;
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
}

.feature-desc-dark {
  color: #e0d9cd;
  font-size: 1.02rem;
}

@media (max-width: 767.98px) {
  .features-section-dark {
    padding: 2rem 0 1.2rem 0;
  }

  .feature-card-dark {
    min-height: 0;
    padding: 1.4rem 0.6rem 1rem 0.6rem;
  }

  .feature-title-dark {
    font-size: 1.03rem;
  }

  .feature-desc-dark {
    font-size: 0.95rem;
  }

  .feature-icon-dark {
    font-size: 1.5rem;
    height: 32px;
    width: 32px;
  }
}

.hero-section-dark {
  background: linear-gradient(120deg, #181e24 85%, #23272e 100%);
  color: #fff;
  min-height: 50vh;
  position: relative;
  overflow: hidden;
}

.hero-title-dark {
  color: #ffe27a;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 12px rgba(255, 226, 122, 0.13);
}

.hero-lead-dark {
  color: #36c3f4;
  font-size: 1.4rem;
  font-weight: 500;
  text-shadow: 1px 1px 8px rgba(54, 195, 244, 0.1);
}

@media (max-width: 767.98px) {
  .hero-title-dark {
    font-size: 2rem;
  }

  .hero-lead-dark {
    font-size: 1.06rem;
  }

  .hero-btn-dark {
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
  }

  .hero-section-dark {
    padding: 2.2rem 0 1.4rem 0;
    min-height: 36vh;
  }
}

.contact-cta-title {
  /* 用於最後 CTA 的標題 */
  color: #fff;
  margin-bottom: 1.5rem; /* 調整自 mb-4 */
  font-size: 1.8rem; /* 預設一個大小 */
  font-weight: bold;
}
@media (max-width: 768px) {
  .contact-cta-title {
    font-size: 1.5rem; /* 手機版調整 */
  }
}

/* --- tk-capcut.php Hero Button Enhancement --- */

/* 定義上下浮動動畫 */
@keyframes heroButtonFloat {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px); /* 浮動高度，可調整 */
  }
  100% {
    transform: translateY(0px);
  }
}

.hero-btn-dark {
  display: inline-block; /* 確保 transform 和偽元素定位生效 */
  position: relative; /* 為了偽元素的絕對定位 */
  overflow: hidden; /* 確保偽元素超出部分被裁剪，以符合圓角 */
  z-index: 1; /* 確保按鈕文字等內容在偽元素之上 */

  background: linear-gradient(90deg, #36c3f4 30%, #ffe27a 100%); /* 初始漸層 */
  color: #181e24 !important;
  border: none;
  border-radius: 32px;
  font-weight: bold;
  font-size: 1.18rem;
  box-shadow: 0 4px 16px rgba(54, 195, 244, 0.15);
  padding: 0.8rem 2.5rem;
  text-decoration: none;

  /* 過渡效果：不再包含 background，因為漸層變化由偽元素處理 */
  transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease-out;
  animation: heroButtonFloat 2.8s ease-in-out infinite;
  will-change: transform, box-shadow; /* 提示瀏覽器優化 */
}
.hero-btn-dark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #ffe27a 40%, #36c3f4 100%); /* 滑鼠移過時的目標漸層 */
    opacity: 0; /* 初始狀態：完全透明 */
    transition: opacity 0.3s ease-in-out; /* 設定透明度的過渡效果 */
    z-index: -1; /* 將偽元素放在按鈕文字內容的後面 */
    border-radius: inherit; /* 繼承按鈕的圓角 */
}

.hero-btn-dark:hover,
.hero-btn-dark:focus {
    color: #181e24 !important; /* 文字顏色保持不變 */
    box-shadow: 0 8px 28px rgba(54, 195, 244, 0.28); /* 調整後的 hover 陰影 */
    transform: translateY(-3px) scale(1.03);
    animation-play-state: paused;
    text-decoration: none;
    outline: none;
}

.hero-btn-dark:hover::before,
.hero-btn-dark:focus::before {
    opacity: 1; /* 滑鼠移過時，偽元素的目標漸層平滑顯現 */
}
/* --- LINE CTA 按鈕質感與動畫 --- */

/* 動畫定義 */
@keyframes floatAnimation {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(54, 195, 244, 0.15),
      0 4px 8px rgba(0, 0, 0, 0.3); /* 預設陰影 */
  }
  50% {
    transform: translateY(-6px); /* 向上浮動的距離 */
    box-shadow: 0 12px 28px rgba(54, 195, 244, 0.25),
      0 6px 12px rgba(0, 0, 0, 0.4); /* 浮動時陰影加深 */
  }
}

.btn-line-cta-animated {
  display: inline-flex; /* 讓圖示和文字能良好對齊 */
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    #28a745 0%,
    #218838 100%
  ); /* LINE 的經典綠色漸層，您可以調整 */
  /* 或者使用您主題的強調色，例如： */
  /* background: linear-gradient(135deg, #36c3f4 0%, #298fdd 100%); */ /* 藍色系 */
  /* background: linear-gradient(135deg, #ffe27a 0%, #ffc107 100%); */ /* 黃色系，文字顏色需改深色 */
  color: #fff !important; /* 確保文字顏色為白色，並覆蓋 Bootstrap 的 .btn-success 原始定義 */
  font-weight: bold;
  font-size: 1.15rem; /* 調整字體大小 (btn-lg 預設是 1.25rem) */
  padding: 0.8rem 2rem; /* 調整按鈕內距 */
  border-radius: 50px; /* 更圓滑的邊角 */
  border: none; /* 移除預設邊框 */
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(54, 195, 244, 0.15), 0 4px 8px rgba(0, 0, 0, 0.3); /* 更精緻的陰影 */
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: floatAnimation 2.5s ease-in-out infinite; /* 套用浮動動畫 */
  will-change: transform; /* 提示瀏覽器此元素會有 transform 動畫 */
}

.btn-line-cta-animated:hover,
.btn-line-cta-animated:focus {
  background: linear-gradient(
    135deg,
    #218838 0%,
    #1e7e34 100%
  ); /* 滑鼠移過時的漸層變化 */
  /* 對應您選擇的基礎色系調整 hover 顏色 */
  /* background: linear-gradient(135deg, #298fdd 0%, #1d72b8 100%); */ /* 藍色系 hover */
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-3px); /* 滑鼠移過時輕微上提，與動畫互動 */
  animation-play-state: paused; /* 滑鼠移過時暫停動畫，避免衝突 */
}

.btn-line-cta-animated:active {
  background: linear-gradient(
    135deg,
    #1e7e34 0%,
    #1c7430 100%
  ); /* 按下時的漸層變化 */
  /* 對應您選擇的基礎色系調整 active 顏色 */
  transform: translateY(0px); /* 按下時回到原位或微下沉 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2); /* 按下時的內陰影 */
  animation-play-state: paused;
}

.btn-line-cta-animated i {
  /* 圖示樣式 */
  margin-right: 0.6em;
  font-size: 1.2em; /* 讓圖示比文字稍大一點 */
}


/* ================================================================== */
/* 【代剪輯頁面】暗色系質感風格 v2.0 CSS              */
/* ================================================================== */

/* 1. 全局色彩與基礎設定 (可與前頁共用) */
:root {
    --dark-bg: #1a1a1a;
    --dark-card: #2a2a2a;
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --accent-gold: #DAA520;
    --accent-gold-hover: #F0C427;
}

/* --- 英雄區塊與按鈕 (沿用) --- */
.hero-section-dark { position: relative; background-size: cover; background-position: 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; }

/* --- 服務特色卡片 (沿用 advantage-card) --- */
.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; }

/* --- 3. 全新工作流程卡片 --- */
.workflow-card-v2 {
    position: relative;
    height: 350px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 內容置底 */
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid #444;
}
.workflow-card-v2::before { /* 背景遮罩 */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.1) 100%);
    transition: all 0.4s ease;
}
.workflow-card-v2:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
.workflow-card-v2:hover::before {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0) 100%);
}
.workflow-card-content {
    position: relative;
    z-index: 2;
    color: #fff;
}
.workflow-step-num-v2 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-gold);
    line-height: 1;
}
.workflow-step-title-v2 {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
    margin-top: 5px;
}
.workflow-step-desc-v2 {
    color: var(--text-primary);
    opacity: 0.8;
}

/* --- 4. FAQ & CTA 樣式統一 --- */
.faq-section-dark { background: var(--dark-bg); }
.faq-card-dark { background: var(--dark-card); border: 1px solid #333; margin-bottom: 10px; border-radius: 8px !important; }
.faq-card-dark .card-header { background: transparent; border-bottom: 1px solid #444; }
.faq-btn-dark { color: var(--text-primary); text-decoration: none; width: 100%; text-align: left; }
.faq-btn-dark:hover { color: var(--accent-gold); }
.faq-card-dark .card-body { color: var(--text-primary); }

.contact-cta-title { color: #fff; font-weight: 700; }
.btn-line-cta-animated { 
    background: #00B900; /* LINE Green */
    color: #fff;
    border-radius: 50px;
    padding: 12px 30px;
    font-weight: 700;
    transition: all 0.3s ease;
}
.btn-line-cta-animated:hover {
    background: #00d400;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 185, 0, 0.2);
    color: #fff;
}