/* ===============================================
   🎨 主題色系統
   =============================================== */

/* 預設主題色 (橘色) */
:root {
    --primary-accent: #FF5733;
    --secondary-accent: #FFC300;
}

/* 橘色主題 */
[data-color-theme="orange"] {
    --primary-accent: #FF5733;
    --secondary-accent: #FFC300;
}

/* 藍色主題 */
[data-color-theme="blue"] {
    --primary-accent: #3b82f6;
    --secondary-accent: #60a5fa;
}

/* 綠色主題 */
[data-color-theme="green"] {
    --primary-accent: #10b981;
    --secondary-accent: #34d399;
}

/* 紫色主題 */
[data-color-theme="purple"] {
    --primary-accent: #8b5cf6;
    --secondary-accent: #a78bfa;
}

/* 紅色主題 */
[data-color-theme="red"] {
    --primary-accent: #ef4444;
    --secondary-accent: #f87171;
}

/* ===============================================
   🚗 載入動畫 Preloader
   =============================================== */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    color: #FFFFFF !important;
    transform: scale(0.5);
}

.preloader-content * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* 汽車動畫容器 */
.car-animation-wrapper {
    position: relative;
    width: 500px;
    height: 200px;
    animation: carBounce 2s ease-in-out infinite, carShake 0.3s ease-in-out infinite;
}

/* 汽車車身 */
.car-body {
    position: absolute;
    width: 500px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    z-index: 1;
}

.car-body svg {
    width: 100%;
    height: auto;
}

/* 車輪 */
.car-wheel {
    position: absolute;
    width: 50px;
    height: 50px;
    color: #FFFFFF;
    animation: wheelSpin 0.7s linear infinite;
    z-index: 2;
}

.wheel-left {
    bottom: -10px;
    left: 73px;
}

.wheel-right {
    bottom: -10px;
    right: 47px;
}

/* 速度線 */
.speed-lines {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 100px;
    height: 20px;
    pointer-events: none;
    z-index: -1;
    transform: translateY(-50%);
}

.speed-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
    border-radius: 1px;
    opacity: 0;
}

.speed-line:nth-child(1) {
    top: 0px;
    width: 70px;
    animation: speedLine1 0.4s infinite ease-out;
}

.speed-line:nth-child(2) {
    top: 9px;
    width: 90px;
    animation: speedLine2 0.4s infinite ease-out 0.13s;
}

.speed-line:nth-child(3) {
    top: 18px;
    width: 60px;
    animation: speedLine3 0.4s infinite ease-out 0.26s;
}

/* LOADING 文字 */
.loading-text {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 8px;
    color: #FFFFFF !important;
    text-transform: uppercase;
    display: flex;
    gap: 4px;
}

.loading-text span {
    display: inline-block;
    color: #FFFFFF !important;
    animation: letterBounce 1.4s ease-in-out infinite;
}

.loading-text span:nth-child(1) { animation-delay: 0s; }
.loading-text span:nth-child(2) { animation-delay: 0.1s; }
.loading-text span:nth-child(3) { animation-delay: 0.2s; }
.loading-text span:nth-child(4) { animation-delay: 0.3s; }
.loading-text span:nth-child(5) { animation-delay: 0.4s; }
.loading-text span:nth-child(6) { animation-delay: 0.5s; }
.loading-text span:nth-child(7) { animation-delay: 0.6s; }

.loading-text .dots span {
    color: #FFFFFF !important;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.loading-text .dots span:nth-child(1) { animation-delay: 0s; }
.loading-text .dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-text .dots span:nth-child(3) { animation-delay: 0.4s; }

/* ====== 動畫效果 ====== */

/* 汽車上下晃動（彈跳） */
@keyframes carBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* 汽車左右晃動 */
@keyframes carShake {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-3px) rotate(-1deg);
    }
    75% {
        transform: translateX(3px) rotate(1deg);
    }
}

/* 車輪旋轉 */
@keyframes wheelSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 速度線動畫 */
@keyframes speedLine1 {
    0% {
        opacity: 0;
        transform: translateX(30px) scaleX(0.5);
    }
    50% {
        opacity: 0.9;
        transform: translateX(0) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-40px) scaleX(0.3);
    }
}

@keyframes speedLine2 {
    0% {
        opacity: 0;
        transform: translateX(35px) scaleX(0.3);
    }
    50% {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50px) scaleX(0.2);
    }
}

@keyframes speedLine3 {
    0% {
        opacity: 0;
        transform: translateX(25px) scaleX(0.6);
    }
    50% {
        opacity: 0.8;
        transform: translateX(0) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-35px) scaleX(0.4);
    }
}

/* 字母彈跳動畫 */
@keyframes letterBounce {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-2px) rotate(-1deg);
    }
    75% {
        transform: translateX(2px) rotate(1deg);
    }
}

/* 點點脈衝動畫 */
@keyframes dotPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* 響應式設計 */
@media (max-width: 768px) {
    .preloader-content {
        transform: scale(0.4);
    }
}

@media (max-width: 480px) {
    .preloader-content {
        transform: scale(0.35);
    }
}

/* ==== 修復不明鼠標圖案（隱藏瀏覽器預設拖曳影像）==== */
img, svg { -webkit-user-drag: none; user-select: none; }
html, body { cursor: auto; }

/* Custom cursor enabled in dark mode only */
[data-theme="dark"] body,
[data-theme="dark"] body * {
    cursor: none !important;
}

/* Exception: Show default cursor for input fields, textareas, and select elements */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] button {
    cursor: pointer !important;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea {
    cursor: text !important;
}

/* Light mode uses default cursor */
/* 白晝模式使用自定義鼠標，隱藏系統鼠標 */
[data-theme="light"] body,
[data-theme="light"] body * {
    cursor: none !important;
}

/* 白晝模式自定義鼠標樣式 */
[data-theme="light"] .cursor {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.3s ease;
    mix-blend-mode: normal;
    box-shadow:
        0 0 10px rgba(37, 99, 235, 0.4),
        0 0 20px rgba(37, 99, 235, 0.2),
        0 2px 8px rgba(37, 99, 235, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .cursor-follower {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(37, 99, 235, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease, background-color 0.3s ease;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05), transparent 70%);
    backdrop-filter: blur(2px);
}

[data-theme="light"] .cursor-follower.hover {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent 70%);
    border-color: rgba(37, 99, 235, 0.6);
    transform: scale(1.4);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .cursor.hover {
    transform: scale(1.5);
    background: linear-gradient(135deg, #1e40af, #2563eb);
    box-shadow:
        0 0 15px rgba(30, 64, 175, 0.5),
        0 0 30px rgba(37, 99, 235, 0.3),
        0 4px 12px rgba(30, 64, 175, 0.4);
}

/* 白晝模式文字輸入時的鼠標 */
[data-theme="light"] .cursor.text-input {
    width: 2px;
    height: 20px;
    border-radius: 1px;
    background: linear-gradient(180deg, #2563eb, #3b82f6);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

/* 白晝模式點擊效果 */
[data-theme="light"] .cursor.click {
    transform: scale(0.8);
    background: linear-gradient(135deg, #1e3a8a, #1e40af);
    box-shadow:
        0 0 20px rgba(30, 64, 175, 0.8),
        0 0 40px rgba(37, 99, 235, 0.5);
}

[data-theme="light"] .cursor-follower.click {
    transform: scale(0.7);
    border-color: rgba(30, 64, 175, 0.8);
    background: radial-gradient(circle, rgba(30, 64, 175, 0.3), transparent 70%);
}

/* 白晝模式特殊顏色主題支援 */
[data-theme="light"][data-color-theme="orange"] .cursor {
    background: linear-gradient(135deg, #ea580c, #f97316);
    box-shadow:
        0 0 10px rgba(234, 88, 12, 0.4),
        0 0 20px rgba(249, 115, 22, 0.2),
        0 2px 8px rgba(234, 88, 12, 0.3);
}

[data-theme="light"][data-color-theme="orange"] .cursor-follower {
    border-color: rgba(234, 88, 12, 0.4);
    background: radial-gradient(circle, rgba(234, 88, 12, 0.05), transparent 70%);
}

[data-theme="light"][data-color-theme="orange"] .cursor-follower.hover {
    border-color: rgba(234, 88, 12, 0.6);
    background: radial-gradient(circle, rgba(234, 88, 12, 0.15), transparent 70%);
}

[data-theme="light"][data-color-theme="green"] .cursor {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow:
        0 0 10px rgba(5, 150, 105, 0.4),
        0 0 20px rgba(16, 185, 129, 0.2),
        0 2px 8px rgba(5, 150, 105, 0.3);
}

[data-theme="light"][data-color-theme="green"] .cursor-follower {
    border-color: rgba(5, 150, 105, 0.4);
    background: radial-gradient(circle, rgba(5, 150, 105, 0.05), transparent 70%);
}

[data-theme="light"][data-color-theme="purple"] .cursor {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    box-shadow:
        0 0 10px rgba(124, 58, 237, 0.4),
        0 0 20px rgba(139, 92, 246, 0.2),
        0 2px 8px rgba(124, 58, 237, 0.3);
}

[data-theme="light"][data-color-theme="purple"] .cursor-follower {
    border-color: rgba(124, 58, 237, 0.4);
    background: radial-gradient(circle, rgba(124, 58, 237, 0.05), transparent 70%);
}

/* Show default cursor when detail page is open */
[data-theme="dark"] body.detail-page-open,
[data-theme="dark"] body.detail-page-open * {
    cursor: auto !important;
}

/* ==== Back-to-Top 浮動按鈕（右下角玻璃＋發光）- 跟隨主題色 ==== */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--primary-accent);
    box-shadow: 0 8px 24px var(--primary-accent);
    color: #fff;
    transition: all 0.3s ease;
    opacity: 0; /* 預設隱藏，卷動後顯示 */
    pointer-events: none;
}
.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.back-to-top:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 12px 30px var(--primary-accent);
    border-color: var(--secondary-accent);
    background: rgba(255, 255, 255, 0.12);
}
.back-to-top svg { 
    stroke: var(--primary-accent); 
    filter: drop-shadow(0 0 4px var(--primary-accent));
}

/* 火箭動畫（點擊後）*/
.back-to-top.launching {
    animation: rocket 800ms ease forwards;
}
@keyframes rocket {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-20px) scale(1.05); }
    100% { transform: translateY(-120vh) scale(0.9); opacity: 0; }
}
#3d-scanning {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

#3d-scanning * {
    text-align: center !important;
}

#3d-scanning .section-title,
#3d-scanning .section-subtitle,
#3d-scanning .showcase-title,
#3d-scanning .animation-title,
#3d-scanning .animation-description {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

#3d-scanning .section-subtitle {
    max-width: 800px;
}

#3d-scanning .scanning-animation-container,
#3d-scanning .scan-container,
#3d-scanning .scanning-features {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    max-width: 1000px;
}

#3d-scanning .scanning-features {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
/* ===== RESET & BASICS ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Light theme defaults */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #2c3e50;
    --text-secondary: #374151;
    --border-color: #e5e7eb;
    --primary-color: #2563eb;
    --primary-dark: #1e40af;
    --card-bg: rgba(255, 255, 255, 0.75);
    --card-bg-hover: rgba(255, 255, 255, 0.85);

    /* 主題色變量系統 - 預設橘黃色 */
    --theme-gradient-start: #FF5733;
    --theme-gradient-mid: #FFC300;
    --theme-gradient-end: #FF5733;

    /* 白晝模式主題色 - 預設藍色 */
    --theme-gradient-light-start: #1e40af;
    --theme-gradient-light-mid: #3b82f6;
    --theme-gradient-light-end: #60a5fa;
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --border-color: #334155;
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --primary-accent: #FF5733;
    --secondary-accent: #FFC300;
    --accent-color: #FF5733;
    --card-bg: rgba(30, 41, 59, 0.6);
    --card-bg-hover: rgba(30, 41, 59, 0.75);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    /* 為錨點滾動添加頂部偏移，避免被固定導航欄遮擋 */
    scroll-padding-top: 100px;
}

body {
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: background-color 300ms, color 300ms;
    overflow-x: hidden;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
}

/* ===== CUSTOM CURSOR (ENHANCED DESIGN) ===== */

/* Main cursor dot */
.cursor {
    position: fixed;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition: transform 0.15s ease, opacity 0.15s ease;
    mix-blend-mode: screen;
    box-shadow:
        0 0 10px rgba(255, 87, 51, 0.6),
        0 0 20px rgba(255, 87, 51, 0.4),
        0 0 30px rgba(255, 87, 51, 0.2);
}

/* Cursor follower ring */
.cursor-follower {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 87, 51, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transition: all 0.2s ease;
    background: radial-gradient(
        circle,
        rgba(255, 87, 51, 0.1) 0%,
        rgba(255, 195, 0, 0.05) 50%,
        transparent 70%
    );
}

/* Hover state - expand cursor */
.cursor.hover {
    transform: scale(1.5);
    background: linear-gradient(135deg, #FFC300, #FF5733);
    box-shadow:
        0 0 15px rgba(255, 195, 0, 0.8),
        0 0 30px rgba(255, 195, 0, 0.5),
        0 0 45px rgba(255, 195, 0, 0.3);
}

.cursor-follower.hover {
    transform: scale(1.3);
    border-color: rgba(255, 195, 0, 0.6);
    border-width: 2px;
    background: radial-gradient(
        circle,
        rgba(255, 195, 0, 0.15) 0%,
        rgba(255, 87, 51, 0.08) 50%,
        transparent 70%
    );
}

/* Click effect */
.cursor.click {
    transform: scale(0.8);
}

.cursor-follower.click {
    transform: scale(0.9);
}

/* Text selection state */
.cursor.text {
    width: 2px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #FF5733, #FFC300);
}

/* Hide cursor during modal interactions to prevent flickering */
[data-theme="dark"] body.detail-page-open,
[data-theme="light"] body {
    cursor: auto;
    background: #ffffff !important;  /* 白晝模式純白背景 */
}

.cursor, .cursor-follower { 
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Explicitly hide in light theme */
/* 白晝模式顯示自定義鼠標 */
[data-theme="light"] .cursor,
[data-theme="light"] .cursor-follower {
    display: block !important;
    opacity: 0 !important; /* 初始透明，由 JS 控制顯示 */
}

/* 白晝模式鼠標準備好後顯示 */
[data-theme="light"] .cursor.ready,
[data-theme="light"] .cursor-follower.ready {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Only show in dark theme */
[data-theme="dark"] .cursor, 
[data-theme="dark"] .cursor-follower {
    display: block !important;
    opacity: 0 !important;
    visibility: visible !important;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10003;
    border-radius: 50%;
    will-change: transform;
    backface-visibility: hidden;
    transition: opacity 0.3s ease;
}

/* Show cursor only after JS has positioned it */
[data-theme="dark"] .cursor.ready, 
[data-theme="dark"] .cursor-follower.ready {
    opacity: 1 !important;
}

[data-theme="dark"] .cursor {
    width: 8px;
    height: 8px;
    background-color: var(--primary-accent);
    transition: transform 0.1s ease-out;
}

[data-theme="dark"] .cursor-follower {
    width: 40px;
    height: 40px;
    border: 1px solid var(--primary-accent);
    transition: transform 0.4s ease-out, background-color 0.3s, border-color 0.3s;
}

[data-theme="dark"] .cursor-follower.hover {
    background-color: rgba(255, 87, 51, 0.2);
    border-color: var(--secondary-accent);
    transform: scale(1.5);
}

/* Cursor elements hidden globally above */

/* ===== ANIMATED BACKGROUND (DARK THEME) ===== */
.main-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(180deg, #000000 0%, #0a0a1a 50%, #000000 100%);
}

[data-theme="light"] .main-background {
    display: none;
}

/* 動態星空背景 */
.stars-container {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    overflow: hidden;
    animation: stars-drift 120s linear infinite;
}

@keyframes stars-drift {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-10%, 10%);
    }
}

.stars {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle linear infinite;
    opacity: 0;
}

/* 大星星 */
.stars.large {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

/* 中星星 */
.stars.medium {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
}

/* 小星星 */
.stars.small {
    width: 1px;
    height: 1px;
}

@keyframes twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* 流星效果（支援斜向，自訂角度與距離） */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    /* 將白色放在運動方向前端（頭），透明在尾端 */
    background: linear-gradient(90deg, transparent, white);
    border-radius: 50%;
    opacity: 0;
    /* 以 CSS 變數控制角度、距離與時間 */
    --angle: -45deg;          /* 旋轉角度（外觀） */
    --dx: -320px;             /* X 位移 */
    --dy: 220px;              /* Y 位移 */
    --dur: 3s;                /* 動畫時間 */
    transform: translate(0, 0) rotate(var(--angle));
    animation: shoot var(--dur) linear;
}

@keyframes shoot {
    0% {
        transform: translate(0, 0) rotate(var(--angle));
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) rotate(var(--angle));
    opacity: 0;
    }
}

.grid-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-pan 60s linear infinite;
}

@keyframes grid-pan {
    0% { background-position: 0 0; }
    100% { background-position: 500px 500px; }
}

.background-spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(255, 87, 51, 0.15) 0%, transparent 30%);
    transition: background 0.2s ease-out;
}

:root {
    --mouse-x: 50vw;
    --mouse-y: 50vh;
}

/* ===== NAVIGATION ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--nav-bg, rgba(255, 255, 255, 0.4));
    border-bottom: 1px solid var(--border-color);
    transition: all 300ms;
}

[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.95);
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.nav-logo {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary-color);
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 300ms;
    padding: 0.5rem 0;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-color);
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all 300ms;
}

.theme-toggle:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    padding: 0;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all 300ms;
}

/* ===== HERO SECTION ===== */
.hero-section {
    position: relative;
    margin-top: 60px;
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
    color: white;
    z-index: 10;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0.5rem;
    transition: all 300ms;
    border: 2px solid transparent;
}

/* 鍵盤焦點樣式 - 無障礙 */
.btn:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 4px;
}

[data-theme="light"] .btn:focus-visible {
    outline-color: #2563eb;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: white;
    border-color: white;
}

.btn-outline:hover {
    background: white;
    color: var(--primary-color);
}

.cta-button {
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-mid));
    color: white !important;
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(255, 87, 51, 0.15);
    transition: all 0.3s ease;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.cta-button:hover::before {
    width: 400px;
    height: 400px;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 87, 51, 0.25);
}

/* 鍵盤焦點樣式 - 無障礙 */
.cta-button:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 4px;
}

[data-theme="light"] .cta-button {
    background: linear-gradient(135deg, var(--theme-gradient-light-start), var(--theme-gradient-light-mid));
}

[data-theme="light"] .cta-button:focus-visible {
    outline-color: #2563eb;
}

.tech-button {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
    color: white !important;
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    text-transform: none;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 150px;
}

.tech-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.tech-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
}

.tech-button:hover::before {
    left: 100%;
}

.tech-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

/* 橙色主題按鈕陰影 */
[data-color-theme="orange"] .tech-button {
    box-shadow: 0 4px 15px rgba(255, 87, 51, 0.3);
}

[data-color-theme="orange"] .tech-button:hover {
    box-shadow: 0 6px 25px rgba(255, 87, 51, 0.5);
}

[data-color-theme="orange"] .tech-button:active {
    box-shadow: 0 2px 10px rgba(255, 87, 51, 0.3);
}

/* 綠色主題按鈕陰影 */
[data-color-theme="green"] .tech-button {
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

[data-color-theme="green"] .tech-button:hover {
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5);
}

[data-color-theme="green"] .tech-button:active {
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

/* 紫色主題按鈕陰影 */
[data-color-theme="purple"] .tech-button {
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

[data-color-theme="purple"] .tech-button:hover {
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5);
}

[data-color-theme="purple"] .tech-button:active {
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

/* 紅色主題按鈕陰影 */
[data-color-theme="red"] .tech-button {
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

[data-color-theme="red"] .tech-button:hover {
    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.5);
}

[data-color-theme="red"] .tech-button:active {
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.3);
}

/* 按钮内的span确保在最上层 */
.tech-button span {
    position: relative;
    z-index: 10;
}

/* ===== SECTIONS & CARDS ===== */
.section {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Dark theme section styling - transparent background */
[data-theme="dark"] .section {
    background: transparent;
}

/* Dark theme - subtle glow accent (optional) */
[data-theme="dark"] .section::before {
    opacity: 0;
}

[data-theme="dark"] .section::after {
    opacity: 0;
}

/* Light theme section styling - clean and modern */
[data-theme="light"] .section {
    background: transparent;
}

[data-theme="light"] .section:nth-child(even) {
    background: transparent;
}

/* Remove section borders in light theme */
[data-theme="light"] .section::before {
    display: none;
}

[data-theme="light"] .section::after {
    display: none;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

.section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    position: relative;
    display: block;
    text-align: center;
    color: transparent;
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-mid) 50%, var(--theme-gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 12px rgba(255, 87, 51, 0.5));
    transition: all 0.3s ease;
}

/* Dark theme title with softer glow */
[data-theme="dark"] .section-title {
    color: transparent !important;
    filter: drop-shadow(0 0 15px rgba(255, 87, 51, 0.3)) 
            drop-shadow(0 0 30px rgba(255, 195, 0, 0.15));
}

/* Light theme title styling */
[data-theme="light"] .section-title {
    color: transparent !important;
    background: linear-gradient(135deg, var(--theme-gradient-light-start) 0%, var(--theme-gradient-light-mid) 50%, var(--theme-gradient-light-end) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.12)) !important;
}

/* Title underline decoration */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #FF5733, transparent);
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(255, 87, 51, 0.4);
}

/* Section subtitle */
.section-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    display: block;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

[data-theme="light"] .section-subtitle {
    color: rgba(0, 0, 0, 0.7);
}

/* Showcase title */
.showcase-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    display: block;
    margin: 0 auto 2rem;
}

[data-theme="light"] .showcase-title {
    color: #2c3e50;
}

[data-theme="light"] .section-title::after {
    background: linear-gradient(90deg, transparent, #3b82f6, transparent) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
}

.section-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 300ms;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #FF5733 0%, #FFC300 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ===== SERVICE CARDS ===== */
.service-card {
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 300ms;
    position: relative;
}

/* Dark mode: container moves up with canvas */
[data-theme="dark"] .service-card-container:hover {
    transform: translateY(-8px);
}

.service-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.service-content {
    padding: 1.5rem;
}

.service-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #FF5733 0%, #FFC300 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-content p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* ===== MODAL ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    padding: 1.5rem;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: 1rem;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
    animation: slideIn 300ms ease-out;
}

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

.modal-close {
    position: fixed !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10001 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-secondary);
    transition: all 300ms;
}

.modal-close:hover {
    background: var(--border-color);
    transform: rotate(90deg);
}

/* ===== FORM ELEMENTS ===== */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-family: inherit;
    font-size: 1rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 300ms;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* ===== FOOTER ===== */
.footer {
    padding: 60px 5% 20px;
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0,0,0,0.2);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 40px;
}

.footer-logo-section p {
    margin-top: 15px;
    line-height: 1.7;
    max-width: 300px;
    color: rgba(255, 255, 255, 0.8); /* 提高亮度 */
    font-size: 1.3rem; /* 進一步增大字體 */
    font-weight: 600; /* 加粗 */
}

