/* =========================
   字體（A / B，TTF）
   可調整：只需替換 /fonts/A.ttf、B.ttf
========================= */
@font-face {
    font-family: 'A';
    src: url('../assets/fonts/A.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'B';
    src: url('../assets/fonts/B.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================
   全域變數（大小 / 距離 / 光暈）
   可調整：金色系、主標字級、中標題字級、分隔 icon 距離
========================= */
:root{
    --gold1: #f7e7a7;
    --gold2: #d4b56a;
    --bronze: #a67c52;
    --text: #2b2217;

    --glow-weak: 0 0 6px rgba(255,215,120,.85), 0 0 16px rgba(255,200,120,.55);
    --glow-strong: 0 0 10px rgba(255,240,160,1), 0 0 30px rgba(255,210,140,.95), 0 0 60px rgba(255,210,120,.7);

    --max: 1200px;
    --nav-gap: 28px;         /* 導覽項目間距（桌機） */
    --sep-top-gap: 4px;      /* navbar 與分隔 icon 的距離 */

    --hero-small-size: clamp(30px, 20vw, 128px);  /* HERO 小字：新媒體 */
    --hero-big-size: calc(var(--hero-small-size) * 1.6); /* HERO 大字：領航者 */
    --hero-anim: 2s;       /* HERO 飛入動畫時間 */

    --bubble-max: 280px;     /* 泡泡圖最大寬度 */
    --midtitle-size: clamp(42px, 6.2vw, 60px); /* 中標題字級 */

    --star-gap: 6px;         /* CEO 星形與文字距離 */
    --mb-menu-maxh: 50vh;    /* 手機選單最大高度（不滿版） */
}

/* =========================
   全局 / 背景
   可調整：背景圖（手機/桌機）
========================= */
* { box-sizing: border-box; }
html { 
    height: 100%; 
    scroll-behavior: smooth; 
    overflow-x: hidden; /* 防止水平滾動 */
    width: 100%;
    max-width: 100%;
}
body{
    margin: 0;
    padding: 0;
    color: var(--bronze);
    font-family: 'A', sans-serif;
    position: relative;
    background: transparent; /* 透明背景，讓動態背景顯示 */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* 防止水平滾動 */
}

/* Balatro 背景容器 */
.balatro-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    /* 移除備用背景圖片，只使用動態 WebGL 背景 */
    background: transparent;
}

.balatro-container canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    /* 提高不透明度，讓動態背景更明顯 */
    opacity: 1 !important;
    z-index: 0 !important;
    /* 添加濾鏡效果，讓背景有一點霧化效果，提升文字可讀性 */
    filter: brightness(1.1) contrast(0.92) saturate(0.85) blur(1px);
    -webkit-filter: brightness(1.1) contrast(0.92) saturate(0.85) blur(1px);
    /* 平滑渲染設定 */
    image-rendering: auto;
    image-rendering: smooth;
    -ms-interpolation-mode: bicubic;
}

a{ color: inherit; text-decoration: none; } /* 取消預設藍色 */
.sr-only{
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* =========================
   CardNav 導覽列（新設計）
========================= */
.card-nav-container {
    position: absolute;
    top: 0; /* 先設為 0 */
    left: 50%;
    transform: translate(-50%, 20px); /* 往下移動，手機版 */
    width: 92%;
    max-width: 1000px; /* 增加寬度 */
    z-index: 99;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .card-nav-container {
        transform: translate(-50%, 30px); /* 往下移動，電腦版 */
    }
}

.card-nav {
    display: block;
    height: auto;
    min-height: 90px; /* 增加高度以容納 logo 和文字，避免被切 */
    padding: 0;
    background-color: rgba(255, 255, 255, 0.1); /* 透明背景 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: visible; /* 改為 visible，避免文字被切 */
    will-change: height;
    max-height: 95vh; /* 確保不會超出視窗 */
}

.card-nav-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 90px; /* 增加高度，給品牌文字更多空間 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem; /* 增加 padding */
    z-index: 2;
}

.card-nav-container .hamburger-menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    outline: none;
    color: var(--bronze);
}

.card-nav-container .hamburger-menu:hover .hamburger-line {
    opacity: 0.75;
}

.card-nav-container .hamburger-line {
    width: 30px;
    height: 2px;
    background-color: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease, margin 0.3s ease;
    transform-origin: 50% 50%;
}

.card-nav-container .hamburger-menu.open .hamburger-line:first-child {
    transform: translateY(4px) rotate(45deg);
}

.card-nav-container .hamburger-menu.open .hamburger-line:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/* =========================
   漢堡選單展開內容
========================= */
.hamburger-menu-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 0 0 0.75rem 0.75rem;
    border-top: 0.5px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0.4s;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card-nav.open .hamburger-menu-content {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0s;
}

.hamburger-menu-nav {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    gap: 0.5rem;
    min-height: 0;
}

.hamburger-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    color: var(--bronze);
    text-decoration: none;
    font-family: 'A', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.hamburger-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(247, 231, 167, 0.1) 0%,
        rgba(212, 181, 106, 0.2) 50%,
        rgba(247, 231, 167, 0.1) 100%
    );
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.hamburger-menu-item:hover::before,
.hamburger-menu-item:focus::before {
    width: 100%;
}

.menu-item-text {
    position: relative;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-menu-item:hover .menu-item-text,
.hamburger-menu-item:focus .menu-item-text {
    color: var(--gold2);
    text-shadow: var(--glow-weak);
    transform: translateX(5px);
}

.menu-item-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        var(--gold2),
        transparent
    );
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.hamburger-menu-item:hover .menu-item-glow,
.hamburger-menu-item:focus .menu-item-glow {
    transform: translateX(-50%) scaleX(1);
}

.hamburger-menu-item:active {
    transform: scale(0.98);
}

/* 電腦版樣式 */
@media (min-width: 769px) {
    .hamburger-menu-nav {
        flex-direction: row;
        justify-content: center;
        padding: 1rem 0;
        gap: 0;
    }

    .hamburger-menu-item {
        flex: 1;
        padding: 0.8rem 1.5rem;
        font-size: 18px;
        position: relative;
    }

    .hamburger-menu-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 40%;
        background: linear-gradient(
            to bottom,
            transparent,
            rgba(166, 124, 82, 0.3),
            transparent
        );
    }

    .hamburger-menu-item:hover .menu-item-text {
        transform: translateY(-2px);
    }
}

/* 手機版樣式 */
@media (max-width: 768px) {
    .hamburger-menu-content {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
    }
    
    .card-nav.open .hamburger-menu-content {
        max-height: 400px;
        opacity: 1;
        visibility: visible;
    }
    
    .hamburger-menu-item {
        font-size: 18px;
        padding: 1rem 1.5rem;
    }
    
    .card-nav {
        overflow: visible !important;
    }
}

.card-nav-container .logo-container {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}

.card-nav-container .logo-link {
    display: flex;
    flex-direction: row; /* 改為水平排列 */
    align-items: center;
    gap: 14px; /* logo和文字之間的間距 */
    text-decoration: none;
    color: inherit;
    padding: 4px 0;
}

