/* =========================================================
   首頁（/）專用樣式
   以 hm- 為前綴，避免與 style.css 既有樣式及各服務頁樣式互相干擾
   ========================================================= */

/* 設計變數：集中管理色彩，所有文字配色皆已確認符合 AA 對比度 4.5:1 */
.hm-page {
    --hm-navy: #0b2a4a; /* 深藍：標題與行動呼籲背景，沉穩專業 */
    --hm-navy-2: #14406e; /* 深藍漸層第二色，增加背景層次 */
    --hm-blue: #1170b7; /* 品牌主色：沿用 Logo 與背景動畫的藍色，與白色對比約 5:1 */
    --hm-blue-soft: #e8f1fa; /* 淺藍：圖示底色與標籤背景 */
    --hm-teal: #0f766e; /* 青綠輔色：與網站設計頁呼應，用於英文小標 */
    --hm-text: #1f2937; /* 內文主色 */
    --hm-muted: #4b5563; /* 次要文字，與白色對比約 7.5:1 */
    --hm-line: #e3e8ef; /* 分隔線與卡片框線 */
    --hm-bg-alt: #f5f8fc; /* 交錯區塊背景，區分段落節奏 */
    --hm-radius: 16px; /* 卡片與圖片統一圓角 */
    --hm-shadow: 0 12px 32px rgba(11, 42, 74, 0.1); /* 統一陰影，營造浮起層次 */

    display: block; /* main 在舊瀏覽器預設為 inline，明確指定避免版面錯亂 */
    overflow-x: clip; /* 裁切 AOS 動畫與主視覺裝飾的位移，避免手機出現水平捲軸 */
    color: var(--hm-text);
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif; /* 中文優先使用 layouts 已載入的 Noto Sans TC */
    line-height: 1.8; /* 中文段落閱讀較舒適的行高 */
    letter-spacing: 0.03em;
}

/* 跳到主要內容後 main 會取得焦點，但 main 本身不需要顯示焦點框 */
.hm-page:focus {
    outline: none;
}

/* 錨點跳轉時預留固定選單的高度，避免標題被選單遮住 */
.hm-page [id] {
    scroll-margin-top: 100px;
}

/* 使用者點擊本頁錨點時平滑捲動；偏好減少動態者維持瞬間跳轉 */
@media (prefers-reduced-motion: no-preference) {
    html:has(.hm-page) {
        scroll-behavior: smooth;
    }
}

/* ---------- 共用：按鈕 ---------- */

.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px; /* 觸控目標至少 44px，方便手指點擊 */
    padding: 10px 26px;
    border: 2px solid transparent;
    border-radius: 999px; /* 膠囊形按鈕，與網站浮動按鈕風格一致 */
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.hm-btn:hover {
    transform: translateY(-2px); /* 輕微上浮，提示可點擊 */
}

.hm-btn img {
    width: 20px;
    height: 20px;
}

/* 主要按鈕：深藍底白字，在淺色首屏中最醒目 */
.hm-btn-primary {
    background-color: var(--hm-navy);
    color: #fff;
    box-shadow: 0 8px 20px rgba(11, 42, 74, 0.25);
}

.hm-btn-primary:hover,
.hm-btn-primary:focus {
    background-color: var(--hm-blue);
    color: #fff;
}

/* 淺色背景上的次要按鈕：品牌藍框 */
.hm-btn-outline {
    border-color: var(--hm-blue);
    background-color: #fff;
    color: var(--hm-blue);
}

.hm-btn-outline:hover,
.hm-btn-outline:focus {
    background-color: var(--hm-blue);
    color: #fff;
}

/* 深色背景上的次要按鈕：白框白字 */
.hm-btn-outline-light {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.hm-btn-outline-light:hover,
.hm-btn-outline-light:focus {
    background-color: #fff;
    color: var(--hm-navy);
}

/* LINE 按鈕：使用 LINE 官方綠色加深版，白字對比約 4.6:1 */
.hm-btn-line {
    background-color: #06833a;
    color: #fff;
}

.hm-btn-line:hover,
.hm-btn-line:focus {
    background-color: #056b30;
    color: #fff;
}

/* 鍵盤焦點：加粗外框並與元素保留距離，淺色背景使用品牌藍 */
.hm-btn:focus-visible,
.hm-service-card:focus-visible,
.hm-works a:focus-visible,
.hm-faq-item summary:focus-visible,
.hm-anim-toggle:focus-visible {
    outline: 3px solid var(--hm-blue);
    outline-offset: 3px;
}

/* 深色的行動呼籲區改用亮黃色焦點框，藍色在深色底上看不清楚 */
.hm-cta .hm-btn:focus-visible {
    outline-color: #ffbf47;
}

/* ---------- 共用：區塊、標題與圖示 ---------- */

.hm-section {
    padding: 88px 0;
}

/* 交錯背景：讓長頁面的段落邊界更清楚 */
.hm-section-alt {
    background-color: var(--hm-bg-alt);
}

.hm-section-head {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

/* 英文小標：增加視覺層次，左側短線引導視線到標題 */
.hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--hm-teal);
    font-family: Montserrat, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hm-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background-color: currentColor;
}