.footer-contact h4 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 600;
    background: linear-gradient(135deg, #FF5733 0%, #FFC300 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-contact ul {
    list-style: none;
    padding: 0;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.footer-contact svg {
    width: 18px;
    height: 18px;
    color: var(--primary-accent);
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px var(--primary-accent));
    transition: all 0.3s ease;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-contact a:hover {
    color: var(--primary-accent);
    text-shadow: 0 0 8px var(--primary-accent);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.1rem; /* 進一步增大字體 */
    font-weight: 500; /* 稍微加粗 */
}

.footer-bottom a {
    color: var(--primary-accent) !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.footer-bottom a:hover {
    color: var(--secondary-accent) !important;
    text-shadow: 0 0 8px var(--primary-accent);
}

.footer-title {
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: #cbd5e1;
    transition: all 300ms ease;
}

.footer-links a:hover {
    color: var(--primary-accent);
    text-shadow: 0 0 8px var(--primary-accent);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #334155;
    color: #94a3b8;
}

/* ===== RESPONSIVE DESIGN ===== */
/* Tablet & Mobile */
@media (max-width: 992px) {
    .section {
        padding: 4rem 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .news-card {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    
    .news-image-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 250px !important;
    }
    
    .news-content {
        position: relative !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: -50px !important;
        background: rgba(30, 41, 59, 0.95) !important;
    }
}

/* Mobile Only */
/* ===== 平板優化 (768px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .header {
        padding: 0.75rem 1.5rem !important;
    }
    
    .nav-logo {
        font-size: 1.1rem !important;
        gap: 8px !important;
    }
    
    .nav-logo img {
        height: 28px !important;
    }
    
    .nav-menu {
        gap: 10px !important;
    }
    
    .nav-item {
        font-size: 0.9rem !important;
        padding: 8px 12px !important;
    }
    
    .theme-toggle-nav,
    .performance-toggle {
        width: 36px !important;
        height: 36px !important;
    }
    
    .theme-toggle-nav svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .performance-toggle {
        font-size: 1rem !important;
    }
    
    /* 平板尺寸下隱藏漢堡選單按鈕 */
    .mobile-menu-toggle {
        display: none !important;
    }
}
@media (max-width: 768px) {
    /* ✅ 移动端：只显示 logo 和菜单按钮 */
    .nav-menu {
        display: none !important;
    }
    
    .header {
        padding: 1rem !important;
        justify-content: space-between !important;
    }
    
    .nav-logo {
        font-size: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important; /* ✅ 防止被压缩 */
    }
    
    .nav-logo img {
        width: auto !important; /* ✅ 自动宽度 */
        height: 40px !important; /* ✅ 只设置高度，保持比例 */
        object-fit: contain !important; /* ✅ 保持原始比例 */
        flex-shrink: 0 !important; /* ✅ 防止被 flex 压缩 */
    }
    
    .mobile-menu-toggle {
        display: flex !important;
        flex-shrink: 0 !important; /* ✅ 防止菜单按钮被压缩 */
    }
    
    /* Hide desktop nav */
    header nav {
        display: none;
    }
    
    /* Mobile menu overlay visible */
    .mobile-menu-overlay {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Sections */
    .section {
        padding: 3rem 0;
    }
    
    #hero-particle-container {
        min-height: 300px !important;
        height: 40vh !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-tagline {
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }
    
    /* Service cards */
    .service-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* About section */
    .about-content {
        flex-direction: column;
        padding: 0 1rem;
        gap: 2rem;
    }
    
    .about-image-container {
        flex: 0 0 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .about-text {
        text-align: center;
    }
    
    .about-text p {
        text-align: left;
    }
    
    /* News section */
    .news-grid {
        padding: 0 1rem;
    }
    
    .news-image-wrapper {
        height: 200px !important;
        margin-top: 0 !important;
    }
    
    .news-content {
        padding: 1.5rem !important;
        margin-top: -40px !important;
    }
    
    /* 3D Scanning section */
    .scan-container {
        flex-direction: column;
    }
    
    .image-top-wrapper {
        height: 300px;
    }
    
    .scanning-features {
        padding: 2rem 1rem;
    }
    
    /* Contact form */
    .contact-form {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .form-group {
        width: 100%;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-section {
        align-items: center;
    }
    
    /* Function panel */
    .function-panel {
        position: fixed !important;
        right: 10px !important;
        top: 50% !important; /* 垂直置中 */
        transform: translateY(-50%) !important; /* 垂直置中 */
        z-index: 10003 !important;
        display: flex !important;
        flex-direction: column-reverse !important; /* 按鈕在下，面板在上 */
        align-items: center !important;
        gap: 5px !important;
    }
    
    .function-toggle {
        border-radius: 50%;
        width: 60px; /* ✅ 增大触摸区域 */
        height: 60px; /* ✅ 增大触摸区域 */
        -webkit-tap-highlight-color: transparent; /* ✅ 移除触摸高亮 */
        touch-action: manipulation; /* ✅ 优化触摸响应 */
        user-select: none; /* ✅ 防止长按选择 */
        -webkit-user-select: none;
    }
    
    .function-toggle-icon {
        pointer-events: none; /* ✅ 确保点击事件传递到按钮 */
    }
    
    /* ✅ 移动端：全屏模态框显示 */
    .function-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 3rem 1.5rem !important;
        transform: none !important;
        border-radius: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        background: rgba(0, 0, 0, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border: none !important;
        z-index: 10004 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        transition: opacity 0.4s ease, visibility 0.4s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 白晝模式全螢幕背景 */
    [data-theme="light"] .function-content {
        background: rgba(255, 255, 255, 0.98) !important;
    }
    
    .function-panel.active .function-content {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* ✅ 全屏模态框内部容器 */
    .function-content > * {
        animation: slideInUp 0.4s ease-out !important;
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* ✅ 调整主题标题样式 */
    .function-title {
        font-size: 1.5rem !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
        color: var(--primary-accent) !important;
        font-weight: 600 !important;
    }
    
    /* ✅ 移动端內容區域 */
    .function-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 2.5rem !important;
    }
    
    /* ✅ 调整主题选项布局 */
    .theme-options {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 2rem !important;
        padding: 2rem 0 !important;
        width: 100% !important;
    }
    
    /* ✅ active 状态时给按钮添加视觉反馈 */
    .function-panel.active .function-toggle {
        background: rgba(255, 87, 51, 0.3) !important;
        box-shadow: 0 0 20px rgba(255, 87, 51, 0.6) !important;
        transform: rotate(180deg) !important;
        transition: all 0.4s ease !important;
    }
    
    /* ✅ 移动端：更大的主题选项 */
    .theme-option {
        width: 70px !important; /* ✅ 全屏模式下更大 */
        height: 70px !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .theme-option:active {
        transform: scale(0.9) !important;
    }
    
    .theme-option.active {
        border-width: 4px !important;
        transform: scale(1.2) !important;
    }
    
    /* ✅ 添加关闭提示 */
    .function-content::before {
        content: '點擊外部區域關閉' !important;
        position: absolute !important;
        bottom: 2rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 0.875rem !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    /* 白晝模式關閉提示 */
    [data-theme="light"] .function-content::before {
        color: rgba(0, 0, 0, 0.4) !important;
    }
    
    /* ✅ 优化社交联系按钮 */
    .social-contacts {
        display: flex !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        margin-top: 1rem !important;
    }
    
    .social-icon {
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255, 87, 51, 0.1) !important;
        border: 2px solid var(--primary-accent) !important;
        transition: all 0.3s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .social-icon:active {
        transform: scale(0.9) !important;
        background: rgba(255, 87, 51, 0.3) !important;
    }
    
    /* Back to top button */
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
    }
    
    /* ✅ 移动端按钮优化 */
    .tech-button {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.95rem !important;
        min-height: 48px !important; /* 触摸友好的最小高度 */
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* ✅ 服务卡片图片 4:3 比例 */
    .service-card-image {
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
    }
    
    .service-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    /* ✅ 服务卡片内页移动端优化 */
    .service-modal {
        padding: 0 !important;
    }
    
    .service-modal-content {
        width: 95% !important;
        margin: 1rem auto !important;
        padding: 0.5rem !important;
        border-radius: 12px !important;
    }
    
    .service-modal-body {
        padding: 1rem !important;
        overflow-x: hidden !important;
    }
    
    /* 确保所有内容容器居中 */
    .tech-bg,
    .service-section,
    .battery-section,
    .ac-section,
    .rescue-section,
    .charter-section,
    .bike-section,
    .modification-section {
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 网格布局优化为单列 */
    .grid,
    .md\:grid-cols-2,
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* 文字对齐优化 */
    .section-title,
    .section-subtitle,
    h1, h2, h3 {
        text-align: center !important;
    }
    
    /* 关闭按钮位置优化 */
    .service-modal-close {
        top: 0.5rem !important;
        right: 0.5rem !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 1.5rem !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .section {
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
    
    .contact-form {
        padding: 1.5rem 1rem;
    }
    
    .btn,
    .cta-button,
    .learn-more {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* ===== LIGHT THEME OVERRIDES ===== */
[data-theme="light"] {
    --bg-1: transparent;
    --bg-2: transparent;
    --border: 1px solid rgba(0, 0, 0, 0.08);
    --text-1: #2c3e50;
    --text-2: #2c3e50;
    --primary-accent: #FF5733;
    --secondary-accent: #FFC300;
    --glass-bg: rgba(255, 255, 255, 0.9);
}

/* 白晝模式：優雅的漸層背景 - 使用 body::before 以不遮擋粒子 */
[data-theme="light"] html {
    background: #f8f9fb !important; /* 純色作為最底層 */
    min-height: 100vh;
}

[data-theme="light"] body {
    background: transparent !important;
    position: relative;
}

/* 漸層背景層 - z-index -2 在粒子後面 */
[data-theme="light"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(245, 247, 250, 0.5) 0%, 
        rgba(232, 236, 241, 0.5) 25%,
        rgba(240, 244, 248, 0.5) 50%,
        rgba(227, 233, 240, 0.5) 75%,
        rgba(245, 247, 250, 0.5) 100%);
    z-index: -2;
    pointer-events: none;
}

/* 確保main元素背景透明且不遮擋粒子 */
[data-theme="light"] main {
    background: transparent !important;
    --glass-border: 1px solid rgba(255, 255, 255, 0.3);
    --glow-color: #FFD700;
    --text-primary: #2c3e50;
    --text-secondary: #2c3e50;
}

[data-theme="light"] .tech-card,
[data-theme="light"] .case-card,
[data-theme="light"] .battery-aside-card {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #2c3e50 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease;
}

[data-theme="light"] .tech-card:hover,
[data-theme="light"] .case-card:hover,
[data-theme="light"] .battery-aside-card:hover {
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.15), 0 6px 12px rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    transform: translateY(-4px);
}

/* 修復核心優勢標題顏色 */
[data-theme="light"] .battery-aside-card h4 {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700;
}

/* 修復磷酸鐵鋰優勢標題顏色 - 跟隨主題色系 */
[data-theme="light"] .advantage-title-blue {
    color: #2563eb !important; /* 深藍色 - 白晝模式主題藍 */
}

[data-theme="light"] .advantage-title-purple {
    color: #7c3aed !important; /* 深紫色 - 白晝模式主題紫 */
}

/* 修復優勢項目說明文字顏色 */
[data-theme="light"] .advantage-item p {
    color: #64748b !important; /* 中灰色 - 保持可讀性 */
}

/* 修復漸層文字在白晝模式下的對比度 */
[data-theme="light"] .gradient-text-green {
    background: linear-gradient(135deg, #059669, #2563eb) !important; /* 更深的綠藍漸層 */
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 修復服務卡片標題顏色 - 跟隨主題色系 */
[data-theme="light"] .service-card h3 {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* 修復其他標題的白晝模式顏色 */
[data-theme="light"] .card h3,
[data-theme="light"] .service-content h3,
[data-theme="light"] .footer-contact h4 {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="light"] .footer-logo-section p {
    color: #2c3e50 !important; /* 白晝模式下使用深色 */
}

[data-theme="light"] .footer-bottom {
    color: #2c3e50 !important; /* 白晝模式下使用深色 */
}

/* 修復模態窗口內標題顏色 - 跟隨主題色系 */
.modal-section-title {
    background: linear-gradient(135deg, #FF5733, #FFC300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .modal-section-title {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 修復模態窗口內所有 h2, h3, h4 標題的顏色 */
[data-theme="light"] .service-modal h2,
[data-theme="light"] .service-modal h3,
[data-theme="light"] .service-modal h4 {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* 為暗色模式的模態窗口標題保持原有漸層 */
[data-theme="dark"] .service-modal h2,
[data-theme="dark"] .service-modal h3,
[data-theme="dark"] .service-modal h4 {
    background: linear-gradient(135deg, #FF5733, #FFC300) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: #2c3e50 !important;
}

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] span {
    color: #2c3e50 !important;
}

[data-theme="light"] .gallery-item h4,
[data-theme="light"] .gallery-item h3,
[data-theme="light"] .gallery-item p,
[data-theme="light"] .gallery-square h4,
[data-theme="light"] .gallery-square h3,
[data-theme="light"] .gallery-square p {
    color: #ffffff !important;
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea {
    background: transparent !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    color: #2c3e50 !important;
}

[data-theme="light"] .form-label {
    color: #666666 !important;
}

[data-theme="light"] .form-select {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #2c3e50 !important;
}

[data-theme="light"] .select-options {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    z-index: 1001 !important;
}

[data-theme="light"] .bike-stat,
[data-theme="light"] .bike-hero-badge,
[data-theme="light"] .bike-floating-card,
[data-theme="light"] .bike-feature-card,
[data-theme="light"] .bike-tier-card {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease;
}

[data-theme="light"] .bike-floating-card:hover,
[data-theme="light"] .bike-feature-card:hover,
[data-theme="light"] .bike-tier-card:hover {
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.15), 0 6px 12px rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    transform: translateY(-4px);
}

[data-theme="light"] .bike-stat h4,
[data-theme="light"] .bike-stat p,
[data-theme="light"] .bike-hero-badge h4,
[data-theme="light"] .bike-hero-badge p,
[data-theme="light"] .bike-floating-card h3,
[data-theme="light"] .bike-floating-card h4,
[data-theme="light"] .bike-floating-card p,
[data-theme="light"] .bike-feature-card h4,
[data-theme="light"] .bike-feature-card p,
[data-theme="light"] .bike-tier-card h4,
[data-theme="light"] .bike-tier-card p,
[data-theme="light"] .bike-tier-card li {
    color: #2c3e50 !important;
}

[data-theme="light"] .journey-feature-card h4,
[data-theme="light"] .journey-feature-card h3 {
    color: #1f2937 !important; /* 深色單色 */
    background: none !important; /* 移除漸層 */
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    text-shadow: none !important; /* 移除陰影 */
}

[data-theme="light"] .journey-feature-card p,
[data-theme="light"] .journey-feature-card li {
    color: #ffffff !important;
}

[data-theme="light"] .hero-image-badge,
[data-theme="light"] .meta-item,
[data-theme="light"] .highlight-card,
[data-theme="light"] .journey-step,
[data-theme="light"] .charter-gallery-card,
[data-theme="light"] .itinerary-card,
[data-theme="light"] .ai-benefit,
[data-theme="light"] .ai-result-card,
[data-theme="light"] .final-cta-card {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease;
}

[data-theme="light"] .highlight-card:hover,
[data-theme="light"] .journey-step:hover,
[data-theme="light"] .charter-gallery-card:hover,
[data-theme="light"] .itinerary-card:hover,
[data-theme="light"] .ai-benefit:hover,
[data-theme="light"] .ai-result-card:hover,
[data-theme="light"] .final-cta-card:hover {
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.15), 0 6px 12px rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    transform: translateY(-4px);
}

[data-theme="light"] .hero-image-badge h3,
[data-theme="light"] .meta-item h4,
[data-theme="light"] .highlight-card h4,
[data-theme="light"] .journey-step h4,
[data-theme="light"] .charter-gallery-card h4,
[data-theme="light"] .itinerary-card h4,
[data-theme="light"] .ai-benefit h4,
[data-theme="light"] .ai-result-card h4,
[data-theme="light"] .final-cta-card h4,
[data-theme="light"] .hero-image-badge p,
[data-theme="light"] .meta-item p,
[data-theme="light"] .highlight-card p,
[data-theme="light"] .journey-step p,
[data-theme="light"] .charter-gallery-card p,
[data-theme="light"] .itinerary-card p,
[data-theme="light"] .ai-benefit p,
[data-theme="light"] .ai-result-card p,
[data-theme="light"] .final-cta-card p {
    color: #2c3e50 !important;
}

[data-theme="light"] .service-modal-content {
    background: transparent !important;
}

[data-theme="light"] .service-modal-content h1,
[data-theme="light"] .service-modal-content h2,
[data-theme="light"] .service-modal-content h3,
[data-theme="light"] .service-modal-content h4 {
    color: #ffffff !important;
}

[data-theme="light"] #service-content-battery,
[data-theme="light"] #service-content-ac,
[data-theme="light"] #service-content-rescue,
[data-theme="light"] #service-content-charter,
[data-theme="light"] #service-content-bike,
[data-theme="light"] #service-content-modification {
    background: transparent !important;
}

[data-theme="light"] .nav-item {
    color: #4b5563 !important;
    font-weight: 600;
    border-radius: 8px;
}

[data-theme="light"] .nav-item:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

[data-theme="light"] .nav-item.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--theme-gradient-light-start) 0%, var(--theme-gradient-light-mid) 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* 白昼模式按钮优化 */
[data-theme="light"] .theme-toggle-nav,
[data-theme="light"] .performance-toggle {
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    color: #4b5563;
    transition: all 0.3s ease;
}

[data-theme="light"] .theme-toggle-nav:hover,
[data-theme="light"] .performance-toggle:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transform: scale(1.05);
}

[data-theme="light"] .theme-toggle-nav svg {
    color: #4b5563;
}
[data-theme="light"] .theme-toggle-nav:hover svg {
    color: #ffffff;
}

/* ===== FIX FOR ACTUAL HTML STRUCTURE ===== */

/* Header and Navigation - CRITICAL */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-bottom-color 0.3s ease;
}

.header.scrolled {
    background-color: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .header {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

[data-theme="light"] .header.scrolled {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Nav Logo */
.nav-logo {
    font-size: 24px;
    font-weight: 900;
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
        gap: 10px;
    z-index: 10;
}

[data-theme="light"] .nav-logo {
    color: #2c3e50;
}

.nav-logo img {
    height: 32px;
    width: auto;
}

.nav-logo span { 
    color: #FF5733;
}

/* Nav Menu with Gooey Effect */
.nav-menu {
    display: flex;
    gap: 15px;
    align-items: center;
    position: relative;
    filter: url(#gooey);
    list-style: none;
}

/* Nav Indicator - 移動的背景指示器 */
.nav-indicator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    background: var(--primary-accent);
    border-radius: 20px;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: -1;
    pointer-events: none;
}

/* Nav Items */
.nav-item {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 600;
    padding: 10px 20px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    border-radius: 8px;
    display: inline-block;
}

/* 鍵盤焦點樣式 - 無障礙 */
.nav-item:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 3px;
}

[data-theme="light"] .nav-item:focus-visible {
    outline-color: #2563eb;
}

[data-theme="light"] .nav-item {
    color: #64748b;
}

.nav-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-mid) 100%);
    box-shadow: 0 4px 12px rgba(255, 87, 51, 0.4);
}

[data-theme="light"] .nav-item.active {
    color: #ffffff;
}

.nav-item:not(.active):hover {
    color: #FFFFFF;
    background: linear-gradient(135deg, rgba(255, 195, 0, 0.2) 0%, rgba(255, 87, 51, 0.2) 100%);
    transform: translateY(-1px);
}

[data-theme="light"] .nav-item:not(.active):hover {
    color: #2c3e50;
}

.theme-toggle-nav {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 300ms;
    margin-left: auto;
}

.theme-toggle-nav:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* 鍵盤焦點樣式 - 無障礙 */
.theme-toggle-nav:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 3px;
}

[data-theme="light"] .theme-toggle-nav:focus-visible {
    outline-color: #2563eb;
}

.theme-toggle-nav svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* 黑夜模式：圖標使用主題橙色 */
[data-theme="dark"] .theme-toggle-nav svg,
[data-theme="dark"] .theme-toggle-nav {
    color: var(--primary-accent);
}

/* 亮色模式：圖標使用深灰色 */
[data-theme="light"] .theme-toggle-nav svg,
[data-theme="light"] .theme-toggle-nav {
    color: #4a5568;
}

.performance-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 300ms;
    padding: 0.5rem;
}

/* 黑夜模式：性能切換按鈕使用主題色 */
[data-theme="dark"] .performance-toggle {
    color: var(--primary-accent);
}

/* 白晝模式：隱藏性能切換按鈕（閃電icon） */
[data-theme="light"] .performance-toggle {
    display: none !important;
}

/* 黑夜模式：顯示性能切換按鈕 */
[data-theme="dark"] .performance-toggle {
    display: flex !important;
}

.performance-toggle:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* 鍵盤焦點樣式 - 無障礙 */
.performance-toggle:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 3px;
}

[data-theme="light"] .performance-toggle:focus-visible {
    outline-color: #2563eb;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all 300ms;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        display: none;
    }
    
    .theme-toggle-nav {
        margin-left: 0;
    }
    
    /* 新聞區塊響應式 */
    .news-card, 
    .news-card:nth-child(odd) {
        grid-template-columns: 1fr;
    }
    
    .news-card .news-image-wrapper, 
    .news-card:nth-child(odd) .news-image-wrapper {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    
    .news-card .news-content, 
    .news-card:nth-child(odd) .news-content {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
        background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        margin-top: -50px;
        padding: 30px;
    }
    
    .news-grid {
        gap: 60px;
    }
    
    /* 3D 掃描動畫響應式 */
    .scanning-animation-container {
        padding: 1rem;
    }
    
    .scan-container {
        border-radius: 0.5rem;
    }
    
.scanning-features {
        gap: 0.75rem;
        margin-top: 1.5rem;
}

.feature-item {
        padding: 0.4rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    .feature-icon {
        font-size: 1.125rem;
    }
    
    .feature-item span {
        font-size: 0.8125rem;
    }
}

/* ===== LIGHT HERO CAROUSEL ===== */
/* ===== 全屏轮播 - Sequence.js 侧滑风格 ===== */
.light-hero-carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    margin-top: 0;
    padding: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: none;
    overflow: hidden;
    contain: layout style paint; /* CSS Containment 性能優化 */
}

/* 減少動畫偏好設置 - 無障礙 */
@media (prefers-reduced-motion: reduce) {
    .light-hero-carousel *,
    .light-hero-carousel *::before,
    .light-hero-carousel *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

[data-theme="dark"] .light-hero-carousel {
    display: none !important;
}

[data-theme="light"] .light-hero-carousel {
    display: block;
    /* 白昼模式 - 简练优雅的浅色渐变 */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* 轮播容器 */
.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* 幻灯片基础样式 */
.carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0); /* 強制 GPU 加速 */
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* 背景渐变覆盖层 */
.carousel-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(26, 26, 46, 0.7) 0%,
        rgba(26, 26, 46, 0.3) 50%,
        rgba(26, 26, 46, 0.7) 100%
    );
    z-index: 0;
}

/* 白昼模式 - 柔和的浅色覆盖层 */
[data-theme="light"] .carousel-slide::before {
    background: linear-gradient(
        to right,
        rgba(248, 249, 250, 0.4) 0%,
        rgba(248, 249, 250, 0.1) 50%,
        rgba(248, 249, 250, 0.4) 100%
    );
}

/* 隐藏原始 img，我们将在 JS 中处理图片 */
.carousel-slide > img {
    display: none;
}

/* 图片容器 - 左侧 */
.carousel-slide-image {
    position: relative;
    flex: 0 0 40%;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0;
    transform: translate3d(80px, 0, 0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity; /* GPU 加速 */
    backface-visibility: hidden; /* 防止閃爍 */
}

/* 白昼模式：在图片后添加主题色圓形背景 */
[data-theme="light"] .carousel-slide-image::before {
    content: '';
    position: absolute;
    width: min(600px, 80vmin);  /* 使用 vmin 確保正圓 */
    height: min(600px, 80vmin); /* 寬高相同 */
    border-radius: 50%;
    aspect-ratio: 1 / 1;  /* 強制 1:1 比例 */
    background: linear-gradient(135deg, 
        var(--theme-gradient-light-start) 0%, 
        var(--theme-gradient-light-mid) 50%, 
        var(--theme-gradient-light-end) 100%
    );
    opacity: 0;
    z-index: -1;
    transform: scale(0.8);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
    will-change: transform, opacity; /* 性能優化 */
}

/* 電池輪播頁面：移除圓形背景 */
.battery-slide .carousel-slide-image::before {
    display: none !important;
}

/* 圆形进入动画 */
.carousel-slide.active[data-theme="light"] .carousel-slide-image::before,
[data-theme="light"] .carousel-slide.active .carousel-slide-image::before {
    opacity: 0.5;
    transform: scale(1);
    transition-delay: 0.3s;
    animation: carousel-circle-pulse 8s ease-in-out infinite;
    animation-delay: 0.3s;
}

/* 圆形退出动画 */
.carousel-slide.slide-out[data-theme="light"] .carousel-slide-image::before,
[data-theme="light"] .carousel-slide.slide-out .carousel-slide-image::before {
    opacity: 0;
    transform: scale(0.8);
    transition-delay: 0s;
    animation: none;
}

@keyframes carousel-circle-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.65;
    }
}

.carousel-slide.active .carousel-slide-image {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.5s;
}

.carousel-slide.slide-out .carousel-slide-image {
    opacity: 0;
    transform: translate3d(-80px, 0, 0);
    transition-delay: 0s;
}

.carousel-slide-image img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;
    /* filter: drop-shadow(0 20px 50px rgba(36, 32, 56, 0.5)); */
}

/* 文字内容 - 右侧 */
.carousel-slide-content {
    position: relative;
    flex: 0 0 50%;
    z-index: 1;
    padding-left: 4%;
}

/* Sequence.js 风格标题 */
.carousel-title {
    display: inline-block;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 700;
    margin-bottom: 1.2rem;
    padding: 0.3em 0.6em;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #ffffff;
    background: #000000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translate3d(-120px, 0, 0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 白昼模式 - 简练的线框标题 */
[data-theme="light"] .carousel-title {
    position: relative;
    color: #1a252f;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid rgba(26, 37, 47, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    font-weight: 900;
    overflow: visible;
    z-index: 1;
}

/* 流光边框效果 - 沿着边缘流动 */
[data-theme="light"] .carousel-title::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--theme-gradient-light-start) 45%,
        var(--theme-gradient-light-mid) 50%,
        var(--theme-gradient-light-end) 55%,
        transparent 100%
    );
    background-size: 200% 100%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 3px;
    animation: carousel-border-sweep 3s linear infinite;
    pointer-events: none;
    z-index: -1;
    opacity: 1;
}

@keyframes carousel-border-sweep {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.carousel-slide.active .carousel-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.carousel-slide.slide-out .carousel-title {
    opacity: 0;
    transform: translate3d(-120px, 0, 0);
    transition-delay: 0s;
}

.carousel-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 2rem);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 300;
    line-height: 1.6;
    max-width: 600px;
    opacity: 0;
    transform: translate3d(120px, 0, 0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 白昼模式 - 深色优雅文字 */
[data-theme="light"] .carousel-subtitle {
    color: #2c3e50;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.carousel-slide.active .carousel-subtitle {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.15s;
}

.carousel-slide.slide-out .carousel-subtitle {
    opacity: 0;
    transform: translate3d(120px, 0, 0);
    transition-delay: 0s;
}

/* 简约箭头按钮 - Sequence.js 风格 */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 50px;
    height: 80px;
    cursor: pointer;
    display: none; /* 隱藏箭頭 */
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100;
    will-change: transform;
    backface-visibility: hidden;
}

/* 鍵盤焦點樣式 - 無障礙 */
.carousel-arrow:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 4px;
    color: rgba(255, 255, 255, 1);
}

[data-theme="light"] .carousel-arrow:focus-visible {
    outline-color: #2563eb;
    color: rgba(44, 62, 80, 1);
}

.carousel-arrow:hover {
    color: rgba(255, 255, 255, 1);
}

/* 白昼模式 - 深色优雅箭头 */
[data-theme="light"] .carousel-arrow {
    color: rgba(44, 62, 80, 0.5);
}

[data-theme="light"] .carousel-arrow:hover {
    color: rgba(44, 62, 80, 1);
}

.carousel-arrow-left {
    left: 2rem;
}

.carousel-arrow-left:hover {
    transform: translateY(-50%) translate3d(-6px, 0, 0);
}

.carousel-arrow-right {
    right: 2rem;
}

.carousel-arrow-right:hover {
    transform: translateY(-50%) translate3d(6px, 0, 0);
}

.carousel-arrow svg {
    width: 35px;
    height: 70px;
    stroke: currentColor;
    stroke-width: 3;
    fill: none;
}

/* 白昼模式 - 更细的线条 */
[data-theme="light"] .carousel-arrow svg {
    stroke-width: 2.5;
}

/* 缩略图分页 - Sequence.js 风格 */
.carousel-dots {
    display: flex;
    justify-content: flex-end;
    gap: 1.2rem;
    position: absolute;
    bottom: 3rem;
    right: 8%;
    z-index: 10;
    padding: 0;
    margin: 0;
}

.carousel-dot {
    width: 80px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
}

/* 鍵盤焦點樣式 - 無障礙 */
.carousel-dot:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    opacity: 1;
}

[data-theme="light"] .carousel-dot:focus-visible {
    outline-color: #2563eb;
}

/* 白昼模式 - 简练边框缩略图 */
[data-theme="light"] .carousel-dot {
    border: 2px solid rgba(44, 62, 80, 0.2);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.carousel-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-dot:hover {
    opacity: 0.7;
    transform: translate3d(0, -4px, 0);
}

[data-theme="light"] .carousel-dot:hover {
    opacity: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.carousel-dot.active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.8);
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .carousel-dot.active {
    border-color: #2c3e50;
    box-shadow: 0 8px 24px rgba(44, 62, 80, 0.2);
}

/* 简约进度条 */
.carousel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 10;
}

/* 白昼模式 - 深色进度条 */
[data-theme="light"] .carousel-progress {
    background: rgba(44, 62, 80, 0.1);
}

.carousel-progress-bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    width: 33%;
    transition: width 300ms ease;
}

[data-theme="light"] .carousel-progress-bar {
    background: #2c3e50;
}

/* CTA 按钮 - 融入内容 */
.carousel-cta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.carousel-slide.active .carousel-cta {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.7s;
}

.carousel-slide.slide-out .carousel-cta {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition-delay: 0s;
}

.carousel-cta-button {
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    letter-spacing: 0.02em;
    background: transparent;
    color: white;
    white-space: nowrap;
    min-width: 140px;
    max-width: 200px;
    flex-shrink: 0;
    will-change: transform;
    backface-visibility: hidden;
}

/* 鍵盤焦點樣式 - 無障礙 */
.carousel-cta-button:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 4px;
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .carousel-cta-button:focus-visible {
    outline-color: #2563eb;
}

.carousel-cta-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 1);
    transform: translate3d(0, -2px, 0);
}