.card-nav-container .logo {
    height: 64px; /* 更大的 logo */
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.card-nav-container .brand-lines {
    display: flex;
    flex-direction: column;
    align-items: center; /* 居中對齊 */
    line-height: 1.3;
    gap: 3px;
    justify-content: center;
    text-align: center; /* 文字居中 */
}

.card-nav-container .brand-lines .brand-zh {
    font-size: 14px;
    font-weight: 700;
    color: var(--bronze);
    white-space: nowrap;
    line-height: 1.2;
}

.card-nav-container .brand-lines .brand-en {
    font-size: 12px;
    font-weight: 400;
    color: var(--bronze);
    opacity: 0.85;
    white-space: nowrap;
    line-height: 1.2;
}

.card-nav-cta-button {
    background: linear-gradient(135deg, 
        rgba(238, 230, 210, 0.95) 0%, 
        rgba(220, 208, 180, 0.95) 30%,
        rgba(210, 198, 170, 0.95) 70%,
        rgba(228, 220, 200, 0.95) 100%);
    color: var(--bronze);
    border: 1px solid rgba(200, 185, 155, 0.4);
    border-radius: calc(0.75rem - 0.35rem);
    padding: 0.5rem 1.2rem;
    height: auto;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-family: inherit;
    font-size: 13px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 2px 8px rgba(180, 160, 120, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.card-nav-cta-button:hover {
    background: linear-gradient(135deg, 
        rgba(248, 240, 220, 0.98) 0%, 
        rgba(230, 218, 190, 0.98) 30%,
        rgba(220, 208, 180, 0.98) 70%,
        rgba(238, 230, 210, 0.98) 100%);
    box-shadow: 
        0 4px 12px rgba(180, 160, 120, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* =========================
   FlowingMenu 樣式
========================= */
.menu-wrap {
    width: 100%;
    height: calc(100% - 90px);
    overflow: visible;
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    /* 確保背景正確顯示 */
    background: transparent;
}

/* 電腦版：調整menu-wrap高度以適應三個方塊 */
@media (min-width: 769px) {
    .menu-wrap {
        height: auto;
        min-height: 34px; /* 原本100px的1/3 */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible; /* 確保文字不被切 */
    }
    
    .card-nav {
        overflow: visible; /* 確保導覽列內容不被切 */
    }
    
    .menu.flowing-menu {
        overflow: visible; /* 確保菜單內容不被切 */
    }
}

.card-nav.open .menu-wrap {
    visibility: visible;
    pointer-events: auto;
}

.menu.flowing-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: flex-start;
    /* 確保背景正確顯示 */
    background: transparent;
}

/* 電腦版：三個方塊樣式 - 優雅設計 */
@media (min-width: 769px) {
    .menu.flowing-menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 8px 20px; /* 原本24px的1/3 */
        height: auto;
        width: 100%;
    }
    
    .menu__item {
        flex: none;
        position: relative;
        background: transparent;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        min-height: 20px; /* 原本60px的1/3 */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px 32px; /* 原本12px的1/3 */
        margin: 0;
        overflow: visible; /* 確保文字不被切 */
    }
    
    /* 優雅的分隔線 */
    .menu__item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 10px; /* 原本30px的1/3，以配合更矮的方框 */
        background: linear-gradient(
            to bottom,
            transparent,
            rgba(166, 124, 82, 0.3),
            transparent
        );
    }
    
    .menu__item:hover {
        background: transparent;
    }
    
    .menu__item-link {
        font-size: 17px;
        color: var(--bronze);
        text-transform: none;
        font-weight: 500;
        letter-spacing: 0.08em;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        padding: 2px 0; /* 原本6px的1/3 */
        white-space: nowrap;
        overflow: visible;
        line-height: 1.6; /* 增加行高確保文字不被切 */
        box-sizing: border-box;
    }
    
    /* 優雅的底線動畫 */
    .menu__item-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--gold2), transparent);
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .menu__item:hover .menu__item-link::after {
        width: 80%;
    }
    
    .menu__item-link:hover {
        color: var(--gold2);
        transform: translateY(-2px);
        transition: all 0.3s ease;
    }
    
    /* 隱藏跑馬燈 */
    .marquee {
        display: none !important;
    }
}

.menu__item {
    flex: 1;
    position: relative;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 -0.1px rgba(255, 255, 255, 0.03);
    background: transparent; /* 透明背景 */
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.menu__item-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 600;
    color: var(--bronze); /* 咖啡金色 */
    font-size: 3.5vh;
    line-height: 0.9;
    z-index: 3;
    pointer-events: auto;
    padding: 0;
    margin: 0;
    /* 預設無過渡，由 JavaScript 控制 */
    transition: none;
}

/* 移除 CSS hover 規則，完全由 JavaScript 控制 */
/* 這樣可以避免 CSS 和 JavaScript 之間的衝突 */

.menu__item-link:focus:not(:focus-visible) {
    color: var(--bronze); /* 咖啡金色 */
}

/* 電腦版隱藏跑馬燈 */
@media (min-width: 769px) {
    .marquee {
        display: none !important;
    }
}

.marquee {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent;
    transform: translate3d(0, 101%, 0);
    z-index: 5; /* 確保 marquee 顯示在文字上方 */
    opacity: 0; /* 預設透明 */
    visibility: hidden; /* 預設隱藏 */
}

.marquee__inner-wrap {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: translate3d(0, -101%, 0);
    overflow: hidden;
    position: relative;
}

.marquee__inner {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    width: max-content;
    will-change: transform;
    animation: marquee 15s linear infinite;
    animation-play-state: paused; /* 預設暫停，由 JavaScript 控制 */
    flex-shrink: 0;
    white-space: nowrap;
    gap: 0;
    /* 優化性能 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 不要設置固定的 transform，讓 CSS 動畫來控制 translateX */
    /* GSAP 會通過 marquee__inner-wrap 控制 translateY，不會衝突 */
}

.marquee span {
    color: var(--bronze); /* 咖啡金色 */
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 3.5vh;
    line-height: 0.9;
    padding: 0 2vw;
    flex-shrink: 0;
    display: inline-block;
    min-width: fit-content;
    margin: 0;
}

