@charset "utf-8";

/* =========================================
   1. 全局變數定義 (ROOT) - 整合所有變數
   ========================================= */
:root {
    /* --- 色彩系統 --- */
    --primary-color: #0984e3; 
    --secondary-color: #6c5ce7;
    --text-color: #2d3436; 
    --text-muted: #636e72;
    --text-light: #f5f6fa; 
    --text-light-muted: #dfe6e9;
    --bg-color: #f8f9fa; 
    --header-bg: #ffffff; 
    --white: #ffffff;
    --dark-bg: #1a1a1a;
    --badge-bg: #ff7675;
    
    /* --- [補回] 產品與價格色彩 --- */
    --card-bg: #ffffff;
    --price-color: #e17055;
    --price-muted: #b2bec3;

    /* --- 尺寸與間距 --- */
    --container-width: 75rem;       /* 1200px */
    --container-padding-x: 1.25rem; /* 20px */
    --header-height-estimate: 5.5rem; 
    --section-padding-y: 5rem;
    --gap-xl: 4rem;
    
    /* 導航間距 */
    --nav-gap-sm: 0.75rem; 
    --nav-gap-lg: 1.875rem;
    --header-padding-y: 0.9375rem;

    /* --- 字體設定 --- */
    --font-family: 'Helvetica Neue', Arial, "Microsoft JhengHei", sans-serif;
    --font-base: 1rem; 
    --font-logo: 1.75rem;
    --font-h1: 2.5rem; 
    --font-h2: 2.25rem; 
    --font-h2-mb: 1.75rem; 
    --font-h3: 1.35rem;
    --font-main-nav: 1.0625rem; 
    --font-top-nav: 0.8125rem;
    
    /* --- 元件樣式變數 --- */
    --radius-sm: 0.25rem; 
    --radius-md: 0.75rem; 
    --radius-lg: 1rem;
    --radius-tag: 0.25rem;
    --btn-padding: 0.75rem 2rem;
    --transition-speed: 0.3s;
    --focus-ring-color: var(--primary-color);
    
    /* --- [補回] 標籤與卡片樣式 --- */
    --tag-padding: 0.25rem 0.75rem;
    --tag-font-size: 0.8125rem;
    --card-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.08);
    --card-shadow-hover: 0 1rem 2rem rgba(0,0,0,0.12);
    
    /* Swiper & Card */
    --swiper-arrow-color: #ffffff;
}

/* =========================================
   2. 基礎重置 (Reset & Base)
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { 
    font-size: 100%; 
    scroll-behavior: smooth; 
}

body { 
    font-family: var(--font-family); 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    line-height: 1.6; 
    font-size: var(--font-base); 
    width: 100%; 
    overflow-x: hidden;
    padding-top: var(--header-height-estimate); /* 避開 Fixed Header */
    -webkit-font-smoothing: antialiased;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; transition: var(--transition-speed); }

/* Accessibility */
:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 3px; z-index: 9999; }
a:focus-visible, button:focus-visible { border-radius: var(--radius-sm); }

/* =========================================
   1. Banner 輪播模組 (Swiper)
   ========================================= */