/* 白昼模式 - 简练线框按钮 */
[data-theme="light"] .carousel-cta-button {
    border: 2px solid rgba(26, 37, 47, 0.5);
    color: #1a252f;
    background: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

[data-theme="light"] .carousel-cta-button:hover {
    border-color: #1a252f;
    background: rgba(26, 37, 47, 0.08);
    color: #0d1419;
}

.carousel-cta-primary {
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a2e;
    border-color: rgba(255, 255, 255, 0.9);
}
.carousel-cta-primary:hover {
    background: #ffffff;
    color: #2c3e50;
}

/* 白昼模式 - 简练实心主按钮 */
[data-theme="light"] .carousel-cta-button.carousel-cta-primary {
    background: #2c3e50 !important;
    color: #ffffff !important;
    border-color: #2c3e50 !important;
    font-weight: 600;
}

/* 确保按钮内所有元素都是白色 */
[data-theme="light"] .carousel-cta-button.carousel-cta-primary span,
[data-theme="light"] .carousel-cta-button.carousel-cta-primary svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="light"] .carousel-cta-button.carousel-cta-primary:hover {
    background: #1a252f !important;
    border-color: #1a252f !important;
    color: #ffffff !important;
}

[data-theme="light"] .carousel-cta-button.carousel-cta-primary:hover span,
[data-theme="light"] .carousel-cta-button.carousel-cta-primary:hover svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ===== 响应式设计 ===== */
/* 大螢幕筆電 (1200px - 1920px) */
@media (max-width: 1200px) {
    .carousel-slide {
        padding: 0 6%;
    }
    
    .carousel-slide-image {
        flex: 0 0 42%;
    }
    
    .carousel-slide-content {
        flex: 0 0 48%;
        padding-left: 3%;
    }
    
    /* 白晝模式圖片背景調整 */
    [data-theme="light"] .carousel-slide-image::before {
        width: min(540px, 70vmin);
        height: min(540px, 70vmin);
        aspect-ratio: 1 / 1;
    }
}

/* 小螢幕筆電和平板橫向 (768px - 1024px) */
@media (max-width: 1024px) {
    .carousel-slide {
        padding: 0 5%;
    }
    
    .carousel-title {
        font-size: clamp(1.8rem, 4.5vw, 3.5rem);
        padding: 0.28em 0.55em;
    }
    
    .carousel-subtitle {
        font-size: clamp(1rem, 2vw, 1.6rem);
    }
    
    /* 白晝模式標題邊框調整 */
    [data-theme="light"] .carousel-title {
        border-width: 2.5px;
    }
    
    [data-theme="light"] .carousel-title::before {
        top: -2.5px;
        left: -2.5px;
        right: -2.5px;
        bottom: -2.5px;
        padding: 2.5px;
    }
    
    .carousel-dots {
        gap: 0.8rem;
        right: 5%;
    }
    
    .carousel-dot {
        width: 70px;
        height: 50px;
    }
    
    /* 白晝模式箭頭調整 */
    [data-theme="light"] .carousel-arrow svg {
        stroke-width: 2.3;
    }
}

/* 平板直向和大螢幕手機 (最大 768px) */
@media (max-width: 768px) {
    .carousel-slide {
        flex-direction: column;
        justify-content: center;
        padding: 0 5%;
        gap: 1.5rem;
    }
    
    .carousel-slide-image {
        flex: 0 0 auto;
        width: 85%;
        height: 45%;
        max-height: 320px;
        margin-bottom: 1rem;
        align-items: center;
    }
    
    /* 白晝模式圖片調整 */
    [data-theme="light"] .carousel-slide-image::before {
        width: min(400px, 65vmin);
        height: min(400px, 65vmin);
        aspect-ratio: 1 / 1;
    }
    
    .carousel-slide-content {
        flex: 0 0 auto;
        width: 100%;
        padding-left: 0;
        text-align: center;
    }
    
    .carousel-title {
        margin: 0 auto 1rem;
        font-size: clamp(1.6rem, 5.5vw, 2.8rem);
    }
    
    /* 白晝模式標題調整 */
    [data-theme="light"] .carousel-title {
        border-width: 2px;
        font-weight: 800;
    }
    
    [data-theme="light"] .carousel-title::before {
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        padding: 2px;
    }
    
    .carousel-subtitle {
        margin: 0 auto;
        font-size: clamp(0.95rem, 2.2vw, 1.4rem);
    }
    
    .carousel-cta {
        flex-direction: row !important;
        justify-content: center;
        margin-top: 1.5rem;
        gap: 1rem;
    }
    
    .carousel-arrow-left {
        left: 0.75rem;
    }
    
    .carousel-arrow-right {
        right: 0.75rem;
    }
    
    .carousel-arrow svg {
        width: 32px;
        height: 64px;
    }
    
    /* 白晝模式箭頭增強可見度 */
    [data-theme="light"] .carousel-arrow {
        background: rgba(255, 255, 255, 0.6);
        border-radius: 8px;
        width: 44px;
        height: 70px;
    }
    
    [data-theme="light"] .carousel-arrow:hover {
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    /* 平板尺寸：縮小縮略圖 */
    .carousel-dots {
        gap: 0.6rem;
        bottom: 2rem;
        right: 50%;
        transform: translateX(50%);
    }
    
    .carousel-dot {
        width: 52px;
        height: 40px;
        border-width: 1.5px;
    }
    
    /* 白晝模式縮略圖 */
    [data-theme="light"] .carousel-dot {
        border-width: 2px;
    }
}

/* 標準手機 (最大 480px) */
@media (max-width: 480px) {
    .carousel-slide {
        padding: 0 4%;
        gap: 1.2rem;
    }
    
    .carousel-slide-image {
        width: 92%;
        height: 42%;
        max-height: 260px;
    }
    
    /* 白晝模式圖片調整 */
    [data-theme="light"] .carousel-slide-image::before {
        width: min(350px, 60vmin);
        height: min(350px, 60vmin);
        aspect-ratio: 1 / 1;
    }
    
    .carousel-title {
        font-size: clamp(1.4rem, 5.5vw, 2.2rem);
        padding: 0.24em 0.48em;
    }
    
    /* 白晝模式標題更細邊框 */
    [data-theme="light"] .carousel-title {
        border-width: 2px;
        font-weight: 800;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
    }
    
    .carousel-subtitle {
        font-size: clamp(0.88rem, 3.2vw, 1.25rem);
        line-height: 1.5;
    }
    
    /* 手機尺寸：進一步縮小縮略圖並居中 */
    .carousel-dots {
        gap: 0.45rem;
        bottom: 1.5rem;
        right: 50%;
        transform: translateX(50%);
        justify-content: center;
    }
    
    .carousel-dot {
        width: 42px;
        height: 32px;
        border-width: 1.5px;
    }
    
    /* 白晝模式縮略圖優化 */
    [data-theme="light"] .carousel-dot {
        background: rgba(255, 255, 255, 0.9);
        border-width: 1.5px;
    }
    
    .carousel-dot:hover {
        transform: translate3d(0, -2px, 0);
    }
    
    .carousel-dot.active {
        transform: translate3d(0, -1px, 0);
    }
    
    /* 箭頭調整 */
    .carousel-arrow-left {
        left: 0.5rem;
    }
    
    .carousel-arrow-right {
        right: 0.5rem;
    }
    
    .carousel-arrow {
        width: 42px;
        height: 66px;
    }
    
    .carousel-arrow svg {
        width: 28px;
        height: 56px;
    }
    
    /* 白晝模式箭頭 */
    [data-theme="light"] .carousel-arrow {
        width: 40px;
        height: 64px;
        background: rgba(255, 255, 255, 0.7);
    }
    
    /* 保持水平排列 */
    .carousel-cta {
        flex-direction: row !important;
        justify-content: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        margin-top: 1.2rem;
    }
    
    .carousel-cta-button {
        width: auto;
        min-width: 135px;
        max-width: 170px;
        padding: 0.8rem 1.4rem;
        font-size: 0.88rem;
    }
    
    /* 白晝模式按鈕調整 */
    [data-theme="light"] .carousel-cta-button {
        border-width: 1.5px;
    }
}

/* 極小螢幕手機 (最大 360px) */
@media (max-width: 360px) {
    .carousel-slide {
        padding: 0 3%;
    }
    
    .carousel-slide-image {
        width: 94%;
        height: 38%;
        max-height: 220px;
    }
    
    .carousel-title {
        font-size: clamp(1.25rem, 6vw, 2rem);
        padding: 0.22em 0.44em;
    }
    
    .carousel-subtitle {
        font-size: clamp(0.82rem, 3.5vw, 1.15rem);
        line-height: 1.4;
    }
    
    /* 極小螢幕才垂直排列按鈕 */
    .carousel-cta {
        flex-direction: column;
        align-items: center;
        gap: 0.9rem;
        margin-top: 1rem;
    }
    
    .carousel-cta-button {
        width: 100%;
        min-width: 180px;
        max-width: 240px;
        padding: 0.75rem 1.2rem;
        font-size: 0.85rem;
    }
    
    /* 縮略圖進一步調整 */
    .carousel-dot {
        width: 38px;
        height: 29px;
    }
    
    /* 箭頭縮小 */
    .carousel-arrow {
        width: 38px;
        height: 60px;
    }
    
    .carousel-arrow svg {
        width: 26px;
        height: 52px;
    }
    
    [data-theme="light"] .carousel-arrow {
        width: 36px;
        height: 58px;
    }
}

/* ===== 觸摸滑動指示器 ===== */
.swipe-indicator {
    position: absolute;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.swipe-hint {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: swipe-hint-pulse 2s ease-in-out infinite;
}

[data-theme="light"] .swipe-hint {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(44, 62, 80, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.swipe-hint svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

[data-theme="light"] .swipe-hint svg {
    stroke: rgba(44, 62, 80, 0.8);
}

@keyframes swipe-hint-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* 桌面隱藏滑動提示 */
@media (min-width: 769px) {
    .swipe-indicator {
        display: none;
    }
}

/* 手機上調整位置 */
@media (max-width: 768px) {
    .swipe-indicator {
        bottom: 4.5rem;
    }
}

@media (max-width: 480px) {
    .swipe-indicator {
        bottom: 4rem;
    }
    
    .swipe-hint {
        padding: 0.6rem 1.2rem;
        gap: 0.5rem;
        font-size: 0.85rem;
    }
    
    .swipe-hint svg {
        width: 18px;
        height: 18px;
    }
}

/* ===== HERO SECTION ===== */
.section#hero {
    margin-top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 0.5rem;
    padding: 120px 5% 60px;
    z-index: 5;
}

[data-theme="light"] .section#hero {
    display: none;
}

#hero-particle-container {
    width: 100%;
    max-width: 1100px;
    min-height: 420px;
    height: clamp(380px, 52vh, 700px);
    position: relative;
    margin: 0 auto;
    margin-bottom: 1rem;
    overflow: visible; /* 防止粒子文字被裁切 */
}

#hero-particle-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hero-tagline {
    text-align: center;
    color: white;
    margin-bottom: 2rem;
}

.hero-tagline p {
    font-size: 1.125rem;
    margin: 0.5rem 0;
}

.scroll-down {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border: 2px solid white;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
    animation: scroll 2s infinite;
}

.scroll-down::after {
    content: '';
    width: 4px;
    height: 8px;
    background: white;
    border-radius: 2px;
    animation: scrollDot 2s infinite;
}

@keyframes scroll {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes scrollDot {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(16px); opacity: 0; }
}

/* ===== MAIN CONTENT ===== */
#main-content {
    position: relative;
    z-index: 10;
}

/* Hide dynamic backgrounds in light theme */
[data-theme="light"] .dynamic-background {
    display: none !important;
}

[data-theme="light"] .main-background {
    display: none !important;
}

[data-theme="light"] #hero-particle-container {
    display: none !important;
}

/* ===== SERVICE GRID ===== */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-bottom: 4rem;
    padding: 0 1rem;
}

.service-card-container {
    position: relative;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects are theme-specific - see [data-theme="dark"] and [data-theme="light"] sections */

.service-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Dark theme service card */
[data-theme="dark"] .service-card {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .service-card-container:hover .service-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 87, 51, 0.5);
    box-shadow: 0 12px 48px rgba(255, 87, 51, 0.1);
}

/* Light theme service card - elegant glassmorphism with blue theme */
[data-theme="light"] .service-card {
    background: var(--card-bg, rgba(255, 255, 255, 0.4));
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .service-card::before,
[data-theme="light"] .service-card::after,
[data-theme="light"] .tech-card::before,
[data-theme="light"] .tech-card::after,
[data-theme="light"] .service-card-container::before,
[data-theme="light"] .service-card-container::after {
    display: none !important;
}

[data-theme="light"] .service-card-container:hover .service-card {
    background: var(--card-bg-hover, rgba(255, 255, 255, 0.5));
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.08),
        0 16px 64px rgba(59, 130, 246, 0.15);
    transform: scale(1.02);
}

.service-card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    transition: filter 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.service-card:hover .service-card-icon {
    transform: scale(1.1) rotate(5deg);
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #FF5733 0%, #FFC300 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Light theme button fixes */
[data-theme="dark"] a[href="#services"].cta-button,
[data-theme="dark"] button[type="submit"].cta-button {
    color: white !important;
}

/* ===== SECTION TITLES ===== */
/* Main section-title styling is defined earlier in the file */

#main-content .section {
    padding: 4rem 0;
    max-width: 1280px;
    margin: 0 auto;
}

/* ===== CRITICAL FIXES FOR HTML INLINE STYLES ===== */

/* Hide star backgrounds on initial load and light theme */
html[data-theme="light"] .service-card::before,
html[data-theme="light"] .service-card::after,
html[data-theme="light"] .service-modal-content::before,
html[data-theme="light"] .service-modal-content::after {
    display: none !important;
}

/* Loader - make sure it hides after page load */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s, visibility 0.5s;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-logo {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    transform: scale(0.5);
}

/* Main background for dark mode */
.main-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: #000000;
    overflow: hidden;
}

.grid-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-pan 60s linear infinite;
}

@keyframes grid-pan {
    0% { background-position: 0 0; }
    100% { background-position: 500px 500px; }
}

.background-spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(255, 87, 51, 0.15) 0%, transparent 30%);
    transition: background 0.2s ease-out;
    pointer-events: none;
}

/* Function panel - star toggle on right */
.function-panel {
    position: fixed;
    right: 20px;
    top: 50%; /* 垂直置中 */
    transform: translateY(-50%); /* 垂直置中 */
    z-index: 10002;
    display: flex;
    flex-direction: column-reverse; /* 按鈕在下，面板在上 */
    align-items: center; /* 水平置中 */
    gap: 5px; /* 縮小間距 */
    pointer-events: auto;
}

.function-toggle {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid var(--primary-accent);
    border-radius: 50% 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 300ms;
    pointer-events: auto;
    box-shadow: 0 4px 16px var(--primary-accent);
}

.function-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--secondary-accent);
    box-shadow: 0 6px 24px var(--primary-accent);
    transform: translateX(-2px);
}

.function-toggle-icon {
    width: 24px;
    height: 24px;
    color: var(--primary-accent);
    filter: drop-shadow(0 0 4px var(--primary-accent));
}

.function-content {
    position: absolute;
    right: 100%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 1rem 0 0 1rem;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 300ms;
    min-width: 200px;
    pointer-events: none;
}

.function-panel.active .function-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.function-section {
    margin-bottom: 1.5rem;
}

.function-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.theme-options {
    display: flex;
    gap: 0.5rem;
}

.theme-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 300ms;
    pointer-events: auto;
}

.theme-option.active {
    border-color: white;
    transform: scale(1.1);
}

/* 主題色方案選項 */
.theme-orange { background: linear-gradient(135deg, #FF5733, #FFC300); }
.theme-blue { background: linear-gradient(135deg, #3B82F6, #60A5FA); }
.theme-green { background: linear-gradient(135deg, #10B981, #34D399); }
.theme-purple { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
.theme-red { background: linear-gradient(135deg, #EF4444, #F87171); }
.theme-pink { background: linear-gradient(135deg, #EC4899, #F472B6); }
.theme-cyan { background: linear-gradient(135deg, #06B6D4, #22D3EE); }
.theme-yellow { background: linear-gradient(135deg, #F59E0B, #FCD34D); }

/* 主題色系統 - 橘黃色 */
[data-color-theme="orange"] {
    --theme-gradient-start: #FF5733;
    --theme-gradient-mid: #FFC300;
    --theme-gradient-end: #FF5733;
    --theme-gradient-light-start: #ea580c;
    --theme-gradient-light-mid: #fb923c;
    --theme-gradient-light-end: #fbbf24;
}

/* 主題色系統 - 藍色 */
[data-color-theme="blue"] {
    --theme-gradient-start: #3B82F6;
    --theme-gradient-mid: #60A5FA;
    --theme-gradient-end: #3B82F6;
    --theme-gradient-light-start: #1e40af;
    --theme-gradient-light-mid: #3b82f6;
    --theme-gradient-light-end: #60a5fa;
}

/* 主題色系統 - 綠色 */
[data-color-theme="green"] {
    --theme-gradient-start: #10B981;
    --theme-gradient-mid: #34D399;
    --theme-gradient-end: #10B981;
    --theme-gradient-light-start: #059669;
    --theme-gradient-light-mid: #10b981;
    --theme-gradient-light-end: #34d399;
}

/* 主題色系統 - 紫色 */
[data-color-theme="purple"] {
    --theme-gradient-start: #8B5CF6;
    --theme-gradient-mid: #A78BFA;
    --theme-gradient-end: #8B5CF6;
    --theme-gradient-light-start: #7c3aed;
    --theme-gradient-light-mid: #8b5cf6;
    --theme-gradient-light-end: #a78bfa;
}

/* 主題色系統 - 紅色 */
[data-color-theme="red"] {
    --theme-gradient-start: #EF4444;
    --theme-gradient-mid: #F87171;
    --theme-gradient-end: #EF4444;
    --theme-gradient-light-start: #dc2626;
    --theme-gradient-light-mid: #ef4444;
    --theme-gradient-light-end: #f87171;
}

/* 主題色系統 - 粉色 */
[data-color-theme="pink"] {
    --theme-gradient-start: #EC4899;
    --theme-gradient-mid: #F472B6;
    --theme-gradient-end: #EC4899;
    --theme-gradient-light-start: #db2777;
    --theme-gradient-light-mid: #ec4899;
    --theme-gradient-light-end: #f472b6;
}

/* 主題色系統 - 青色 */
[data-color-theme="cyan"] {
    --theme-gradient-start: #06B6D4;
    --theme-gradient-mid: #22D3EE;
    --theme-gradient-end: #06B6D4;
    --theme-gradient-light-start: #0e7490;
    --theme-gradient-light-mid: #06b6d4;
    --theme-gradient-light-end: #22d3ee;
}

/* 主題色系統 - 黃色 */
[data-color-theme="yellow"] {
    --theme-gradient-start: #F59E0B;
    --theme-gradient-mid: #FCD34D;
    --theme-gradient-end: #F59E0B;
    --theme-gradient-light-start: #d97706;
    --theme-gradient-light-mid: #f59e0b;
    --theme-gradient-light-end: #fbbf24;
}

.social-contacts {
    display: flex;
    gap: 0.5rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--primary-accent);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF5733;
    transition: all 300ms;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--secondary-accent);
    transform: scale(1.1);
    box-shadow: 0 4px 16px var(--primary-accent);
}

.social-icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary-accent);
    filter: drop-shadow(0 0 4px var(--primary-accent));
    transition: all 0.3s ease;
}

.social-icon:hover svg {
    color: var(--secondary-accent);
    filter: drop-shadow(0 0 8px var(--secondary-accent));
}

/* Scroll down indicator */
.scroll-down {
    display: none; /* Hidden by default, shown by JS if needed */
}

/* Interactive cards - electric border effect */
.interactive-card {
    position: relative;
}

.electric-border-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms;
}

.service-card-container:hover .electric-border-wrapper {
    opacity: 1;
}

/* 懸停時讓流光層跟隨卡片縮放 */
[data-theme="light"] .service-card-container:hover .glow-layer-1,
[data-theme="light"] .service-card-container:hover .glow-layer-2,
[data-theme="light"] .service-card-container:hover .overlay-1,
[data-theme="light"] .service-card-container:hover .overlay-2,
[data-theme="light"] .service-card-container:hover .background-glow,
[data-theme="light"] .service-card-container:hover .electric-border-wrapper {
    transform: scale(1.02);
}

/* 暗色模式 - 卡片沒有縮放但也確保流光層正確定位 */
[data-theme="dark"] .service-card-container:hover .glow-layer-1,
[data-theme="dark"] .service-card-container:hover .glow-layer-2,
[data-theme="dark"] .service-card-container:hover .overlay-1,
[data-theme="dark"] .service-card-container:hover .overlay-2,
[data-theme="dark"] .service-card-container:hover .background-glow {
    opacity: 0.7;
}

.electric-border-canvas,
.canvas-container {
    position: absolute;
    inset: 0;
}

.glow-layer-1,
.glow-layer-2,
.overlay-1,
.overlay-2,
.background-glow {
    position: absolute;
    inset: -2px; /* 稍微擴大範圍以確保覆蓋邊框 */
    opacity: 0.5;
    transition: all 0.3s ease;
}

/* Learn more buttons */
.learn-more {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--primary-accent);
    color: white !important;
    border: none;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.learn-more::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.learn-more:hover::before {
    width: 300px;
    height: 300px;
}

.learn-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 87, 51, 0.35);
}

.learn-more:active {
    transform: translateY(0);
}

/* Duplicate cursor styles removed - using dark theme section */

/* ============================================
   ?€憛??見撘?- ??€€??唳??胯€??典恥鋆賢??蝯⊥???   ============================================ */

/* ??€?憛?*/
#about {
    padding: clamp(80px, 12vh, 140px) 0;
    position: relative;
}

[data-theme="dark"] #about {
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.3) 50%, transparent 100%);
}

[data-theme="light"] #about {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.5) 0%, 
        rgba(248, 250, 252, 0.8) 50%, 
        rgba(255, 255, 255, 0.5) 100%
    );
}
[data-theme="light"] #about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 87, 51, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 195, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

#about .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* #about h2 樣式已移至 .section-title 統一管理，以支援主題色切換 */

#about h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

#about .company-name {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 50px;
    color: #FF6B35;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

#about p {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    text-align: justify;
}

.about-content {
    display: flex;
    gap: 3rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.about-image-container {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 107, 53, 0.2);
}

[data-theme="dark"] .about-image-container {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .about-image-container {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(255, 107, 53, 0.1);
}

.about-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-image-container:hover .about-image {
    transform: scale(1.05);
}

.about-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about-text strong {
    font-size: 1.15rem; /* 增加公司名稱字體大小 */
    font-weight: 700;
}

/* ?€?唳??臬?憛?*/
#news {
    padding: clamp(80px, 12vh, 140px) 0;
    position: relative;
}

[data-theme="light"] #news {
    background: linear-gradient(180deg, 
        rgba(248, 250, 252, 0.6) 0%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(248, 250, 252, 0.6) 100%
    );
}