.marquee__img {
    width: 200px;
    height: 7vh;
    margin: 2em 2vw;
    padding: 1em 0;
    border-radius: 50px;
    background-size: cover;
    background-position: 50% 50%;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .card-nav-container {
        width: 90%;
        top: 1em;
    }

    .card-nav {
        min-height: 60px;
        overflow: visible !important; /* 確保選單內容能顯示 */
        /* 隱藏滾動條（如果有的話） */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE、Edge */
    }
    
    /* 隱藏 card-nav 的滾動條（手機版） */
    .card-nav::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        background: transparent;
    }

    .card-nav-top {
        padding: 0.5rem 1rem;
        justify-content: space-between;
        min-height: 60px;
    }

    .card-nav-container .hamburger-menu {
        order: 2;
        /* 確保點擊區域足夠大 */
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation; /* 優化觸控響應 */
    }

    .card-nav-container .logo-container {
        position: static;
        transform: none;
        order: 1;
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .card-nav-container .logo-link {
        flex-direction: row;
        gap: 10px;
        align-items: center;
        /* 確保點擊區域足夠大 */
        min-height: 44px;
        touch-action: manipulation; /* 優化觸控響應 */
    }

    .card-nav-container .logo {
        height: 40px; /* 手機版也稍微大一點 */
    }

    .card-nav-container .brand-lines {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .card-nav-container .brand-lines .brand-zh {
        font-size: 11px;
        line-height: 1.2;
    }

    .card-nav-container .brand-lines .brand-en {
        font-size: 9px;
        line-height: 1.2;
    }

    .card-nav-cta-button {
        display: none;
    }

    .menu-wrap {
        top: 60px;
        height: auto; /* 改為 auto，讓高度由內容決定 */
        max-height: calc(90vh - 60px);
        /* 確保選單可以正常滾動 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS 平滑滾動 */
        /* 隱藏滾動條 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE、Edge */
    }
    
    /* 隱藏 WebKit 瀏覽器的滾動條 */
    .menu-wrap::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        background: transparent;
    }
    
    /* 手機版：讓選單高度由內容決定，不要拉伸 */
    .menu.flowing-menu {
        height: auto !important; /* 覆蓋預設的 100% */
        justify-content: flex-start; /* 保持從上開始排列 */
        align-items: flex-start; /* 讓項目不會被拉伸，由內容決定高度 */
    }

    .menu__item-link {
        font-size: clamp(18px, 4vw, 24px);
        line-height: 1.2;
        padding: 0; /* 移除上下 padding，讓間距與文字高度一致 */
        margin: 0; /* 移除 margin */
        /* 手機版：確保點擊區域足夠大 */
        min-height: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation; /* 優化觸控響應 */
        /* 手機版：咖啡金色文字 */
        color: var(--bronze) !important;
        /* 添加過渡效果，讓互動更流暢 */
        transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
        /* 確保可以點擊 */
        pointer-events: auto;
        cursor: pointer;
    }
    
    /* 手機版：添加觸控和懸停反饋 */
    @media (max-width: 768px) {
        .menu__item {
            transition: background-color 0.15s ease, transform 0.15s ease;
            /* 確保可以互動 */
            cursor: pointer;
            /* 優化觸控反饋 */
            -webkit-tap-highlight-color: rgba(166, 124, 82, 0.2);
        }
        
        /* 移除預設的觸控高亮，使用自訂樣式 */
        .menu__item-link {
            -webkit-tap-highlight-color: transparent;
        }
        
        /* 確保手機版文字正常顯示（不被隱藏） */
        .menu__item-link {
            color: var(--bronze) !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        .menu__item-link:active {
            transform: scale(0.95) !important;
            opacity: 0.8 !important;
            color: var(--gold2) !important; /* 點擊時變亮金色 */
            visibility: visible !important; /* 確保始終可見 */
        }
        
        /* 手機版懸停效果（適用於平板等設備） */
        .menu__item:hover,
        .menu__item.hovering {
            background-color: rgba(166, 124, 82, 0.2) !important; /* 咖啡金色半透明背景，更明顯 */
        }
        
        .menu__item:hover .menu__item-link,
        .menu__item.hovering .menu__item-link {
            transform: scale(0.97) !important;
            opacity: 0.9 !important;
            color: var(--gold2) !important; /* hover 時變亮金色 */
            visibility: visible !important; /* 確保始終可見 */
        }
        
        /* 確保觸控時有視覺反饋 */
        .menu__item:active,
        .menu__item.touching {
            background-color: rgba(166, 124, 82, 0.2) !important;
        }
        
        .menu__item:active .menu__item-link,
        .menu__item.touching .menu__item-link {
            transform: scale(0.95) !important;
            opacity: 0.85 !important;
            color: var(--gold2) !important;
            visibility: visible !important; /* 確保始終可見 */
        }
        
        /* 確保觸控反饋立即顯示（無延遲） */
        .menu__item.touching {
            background-color: rgba(166, 124, 82, 0.25) !important;
            transition: background-color 0.05s ease !important;
        }
        
        .menu__item.touching .menu__item-link {
            transform: scale(0.94) !important;
            transition: transform 0.05s ease, color 0.05s ease, opacity 0.05s ease !important;
            visibility: visible !important; /* 確保始終可見 */
        }
        
        /* 確保非觸控/非懸停狀態時文字正常顯示 */
        .menu__item:not(:hover):not(.touching):not(:active) .menu__item-link {
            color: var(--bronze) !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
        }
    }

    /* 手機版：禁用 marquee 顯示 */
    .menu__item .marquee {
        display: none !important;
    }

    .marquee span {
        font-size: clamp(18px, 4vw, 24px);
        line-height: 1.2;
        padding: 0 3vw;
        color: var(--bronze); /* 咖啡金色 */
    }
    
    .menu__item {
        min-height: auto; /* 讓高度與文字一致 */
        height: auto; /* 高度由內容決定 */
        padding: 0; /* 移除上下 padding */
        margin: 0; /* 移除 margin */
        /* 確保點擊區域足夠大 */
        touch-action: manipulation; /* 優化觸控響應 */
        /* 手機版：透明背景 */
        background: transparent !important;
        /* 減少間距，讓選單更緊湊 */
        flex: 0 0 auto; /* 不拉伸，由內容決定大小 */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .marquee__img {
        width: 150px;
        height: 5vh;
        margin: 1em 1vw;
    }
    
    .card-nav {
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS 平滑滾動 */
        /* 隱藏滾動條 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE、Edge */
    }
    
    /* 隱藏 WebKit 瀏覽器的滾動條 */
    .card-nav::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        background: transparent;
    }
}

/* =========================
   HERO 區（主標＋徽章＋泡泡）
   可調整：主標字級、徽章文字位置、泡泡大小與動態
========================= */
/* main 元素往下移動，確保不被 nav bar 遮住 */
main {
    transform: translateY(120px); /* 增加距離，避免被 nav bar 遮住 */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* 防止水平滾動 */
}

.hero{
    max-width: var(--max);
    margin: 10px auto 40px;
    padding: 16px;
    text-align: center;
    position: relative;
}
.title{
    display: flex; align-items: flex-end; justify-content: center;
    gap: 10px; line-height: 1;
}
.title .small, .title .big{ font-family: 'B'; } /* HERO 用 B 字體 */
.title .small:not(.shiny-text){
    font-size: var(--hero-small-size);
    background: linear-gradient(180deg, var(--gold1), var(--bronze));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title .big:not(.shiny-text){
    font-size: var(--hero-big-size);
    background: linear-gradient(180deg, var(--gold1) 10%, var(--bronze) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 0 10px rgba(255,220,120,.35);
    transform: translateY(4px);
}
/* shiny-text 保留原有字體大小和位置 */
.title .small.shiny-text{
    font-size: var(--hero-small-size);
}
.title .big.shiny-text{
    font-size: var(--hero-big-size);
    transform: translateY(4px);
}

/* =========================
   Shiny Text 特效 - 亮晶晶閃爍動畫
   基於提供的 React 組件示例優化
========================= */
.title .shiny-text {
    position: relative;
    display: inline-block;
    /* 基礎顏色 - 使用更精緻的漸層，更有質感 */
    background: linear-gradient(
        180deg,
        #f7e7a7 0%,
        #e8d18a 25%,
        #d4b56a 50%,
        #c19d4f 75%,
        #a67c52 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 典雅的文字陰影和光暈效果 - 減少陰影讓字體更清晰 */
    text-shadow: 
        0 1px 1px rgba(166, 124, 82, 0.15),
        0 0 4px rgba(255, 220, 140, 0.2);
    /* 微妙的描邊效果 */
    -webkit-text-stroke: 0.2px rgba(166, 124, 82, 0.15);
    /* 動畫必須始終執行 - 頻率慢一點（5秒） */
    animation: shine-base 5s linear infinite;
    animation-play-state: running;
}

/* 使用偽元素實現高光掃過效果 */
.title .shiny-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 確保偽元素文字與原文字對齊 */
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    /* 亮光掃過的漸層 */
    background: linear-gradient(
        120deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.3) 45%,
        rgba(255, 255, 255, 0.95) 48%,
        rgba(255, 255, 255, 0.95) 52%,
        rgba(255, 255, 255, 0.3) 55%,
        transparent 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 高光動畫 */
    animation: shine 5s linear infinite;
    will-change: background-position;
    animation-play-state: running;
    pointer-events: none;
    /* 確保文字對齊 */
    white-space: nowrap;
}

/* 「新媒體」- 亮光掃過效果 */
.title .small.shiny-text::before {
    animation: shine 5s linear infinite;
    animation-play-state: running;
}

/* 「領航者」- 亮光掃過效果（延遲 2.2 秒，讓高光從新媒體平滑過渡到領航者） */
.title .big.shiny-text::before {
    animation: shine 5s linear infinite 2.2s;
    animation-play-state: running;
}

/* 基礎動畫（保持文字可見） */
@keyframes shine-base {
    0%, 100% {
        opacity: 1;
    }
}

/* 光線掃過動畫 - 從右到左，使用更平滑的緩動效果 */
@keyframes shine {
    0% {
        background-position: 120% 50%;
    }
    50% {
        background-position: -20% 50%;
    }
    100% {
        background-position: -120% 50%;
    }
}

/* 可選：停用動畫 */
.title .shiny-text.disabled {
    animation: none !important;
}
/* HERO 飛入動畫（離開再進入會重播） */
.hero .title .small:not(.shiny-text), .hero .title .big:not(.shiny-text){ 
    opacity: 0; 
    transform: translateY(24px) scale(.98); 
}
/* shiny-text 動畫應該始終執行，不受 reveal 狀態影響 */
.hero .title .small.shiny-text, .hero .title .big.shiny-text{ 
    opacity: 0; 
    transform: translateY(24px) scale(.98);
    /* 動畫必須從一開始就執行！ */
    animation: shine 5s linear infinite;
    animation-play-state: running;
}
.hero .title .big.shiny-text {
    animation: shine 5s linear infinite 2.2s;
    animation-play-state: running;
}
.reveal.in .title .small:not(.shiny-text), .reveal.in .title .big:not(.shiny-text){
    opacity: 1; 
    transform: translateY(0) scale(1);
    transition: all var(--hero-anim) cubic-bezier(.19,1,.22,1);
}
.reveal.in .title .small.shiny-text{
    opacity: 1 !important; 
    transform: translateY(0) scale(1) !important;
    /* 只對 opacity 和 transform 做 transition，動畫不受影響 */
    transition: opacity var(--hero-anim) cubic-bezier(.19,1,.22,1), transform var(--hero-anim) cubic-bezier(.19,1,.22,1) !important;
    /* 動畫繼續執行，不能被覆蓋 */
    animation: shine 5s linear infinite !important;
    animation-play-state: running !important;
}
.reveal.in .title .big.shiny-text{
    opacity: 1 !important;
    transform: translateY(4px) scale(1) !important;
    /* 只對 opacity 和 transform 做 transition，動畫不受影響 */
    transition: opacity var(--hero-anim) cubic-bezier(.19,1,.22,1), transform var(--hero-anim) cubic-bezier(.19,1,.22,1) !important;
    /* 動畫繼續執行，不能被覆蓋 */
    animation: shine 5s linear infinite 2.2s !important;
    animation-play-state: running !important;
}

/* Hero Banner 輪播 */
.hero-banner {
    position: relative;
    width: 100%;
    max-width: var(--max);
    margin: 20px auto;
    padding: 0 60px; /* 為箭頭按鈕預留空間 */
}
.hero-banner-container {
    position: relative;
    width: 100%;
    max-width: 85%; /* 電腦版縮小至85% */
    margin: 0 auto;
    /* 使用 padding-bottom 維持 1706x960 的比例 (960/1706 ≈ 56.25%) */
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.hero-banner-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hero-banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-banner-slide.active {
    opacity: 1;
    z-index: 1;
}
.hero-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持完整圖片，不被裁切 */
    display: block;
}
.hero-banner-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bronze);
    transition: background 0.3s, opacity 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.hero-banner-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    opacity: 0.9;
}
.hero-banner-btn-prev {
    left: 0; /* 在圖片外面左側 */
}
.hero-banner-btn-next {
    right: 0; /* 在圖片外面右側 */
}
.hero-banner-btn svg {
    width: 24px;
    height: 24px;
}
@media (max-width: 980px) {
    .hero-banner {
        padding: 0 50px; /* 手機版為箭頭預留空間 */
    }
    /* 手機版縮小至80% */
    .hero-banner-container {
        max-width: 80%;
        padding-bottom: 56.25%;
    }
    .hero-banner-btn {
        width: 40px;
        height: 40px;
    }
    .hero-banner-btn svg {
        width: 20px;
        height: 20px;
    }
    .hero-banner-btn-prev {
        left: 0;
    }
    .hero-banner-btn-next {
        right: 0;
    }
}

/* 徽章（「蒂造潮流 四大特色」） */
.emblem{ margin: 14px auto 8px; width: min(560px, 92%); position: relative; }
.emblem img{ width: 100%; display: block; }
.emblem .emblem-text{
    position: absolute; inset: auto 0 10% 0; /* 可調：10% 越小越往下 */
    text-align: center; color: #fff; font-weight: 700; letter-spacing: .1em;
    font-size: clamp(22px, 5vw, 36px);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* 泡泡（圓形與微動） */
.bubbles{
    margin-top: 10px; display: grid; grid-template-columns: repeat(4,1fr);
    gap: 10px; align-items: center; justify-items: center;
}
.bubble{
    width: 100%; max-width: var(--bubble-max); aspect-ratio: 1/1;
    border-radius: 50%; object-fit: cover;
    animation: bob 5.5s ease-in-out infinite alternate;
}
.bubble:nth-child(2){ animation-duration: 4.8s }
.bubble:nth-child(3){ animation-duration: 6.1s }
.bubble:nth-child(4){ animation-duration: 5.2s }
@keyframes bob{
    from{ transform: translateY(-4px) rotate(-.5deg); }
    to  { transform: translateY( 6px) rotate(.6deg); }
}
@media (max-width: 680px){
    .bubbles{ grid-template-columns: repeat(2,1fr); }
    .bubble{
        max-width: calc(var(--bubble-max) * 0.85); /* 手機版縮小 15% */
    }
}

/* =========================
   中標題（白金漸層＋金光）
   可調整：字級 --midtitle-size、陰影強度
========================= */
.midtitle{
    margin: 40px 0 10px;
    text-align: center;
    font-family: 'A';
    font-weight: 700;
    font-size: var(--midtitle-size);
    letter-spacing: .04em;

    /* 白金→亮金→銅金 漸層底色 */
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f8f2d4 20%,
        #f4d984 45%,
        #d6a64c 70%,
        #8c6429 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* 立體金光與陰影 */
    text-shadow:
        0 -1px 1px rgba(255,255,255,.85),
        0  1px 2px rgba(0,0,0,.35),
        0  0 10px rgba(255,228,130,.85),
        0  0 26px rgba(255,205,90,.75),
        0  0 42px rgba(214,169,96,.55),
        0  3px 8px rgba(0,0,0,.35);

    /* 深金描邊（避免黑色過度跳色） */
    -webkit-text-stroke: 0.4px rgba(120,90,30,0.35);
}

/* 核心目標說明文字 */
.lead{
    text-align: center;
    font-size: 18px;          /* 可調整字級 */
    line-height: 1.7;         /* 可調整行高 */
    color: var(--bronze);     /* 咖啡金色 */
}

/* 手機版：縮小核心目標說明文字 */
@media (max-width: 768px) {
    .lead {
        font-size: 14px;       /* 手機版縮小字體 */
        line-height: 1.6;
        padding: 0 16px;       /* 增加左右邊距 */
    }
}

/* =========================
   輪播（Carousel）
   可調整：每列顯示數量、gap、箭頭大小與位置
========================= */
.case-block{ max-width: var(--max); margin: 24px auto; padding: 0 16px; }
/* 手機版：品牌營銷策略底下的輪播容器居中 */
@media (max-width: 980px) {
    .case-block {
        display: flex;
        flex-direction: column;
        align-items: center; /* 整個輪播容器居中 */
    }
    .case-block .carousel {
        width: 100%;
        max-width: 100%;
    }
}
/* 手機版：個人IP輪廓區塊與第一排對齊 */
@media (max-width: 899px) {
    #team .case-block.ip-carousel-block {
        padding: 0; /* 移除 padding，讓它與第一排對齊 */
        margin: 0;
    }
}
.scroll-stack-scroller .case-block{ margin: 0 auto; }
.casetitle{ text-align: center; font-family: 'A'; font-size: 24px; margin: 24px 0 10px; color: var(--bronze); }

.carousel{ position: relative; padding: 0 60px; } /* 為按鈕留出空間 */
.carousel .track{
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - 16px*2)/3); /* 桌機一次 3 張（預設） */
    gap: 16px; overflow: hidden;
    scroll-behavior: smooth; scroll-snap-type: x mandatory;
    /* 隱藏水平滾動條 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE、Edge */
}
/* 個人 IP 輪廓：使用輪播，一次顯示 2 張，有左右按鈕，樣式與品牌營銷策略一致 */
#team .case-block.ip-carousel-block .carousel {
    position: relative;
    padding: 0 60px; /* 與品牌營銷策略一致，為按鈕留出空間 */
}
/* 手機版：與品牌營銷策略一致 */
@media (max-width: 980px) {
    #team .case-block.ip-carousel-block .carousel {
        padding-inline: 50px; /* 與品牌營銷策略一致 */
    }
}
#team .case-block.ip-carousel-block .carousel .track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 16px) / 2); /* 一次顯示2張，減去gap */
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE、Edge */
}
#team .case-block.ip-carousel-block .carousel .track::-webkit-scrollbar {
    display: none; /* Chrome、Safari、Opera */
}
#team .case-block.ip-carousel-block .carousel .item {
    scroll-snap-align: start;
    box-shadow: none; /* 移除灰底 */
    display: flex;
    flex-direction: column;
}
#team .case-block.ip-carousel-block .carousel img {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-shadow: none; /* 移除灰底 */
    display: block;
}
/* 確保按鈕顯示，樣式與品牌營銷策略一致 */
#team .case-block.ip-carousel-block .carousel-btn {
    display: flex !important;
}
.carousel .track::-webkit-scrollbar {
    display: none; /* Chrome、Safari、Opera */
}
/* 只有社群圖文設計（3個項目）置中顯示 - 僅電腦版 */
@media (min-width: 981px) {
    .case-block[data-case-type="design"] .carousel .track {
        justify-content: center;
        margin: 0 auto;
        max-width: fit-content;
    }
}
.carousel .item{
    scroll-snap-align: start; display: block; overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.12); /* 方形、不圓角 */
    position: relative; /* 確保邊框不會溢出 */
}
/* KOL 區塊：item 改為 flex 布局以容納文字 */
#case-kol .carousel .item {
    display: flex;
    flex-direction: column;
}
/* Google Map 區塊：item 改為 flex 布局以容納文字 */
#case-gmap .carousel .item {
    display: flex;
    flex-direction: column;
}
/* 社群圖文設計區塊：item 改為 flex 布局以容納文字 */
#case-design .carousel .item {
    display: flex;
    flex-direction: column;
}
/* 廣告短片區塊：item 改為 flex 布局以容納文字 */
#case-film .carousel .item {
    display: flex;
    flex-direction: column;
}
/* 加值服務區塊：item 改為 flex 布局以容納文字 */
#case-plus .carousel .item {
    display: flex;
    flex-direction: column;
}
/* 短影音推廣區塊：item 改為 flex 布局以容納文字 */
#case-short .carousel .item {
    display: flex;
    flex-direction: column;
}
/* 個人 IP 輪廓：移除灰底，保留按鈕 */
#team .case-block.ip-carousel-block .item {
    box-shadow: none !important; /* 移除灰底 */
    display: flex;
    flex-direction: column;
}
.carousel img{ width: 100%; display: block; }
/* KOL 區塊圖片說明文字 */
#case-kol .carousel .item-caption {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--bronze);
    font-family: 'A', sans-serif;
    line-height: 1.5;
    margin: 0;
    background: transparent;
}
/* Google Map 區塊圖片說明文字 */
#case-gmap .carousel .item-caption {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--bronze);
    font-family: 'A', sans-serif;
    line-height: 1.5;
    margin: 0;
    background: transparent;
}
/* 社群圖文設計區塊圖片說明文字 */
#case-design .carousel .item-caption {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--bronze);
    font-family: 'A', sans-serif;
    line-height: 1.5;
    margin: 0;
    background: transparent;
}
/* 廣告短片區塊圖片說明文字 */
#case-film .carousel .item-caption {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--bronze);
    font-family: 'A', sans-serif;
    line-height: 1.5;
    margin: 0;
    background: transparent;
}
/* 加值服務區塊圖片說明文字 */
#case-plus .carousel .item-caption {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--bronze);
    font-family: 'A', sans-serif;
    line-height: 1.5;
    margin: 0;
    background: transparent;
}
/* 短影音推廣區塊圖片說明文字 */
#case-short .carousel .item-caption {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--bronze);
    font-family: 'A', sans-serif;
    line-height: 1.5;
    margin: 0;
    background: transparent;
}
/* 個人 IP 輪廓區塊圖片說明文字 */
#team .case-block.ip-carousel-block .item-caption {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--bronze);
    font-family: 'A', sans-serif;
    line-height: 1.5;
    margin: 0;
    background: transparent;
}

