:root{
  --c8-bg:#0b0f19;
  --c8-primary:#15987e; /* 新主色：深青綠 */
  --c8-primary-2:#1fb89d; /* 漸層同色系 */
  --c8-accent:#20c4b8; /* 類色強調 */
  --c8-text:#e6f0ff;
  --c8-muted:#98a2b3;
  --c8-card:#111725;
  --c8-border:rgba(255,255,255,.08);
  --c8-pink:#25c7a7; /* 相關點綴轉為青綠系 */
  --c8-lime:#7dd3c7; /* 改為柔和薄荷系 */
}

/* 禁用手機雙擊縮放 */
* {
  touch-action: manipulation;
}

/* 禁用特定元素的雙擊縮放 */
img, 
.c8-portfolio-card,
.c8-work,
.c8-review,
.testimonial-card,
.c8-latest-card {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 增加前台容器寬度，減少左右空白 */
.container {
  max-width: 1400px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1600px !important;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1800px !important;
  }
}

/* 統計數據區塊樣式 */
.c8-stats-container {
  position: relative;
  padding: 60px 0;
  max-width: 1000px;
  margin: 0 auto;
}

.c8-stat-card {
  background: linear-gradient(135deg, rgba(21, 152, 126, 0.1) 0%, rgba(32, 196, 184, 0.05) 100%);
  border: 1px solid rgba(21, 152, 126, 0.2);
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.c8-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(21, 152, 126, 0.05) 0%, rgba(32, 196, 184, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.c8-stat-card:hover::before {
  opacity: 1;
}

.c8-stat-card:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: rgba(21, 152, 126, 0.4);
  box-shadow: 0 20px 40px rgba(21, 152, 126, 0.15), 0 0 0 1px rgba(21, 152, 126, 0.1);
}

.c8-stat-icon {
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
  color: var(--c8-primary);
  transition: all 0.4s ease;
}

.c8-stat-card:hover .c8-stat-icon {
  transform: scale(1.1) rotate(5deg);
  color: var(--c8-accent);
}

.c8-stat-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.c8-stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--c8-text);
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--c8-text) 0%, var(--c8-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.4s ease;
}