[data-theme="light"] #news::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.05) 0%, transparent 70%);
    pointer-events: none;
    animation: pulse-glow 8s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

#news .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* #news h2 樣式已移至 .section-title 統一管理，以支援主題色切換 */

/* 範例頁面風格：交錯圖文布局（Grid 並排） */
.news-grid {
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin-top: 3rem;
}

.news-card {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-image-wrapper {
    grid-column: span 7;
    grid-row: 1 / -1;
    border-radius: 15px;
        overflow: hidden;
    }
    
.news-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.news-card:hover .news-image {
    transform: scale(1.05);
}

.news-content {
    grid-column: span 6;
    grid-row: 1 / -1;
    padding: 40px;
    text-align: left;
    z-index: 1;
    background: transparent;
    border: none;
}

/* 奇數項：圖片在右側，文字在左側 */
.news-card:nth-child(odd) .news-image-wrapper {
    grid-column: 6 / -1;
}

.news-card:nth-child(odd) .news-content {
    grid-column: 1 / 7;
    text-align: right;
}

.news-date {
    font-size: 0.9rem;
    color: #FF5733;
    margin-bottom: 10px;
}

.news-title {
        font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.news-excerpt {
    color: rgba(255, 255, 255, 0.7);
        font-size: 0.95rem;
    line-height: 1.6;
        margin-bottom: 20px;
    }
    
.news-link {
    color: #FFC300;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.news-link:hover {
    color: #FF5733;
}

/* ===== NEWS MODAL ===== */
.news-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.news-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.news-modal.closing {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.news-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
}

.news-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
        width: 90%;
    max-width: 900px;
    max-height: 90vh;
    background: rgba(30, 41, 59, 0.95);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .news-modal-content {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}

.news-modal-close {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 87, 51, 0.2);
    color: var(--primary-accent);
    z-index: 10001 !important;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-modal-close:hover {
    background: var(--primary-accent);
    color: white;
    transform: rotate(90deg);
}

.news-modal-body {
    overflow-y: auto;
    max-height: 90vh;
    padding: 40px;
}

.news-modal-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 30px;
}

.news-modal-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.news-modal-date {
    color: var(--primary-accent);
    font-weight: 600;
    font-size: 0.95rem;
}

.news-modal-category {
    padding: 4px 12px;
    background: rgba(255, 87, 51, 0.15);
    color: var(--primary-accent);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

[data-theme="light"] .news-modal-category {
    background: rgba(255, 87, 51, 0.1);
}

.news-modal-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.3;
}

[data-theme="light"] .news-modal-title {
    color: #1a1a1a;
}

.news-modal-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.news-tag {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .news-tag {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #4a5568;
}

.news-modal-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
}

[data-theme="light"] .news-modal-text {
    color: #2d3748;
}

.news-modal-footer {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
}

[data-theme="light"] .news-modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: #64748b;
}

/* Scrollbar for modal */
.news-modal-body::-webkit-scrollbar {
    width: 8px;
}

.news-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.news-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 87, 51, 0.5);
    border-radius: 10px;
}

.news-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary-accent);
}

/* ===== SERVICE MODAL ===== */
.service-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-modal.active {
    opacity: 1;
}

.service-modal-content {
    position: relative;
    width: 90%;
    max-width: 1400px;
    max-height: 90vh;
    overflow: hidden;
    overflow-y: auto !important;
    background: rgba(15, 23, 42, 0.95);
    border-radius: 20px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.service-modal-body {
    position: relative;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2rem;
}

/* 自定義滾動條樣式 */
.service-modal-body::-webkit-scrollbar {
    width: 8px;
}

.service-modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.service-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 87, 51, 0.5);
    border-radius: 10px;
}

.service-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 87, 51, 0.8);
}

/* Special full-screen modals for charter, bike, modification */
#service-content-charter,
#service-content-bike,
#service-content-modification {
    position: relative;
    width: 90%;
    max-width: 1400px;
    height: 90vh;
    max-height: 90vh;
    background: rgba(15, 23, 42, 0.98);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

#service-content-charter .service-modal-body,
#service-content-bike .service-modal-body,
#service-content-modification .service-modal-body {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 3rem 2rem 2rem;
}

#service-content-charter .service-modal-close,
#service-content-bike .service-modal-close,
#service-content-modification .service-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
}

[data-theme="light"] .service-modal-content {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] #service-content-charter,
[data-theme="light"] #service-content-bike,
[data-theme="light"] #service-content-modification {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.service-modal-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.95), rgba(255, 195, 0, 0.95));
    color: white;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10001 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(255, 87, 51, 0.5), 0 0 40px rgba(255, 195, 0, 0.3);
}

.service-modal-close:hover {
    background: linear-gradient(135deg, rgba(255, 195, 0, 0.98), rgba(255, 87, 51, 0.98));
    color: white;
    transform: rotate(90deg) scale(1.15);
    box-shadow: 0 6px 30px rgba(255, 195, 0, 0.7), 0 0 60px rgba(255, 87, 51, 0.5);
}

/* 白昼模式关闭按钮使用蓝色主题 */
[data-theme="light"] .service-modal-close {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.95), rgba(59, 130, 246, 0.95));
    box-shadow: 0 4px 20px rgba(44, 62, 80, 0.4), 0 0 40px rgba(59, 130, 246, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .service-modal-close:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(99, 102, 241, 0.98));
    box-shadow: 0 6px 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(99, 102, 241, 0.4);
    color: white;
}

[data-theme="light"] .news-modal-close {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

[data-theme="light"] .news-modal-close:hover {
    background: #3b82f6;
    color: white;
}

[data-theme="light"] .modal-close {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

[data-theme="light"] .modal-close:hover {
    background: #3b82f6;
    color: white;
}

.service-modal-content h2 {
    color: var(--text-primary);
    margin-bottom: 20px;
}

[data-theme="light"] .service-modal-content h2 {
    color: #1a1a1a;
}

.service-modal-content p {
    color: var(--text-secondary);
    line-height: 1.8;
}

[data-theme="light"] .service-modal-content p {
    color: #4a5568;
}

.news-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #FF5733 0%, #FFC300 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.news-card p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.news-card .read-more {
    color: #FFC300;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.news-card:hover .read-more {
    gap: 1rem;
}

/* 摰摰Ｚˊ??憛?(#3d-scanning) */
#3d-scanning {
    padding: clamp(80px, 12vh, 140px) 0;
    position: relative;
}

[data-theme="dark"] #3d-scanning {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, transparent 50%, rgba(15, 23, 42, 0.3) 100%);
}

[data-theme="light"] #3d-scanning {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.7) 0%, 
        rgba(245, 247, 250, 0.95) 50%, 
        rgba(255, 255, 255, 0.7) 100%
    );
}

[data-theme="light"] #3d-scanning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, rgba(255, 87, 51, 0.02) 0%, transparent 50%),
        linear-gradient(-135deg, rgba(255, 195, 0, 0.02) 0%, transparent 50%);
    pointer-events: none;
}

#3d-scanning .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* #3d-scanning h2 樣式已移至 .section-title 統一管理，以支援主題色切換 */

#3d-scanning .subtitle {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 3D 掃描動畫容器 */
.scanning-animation-container {
    max-width: 1000px;
    margin: 0 auto 4rem;
    padding: 2rem;
}

.animation-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: 0.5rem;
}

.animation-description {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

/* 掃描動畫容器 */
.scan-container {
    position: relative;
    aspect-ratio: 1145 / 620;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    background-color: #1a1a1a;
    margin-bottom: 2rem;
}

.scan-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 頂層圖片容器 - 執行裁切動畫 */
.image-top-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: scan-reveal 4s ease-in-out infinite alternate;
}

/* 掃描線 */
.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.7);
    animation: scan-line 4s ease-in-out infinite alternate;
    z-index: 10;
}

/* 掃描進度指示器 */
.scan-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
    backdrop-filter: blur(10px);
}

.progress-bar {
    height: 4px;
    background: linear-gradient(90deg, #00ffff, #00ccff);
    border-radius: 2px;
    animation: progress-grow 4s ease-in-out infinite alternate;
}

.progress-text {
    display: block;
    text-align: center;
    color: #00ffff;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 600;
}

/* 掃描特性列表 - 小巧精緻設計 */
.scanning-features {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(8px);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feature-item:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: var(--primary-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 87, 51, 0.15);
}

.feature-icon {
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(255, 87, 51, 0.3));
}

.feature-item span {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* 掃描動畫關鍵幀 */
@keyframes scan-reveal {
    from {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes scan-line {
    from {
        left: 0%;
    }
    to {
        left: calc(100% - 4px);
    }
}

@keyframes progress-grow {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* ===== 3D掃描區塊整體優化 ===== */
#3d-scanning {
    padding: 8rem 0;
    position: relative;
}

#3d-scanning .section-title {
    font-size: 3.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #FF5733 0%, #FFC300 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    width: 100%;
}

#3d-scanning .section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #FF5733, transparent);
    border-radius: 2px;
}

#3d-scanning .section-subtitle {
    text-align: center;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto 5rem;
    line-height: 1.8;
}

.scanning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    margin-top: 5rem;
    margin-bottom: 6rem;
    padding: 0 1rem;
}

/* ===== 優雅的3D掃描卡片設計 ===== */
.scanning-card-container {
    background: linear-gradient(
        135deg,
        rgba(255, 87, 51, 0.03) 0%,
        rgba(255, 87, 51, 0.05) 100%
    ) !important;
    border: 1px solid rgba(255, 87, 51, 0.15) !important;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 195, 0, 0.08) !important;
    overflow: visible;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ✅ 移除邊框包裹層和所有視覺效果 - 僅針對 scanning-card */
.scanning-card-container .scanning-border-wrapper,
.scanning-card-container .scanning-border-wrapper *,
.scanning-card-container .glow-layer-1,
.scanning-card-container .glow-layer-2,
.scanning-card-container .overlay-1,
.scanning-card-container .overlay-2,
.scanning-card-container .background-glow {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.scanning-card {
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* ✅ 確保沒有灰色覆蓋層 */
.scanning-card::before,
.scanning-card::after {
    display: none !important;
}

/* ✨ 典雅的懸停效果 - 增強版（透明玻璃效果） */
.scanning-card-container:hover {
    transform: translateY(-16px);
    border-color: rgba(255, 87, 51, 0.4) !important;
    box-shadow: 
        0 20px 60px rgba(255, 87, 51, 0.3),
        0 0 100px rgba(255, 87, 51, 0.15),
        inset 0 1px 0 rgba(255, 195, 0, 0.15),
        inset 0 0 60px rgba(255, 87, 51, 0.08) !important;
    background: linear-gradient(
        135deg,
        rgba(255, 87, 51, 0.08) 0%,
        rgba(255, 87, 51, 0.12) 100%
    ) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: cardBreathing 3s ease-in-out infinite;
}

/* ✅ 確保懸停時這些元素不產生灰色覆蓋 */
.scanning-card-container:hover .glow-layer-1,
.scanning-card-container:hover .glow-layer-2,
.scanning-card-container:hover .overlay-1,
.scanning-card-container:hover .overlay-2,
.scanning-card-container:hover .background-glow,
.scanning-card-container:hover .scanning-border-wrapper {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
}

/* ✨ 卡片呼吸動畫（鮮豔橙色系） */
@keyframes cardBreathing {
    0%, 100% {
        box-shadow: 
            0 20px 60px rgba(255, 87, 51, 0.4),
            0 0 100px rgba(255, 87, 51, 0.25),
            inset 0 1px 0 rgba(255, 195, 0, 0.2),
            inset 0 0 60px rgba(255, 87, 51, 0.1);
    }
    50% {
        box-shadow: 
            0 25px 70px rgba(255, 87, 51, 0.5),
            0 0 120px rgba(255, 87, 51, 0.35),
            inset 0 1px 0 rgba(255, 195, 0, 0.3),
            inset 0 0 80px rgba(255, 87, 51, 0.15);
    }
}

/* ✨ 優雅的光環效果 - 旋轉漸變 */
.scanning-card-container::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(
        45deg,
        rgba(255, 87, 51, 0.6),
        rgba(255, 195, 0, 0.6),
        rgba(255, 87, 51, 0.6)
    );
    background-size: 200% 200%;
    border-radius: 24px;
    opacity: 0;
    filter: blur(20px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: -1;
}

.scanning-card-container:hover::before {
    opacity: 0.4;
    animation: rotateGlow 4s linear infinite;
}

@keyframes rotateGlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ✨ 頂部光澤效果 */
.scanning-card-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.scanning-card-container:hover::after {
    opacity: 1;
}

/* ✨ 圖標懸停效果 - 3D旋轉 + 脈衝 */
.scanning-card-container:hover .scanning-icon {
    transform: scale(1.2) rotateY(15deg) rotateX(5deg);
    filter: drop-shadow(0 0 25px rgba(255, 87, 51, 0.6));
    border-color: rgba(255, 87, 51, 0.5);
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.2), rgba(255, 195, 0, 0.2));
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1.2) rotateY(15deg) rotateX(5deg);
    }
    50% {
        transform: scale(1.25) rotateY(15deg) rotateX(5deg);
    }
}

/* ✨ 標題懸停效果 - 漸變動畫 */
.scanning-card-container:hover .scanning-card h3 {
    background: linear-gradient(135deg, #FF5733 0%, #FFC300 50%, #FF5733 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateX(8px);
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.scanning-icon {
    font-size: 3.5rem;
    margin-bottom: 2rem;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.1), rgba(255, 195, 0, 0.1));
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: 1px solid rgba(255, 87, 51, 0.2);
}

.scanning-card h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #FF5733 0%, #FFC300 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.scanning-card p {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin-bottom: 0;
    padding-bottom: 2rem;
    transition: all 0.4s ease;
}

/* ✨ 段落文字懸停時微亮 */
.scanning-card-container:hover .scanning-card p {
    color: rgba(255, 255, 255, 0.9);
}

.scanning-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 87, 51, 0.15);
}

.scanning-stats .stat {
    display: flex;
    align-items: center;
    background: linear-gradient(
        90deg,
        rgba(255, 87, 51, 0.12) 0%,
        rgba(255, 195, 0, 0.08) 100%
    );
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 87, 51, 0.15);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.scanning-stats .stat::before {
    content: '✓';
    margin-right: 0.75rem;
    color: #FF5733;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(255, 87, 51, 0.5);
}

/* ✨ 優雅的光澤掃過效果 */
.scanning-stats .stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: left 0.8s ease;
}

.scanning-card-container:hover .scanning-stats .stat::after {
    left: 100%;
}

.scanning-card-container:hover .scanning-stats .stat {
    background: linear-gradient(
        90deg,
        rgba(255, 87, 51, 0.35) 0%,
        rgba(255, 195, 0, 0.25) 100%
    );
    border-color: rgba(255, 87, 51, 0.6);
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 4px 20px rgba(255, 87, 51, 0.3), 0 0 30px rgba(255, 195, 0, 0.15);
}

/* ✨ 統計標籤依序動畫 */
.scanning-card-container:hover .scanning-stats .stat:nth-child(1) {
    transition-delay: 0.1s;
}

.scanning-card-container:hover .scanning-stats .stat:nth-child(2) {
    transition-delay: 0.2s;
}

.scanning-card-container:hover .scanning-stats .stat:nth-child(3) {
    transition-delay: 0.3s;
}

/* ✨ 勾選圖標動畫 */
.scanning-stats .stat::before {
    transition: all 0.3s ease;
}

.scanning-card-container:hover .scanning-stats .stat::before {
    transform: scale(1.3) rotate(360deg);
    color: #FFC300;
    text-shadow: 0 0 15px rgba(255, 195, 0, 0.8), 0 0 25px rgba(255, 195, 0, 0.4);
}

/* ?寡?獢?撅內 */
/* ===== 改裝案例展示區域 ===== */
.scanning-showcase {
    margin-top: 8rem;
    position: relative;
}

.showcase-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-mid) 50%, var(--theme-gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 2rem;
    filter: drop-shadow(0 4px 12px rgba(255, 87, 51, 0.4));
}

[data-theme="dark"] .showcase-title {
    filter: drop-shadow(0 0 15px rgba(255, 87, 51, 0.3)) 
            drop-shadow(0 0 30px rgba(255, 195, 0, 0.15));
}

.showcase-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--theme-gradient-start), transparent);
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(255, 87, 51, 0.4);
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
    padding: 0 1rem;
}

.showcase-item {
    background: linear-gradient(
        135deg,
        rgba(255, 87, 51, 0.08) 0%,
        rgba(255, 87, 51, 0.12) 100%
    );
    border: 1px solid rgba(255, 87, 51, 0.25);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    /* ✅ 移除 backdrop-filter 避免灰色 */
}

.showcase-item:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(255, 87, 51, 0.5);
    box-shadow: 
        0 20px 50px rgba(255, 87, 51, 0.35),
        0 0 60px rgba(255, 87, 51, 0.2);
}

.showcase-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
}

.showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(0.9);
}

.showcase-item:hover .showcase-image img {
    transform: scale(1.08);
    filter: brightness(1);
}

/* 圖片上的光澤效果 */
.showcase-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.8s ease;
}

.showcase-item:hover .showcase-image::after {
    left: 150%;
}

.showcase-content {
    padding: 2rem;
    position: relative;
}

.showcase-content h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    transition: all 0.4s ease;
    letter-spacing: 0.5px;
}

.showcase-item:hover .showcase-content h4 {
    background: linear-gradient(135deg, #FF5733 0%, #FFC300 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateX(8px);
}

.showcase-content p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    font-size: 1rem;
    transition: all 0.4s ease;
}

.showcase-item:hover .showcase-content p {
    color: rgba(255, 255, 255, 0.9);
}

/* ?舐窗?€?憛?*/
#contact {
    padding: clamp(80px, 12vh, 140px) 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contact .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

/* #contact h2 樣式已移至 .section-title 統一管理，以支援主題色切換 */

/* 聯絡表單 - 範例頁面風格 */
.contact-form {
    width: 100%;
    max-width: 800px;
    border-radius: 20px;
    padding: 60px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .contact-form {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .contact-form {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 87, 51, 0.2);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.08),
        0 20px 80px rgba(255, 87, 51, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .contact-form:hover {
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.1),
        0 25px 100px rgba(255, 87, 51, 0.15);
    transform: translateY(-4px);
}

/* 聯絡我們：流光邊框效果 */
.contact-form { 
    position: relative; 
    overflow: visible;
}

/* 隱藏舊旋轉效果 */
.contact-form::before { display: none; }

/* 邊框流光：只沿著邊框掃過，跟隨主題色 */
.contact-form::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 17px;    /* 略大於表單圓角 */
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        var(--primary-accent) 45%,
        var(--secondary-accent) 50%,
        var(--primary-accent) 55%,
        transparent 100%
    );
    background-size: 200% 100%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
    animation: border-sweep 3s linear infinite;
    pointer-events: none;
    z-index: -1;
    opacity: 0.8;
}

@keyframes border-sweep {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.form-group {
    position: relative;
    margin-bottom: 35px;
}

/* 透明背景 + 底部邊框樣式 */
.form-input, 
.form-textarea, 
.form-select {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
    border-radius: 0;
}

.form-input:focus, 
.form-textarea:focus, 
.form-select:focus {
    outline: none;
    border-color: var(--theme-gradient-mid);
}

.form-textarea { 
    resize: vertical; 
    min-height: 120px; 
}

/* 浮動標籤效果 */
.form-label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label,
.form-textarea:focus ~ .form-label,
.form-textarea:not(:placeholder-shown) ~ .form-label,
.form-select:focus ~ .form-label,
.form-select:valid ~ .form-label {
    top: -10px;
    left: 0;
    font-size: 0.8rem;
    color: #FF5733;
}

/* Custom Dropdown Styles */
.custom-select {
    position: relative;
    width: 100%;
}

.select-display {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    outline: none;
}

.select-display.selected {
    color: #FFFFFF;
}

.select-display:focus,
.select-display.open {
    border-color: var(--theme-gradient-mid);
}

.select-arrow {
    width: 16px;
    height: 16px;
    fill: var(--theme-gradient-mid);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.select-display.open .select-arrow {
    transform: rotate(180deg);
}
.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.select-options.open {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    overflow-y: auto;
    pointer-events: auto;
}

.select-option {
    padding: 12px 15px;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.select-option:last-child {
    border-bottom: none;
}

.select-option:hover {
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-mid));
    opacity: 0.2;
    color: var(--theme-gradient-mid);
    padding-left: 20px;
}

.select-option.selected {
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-mid));
    color: #ffffff;
    font-weight: 600;
}

button[type="submit"] {
    width: 100%;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-mid) 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
}

button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
}

[data-theme="light"] button[type="submit"] {
    background: linear-gradient(135deg, var(--theme-gradient-light-start) 0%, var(--theme-gradient-light-mid) 100%);
}

[data-theme="light"] .select-arrow {
    fill: var(--theme-gradient-light-mid);
}

[data-theme="light"] .select-display:focus,
[data-theme="light"] .select-display.open {
    border-color: var(--theme-gradient-light-mid);
}

button[type="submit"]:active {
    transform: translateY(0);
}

/* ?賣?璅∪?隤踵 */
[data-theme="light"] #about,
[data-theme="light"] #news,
[data-theme="light"] #3d-scanning,
[data-theme="light"] #contact {
    background: transparent;
}

[data-theme="light"] #services h2,
[data-theme="light"] #about h2,
[data-theme="light"] #news h2,
[data-theme="light"] #3d-scanning h2,
[data-theme="light"] #contact h2 {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.12)) !important;
}

[data-theme="light"] #about p {
    color: #2c3e50;
}

/* 修復關於我們標題 - 使用主題漸層 */
[data-theme="light"] #about h3 {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

[data-theme="light"] .news-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

[data-theme="light"] .news-card:hover {
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.15), 0 6px 12px rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-4px);
}

/* 白晝模式：3D 掃描動畫容器 */
[data-theme="light"] .scanning-animation-container {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
}

[data-theme="light"] .scan-container {
    background-color: #f8f9fa;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .animation-title {
    color: #2c3e50;
}

[data-theme="light"] .animation-description {
    color: #64748b;
}