/* 社群圖文設計、短影音推廣、Google Map 精準導流、個人 IP 輪廓 - 320*480 尺寸 */
#case-design .carousel img,
#case-short .carousel img,
#case-gmap .carousel img,
#team .case-block .carousel img {
    width: 100%;
    aspect-ratio: 2/3; /* 320:480 = 2:3 */
    object-fit: cover;
    display: block;
}

/* 箭頭（預設桌機） */
.carousel .nav,
.carousel-btn{
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 0; 
    cursor: pointer; 
    padding: 8px;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: opacity 0.3s, background 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.carousel .nav:hover,
.carousel-btn:hover{
    opacity: 0.7;
}
.carousel .nav img{
    width: 108px;                       /* 可調：箭頭大小（桌機） */
    display: block; pointer-events: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.carousel .prev,
.carousel-btn-prev{ left: 0; }        /* 可調：左側位置（桌機） */
.carousel .next,
.carousel-btn-next{ right: 0; }        /* 可調：右側位置（桌機） */
.carousel-btn svg{
    width: 32px;
    height: 32px;
}

/* 手機：一次顯示兩張，略縮小並留箭頭空間；隱藏水平捲軸 */
@media (max-width: 980px){
    .carousel{ padding-inline: 50px; }   /* 為按鈕留出更多空間，左右對稱 */

    .carousel .track{
        display: grid; grid-auto-flow: column;
        grid-auto-columns: 45%;          /* 稍微縮小：兩張並列寬度（45% + 5% gap ≈ 2 張） */
        gap: 5%;
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        scroll-behavior: smooth;

        /* 隱藏水平滾動條（保留滑動） */
        scrollbar-width: none;           /* Firefox */
        -ms-overflow-style: none;        /* IE、Edge */
    }
    .carousel .track::-webkit-scrollbar{ display: none; }

    .carousel .nav img{ width: 60px; }   /* 可調：箭頭大小（手機） */
    .carousel .prev,
    .carousel-btn-prev{ left: -5px; }      /* 可調：箭頭位置（手機），在圖片外面 */
    .carousel .next,
    .carousel-btn-next{ right: -5px; }     /* 在圖片外面 */
    .carousel-btn svg{
        width: 24px;
        height: 24px;
    }

    .carousel .item{
        box-shadow: none; /* 移除手機版的灰色陰影 */
        overflow: hidden; /* 確保不會露出邊框 */
    }
    .carousel .track img{
        width: 100%; height: auto;
        border-radius: 6px;              /* 可調：手機縮圖圓角（若不要可改 0） */
        object-fit: cover;
    }
    
    /* 手機版：社群圖文設計、短影音推廣、Google Map 精準導流、個人 IP 輪廓 - 320*480 尺寸 */
    #case-design .carousel img,
    #case-short .carousel img,
    #case-gmap .carousel img,
    #team .case-block .carousel img {
        aspect-ratio: 2/3; /* 320:480 = 2:3 */
        object-fit: cover;
    }
}

/* =========================
   團隊介紹（CEO + 成員）
   可調整：頭像大小、文字大小、成員卡片排列
========================= */
.team{ max-width: var(--max); margin: 20px auto; padding: 0 16px; }
/* 手機版：減少左邊間距，讓內容更靠左對齊 */
@media (max-width: 899px) {
    .team {
        padding: 0 8px 0 4px; /* 左邊更靠左（4px），右邊保持一些間距（8px） */
    }
}

.ceo-wrap{ display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
.ceo-photo img{
    width: min(380px, 100%);             /* 可調：CEO 頭像大小 */
    border-radius: 50%;
    display: block; margin: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,.16);
}
.ceo-info{ text-align: center; }
.ceo-title{ color: var(--bronze); font-size: 26px; font-family: 'A'; }
.name{ color: var(--bronze); font-size: 32px; margin-top: 4px; font-family: 'A'; }

/* CEO 重點清單（星形貼字） */
.ceo-list{
    margin: 14px auto 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: 1fr; gap: 12px 16px; /* 改為單欄，每行一個 */
    max-width: 900px;
}
.ceo-list li{ 
    position: relative; 
    padding-left: 0; 
    font-family: 'A'; 
    text-align: center; /* 置中 */
    color: var(--bronze); /* 與團隊介紹顏色一致 */
}
.ceo-list li::before{
    display: none; /* 移除星號 */
}
@media (min-width: 1100px){ 
    .ceo-list{ grid-template-columns: 1fr; } /* 保持單欄 */
}
@media (min-width: 960px){
    .ceo-wrap{ grid-template-columns: 45% 55%; }
    .ceo-info{ text-align: left; }
}
@media (max-width: 960px) {
    .ceo-list {
        grid-template-columns: 1fr; /* 手機版也改為單欄，每行一個 */
        gap: 10px 12px; /* 調整間距 */
        position: relative;
    }
    .ceo-list li {
        text-align: center; /* 置中對齊 */
    }
}

/* 公司團隊 - MagicBento 風格卡片 */
.members .grid-members{ 
    display: grid; 
    gap: 1rem; 
    grid-template-columns: repeat(2, 1fr); 
    justify-items: stretch; /* 讓卡片填滿網格 */
    width: 100%;
    max-width: 100%;
    padding: 0.75rem;
}

.member{
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 320px;
    width: 100%;
    padding: 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(166, 124, 82, 0.2);
    background: rgba(6, 0, 16, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    font-family: 'A';
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-intensity: 0;
    --glow-radius: 200px;
}

.member:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 181, 106, 0.5);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(212, 181, 106, 0.2);
}