.c8-stat-card:hover .c8-stat-number {
  transform: scale(1.05);
  background: linear-gradient(135deg, var(--c8-primary) 0%, var(--c8-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.c8-stat-card:hover .c8-stat-number .c8-stat-suffix {
  color: var(--c8-accent) !important;
  transform: scale(1.1);
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  background: none !important;
}

.c8-stat-label {
  font-size: 1.1rem;
  color: var(--c8-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.4s ease;
}

.c8-stat-card:hover .c8-stat-label {
  color: var(--c8-text);
  transform: translateY(-2px);
}

.c8-stat-suffix {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c8-primary);
  margin-left: 4px;
  transition: all 0.4s ease;
  display: inline-block;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  background: none;
}

.c8-stat-card:hover .c8-stat-suffix {
  color: var(--c8-accent);
  transform: scale(1.1);
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  background: none;
}

.c8-stat-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(21, 152, 126, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
  z-index: 0;
}

.c8-stat-card:hover .c8-stat-glow {
  transform: translate(-50%, -50%) scale(1);
}

/* 響應式設計 */
@media (max-width: 768px) {
  .c8-stat-card {
    padding: 30px 20px;
    min-height: 220px;
  }
  
  .c8-stat-number {
    font-size: 2.5rem;
  }
  
  .c8-stat-label {
    font-size: 1rem;
  }
  
  .c8-stat-suffix {
    font-size: 1.4rem;
  }
}

@media (max-width: 576px) {
  .c8-stats-container {
    padding: 40px 0;
  }
  
  .c8-stat-card {
    padding: 25px 15px;
    min-height: 200px;
  }
  
  .c8-stat-number {
    font-size: 2.2rem;
  }
  
  .c8-stat-icon {
    margin-bottom: 16px;
  }
  
  .c8-stat-icon svg {
    width: 36px;
    height: 36px;
  }
}

/* 我們的承諾 - 特色卡片設計 */
.c8-promise-card {
  background: linear-gradient(135deg, var(--c8-card) 0%, rgba(17, 23, 37, 0.8) 100%);
  border: 1px solid var(--c8-border);
  border-radius: 16px;
  padding: 1.25rem 1.25rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 水平卡片：左圖右文 */
.c8-promise-card.c8-promise-horizontal{
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 手機版：垂直排列，icon在上方，文字在下方 */
@media (max-width: 768px) {
  .c8-promise-card.c8-promise-horizontal {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .c8-promise-icon {
    margin-bottom: 8px;
  }
  
  .c8-promise-body {
    min-height: auto;
  }
  
  /* Our Promise 區塊手機版改為一個一列 - 只針對首頁 */
  .c8-promise-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  
  /* 直接針對 Our Promise 區塊的列結構 */
  .row .col-6.col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* 針對包含 c8-promise-card 的列 */
  .col-6 .c8-promise-card {
    width: 100% !important;
  }
}

.c8-promise-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c8-primary), var(--c8-primary-2), var(--c8-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.c8-promise-card:hover::before {
  transform: scaleX(1);
}

.c8-promise-card:hover {
  transform: translateY(-8px);
  border-color: var(--c8-primary);
  box-shadow: 0 20px 40px rgba(21, 152, 126, 0.15), 0 0 0 1px rgba(21, 152, 126, 0.1);
}

.c8-promise-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  position: relative;
}

.c8-promise-icon-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.c8-promise-card:hover .c8-promise-icon-img {
  transform: scale(1.1);
}

.c8-promise-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c8-text);
  margin-bottom: .25rem;
  position: relative;
  z-index: 2;
}

.c8-promise-desc {
  color: var(--c8-muted);
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.c8-promise-body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 60px;
}

/* 移除色塊樣式，改用圖片圖標 */

/* 微動畫效果 */
@keyframes promiseFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.c8-promise-card:hover .c8-promise-icon {
  animation: promiseFloat 2s ease-in-out infinite;
}

/* 移除標題圖標樣式 */
html,body{height:100%; overflow-x:hidden;}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:#0b0f19; /* 基底純色避免段落交界色帶 */
  color: var(--c8-text);
}

/* 作品詳情：聚焦中欄，左右加寬邊距（桌面） */
.c8-detail-wrap{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1400px){
  .c8-detail-wrap{ max-width: 1200px; }
}
/* 全局固定背景層，避免各區塊交界出現色塊線條 */
body::before{content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 35% at 75% 8%, rgba(19,194,194,.14), rgba(0,0,0,0) 60%),
    radial-gradient(35% 40% at 10% 85%, rgba(255,77,79,.12), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  filter: saturate(105%);
}
.c8-navbar{background: rgba(11,15,25,.55); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06); transition:background .25s ease}
.c8-navbar.scrolled{background: rgba(11,15,25,.9)}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--c8-primary),var(--c8-primary-2));color:#fff;font-weight:800;letter-spacing:.5px}
.btn-c8-cta{background: linear-gradient(135deg,var(--c8-primary),var(--c8-primary-2)); color:#fff; border:none; box-shadow:0 8px 24px rgba(21,152,126,.35)}
.btn-c8-cta:hover{filter:brightness(1.05); color:#fff}
.c8-main{padding-top:72px}

/* Hero */
.c8-hero{position:relative;min-height:76vh;display:grid;place-items:center;overflow:hidden;border-radius:24px}
.c8-hero .swiper{position:absolute;inset:0;z-index:2}
.c8-hero .swiper-slide{background-position:center;background-size:cover}
.c8-hero .slide-overlay{position:absolute;inset:0;background:radial-gradient(70% 60% at 65% 20%, rgba(19,194,194,.25), rgba(0,0,0,0)), linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.6))}
.c8-hero-swiper .slide-overlay{pointer-events:none}
.c8-hero .content{position:relative;z-index:4;text-align:center;pointer-events:none}
.c8-hero .content .btn{pointer-events:auto}
.c8-hero-swiper .swiper-pagination-bullet{background:#1fb89d !important;opacity:.35}
.c8-hero-swiper .swiper-pagination-bullet-active{background:#1fb89d !important;opacity:1}
.c8-hero-swiper .swiper-button-prev:after,.c8-hero-swiper .swiper-button-next:after{color:#1fb89d}
.c8-hero-swiper .swiper-button-prev:hover:after,.c8-hero-swiper .swiper-button-next:hover:after{color:#20c4b8}
/* 擴大左右箭頭可點擊區域（首頁） */
.c8-hero-swiper .swiper-button-prev,.c8-hero-swiper .swiper-button-next{width:64px;height:64px;border-radius:0;background:transparent;backdrop-filter:none;display:flex;align-items:center;justify-content:center;z-index:50;pointer-events:auto}
.c8-hero-swiper .swiper-button-prev{left:8px}
.c8-hero-swiper .swiper-button-next{right:8px}
.c8-hero-swiper .swiper-button-prev:hover,.c8-hero-swiper .swiper-button-next:hover{background:transparent}
.c8-hero h1{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:.5px;font-size:clamp(32px,6vw,64px); text-shadow:0 8px 32px rgba(0,0,0,.45)}
.c8-hero p{color:#dbeafe;font-size:clamp(14px,2.2vw,18px)}
.c8-hero .mock{position:absolute;inset:auto 0 -60px 0;opacity:.2;filter:contrast(1.1)}

/* Quick split cards */
.c8-split .c8-card{background:rgba(17,23,37,.75);backdrop-filter:blur(6px); border:1px solid var(--c8-border); position:relative}
.c8-split .c8-card::after{content:"";position:absolute;inset:auto 0 -1px 0;height:2px;background:linear-gradient(90deg,var(--c8-primary),var(--c8-accent));opacity:.6;border-radius:2px}
.c8-split .c8-card h5{letter-spacing:.2px}

/* Cards */
.c8-card{background:var(--c8-card);border:1px solid rgba(255,255,255,.06);border-radius:16px 16px 0 0;padding:20px;transition:transform .25s ease, box-shadow .25s ease}
.c8-card:hover{transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.35)}
.c8-chip{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;color:#cbd5e1}

/* Footer */
.c8-footer{background:#0a0f19}
.footer-link{color: #cbd5e1; text-decoration:none}
.footer-link:hover{color:#fff}

/* Gallery */
.c8-masonry img{border-radius:12px}
.c8-portfolio-card{position:relative;background:#0f1628;border:1px solid var(--c8-border);border-radius:16px;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease;aspect-ratio:1000/667}
.c8-portfolio-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.35)}
.c8-portfolio-thumb{width:100%;height:100%;object-fit:cover;display:block}
.c8-portfolio-meta{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 70%);color:#e6f0ff;text-align:center}
.c8-portfolio-title{font-weight:800;letter-spacing:.2px;margin:0}
.c8-portfolio-chip{display:inline-block;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;color:#cbd5e1;border:1px solid var(--c8-border)}
.c8-portfolio-chip-top{position:absolute;top:12px;right:12px;z-index:2}
.c8-portfolio-card .hover-zoom{transition:transform .6s ease, filter .6s ease}
.c8-portfolio-card:hover .hover-zoom{transform:scale(1.06);filter:saturate(110%)}
.c8-detail-swiper .swiper-slide{display:grid;place-items:center;background:transparent}
.c8-detail-swiper img{background:transparent}
.c8-detail-swiper .swiper-pagination-bullet{background:#1fb89d !important;opacity:.3}
.c8-detail-swiper .swiper-pagination-bullet-active{background:#1fb89d !important;opacity:1}
.c8-detail-swiper .swiper-button-prev:after,.c8-detail-swiper .swiper-button-next:after{color:#1fb89d !important}
.c8-detail-swiper .swiper-button-prev:hover:after,.c8-detail-swiper .swiper-button-next:hover:after{color:#20c4b8 !important}
/* 擴大左右箭頭可點擊區域（詳情） */
.c8-detail-swiper .swiper-button-prev,.c8-detail-swiper .swiper-button-next{width:56px;height:56px;border-radius:0;background:transparent;backdrop-filter:none;display:flex;align-items:center;justify-content:center;z-index:50;pointer-events:auto}
.c8-detail-swiper .swiper-button-prev{left:8px}
.c8-detail-swiper .swiper-button-next{right:8px}
.c8-detail-swiper .swiper-button-prev:hover,.c8-detail-swiper .swiper-button-next:hover{background:transparent}

/* Featured works grid */
.c8-work{position:relative;overflow:hidden;border-radius:14px;background:#0f1628;border:1px solid var(--c8-border);aspect-ratio:1000/667}
.c8-work img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease, filter .6s ease}
.c8-work .shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.6));opacity:.9;transition:opacity .35s ease}
.c8-work .caption{position:absolute;left:12px;right:12px;bottom:10px;color:#e6f0ff;text-align:center}
.c8-chip-top{position:absolute;top:12px;right:12px;z-index:2}
.c8-work .title{font-weight:700;letter-spacing:.2px;font-size:1.1rem}
.c8-work:hover img{transform:scale(1.05);filter:saturate(110%)}
.c8-work:hover .shade{opacity:1}

/* Products/services cards */
.c8-service{position:relative;background:rgba(17,23,37,.8);border:1px solid var(--c8-border);border-radius:18px;padding:20px;display:flex;gap:16px;align-items:flex-start;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.c8-service:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.35);border-color:rgba(255,255,255,.16)}
.c8-service .ico{flex:0 0 56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--c8-primary),var(--c8-primary-2));display:grid;place-items:center;color:#fff;font-size:28px;box-shadow:0 8px 24px rgba(21,152,126,.35)}
.c8-service .body{flex:1}
.c8-service h3{margin:0 0 6px 0;font-weight:800}
.c8-service p{margin:0;color:#cbd5e1}
.c8-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.c8-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;color:#cbd5e1;border:1px solid var(--c8-border)}

.c8-cta-strip{background:linear-gradient(135deg,var(--c8-primary),var(--c8-primary-2));border-radius:18px;padding:20px;border:1px solid rgba(255,255,255,.12)}
.c8-cta-strip .title{font-weight:800}
.c8-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:14px;background:#0b0f19;color:#ffffff;text-decoration:none;border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 28px rgba(0,0,0,.35), 0 0 0 3px rgba(32,196,184,.18) inset;font-weight:800;letter-spacing:.3px;transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;position:relative;min-width:164px}
.c8-cta-btn svg{width:18px;height:18px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));position:absolute;right:14px}
.c8-cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 0 4px rgba(32,196,184,.26) inset;filter:brightness(1.02)}

/* Carousel */
.carousel .c8-card{border-color:var(--c8-border)}
.carousel-control-prev-icon, .carousel-control-next-icon{filter: drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.carousel .carousel-item{padding:12px}

/* Testimonial */
.c8-star{color:#ffd666}

/* Homepage testimonials grid (distinct style) */
.c8-review-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);justify-content:center}
@media (max-width: 991.98px){.c8-review-grid{grid-template-columns:repeat(2,1fr);justify-content:center}}
.c8-review{position:relative;background:rgba(255,255,255,.03);border:1px solid var(--c8-border);border-radius:16px;padding:14px;text-align:left;transition:transform .25s ease, box-shadow .25s ease}
.c8-review:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.28)}
.c8-review .ava{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
.c8-review .default-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg, var(--c8-primary), var(--c8-accent));display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.2);transition:all 0.3s ease}
.c8-review .default-avatar svg{color:rgba(255,255,255,0.8);transition:all 0.3s ease}
.c8-review:hover .default-avatar{transform:scale(1.05)}
.c8-review:hover .default-avatar svg{color:rgba(255,255,255,1)}
.c8-review .name{font-weight:700}
.c8-review .quote{font-size:12px;color:#cbd5e1;margin-top:8px;line-height:1.5}
.c8-review .stars{font-size:12px;color:#ffd666}

/* Latest works horizontal rail */
.c8-latest{position:relative}
.c8-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.c8-rail{display:flex;overflow-x:auto;gap:14px;padding:6px 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;position:relative;z-index:2}
.c8-rail::-webkit-scrollbar{height:8px}
.c8-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.c8-rail-empty{flex:1 0 100%;display:flex;justify-content:center;align-items:center;text-align:center;min-height:220px}
.c8-latest-card{flex:0 0 clamp(240px, 20vw, 320px);scroll-snap-align:start;background:#0f1628;border:1px solid var(--c8-border);border-radius:16px;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease;display:flex;flex-direction:column}
.c8-latest-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,.35)}
.c8-latest-image{position:relative;flex:1;overflow:hidden;height:200px;background:linear-gradient(135deg, #1a1f2e 0%, #0f1628 100%);display:flex;align-items:center;justify-content:center}
.c8-latest-image::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.05) 50%, transparent 75%);animation:shimmer 2s infinite}
.c8-latest-card img{width:100%;height:200px;object-fit:cover;transition:transform .3s ease;display:block;position:relative;z-index:1}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.c8-latest-card:hover .c8-latest-card img{transform:scale(1.05)}
.c8-latest-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);display:flex;align-items:flex-start;justify-content:flex-end;padding:12px;opacity:0;transition:opacity .3s ease;z-index:2}
.c8-latest-card:hover .c8-latest-overlay{opacity:1}
.c8-latest-badge{background:var(--c8-primary);color:white;padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 8px rgba(21,152,126,0.3);position:relative;z-index:3}
.c8-latest-content{padding:20px 18px;background:linear-gradient(180deg, rgba(15,22,40,0.9) 0%, #0f1628 100%);border-top:1px solid rgba(255,255,255,0.08);position:relative}
.c8-latest-content::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg, transparent 0%, var(--c8-primary) 50%, transparent 100%);opacity:0.6}
.c8-latest-title{font-size:1rem;font-weight:700;line-height:1.4;margin:0;color:white;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:0.3px}
.c8-latest .fade-left,.c8-latest .fade-right{position:absolute;top:0;bottom:0;width:60px;pointer-events:none;z-index:1}
.c8-latest .fade-left{left:0;background:linear-gradient(90deg, #0b0f19, rgba(11,15,25,0))}
.c8-latest .fade-right{right:0;background:linear-gradient(270deg, #0b0f19, rgba(11,15,25,0))}

/* Reviews section background */
.c8-reviews{position:relative;border:1px solid var(--c8-border);border-radius:24px;padding:32px;background:linear-gradient(180deg,#0c1224 0%, #0b0f19 100%);overflow:hidden}
.c8-reviews::before{content:"";position:absolute;inset:-20% -10% -10% -10%;background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);background-size:18px 18px;transform:rotate(-8deg);opacity:.35;pointer-events:none}
.c8-reviews::after{content:"";position:absolute;inset:auto -20% -30% auto;width:60%;height:120%;background:radial-gradient(40% 35% at 80% 20%, rgba(32,196,184,.18), rgba(0,0,0,0)), radial-gradient(35% 40% at 10% 85%, rgba(21,152,126,.18), rgba(0,0,0,0));filter:saturate(110%);pointer-events:none}
.c8-reviews .section-title{margin-top:4px}
.c8-reviews.c8-flat-top{border-top-left-radius:0;border-top-right-radius:0}

/* 讓評論區塊在電腦版滿版顯示 */
@media (min-width: 1200px) {
  .c8-reviews .container {
    max-width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* FAQ accordion - dark themed */
.c8-accordion .accordion-item{background:rgba(255,255,255,.03);border:1px solid var(--c8-border);border-radius:14px;overflow:hidden;margin-bottom:10px}
.c8-accordion .accordion-button{background:transparent;color:#e6f0ff;box-shadow:none;font-weight:700}
.c8-accordion .accordion-button:not(.collapsed){color:#e6f0ff;background:linear-gradient(135deg, rgba(21,152,126,.15), rgba(32,196,184,.08));border-bottom:1px solid var(--c8-border)}
.c8-accordion .accordion-button::after{filter:invert(1) grayscale(1)}
.c8-accordion .accordion-body{color:#cbd5e1}

/* Testimonials wide card (one per row) */
.c8-review-wide{position:relative;background:rgba(255,255,255,.03);border:1px solid var(--c8-border);border-radius:18px;padding:18px 20px;margin-bottom:14px;display:flex;gap:16px;align-items:flex-start;overflow:hidden}
.c8-review-wide::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:6px;border-radius:6px;background:linear-gradient(180deg,var(--c8-primary),var(--c8-accent))}
.c8-review-wide .ava{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
.c8-review-wide .head{display:flex;align-items:center;gap:8px}
.c8-review-wide .name{font-weight:800}
.c8-review-wide .stars{color:#ffd666}
.c8-review-wide .quote{margin-top:6px;color:#cbd5e1;line-height:1.7}
.c8-review-wide .quote::before{content:"\201C";font-size:36px;line-height:0;color:rgba(255,255,255,.25);margin-right:6px;vertical-align:-8px}

/* Testimonials Page Layout */
.testimonials-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .testimonials-page {
    padding: 0 20px;
  }
}

/* Modern Testimonials Design */
.testimonial-card {
  background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.testimonial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c8-primary), var(--c8-accent), var(--c8-primary));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
  border-color: rgba(21,152,126,.3);
}

.testimonial-card:hover::before {
  opacity: 1;
}

.testimonial-content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.testimonial-avatar {
  position: relative;
  flex-shrink: 0;
}

.testimonial-avatar img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.2);
  transition: all 0.3s ease;
}

.testimonial-avatar::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--c8-primary), var(--c8-accent));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-card:hover .testimonial-avatar::after {
  opacity: 1;
}

.default-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c8-primary), var(--c8-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255,255,255,.2);
  transition: all 0.3s ease;
}

.default-avatar svg {
  color: rgba(255,255,255,0.8);
  transition: all 0.3s ease;
}

.testimonial-card:hover .default-avatar {
  transform: scale(1.05);
}

.testimonial-card:hover .default-avatar svg {
  color: rgba(255,255,255,1);
}

.testimonial-info {
  flex: 1;
}

.testimonial-name {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c8-text);
  margin-bottom: 4px;
  line-height: 1.2;
}

.testimonial-organization {
  color: var(--c8-primary);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.9;
}

.testimonial-rating {
  color: #ffd666;
  font-size: 1.1rem;
  margin-bottom: 6px;
  letter-spacing: 2px;
}

.testimonial-date {
  color: var(--c8-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.testimonial-content {
  margin-bottom: 24px;
  position: relative;
}

.testimonial-text {
  color: #e2e8f0;
  line-height: 1.8;
  font-size: 1.05rem;
  margin: 0;
  position: relative;
  padding-left: 24px;
}

.testimonial-text::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 48px;
  color: rgba(21,152,126,.3);
  font-family: serif;
  line-height: 1;
}

.testimonial-image {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.testimonial-image-wrapper {
  width: 100%;
  position: relative;
  padding-bottom: 66.7%; /* 1000:667 比例 */
  height: 0;
}

.testimonial-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.testimonial-image:hover .testimonial-image-wrapper img {
  transform: scale(1.05);
}

.testimonial-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(21,152,126,.1), rgba(32,196,184,.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-image:hover::after {
  opacity: 1;
}

/* Responsive Design */
@media (max-width: 991.98px) {
  .testimonial-card {
    padding: 24px;
  }
  
  .testimonial-header {
    gap: 16px;
  }
  
  .testimonial-avatar img {
    width: 60px;
    height: 60px;
  }
  
  .testimonial-name {
    font-size: 1.1rem;
  }
  
  .testimonial-text {
    font-size: 1rem;
  }
}

@media (max-width: 575.98px) {
  .testimonial-card {
    padding: 20px;
  }
  
  .testimonial-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .testimonial-avatar img {
    width: 50px;
    height: 50px;
  }
  
  .testimonial-image-wrapper {
    padding-bottom: 66.7%; /* 保持 1000:667 比例 */
  }
  
  .testimonial-content-wrapper {
    height: auto;
  }
}

/* Forms */
.form-control, .form-select{background:#0f1628; border:1px solid rgba(255,255,255,.12); color:#e6f0ff}
.form-control:focus{border-color:var(--c8-accent); box-shadow:0 0 0 .25rem rgba(19,194,194,.15)}

/* Utility */
.gradient-text{background:linear-gradient(135deg,#fff,var(--c8-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-title{font-family:'Montserrat',sans-serif;font-weight:800}

/* 服務區塊標題字體大小調整 */
.c8-split .section-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* Subhero (inner pages) */
.c8-subhero{min-height:28vh;border-radius:18px;display:flex;align-items:flex-end;overflow:hidden;margin-top:24px;background-position:center;background-size:cover;background-image:var(--subhero)}
.c8-subhero .overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.65))}
.c8-subhero .inner{position:relative;z-index:2;padding:24px}

/* Back-to-top button */
.c8-backtop{position:fixed;right:34px;bottom:22px;width:48px;height:48px;border-radius:14px;border:1px solid var(--c8-border);display:grid;place-items:center;background:linear-gradient(135deg,var(--c8-primary),var(--c8-primary-2));color:#fff;box-shadow:0 12px 32px rgba(21,152,126,.35);cursor:pointer;z-index:1045;opacity:0;transform:translateY(12px);transition:opacity .25s ease, transform .25s ease, filter .2s ease}
.c8-backtop svg{width:20px;height:20px}
.c8-backtop.show{opacity:1;transform:none}
.c8-backtop:hover{filter:brightness(1.08)}

/* Centered section head */
.c8-head-center{text-align:center;margin-bottom:16px}
.c8-head-center .section-title{margin-bottom:6px}
.c8-head-center .accent{display:inline-block;width:90px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--c8-primary),var(--c8-accent));opacity:.9}

/* Section head with CTA */
.section-head{gap:8px}
.btn-c8-ghost{position:relative; color:#e6f0ff; border:1px solid var(--c8-border); padding:.5rem 1rem; border-radius:999px; text-decoration:none !important; transition:all .25s ease; background:rgba(255,255,255,.03); display:inline-block}
.btn-c8-ghost::after{content:none !important}
.btn-c8-ghost::after{content:""; position:absolute; inset:auto 0 -2px 0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--c8-primary),var(--c8-accent)); opacity:.8}
.btn-c8-ghost:hover{color:#fff; filter:brightness(1.05); box-shadow:0 10px 28px rgba(0,0,0,.28)}

/* About section - streetwear vibe */
.c8-about{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,#0c1224 0%, #0b0f19 100%)}
.c8-about::before{content:"";position:absolute;inset:-40% -20% -20% -20%;background-image:radial-gradient(rgba(163,230,53,.09) 2px, transparent 2px);background-size:18px 18px;transform:rotate(-8deg);pointer-events:none}
.c8-about .c8-tag{display:inline-block;padding:6px 12px;border-radius:999px;border:1px dashed rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.06)}
.c8-about .c8-em{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:.5px}
.c8-about .accent-border{border:1px solid var(--c8-border);border-radius:16px;padding:16px;background:rgba(11,15,25,.6)}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .6s ease, transform .6s ease}
.reveal.revealed{opacity:1;transform:none}

/* Tilt hover (lightweight) */
[data-tilt]{transform-style:preserve-3d;will-change:transform;transition:transform .15s ease}
[data-tilt] .tilt-inner{transform:translateZ(20px)}

/* Full-width blended section backgrounds */
.c8-section-portfolio{position:relative; padding-top:32px !important}
.c8-section-portfolio::before, .c8-section-portfolio::after{content:none}

/* Responsive tweaks */
@media (max-width: 767.98px){
  .c8-main{padding-top:64px}
  .c8-hero{min-height:62vh;border-radius:16px}
  .c8-section-portfolio{padding-top:72px !important}
}

/* 法律頁面樣式 */
.legal-content {
  line-height: 1.6;
  color: var(--c8-text);
}

.legal-content h3 {
  color: var(--c8-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--c8-border);
}

.legal-content p {
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.legal-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.legal-content li {
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.legal-content strong {
  color: var(--c8-primary);
  font-weight: 600;
}

/* 響應式調整 */
@media (max-width: 768px) {
  .legal-content h3 {
    font-size: 1rem;
    margin-top: 1.5rem;
  }
  
  .legal-content {
    font-size: 0.9rem;
  }
}

/* 聯絡資訊樣式 */
.contact-info {
  margin-bottom: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--c8-primary) 0%, var(--c8-accent) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.contact-details {
  flex: 1;
}

.contact-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-value {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.contact-value:hover {
  color: var(--c8-primary);
  text-decoration: none;
}

.business-hours {
  background: linear-gradient(135deg, rgba(21, 152, 126, 0.15) 0%, rgba(32, 196, 184, 0.1) 100%);
  border: 2px solid var(--c8-primary);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(21, 152, 126, 0.2);
  position: relative;
  overflow: hidden;
}

.business-hours::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c8-primary) 0%, var(--c8-accent) 100%);
}

.hours-title {
  color: var(--c8-primary);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hours-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hours-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(21, 152, 126, 0.1);
  transition: all 0.3s ease;
}

.hours-item:hover {
  background: rgba(21, 152, 126, 0.1);
  border-color: var(--c8-primary);
  transform: translateY(-1px);
}

.hours-item:last-child {
  border-bottom: none;
}

.hours-item:last-child:hover {
  border-bottom: 1px solid var(--c8-primary);
}

.hours-day {
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
}

.hours-time {
  color: var(--c8-primary);
  font-weight: 700;
  font-size: 1rem;
  background: rgba(21, 152, 126, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(21, 152, 126, 0.3);
}

.hours-closed {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* LINE 聯絡按鈕樣式 */
.line-contact-btn {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #00C300 0%, #00A000 100%);
  border-radius: 10px;
  padding: 0.625rem 0.6rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 195, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  width: auto;
}

.line-contact-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.line-contact-btn:hover::before {
  left: 100%;
}

.line-contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 195, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

.line-contact-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 20px rgba(0, 195, 0, 0.3);
}

.line-btn-content {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.line-icon-wrapper {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.line-contact-btn:hover .line-icon-wrapper {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1) rotate(5deg);
}

.line-btn-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex-shrink: 0;
}

.line-btn-label {
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.2;
}

.line-btn-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.2;
}

.line-btn-arrow {
  color: white;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.line-btn-arrow svg {
  width: 14px;
  height: 14px;
}

.line-contact-btn:hover .line-btn-arrow {
  transform: translateX(4px);
}

/* 響應式調整 */
@media (max-width: 768px) {
  .contact-item {
    gap: 0.75rem;
  }
  
  .contact-icon {
    width: 35px;
    height: 35px;
  }
  
  .business-hours {
    padding: 1rem;
  }
  
  .line-contact-btn {
    padding: 0.5rem 0.6rem;
    margin-bottom: 1.25rem;
  }
  
  .line-icon-wrapper {
    width: 24px;
    height: 24px;
  }
  
  .line-btn-label {
    font-size: 0.8rem;
  }
  
  .line-btn-desc {
    font-size: 0.65rem;
  }
  
  /* 修復手機版評論頭像圓形問題 */
  .c8-review .ava,
  .c8-review .default-avatar,
  .c8-review img.ava,
  .c8-review-grid .c8-review .ava,
  .c8-review-grid .c8-review .default-avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1/1 !important;
  }
  
  .c8-review .default-avatar,
  .c8-review-grid .c8-review .default-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* 強制修復所有可能的頭像元素 */
  .c8-review img[class*="ava"],
  .c8-review div[class*="avatar"] {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }
}

/* Form Validation Styles */
.form-control.is-valid {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-control.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

/* 只有在欄位為無效時顯示錯誤訊息 */
.is-invalid ~ .invalid-feedback,
.form-control.is-invalid + .invalid-feedback,
textarea.is-invalid + .invalid-feedback,
select.is-invalid + .invalid-feedback {
  display: block;
}

.valid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #28a745;
}

/* Alert Styles */
.alert {
  border: none;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-left: 4px solid;
}

.alert-success {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  color: #155724;
  border-left-color: #28a745;
}

.alert-danger {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  color: #721c24;
  border-left-color: #dc3545;
}

.alert-heading {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  opacity: 0.5;
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}

.btn-close:hover {
  opacity: 0.75;
}

/* Form Loading State */
.btn-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Form Focus States */
.form-control:focus {
  border-color: var(--c8-primary);
  box-shadow: 0 0 0 0.2rem rgba(21, 152, 126, 0.25);
}

.form-select:focus {
  border-color: var(--c8-primary);
  box-shadow: 0 0 0 0.2rem rgba(21, 152, 126, 0.25);
}

/* Form Text Helper */
.form-text {
  font-size: 0.875em;
  color: #6c757d;
  margin-top: 0.25rem;
}

/* Required Field Indicator */
.text-danger {
  color: #dc3545 !important;
}

/* Success Modal Styles */
.c8-success-modal {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.c8-success-modal .modal-body {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
}

.c8-success-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

.success-icon {
  animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.c8-success-modal .modal-title {
  font-weight: 700;
  font-size: 1.5rem;
  animation: fadeInUp 0.5s ease-out 0.2s both;
}

.c8-success-modal p {
  animation: fadeInUp 0.5s ease-out 0.3s both;
}

.c8-success-modal .btn {
  animation: fadeInUp 0.5s ease-out 0.4s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Backdrop */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* Modal Animation */
.modal.fade .modal-dialog {
  transform: scale(0.8) translateY(-50px);
  transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}

/* 麵包屑導航樣式 */
.c8-breadcrumbs {
  margin-bottom: 1rem;
}

.c8-breadcrumbs .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}

.c8-breadcrumbs .breadcrumb-item {
  color: white !important;
}

.c8-breadcrumbs .breadcrumb-item a {
  color: white !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.c8-breadcrumbs .breadcrumb-item a:hover {
  color: var(--c8-primary) !important;
  text-decoration: none !important;
}

/* 更強力的選擇器來覆蓋 Bootstrap 和瀏覽器預設樣式 */
nav.c8-breadcrumbs ol.breadcrumb li.breadcrumb-item a {
  color: white !important;
  text-decoration: none !important;
}

nav.c8-breadcrumbs ol.breadcrumb li.breadcrumb-item a:hover {
  color: var(--c8-primary) !important;
  text-decoration: none !important;
}

/* 針對 Bootstrap 的 link 樣式覆蓋 */
.c8-breadcrumbs .breadcrumb-item a:link,
.c8-breadcrumbs .breadcrumb-item a:visited {
  color: white !important;
  text-decoration: none !important;
}

.c8-breadcrumbs .breadcrumb-item.active {
  color: white !important;
}

.c8-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: white !important;
  margin: 0 0.5rem;
}

/* 強制覆蓋斜線顏色 - 使用更具體的選擇器 */
nav.c8-breadcrumbs ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item::before {
  color: white !important;
}

/* Home 連結特殊樣式 - 無底線白字 */
.c8-breadcrumbs .breadcrumb-item a[href*="index.php"],
.navbar-nav .nav-link[href*="index.php"].active,
a[href*="index.php"].active {
  color: white !important;
  text-decoration: none !important;
}

.c8-breadcrumbs .breadcrumb-item a[href*="index.php"]:hover,
.navbar-nav .nav-link[href*="index.php"]:hover,
a[href*="index.php"]:hover {
  color: var(--c8-primary) !important;
  text-decoration: none !important;
}


/* 404 頁面 Home 按鈕特殊樣式 */
a[href*="index.php"] .fas.fa-home {
  color: white !important;
}

/* 最終強制覆蓋 - 針對所有可能的 Bootstrap 和瀏覽器樣式 */
.c8-breadcrumbs a,
.c8-breadcrumbs a:link,
.c8-breadcrumbs a:visited,
.c8-breadcrumbs a:hover,
.c8-breadcrumbs a:active,
.c8-breadcrumbs a:focus {
  color: white !important;
  text-decoration: none !important;
}

.c8-breadcrumbs a:hover {
  color: var(--c8-primary) !important;
  text-decoration: none !important;
}

/* 確保所有麵包屑文字都是白色 */
.c8-breadcrumbs,
.c8-breadcrumbs *,
.c8-breadcrumbs .breadcrumb-item,
.c8-breadcrumbs .breadcrumb-item.active,
.c8-breadcrumbs .breadcrumb-item.active * {
  color: white !important;
}

/* 強制斜線為白色 - 最高優先級 */
.c8-breadcrumbs .breadcrumb-item::before,
.c8-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
nav.c8-breadcrumbs .breadcrumb-item::before,
nav.c8-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: white !important;
}

/* 強制修復所有頭像圓形問題 - 最高優先級 */
.c8-review .ava,
.c8-review .default-avatar,
.c8-review img.ava,
.c8-review-grid .c8-review .ava,
.c8-review-grid .c8-review .default-avatar,
.c8-review img[class*="ava"],
.c8-review div[class*="avatar"] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1/1 !important;
}

.c8-review .default-avatar,
.c8-review-grid .c8-review .default-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 強制修復 Our Promise 手機版一個一列 - 最高優先級 */
@media (max-width: 768px) {
  /* 針對所有包含 promise 卡片的列 */
  .row .col-6,
  .row .col-6.col-lg-3,
  .row .col-6[class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* 強制 promise 卡片佔滿整行 */
  .c8-promise-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  
  /* 針對 Bootstrap 的 grid 系統強制覆蓋 */
  .row > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}