[data-theme="light"] .feature-item {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 87, 51, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .feature-item:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--primary-accent);
    box-shadow: 0 4px 16px rgba(255, 87, 51, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .feature-item span {
    color: #2c3e50;
}

/* 修復核心優勢區域文字顏色 */
[data-theme="light"] .feature-item div {
    color: #2c3e50 !important;
    font-weight: 500;
}

[data-theme="light"] .feature-icon {
    filter: drop-shadow(0 2px 4px rgba(255, 87, 51, 0.15));
}

[data-theme="light"] .scan-progress {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .progress-text {
    color: #1e40af;
}

[data-theme="light"] .showcase-item {
    background: transparent;
    border: none;
}

/* 修復掃描卡片和展示內容標題 - 使用主題漸層 */
[data-theme="light"] .scanning-card h3,
[data-theme="light"] .showcase-content h4 {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

[data-theme="light"] .news-card h3 {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

[data-theme="light"] .news-card p,
[data-theme="light"] .scanning-card p,
[data-theme="light"] .showcase-content p {
    color: #475569;
}

/* ===== 白晝模式優化 ===== */
[data-theme="light"] #3d-scanning .section-title {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] #3d-scanning .section-title::after {
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
}

[data-theme="light"] #3d-scanning .section-subtitle {
    color: #475569;
}

[data-theme="light"] .scanning-card-container {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.03) 0%,
        rgba(59, 130, 246, 0.05) 100%
    ) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(147, 197, 253, 0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .scanning-card-container:hover {
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 
        0 20px 60px rgba(59, 130, 246, 0.25),
        0 0 80px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(147, 197, 253, 0.3),
        inset 0 0 40px rgba(59, 130, 246, 0.08) !important;
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(59, 130, 246, 0.12) 100%
    ) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: cardBreathingLight 3s ease-in-out infinite;
}

@keyframes cardBreathingLight {
    0%, 100% {
        box-shadow: 
            0 20px 60px rgba(59, 130, 246, 0.3),
            0 0 80px rgba(59, 130, 246, 0.2),
            inset 0 1px 0 rgba(147, 197, 253, 0.4),
            inset 0 0 40px rgba(59, 130, 246, 0.1);
    }
    50% {
        box-shadow: 
            0 25px 70px rgba(59, 130, 246, 0.4),
            0 0 100px rgba(59, 130, 246, 0.3),
            inset 0 1px 0 rgba(147, 197, 253, 0.5),
            inset 0 0 60px rgba(59, 130, 246, 0.15);
    }
}

[data-theme="light"] .scanning-card-container::before {
    background: linear-gradient(
        45deg,
        rgba(59, 130, 246, 0.5),
        rgba(147, 197, 253, 0.5),
        rgba(59, 130, 246, 0.5)
    );
    background-size: 200% 200%;
}

[data-theme="light"] .scanning-card-container:hover::before {
    animation: rotateGlow 4s linear infinite;
}

/* 白晝模式：圖標動畫 */
[data-theme="light"] .scanning-card-container:hover .scanning-icon {
    filter: drop-shadow(0 0 25px rgba(59, 130, 246, 0.5));
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 197, 253, 0.2));
}

/* 白晝模式：標題漸變動畫 */
[data-theme="light"] .scanning-card-container:hover .scanning-card h3 {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1e40af 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

/* 白晝模式：統計標籤增強 */
[data-theme="light"] .scanning-card-container:hover .scanning-stats .stat {
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .scanning-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 197, 253, 0.1));
    border-color: rgba(59, 130, 246, 0.2);
}

/* [data-theme="light"] .scanning-card h3 漸層色已在上方 5475 行設定 */

[data-theme="light"] .scanning-card p {
    color: #64748b;
}

[data-theme="light"] .scanning-stats {
    border-top-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .scanning-stats .stat {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(147, 197, 253, 0.12) 100%
    );
    border-color: rgba(59, 130, 246, 0.25);
    color: #2c3e50;
}

[data-theme="light"] .scanning-stats .stat::before {
    color: #3b82f6;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

[data-theme="light"] .scanning-card-container:hover .scanning-stats .stat::before {
    transform: scale(1.3) rotate(360deg);
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.7), 0 0 20px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .scanning-card-container:hover .scanning-stats .stat {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.3) 0%,
        rgba(147, 197, 253, 0.2) 100%
    );
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25), 0 0 30px rgba(147, 197, 253, 0.2);
}

[data-theme="light"] .showcase-title {
    background: linear-gradient(135deg, var(--theme-gradient-light-start) 0%, var(--theme-gradient-light-mid) 50%, var(--theme-gradient-light-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.12));
}

[data-theme="light"] .showcase-title::after {
    background: linear-gradient(90deg, transparent, var(--theme-gradient-light-mid), transparent);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .showcase-item {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(59, 130, 246, 0.12) 100%
    );
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .showcase-item:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 
        0 20px 50px rgba(59, 130, 246, 0.3),
        0 0 60px rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .showcase-content h4 {
    color: #2c3e50;
}

[data-theme="light"] .showcase-content p {
    color: #64748b;
}

[data-theme="light"] .showcase-item:hover .showcase-content h4 {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .showcase-item:hover .showcase-content p {
    color: #475569;
}


[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .form-select {
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(30, 58, 138, 0.2);
    color: #2c3e50;
}

/* ===== ENHANCED SERVICE CARDS (旅遊包車、單車載運、車輛改裝) ===== */

/* 卡片圖片區域 */
.service-card-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
    background: transparent;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-container:hover .service-card-image img {
    transform: scale(1.1);
}

/* 卡片徽章 */
.service-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.service-card-container:hover .service-card-badge {
    background: rgba(255, 87, 51, 0.9);
    border-color: rgba(255, 195, 0, 0.5);
    transform: scale(1.05);
}

.badge-icon {
    font-size: 1.2rem;
}

.badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

/* 白晝模式徽章 */
[data-theme="light"] .service-card-badge {
    background: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .badge-text {
    color: #2c3e50;
}

[data-theme="light"] .badge-icon {
    color: #2c3e50;
}

/* 白晝模式懸停時徽章變色 */
[data-theme="light"] .service-card-container:hover .service-card-badge {
    background: rgba(255, 87, 51, 1);
}

[data-theme="light"] .service-card-container:hover .badge-text,
[data-theme="light"] .service-card-container:hover .badge-icon {
    color: #ffffff !important;
}

/* 卡片內容區域 */
.service-card-content {
    padding: 1.5rem;
}

.service-card-subtitle {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-bottom: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.025em;
}

[data-theme="light"] .service-card-subtitle {
    color: #64748b;
}

/* 功能特點列表 */
.service-card-features {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.service-card-container:hover .feature-item {
    transform: translateX(5px);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--theme-gradient-start);
    opacity: 0.15;
    color: var(--theme-gradient-mid);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

[data-theme="light"] .feature-icon {
    background: var(--theme-gradient-light-start);
    opacity: 0.2;
    color: var(--theme-gradient-light-mid);
}

/* 了解更多按鈕增強 */
.service-card-content .learn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.15), rgba(255, 195, 0, 0.15));
    border: 1px solid rgba(255, 87, 51, 0.3);
    border-radius: 0.5rem;
    color: #FF5733;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
}

.service-card-content .learn-more:hover {
    background: linear-gradient(135deg, #FF5733, #FFC300);
    border-color: #FF5733;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 87, 51, 0.3);
}

.service-card-content .learn-more .arrow {
    transition: transform 0.3s ease;
}

.service-card-content .learn-more:hover .arrow {
    transform: translateX(5px);
}

[data-theme="light"] .service-card-content .learn-more {
    background: rgba(255, 87, 51, 0.1);
    border-color: rgba(255, 87, 51, 0.3);
}

[data-theme="light"] .service-card-content .learn-more:hover {
    background: linear-gradient(135deg, #FF5733, #FFC300);
    color: #ffffff;
}

/* 卡片特定樣式調整 - 移除渐变背景以实现真正的透明效果 */
.charter-card .service-card-image {
    background: transparent;
}

.bike-card .service-card-image {
    background: transparent;
}

.modification-card .service-card-image {
    background: transparent;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .service-card-image {
        height: 160px;
    }

    .service-card-badge {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    .badge-text {
        font-size: 0.75rem;
    }

    .service-card-content {
        padding: 1.25rem;
    }

    .feature-item {
        font-size: 0.875rem;
    }
}

/* ========================================
   服務內頁樣式 - 統一設計系統
   ========================================
   包含：單車載運(bike)、旅遊包車(charter)、車輛改裝(modification)
   設計風格：參照磷酸鐵鋰電池頁面，使用 tech-card、網格布局等
======================================== */

/* ====================
   共用基礎樣式
==================== */

/* 技術背景 */
.tech-bg {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.95) 0%, 
        rgba(30, 41, 59, 0.9) 50%, 
        rgba(15, 23, 42, 0.95) 100%
    );
    min-height: 100vh;
    padding: 2rem 0;
}

[data-theme="light"] .tech-bg {
    background: linear-gradient(135deg, 
        rgba(248, 250, 252, 0.95) 0%, 
        rgba(241, 245, 249, 0.9) 50%, 
        rgba(248, 250, 252, 0.95) 100%
    );
}

/* 技術卡片 */
.tech-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 87, 51, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.tech-card:hover {
    border-color: rgba(255, 87, 51, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(255, 87, 51, 0.3);
}

[data-theme="light"] .tech-card {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .tech-card:hover {
    border-color: rgba(255, 87, 51, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* 漸層文字 */
.gradient-text-yellow {
    background: linear-gradient(135deg, #FFC300, #FF5733);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-green {
    background: linear-gradient(135deg, #10B981, #3B82F6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-orange {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section眉標 */
.section-eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-accent);
    margin-bottom: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 87, 51, 0.1);
    border: 1px solid rgba(255, 87, 51, 0.3);
    border-radius: 2rem;
}

[data-theme="light"] .section-eyebrow {
    background: rgba(255, 87, 51, 0.05);
    border-color: rgba(255, 87, 51, 0.2);
}

/* 規格藥丸 */
.spec-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 87, 51, 0.15);
    border: 1px solid rgba(255, 87, 51, 0.3);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
}

.spec-pill:hover {
    background: rgba(255, 87, 51, 0.25);
    border-color: rgba(255, 87, 51, 0.5);
    transform: scale(1.05);
}

[data-theme="light"] .spec-pill {
    background: rgba(255, 87, 51, 0.1);
    color: #2c3e50;
}

/* 容量切換按鈕組 */
.variant-toggle {
    display: flex;
    gap: 0.5rem;
    background: rgba(15, 23, 42, 0.6);
    padding: 0.375rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 87, 51, 0.2);
}

.variant-btn {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.variant-btn:hover {
    color: #fff;
    background: rgba(255, 87, 51, 0.1);
}

.variant-btn.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.8), rgba(255, 195, 0, 0.6));
    box-shadow: 0 2px 8px rgba(255, 87, 51, 0.3);
}
[data-theme="light"] .variant-toggle {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 87, 51, 0.3);
}

[data-theme="light"] .variant-btn {
    color: #64748b;
}

[data-theme="light"] .variant-btn:hover {
    color: #2c3e50;
    background: rgba(255, 87, 51, 0.1);
}

[data-theme="light"] .variant-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    box-shadow: 0 2px 8px rgba(255, 87, 51, 0.4);
}

/* 容器 */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 淡入動畫 */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.fade-in-up.delay-1 { animation-delay: 0.2s; }
.fade-in-up.delay-2 { animation-delay: 0.4s; }

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

/* ====================
   單車載運頁面 (Bike)
==================== */

/* Hero Section */
.bike-hero {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.bike-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 87, 51, 0.1), transparent 50%);
    pointer-events: none;
}

.bike-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.bike-eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--secondary-accent);
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 195, 0, 0.1);
    border: 1px solid rgba(255, 195, 0, 0.3);
    border-radius: 2rem;
}

.bike-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .bike-hero-title {
    color: #2c3e50;
    text-shadow: none;
}

.bike-hero-lead {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #94a3b8;
    margin-bottom: 2rem;
}

[data-theme="light"] .bike-hero-lead {
    color: #64748b;
}

.bike-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.bike-stat {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 87, 51, 0.1);
    border: 1px solid rgba(255, 87, 51, 0.2);
    border-radius: 0.75rem;
}

.bike-stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-accent);
    margin-bottom: 0.5rem;
}

.bike-stat-label {
    display: block;
    font-size: 0.875rem;
    color: #94a3b8;
}

[data-theme="light"] .bike-stat {
    background: rgba(255, 87, 51, 0.05);
}

[data-theme="light"] .bike-stat-label {
    color: #64748b;
}

.bike-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Hero Media */
.bike-hero-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.bike-hero-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.bike-hero-card:hover img {
    transform: scale(1.05);
}

.bike-hero-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 87, 51, 0.3);
}

.bike-hero-badge strong {
    display: block;
    font-size: 1.25rem;
    color: var(--primary-accent);
    margin-bottom: 0.5rem;
}

.bike-hero-badge span {
    font-size: 0.875rem;
    color: #94a3b8;
}

[data-theme="light"] .bike-hero-badge {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .bike-hero-badge span {
    color: #64748b;
}

.bike-floating-card {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 195, 0, 0.2);
    border-radius: 0.75rem;
    backdrop-filter: blur(10px);
}

.bike-floating-card h3 {
    font-size: 1.25rem;
    color: var(--secondary-accent);
    margin-bottom: 1rem;
}

.bike-floating-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bike-floating-card li {
    font-size: 0.875rem;
    color: #94a3b8;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bike-floating-card li:last-child {
    border-bottom: none;
}

[data-theme="light"] .bike-floating-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .bike-floating-card li {
    color: #64748b;
    border-color: rgba(0, 0, 0, 0.05);
}

/* Features Grid */
.bike-features {
    padding: 4rem 0;
    background: transparent;
}

.bike-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.bike-feature-card {
    padding: 2rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 87, 51, 0.2);
    border-radius: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.bike-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 87, 51, 0.5);
    box-shadow: 0 10px 40px rgba(255, 87, 51, 0.2);
}

.bike-feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.bike-feature-card h3 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.bike-feature-card p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.7;
}

[data-theme="light"] .bike-feature-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .bike-feature-card h3 {
    color: #2c3e50;
}

[data-theme="light"] .bike-feature-card p {
    color: #64748b;
}

/* Tiers Section */
.bike-tiers {
    padding: 4rem 0;
}

.bike-section-heading {
    text-align: center;
    margin-bottom: 3rem;
}

.bike-section-heading h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.bike-section-heading p {
    font-size: 1.125rem;
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto;
}

[data-theme="light"] .bike-section-heading h3 {
    color: #2c3e50;
}

[data-theme="light"] .bike-section-heading p {
    color: #64748b;
}

.bike-tier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.bike-tier-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 87, 51, 0.2);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.bike-tier-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 87, 51, 0.5);
    box-shadow: 0 15px 50px rgba(255, 87, 51, 0.25);
}

.bike-tier-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.bike-tier-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bike-tier-card:hover .bike-tier-image img {
    transform: scale(1.1);
}

.bike-tier-body {
    padding: 2rem;
}

.bike-tier-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255, 195, 0, 0.15);
    border: 1px solid rgba(255, 195, 0, 0.3);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--secondary-accent);
    margin-bottom: 1rem;
}

.bike-tier-body h4 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.bike-tier-body p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.bike-tier-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.bike-tier-meta span {
    font-size: 0.875rem;
    color: #10B981;
    font-weight: 600;
}

[data-theme="light"] .bike-tier-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .bike-tier-body h4 {
    color: #2c3e50;
}

[data-theme="light"] .bike-tier-body p {
    color: #64748b;
}

/* Routes Section */
.bike-routes {
    padding: 4rem 0;
}

.bike-route-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.bike-route-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    height: 300px;
    cursor: pointer;
}

.bike-route-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bike-route-card:hover img {
    transform: scale(1.1);
}

.bike-route-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    transition: background 0.3s ease;
}

.bike-route-card:hover .bike-route-overlay {
    background: linear-gradient(to top, rgba(255, 87, 51, 0.9), transparent);
}

/* 白晝模式 - 白色漸層遮罩 */
[data-theme="light"] .bike-route-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), transparent);
}

[data-theme="light"] .bike-route-card:hover .bike-route-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.3));
}

.bike-route-overlay h4 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

/* 白晝模式 - 深色文字 */
[data-theme="light"] .bike-route-overlay h4,
[data-theme="light"] .bike-route-overlay p {
    color: #1f2937 !important;
}

.bike-route-overlay p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* Services Detail */
.bike-services {
    padding: 4rem 0;
}

.bike-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.bike-service-card {
    padding: 2rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 195, 0, 0.2);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.bike-service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 195, 0, 0.5);
    box-shadow: 0 10px 40px rgba(255, 195, 0, 0.2);
}

.bike-service-card h3 {
    font-size: 1.5rem;
    color: var(--secondary-accent);
    margin-bottom: 1.5rem;
}

.bike-service-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bike-service-card li {
    font-size: 0.95rem;
    color: #94a3b8;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bike-service-card li:last-child {
    border-bottom: none;
}

[data-theme="light"] .bike-service-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .bike-service-card li {
    color: #64748b;
    border-color: rgba(0, 0, 0, 0.05);
}

/* CTA Section */
.bike-cta {
    padding: 4rem 0;
}

.bike-cta-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.1), rgba(255, 195, 0, 0.1));
    border: 1px solid rgba(255, 87, 51, 0.3);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
}

.bike-cta-card h3 {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.bike-cta-card p {
    font-size: 1rem;
    color: #94a3b8;
}

.bike-cta-actions {
    flex-shrink: 0;
}

[data-theme="light"] .bike-cta-card {
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.05), rgba(255, 195, 0, 0.05));
}

[data-theme="light"] .bike-cta-card h3 {
    color: #2c3e50;
}

[data-theme="light"] .bike-cta-card p {
    color: #64748b;
}

/* ====================
   旅遊包車頁面 (Charter)
==================== */

/* Hero Section */
.charter-hero {
    padding: 4rem 0;
    position: relative;
}

.charter-hero-decor {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at bottom left, rgba(255, 195, 0, 0.1), transparent 50%);
    pointer-events: none;
}

.charter-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.charter-eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--secondary-accent);
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 195, 0, 0.1);
    border: 1px solid rgba(255, 195, 0, 0.3);
    border-radius: 2rem;
}

.charter-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .charter-hero-title {
    color: #2c3e50;
    text-shadow: none;
}

.charter-hero-lead {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #94a3b8;
    margin-bottom: 2rem;
}

[data-theme="light"] .charter-hero-lead {
    color: #64748b;
}

.charter-hero-pills {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.charter-hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.charter-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.meta-item {
    padding: 1rem;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 195, 0, 0.2);
    border-radius: 0.5rem;
}

.meta-label {
    display: block;
    font-size: 0.875rem;
    color: var(--secondary-accent);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.meta-value {
    display: block;
    font-size: 0.95rem;
    color: #94a3b8;
}

[data-theme="light"] .meta-item {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .meta-value {
    color: #64748b;
}

/* Hero Visual */
.charter-hero-visual {
    position: relative;
}

.hero-image-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hero-image-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.hero-image-card:hover img {
    transform: scale(1.05);
}

.hero-image-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 195, 0, 0.3);
    text-align: center;
}

.badge-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-accent);
    margin-bottom: 0.25rem;
}

.badge-sub {
    display: block;
    font-size: 0.75rem;
    color: #94a3b8;
}

[data-theme="light"] .hero-image-badge {
    background: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .badge-sub {
    color: #64748b;
}

.hero-floating-card {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 195, 0, 0.2);
    border-radius: 0.75rem;
    backdrop-filter: blur(10px);
}

.hero-floating-card h3 {
    font-size: 1.25rem;
    color: var(--secondary-accent);
    margin-bottom: 0.75rem;
}

.hero-floating-card p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.hero-floating-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-floating-card li {
    font-size: 0.875rem;
    color: #94a3b8;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hero-floating-card li:last-child {
    border-bottom: none;
}

[data-theme="light"] .hero-floating-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hero-floating-card p,
[data-theme="light"] .hero-floating-card li {
    color: #64748b;
    border-color: rgba(0, 0, 0, 0.05);
}

/* Highlights Section */
.charter-highlights {
    padding: 4rem 0;
}

.section-heading {
    text-align: center;
    margin-bottom: 3rem;
}

.section-heading h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.section-heading p {
    font-size: 1.125rem;
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto;
}

[data-theme="light"] .section-heading h3 {
    color: #2c3e50;
}

[data-theme="light"] .section-heading p {
    color: #64748b;
}

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.highlight-card {
    padding: 2rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 87, 51, 0.2);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 87, 51, 0.5);
    box-shadow: 0 10px 40px rgba(255, 87, 51, 0.2);
}

.highlight-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.highlight-card h4 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.highlight-card p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.highlight-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.highlight-card li {
    font-size: 0.875rem;
    color: #94a3b8;
    padding: 0.5rem 0;
}

[data-theme="light"] .highlight-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .highlight-card h4 {
    color: #2c3e50;
}

[data-theme="light"] .highlight-card p,
[data-theme="light"] .highlight-card li {
    color: #64748b;
}

/* Stats Section */
.charter-stats {
    padding: 4rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.stats-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.stats-label {
    display: block;
    font-size: 0.875rem;
    color: var(--secondary-accent);
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-counter {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.stats-counter::after {
    content: '+';
    opacity: 0.6;
}

.stats-card p {
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
}

[data-theme="light"] .stats-card p {
    color: #64748b;
}

/* Journey Section */
.charter-journey {
    padding: 4rem 0;
}

.journey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.journey-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.journey-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.journey-index {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-accent), var(--secondary-accent));
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(255, 87, 51, 0.4);
}

.journey-step h4 {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.journey-step p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
}

[data-theme="light"] .journey-step h4 {
    color: #2c3e50;
}

[data-theme="light"] .journey-step p {
    color: #64748b;
}

.journey-feature-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    height: 500px;
}

.journey-feature-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.journey-feature-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
}

/* 白晝模式 - 白色漸層遮罩 */
[data-theme="light"] .journey-feature-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2));
}

[data-theme="light"] .journey-feature-overlay h4 {
    color: #1f2937 !important; /* 深色單色 */
    background: none !important; /* 移除漸層 */
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    text-shadow: none !important; /* 移除陰影 */
}

[data-theme="light"] .journey-feature-overlay p {
    color: #1f2937 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.journey-feature-overlay h4 {
    font-size: 1.75rem;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.journey-feature-overlay p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

/* Gallery Section */
.charter-gallery {
    padding: 4rem 0;
}

.charter-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 250px);
    gap: 1rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    cursor: pointer;
}

.gallery-main {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-tall {
    grid-row: span 2;
}

.gallery-wide {
    grid-column: span 2;
}

.gallery-square {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item figcaption {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover figcaption {
    opacity: 1;
}

/* 白晝模式 - 白色漸層遮罩 */
[data-theme="light"] .gallery-item figcaption {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2));
}

[data-theme="light"] .gallery-item figcaption h4,
[data-theme="light"] .gallery-item figcaption p {
    color: #1f2937 !important;
}

.gallery-item h4 {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.gallery-item p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Itinerary Section */
.charter-itinerary {
    padding: 4rem 0;
}

.itinerary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.itinerary-card {
    padding: 2rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 195, 0, 0.2);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
}

.itinerary-card h3 {
    font-size: 1.75rem;
    color: var(--secondary-accent);
    margin-bottom: 2rem;
}

.itinerary-timeline {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.itinerary-step {
    display: flex;
    gap: 1.5rem;
}

.itinerary-step .time {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 195, 0, 0.15);
    border: 2px solid rgba(255, 195, 0, 0.3);
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--secondary-accent);
}

.itinerary-step h4 {
    font-size: 1.125rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.itinerary-step p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
}

[data-theme="light"] .itinerary-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .itinerary-step h4 {
    color: #2c3e50;
}

[data-theme="light"] .itinerary-step p {
    color: #64748b;
}

/* ====================
   車輛改裝頁面 (Modification)
==================== */

/* Hero Section */
.mod-hero {
    padding: 4rem 0;
}

.mod-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.mod-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.mod-hero-title span {
    display: block;
    font-size: 2rem;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 0.5rem;
}

[data-theme="light"] .mod-hero-title {
    color: #2c3e50;
    text-shadow: none;
}

.mod-hero-desc {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #94a3b8;
    margin-bottom: 2rem;
}

[data-theme="light"] .mod-hero-desc {
    color: #64748b;
}

.mod-hero-features {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.mod-chip {
    padding: 0.5rem 1rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #F59E0B;
}

[data-theme="light"] .mod-chip {
    background: rgba(245, 158, 11, 0.1);
}

.mod-hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.mod-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.mod-stat-card {
    padding: 1rem;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 0.75rem;
    text-align: center;
}

.mod-stat-card h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #F59E0B;
    margin-bottom: 0.5rem;
}

.mod-stat-card p {
    font-size: 0.875rem;
    color: #94a3b8;
}

[data-theme="light"] .mod-stat-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .mod-stat-card p {
    color: #64748b;
}

/* Hero Visual */
.mod-hero-visual {
    position: relative;
}

.mod-hero-card {
    position: relative;
    padding: 2rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
}

.mod-hero-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #F59E0B;
    margin-bottom: 1.5rem;
}

.mod-hero-image {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.mod-visual-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mod-visual-list li {
    font-size: 0.875rem;
    color: #94a3b8;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mod-visual-list li:last-child {
    border-bottom: none;
}

[data-theme="light"] .mod-hero-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .mod-visual-list li {
    color: #64748b;
    border-color: rgba(0, 0, 0, 0.05);
}

/* Highlight Section */
.mod-highlight {
    padding: 4rem 0;
}

.mod-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.mod-highlight-card {
    padding: 2rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.mod-highlight-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.2);
}