/* 確保 CEO 卡片與成員完全一致 */
.member-ceo {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: auto;
    height: auto;
    width: 100%;
    padding: 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(166, 124, 82, 0.2);
    background: rgba(6, 0, 16, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    font-family: 'A';
    overflow: visible;
    transition: all 0.3s ease;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
}

.member-ceo:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 181, 106, 0.5);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(212, 181, 106, 0.2);
}

.member img{
    width: 160px;
    height: 160px;
    max-width: 160px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(212, 181, 106, 0.3);
    box-shadow: 0 4px 15px rgba(212, 181, 106, 0.2);
    margin: 0 auto 1rem;
    transition: all 0.3s ease;
}

.member:hover img {
    border-color: rgba(212, 181, 106, 0.6);
    box-shadow: 0 6px 20px rgba(212, 181, 106, 0.4);
    transform: scale(1.05);
}

/* 隱藏 CEO 的大頭照片 */
.member-ceo img{
    display: none;
}

.member figcaption{ 
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.member figcaption > div{ 
    font-size: 1.6rem;
    color: rgba(245, 230, 200, 0.98);
    opacity: 1;
    margin-bottom: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.member figcaption strong{ 
    display: block;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.98);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.member-desc{
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
    font-weight: 300;
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CEO 描述文字置中 */
.member-ceo .member-desc {
    text-align: center;
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
    text-overflow: clip;
}

/* Border glow effect */
.member::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: radial-gradient(
        var(--glow-radius) circle at var(--glow-x) var(--glow-y),
        rgba(212, 181, 106, calc(var(--glow-intensity) * 0.6)) 0%,
        rgba(212, 181, 106, calc(var(--glow-intensity) * 0.3)) 30%,
        transparent 60%
    );
    border-radius: inherit;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.member:hover::after {
    opacity: 1;
}

/* 手機版：卡片樣式調整 */
@media (max-width: 899px) {
    .members .grid-members {
        gap: 0.75rem;
        grid-template-columns: repeat(2, 1fr);
        padding: 0.5rem;
    }
    .member {
        min-height: 280px;
        padding: 1.25rem;
    }
    .member-ceo {
        min-height: auto;
        height: auto;
        padding: 1.25rem;
    }
    .member img {
        width: 140px;
        height: 140px;
        max-width: 140px;
    }
    .member-ceo img {
        display: none; /* 手機版也隱藏 */
    }
    .member figcaption > div {
        font-size: 1.4rem;
    }
    .member figcaption strong {
        font-size: 1.2rem;
    }
    .member-desc {
        font-size: 0.8rem;
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
    /* 手機版 CEO 描述文字置中 */
    .member-ceo .member-desc {
        text-align: center;
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
        overflow: visible;
        text-overflow: clip;
    }
}

/* 個人 IP 輪廓使用輪播樣式，已改為 carousel 結構，此處樣式已移除 */

/* 第一排：CEO + 個人 IP 輪廓 */
.team-first-row {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr; /* 手機版單欄 */
    margin-top: -20px; /* 往上移動，減少與上面的距離 */
}

/* 手機版：調整個人 IP 輪廓位置，更靠近 DIDI */
@media (max-width: 899px) {
    .team-first-row {
        padding: 0 0.5rem; /* 與成員卡片對齊 */
        gap: 4px; /* 大幅縮小間距，讓IP輪廓更靠近DIDI */
        margin-top: -10px; /* 減少負margin，讓IP輪廓更靠近DIDI */
        grid-template-columns: 1fr; /* 手機版單欄 */
    }
    /* 確保蒂蒂置中，寬度等於兩個成員卡片（手機版是2欄布局），與成員卡片對齊 */
    .team-first-row .member-ceo {
        display: flex;
        flex-direction: column;
        align-items: center; /* 置中對齊 */
        justify-content: flex-start;
        width: 100%;
        margin: 0;
        min-height: auto; /* 移除固定高度 */
        padding-bottom: 1rem; /* 減少底部間距 */
        padding-left: 0.5rem; /* 與成員卡片對齊 */
        padding-right: 0.5rem; /* 與成員卡片對齊 */
    }
    /* 減少描述文字與底部的距離 */
    .team-first-row .member-ceo .member-desc {
        margin-bottom: 0;
    }
    /* 確保個人IP輪廓也置中，並縮小 */
    .team-first-row .ip-carousel-block {
        display: flex;
        flex-direction: column;
        align-items: center; /* 置中對齊 */
        width: 100%;
        margin: 0 auto;
    }
    /* 縮小個人 IP 輪廓 */
    .team-first-row .ip-carousel-block .carousel {
        max-width: 85%;
    }
    .team-first-row .ip-carousel-block .casetitle {
        font-size: 18px;
    }
}

/* 電腦版：第一排 CEO + IP 輪廓，CEO 與成員對齊 */
@media (min-width: 900px) {
    .team-first-row {
        /* 使用與成員相同的3列網格，CEO佔1列，IP輪播佔2列 */
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        margin-top: 0;
        justify-items: stretch;
        padding: 0 0.75rem; /* 與成員卡片對齊 */
        gap: 1rem; /* 與成員卡片間距一致 */
    }
    /* CEO 佔第1列，與成員對齊 */
    .team-first-row .member-ceo {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-self: stretch;
    }
    /* IP 輪播佔第2-3列 */
    .team-first-row .ip-carousel-block {
        grid-column: 2 / 4;
        margin: 0;
        padding: 0;
        justify-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow: hidden; /* 防止溢出 */
    }
    /* 個人 IP 輪廓的 carousel，調整大小 */
    .team-first-row .ip-carousel-block .carousel {
        width: 90%; /* 稍微縮小一點，避免箭頭卡到 */
        max-width: 90%;
        padding: 0 50px; /* 給箭頭空間 */
    }
    /* 調整個人 IP 輪廓的標題大小 */
    .team-first-row .ip-carousel-block .casetitle {
        font-size: 20px;
    }
}

/* 成員網格：電腦版一排3個，與CEO對齊 */
.members {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 0.75rem; /* 與第一排對齊 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* 手機版：確保內容居中 */
@media (max-width: 899px) {
    .members {
        padding: 0 16px; /* 左右對稱，確保居中 */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .members .grid-members {
        width: 100%;
        max-width: 100%;
        justify-items: center;
    }
}
@media (min-width: 900px){ 
    .members .grid-members{ 
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 1rem;
    }
    .member {
        grid-column: span 1;
    }
}

/* =========================
   方案介紹（圖片平鋪）
   可調整：桌機三欄、陰影
========================= */
.plans{ max-width: var(--max); margin: 30px auto; padding: 0 16px 40px; }
.plans-wrap{ 
    display: grid; 
    gap: 16px;
    padding: 0 20px; /* 增加左右邊距，避免貼邊 */
}
.plans-wrap img{
    width: 85%; /* 縮小15%（從100%到85%） */
    display: block;
    margin: 0 auto; /* 置中顯示 */
    box-shadow: none;
    background: transparent;
    border: none;
    outline: none;
}
/* 手機版：減少左右留白 */
@media (max-width: 980px){
    .plans{ 
        padding: 0 8px 40px; /* 減少左右邊距 */
    }
    .plans-wrap{ 
        padding: 0 8px; /* 減少左右邊距 */
    }
    .plans-wrap img{
        width: 75%; /* 縮小圖片，讓它不會太大 */
    }
}
@media (min-width: 980px){
    .plans-wrap{ 
        grid-template-columns: repeat(3, 1fr);
        padding: 0 30px; /* 電腦版增加更多邊距 */
    }
}

/* =========================
   聯絡我們
   可調整：字級、上下距離
========================= */
.contact{ max-width: var(--max); margin: 0 auto 80px; padding: 0 16px; text-align: center; }
.contact-note{ opacity: .8; }

/* =========================
   頁尾（Footer）
========================= */
.site-footer {
    background: rgba(255, 255, 255, 0.1); /* 透明背景 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px);
    border-top: none; /* 移除原本的邊框 */
    padding: 40px 16px 30px;
    margin-top: 100px; /* 增加與方案介紹的間距 */
    position: relative;
}
/* 手機版：減少左右留白 */
@media (max-width: 768px){
    .site-footer {
        padding: 40px 8px 30px; /* 減少左右邊距 */
    }
    .footer-content {
        padding: 0 8px; /* 減少內容區左右邊距 */
    }
}

/* 金色發光分隔線 */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 800px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(247, 231, 167, 0.3) 20%,
        rgba(212, 181, 106, 0.8) 50%,
        rgba(247, 231, 167, 0.3) 80%,
        transparent 100%
    );
    box-shadow: 
        0 0 4px rgba(247, 231, 167, 0.6),
        0 0 8px rgba(212, 181, 106, 0.4),
        0 0 12px rgba(247, 231, 167, 0.3);
}

.footer-content {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
}

.footer-brand {
    margin-bottom: 10px;
}

.footer-company-zh {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bronze);
    margin: 0 0 8px 0;
    font-family: 'A', sans-serif;
}

.footer-company-en {
    font-size: 0.95rem;
    color: var(--bronze);
    opacity: 0.85;
    margin: 0 0 8px 0;
    font-family: 'A', sans-serif;
}

.footer-tax-id {
    font-size: 0.85rem;
    color: var(--bronze);
    opacity: 0.75;
    margin: 0 0 12px 0;
    font-family: 'A', sans-serif;
}

.footer-tagline {
    font-size: 1rem;
    color: var(--bronze);
    margin: 0 0 6px 0;
    font-weight: 500;
}

.footer-slogan {
    font-size: 0.9rem;
    color: var(--bronze);
    opacity: 0.8;
    margin: 0;
    font-style: italic;
}

.footer-locations {
    display: flex;
    flex-direction: row; /* 橫向排列 */
    gap: 20px; /* 地標之間的間距 */
    align-items: center;
    justify-content: center; /* 居中對齊 */
    margin-top: 12px; /* 與上方標語的間距 */
    flex-wrap: wrap; /* 手機版可換行 */
}

.location-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bronze);
    font-size: 0.9rem;
}

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

.location-name {
    font-weight: 500;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 12px; /* 縮小間距（從24px到12px） */
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--bronze);
    transition: all 0.3s ease;
    padding: 8px;
}

