/* ==========================================================================
   樺領智安 (ENNOLEAD) - 官方網站獨立樣式表 style.css
   樺漢科技集團 (Ennoconn Group) 旗下成員
   包含：玻璃擬物質感 (Glassmorphism)、RWD 響應式排版、極致深色資安風格
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

/* --- 1. CSS 全域變數定義 --- */
:root {
    --bg-deep: #0B132B;
    --glass-bg: rgba(19, 27, 46, 0.75);
    --cyan-accent: #00F0FF;
    --green-accent: #10B981;
    --blue-accent: #3B82F6;
    --text-white: #F8FAFC;
    --text-muted: #94A3B8;
}

/* --- 2. 基礎與全域設定 --- */
body {
    background-color: var(--bg-deep);
    color: var(--text-white);
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* 玻璃擬物面板 (Glassmorphism) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(58, 80, 107, 0.4);
    border-radius: 1rem;
}

/* Bento Grid 業務卡片懸浮效果 */
.bento-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.bento-card:hover {
    transform: translateY(-5px);
    border-color: var(--cyan-accent);
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.25);
}

/* 導覽列連結底線動畫 */
.nav-link {
    position: relative;
    transition: color 0.3s;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--cyan-accent);
    transition: width 0.3s;
}

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

/* --------------------------------------------------------------------------
   Chart.js 圖表容器高度設定 (解決 Canvas 空白關鍵)
   -------------------------------------------------------------------------- */
.chart-container {
    position: relative;
    width: 100%;
    height: 300px; /* 強制給予圖表高度，Chart.js 才能成功渲染 */
    margin: 0 auto;
}

@media (max-width: 768px) {
    .chart-container {
        height: 240px; /* 手機版適當縮小高度 */
    }
}

/* 行動按鈕 (CTA) 漸層 */
.cta-button {
    background: linear-gradient(135deg, var(--cyan-accent), var(--blue-accent));
    transition: transform 0.2s, box-shadow 0.2s;
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

/* 全站自訂滾動條 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #3A506B; border-radius: 10px; }

/* 行動端底部懸浮選單 */
.mobile-sticky-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-sticky-bar {
        display: flex;
    }
}