.logo { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.3em; color: var(--text-dark); text-decoration: none; }

/* --- Hero 區塊優化 --- */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bg-warm); /* 確保圖片載入前有基礎暖色 */
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 複合遮罩：左側/頂部微暗，確保文字浮現 */
    background-image: 
        linear-gradient(
            to bottom, 
            rgba(249, 247, 242, 0.4) 0%, 
            rgba(249, 247, 242, 0.2) 50%, 
            rgba(0, 0, 0, 0.1) 100%
        ), 
        url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* 針對深色圖片的自動遮罩層 (Pseudo-element) */
.hero-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 增加一個細微的白色/暖色半透明層，壓低圖片的對比度，讓黑色文字更明顯 */
    background: rgba(249, 247, 242, 0.2); 
    z-index: 2;
}

.hero-content {
    position: relative;
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
    z-index: 10;
}

/* 文字陰影優化：使用「擴散型」陰影，肉眼看不出陰影，但能將文字與背景剝離 */
.hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.3;
    margin-bottom: 30px;
    color: var(--text-dark);
    text-shadow: 
        0 2px 15px rgba(249, 247, 242, 0.8), /* 暖色亮邊 */
        0 0 30px rgba(249, 247, 242, 0.5);   /* 擴散亮區 */
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-dark); /* 提升亮度對比 */
    margin-bottom: 45px;
    font-weight: 400; /* 加重一點字重 */
    text-shadow: 0 0 20px rgba(249, 247, 242, 0.8);
}

/* 如果圖片真的「非常深」，可以透過一個 class 切換為淺色文字模式 */
.hero.dark-mode-hero h1, 
.hero.dark-mode-hero p {
    color: #FFFFFF;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.hero.dark-mode-hero .hero-bg::after {
    background: rgba(0, 0, 0, 0.4); /* 圖片太深時，反向加深遮罩並換白字 */
}

/* 浮動組件容器 */
.floating-contact-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 對話氣泡樣式 */
.chat-bubble {
    background: var(--white);
    border: 1px solid var(--sand-light);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    padding: 20px 25px;
    border-radius: 15px 15px 2px 15px;
    max-width: 280px;
    margin-bottom: 20px;
    position: relative;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.chat-bubble.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.bubble-tag {
    display: block;
    font-size: 0.75rem;
    color: var(--accent-gold);
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}

.bubble-content p {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 0;
}

.bubble-close {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: var(--sand-light);
    font-size: 1.2rem;
    cursor: pointer;
}

/* 按鈕組動畫 */
.fab-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.fab-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.fab-btn svg { width: 28px; height: 28px; }

.btn-line { background-color: #06C755; }
.btn-phone { background-color: var(--accent-gold); }

.fab-btn:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* 提醒動畫：輕微脈衝效果 */
@keyframes nudgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.fab-btn.nudge {
    animation: nudgePulse 2s infinite ease-in-out;
}

/* 手機端優化 */
@media (max-width: 768px) {
    .floating-contact-wrap { right: 20px; bottom: 100px; } /* 避開底部常駐列 */
    .chat-bubble { max-width: 220px; padding: 15px; }
}

/* 氣泡內部排版 */
.bubble-inner {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

/* 頭像樣式 */
.bubble-avatar {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    border: 2px solid var(--white);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background: var(--sand-light);
    overflow: visible; /* 為了顯示狀態點 */
}

.bubble-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 在線狀態小點動畫 */
.online-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background-color: #06C755;
    border: 2px solid var(--white);
    border-radius: 50%;
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.4); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(6, 199, 85, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(6, 199, 85, 0); }
}

.bubble-tag {
    display: block;
    font-size: 0.75rem;
    color: var(--accent-gold);
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: 0.05em;
    font-family: 'Noto Serif TC', serif;
}

.bubble-content p {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* 調整氣泡形狀以適應頭像 */
.chat-bubble {
    background: var(--white);
    border: 1px solid var(--sand-light);
    box-shadow: 0 20px 40px rgba(45, 41, 38, 0.12);
    padding: 18px;
    border-radius: 20px 20px 5px 20px;
    max-width: 320px;
    /* 其餘 transition 與 opacity 保持上一版本設定 */
}

/* --- 導覽列通用樣式 --- */
nav { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 1000; 
    background: rgba(249, 247, 242, 0.9); /* 暖沙背景 */
    backdrop-filter: blur(15px); /* 磨砂玻璃質感 */
    border-bottom: 1px solid var(--sand-light);
    transition: 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* 桌面版左右分開 */
    align-items: center;
    padding: 15px 5%;
}

.logo { 
    font-size: 1.2rem; 
    font-weight: 600; 
    letter-spacing: 0.3em; 
    color: var(--text-dark); 
    text-decoration: none;
    transition: 0.3s;
}

.nav-links {
    display: flex;
    gap: 25px; /* 桌面版間距 */
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 400;
    transition: 0.3s;
}

/* --- 手機版專屬優化 (修正置中與全顯示) --- */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column; /* 改為上下兩層 */
        padding: 10px 0; /* 極窄垂直邊距 */
        gap: 8px; /* Logo 與 連結之間的距離 */
    }

    .logo {
        font-size: 1rem;
        letter-spacing: 0.4em;
        margin-left: 0.4em; /* 補償字距造成的視覺偏移，確保絕對置中 */
        text-align: center;
        width: 100%;
    }

    .nav-links {
        width: 100%;
        justify-content: center; /* 連結群組置中 */
        gap: 0; /* 清除 gap 改用 padding 增加點擊範圍 */
        padding: 0 5px;
    }

    .nav-links a {
        margin: 0;
        padding: 5px 10px; /* 增加點擊區域 */
        font-size: 0.8rem; /* 縮小字體以確保全顯示 */
        letter-spacing: 0;
        flex: 1; /* 讓 5 個連結平均分配寬度 */
        text-align: center;
        white-space: nowrap;
    }
}

/* 小螢幕手機 (如 iPhone SE) 特別優化 */
@media (max-width: 375px) {
    .nav-links a {
        font-size: 0.75rem; /* 更小字體確保不破版 */
        padding: 5px 4px;
    }
}