.social-link img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    filter: drop-shadow(0 2px 4px rgba(166, 124, 82, 0.3));
    transition: all 0.3s ease;
}

.social-link span {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.9;
}

.social-link:hover {
    transform: translateY(-2px);
    color: var(--gold2);
}

.social-link:hover img {
    filter: drop-shadow(0 4px 8px rgba(166, 124, 82, 0.5));
    transform: scale(1.05);
}

/* 電腦版：頁尾布局調整 */
@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr; /* 單欄布局 */
        text-align: left;
        align-items: start;
        position: relative;
    }

    .footer-brand {
        text-align: left;
        padding-left: 30px; /* 對齊方案介紹的左邊距 */
        display: flex;
        flex-direction: column;
    }

    .footer-locations {
        justify-content: flex-start; /* 左對齊 */
        gap: 24px; /* 電腦版增加間距 */
        margin-bottom: 0; /* 移除底部間距 */
        display: inline-flex; /* 讓地點可以和其他元素在同一行 */
    }

    /* 讓社群連結與地點同一行，靠右對齊 */
    .footer-content {
        display: flex;
        flex-direction: column;
    }

    /* 創建一個包含地點和社群連結的容器 */
    .footer-brand {
        position: relative;
    }

    .footer-social {
        position: absolute;
        right: 30px; /* 靠右對齊 */
        top: auto;
        bottom: 12px; /* 對齊地點的垂直位置 */
        justify-content: flex-end; /* 靠右對齊 */
        flex-direction: row; /* 橫向排列 */
        gap: 20px; /* 增加間距 */
        margin-left: 0;
        margin-top: 0;
        display: flex;
        align-items: center; /* 垂直居中對齊 */
        padding-left: 0;
        padding-right: 0;
    }

    .social-link {
        flex-direction: row; /* 橫向排列（圖標和文字） */
        text-align: left;
    }
}