.swiper { width: 100%; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: #eee; }
.swiper.swiper-small-banner{aspect-ratio: unset; background-color:#fff;}
.swiper.swiper-mid-banner{aspect-ratio: unset;}
.swiper-slide { background: #000; display: block; position: relative; height: 100%; width: 100%; }
.swiper-slide img, .swiper-slide video, .swiper-slide picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.swiper-slide video { position: absolute; top: 0; left: 0; z-index: 1; }
.video-pc { display: block; } 
.video-mb { display: none; }

.service-tabs { 
    display: flex; justify-content: center; gap: 2rem; margin-bottom: 3rem; 
    border-bottom: 1px solid #eee; position: relative; 
}
.tab-btn { 
    background: none; border: none; font-size: 1.125rem; font-weight: 500; 
    color: var(--text-muted); padding: 1rem 0.5rem; cursor: pointer; 
    position: relative; transition: all 0.3s; white-space: nowrap; 
}
.tab-btn:hover, .tab-btn.active { color: var(--primary-color); }
.tab-btn.active { font-weight: 700; }
.tab-btn::after { 
    content: ""; position: absolute; bottom: -1px; left: 0; width: 0; 
    height: 3px; background-color: var(--primary-color); transition: width 0.3s ease; 
}
.tab-btn.active::after { width: 100%; }
.tab-btn:focus-visible { outline: none; }
.tab-btn:focus-visible::before { 
    content: ""; position: absolute; top: 0.25rem; left: -0.5rem; 
    right: -0.5rem; bottom: 0.25rem; border-radius: var(--radius-sm); 
    border: 2px solid var(--focus-ring-color); 
}


/* =========================================
   3. 通用排版與工具類 (Utilities)
   ========================================= */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding-x); }
.text-center { text-align: center; }

/* 區塊通用標題 */
main > section { padding: var(--section-padding-y) 0; position: relative; width: 100%; scroll-margin-top: 80px; }

.section-title { 
    font-size: var(--font-h2); font-weight: 800; color: var(--text-color); 
    margin-bottom: 1.5rem; line-height: 1.3; letter-spacing: 0.05rem; 
}
.section-desc { 
    font-size: 1.0625rem; color: var(--text-muted); line-height: 1.8; 
    margin: 0 auto 3rem auto; max-width: 800px; 
}

/* 深色區塊文字自動反白工具 (通用規則) */
section[class*="dark-bg"] .section-title, 
section[class*="dark-bg"] .section-desc { color: var(--text-light); }

/* =========================================
   4. UI 元件 (Buttons & Forms)
   ========================================= */
/* 通用按鈕 */
.btn-login { background: #dfe6e9; padding: 0.125rem 0.75rem; border-radius: 0.25rem; }
.btn-more { 
    display: inline-block; padding: var(--btn-padding); border: 1px solid var(--primary-color); 
    color: var(--primary-color); border-radius: var(--radius-sm); font-weight: 600; 
    background: transparent; transition: 0.3s; 
}
.btn-more:hover { 
    background-color: var(--primary-color); color: var(--white); 
    box-shadow: 0 0.25rem 0.75rem rgba(9, 132, 227, 0.3); 
}
.btn-submit { 
    display: block; width: 100%; padding: 1rem; background-color: var(--primary-color); 
    color: #fff; border: none; border-radius: var(--radius-sm); 
    font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: 0.3s; margin-top: 1rem; text-align:center;
}
.btn-submit:hover { 
    background-color: #0973c5; box-shadow: 0 5px 15px rgba(9, 132, 227, 0.3); transform: translateY(-2px); 
}

/* 通用表單樣式 (浮動標籤) */
.form-group { position: relative; margin-bottom: 1.5rem; }

.form-group input, .form-group textarea { 
    width: 100%; padding: 1rem 1rem 0.5rem 1rem; border: 1px solid #ddd; 
    border-radius: var(--radius-sm); font-size: 1rem; color: var(--text-color); 
    background-color: transparent; transition: all 0.3s ease; font-family: inherit; appearance: none; 
}
.form-group label { 
    position: absolute; top: 0.8rem; left: 1rem; font-size: 1rem; color: var(--text-muted); 
    pointer-events: none; transition: all 0.3s ease; background-color: transparent; 
}
.form-group textarea { min-height: 150px; resize: vertical; }

/* Focus & Valid 狀態 */
.form-group input:focus, .form-group textarea:focus { 
    border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(9, 132, 227, 0.1); outline: none; 
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -0.6rem; left: 0.8rem; font-size: 0.8rem; color: var(--primary-color); 
    background-color: var(--bg-color); padding: 0 0.4rem; font-weight: 600;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: transparent; }

/* Swiper 全站通用覆寫 */
.swiper-button-next, .swiper-button-prev { 
    color: var(--swiper-arrow-color) !important; 
    text-shadow: 0 0 0.3125rem rgba(0,0,0,0.5); z-index: 10; 
}
.swiper-button-next { right: 1.5rem !important; } 
.swiper-button-prev { left: 1.5rem !important; }

/* =========================================
   5. 頁首模組 (Header - Global)
   ========================================= */
.header { 
    background-color: var(--header-bg); 
    box-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.05); 
    padding: var(--header-padding-y) 0; 
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; 
    transition: all 0.3s ease;
}
.header .container { display: flex; justify-content: space-between; align-items: center; }

/* Logo */
.logo a { font-size: var(--font-logo); font-weight: 800; letter-spacing: 0.0625rem; }
.logo span { color: var(--primary-color); }

/* 導航群組 (Desktop) */
.nav-group { display: flex; flex-direction: column; align-items: flex-end; gap: var(--nav-gap-sm); }
.top-nav ul { display: flex; gap: 1.25rem; }
.top-nav a { font-size: var(--font-top-nav); color: var(--text-muted); }
.top-nav a:hover { color: var(--primary-color); }
.main-nav ul { display: flex; gap: var(--nav-gap-lg); }
.main-nav a { font-size: var(--font-main-nav); font-weight: 600; }
.main-nav a:hover { color: var(--primary-color); }

/* 漢堡按鈕 & 遮罩 */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1002; }
.hamburger span { 
    display: block; width: 1.6rem; height: 2px; background-color: var(--text-color); 
    margin: 5px 0; transition: 0.3s; border-radius: 2px; 
}
.menu-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); 
    z-index: 1000; opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(2px); 
}

