:root {
    --bg-color: #050505;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --accent-1: #6366f1;
    --accent-2: #ec4899;
    --accent-3: #8b5cf6;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

.bg-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    animation: float 20s infinite ease-in-out alternate;
}

.glow-1 {
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, var(--accent-1), transparent 70%);
}

.glow-2 {
    bottom: -20%;
    right: -10%;
    background: radial-gradient(circle, var(--accent-2), transparent 70%);
    animation-delay: -5s;
}

.glow-3 {
    top: 40%;
    left: 40%;
    background: radial-gradient(circle, var(--accent-3), transparent 70%);
    opacity: 0.2;
    animation-delay: -10s;
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 50px) scale(1.2); }
}

/* Glassmorphism */

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .glass-card, .navbar {
        /* 將模糊度稍微調低，視覺差異極小，但手機跑起來快很多 */
        backdrop-filter: blur(8px); 
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Navigation */

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.5rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: rgba(5, 5, 5, 0.5);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    transition: padding 0.3s ease;
}

/* --- 導覽列 Logo 樣式修正 --- */
.logo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    
    /* 🛠️ [新增] 清除超連結預設樣式 */
    text-decoration: none; /* 移除底線 */
    color: var(--text-primary); /* 強制使用你的主文字顏色 (白色)，防止變藍/紫 */
    
    display: flex; /* [選用] 確保文字垂直居中 */
    align-items: center;
}

/* 確保 <span> 的靛藍色不受影響 */
.logo span {
    color: var(--accent-1);
}

/* [選用] 加一個滑鼠懸停效果，讓使用者知道這是可以點擊的 */
.logo:hover {
    opacity: 0.8; /* 懸停時輕微變淡 */
    transition: opacity 0.3s ease;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    justify-content: center;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--text-primary);
}



.nav-links a:hover::after {
    width: 100%;
}

/* Hero Section */

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5%;
    position: relative;
}

.badge {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.text-gradient {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 3rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-3) 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}



.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}



.arrow {
    transition: transform 0.3s ease;
}



.cta-button:hover .arrow {
    transform: translateY(3px);
}



/* Sections */

section {
    padding: 8rem 5%;
    max-width: 1200px;
    margin: 0 auto;
}



.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}



.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    border-radius: 2px;
}



/* Intro */

.intro-section .glass-card {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}



.intro-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}



.intro-section p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}



/* Timeline */

.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}



.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-1), var(--accent-2), var(--accent-3));
    border-radius: 2px;
}



.timeline-item {
    position: relative;
    padding-left: 60px;
    margin-bottom: 3rem;
}



.timeline-item:last-child {
    margin-bottom: 0;
}



.timeline-dot {
    position: absolute;
    left: 11px;
    top: 24px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 4px solid var(--accent-1);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    z-index: 1;
    transition: background 0.3s ease, transform 0.3s ease;
}



.timeline-item:hover .timeline-dot {
    background: var(--accent-1);
    transform: scale(1.2);
}



.timeline-item:nth-child(even) .timeline-dot {
    border-color: var(--accent-2);
}



.timeline-item:nth-child(even):hover .timeline-dot {
    background: var(--accent-2);
}



.timeline-item:nth-child(3n) .timeline-dot {
    border-color: var(--accent-3);
}



.timeline-item:nth-child(3n):hover .timeline-dot {
    background: var(--accent-3);
}



.year {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-1);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.3rem 1rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}



.timeline-item:nth-child(even) .year {
    color: var(--accent-2);
    background: rgba(236, 72, 153, 0.1);
}



.timeline-item:nth-child(3n) .year {
    color: var(--accent-3);
    background: rgba(139, 92, 246, 0.1);
}



.timeline-content h3 {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
}



.timeline-content p {
    color: var(--text-secondary);
}



/* Future Section */

.future-card {
    text-align: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
}



.future-card h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



.future-card p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}



/* Footer */

footer {
    text-align: center;
    padding: 3rem 5%;
    border-top: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.9rem;
}



/* Animations */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(5px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}



