:root {
    --brand: #0ea5e9; /* sky-500 */
    --brand-2: #22c55e; /* green-500 */
    --ink: #0b1220;
    --ink-2: #1b2433;
    --paper: #ffffff;
    --muted: #6b7280;
    --page-bg: #F1EBE1; /* ★ Warm Grey (溫和淺灰) */
}

html, body {
    font-family: 'Noto Sans TC', system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial, "Microsoft JhengHei", sans-serif;
}

/*body {
    background: radial-gradient(60% 50% at 10% 10%, rgba(14,165,233,.08), transparent 60%), radial-gradient(50% 50% at 90% 20%, rgba(34,197,94,.08), transparent 60%), linear-gradient(180deg, rgba(2,6,23,.02), transparent 30%);
    min-height: 100vh;
}*/
body {
    background:
        radial-gradient(60% 50% at 10% 10%, rgba(14,165,233,.08), transparent 60%),
        radial-gradient(50% 50% at 90% 20%, rgba(34,197,94,.08), transparent 60%),
        linear-gradient(180deg, rgba(2,6,23,.02), transparent 30%),
        var(--page-bg); /* ★ 最底層底色 */
    min-height: 100vh;
}


.topbar {
    background: #0b0f1a;
    color: #cbd5e1;
    font-size: .9rem;
}

    .topbar a {
        color: #cbd5e1;
        text-decoration: none;
    }

        .topbar a:hover {
            color: #fff;
        }

/* Glassy sticky navbar */
.glass-nav {
    background: rgba(10, 13, 20, .55);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: all .35s ease;
}

    .glass-nav .navbar-brand {
        letter-spacing: .5px;
        font-weight: 700;
    }

    .glass-nav .nav-link {
        color: #e5e7eb;
        position: relative;
    }

        .glass-nav .nav-link.active {
            color: #fff;
        }

        .glass-nav .nav-link::after {
            content: "";
            position: absolute;
            left: .75rem;
            right: .75rem;
            bottom: .35rem;
            height: 2px;
            background: linear-gradient(90deg, var(--brand), var(--brand-2));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .3s ease;
            border-radius: 2px;
        }

        .glass-nav .nav-link:hover::after, .glass-nav .nav-link:focus::after, .glass-nav .nav-link.active::after {
            transform: scaleX(1);
        }

.nav-scrolled {
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    background: rgba(10,13,20,.72);
}

.navbar-toggler {
    border: none;
}

/* Mega menu */
.dropdown-mega {
    position: static;
}

.dropdown-menu.mega {
    width: min(1100px, 92vw);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(12,15,22,.9);
    backdrop-filter: blur(12px);
    padding: 1.5rem;
}

    .dropdown-menu.mega a {
        color: #e5e7eb;
        text-decoration: none;
    }

        .dropdown-menu.mega a:hover {
            color: #fff;
        }