/* =========================================
   6. 頁尾模組 (Footer - Global)
   ========================================= */
.footer { background-color: var(--text-color); padding: 1.5rem 0; color: rgba(255,255,255,0.6); font-size: 0.875rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-links a { color: inherit; margin-left: 1.5rem; transition: 0.3s; text-decoration: none; }
.footer-links a:hover { color: var(--white); }

/* =========================================
   7. 全站 RWD 響應式 (Header & Global)
   ========================================= */
@media (max-width: 48rem) { /* 768px */
    :root { 
        --header-height-estimate: 4.5rem; 
        --section-padding-y: 3rem; 
    }
	.service-tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: 0.5rem; gap: 1rem; }
    .section-title { font-size: var(--font-h2-mb); }
    
    /* Header Mobile Logic */
    .hamburger { display: block; }
    .hamburger.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.is-active span:nth-child(2) { opacity: 0; }
    .hamburger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .nav-group { 
        position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100vh; 
        background-color: var(--white); flex-direction: column; align-items: flex-start; 
        justify-content: flex-start; padding: 5rem 2rem 2rem 2rem; 
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        z-index: 1001; overflow-y: auto; 
    }
    .nav-group.is-active { right: 0; }
    .menu-overlay.is-active { opacity: 1; visibility: visible; }
    
    .main-nav, .top-nav { width: 100%; }
    .main-nav ul, .top-nav ul { flex-direction: column; gap: 0; width: 100%; }
    .main-nav li { border-bottom: 1px solid #f0f0f0; }
    .main-nav a { display: block; padding: 1rem 0; font-size: 1.125rem; color: var(--text-color); }
    .top-nav { margin-top: 1rem; padding-top: 1rem; }
    .top-nav a { display: block; padding: 0.75rem 0; font-size: 1rem; color: var(--text-muted); }
}
/* ... (上面保持原本的內容) ... */

/* =========================================
   15. [新增] 捲動視差動畫工具庫 (Scroll Animations)
   使用方式：HTML元素加上 class="ani-on-scroll ani-up" 等
   ========================================= */

/* 1. 基礎設定：所有參與動畫的元素預設隱藏 */
.ani-on-scroll {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 優化過的緩動曲線 */
    will-change: opacity, transform; /* 效能優化 */
}

/* 2. 初始位置設定 (還沒滑到時的狀態) */

/* 區塊淡入 (原地) */
.ani-fade { 
    /* 僅透明度變化 */
}

/* 向上浮出 (適合卡片) */
.ani-up {
    transform: translateY(3rem);
}

/* 從左側滑入 (適合標題) */
.ani-left {
    transform: translateX(-3rem);
}

/* 從右側滑入 (適合圖片或裝飾) */
.ani-right {
    transform: translateX(3rem);
}

/* 3. 觸發狀態 (由 JS 加入 .ani-active) */
.ani-on-scroll.ani-active {
    opacity: 1;
    transform: translate(0, 0); /* 回歸原位 */
}

/* 4. 針對區塊 Section 自身的淡入 (背景) */
section {
    transition: background-color 0.5s ease;
}
/* 如果希望整個區塊滑到才顯示，給 section 加 .ani-on-scroll 即可 */
.page-categories {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid #eee; /* 淺色底線 */
	padding-bottom: 1px;
}