.hm-title {
    margin: 0 0 16px;
    color: var(--hm-navy);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.45;
}

.hm-desc {
    margin: 0;
    color: var(--hm-muted);
    font-size: 1.0625rem;
}

/* 圓角方形圖示底：關於微源與合作流程共用 */
.hm-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background-color: var(--hm-blue-soft);
    color: var(--hm-blue);
    font-size: 1.375rem;
}

/* ---------- 首屏 ---------- */

.hm-hero {
    position: relative;
    padding: 64px 0 96px;
    overflow: hidden; /* 裁切 Canvas 與裝飾圖形，避免產生水平捲軸 */
    background: linear-gradient(160deg, #eef5fc 0%, #ffffff 50%, #f0f8f7 100%);
}

/* Canvas 背景動畫鋪滿首屏，置於內容下方 */
.hm-hero-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none; /* 不攔截滑鼠事件，避免擋住按鈕點擊 */
}

.hm-hero-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* 內容需疊在 Canvas 之上 */
.hm-hero .container {
    position: relative;
}

.hm-hero-title {
    margin: 0 0 20px;
    color: var(--hm-navy);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3;
}

/* 副標：漸層文字強調定位，不支援 background-clip 的瀏覽器會退回品牌藍文字 */
.hm-hero-subtitle {
    display: block;
    margin-top: 10px;
    color: var(--hm-blue);
    font-size: 1.625rem;
    font-weight: 700;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hm-hero-subtitle {
        background: linear-gradient(90deg, var(--hm-blue) 0%, var(--hm-teal) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.hm-hero-lead {
    max-width: 560px;
    margin: 0 0 32px;
    color: var(--hm-muted);
    font-size: 1.0625rem;
}

.hm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

/* 核心數據：三欄等寬，以左側線條分隔 */
.hm-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 520px;
    margin: 0;
}

.hm-hero-stats div {
    display: flex;
    flex-direction: column-reverse; /* HTML 中說明（dt）在前符合語意，畫面上數值在上較醒目 */
    padding-left: 16px;
    border-left: 3px solid #cfe0f2;
}

.hm-hero-stats dt {
    color: var(--hm-muted);
    font-size: 0.875rem;
    font-weight: 400;
}

.hm-hero-stats dd {
    margin: 0;
    color: var(--hm-navy);
    font-family: Montserrat, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
}

/* 主視覺：多裝置圖為主，儀表板圖疊在左下呈現前後層次 */
.hm-hero-visual {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.hm-hero-devices {
    display: block;
    width: 100%;
    height: auto;
}

.hm-hero-system {
    position: absolute;
    bottom: 4%;
    left: -8%;
    width: 52%;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(11, 42, 74, 0.25)); /* 透明背景圖使用 drop-shadow，陰影才會貼合圖形外框 */
}

/* 主視覺緩慢上下浮動，兩張圖錯開節奏增加立體感；偏好減少動態者不播放 */
@media (prefers-reduced-motion: no-preference) {
    .hm-hero-devices {
        animation: hm-float 7s ease-in-out infinite;
    }

    .hm-hero-system {
        animation: hm-float 7s ease-in-out -3.5s infinite;
    }
}

@keyframes hm-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* 背景動畫暫停按鈕：固定在首屏左下角 */
.hm-anim-toggle {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* 觸控目標至少 44px */
    height: 44px;
    border: 1px solid var(--hm-line);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--hm-blue);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.hm-anim-toggle:hover {
    background-color: var(--hm-blue);
    color: #fff;
}

/* ---------- 服務項目 ---------- */

.hm-service-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 六項服務排成三欄兩列 */
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    background-color: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.hm-service-card:hover,
.hm-service-card:focus {
    border-color: #bcd4ec;
    color: inherit;
    box-shadow: var(--hm-shadow);
    transform: translateY(-4px);
}

/* 圖片區：白底搭配固定比例，示意圖與 Logo 圖片尺寸不一時仍能整齊排列 */
.hm-service-media {
    display: block; /* 不使用 flex：flex 子項目的最小高度會被圖片原始尺寸撐開，造成各卡片圖片區高度不一 */
    aspect-ratio: 16 / 10; /* 固定比例，讓每張卡片的圖片區高度一致 */
    overflow: hidden; /* 必要：aspect-ratio 的自動最小高度會被圖片內容撐開，設定 overflow 後比例才會固定 */
    padding: 20px 28px 12px;
    background-color: #fff;
}

.hm-service-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 在固定比例的區塊內完整顯示示意圖或 Logo，不裁切也不變形 */
    transition: transform 0.4s ease;
}

.hm-service-card:hover .hm-service-media img {
    transform: scale(1.05);
}

.hm-service-body {
    display: flex;
    flex: 1; /* 撐滿卡片剩餘高度，讓「瞭解詳情」對齊卡片底部 */
    flex-direction: column;
    padding: 20px 26px 26px;
    border-top: 1px solid var(--hm-line);
}

.hm-service-body h3 {
    margin: 0 0 8px;
    color: var(--hm-navy);
    font-size: 1.25rem;
    font-weight: 700;
}

.hm-service-text {
    margin: 0 0 16px;
    color: var(--hm-muted);
    font-size: 0.9375rem;
    line-height: 1.75;
}

.hm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.hm-tags span {
    padding: 2px 12px;
    border-radius: 999px;
    background-color: var(--hm-blue-soft);
    color: var(--hm-blue);
    font-size: 0.8125rem;
    font-weight: 700;
}

.hm-service-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto; /* 推到卡片底部，各卡片的連結提示高度一致 */
    color: var(--hm-blue);
    font-weight: 700;
}