.mega h6 {
    color: #cbd5e1;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* CTA button */
.btn-cta {
    background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
    border: none;
    color: #fff;
    border-radius: 999px;
    padding: .6rem 1rem;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(14,165,233,.3);
}

    .btn-cta:hover {
        filter: brightness(1.05);
        box-shadow: 0 10px 28px rgba(34,197,94,.35);
    }

/* Aurora hero */
.aurora {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #0b0f1a;
}

    .aurora::before, .aurora::after {
        content: "";
        position: absolute;
        inset: -30%;
        background: radial-gradient(600px 240px at 20% 20%, rgba(14,165,233,.25), transparent 50%), radial-gradient(240px 600px at 80% 0%, rgba(34,197,94,.16), transparent 60%), radial-gradient(500px 200px at 10% 100%, rgba(124,58,237,.12), transparent 55%);
        filter: blur(20px);
        animation: floaty 24s linear infinite;
    }

    .aurora::after {
        animation-direction: reverse;
        opacity: .8;
    }

@keyframes floaty {
    0% {
        transform: translateY(-2%) translateX(-1%);
    }

    50% {
        transform: translateY(2%) translateX(1%);
    }

    100% {
        transform: translateY(-2%) translateX(-1%);
    }
}

/* Section helpers */
.section-title {
    font-weight: 800;
    letter-spacing: .2px;
}

.muted {
    color: #6b7280;
}

.icon-pill {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(14,165,233,.15);
}

.feature-card {
    border-radius: 20px;
    background: #0f1422;
    color: #e5e7eb;
    border: 1px solid rgba(255,255,255,.08);
}

    .feature-card:hover {
        transform: translateY(-2px);
        transition: .25s ease;
    }

.product-card {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(2,6,23,.06);
}

    .product-card .badge {
        position: absolute;
        left: 12px;
        top: 12px;
    }

/*.logo-row img {
    height: 40px;
    filter: grayscale(100%);
    opacity: .7;
    transition: .2s;
}

    .logo-row img:hover {
        filter: none;
        opacity: 1;
    }*/
/* Logo 列：預設全彩，移除任何灰階/去飽和/混合模式 */
.logo-row img {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    transition: transform .25s ease;

    height: 40px;
    filter: grayscale(100%);
    opacity: .7;
    transition: .2s;
}

    /* 保留一點互動，不改顏色 */
    .logo-row img:hover {
        transform: translateY(-2px) scale(1.02);

        filter: none;
        opacity: 1;
    }

.stat {
    text-align: center;
    padding: 1.25rem;
}

    .stat .num {
        font-size: clamp(28px, 5vw, 44px);
        font-weight: 800;
    }

/* Footer */
footer {
    color: #cbd5e1;
    background: #0b0f1a;
    border-top: 1px solid rgba(255,255,255,.08);
}

    footer a {
        color: #cbd5e1;
        text-decoration: none;
    }

        footer a:hover {
            color: #fff;
        }

/* Back to top */
#backToTop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: none;
    z-index: 1040;
}

/* Floating contact widget */
.float-contact {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    z-index: 1040;
    display: grid;
    gap: .5rem;
}

    .float-contact a {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #111827;
        color: white;
        border: 1px solid rgba(255,255,255,.08);
    }

/*[data-bs-theme="dark"] body {*/
    /*background: #0b0f1a;*/
    /*background : #F1EBE1;
}*/