.mod-highlight-card h3 {
    font-size: 1.5rem;
    color: #F59E0B;
    margin-bottom: 1rem;
}

.mod-highlight-card p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.7;
}

[data-theme="light"] .mod-highlight-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .mod-highlight-card p {
    color: #64748b;
}

/* Configurator Section */
.mod-configurator-section {
    padding: 4rem 0;
    background: rgba(15, 23, 42, 0.3);
}

[data-theme="light"] .mod-configurator-section {
    background: #ffffff !important;
}

[data-theme="light"] .mod-section-header h2 {
    color: #2c3e50 !important;
}

[data-theme="light"] .mod-section-header p {
    color: #64748b !important;
}

.mod-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.mod-section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.mod-section-header p {
    font-size: 0.95rem;
    color: #94a3b8;
}

[data-theme="light"] .mod-section-header h2 {
    color: #2c3e50;
}

[data-theme="light"] .mod-section-header p {
    color: #64748b;
}

.mod-config-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.mod-config-preview {
    position: sticky;
    top: 2rem;
}

.mod-preview-stage {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mod-preview-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

/* 遮罩效果容器 */
.mod-effect-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* 主要外觀遮罩 */
#mod-main-effect {
    mask-image: url('assets/images/main_mask.png');
    -webkit-mask-image: url('assets/images/main_mask.png');
    z-index: 10;
}

/* 椅墊遮罩 */
#mod-cushion-effect {
    mask-image: url('assets/images/cushion_mask.png');
    -webkit-mask-image: url('assets/images/cushion_mask.png');
    z-index: 20;
}

/* 遮罩容器內的紋理圖片 */
.mod-effect-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 顏色覆蓋層 */
.mod-color-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: color;
    transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 當顏色接近黑色時，切換為 multiply 以免 color 模式失效 */
.mod-color-layer.is-dark {
    mix-blend-mode: multiply;
    opacity: 0.9;
}

/* 座椅基礎圖（最上層）*/
.mod-product-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 30;
    pointer-events: none;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

/* 白晝模式調整 */
[data-theme="light"] .mod-product-base {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

.mod-preview-badges {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* 響應式設計 - 配色預覽 */
@media (max-width: 1024px) {
    .mod-config-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .mod-config-preview {
        position: static;
    }
    
    .mod-preview-container {
        max-width: 350px;
    }
}
@media (max-width: 768px) {
    /* 修复移动设备Hero统计数字挤压问题 */
    .mod-hero-stats {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .mod-stat-card {
        padding: 0.75rem !important;
    }
    
    .mod-stat-card h3 {
        font-size: 1.5rem !important;
    }
    
    .mod-stat-card p {
        font-size: 0.875rem !important;
    }
    
    /* 修复Hero按钮在移动设备的布局 */
    .mod-hero-actions {
        flex-direction: column !important;
        width: 100%;
    }
    
    .mod-hero-actions .tech-button {
        width: 100% !important;
    }
    
    /* 修复移动设备Hero特征标签换行 */
    .mod-hero-features {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    .mod-chip {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.8rem !important;
    }
    
    /* 修复配色预览图片居中对齐和尺寸 */
    .mod-preview-container {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 250px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 auto !important;
    }
    
    .mod-preview-stage {
        padding: 1rem !important;
        min-height: auto !important;
        width: 100% !important;
    }
    
    /* 确保配色预览区域完全居中 */
    .mod-config-preview {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 确保图片层正确堆叠 */
    .mod-effect-container,
    .mod-product-base {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    .mod-effect-container img,
    .mod-product-base {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    .mod-preview-badges {
        font-size: 0.75rem !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
        width: 100% !important;
    }
    
    .mod-preview-badges span {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.75rem !important;
    }
    
    /* 修复配色控制区域的对齐 */
    .mod-config-controls {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .mod-config-group {
        width: 100% !important;
        padding: 1.5rem 1rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 确保颜色选择器居中 */
    .mod-config-swatches {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        width: 100% !important;
        justify-items: center !important;
    }
    
    .config-swatch {
        width: 100% !important;
        max-width: 70px !important;
    }
    
    /* 修复标题区域对齐 */
    .mod-config-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    .mod-config-value-display {
        align-items: flex-start !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    /* 确保所有配色区域的容器居中 */
    .mod-configurator-section .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .mod-config-layout {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 修复Hero区域垂直间距 */
    .mod-hero {
        padding: 2rem 0 !important;
    }
    
    .mod-hero-title {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    .mod-hero-desc {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
    }
}

.mod-preview-badges span {
    padding: 0.5rem 1rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #F59E0B;
}

[data-theme="light"] .mod-preview-stage {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Config Controls */
.mod-config-controls {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.mod-config-group {
    padding: 2rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.7));
    border: 2px solid rgba(245, 158, 11, 0.25);
    border-radius: 1.25rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.mod-config-group:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 12px 40px rgba(245, 158, 11, 0.15);
}

.mod-config-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
}

.mod-config-title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mod-config-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.15));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 0.75rem;
    color: #F59E0B;
}

.mod-config-group h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff, #F59E0B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mod-config-value-display {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 0.5rem;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.value-label {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.mod-config-value {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #F59E0B;
    padding: 0.25rem 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 0.375rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.mod-config-value:hover {
    background: rgba(245, 158, 11, 0.2);
    transform: scale(1.05);
}

.mod-config-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.config-swatch {
    width: 100%;
    aspect-ratio: 1;
    border: 3px solid transparent;
    border-radius: 0.75rem;
    background: var(--swatch-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.config-swatch:hover {
    transform: scale(1.15) translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.config-swatch.is-active {
    border-color: #F59E0B;
    box-shadow: 
        0 0 0 3px rgba(245, 158, 11, 0.3),
        0 8px 24px rgba(245, 158, 11, 0.4);
    transform: scale(1.1);
}

.config-swatch.is-active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 900;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.5);
    animation: checkmarkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkmarkPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.mod-config-picker-wrapper {
    margin-top: 1rem;
}

.mod-config-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.4);
    border: 2px solid rgba(245, 158, 11, 0.2);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mod-config-picker:hover {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(15, 23, 42, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.picker-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #F59E0B;
}

.picker-label svg {
    width: 18px;
    height: 18px;
}

.mod-config-picker input[type="color"] {
    width: 3rem;
    height: 3rem;
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
}

.mod-config-picker input[type="color"]:hover {
    border-color: #F59E0B;
    transform: scale(1.05);
}

.mod-config-picker input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.mod-config-picker input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 0.375rem;
}

.mod-config-separator {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(245, 158, 11, 0.3), transparent);
    margin: 1rem 0;
}

.mod-config-tips {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 0.75rem;
}

.tip-icon {
    flex-shrink: 0;
    color: #F59E0B;
}

.tip-content h4 {
    font-size: 0.95rem;
    color: #F59E0B;
    margin-bottom: 0.75rem;
}

.tip-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tip-content li {
    font-size: 0.875rem;
    color: #94a3b8;
    padding: 0.25rem 0;
}

[data-theme="light"] .mod-config-group,
[data-theme="light"] .mod-config-tips {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mod-config-group h3 {
    color: #2c3e50;
}

[data-theme="light"] .value-label,
[data-theme="light"] .picker-label,
[data-theme="light"] .tip-content li {
    color: #64748b;
}

[data-theme="light"] .mod-config-value-display {
    background: rgba(243, 244, 246, 0.8) !important; /* 淺灰色背景 */
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .mod-config-value {
    color: #2563eb !important; /* 深藍色文字 */
    background: rgba(37, 99, 235, 0.08) !important; /* 淺藍色背景 */
}

[data-theme="light"] .mod-config-value:hover {
    background: rgba(37, 99, 235, 0.15) !important;
}

/* Experience Section */
.mod-experience {
    padding: 4rem 0;
}

.mod-experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.mod-experience-card {
    padding: 2rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 1rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.mod-experience-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.2);
}

.mod-experience-card h3 {
    font-size: 1.5rem;
    color: #F59E0B;
    margin-bottom: 1rem;
}

.mod-experience-card p {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.7;
}

[data-theme="light"] .mod-experience-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .mod-experience-card p {
    color: #64748b;
}

/* Power Doors Section */
.mod-power-doors {
    padding: 4rem 0;
}

.power-door-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.power-door-item {
    text-align: center;
    position: relative; /* 確保沒有額外的遮罩層 */
}

.power-door-image {
    width: 100%;
    height: 250px; /* 增加高度讓圖片有更多空間 */
    object-fit: contain; /* 改為 contain 確保圖片完整顯示 */
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
    opacity: 1 !important; /* 確保圖片完全不透明 */
    filter: none !important; /* 移除任何濾鏡效果 */
    background: rgba(0, 0, 0, 0.02); /* 淺色背景以突顯圖片 */
}

.power-door-item:hover .power-door-image {
    transform: scale(1.05);
}

.power-door-item h4 {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 600;
}

[data-theme="light"] .power-door-item h4 {
    color: #2c3e50;
}

[data-theme="light"] .power-door-image {
    opacity: 1 !important; /* 白晝模式下確保圖片完全清晰 */
    filter: none !important;
    background: rgba(243, 244, 246, 0.5) !important; /* 淺灰色背景 */
}

/* Gallery Section */
.mod-gallery {
    padding: 4rem 0;
}

.mod-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.mod-gallery-item {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
}

.mod-gallery-image-wrapper {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.mod-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mod-gallery-item:hover .mod-gallery-image {
    transform: scale(1.1);
}

.mod-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mod-gallery-item:hover .mod-gallery-overlay {
    opacity: 1;
}

/* 白晝模式 - 白色漸層遮罩 */
[data-theme="light"] .mod-gallery-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2));
}

[data-theme="light"] .mod-gallery-overlay h4,
[data-theme="light"] .mod-gallery-overlay p,
[data-theme="light"] .mod-gallery-info h4,
[data-theme="light"] .mod-gallery-info p {
    color: #1f2937 !important;
}

.mod-gallery-info h4 {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.mod-gallery-info p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

/* ====================
   響應式設計
==================== */

@media (max-width: 1024px) {
    /* Bike */
    .bike-hero-grid,
    .charter-hero-grid,
    .mod-hero-grid,
    .journey-grid,
    .itinerary-grid,
    .mod-config-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .bike-feature-grid,
    .highlight-grid,
    .bike-service-grid,
    .mod-highlight-grid,
    .mod-experience-grid {
        grid-template-columns: 1fr;
    }
    
    .bike-tier-grid,
    .bike-route-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .charter-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    
    .gallery-main,
    .gallery-tall,
    .gallery-wide,
    .gallery-square {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .power-door-grid,
    .mod-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bike-hero-title,
    .charter-hero-title,
    .mod-hero-title {
        font-size: 2rem;
    }
    
    .section-heading h3,
    .bike-section-heading h3,
    .mod-section-header h2 {
        font-size: 1.75rem;
    }
    
    .bike-hero-stats {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .bike-cta-card {
        flex-direction: column;
        text-align: center;
    }
    
    .charter-gallery-grid,
    .power-door-grid,
    .mod-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .mod-config-swatches {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ===============================================
   駐車冷氣型錄圖片放大查看器 (Lightbox)
   =============================================== */
.catalog-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.catalog-lightbox.active {
    display: flex;
    opacity: 1;
}

.catalog-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.catalog-lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.catalog-lightbox-title {
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.9);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(10px);
}

.catalog-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
    background: rgba(255, 87, 51, 0.2);
    border: 2px solid rgba(255, 87, 51, 0.5);
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.catalog-lightbox-close:hover {
    background: rgba(255, 87, 51, 0.4);
    border-color: rgba(255, 87, 51, 0.8);
    transform: rotate(90deg);
}

.catalog-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 87, 51, 0.2);
    border: 2px solid rgba(255, 87, 51, 0.5);
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.catalog-lightbox-nav:hover {
    background: rgba(255, 87, 51, 0.4);
    border-color: rgba(255, 87, 51, 0.8);
}

.catalog-lightbox-prev {
    left: 2rem;
}

.catalog-lightbox-next {
    right: 2rem;
}

.catalog-lightbox-counter {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.875rem;
    background: rgba(15, 23, 42, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 87, 51, 0.3);
}

@media (max-width: 768px) {
    .catalog-lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .catalog-lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .catalog-lightbox-prev {
        left: 1rem;
    }
    
    .catalog-lightbox-next {
        right: 1rem;
    }
    
    .catalog-lightbox-title {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
    
    .catalog-lightbox-image {
        max-height: 75vh;
    }
}

/* ===== 道路救援页面 - 车队页签内容显示控制 ===== */
.fleet-content {
    display: none;
}

.fleet-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* ===============================================
   旅游包车页面优化 - 第十八次更新
   =============================================== */

/* 1. 沉浸式移动体验 - 图片分布平均化 */
.charter-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(2, 280px) !important;
    gap: 1.5rem !important;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(255, 87, 51, 0.3);
}

/* 平均分布：每个项目占据相等空间 */
.gallery-main {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
}

.gallery-tall {
    grid-column: span 1 !important;
    grid-row: span 2 !important;
}

.gallery-wide {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
}

.gallery-square {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.15);
}
.gallery-item figcaption {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.gallery-item:hover figcaption {
    opacity: 1;
}

/* 白晝模式 - 白色漸層遮罩 */
[data-theme="light"] .gallery-item figcaption {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.1) 100%);
}

[data-theme="light"] .gallery-item figcaption h4,
[data-theme="light"] .gallery-item figcaption p,
[data-theme="light"] .gallery-item figcaption span {
    color: #1f2937 !important;
    text-shadow: none !important;
}

.gallery-item figcaption h4 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: white !important;
    margin-bottom: 0.5rem !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.gallery-item figcaption p {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.6 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}


/* ===============================================
   車輛改裝頁面優化樣式
   =============================================== */

/* 1. 精選改裝實績區域優化 */
.mod-gallery {
    padding: 6rem 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(30, 41, 59, 0.5) 100%);
    position: relative;
}

.mod-gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.mod-section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.mod-section-header .section-eyebrow {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.1));
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
    animation: pulse-glow 3s infinite;
}

.mod-section-header h2 {
    font-size: 2.75rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff 0%, #F59E0B 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.mod-section-header p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

.mod-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.mod-gallery-item {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.mod-gallery-item:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 60px rgba(245, 158, 11, 0.4);
    border-color: rgba(245, 158, 11, 0.5);
}

.mod-gallery-image-wrapper {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.8));
}

.mod-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mod-gallery-item:hover .mod-gallery-image {
    transform: scale(1.15);
}

.mod-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mod-gallery-item:hover .mod-gallery-overlay {
    opacity: 1;
}

/* 白晝模式 - 白色漸層遮罩 */
[data-theme="light"] .mod-gallery-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.1) 100%);
}

.mod-gallery-info h4 {
    font-size: 1.5rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-shadow: none; /* 移除陰影 */
    background: linear-gradient(135deg, #ffffff, #F59E0B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mod-gallery-info p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    text-shadow: none; /* 移除陰影 */
}

/* 2. 客製化改裝流程優化 */
.mod-process {
    padding: 6rem 0;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%);
    position: relative;
    overflow: hidden;
}

.mod-process::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 1200px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.05) 0%, transparent 70%);
    animation: rotate-glow 30s linear infinite;
}

@keyframes rotate-glow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.mod-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.mod-process-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.85));
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.mod-process-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #F59E0B, #FF5733);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.mod-process-card:hover::before {
    transform: scaleX(1);
}

.mod-process-card:hover {
    transform: translateY(-8px);
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 16px 48px rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
}

.mod-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #F59E0B, #FF5733);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
    position: relative;
    z-index: 1;
}

.mod-step::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, #F59E0B, #FF5733);
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.mod-process-card:hover .mod-step::before {
    opacity: 0.5;
    animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.mod-process-card h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff, #F59E0B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mod-process-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

/* 3. CTA區域優化 */
.mod-cta {
    padding: 6rem 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    position: relative;
    overflow: hidden;
}

.mod-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
    animation: float-glow 40s linear infinite;
}

@keyframes float-glow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.mod-cta-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 3rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
    border: 2px solid transparent;
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)),
        linear-gradient(135deg, #F59E0B, #FF5733);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 2rem;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(245, 158, 11, 0.15);
    text-align: center;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

.mod-cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 40px 100px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(245, 158, 11, 0.25);
}

.mod-cta-card h2 {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff 0%, #F59E0B 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.mod-cta-card p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.mod-cta-card .tech-button {
    padding: 1.25rem 3rem;
    font-size: 1.125rem;
    font-weight: 700;
    min-width: 260px;
    position: relative;
    overflow: hidden;
}

.mod-cta-card .tech-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.mod-cta-card .tech-button:hover::before {
    width: 300px;
    height: 300px;
}

.mod-cta-card .tech-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6);
}

[data-color-theme="orange"] .mod-cta-card .tech-button:hover {
    box-shadow: 0 15px 40px rgba(255, 87, 51, 0.6);
}

[data-color-theme="green"] .mod-cta-card .tech-button:hover {
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6);
}

[data-color-theme="purple"] .mod-cta-card .tech-button:hover {
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.6);
}

[data-color-theme="red"] .mod-cta-card .tech-button:hover {
    box-shadow: 0 15px 40px rgba(239, 68, 68, 0.6);
}

/* 響應式設計優化 */
@media (max-width: 1024px) {
    .mod-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .mod-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .mod-section-header h2 {
        font-size: 2.25rem;
    }
    
    .mod-cta-card h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .mod-gallery {
        padding: 4rem 0;
    }
    
    .mod-process,
    .mod-cta {
        padding: 4rem 0;
    }
    
    .mod-gallery-grid,
    .mod-process-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .mod-section-header {
        margin-bottom: 3rem;
    }
    
    .mod-section-header h2 {
        font-size: 1.875rem;
    }
    
    .mod-section-header p {
        font-size: 1rem;
    }
    
    .mod-section-header .section-eyebrow {
        font-size: 0.75rem;
        padding: 0.4rem 1.2rem;
        letter-spacing: 1.5px;
    }
    
    .mod-gallery-item {
        border-radius: 1rem;
    }
    
    .mod-gallery-overlay {
        padding: 1.5rem;
    }
    
    .mod-gallery-info h4 {
        font-size: 1.25rem;
    }
    
    .mod-gallery-info p {
        font-size: 0.875rem;
    }
    
    .mod-process-card {
        padding: 2rem 1.5rem;
    }
    
    .mod-step {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .mod-process-card h4 {
        font-size: 1.25rem;
    }
    
    .mod-process-card p {
        font-size: 0.95rem;
    }
    
    .mod-cta-card {
        padding: 3rem 2rem;
        border-radius: 1.5rem;
    }
    
    .mod-cta-card h2 {
        font-size: 1.75rem;
        margin-bottom: 1.25rem;
    }
    
    .mod-cta-card p {
        font-size: 1.125rem;
        margin-bottom: 2rem;
    }
    
    .mod-cta-card .tech-button {
        width: 100% !important;
        padding: 1rem 2rem;
        font-size: 1rem;
        min-width: auto;
    }
}

/* 白晝模式適配 */
[data-theme="light"] .mod-gallery,
[data-theme="light"] .mod-process,
[data-theme="light"] .mod-cta {
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.5) 0%, rgba(226, 232, 240, 0.8) 100%);
}

[data-theme="light"] .mod-section-header h2,
[data-theme="light"] .mod-cta-card h2 {
    background: linear-gradient(135deg, #1f2937 0%, #F59E0B 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .mod-section-header p,
[data-theme="light"] .mod-cta-card p {
    color: #2c3e50;
}

[data-theme="light"] .mod-gallery-item,
[data-theme="light"] .mod-process-card,
[data-theme="light"] .mod-cta-card {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .mod-gallery-item:hover,
[data-theme="light"] .mod-process-card:hover {
    box-shadow: 0 20px 60px rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .mod-process-card h4,
[data-theme="light"] .mod-gallery-info h4 {
    background: linear-gradient(135deg, #1f2937, #F59E0B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .mod-process-card p {
    color: #2c3e50;
}

[data-theme="light"] .mod-gallery-info p {
    color: #2c3e50 !important;
}

/* 2. AI应援三步骤 - 强化版面设计 */
.charter-ai-section {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    padding: 6rem 0 !important;
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .charter-ai-section {
    background: #ffffff !important;
}

[data-theme="light"] .ai-section-intro > p {
    color: #64748b !important;
}

[data-theme="light"] .ai-benefit {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .ai-benefit:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="light"] .ai-benefit p {
    color: #2c3e50 !important;
}

[data-theme="light"] .ai-section-form {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .ai-result-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .ai-result-card h4 {
    color: #2c3e50 !important;
}

[data-theme="light"] .ai-result-card .text-gray-200,
[data-theme="light"] #ai-plan-text {
    color: #2c3e50 !important;
}

[data-theme="light"] .charter-final-cta {
    background: #ffffff !important;
}

[data-theme="light"] .charter-final-cta::before {
    background: none !important;
}

[data-theme="light"] .final-cta-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .final-cta-card h3 {
    color: #2c3e50 !important;
}

[data-theme="light"] .final-cta-card p {
    color: #2c3e50 !important; /* 改為深色 */
}

[data-theme="light"] .final-cta-card > div:first-child > p {
    color: #2c3e50 !important; /* 確保描述文字為深色 */
}

.charter-ai-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.1) 0%, transparent 70%);
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-30px, -30px); }
}

.ai-section-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: start;
}

.ai-section-intro {
    position: relative;
    z-index: 2;
}

.ai-section-intro h3 {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.5rem !important;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2 !important;
}

.ai-section-intro > p {
    font-size: 1.125rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.8 !important;
    margin-bottom: 3rem !important;
}

.ai-benefits {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ai-benefit {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.08), rgba(255, 195, 0, 0.05));
    border: 1px solid rgba(255, 87, 51, 0.2);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.ai-benefit::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    transition: width 0.3s ease;
}

.ai-benefit:hover {
    transform: translateX(10px);
    border-color: rgba(255, 87, 51, 0.5);
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.12), rgba(255, 195, 0, 0.08));
}

.ai-benefit:hover::before {
    width: 8px;
}

.ai-benefit span {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1 !important;
    flex-shrink: 0;
    width: 80px;
    text-align: center;
}

.ai-benefit p {
    font-size: 1.125rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* 3. AI表单区域优化 */
.ai-section-form {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border: 1px solid rgba(255, 87, 51, 0.3) !important;
    padding: 3rem !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    z-index: 2;
}

.ai-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.ai-form-full {
    grid-column: span 2;
}

.form-group {
    position: relative;
    margin-bottom: 0;
}

/* 4. 下拉式选单优化 - 修复重叠和颜色问题 */
.form-select-wrapper {
    position: relative;
}

.form-select {
    width: 100%;
    padding: 15px 40px 15px 15px !important;
    background: rgba(30, 41, 59, 0.5) !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FF5733' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
}

.form-select:focus {
    outline: none !important;
    border-bottom-color: #FF5733 !important;
    background: rgba(30, 41, 59, 0.7) !important;
    box-shadow: 0 4px 12px rgba(255, 87, 51, 0.2) !important;
}

.form-select option {
    background: rgba(15, 23, 42, 0.98) !important;
    color: white !important;
    padding: 10px !important;
}

.form-select option:hover,
.form-select option:checked {
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.3), rgba(255, 195, 0, 0.2)) !important;
}

/* 修复"请选择"与人数标签重叠问题 */
.form-select-wrapper .form-label {
    position: absolute;
    top: -12px !important;
    left: 0 !important;
    font-size: 0.85rem !important;
    color: #FF5733 !important;
    pointer-events: none;
    background: transparent;
    padding: 0 4px;
    font-weight: 600;
}

.form-select:focus ~ .form-label,
.form-select:valid ~ .form-label {
    top: -12px !important;
    left: 0 !important;
    font-size: 0.85rem !important;
    color: #FF5733 !important;
}

/* 5. 一般输入框优化 */
.form-input {
    width: 100%;
    padding: 15px !important;
    background: rgba(30, 41, 59, 0.3) !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
}
.form-input:focus {
    outline: none !important;
    border-bottom-color: var(--theme-gradient-mid) !important;
    background: rgba(30, 41, 59, 0.5) !important;
    box-shadow: 0 4px 12px rgba(255, 87, 51, 0.2) !important;
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
    top: -12px !important;
    left: 0 !important;
    font-size: 0.85rem !important;
    color: var(--theme-gradient-mid) !important;
}

/* 6. 响应式设计 */
@media (max-width: 1024px) {
    .charter-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 1rem !important;
    }
    
    .gallery-main,
    .gallery-tall,
    .gallery-wide,
    .gallery-square {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        height: 250px;
    }
    
    .ai-section-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem;
    }
    
    .ai-benefits {
        gap: 1.5rem;
    }
    
    .ai-benefit {
        padding: 1.5rem;
    }
    
    .ai-benefit span {
        font-size: 2rem !important;
        width: 60px;
    }
}