/* =========================
   浮動按鈕（FB、LINE、IG）
========================= */
.fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(166, 124, 82, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
    overflow: hidden;
    padding: 0;
}

.fab img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(166, 124, 82, 0.4);
}

.fab:hover img {
    transform: scale(1.1);
}

.fab:active {
    transform: translateY(-1px) scale(1.02);
}

/* FB 按鈕 */
.fab-fb {
    bottom: 140px; /* 最上方 */
}

/* IG 按鈕 */
.fab-ig {
    bottom: 80px; /* 中間 */
}

/* LINE 按鈕 */
.fab-line {
    bottom: 20px; /* 最下方 */
}

/* 手機版調整 */
@media (max-width: 768px) {
    .fab {
        width: 48px;
        height: 48px;
        right: 16px;
    }
    
    .fab img {
        width: 100%;
        height: 100%;
    }
    
    .fab-fb {
        bottom: 130px;
    }
    
    .fab-ig {
        bottom: 75px;
    }
    
    .fab-line {
        bottom: 16px;
    }
}

/* =========================
   燈箱（Lightbox）
   可調整：最大寬高、關閉按鈕大小
========================= */
.lightbox{
    position: fixed; inset: 0; background: rgba(0,0,0,.8);
    display: none; align-items: center; justify-content: center; z-index: 60;
    padding: 20px; /* 增加內邊距，避免圖片貼邊 */
}
.lightbox.open{ display: flex; }
.lb-img{ 
    max-width: 92vw; 
    max-height: 90vh; 
    margin: 0 auto; /* 確保圖片居中 */
    display: block;
    object-fit: contain; /* 保持圖片比例 */
}
.lb-close{
    position: absolute; right: 20px; top: 20px;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: linear-gradient(180deg, var(--gold1), var(--bronze));
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    z-index: 61; /* 確保按鈕在圖片上方 */
}

