/* =========================================
   信任指標區 (Trust Section) CSS
========================================= */

/* 背景色設定 (可依需求調整為淺灰或其他顏色) */
.bg-white {
    background-color: #ffffff;
}

/* --- Part 1: 數字展示樣式 --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三欄排列 */
    gap: 40px;
    text-align: center;
    padding-bottom: 20px;
}

.stat-item {

}

.stat-icon {
    font-size: 2.5rem;
    color: var(--primary-color); /* 使用主色調 */
    margin-bottom: 20px;
    opacity: 0.8;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: #2c3e50; /* 深色數字 */
    line-height: 1;
    margin-bottom: 10px;
    font-family: 'Roboto', 'Helvetica Neue', sans-serif; /* 建議數字用稍微硬挺的字體 */
}

.stat-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.stat-desc {
    color: #777;
    font-size: 0.95rem;
    max-width: 250px;
    margin: 0 auto; /* 讓描述文字居中 */
}

/* RWD: 手機版數字改為垂直排列 */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .stat-number {
        font-size: 3rem;
    }
}


/* --- Part 2: 純 CSS 無限滾動 Logo 牆 --- */

.trust-logos-container {
    padding-top: 20px;
}

/* 1. 遮罩層：限制顯示範圍，並添加兩側淡入淡出效果 */
.logo-ticker-mask {
    overflow: hidden; /* 隱藏超出範圍的內容 */
    position: relative;
    width: 100%;
    padding: 20px 0;
    /* 使用 mask-image 在左右兩側製造漸層透明效果，讓滾動更自然 (現代瀏覽器支援) */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* 2. 軌道層：承載所有 Logo，並負責執行動畫 */
.logo-ticker-track {
    display: flex;
    align-items: center;
    width: fit-content; /* 寬度由內容決定，確保能容納所有 Logo */
    /* 執行 scrollTicker 動畫，30秒跑完一圈，線性速度，無限循環 */
    animation: scrollTicker 35s linear infinite;
}

/* 滑鼠移上去時暫停滾動，方便使用者看清楚 */
.logo-ticker-track:hover {
    animation-play-state: paused;
}

/* 3. 單個 Logo 容器 */
.client-logo {
    flex: 0 0 auto; /* 禁止壓縮 Logo 寬度 */
    width: 160px;   /* 設定一個固定的 Logo 容器寬度 */
    height: 90px;
    margin: 0 30px; /* Logo 之間的間距 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 將 Logo 轉為灰階，看起來更統一專業，hover 時變回彩色*/
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.client-logo:hover {
    filter: grayscale(0%); /* 變回彩色 */
    opacity: 1;
    transform: scale(1.05); /* 輕微放大 */
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 保持圖片比例 */
}

/* 定義滾動動畫關鍵影格 */
@keyframes scrollTicker {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 關鍵：向左移動總寬度的 50% */
        /* 因為我們複製了一份 Logo，當移動到一半時，剛好是第二組的開頭接上第一組的結尾，形成無縫循環 */
        transform: translateX(-50%);
    }
}

/* RWD: 手機版加快滾動速度，並縮小 Logo 間距 */
@media (max-width: 768px) {
    .logo-ticker-track {
        animation-duration: 25s;
    }
    .client-logo {
        width: 120px;
        height: 70px;
        margin: 0 15px;
    }
}