@media (max-width: 768px) {
    .charter-gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .gallery-item {
        height: 220px !important;
    }
    
    .ai-section-intro h3 {
        font-size: 1.875rem !important;
    }
    
    .ai-form-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    
    .ai-form-full {
        grid-column: span 1;
    }
    
    .ai-section-form {
        padding: 2rem !important;
    }
    
    .ai-benefit {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem;
    }
    
    .ai-benefit span {
        width: auto;
        margin-bottom: 0.5rem;
    }
}

/* ===============================================
   旅游包车页面 - 客製選項 & 卡片优化
   =============================================== */

/* 1. 客製選項区域 - 重新设计 */
.itinerary-card.secondary {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9)) !important;
    border: 1px solid rgba(255, 87, 51, 0.3) !important;
    border-radius: 1.5rem !important;
    padding: 3rem !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    position: relative;
    overflow: hidden;
}

.itinerary-card.secondary::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.08) 0%, transparent 70%);
    animation: rotate-slow 30s linear infinite;
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.itinerary-card.secondary > * {
    position: relative;
    z-index: 2;
}

.itinerary-card.secondary h4 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin-bottom: 2.5rem !important;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    letter-spacing: 1px;
}

.itinerary-card.secondary ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2.5rem 0 !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.itinerary-card.secondary ul li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.05), rgba(255, 195, 0, 0.03));
    border: 1px solid rgba(255, 87, 51, 0.2);
    border-radius: 1rem;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.itinerary-card.secondary ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    transition: width 0.3s ease;
}

.itinerary-card.secondary ul li::after {
    content: '✦';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #FF5733;
    opacity: 0.8;
}

.itinerary-card.secondary ul li:hover {
    transform: translateX(8px);
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.12), rgba(255, 195, 0, 0.08));
    border-color: rgba(255, 87, 51, 0.4);
    box-shadow: 0 4px 15px rgba(255, 87, 51, 0.2);
}

.itinerary-card.secondary ul li:hover::before {
    width: 6px;
}

/* CTA区域优化 */
.itinerary-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.08), rgba(255, 195, 0, 0.05));
    border: 1px dashed rgba(255, 87, 51, 0.3);
    border-radius: 1rem;
    margin-top: 1rem;
}

.itinerary-cta span {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center;
}

.itinerary-cta .tech-button {
    padding: 1rem 2.5rem !important;
    font-size: 1.1rem !important;
    min-width: 200px;
}

/* 2. 沉浸式移动体验 - Gallery卡片进一步优化 */
.charter-gallery {
    padding: 6rem 0 !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(30, 41, 59, 0.5) 50%, rgba(15, 23, 42, 0) 100%);
}

.section-heading {
    margin-bottom: 4rem !important;
}

.section-heading h3 {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem !important;
}

.section-heading p {
    font-size: 1.125rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    max-width: 600px;
    margin: 0 auto;
}

.section-eyebrow {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.15), rgba(255, 195, 0, 0.1));
    border: 1px solid rgba(255, 87, 51, 0.3);
    border-radius: 9999px;
    color: #FFC300;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Gallery项目增强边框效果 */
.gallery-item {
    border: 1px solid rgba(255, 87, 51, 0.15) !important;
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    border: 2px solid rgba(255, 87, 51, 0);
    transition: border-color 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

.gallery-item:hover::after {
    border-color: rgba(255, 87, 51, 0.5);
}

/* 3. 行程卡片优化 */
.charter-itinerary {
    padding: 6rem 0 !important;
}

.itinerary-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: start;
}

.itinerary-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.85)) !important;
    border: 1px solid rgba(255, 87, 51, 0.2) !important;
    border-radius: 1.5rem !important;
    padding: 2.5rem !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25) !important;
}

.itinerary-card h3 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: white !important;
    margin-bottom: 2rem !important;
    line-height: 1.3 !important;
}

.itinerary-timeline {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

.itinerary-timeline::before {
    display: none; /* 隱藏連接線 */
}

.itinerary-step {
    display: flex;
    gap: 1.5rem;
    position: relative;
}

.itinerary-step .time {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.2), rgba(255, 195, 0, 0.1));
    border: 2px solid rgba(255, 87, 51, 0.3);
    border-radius: 50%;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #FFC300 !important;
    position: relative;
    z-index: 2;
}

.itinerary-step > div {
    flex: 1;
    padding-top: 0.5rem;
}

.itinerary-step h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: white !important;
    margin-bottom: 0.75rem !important;
}

.itinerary-step p {
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.7 !important;
    font-size: 1rem !important;
}

/* 4. 响应式设计 */
@media (max-width: 1024px) {
    .itinerary-card.secondary ul {
        grid-template-columns: 1fr;
    }
    
    .itinerary-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .section-heading h3 {
        font-size: 2rem !important;
    }
}

@media (max-width: 768px) {
    .itinerary-card.secondary {
        padding: 2rem !important;
    }
    
    .itinerary-card.secondary h4 {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .itinerary-card.secondary ul li {
        padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    }
    
    .itinerary-cta {
        padding: 1.5rem;
    }
    
    .section-heading h3 {
        font-size: 1.75rem !important;
    }
    
    .itinerary-step .time {
        width: 60px;
        height: 60px;
        font-size: 0.75rem !important;
    }
}

/* ===============================================
   旅游包车页面 - Final CTA & AI表单模态框优化
   =============================================== */

/* 1. Final CTA区域 - 重新设计 */
.charter-final-cta {
    padding: 8rem 0 !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.95) 50%, rgba(15, 23, 42, 0.98) 100%);
    position: relative;
    overflow: hidden;
}

.charter-final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 87, 51, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 195, 0, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.final-cta-card {
    position: relative;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9)) !important;
    border: 2px solid transparent !important;
    background-image: 
        linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9)),
        linear-gradient(135deg, #FF5733, #FFC300) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-radius: 2rem !important;
    padding: 4rem !important;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(255, 87, 51, 0.15) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    overflow: hidden;
    z-index: 2;
}

.final-cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 87, 51, 0.08) 0%, transparent 70%);
    animation: rotate-slow 40s linear infinite;
    z-index: -1;
}

.final-cta-card > div:first-child {
    flex: 1;
    position: relative;
    z-index: 2;
}

.final-cta-card .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem !important;
    background: linear-gradient(135deg, rgba(255, 87, 51, 0.2), rgba(255, 195, 0, 0.15)) !important;
    border: 2px solid rgba(255, 87, 51, 0.4) !important;
    border-radius: 9999px !important;
    color: #FFC300 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 0 20px rgba(255, 87, 51, 0.3) !important;
}

.final-cta-card .section-eyebrow::before {
    content: '✦';
    font-size: 1.2rem;
    color: #FF5733;
}

.final-cta-card h3 {
    font-size: 2.75rem !important;
    font-weight: 900 !important;
    margin-bottom: 1.5rem !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFC300 50%, #FF5733 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2 !important;
    letter-spacing: -0.5px;
}

.final-cta-card > div:first-child > p {
    font-size: 1.25rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.8 !important;
    max-width: 600px;
}

.final-cta-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.final-cta-actions .tech-button {
    padding: 1.5rem 3rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    min-width: 280px;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4) !important;
    position: relative;
    overflow: hidden;
}

[data-color-theme="orange"] .final-cta-actions .tech-button {
    box-shadow: 0 10px 30px rgba(255, 87, 51, 0.4) !important;
}

[data-color-theme="green"] .final-cta-actions .tech-button {
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4) !important;
}

[data-color-theme="purple"] .final-cta-actions .tech-button {
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4) !important;
}

[data-color-theme="red"] .final-cta-actions .tech-button {
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4) !important;
}

.final-cta-actions .tech-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.final-cta-actions .tech-button:hover::before {
    width: 300px;
    height: 300px;
}

.final-cta-actions .tech-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6) !important;
}

[data-color-theme="orange"] .final-cta-actions .tech-button:hover {
    box-shadow: 0 15px 40px rgba(255, 87, 51, 0.6) !important;
}

[data-color-theme="green"] .final-cta-actions .tech-button:hover {
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6) !important;
}

[data-color-theme="purple"] .final-cta-actions .tech-button:hover {
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.6) !important;
}

[data-color-theme="red"] .final-cta-actions .tech-button:hover {
    box-shadow: 0 15px 40px rgba(239, 68, 68, 0.6) !important;
}

/* 2. AI表单区域进一步美化 */
.ai-section-form {
    position: relative;
    z-index: 2;
}

.ai-section-form::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    border-radius: 1.5rem;
    z-index: -1;
    opacity: 0.5;
    filter: blur(10px);
}

/* AI结果卡片优化 */
.ai-result-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid rgba(255, 87, 51, 0.3) !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    margin-top: 2rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.ai-result-card h4 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: white !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid rgba(255, 87, 51, 0.3) !important;
    background: linear-gradient(135deg, #FF5733, #FFC300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#ai-plan-text {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    line-height: 2 !important;
    padding: 1.5rem !important;
    background: rgba(255, 87, 51, 0.05) !important;
    border-radius: 0.75rem !important;
    border-left: 4px solid #FF5733 !important;
}

.ai-result-card .tech-button {
    margin-top: 1.5rem !important;
}

/* 3. 表单输入框统一增强（确保一致性） */
.ai-form-grid .form-group {
    position: relative;
}

.ai-form-grid .form-input,
.ai-form-grid .form-select {
    background: rgba(30, 41, 59, 0.4) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.ai-form-grid .form-input:focus,
.ai-form-grid .form-select:focus {
    background: rgba(30, 41, 59, 0.6) !important;
    border-bottom-color: var(--theme-gradient-mid) !important;
    box-shadow: 0 4px 15px rgba(255, 87, 51, 0.25) !important;
}

/* 4. 响应式设计 */
@media (max-width: 1024px) {
    .final-cta-card {
        flex-direction: column;
        text-align: center;
        padding: 3rem !important;
    }
    
    .final-cta-card h3 {
        font-size: 2.25rem !important;
    }
    
    .final-cta-card > div:first-child > p {
        max-width: 100%;
    }
    
    .final-cta-actions {
        width: 100%;
    }
    
    .final-cta-actions .tech-button {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .charter-final-cta {
        padding: 5rem 0 !important;
    }
    
    .final-cta-card {
        padding: 2.5rem 1.5rem !important;
        gap: 2rem;
    }
    
    .final-cta-card h3 {
        font-size: 1.875rem !important;
    }
    
    .final-cta-card > div:first-child > p {
        font-size: 1.125rem !important;
    }
    
    .final-cta-actions .tech-button {
        padding: 1.25rem 2rem !important;
        font-size: 1.125rem !important;
    }
    
    .final-cta-card .section-eyebrow {
        font-size: 0.8rem !important;
        padding: 0.625rem 1.25rem !important;
        letter-spacing: 2px !important;
    }
}

/* 5. 添加微妙的动画效果 */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.5);
    }
}

@keyframes pulse-glow-orange {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 87, 51, 0.3); }
    50% { box-shadow: 0 0 40px rgba(255, 87, 51, 0.5); }
}

@keyframes pulse-glow-green {
    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.5); }
}

@keyframes pulse-glow-purple {
    0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.5); }
}

@keyframes pulse-glow-red {
    0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 40px rgba(239, 68, 68, 0.5); }
}

[data-color-theme="orange"] .final-cta-card .section-eyebrow {
    animation: pulse-glow-orange 3s ease-in-out infinite;
}

[data-color-theme="green"] .final-cta-card .section-eyebrow {
    animation: pulse-glow-green 3s ease-in-out infinite;
}

[data-color-theme="purple"] .final-cta-card .section-eyebrow {
    animation: pulse-glow-purple 3s ease-in-out infinite;
}

[data-color-theme="red"] .final-cta-card .section-eyebrow {
    animation: pulse-glow-red 3s ease-in-out infinite;
}

.final-cta-card .section-eyebrow {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* 6. 表单标题区域优化 */
.ai-section-intro .section-eyebrow {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* ======================================================
   Elegant Contact Form (scoped to #contact)
   - Glassmorphism card
   - Floating labels
   - Smooth focus/hover effects
   - Dark/Light theme adaptive
   ====================================================== */

#contact .contact-form {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

#contact .contact-form:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] #contact .contact-form {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

#contact .form-group {
    position: relative;
    margin-bottom: 1.25rem;
}

#contact .form-input,
#contact .form-textarea {
    width: 100%;
    border-radius: 12px;
    padding: 1rem 1rem 1rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

[data-theme="light"] #contact .form-input,
[data-theme="light"] #contact .form-textarea {
    background: rgba(255, 255, 255, 0.9);
    color: #2c3e50;
    border-color: rgba(0, 0, 0, 0.12);
}

#contact .form-input:focus,
#contact .form-textarea:focus {
    border-color: var(--theme-gradient-mid);
    box-shadow: 0 0 0 6px rgba(255, 87, 51, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

#contact .form-textarea {
    min-height: 140px;
    resize: vertical;
}

/* Floating labels */
#contact .form-label {
    position: absolute;
    top: 16px;
    left: 14px;
    font-size: 1rem;
    color: #94a3b8;
    pointer-events: none;
    transition: all 0.2s ease;
    background: transparent;
}
[data-theme="light"] #contact .form-label { color: #475569; }
#contact .form-input:focus + .form-label,
#contact .form-input:not(:placeholder-shown) + .form-label,
#contact .form-textarea:focus + .form-label,
#contact .form-textarea:not(:placeholder-shown) + .form-label {
    top: -10px;
    left: 12px;
    font-size: 0.8rem;
    color: var(--theme-gradient-mid);
    padding: 0 6px;
    background: linear-gradient(to bottom, transparent 45%, rgba(10,10,10,0.95) 45%);
}

[data-theme="light"] #contact .form-input:focus + .form-label,
[data-theme="light"] #contact .form-input:not(:placeholder-shown) + .form-label,
[data-theme="light"] #contact .form-textarea:focus + .form-label,
[data-theme="light"] #contact .form-textarea:not(:placeholder-shown) + .form-label {
    background: linear-gradient(to bottom, transparent 45%, #ffffff 45%);
    color: var(--theme-gradient-light-mid);
}

[data-theme="light"] #contact .form-input:focus,
[data-theme="light"] #contact .form-textarea:focus {
    border-color: var(--theme-gradient-light-mid);
}

/* Custom select (old structure) */
#contact .custom-select { position: relative; }

/* 修正下拉選單的 label 位置，避免與內容重疊 */
#contact .custom-select + .form-label {
    top: -10px !important;
    left: 12px !important;
    font-size: 0.8rem !important;
    color: var(--accent-color) !important;
    padding: 0 6px;
    background: linear-gradient(to bottom, transparent 45%, rgba(10,10,10,0.95) 45%);
}

[data-theme="light"] #contact .custom-select + .form-label {
    background: linear-gradient(to bottom, transparent 45%, #ffffff 45%) !important;
}

#contact .select-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}

#contact .select-display:hover { border-color: var(--accent-color); }

[data-theme="light"] #contact .select-display {
    background: rgba(255, 255, 255, 0.9);
    color: #2c3e50;
    border-color: rgba(0, 0, 0, 0.12);
}

#contact .select-display.open .select-arrow { transform: rotate(180deg); }

#contact .select-arrow {
    width: 18px; height: 18px;
    transition: transform 0.25s ease;
    opacity: 0.85;
}

#contact .select-options {
    margin-top: 0.5rem;
    background: rgba(15, 23, 42, 0.98);
    border: 2px solid rgba(255, 87, 51, 0.28);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

[data-theme="light"] #contact .select-options {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 87, 51, 0.28);
}

#contact .select-option {
    padding: 0.85rem 1rem;
    color: #e5e7eb;
    transition: background 0.15s ease, transform 0.15s ease;
}

#contact .select-option:hover {
    background: rgba(255, 87, 51, 0.12);
    transform: translateX(4px);
}

[data-theme="light"] #contact .select-option { color: #2c3e50; }

#contact .select-option.selected {
    background: rgba(255, 87, 51, 0.18);
    color: var(--accent-color);
}

/* Submit button within contact section only */
#contact .cta-button {
    padding: 1rem 1.25rem;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, #FF5733, #FF8A33);
    box-shadow: 0 10px 30px rgba(255, 87, 51, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#contact .cta-button:hover { transform: translateY(-2px); }
#contact .cta-button:active { transform: translateY(0); }

/* Responsive */
@media (max-width: 1024px) {
    #contact .contact-form { padding: 1.5rem; }
}

@media (max-width: 768px) {
    #contact .contact-form { padding: 1.25rem; }
}

/* ===== Google 表單整合：提交通知樣式 ===== */
.form-notification {
    position: fixed;
    top: 100px;
    right: 30px;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    max-width: 400px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: slideInRight 0.3s ease-out;
    transition: opacity 0.3s ease;
}

.form-notification.success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.95), rgba(67, 160, 71, 0.95));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.form-notification.error {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.95), rgba(229, 57, 53, 0.95));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .form-notification.success {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.98), rgba(67, 160, 71, 0.98));
    box-shadow: 0 10px 40px rgba(76, 175, 80, 0.3);
}

[data-theme="light"] .form-notification.error {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.98), rgba(229, 57, 53, 0.98));
    box-shadow: 0 10px 40px rgba(244, 67, 54, 0.3);
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 手機版調整 */
@media (max-width: 768px) {
    .form-notification {
        right: 15px;
        left: 15px;
        max-width: none;
        top: 80px;
    }
}

/* Google 表單容器樣式 */
.google-form-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .google-form-container {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .google-form-container {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* Google 表單 iframe 樣式 */
.google-form-container iframe {
    width: 100%;
    min-height: 1200px;
    border: none;
    display: block;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .google-form-container {
        max-width: 100%;
        margin: 0 1rem;
        border-radius: 15px;
    }
    
    .google-form-container iframe {
        min-height: 1400px; /* 行動裝置需要更多高度 */
    }
}

/* 容器 */
.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* 標題區域 */
.contact-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-color);
    background: rgba(255, 87, 51, 0.1);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 87, 51, 0.3);
}

.contact-subtitle {
    font-size: 1.125rem;
    color: #94a3b8;
    max-width: 600px;
    margin: 1rem auto 0;
}

/* 內容佈局 */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: start;
}

/* 聯絡資訊卡片 */
.contact-info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .contact-info-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.contact-info-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-mid));
    opacity: 0.2;
    border: 1px solid var(--theme-gradient-start);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-gradient-mid);
}

[data-theme="light"] .contact-icon {
    background: linear-gradient(135deg, var(--theme-gradient-light-start), var(--theme-gradient-light-mid));
    opacity: 0.2;
    border-color: var(--theme-gradient-light-start);
    color: var(--theme-gradient-light-mid);
}

.contact-info-item h4 {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin: 0 0 0.5rem 0;
}

.contact-info-item a {
    color: white;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.contact-info-item a:hover {
    color: var(--accent-color);
}

[data-theme="light"] .contact-info-item a {
    color: #2c3e50;
}

.contact-info-item p {
    color: white;
    font-size: 1.125rem;
    margin: 0;
}

[data-theme="light"] .contact-info-item p {
    color: #2c3e50;
}

/* 現代化表單 */
.contact-form-modern {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .contact-form-modern {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* 表單行 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* 表單群組 */
.form-group-modern {
    position: relative;
    margin-bottom: 1.5rem;
}

/* 輸入框 */
.form-input-modern,
.form-textarea-modern {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

[data-theme="light"] .form-input-modern,
[data-theme="light"] .form-textarea-modern {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
    color: #2c3e50;
}

.form-input-modern:focus,
.form-textarea-modern:focus {
    border-color: var(--accent-color);
    background: rgba(255, 87, 51, 0.05);
    box-shadow: 0 0 0 4px rgba(255, 87, 51, 0.1);
}

.form-input-modern:not(:placeholder-shown) ~ .form-label-modern,
.form-input-modern:focus ~ .form-label-modern,
.form-textarea-modern:not(:placeholder-shown) ~ .form-label-modern,
.form-textarea-modern:focus ~ .form-label-modern {
    top: -0.75rem;
    left: 1rem;
    font-size: 0.75rem;
    background: linear-gradient(to bottom, transparent 50%, rgba(10, 10, 10, 0.95) 50%);
    padding: 0 0.5rem;
}

[data-theme="light"] .form-input-modern:not(:placeholder-shown) ~ .form-label-modern,
[data-theme="light"] .form-input-modern:focus ~ .form-label-modern,
[data-theme="light"] .form-textarea-modern:not(:placeholder-shown) ~ .form-label-modern,
[data-theme="light"] .form-textarea-modern:focus ~ .form-label-modern {
    background: linear-gradient(to bottom, transparent 50%, white 50%);
}

/* 標籤 */
.form-label-modern {
    position: absolute;
    top: 1rem;
    left: 3rem;
    color: #94a3b8;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-label-modern-static {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
}

.form-icon {
    font-size: 1.25rem;
}

/* 文字區域 */
.form-textarea-modern {
    min-height: 120px;
    resize: vertical;
    padding-top: 1rem;
}

/* 現代化選擇器 */
.custom-select-modern {
    position: relative;
}

.select-display-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

[data-theme="light"] .select-display-modern {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
}

.select-display-modern:hover {
    border-color: var(--accent-color);
    background: rgba(255, 87, 51, 0.05);
}

.select-icon {
    font-size: 1.5rem;
}

.select-text {
    flex: 1;
    color: white;
    font-size: 1rem;
}

[data-theme="light"] .select-text {
    color: #2c3e50;
}

.select-display-modern.has-selection .select-text {
    color: white;
}

[data-theme="light"] .select-display-modern.has-selection .select-text {
    color: #2c3e50;
}

.select-arrow-modern {
    width: 20px;
    height: 20px;
    fill: currentColor;
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.custom-select-modern.active .select-arrow-modern {
    transform: rotate(180deg);
}

/* 選項列表 */
.select-options-modern {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: rgba(20, 20, 30, 0.98);
    border: 2px solid rgba(255, 87, 51, 0.3);
    border-radius: 12px;
    padding: 0.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .select-options-modern {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 87, 51, 0.3);
}

.custom-select-modern.active .select-options-modern {
    max-height: 400px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow-y: auto;
}

/* 滾動條樣式 */
.select-options-modern::-webkit-scrollbar {
    width: 8px;
}

.select-options-modern::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.select-options-modern::-webkit-scrollbar-thumb {
    background: rgba(255, 87, 51, 0.5);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.select-options-modern::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 87, 51, 0.8);
}

[data-theme="light"] .select-options-modern::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .select-options-modern::-webkit-scrollbar-thumb {
    background: rgba(255, 87, 51, 0.6);
}

[data-theme="light"] .select-options-modern::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 87, 51, 0.9);
}

.select-option-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
}

[data-theme="light"] .select-option-modern {
    color: #2c3e50;
}

.select-option-modern:hover {
    background: rgba(255, 87, 51, 0.1);
    transform: translateX(5px);
}

.select-option-modern.selected {
    background: rgba(255, 87, 51, 0.2);
    color: var(--accent-color);
}

.option-icon {
    font-size: 1.5rem;
}

/* 提交按鈕 */
.form-submit-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, #FF5733, #FF8A33);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.form-submit-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.form-submit-button:hover::before {
    left: 100%;
}

.form-submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 87, 51, 0.4);
}

.form-submit-button:active {
    transform: translateY(0);
}

.button-text {
    position: relative;
    z-index: 1;
}

.button-arrow {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.form-submit-button:hover .button-arrow {
    transform: translateX(5px);
}

/* 響應式設計 */
@media (max-width: 1024px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .contact-container {
        padding: 0 1rem;
    }
    
    .contact-header {
        margin-bottom: 2rem;
    }
    
    .contact-info-card,
    .contact-form-modern {
        padding: 1.5rem;
    }
    
    .section-eyebrow {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
    }
    
    .contact-subtitle {
        font-size: 1rem;
    }
}

/* ===== 行動選單 - 白色色系與動畫 ===== */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 白晝模式的行動選單 */
[data-theme="light"] .mobile-menu-overlay {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%,
        rgba(249, 250, 251, 0.98) 50%,
        rgba(255, 255, 255, 0.98) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* 黑夜模式的行動選單 */
[data-theme="dark"] .mobile-menu-overlay {
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.98) 0%,
        rgba(30, 41, 59, 0.98) 50%,
        rgba(15, 23, 42, 0.98) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* 動畫背景層 */
.mobile-menu-overlay::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, 
        rgba(255, 87, 51, 0.08) 0%,
        transparent 50%
    );
    animation: menu-pulse 8s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}

[data-theme="light"] .mobile-menu-overlay::before {
    background: radial-gradient(circle at center, 
        rgba(255, 87, 51, 0.12) 0%,
        rgba(255, 195, 0, 0.08) 30%,
        transparent 60%
    );
}

.mobile-menu-overlay.active::before {
    opacity: 1;
}

@keyframes menu-pulse {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(5%, -10%) scale(1.1);
    }
    66% {
        transform: translate(-10%, 5%) scale(0.9);
    }
}

/* 選單內容容器 */
.mobile-menu-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.1s;
}

/* 選單項目列表 */
.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 400px;
}