/* Dark theme tuning */
[data-bs-theme="dark"] .product-card {
    background: #111827;
    color: #e5e7eb;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

[data-bs-theme="dark"] .card {
    background-color: #0f1422;
    border-color: rgba(255,255,255,.08);
    color: #e5e7eb;
}

[data-bs-theme="dark"] .bg-dark-subtle {
    background-color: #111827 !important;
    color: #e5e7eb !important;
}

[data-bs-theme="dark"] .list-group-item {
    background-color: transparent;
    color: #e5e7eb;
}

[data-bs-theme="dark"] .modal-content {
    background-color: #0f1422;
    border-color: rgba(255,255,255,.08);
}

[data-bs-theme="dark"] .offcanvas.text-bg-dark {
    background-color: #0b0f1a !important;
}

/*底層選單顏色*/
.bg-floorColor {
    background-color: #0B2653;
}


/*=======================================單行下拉選單樣式===================================*/
/* 讓只有這顆「產品介紹」恢復成相對定位，供子層定位用 */
.navbar .dropdown-mega.products-simple-host {
    position: relative !important;
}

/* 單欄直向列表 + #EAEAEA 底色，只影響 .products-simple */
nav.navbar .dropdown-menu.mega.products-simple {
    background: #F1EBE1 !important;
    color: #111 !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
    backdrop-filter: none !important;
    position: absolute !important;
    top: calc(100% + .25rem) !important; /* 緊貼在觸發器下方 */
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 320px !important;
    padding: .5rem 0 !important;
    border-radius: .75rem;
    z-index: 1050; /* 避免被 hero 圖遮住 */
}

    /* 轉成單欄 */
    nav.navbar .dropdown-menu.mega.products-simple .container-fluid,
    nav.navbar .dropdown-menu.mega.products-simple .row.g-4,
    nav.navbar .dropdown-menu.mega.products-simple .col-12,
    nav.navbar .dropdown-menu.mega.products-simple .col-md-4 {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 隱藏小標題（做成純清單外觀） */
    nav.navbar .dropdown-menu.mega.products-simple h6 {
        display: none !important;
    }

    /* 直向列表樣式 */
    nav.navbar .dropdown-menu.mega.products-simple ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    nav.navbar .dropdown-menu.mega.products-simple li {
        margin: 0 !important;
    }

    nav.navbar .dropdown-menu.mega.products-simple a {
        display: block !important;
        padding: .55rem 1rem !important;
        color: #111 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        border-radius: .5rem;
    }

        nav.navbar .dropdown-menu.mega.products-simple a:hover {
            background: rgba(0,0,0,.06) !important;
            color: #000 !important;
        }

/* 深色主題也維持淺灰底 */
[data-bs-theme="dark"] nav.navbar .dropdown-menu.mega.products-simple {
    background: #F1EBE1 !important;
    color: #111 !important;
}

/*==========================================================================================*/


/* 讓 Navbar 佔滿整個視窗寬：左貼齊、右貼齊（僅作用在導覽列） */
/*#siteNav > .container-xxl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;*/ /* 要留一點內距可改成 12px/16px */
    /*padding-right: 0 !important;
}*/

/* 保證右側語系+詢價區塊貼齊最右邊 */
/*#navbarContent {
    width: 100% !important;
}

#siteNav .d-none.d-lg-flex.align-items-center.gap-2 {
    margin-left: auto !important;*/ /* 把右側區塊推到最右 */
/*}*/

/* 拉大中間導覽項目的水平間距（只在桌機版生效） */
/*@media (min-width: 992px) {
    #siteNav .navbar-nav {
        gap: 2.2rem !important;*/ /* 覺得還擠就再加大，例如 2.6rem */
    /*}
}*/




/*調整前_20251013*/
/* 桌機版：左右留白、置中導覽、右側貼齊 */
/*@media (min-width: 992px) {*/
    /* 1) 導覽容器佔滿寬，左右保留些許內距 */
    /*#siteNav > .container-xxl {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: clamp(12px, 2vw, 24px) !important;*/ /* ← 左邊留白 */
        /*padding-right: clamp(12px, 2vw, 24px) !important;*/ /* ← 右邊留白 */
        /*display: grid !important;
        grid-template-columns: auto 1fr auto !important;*/ /* 左：Logo／中：導覽／右：按鈕 */
        /*align-items: center !important;
        column-gap: 16px !important;
    }*/

    /* 2) 把 collapse 內容攤平為 grid 子項，不動 HTML 結構 */
    /*#navbarContent {
        display: contents !important;
    }*/

    /* 3) 中間導覽置中，並加大項目間距 */
    /*#siteNav .navbar-nav {
        justify-self: center !important;*/ /* 在整個導覽列中置中 */
        /*margin: 0 !important;*/ /* 抵消 .me-auto 以免把右側擠走 */
        /*gap: 2.4rem !important;*/ /* ⬅︎ 想更寬可調 2.6rem、2.8rem */
    /*}*/

    /* 4) 右側語系＋詢價區塊固定靠最右 */
    /*#siteNav .d-none.d-lg-flex.align-items-center.gap-2 {
        justify-self: end !important;
        margin-left: 0 !important;*/ /* 抵消先前可能的 auto 推擠 */
    /*}
}*/
/* ====================20251013_調整Layout選單============================================ */
/* 桌機佈局：維持 3 欄（左：品牌／中：導覽／右：語系與 CTA） */
@media (min-width: 992px) {
    /* 讓外層容器成為 3 欄 Grid，並保留左右些許內距 */
    #siteNav > .container-xxl {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: clamp(12px, 2vw, 24px) !important;
        padding-right: clamp(12px, 2vw, 24px) !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        column-gap: clamp(8px, 1.8vw, 20px) !important;
    }

    /* 讓 collapse 內容攤平成 Grid 子項（不動 HTML 結構） */
    #navbarContent {
        display: contents !important;
    }

    /* 中間導覽列：禁止換行，並允許它收縮（min-width:0） */
    #siteNav .navbar-nav {
        justify-self: center !important;
        margin: 0 !important;
        flex-wrap: nowrap !important; /* 關鍵：不換行 */
        gap: clamp(1rem, 1.6vw, 2.4rem) !important; /* 視寬自動縮放間距 */
        min-width: 0 !important; /* 允許 1fr 欄收縮 */
    }

        /* 每個導覽項的內容都當作單一不可拆分區塊處理 */
        #siteNav .navbar-nav .nav-item {
            min-width: max-content !important; /* 文字不因容器太窄而斷行 */
        }

        /* 所有導覽用的連結／按鈕統一不換行；中文避免任意斷字 */
        #siteNav .navbar-brand,
        #siteNav .navbar-nav .nav-link,
        #siteNav .dropdown-toggle,
        #siteNav .d-none.d-lg-flex {
            white-space: nowrap !important;
            word-break: keep-all !important;
        }

    /* 品牌區避免斷行；過窄時以省略號處理（可視需要移除） */
    #siteNav .navbar-brand {
        display: inline-flex !important;
        align-items: center !important;
        gap: .5rem !important;
        max-width: clamp(200px, 28vw, 440px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 右側語系/詢價區塊固定靠右 */
    #siteNav .d-none.d-lg-flex.align-items-center.gap-2 {
        justify-self: end !important;
        margin-left: 0 !important;
    }
}

