/* 全局設定與 CSS 變數 */
:root {
    /* 1. 顏色配置 (Color System) */
    --primary-color: #6367FF;         /* 主色：藍紫色 */
    --primary-light: #8386ff;         /* 淺色版：用於 hover 效果或次要高亮 */
    --primary-dark: #4b4ee6;          /* 深色版：用於 active 或強調 */
    
    --bg-color: #0d1117;              /* 深色背景 */
    
    --text-primary: #ffffff;          /* 主要文字顏色（白色，對比度高） */
    --text-secondary: #a1a3b8;        /* 次要文字顏色（略帶藍紫色調的灰色） */
    
    /* 語意色彩 */
    --color-success: #10b981;         /* 成功（綠） */
    --color-error: #ef4444;           /* 錯誤（紅） */
    --color-warning: #f59e0b;         /* 警告（黃） */
    
    --glass-bg: rgba(20, 24, 38, 0.4);      /* 玻璃面板背景顏色 */
    --glass-border: rgba(99, 103, 255, 0.2); /* 玻璃面板邊框顏色 */
    
    --border-radius-card: 16px;       /* 卡片圓角統一設定 */
    --border-radius-btn: 50px;        /* 按鈕圓角統一設定 */
}

/* 重置瀏覽器預設樣式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 2. 字體設定 (Typography) */
    font-family: 'Noto Sans TC', sans-serif;
    background-color: var(--bg-color);
    /* 加入深藍紫色系發光背景漸變效果 */
    background-image:
        radial-gradient(at 0% 0%, rgba(99, 103, 255, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(131, 134, 255, 0.1) 0px, transparent 50%);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.7; /* 內文間距優化：1.6~1.8 之間 */
    letter-spacing: 0.05em; /* 內文間距優化：適度調整 */
}

/* 標題字級階層設定 */
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
}

/* 頂部導覽列 (Navbar) 樣式 */
.navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(13, 17, 23, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* 導覽列品牌 Logo 樣式 */
.nav-brand {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* 導覽列選單 */
.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 1rem;
    /* 微動畫：互動元素必須加上 transition */
    transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-light);
}

/* 填滿畫面的主區域 */
.hero {
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    display: flex;
    justify-content: center;
    margin-top: 80px; /* 避開固定在頂部的導覽列 */
}

/* 玻璃擬態面板（Glassmorphism） */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-card); /* 統一圓角設定 */
    padding: 4rem 3rem; /* 統一內距設定 */
    text-align: center;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    /* 載入時的淡入動畫 */
    animation: fadeIn 1s ease-out;
}

/* 主標題樣式 */
.title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

/* 文字漸層特效 */
.highlight {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 講師名稱樣式 */
.instructor {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--primary-light);
    margin-bottom: 1rem;
}

/* 講師圖片樣式 */
.instructor-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 20px rgba(99, 103, 255, 0.2);
    /* 微動畫：平滑過渡 */
    transition: transform 0.2s ease;
}

.instructor-img:hover {
    transform: scale(1.05) rotate(5deg);
}

/* 副標題樣式 */
.subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

/* 課程特色區塊（使用 Flexbox 排列） */
.features {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* 單個特色卡片 */
.feature-card {
    flex: 1;
    min-width: 250px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    padding: 2rem;
    border-radius: var(--border-radius-card); /* 統一圓角設定 */
    /* 微動畫：平滑過渡 */
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* 卡片懸停動畫效果 */
.feature-card:hover {
    transform: translateY(-5px);
    background: rgba(99, 103, 255, 0.05); /* 微微的品牌色背景 */
    border-color: var(--primary-color);
}

/* 圖示樣式 (Font Awesome) */
.icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* 價格顯示區塊 */
.pricing {
    margin-bottom: 2rem;
}

.price {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-primary);
}

.duration {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* 主要按鈕樣式 */
.primary-btn {
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 1rem 3rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: var(--border-radius-btn); /* 統一內距與圓角 */
    cursor: pointer;
    /* 微動畫：所有按鈕加上 0.2s transition */
    transition: all 0.2s ease;
    box-shadow: 0 8px 16px rgba(99, 103, 255, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* 給圖示和文字適當的間距 */
}

/* 按鈕懸停動畫效果 */
.primary-btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px); /* 輕微上浮 */
    box-shadow: 0 12px 24px rgba(99, 103, 255, 0.4);
}

.primary-btn:active {
    background: var(--primary-dark);
    transform: translateY(0); /* 按下時恢復原位 */
    box-shadow: 0 4px 8px rgba(99, 103, 255, 0.3);
}

/* 頁面載入淡入動畫設定 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 響應式佈局 (Responsive Design) */
/* 斷點設定：平板 768px 以下 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        position: relative; /* 手機版不置頂以節省空間 */
    }

    .hero {
        margin-top: 0;
    }

    .title {
        font-size: 2.5rem; /* 字級縮小 */
    }

    .features {
        flex-direction: column; /* 卡片響應式自動適應為直向 */
    }

    .glass-panel {
        padding: 3rem 1.5rem; /* 縮小內距 */
    }
}

/* 桌面版寬螢幕優化：1200px 以上 */
@media (min-width: 1200px) {
    .title {
        font-size: 4rem; /* 放大字級 */
    }
    
    .subtitle {
        font-size: 1.4rem;
    }
}