.mobile-menu-item {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-menu-overlay.active .mobile-menu-item {
    opacity: 1;
    transform: translateX(0);
}

/* 選單項目漸入延遲 */
.mobile-menu-overlay.active .mobile-menu-item:nth-child(1) { transition-delay: 0.15s; }
.mobile-menu-overlay.active .mobile-menu-item:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-menu-item:nth-child(3) { transition-delay: 0.25s; }
.mobile-menu-overlay.active .mobile-menu-item:nth-child(4) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-menu-item:nth-child(5) { transition-delay: 0.35s; }

/* 選單連結樣式 */
.mobile-menu-link {
    display: block;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    border-radius: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* 白晝模式選單連結 */
[data-theme="light"] .mobile-menu-link {
    color: #2c3e50;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 87, 51, 0.1);
}

[data-theme="light"] .mobile-menu-link:hover {
    color: #FF5733;
    background: rgba(255, 255, 255, 0.9);
    border-color: #FF5733;
    transform: translateX(10px) scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 87, 51, 0.2);
}

/* 黑夜模式選單連結 */
[data-theme="dark"] .mobile-menu-link {
    color: #f1f5f9;
    background: rgba(30, 41, 59, 0.5);
    border: 2px solid rgba(255, 87, 51, 0.2);
}

[data-theme="dark"] .mobile-menu-link:hover {
    color: #FF5733;
    background: rgba(30, 41, 59, 0.9);
    border-color: #FF5733;
    transform: translateX(10px) scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 87, 51, 0.3);
}
/* 選單連結發光效果 */
.mobile-menu-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 87, 51, 0.2),
        transparent
    );
    transform: translateY(-50%);
    transition: height 0.3s ease;
}

.mobile-menu-link:hover::before {
    height: 100%;
}

/* 關閉按鈕 */
.mobile-menu-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

[data-theme="light"] .mobile-menu-close {
    color: #2c3e50;
}

[data-theme="dark"] .mobile-menu-close {
    color: #f1f5f9;
}

.mobile-menu-close:hover {
    transform: rotate(90deg) scale(1.2);
}

.mobile-menu-close::before,
.mobile-menu-close::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: all 0.3s ease;
}

.mobile-menu-close::before {
    transform: rotate(45deg);
}

.mobile-menu-close::after {
    transform: rotate(-45deg);
}

.mobile-menu-close:hover::before,
.mobile-menu-close:hover::after {
    background: #FF5733;
}

/* 浮動裝飾元素 */
.menu-decoration {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.3;
    animation: float 6s ease-in-out infinite;
}

[data-theme="light"] .menu-decoration {
    background: radial-gradient(circle, rgba(255, 87, 51, 0.3), transparent);
}

[data-theme="dark"] .menu-decoration {
    background: radial-gradient(circle, rgba(255, 87, 51, 0.4), transparent);
}

.menu-decoration:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 7s;
}

.menu-decoration:nth-child(2) {
    bottom: 15%;
    right: 15%;
    animation-delay: 2s;
    animation-duration: 8s;
}

.menu-decoration:nth-child(3) {
    top: 50%;
    right: 20%;
    animation-delay: 4s;
    animation-duration: 6s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(20px, -30px) scale(1.2);
    }
}

/* ===== 社交媒體圖標 - 主題色系 ===== */
.social-icon {
    transition: all 0.3s ease;
}

/* 白晝模式的社交媒體圖標 */
[data-theme="light"] .social-icon {
    color: var(--primary-accent) !important;
    background: rgba(255, 87, 51, 0.1) !important;
    border-color: rgba(255, 87, 51, 0.3) !important;
}

[data-theme="light"] .social-icon:hover {
    color: #fff !important;
    background: var(--primary-accent) !important;
    border-color: var(--primary-accent) !important;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 30px rgba(255, 87, 51, 0.4);
}

[data-theme="light"] .social-icon svg {
    fill: currentColor;
}

/* 黑夜模式的社交媒體圖標 */
[data-theme="dark"] .social-icon {
    color: var(--primary-accent) !important;
    background: rgba(255, 87, 51, 0.15) !important;
    border-color: rgba(255, 87, 51, 0.3) !important;
}

[data-theme="dark"] .social-icon:hover {
    color: #fff !important;
    background: var(--primary-accent) !important;
    border-color: var(--primary-accent) !important;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 30px rgba(255, 87, 51, 0.5);
}

[data-theme="dark"] .social-icon svg {
    fill: currentColor;
}

/* 社交媒體標籤文字 */
[data-theme="light"] .social-label {
    color: rgba(31, 41, 59, 0.6) !important;
}

[data-theme="dark"] .social-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ===============================================
   ❄️ 駐車冷氣輪播 - 寒冷動畫效果
   =============================================== */

/* 寒冷特效容器 */
.cold-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 1;
}

/* 當 AC 幻燈片啟動時顯示特效 */
.ac-slide.active .cold-effects {
    opacity: 1;
}

/* 雪花容器 */
.snowflakes {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* 雪花樣式 */
.snowflake {
    position: absolute;
    top: -10%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    user-select: none;
    animation: snowfall linear infinite;
    text-shadow: 0 0 10px rgba(135, 206, 235, 0.8);
}

/* 為每個雪花設定不同的動畫參數 */
.snowflake:nth-child(1) {
    left: 10%;
    animation-duration: 8s;
    animation-delay: 0s;
    font-size: 1.2rem;
}

.snowflake:nth-child(2) {
    left: 25%;
    animation-duration: 10s;
    animation-delay: 1s;
    font-size: 1.8rem;
}

.snowflake:nth-child(3) {
    left: 40%;
    animation-duration: 12s;
    animation-delay: 2s;
    font-size: 1rem;
}

.snowflake:nth-child(4) {
    left: 55%;
    animation-duration: 9s;
    animation-delay: 0.5s;
    font-size: 1.5rem;
}

.snowflake:nth-child(5) {
    left: 70%;
    animation-duration: 11s;
    animation-delay: 1.5s;
    font-size: 1.3rem;
}

.snowflake:nth-child(6) {
    left: 85%;
    animation-duration: 10s;
    animation-delay: 3s;
    font-size: 1.6rem;
}

.snowflake:nth-child(7) {
    left: 15%;
    animation-duration: 13s;
    animation-delay: 2.5s;
    font-size: 1.4rem;
}

.snowflake:nth-child(8) {
    left: 35%;
    animation-duration: 9s;
    animation-delay: 1s;
    font-size: 1.1rem;
}

.snowflake:nth-child(9) {
    left: 65%;
    animation-duration: 11s;
    animation-delay: 0s;
    font-size: 1.7rem;
}

.snowflake:nth-child(10) {
    left: 90%;
    animation-duration: 10s;
    animation-delay: 2s;
    font-size: 1.2rem;
}

/* 雪花飄落動畫 */
@keyframes snowfall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}

/* 冰晶容器 */
.ice-crystals {
    position: absolute;
    inset: 0;
}

/* 冰晶特效 */
.crystal {
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(
        circle,
        rgba(135, 206, 235, 0.3) 0%,
        rgba(173, 216, 230, 0.2) 40%,
        transparent 70%
    );
    border-radius: 50%;
    animation: crystalFloat 6s ease-in-out infinite;
    filter: blur(3px);
}

.crystal::before {
    content: '';
    position: absolute;
    inset: 10px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    border-radius: 50%;
}

.crystal:nth-child(1) {
    top: 15%;
    left: 20%;
    animation-delay: 0s;
    animation-duration: 7s;
}

.crystal:nth-child(2) {
    top: 60%;
    right: 25%;
    animation-delay: 2s;
    animation-duration: 8s;
}

.crystal:nth-child(3) {
    bottom: 20%;
    left: 30%;
    animation-delay: 4s;
    animation-duration: 6s;
}

.crystal:nth-child(4) {
    top: 40%;
    right: 15%;
    animation-delay: 1s;
    animation-duration: 9s;
}

/* 冰晶飄浮動畫 */
@keyframes crystalFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translate(30px, -30px) scale(1.2);
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
}

/* 冷氣流動波紋效果 */
.cool-wave {
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 200px;
    background: linear-gradient(
        to top,
        rgba(135, 206, 235, 0.2) 0%,
        rgba(173, 216, 230, 0.1) 50%,
        transparent 100%
    );
    animation: waveFlow 8s ease-in-out infinite;
    transform-origin: bottom;
}

.cool-wave-2 {
    animation-delay: 4s;
    opacity: 0.5;
}

/* 波紋流動動畫 */
@keyframes waveFlow {
    0%, 100% {
        transform: translateX(-5%) scaleY(1);
        opacity: 0.3;
    }
    50% {
        transform: translateX(5%) scaleY(1.2);
        opacity: 0.6;
    }
}

/* 亮色模式調整 */
[data-theme="light"] .snowflake {
    color: rgba(135, 206, 235, 0.9);
    text-shadow: 0 0 10px rgba(100, 149, 237, 0.6);
}

[data-theme="light"] .crystal {
    background: radial-gradient(
        circle,
        rgba(100, 149, 237, 0.25) 0%,
        rgba(135, 206, 235, 0.15) 40%,
        transparent 70%
    );
}

[data-theme="light"] .cool-wave {
    background: linear-gradient(
        to top,
        rgba(100, 149, 237, 0.15) 0%,
        rgba(135, 206, 235, 0.08) 50%,
        transparent 100%
    );
}

/* ===============================================
   ⚡ 磷酸鐵鋰電池輪播 - 電力動畫效果
   =============================================== */

/* 電力特效容器 */
.electric-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 1;
}

/* 當電池幻燈片啟動時顯示特效 */
.battery-slide.active .electric-effects {
    opacity: 1;
}

/* 閃電容器 */
.lightning-bolts {
    position: absolute;
    inset: 0;
}

/* 閃電效果 - 加強版 */
.lightning {
    position: absolute;
    width: 4px;
    height: 120px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 1) 5%,
        rgba(255, 215, 0, 1) 20%,
        rgba(255, 255, 200, 1) 50%,
        rgba(255, 215, 0, 1) 80%,
        rgba(255, 255, 255, 1) 95%,
        transparent
    );
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 1),
        0 0 40px rgba(255, 215, 0, 1),
        0 0 60px rgba(255, 215, 0, 0.8),
        0 0 80px rgba(255, 165, 0, 0.6),
        inset 0 0 10px rgba(255, 255, 255, 0.8);
    animation: lightning-strike 3s ease-in-out infinite;
    opacity: 0;
    filter: blur(0.5px);
    transform-origin: top;
}

.lightning::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    transform: translate(-50%, -50%);
}

/* 不同閃電的位置和延遲 */
.bolt-1 {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
    animation-duration: 4s;
}

.bolt-2 {
    top: 60%;
    right: 25%;
    animation-delay: 1.5s;
    animation-duration: 3.5s;
    height: 100px;
}

.bolt-3 {
    bottom: 15%;
    left: 35%;
    animation-delay: 3s;
    animation-duration: 4.5s;
    height: 90px;
}

.bolt-4 {
    top: 35%;
    right: 15%;
    animation-delay: 2s;
    animation-duration: 3s;
    height: 70px;
}

.bolt-5 {
    bottom: 30%;
    left: 15%;
    animation-delay: 2.5s;
    animation-duration: 3.8s;
    height: 95px;
}

.bolt-6 {
    top: 25%;
    right: 35%;
    animation-delay: 1.2s;
    animation-duration: 3.2s;
    height: 85px;
}

.bolt-7 {
    top: 15%;
    left: 45%;
    animation-delay: 0.8s;
    animation-duration: 3.5s;
    height: 110px;
}

.bolt-8 {
    bottom: 20%;
    right: 30%;
    animation-delay: 2.2s;
    animation-duration: 4.2s;
    height: 95px;
}

.bolt-9 {
    top: 50%;
    left: 25%;
    animation-delay: 1.5s;
    animation-duration: 3.8s;
    height: 100px;
}

.bolt-10 {
    bottom: 35%;
    right: 10%;
    animation-delay: 2.8s;
    animation-duration: 3.3s;
    height: 80px;
}

.bolt-11 {
    top: 40%;
    right: 50%;
    animation-delay: 0.5s;
    animation-duration: 4s;
    height: 105px;
}

.bolt-12 {
    bottom: 10%;
    left: 50%;
    animation-delay: 3.2s;
    animation-duration: 3.6s;
    height: 90px;
}

/* 閃電動畫 - 震撼版 */
@keyframes lightning-strike {
    0%, 88%, 100% {
        opacity: 0;
        transform: scaleY(0) scaleX(1);
        filter: blur(0.5px) brightness(1);
    }
    90% {
        opacity: 0.8;
        transform: scaleY(1) scaleX(1.5);
        filter: blur(2px) brightness(3);
    }
    91% {
        opacity: 1;
        transform: scaleY(1.05) scaleX(1);
        filter: blur(0.5px) brightness(5);
    }
    92% {
        opacity: 0.2;
        filter: blur(1px) brightness(2);
    }
    93% {
        opacity: 1;
        transform: scaleY(1) scaleX(1.2);
        filter: blur(0.5px) brightness(6);
    }
    94% {
        opacity: 0.4;
        filter: blur(1.5px) brightness(2);
    }
    95% {
        opacity: 1;
        filter: blur(0.5px) brightness(4);
    }
    97% {
        opacity: 0;
        transform: scaleY(0.9) scaleX(1);
        filter: blur(2px) brightness(1);
    }
}

/* 能量粒子容器 */
.energy-particles {
    position: absolute;
    inset: 0;
}

/* 能量粒子 - 加強版 */
.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 215, 0, 1) 30%,
        rgba(255, 165, 0, 0.8) 60%,
        transparent 100%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 1),
        0 0 30px rgba(255, 215, 0, 1),
        0 0 45px rgba(255, 215, 0, 0.6),
        0 0 60px rgba(255, 165, 0, 0.4);
    animation: particle-float linear infinite, particle-pulse 2s ease-in-out infinite;
}

/* 不同粒子的參數 */
.particle:nth-child(1) {
    left: 15%;
    animation-duration: 6s;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    left: 30%;
    animation-duration: 7s;
    animation-delay: 1s;
    width: 6px;
    height: 6px;
}

.particle:nth-child(3) {
    left: 45%;
    animation-duration: 5s;
    animation-delay: 2s;
}

.particle:nth-child(4) {
    left: 60%;
    animation-duration: 8s;
    animation-delay: 0.5s;
    width: 5px;
    height: 5px;
}

.particle:nth-child(5) {
    left: 75%;
    animation-duration: 6.5s;
    animation-delay: 1.5s;
}

.particle:nth-child(6) {
    left: 85%;
    animation-duration: 7.5s;
    animation-delay: 2.5s;
}

.particle:nth-child(7) {
    left: 25%;
    animation-duration: 6s;
    animation-delay: 3s;
    width: 7px;
    height: 7px;
}

.particle:nth-child(8) {
    left: 55%;
    animation-duration: 5.5s;
    animation-delay: 0.8s;
}

.particle:nth-child(9) {
    left: 10%;
    animation-duration: 6.8s;
    animation-delay: 1.8s;
    width: 6px;
    height: 6px;
}

.particle:nth-child(10) {
    left: 40%;
    animation-duration: 7.2s;
    animation-delay: 2.2s;
}

.particle:nth-child(11) {
    left: 68%;
    animation-duration: 5.8s;
    animation-delay: 0.3s;
    width: 7px;
    height: 7px;
}

.particle:nth-child(12) {
    left: 92%;
    animation-duration: 6.3s;
    animation-delay: 1.3s;
}

/* 粒子上升動畫 - 加強版 */
@keyframes particle-float {
    0% {
        bottom: -10%;
        opacity: 0;
        transform: translateX(0) scale(0.5);
    }
    5% {
        opacity: 1;
        transform: translateX(10px) scale(1);
    }
    25% {
        transform: translateX(-15px) scale(1.2);
    }
    50% {
        transform: translateX(25px) scale(0.9);
    }
    75% {
        transform: translateX(-20px) scale(1.1);
    }
    95% {
        opacity: 1;
        transform: translateX(10px) scale(1);
    }
    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(-30px) scale(0.5);
    }
}

/* 粒子脈衝動畫 */
@keyframes particle-pulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(2.5);
    }
}

/* 電流環繞效果 - 改為閃電環 */
.electric-arc {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(255, 215, 0, 0);
    border-radius: 50%;
    animation: arc-pulse 4s ease-in-out infinite;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 40px rgba(255, 165, 0, 0.3);
    position: relative;
    background: transparent;
}

/* 電弧內部光暈 */
.electric-arc::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        transparent 40%,
        rgba(255, 215, 0, 0.2) 60%,
        transparent 80%
    );
    animation: arc-rotate 8s linear infinite;
}

@keyframes arc-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.arc-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.arc-2 {
    bottom: 25%;
    right: 15%;
    animation-delay: 1.5s;
    width: 150px;
    height: 150px;
}

.arc-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 3s;
    width: 250px;
    height: 250px;
}

.arc-4 {
    top: 30%;
    right: 20%;
    animation-delay: 1.8s;
    width: 180px;
    height: 180px;
}

/* 電弧脈衝動畫 - 閃電環版 */
@keyframes arc-pulse {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
        border-color: rgba(255, 215, 0, 0);
        border-width: 2px;
    }
    50% {
        opacity: 0.8;
        transform: scale(1.5);
        border-color: rgba(255, 215, 0, 0.6);
        border-width: 3px;
        filter: brightness(2) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    }
}

/* 能量波紋 - 加強版 */
.energy-wave {
    position: absolute;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(
        to top,
        rgba(255, 215, 0, 0.4) 0%,
        rgba(255, 165, 0, 0.3) 30%,
        rgba(255, 215, 0, 0.2) 60%,
        transparent 100%
    );
    animation: energy-wave-flow 6s ease-in-out infinite;
    filter: blur(30px);
    box-shadow: 
        0 -20px 60px rgba(255, 215, 0, 0.3),
        0 -40px 80px rgba(255, 165, 0, 0.2);
}

.wave-1 {
    bottom: 0;
    animation-delay: 0s;
}

.wave-2 {
    bottom: 0;
    animation-delay: 3s;
    opacity: 0.6;
}

.wave-3 {
    bottom: 0;
    animation-delay: 1.5s;
    opacity: 0.4;
    height: 180px;
}

/* 能量波動畫 - 加強版 */
@keyframes energy-wave-flow {
    0% {
        transform: translateY(0) scaleX(1) scaleY(1);
        opacity: 0.2;
        filter: blur(30px) brightness(1);
    }
    25% {
        transform: translateY(-20px) scaleX(1.05) scaleY(1.1);
        opacity: 0.6;
        filter: blur(25px) brightness(1.5);
    }
    50% {
        transform: translateY(-40px) scaleX(1.15) scaleY(1.2);
        opacity: 0.8;
        filter: blur(20px) brightness(2);
    }
    75% {
        transform: translateY(-20px) scaleX(1.05) scaleY(1.1);
        opacity: 0.6;
        filter: blur(25px) brightness(1.5);
    }
    100% {
        transform: translateY(0) scaleX(1) scaleY(1);
        opacity: 0.2;
        filter: blur(30px) brightness(1);
    }
}

/* 亮色模式調整 */
[data-theme="light"] .lightning {
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 200, 0, 0.9) 10%,
        rgba(255, 220, 50, 1) 50%,
        rgba(255, 200, 0, 0.9) 90%,
        transparent
    );
    box-shadow: 
        0 0 15px rgba(255, 200, 0, 0.9),
        0 0 25px rgba(255, 200, 0, 0.7),
        0 0 35px rgba(255, 200, 0, 0.5);
}

[data-theme="light"] .particle {
    background: radial-gradient(
        circle,
        rgba(255, 200, 0, 1),
        rgba(255, 150, 0, 0.9),
        transparent
    );
    box-shadow: 
        0 0 12px rgba(255, 200, 0, 0.9),
        0 0 24px rgba(255, 200, 0, 0.5);
}

[data-theme="light"] .electric-arc {
    border-color: rgba(255, 200, 0, 0.7);
    box-shadow: 
        0 0 25px rgba(255, 200, 0, 0.5),
        inset 0 0 25px rgba(255, 200, 0, 0.3);
}

[data-theme="light"] .energy-wave {
    background: linear-gradient(
        to top,
        rgba(255, 200, 0, 0.25) 0%,
        rgba(255, 150, 0, 0.15) 50%,
        transparent 100%
    );
}

/* ===============================================
   💥 電力衝擊波效果
   =============================================== */

.shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 4px solid rgba(255, 215, 0, 0);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: shockwave-expand 4s ease-out infinite;
}

.shock-1 {
    animation-delay: 0s;
}

.shock-2 {
    animation-delay: 1.3s;
}

.shock-3 {
    animation-delay: 2.6s;
}

@keyframes shockwave-expand {
    0% {
        width: 80px;
        height: 80px;
        border-color: rgba(255, 255, 255, 0.9);
        border-width: 4px;
        opacity: 0;
        filter: blur(0px) brightness(3);
    }
    10% {
        opacity: 1;
        border-color: rgba(255, 215, 0, 0.9);
    }
    50% {
        border-color: rgba(255, 215, 0, 0.5);
        border-width: 3px;
        filter: blur(2px) brightness(2);
    }
    100% {
        width: 600px;
        height: 600px;
        border-color: rgba(255, 165, 0, 0);
        border-width: 1px;
        opacity: 0;
        filter: blur(5px) brightness(1);
    }
}

/* ===============================================
   ✨ 火花效果
   =============================================== */

.sparks {
    position: absolute;
    inset: 0;
}

.spark {
    position: absolute;
    width: 3px;
    height: 12px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1),
        rgba(255, 215, 0, 1),
        transparent
    );
    border-radius: 50% 50% 0 0;
    animation: spark-fly 2s ease-out infinite;
    opacity: 0;
    box-shadow: 
        0 0 10px rgba(255, 215, 0, 1),
        0 0 20px rgba(255, 165, 0, 0.6);
}

.spark:nth-child(1) {
    top: 40%;
    left: 30%;
    animation-delay: 0.5s;
    animation-duration: 1.8s;
}

.spark:nth-child(2) {
    top: 35%;
    left: 55%;
    animation-delay: 1.2s;
    animation-duration: 2.2s;
}

.spark:nth-child(3) {
    top: 50%;
    left: 45%;
    animation-delay: 0.8s;
    animation-duration: 2s;
}

.spark:nth-child(4) {
    top: 42%;
    left: 65%;
    animation-delay: 1.5s;
    animation-duration: 1.9s;
}

.spark:nth-child(5) {
    top: 38%;
    left: 25%;
    animation-delay: 0.3s;
    animation-duration: 2.1s;
}

.spark:nth-child(6) {
    top: 45%;
    left: 70%;
    animation-delay: 1.8s;
    animation-duration: 2.3s;
}

@keyframes spark-fly {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
        filter: brightness(3);
    }
    20% {
        opacity: 1;
        filter: brightness(2);
    }
    70% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) translateX(calc(var(--spark-x, 30px))) rotate(calc(var(--spark-rotate, 45deg))) scale(0.3);
        filter: brightness(1);
    }
}

.spark:nth-child(odd) {
    --spark-x: -40px;
    --spark-rotate: -50deg;
}

.spark:nth-child(even) {
    --spark-x: 40px;
    --spark-rotate: 50deg;
}

/* ===============================================
   🔋 電池充能指示器
   =============================================== */

.charge-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
}

.charge-bar {
    width: 6px;
    height: 30px;
    background: linear-gradient(
        to top,
        rgba(255, 215, 0, 0.3),
        rgba(255, 215, 0, 0.8)
    );
    border-radius: 3px;
    animation: charge-pulse 1.5s ease-in-out infinite;
    box-shadow: 
        0 0 10px rgba(255, 215, 0, 0.5),
        inset 0 0 5px rgba(255, 255, 255, 0.3);
}

.charge-bar:nth-child(1) {
    animation-delay: 0s;
}

.charge-bar:nth-child(2) {
    animation-delay: 0.2s;
}

.charge-bar:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes charge-pulse {
    0%, 100% {
        background: linear-gradient(
            to top,
            rgba(255, 215, 0, 0.3),
            rgba(255, 215, 0, 0.5)
        );
        box-shadow: 
            0 0 5px rgba(255, 215, 0, 0.3),
            inset 0 0 3px rgba(255, 255, 255, 0.2);
        transform: scaleY(0.8);
    }
    50% {
        background: linear-gradient(
            to top,
            rgba(255, 215, 0, 0.8),
            rgba(255, 255, 255, 1)
        );
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 1),
            0 0 30px rgba(255, 165, 0, 0.6),
            inset 0 0 10px rgba(255, 255, 255, 0.8);
        transform: scaleY(1);
        filter: brightness(2);
    }
}

/* 亮色模式調整 */
[data-theme="light"] .charge-indicator {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 200, 0, 0.5);
}

[data-theme="light"] .shockwave {
    border-color: rgba(255, 200, 0, 0.9);
}

[data-theme="light"] .spark {
    box-shadow: 
        0 0 12px rgba(255, 200, 0, 1),
        0 0 24px rgba(255, 150, 0, 0.7);
}