.hm-service-more i {
    transition: transform 0.2s;
}

.hm-service-card:hover .hm-service-more i {
    transform: translateX(4px); /* 箭頭右移，提示點擊後前往下一頁 */
}

/* ---------- 關於微源 ---------- */

.hm-about-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--hm-blue);
    font-size: 1.25rem;
}

.hm-about-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-about-list li {
    padding: 26px;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    background-color: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}

.hm-about-list li:hover {
    box-shadow: var(--hm-shadow);
    transform: translateY(-3px);
}

.hm-about-list .hm-icon {
    margin-bottom: 14px;
}

.hm-about-list h3 {
    margin: 0 0 6px;
    color: var(--hm-navy);
    font-size: 1.125rem;
    font-weight: 700;
}

.hm-about-list p {
    margin: 0;
    color: var(--hm-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ---------- 合作流程 ---------- */

.hm-process {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hm-step; /* 以 CSS 計數器產生步驟編號，增減步驟時不需手動調整 */
}

.hm-process li {
    position: relative;
    padding: 30px 16px 24px;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    background-color: #fff;
    text-align: center;
    counter-increment: hm-step;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.hm-process li:hover {
    border-color: #bcd4ec;
    box-shadow: var(--hm-shadow);
}

/* 步驟序號：卡片上緣置中的小膠囊 */
.hm-process li::before {
    content: counter(hm-step, decimal-leading-zero);
    position: absolute;
    top: -14px;
    left: 50%;
    padding: 2px 12px;
    border-radius: 999px;
    background-color: var(--hm-navy);
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    transform: translateX(-50%);
}

.hm-process .hm-icon {
    margin-bottom: 14px;
}

.hm-process h3 {
    margin: 0 0 8px;
    color: var(--hm-navy);
    font-size: 1.125rem;
    font-weight: 700;
}

.hm-process p {
    margin: 0;
    color: var(--hm-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ---------- 精選案例 ---------- */

.hm-works {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 首頁案例最多 6 筆，三欄兩列剛好排滿 */
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-works a {
    display: block;
    height: 100%;
    border-radius: var(--hm-radius);
    color: inherit;
    text-decoration: none;
}

.hm-works figure {
    height: 100%;
    margin: 0;
    overflow: hidden; /* 圖片放大時裁切於卡片內 */
    border-radius: var(--hm-radius);
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(11, 42, 74, 0.08);
    transition: box-shadow 0.25s, transform 0.25s;
}

.hm-works a:hover figure,
.hm-works a:focus figure {
    box-shadow: var(--hm-shadow);
    transform: translateY(-4px);
}

.hm-works-img {
    overflow: hidden;
}

.hm-works img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 460 / 310; /* 與後台上傳的封面尺寸一致，避免載入時版面跳動 */
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hm-works a:hover img {
    transform: scale(1.06);
}

.hm-works figcaption {
    padding: 14px 18px 18px;
}

.hm-works-en {
    display: block;
    overflow: hidden;
    color: var(--hm-teal);
    font-family: Montserrat, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis; /* 英文名稱過長時以省略號收尾，維持卡片高度一致 */
}

.hm-works-name {
    display: block;
    color: var(--hm-navy);
    font-size: 1.0625rem;
    font-weight: 700;
}

/* ---------- 常見問題 ---------- */

.hm-faq {
    max-width: 860px;
    margin: 0 auto;
}

.hm-faq-item {
    margin-bottom: 14px;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    background-color: #fff;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.hm-faq-item[open] {
    border-color: #bcd4ec;
    box-shadow: var(--hm-shadow);
}

.hm-faq-item summary {
    position: relative;
    padding: 20px 60px 20px 24px;
    border-radius: var(--hm-radius);
    cursor: pointer;
    list-style: none; /* 移除預設三角形，改用自訂圖示 */
}

/* Safari 需另外移除預設三角形 */
.hm-faq-item summary::-webkit-details-marker {
    display: none;
}

/* 自訂展開圖示：圓形底加號，展開時旋轉成叉號，視覺呈現開合狀態 */
.hm-faq-item summary::after {
    content: "\f067";
    position: absolute;
    top: 50%;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--hm-blue-soft);
    color: var(--hm-blue);
    font-family: "Font Awesome 5 Free";
    font-size: 0.8125rem;
    font-weight: 900;
    transform: translateY(-50%);
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

.hm-faq-item[open] summary::after {
    background-color: var(--hm-blue);
    color: #fff;
    transform: translateY(-50%) rotate(45deg);
}

.hm-faq-item summary h3 {
    display: inline; /* 標題在 summary 內維持行內，避免多出額外行距 */
    margin: 0;
    color: var(--hm-navy);
    font-size: 1.125rem;
    font-weight: 700;
}

.hm-faq-item p {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--hm-muted);
}

/* ---------- 行動呼籲 ---------- */

.hm-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hm-navy) 0%, var(--hm-navy-2) 100%);
    color: #fff;
    text-align: center;
}

/* 背景大圓環裝飾，增加深色區塊的層次 */
.hm-cta::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 420px;
    height: 420px;
    border: 60px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.hm-cta .container {
    position: relative;
}

.hm-cta h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}

.hm-cta p {
    margin: 0 0 32px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.0625rem;
}

.hm-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* ---------- 響應式：大型平板與小筆電 ---------- */

@media (max-width: 1199.98px) {
    .hm-hero-title {
        font-size: 2.5rem;
    }

    /* 五欄過擠，改為三欄（第二列兩張置中） */
    .hm-process {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        row-gap: 36px; /* 預留步驟序號凸出卡片上緣的空間 */
    }

    .hm-process li {
        grid-column: span 2;
    }

    .hm-process li:nth-child(4) {
        grid-column: 2 / span 2;
    }
}

/* ---------- 響應式：平板 ---------- */

@media (max-width: 991.98px) {
    .hm-section {
        padding: 64px 0;
    }

    .hm-hero {
        padding: 40px 0 88px;
        text-align: center;
    }

    .hm-hero .hm-eyebrow::before {
        display: none; /* 置中排版時左側短線會讓標題看起來偏移 */
    }

    .hm-hero-lead,
    .hm-hero-stats {
        margin-right: auto;
        margin-left: auto;
    }

    .hm-hero-actions {
        justify-content: center;
    }

    .hm-hero-stats div {
        padding-left: 0;
        border-left: 0;
    }

    .hm-hero-visual {
        max-width: 440px;
    }

    .hm-hero-system {
        left: -4%;
    }

    .hm-service-list,
    .hm-works {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- 響應式：手機 ---------- */

@media (max-width: 575.98px) {
    .hm-section {
        padding: 52px 0;
    }

    .hm-title,
    .hm-cta h2 {
        font-size: 1.5rem;
    }

    .hm-hero-title {
        font-size: 1.875rem;
    }

    .hm-hero-subtitle {
        font-size: 1.125rem;
    }

    .hm-hero-stats dd {
        font-size: 1.375rem;
    }

    /* 手機按鈕滿版，觸控更容易 */
    .hm-hero-actions .hm-btn,
    .hm-cta-actions .hm-btn {
        width: 100%;
    }

    .hm-service-list,
    .hm-about-list,
    .hm-process {
        grid-template-columns: minmax(0, 1fr);
    }

    .hm-process li,
    .hm-process li:nth-child(4) {
        grid-column: auto;
    }

    /* 單欄卡片寬度較大，圖片區改為較扁的比例，避免一張卡片就佔滿整個螢幕 */
    .hm-service-media {
        aspect-ratio: 2 / 1;
    }

    /* 手機兩欄案例卡片較窄，縮小內距與字級 */
    .hm-works {
        gap: 14px;
    }

    .hm-works figcaption {
        padding: 10px 12px 14px;
    }

    .hm-works-name {
        font-size: 0.9375rem;
    }
}