/* =========================
   Reveal（進場動畫）
   可調整：位移距離、時間
========================= */
.reveal{ opacity: 0; transform: translateY(18px); transition: all .5s ease; }
.reveal.in{ opacity: 1; transform: none; }

/* =========================
   移除列表圓點（全站）
========================= */
ul, li { list-style: none !important; }

/* === 手機 HERO 主標修正*/
@media (max-width: 540px){
    :root{
        --hero-small-size: clamp(10px, 20vw, 72px);
    }
    .title{ flex-wrap: nowrap; }                 /* 不允許換行 */
    .title .small,
    .title .big{
        white-space: nowrap;                     /* 文字不斷行 */
        line-height: 1;
    }
    .title .big:not(.shiny-text){ transform: translateY(4px); }   /* 視覺基線微調 */
    .title .big.shiny-text{ transform: translateY(4px) !important; }   /* shiny-text 保持位置 */
}


/* =========================
   桌機版 CEO 區塊：依參考圖排版
   左：大圓圖 / 右：小行職稱 + 大行姓名 + 單欄星號清單
   （手機版不變）
========================= */
@media (min-width: 1100px){
    /* 圖文版面：左大圖、右文字 */
    .team .ceo-wrap{
        grid-template-columns: minmax(480px, 540px) 1fr; /* 左圖欄寬 */
        column-gap: 40px;                                /* 圖文距離 */
        align-items: start;                              /* 右側自上對齊 */
    }

    /* 左側頭像：更大，維持圓形 */
    .team .ceo-photo img{
        width: 520px;           /* ← 想更大就調這裡 */
        max-width: 540px;
        border-radius: 50%;
    }

    /* 右側整體、字體樣式 */
    .team .ceo-info{ text-align: left; max-width: 560px; }

    /* 小行職稱（執行長  CEO） */
    .team .ceo-title{
        font-size: 22px;        /* ← 小一些 */
        color: var(--bronze);
        letter-spacing: .02em;
        margin: 4px 0 6px;
        font-weight: 700;
    }

    /* 大行姓名（蒂蒂  DiDi） */
    .team .name{
        font-size: 56px;        /* ← 大字 */
        color: var(--bronze);
        font-weight: 800;
        letter-spacing: .02em;
        margin: 0 0 16px;
        line-height: 1.1;
    }

    /* 單欄星號清單（每行一個） */
    .team .ceo-list{
        display: grid;
        grid-template-columns: 1fr;   /* ✅ 單欄直排 */
        gap: 14px;                    /* 行距 */
        max-width: 520px;
    }
    .team .ceo-list li{
        font-size: 22px;              /* 清單字級 */
        line-height: 1.5;
        padding-left: 0; /* 移除星號空間 */
        position: relative;
    }
    .team .ceo-list li::before{
        display: none; /* 移除星號 */
    }
}

/* HERO 主標：全尺寸鎖定不換行 */
.title {
    flex-wrap: nowrap !important;
}
.title .small,
.title .big {
    white-space: nowrap !important;
    word-break: keep-all !important;
}

/* 安全字級：窄寬時自動縮小 */
@media (max-width: 960px) {
    :root {
        --hero-small-size: clamp(24px, 15vw, 48px); /* 缩小手机版字体 */
    }
    .title .big:not(.shiny-text) {
        transform: translateY(6px);
    }
    .title .big.shiny-text {
        transform: translateY(6px) !important;
    }
}