/* Responsive */

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    .timeline-container::before {
        left: 10px;
    }
    .timeline-item {
        padding-left: 40px;
    }
    .timeline-dot {
        left: 1px;
    }
    section {
        padding: 5rem 5%;
    }
    .title {
        font-size: 2.8rem;
    }
}



/* 狀態標籤基礎樣式 */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    font-family: monospace;
}



/* 狀態圓點 */

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888; /* 預設灰色 */
    transition: all 0.3s ease;
}



/* 在線時的綠燈效果 (呼吸燈) */
.badge.online {
    background: rgba(0, 255, 65, 0.1);
    border: 1px solid rgba(0, 255, 65, 0.3);
    color: #00ff41;
}

.badge.offline {
    background: rgba(255, 62, 62, 0.1);
    border: 1px solid rgba(255, 62, 62, 0.3);
    color: #ff3e3e;
}

/* 活體系統指示燈 */
.status-dot {
    height: 8px;
    width: 8px;
    background-color: #00ff00;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    box-shadow: 0 0 8px #00ff00;
    animation: blink 2s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}



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

#bot-status-badge.online .status-dot {
    background-color: #00ff41; /* 綠色 */
    box-shadow: 0 0 10px #00ff41;
}

#bot-status-badge.offline .status-dot {
    background-color: #ff3e3e; /* 紅色 */
    box-shadow: 0 0 10px #ff3e3e;
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    background-color: #888; /* 預設灰燈 */
}

/* 針對手機版 (寬度小於 768px) 的調整 */
@media (max-width: 768px) {
    .title {
        font-size: 2.5rem; /* 縮小手機版的標題字體 */
        line-height: 1.2;
    }

    .subtitle {
        font-size: 1rem;
        padding: 0 10px; /* 增加兩側間距避免貼邊 */
    }

    .hero {
        padding: 0 20px;
    }

    /* 讓狀態標籤在手機上更顯眼 */
    .badge {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* 讓 Logo 與連結上下排列 */
        padding: 1rem 0;
    }

    .nav-links {
        display: flex;
        gap: 1rem; /* 縮小連結間距 */
        margin-top: 10px;
        overflow-x: auto; /* 如果連結太多，允許左右滑動 */
        width: 100%;
        justify-content: center;
    }

    .nav-links a {
        font-size: 0.85rem;
        white-space: nowrap; /* 防止連結文字換行 */
    }
}

@media (max-width: 768px) {
    .timeline-container::before {
        left: 15px; /* 把中間的那條線往左移 */
    }

    .timeline-item {
        padding-left: 35px; /* 縮小縮進 */
    }

    .timeline-dot {
        left: 6px; /* 調整圓點位置 */
        width: 16px;
        height: 16px;
    }

    .glass-card {
        padding: 1.5rem; /* 縮小卡片的內邊距 */
    }
}

@media (max-width: 768px) {
    .glow {
        width: 300px;
        height: 300px;
        filter: blur(80px); /* 減輕手機 GPU 負擔 */
    }
}

/* 移除所有 left: 50% 或 transform 居中法，改用 flex 概念 */
.section-title {
    display: block;      /* 確保它是區塊元素 */
    width: 100%;         /* 佔滿寬度 */
    text-align: center;  /* 讓裡面的文字置中 */
    margin: 0 auto 3rem; /* 左右 auto 確保容器置中 */
    position: relative;
    left: 0 !important;  /* 強制歸零，防止手機版歪掉 */
    transform: none !important; /* 防止與 reveal 動畫衝突 */
}

/* 修正底部的裝飾線 */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%); /* 只有裝飾線需要位移 */
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    border-radius: 2px;
}

/* 修正 reveal 動畫在手機上的衝突 */
.reveal.active {
    opacity: 1;
    /* 這裡只負責上下移動，不要去動到左右位置 */
    transform: translateY(0) !important;
}

/* 針對手機版 (螢幕寬度小於 768px) 的微調 */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.8rem;    /* 手機版字體縮小一點比較精緻 */
        margin-bottom: 2.5rem;
        padding: 0 15px;      /* 增加一點左右內距，防止文字貼到螢幕邊緣 */
    }
}