/* 針對常見 13–14 吋筆電寬度（1024–1366）微調字級與間距，避免擠爆 */
@media (min-width: 992px) and (max-width: 1366px) {
    .glass-nav .nav-link {
        font-size: .95rem !important;
        line-height: 1.2 !important; /* 降低行高，減少佔位 */
    }

    #siteNav .navbar-nav {
        gap: clamp(.9rem, 1.2vw, 1.6rem) !important; /* 再縮小一點間距 */
    }

    #siteNav .d-none.d-lg-flex.align-items-center.gap-2 {
        gap: .5rem !important; /* 右側語系/按鈕收斂 */
    }

    .btn-cta {
        padding: .5rem .85rem !important; /* CTA 稍微瘦身 */
        font-size: .95rem !important;
    }
}

/* 如果你的 logo 是 <img>，可在窄一些的桌機再小一點點（可選） */
@media (min-width: 992px) and (max-width: 1366px) {
    #siteNav .navbar-brand img {
        max-height: 34px !important;
        height: auto !important;
        width: auto !important;
    }
}

/* 防止「產品介紹」的下拉單欄列表內文字被擠壓換行（維持清單可讀） */
@media (min-width: 992px) {
    nav.navbar .dropdown-menu.mega.products-simple a {
        white-space: nowrap !important;
        word-break: keep-all !important;
    }
}
/* ================================================================ */

/*================================字型檔===================================*/
@font-face {
    font-family: 'Slogen';
    src: url('/UploadImages/字型檔/Slogan/slogann.ttf') format('truetype');
    font-display: swap;
}
/*=========================================================================*/


/* 防翻譯（配合 <html translate="no" class="notranslate">）*/
.notranslate, [translate="no"] {
}

/* 只有桌機且真的偵測到 DevTools 時才模糊（行動裝置不套用） */
@media (hover: hover) and (pointer: fine) {
    html.devtools-open body {
        filter: blur(6px);
        transition: filter .2s ease;
    }
}


/* =================== TEXT / NAV BLACK OVERRIDES =================== */

/* 全站預設字色 → 黑 */
body {
    color: var(--ink) !important;
}
/* #0b1220 */
h1, h2, h3, h4, h5, h6 {
    color: var(--ink) !important;
}

p, li, small, span {
    color: inherit !important;
}

/* HERO/首頁區域：確保不被任何 text-white 類似規則影響 */
.aurora,
.aurora * {
    color: inherit !important;
}

/* 導覽列現在是淺底（你 nav 上有 .bg-white）→ 字改黑 */
.glass-nav {
    background: rgba(255,255,255,.9) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

    /* 導覽項、品牌、下拉觸發、漢堡鍵 → 全部黑字 */
    .glass-nav .navbar-brand,
    .glass-nav .nav-link,
    .glass-nav .dropdown-toggle,
    .glass-nav .navbar-toggler {
        color: var(--ink) !important;
    }

        .glass-nav .nav-link.active {
            color: #000 !important;
        }

/* 捲動後維持亮底＋陰影（避免變暗看不到字） */
.nav-scrolled {
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
}

/* 「產品介紹」單欄選單本來就是淺底，保險再補一次黑字 */
nav.navbar .dropdown-menu.mega.products-simple a {
    color: #111 !important;
}
/* ================================================================ */


/*20251013_調整Layout選單*/
:root {
    --nav-h: 120px;
}
.aurora .hero-swiper {
    margin-top: var(--nav-h) !important;
}
/* ================================================================ */