/* 讓點點動起來的動畫 */
.loading-dots::after {
    content: '';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

/* 讓整行文字有呼吸閃爍感 (選用) */
.detecting {
    opacity: 1;
    animation: pulse-text 1.5s infinite ease-in-out;
}

@keyframes pulse-text {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* =========================================
   指令介紹頁面專屬樣式 (補齊缺失部分)
   ========================================= */

/* 指令網格佈局 */
.commands-section {
    padding-top: 120px; /* 避開固定導覽列 */
}

/* --- 指令網格佈局：解決單張卡片暴走問題 --- */
.commands-grid {
    display: grid;
    /* 關鍵修改：將 1fr 換成固定的最大值 430px */
    /* repeat(auto-fill, ...) 會根據容器寬度自動填充，但每張卡片限制在 430px */
    grid-template-columns: repeat(auto-fill, minmax(320px, 430px)); 
    
    gap: 2.5rem;
    margin: 3rem auto;
    max-width: 1200px; /* 限制整體容器寬度 */
    
    /* 當卡片只有一張或兩張時，這行能確保它們在螢幕水平居中 */
    justify-content: center; 
}

/* 手機版適配：確保小螢幕下能縮小 */
@media (max-width: 480px) {
    .commands-grid {
        /* 手機版改回 1fr 讓它滿版，因為 430px 可能會超出小手機螢幕 */
        grid-template-columns: 1fr; 
        padding: 0 1rem;
    }
}

/* 3. 手機版保持原樣 (寬度小於 768px) */
@media (max-width: 768px) {
    .commands-grid {
        /* 手機版維持你現在覺得不錯的樣式，一張卡片佔滿寬度 */
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* 指令卡片外框 (複用部分 glass-card 但取消內距) */
.command-card {
    padding: 0 !important; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #050025; /* 保持極深色底 */
    border-radius: 20px;
    border: 2px solid rgb(255 255 255 / 30%);
    box-shadow: 
        0 0 15px rgba(99, 102, 241, 0.15), /* 柔和的外發光 */
        0 4px 6px rgba(0, 0, 0, 0.3); /* 陰影依舊在 */
    
    transition: all 0.3s ease;
}

.command-card:hover {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.25);
}

/* 模擬終端機頂部欄 */
.terminal-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.terminal-header .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.command-name {
    margin-left: 10px;
    font-family: 'Fira Code', 'Roboto Mono', monospace;
    font-size: 0.95rem;
    font-weight: 500;
    
    background: rgba(0, 0, 0, 0.4); 
    color: var(--accent-1); 
    
    /* 關鍵 1: 修改內距，並確保 box-sizing 包含內距與邊框 */
    box-sizing: border-box; 
    padding: 4px 0; /* 左右內距移到動畫裡控制，避免卡住 */
    
    display: inline-block; 
    width: 0;
    max-width: max-content; 
    
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;

    /* 關鍵 2: 游標位置 */
    border-right: 3px solid var(--accent-1); 

    animation: 
        typing-dynamic-witt 5s steps(30, end) infinite,
        cursor-blink-witt 0.8s infinite step-start;
}

/* --- 動畫定義：動態寬度 + 內距縮放 --- */
@keyframes typing-dynamic-witt {
    0% { 
        width: 0; 
        padding-left: 0; 
        padding-right: 0;
        border-right-color: var(--accent-1);
    }
    /* 0% - 40%: 打字中，並同時展開左右內距 */
    40% { 
        width: 100%; 
        padding-left: 12px; 
        padding-right: 12px; 
    } 
    /* 40% - 90%: 停頓停留 */
    90% { 
        width: 100%; 
        padding-left: 12px; 
        padding-right: 12px; 
        border-right-color: var(--accent-1);
    } 
    /* 95% - 100%: 快速消失，連同內距與游標顏色一起清空 */
    95%, 100% { 
        width: 0; 
        padding-left: 0; 
        padding-right: 0;
        border-right-color: transparent; /* 消失時藏起游標線 */
    }
}

/* 游標閃爍：維持原有節奏 */
@keyframes cursor-blink-witt {
    0%, 100% { border-right-color: var(--accent-1); }
    50% { border-right-color: transparent; }
}

/* 指令展示圖區塊 */
.command-demo img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--glass-border);
}

/* 指令文字資訊區 */
.command-info {
    padding: 1.5rem;
}

.command-info h3 {
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.command-info p {
    color: #e0e0e0; /* 內文用極淺灰，不要用原本太暗的 secondary色 */
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* 程式碼標籤樣式 */
.code-badge {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-1);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* 手機版適配微調 */
@media (max-width: 480px) {
    .commands-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 指令分類按鈕樣式 --- */
.command-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-1);
    color: white;
}

.filter-btn.active {
    background: var(--accent-1);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* --- 僅新增：指令影片專屬美化 --- */
/* 幫影片容器加一個掃描線層 */
.command-demo {
    position: relative;
    overflow: hidden;
    background: #000;
}

/* 當影片還沒播放時（或是正在載入），顯示掃描線 */
.command-demo::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* 製作黑色的細橫線效果 */
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.25) 50%
    ), linear-gradient(
        90deg, 
        rgba(255, 0, 0, 0.03), 
        rgba(0, 255, 0, 0.01), 
        rgba(0, 0, 255, 0.03)
    );
    background-size: 100% 4px, 3px 100%;
    z-index: 2;
    pointer-events: none; /* 確保不影響點擊影片 */
    opacity: 0.6;
}

/* 當影片開始播放後，可以考慮把掃描線變淡（選用） */
.command-demo:hover::before {
    opacity: 0.3;
    transition: opacity 0.5s ease;
}
/* --- 最終修正：確保影片完整顯示不裁切 --- */
.command-demo video {
    width: 100%;
    height: auto;
    /* 關鍵 1: 使用 contain 確保影片完整縮放 */
    object-fit: contain; 
    display: block;
    /* 關鍵 2: 背景設為深色，若比例不合會以黑邊補齊而非裁切 */
    background: #000; 
    /* 關鍵 3: 移除強制比例，讓它跟隨影片原始比例 */
    aspect-ratio: auto; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* 移除任何會導致溢出的放大效果 */
.command-card:hover .command-demo video {
    transform: none !important;
}

/* --- 首頁進場動畫定義 --- */

/* 1. 基礎浮現動畫 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 2. 標題發光擴張效果 (更加硬派) */
@keyframes titleGlow {
    0% {
        letter-spacing: -10px;
        opacity: 0;
        filter: blur(20px);
    }
    100% {
        letter-spacing: -1px;
        opacity: 1;
        filter: blur(0);
    }
}

/* --- 應用到具體元件 --- */

/* 預設隱藏，待會用 JS 或純 CSS 觸發 */
.hero .badge, 
.hero .title, 
.hero .subtitle, 
.hero .cta-button {
    opacity: 0; /* 初始隱藏 */
    animation-fill-mode: forwards; /* 動畫結束後保持在最後狀態 */
}

/* 設定每個元件出現的時間差 (Staggered Animation) */
.hero .badge {
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.hero .title {
    animation: titleGlow 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

.hero .subtitle {
    animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

.hero .cta-button {
    animation: fadeInUp 0.8s ease-out 1.1s forwards;
}

.visitor-stats {
    margin-top: 15px;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.stats-number {
    color: var(--accent-1); /* 使用你的品牌色 */
    font-weight: 700;
}

.divider {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.2);
}

/* 返回最上方按鍵基礎樣式 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05); /* 玻璃感背景 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px; /* 稍微方正一點更硬派 */
    color: var(--accent-1, #00d4ff); /* 使用你的品牌主色 */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    opacity: 0; /* 預設隱藏 */
    visibility: hidden;
    transform: translateY(20px);
}

/* 當按鍵顯示時的類別 (由 JS 控制) */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.top-text {
    font-size: 10px;
    font-weight: bold;
    margin-top: 2px;
}

/* Hover 效果：發光感 */
.back-to-top:hover {
    background: var(--accent-1, #00d4ff);
    color: #000;
    box-shadow: 0 0 20px var(--accent-1, #00d4ff);
    transform: translateY(-5px);
}

@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.error-code {
    animation: glitch 0.3s infinite alternate-reverse;
}