/* ============================================================
   輕搭雲官網 · 移動端專屬適配 (mobile.css)
   ------------------------------------------------------------
   規則邊界：所有樣式均包裹在 max-width 媒體查詢內，
   PC 端（> 1024px）不匹配任何一條規則，視覺與交互完全不變。

   斷點體系
     ≤ 1024px  平板 / 大屏手機橫屏
     ≤ 760px   手機主斷點
     ≤ 430px   小屏手機（iPhone 14 Pro / 375px 級）
     ≤ 360px   極窄屏（老款安卓 / 320px 級）
   ============================================================ */

/* ============================================================
   0. 移動端基礎體驗層
   ============================================================ */
@media (max-width: 1024px) {
    /* 消除移動端點擊藍色高亮塊，保持品牌觀感統一 */
    a, button, .case-card, .partner-tile, .capability-tab, .problem-card {
        -webkit-tap-highlight-color: rgba(122, 79, 242, .12);
    }

    /* 禁用觸摸設備上的 hover 殘留態，避免"點了就變"的粘滯感 */
    @media (hover: none) {
        .case-card:hover,
        .case-card:hover img,
        .problem-card:hover,
        .problem-card.reveal.is-visible:hover,
        .capability-tab:hover,
        .footer-contact:hover,
        .contact-option:hover,
        .hero-showcase__more:hover {
            transform: none;
        }
        .case-card:hover img { transform: none; }
        .problem-card:hover::after { transform: scaleY(.26); }
        .hero-showcase__more:hover { background: rgba(28, 20, 66, .74); }
        .capability-tab:hover:not(.is-active) { background: transparent; border-color: transparent; }
    }

    /* 輸入類元素 ≥16px，防止 iOS Safari 聚焦時自動放大頁面 */
    input, select, textarea { font-size: max(16px, 4.2vw); }

    /* 移動端滾動慣性 + 禁止整頁橡皮筋導致的橫向抖動 */
    html { -webkit-text-size-adjust: 100%; }
    body {
        overscroll-behavior-y: none;
        -webkit-font-smoothing: antialiased;
    }

    /* 底部安全區（全面屏手勢條）*/
    .site-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

    /* 觸摸目標不小於 44×44（可訪問性基線）*/
    .hero-showcase__dot { min-width: 22px; min-height: 22px; }
    .hero-showcase__dot.is-active { min-width: 34px; }
    .filter-chip { min-height: 40px; }
}

/* ============================================================
   1. 頂部導航 · 漢堡菜單（方案 A：輕量白卡）
   ------------------------------------------------------------
   設計要點（相比上一版明顯減重）：
   - 白底 + 極細邊框，去掉大面積深紫漸變
   - 去掉 01/02/03 序號，只保留文字 + 右側輕箭頭
   - 當前頁用淡紫底 + 左側紫色豎條表示，不做反色翻轉
   - 底部 CTA 保留品牌紫作為唯一強調色
   ============================================================ */
@media (max-width: 760px) {
    .site-header { height: 62px; }
    .site-header__inner { gap: 12px; }

    .brand img { height: 30px; width: auto; }

    /* 漢堡按鈕：方角描邊，保持輕量 */
    .nav-toggle {
        width: 42px; height: 42px; margin-right: -8px;
        border-radius: 11px;
        border-color: rgba(122, 79, 242, .16);
        background: rgba(122, 79, 242, .05);
    }
    .nav-toggle span,
    .nav-toggle::before,
    .nav-toggle::after { width: 19px; margin: 4px auto; background: var(--violet); }
    .site-header.nav-open .nav-toggle { background: rgba(122, 79, 242, .12); border-color: rgba(122, 79, 242, .3); }

    /* 抽屜：白底細邊框，僅用柔和陰影表達層級 */
    .site-nav {
        left: 10px; right: 10px; top: 68px;
        padding: 0 0 16px;
        gap: 0;
        border-radius: 18px;
        border: 1px solid rgba(19, 21, 26, .09);
        background: rgba(255, 255, 255, .99);
        box-shadow: 0 20px 50px -18px rgba(32, 29, 58, .28);
        color: var(--ink);
        overflow: hidden;
        animation: m-nav-in .26s cubic-bezier(.16, 1, .3, 1);
    }

    /* 頂部：品牌標識 */
    .site-nav::before {
        content: "輕搭雲 QINGDAYUN";
        display: block;
        padding: 17px 18px 14px;
        border-bottom: 1px solid rgba(19, 21, 26, .07);
        color: #9a97a8;
        font-family: var(--font-en);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    /* 導航項：純文字列表，無序號、無卡片底色 */
    .site-nav__links {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 8px 8px 0;
        margin: 0;
    }
    .site-nav__links a {
        min-height: 50px;
        padding: 0 12px 0 14px;
        position: relative;
        display: flex;
        align-items: center;
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: rgba(19, 21, 26, .82);
        font-size: 15.5px;
        font-weight: 700;
        letter-spacing: .01em;
        transition: background .22s ease, color .22s ease;
    }
    /* 序號已移除，偽元素顯式置空
       注意：主樣式有 `[aria-current="page"]::before { display:none }`，
       這裏統一聲明避免殘留樣式影響 */
    .site-nav__links a::before,
    .site-nav__links a[aria-current="page"]::before {
        content: none;
        display: none;
    }

    /* 右側輕箭頭：重置主樣式下劃線的定位與形態 */
    .site-nav__links a::after,
    .site-nav__links a[aria-current="page"]::after {
        content: "›";
        display: block;
        position: static;
        width: auto;
        height: auto;
        margin-left: auto;
        transform: none;
        border: 0;
        background: none;
        border-radius: 0;
        font-size: 17px;
        line-height: 1;
        color: rgba(19, 21, 26, .24);
        transition: color .22s ease;
    }

    /* 當前頁：淡紫底 + 左側紫條，不做反色翻轉 */
    .site-nav__links a[aria-current="page"] {
        background: rgba(122, 79, 242, .09);
        color: #4f34d8;
    }
    /* 左側紫色豎條 */
    .site-nav__links a[aria-current="page"] {
        box-shadow: inset 3px 0 0 -1px #7a4ff2;
    }
    .site-nav__links a[aria-current="page"]::after { color: rgba(122, 79, 242, .6); }

    /* 底部 CTA：品牌紫是全抽屜唯一強調色 */
    .site-nav .button {
        width: calc(100% - 16px);
        min-height: 50px;
        margin: 14px 8px 0;
        border-radius: 11px;
        font-size: 15px;
        font-weight: 800;
        background: #7a4ff2;
        color: #fff;
        box-shadow: 0 8px 20px rgba(122, 79, 242, .22);
    }
    .site-nav .button > span { display: none; }
    .site-nav .button::after {
        content: "→";
        font-size: 15px;
        opacity: .82;
    }
    .site-nav .button:hover { background: #4f34d8; }
}


@keyframes m-nav-in {
    from { opacity: 0; transform: translateY(-10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   2. 通用排版節奏 · Section 頭
   ============================================================ */
@media (max-width: 760px) {
    .shell { width: min(calc(100% - 32px), var(--max)); }

    .eyebrow { font-size: 10px; gap: 8px; }
    .eyebrow::before { width: 20px; }

    .section-head {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 24px;
        align-items: start;
    }
    .section-head__title .eyebrow { margin-bottom: 14px; }
    .section-head h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.035em; }
    .section-head p {
        justify-self: start;
        max-width: 100%;
        font-size: 14.5px;
        line-height: 1.78;
    }
    /* 説明文字裏的案例庫鏈接獨佔一行，避免與文字粘連 */
    .section-head p .text-link { margin-top: 10px; font-size: 13.5px; }

    /* 統一的區塊垂直間距（補齊原樣式中斷的規則）*/
    .problem-section { padding: 48px 0 52px; }
    .service-section { padding: 48px 0 52px; }
    .case-section    { padding: 48px 0 52px; }
    .partner-section { padding: 46px 0 50px; }
}

/* ============================================================
   3. 首屏 Hero
   ============================================================ */
@media (max-width: 760px) {
    .hero-v3 {
        min-height: 0;
        padding: 84px 0 42px;
        /* 收緊裝飾圓環，避免小屏上出現大塊空白 */
        background: radial-gradient(circle at 92% 8%, rgba(0, 112, 242, .12), transparent 26%),
                    linear-gradient(160deg, #ffffff 0%, #f7f6fe 55%, #eeecfd 100%);
    }
    .hero-v3::before { width: 380px; height: 380px; right: -150px; top: -180px; }

    .hero-v3__grid { grid-template-columns: 1fr; gap: 30px; }

    .hero-v3 h1 {
        max-width: 100%;
        margin-top: 16px;
        font-size: 34px;
        line-height: 1.14;
        letter-spacing: -.04em;
        /* 標題整體居中，兩行文字視覺重心對齊 */
        text-align: center;
    }

    .hero-v3__copy {
        max-width: 100%;
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.8;
        /* 與居中標題保持一致，視覺重心統一 */
        text-align: center;
    }

    /* 主次按鈕並排：短文案下橫向更緊湊，減少首屏高度 */
    .hero-v3__actions {
        margin-top: 22px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .hero-v3__actions .button {
        min-width: 0;
        min-height: 52px;
        padding-inline: 10px;
        font-size: 15px;
        border-radius: 10px;
        gap: 6px;
        white-space: nowrap;
    }
    .hero-v3__actions .button--ghost { background: rgba(255, 255, 255, .72); }

    /* 需求調整：移動端隱藏按鈕內的箭頭符號（PC 端保留） */
    .hero-v3__actions .button > span { display: none; }

    /* 三項數據：緊湊三等分，卡片化以增強質感 */
    .hero-v3__proof {
        margin-top: 24px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        list-style: none;
    }
    .hero-v3__proof li {
        min-width: 0;
        padding: 14px 6px;
        text-align: center;
        border: 1px solid rgba(122, 79, 242, .12);
        border-radius: 12px;
        background: rgba(255, 255, 255, .66);
    }
    .hero-v3__proof strong { font-size: 23px; letter-spacing: -.045em; }
    .hero-v3__proof span { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.35; }

    /* 需求調整：移動端隱藏服務流程膠囊組（PRD/開發/測試/交付/運維），PC 端保持不變 */
    .hero-v3__trust { display: none; }
}

/* ============================================================
   4. 首屏案例輪播（Hero Showcase）
   ============================================================ */
@media (max-width: 760px) {
    .hero-showcase { gap: 0; }

    .hero-showcase__frame {
        border-radius: 16px 16px 0 0;
        box-shadow: 0 18px 44px -24px rgba(24, 16, 70, .34);
    }

    /* 圖片比例略收緊，讓封面 UI 細節在窄屏上更易辨識 */
    .hero-showcase__stage { aspect-ratio: 1.62 / 1; border-radius: 16px 16px 0 0; }
    .hero-showcase__slide img { object-fit: cover; }

    /* 資訊卡：懸浮幅度減小，減少對封面內容的遮擋 */
    .hero-showcase__panel {
        margin: -24px 8px 8px;
        padding: 14px 15px 12px;
        border-radius: 14px;
        box-shadow: 0 16px 38px -16px rgba(24, 16, 70, .26);
    }
    .hero-showcase__badge { margin-bottom: 8px; padding: 3px 9px; font-size: 10.5px; }
    .hero-showcase__text strong { font-size: 16px; line-height: 1.32; }
    .hero-showcase__bg { margin-top: 6px; font-size: 12.5px; line-height: 1.68; -webkit-line-clamp: 3; }

    /* 進入案例按鈕：移至面板內下方，避免壓在圖片上被裁切 */
    .hero-showcase__more {
        position: static;
        margin-top: 12px;
        align-self: flex-start;
        padding: 8px 14px;
        font-size: 12px;
        border-radius: 999px;
    }
    .hero-showcase__panel { display: flex; flex-wrap: wrap; }
    .hero-showcase__text { flex: 1 1 100%; }

    .hero-showcase__foot { gap: 10px; margin-top: 12px; padding-top: 11px; }
    .hero-showcase__count { font-size: 11px; }

    /* 分頁點：5 個灰色小圓點，當前項高亮為紫色實心圓 */
    .hero-showcase__pages {
        gap: 7px;
        justify-content: flex-start;
        min-width: 0;
    }
    .hero-showcase__dot {
        width: 7px;
        height: 7px;
        min-width: 7px;
        min-height: 7px;
        flex: none;
        border-radius: 50%;
        background: rgba(122, 79, 242, .26);
        transition: background .25s, transform .25s;
    }
    /* 當前項：紫色實心圓，保持等寬不再拉長成膠囊 */
    .hero-showcase__dot.is-active {
        width: 7px;
        min-width: 7px;
        border-radius: 50%;
        background: #7a4ff2;
        transform: scale(1.18);
        box-shadow: 0 0 0 3px rgba(122, 79, 242, .14);
    }

    .hero-showcase__arrows { gap: 8px; margin-left: auto; }
    .hero-showcase__arrow { width: 34px; height: 34px; font-size: 14px; border-radius: 50%; }
}

/* ============================================================
   5. 行業實踐滾動條
   ------------------------------------------------------------
   需求調整：移動端整塊隱藏（PC 端不受影響）
   ============================================================ */
@media (max-width: 760px) {
    .industry-rail { display: none; }
}


/* ============================================================
   6. 痛點區（六項）
   ------------------------------------------------------------
   需求調整：改為單卡片橫向滑動展示（一次一張）
   ============================================================ */
@media (max-width: 760px) {
    .problem-grid {
        display: flex;
        grid-template-columns: none;
        grid-auto-rows: auto;
        gap: 12px;
        /* 用 clip 包裹出血區，既能讓卡片貼邊/露邊，
           又不會撐破文檔寬度影響 fixed 定位的 header */
        width: 100%;
        padding: 2px 0 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    /* 讓卡片視覺上貼住 shell 左邊緣而不出現在佈局流裏 */
    .problem-grid::-webkit-scrollbar { display: none; }
    /* 原桌面端的橫向連線在滑動佈局下無意義 */
    .problem-grid::before { display: none; }

    .problem-card,
    .problem-card:nth-child(2),
    .problem-card:nth-child(5) {
        flex: 0 0 100%;
        min-height: 0;
        margin-top: 0;
        padding: 18px 18px 20px;
        border-radius: 14px;
        scroll-snap-align: start;
    }
    .problem-card::before {
        font-size: 22px;
        margin-bottom: 12px;
        color: rgba(122, 79, 242, .34);
    }
    .problem-card::after { top: 22px; bottom: 22px; }
    .problem-card span { gap: 7px; font-size: 11px; letter-spacing: .06em; }
    .problem-card span::before { width: 16px; }
    .problem-card h3 { margin-top: 13px; font-size: 18px; line-height: 1.42; }
    .problem-card p { margin-top: 10px; font-size: 13.5px; line-height: 1.8; }
}

/* 滑動進度提示條：位於區塊底部，寬度跟隨滾動位置 */
@media (max-width: 760px) {
    .problem-dots {
        margin-top: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
    }
    .problem-dots i {
        width: 6px;
        height: 6px;
        display: block;
        border-radius: 99px;
        background: rgba(122, 79, 242, .22);
        transition: width .3s cubic-bezier(.16, 1, .3, 1), background .3s;
    }
    .problem-dots i.is-active {
        width: 20px;
        background: #7a4ff2;
    }
}


/* ============================================================
   7. 服務能力（五種解決方案）· 移動端全新設計
   ------------------------------------------------------------
   原橫排 tab 在窄屏被擠壓，導致標題逐字豎排。
   改為：頂部一行緊湊編號選擇器（橫向滑動）
        + 下方整塊內容卡片（單列、通欄、層級清晰）
   ============================================================ */
@media (max-width: 760px) {
    .capability-explorer {
        min-height: 0;
        width: 100%;
        max-width: 100%;
        /* 使用 !important 覆蓋主樣式表中的 1024px 兩列布局，
           該斷點規則與本文件選擇器同特異性，必須顯式壓制 */
        grid-template-columns: minmax(0, 1fr) !important;
        display: grid !important;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 22px 52px -28px rgba(32, 29, 58, .3);
    }
    /* 子項允許收縮，避免內容撐破單列 */
    .capability-explorer__nav,
    .capability-explorer__stage { min-width: 0 !important; width: 100%; }

    /* --- 頂部：編號選擇器 --- */
    .capability-explorer__nav {
        padding: 12px 12px 13px;
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .capability-explorer__nav::-webkit-scrollbar { display: none; }

    /* 改為純編號膠囊，橫向排布不再擠壓文字 */
    .capability-tab {
        min-width: 0;
        flex: 0 0 auto;
        padding: 0 15px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        grid-template-columns: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, .1);
        border: 1px solid rgba(255, 255, 255, .16);
        scroll-snap-align: center;
    }
    /* 名稱與英文副標題在移動端隱藏，當前項名稱以下方大標題呈現 */
    .capability-tab strong,
    .capability-tab small { display: none; }
    .capability-tab span {
        grid-row: auto;
        align-self: auto;
        font-size: 12px;
        letter-spacing: .06em;
        color: rgba(255, 255, 255, .72);
    }
    .capability-tab.is-active {
        transform: none;
        background: #fff;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    }
    .capability-tab.is-active span { color: #17124f; }
    .capability-tab.is-active::after { display: none; }

    /* --- 下方：內容大卡片 --- */
    .capability-explorer__stage {
        background: linear-gradient(150deg, #ffffff 0%, #f4f8fd 100%);
    }
    .capability-explorer__stage::before { display: none; }

    .capability-panel {
        min-height: 0;
        padding: 20px 18px 22px;
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        background: transparent;
    }

    /* 頂部資訊條：需求調整去掉英文，改為
       「小號編號 + 方案名」一行式標籤，標題層級整體放大 */
    .capability-panel__meta {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 4px;
        flex-wrap: nowrap;
    }
    /* 編號：純數字，作為視覺引導 */
    .capability-panel__meta span {
        padding: 0;
        border-radius: 0;
        background: none;
        color: #7a4ff2;
        font-family: var(--font-en);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .04em;
        line-height: 1;
        white-space: nowrap;
    }
    /* 編號與方案名之間的分隔豎線 */
    .capability-panel__meta span::after {
        content: "";
        width: 1px;
        height: 12px;
        margin-left: 9px;
        display: inline-block;
        vertical-align: -2px;
        background: rgba(122, 79, 242, .3);
    }
    /* 方案名作為主標籤，完整顯示不截斷 */
    .capability-panel__name {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.3;
    }

    /* 標題放大為視覺主層級，與上方標籤形成明確對比 */
    .capability-panel h3 {
        margin-top: 10px;
        font-size: 24px;
        line-height: 1.3;
        letter-spacing: -.035em;
    }
    .capability-panel__copy > p {
        margin-top: 13px;
        font-size: 14px;
        line-height: 1.82;
    }

    /* 能力標籤：左側豎條色帶，強化層級 */
    .capability-panel ul {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 0;
        border-radius: 12px;
        overflow: hidden;
    }
    .capability-panel li {
        padding: 10px 14px 10px 30px;
        position: relative;
        border: 0;
        border-radius: 0;
        background: rgba(122, 79, 242, .045);
        font-size: 13px;
        font-weight: 600;
        color: #37335e;
    }
    .capability-panel li + li { border-top: 1px solid rgba(122, 79, 242, .09); }
    .capability-panel li::before {
        content: "";
        width: 6px;
        height: 6px;
        position: absolute;
        left: 14px;
        top: 50%;
        margin-top: -3px;
        border-radius: 50%;
        background: linear-gradient(135deg, #7a4ff2, #12c2f4);
    }

    /* 裝飾性圓形視覺在窄屏隱藏，資訊密度優先 */
    .capability-visual { display: none; }
}


/* ============================================================
   8. 精選案例輪播
   ============================================================ */
@media (max-width: 760px) {
    /* 輪播卡片通欄 100%
       左右留白一致性説明：
       - 左側留白由 shell 提供（視口 → 卡片左邊 = 14px）
       - 若 track 設 padding-right，卡片右邊會再內縮，導致右側 > 左側
       因此這裏 padding 歸零，讓卡片左右都貼合 shell 邊界，
       視覺上左右留白完全一致（各 14px）。
       滑動暗示改由卡片圓角 + 下方箭頭承擔。 */
    .case-carousel {
        width: 100%;
        overflow: clip;
    }
    .case-carousel__track {
        gap: 0;
        padding-right: 0;
    }
    .case-carousel__track .case-card { flex: 0 0 100%; }

    .case-card__media { aspect-ratio: 1.5 / 1; border-radius: 10px; }
    .case-card__meta { inset: auto 12px 12px; }
    .case-card__meta span { min-height: 30px; padding: 0 11px; font-size: 11px; }
    .case-card__link { padding-bottom: 16px; }
    .case-card h3 { margin-top: 13px; font-size: 18px; line-height: 1.35; }
    .case-card p { margin-top: 8px; font-size: 13px; line-height: 1.7; }
    .case-card__action { padding-top: 12px; font-size: 12.5px; }

    /* 輪播控件精簡為狀態 + 箭頭 */
    .case-carousel__controls { margin-top: 16px; }
    .case-carousel__status { font-size: 11px; }
    .case-carousel__controls > div { gap: 10px; }
    .case-carousel__controls button { width: 44px; height: 44px; }
}

/* ============================================================
   9. 合作伙伴走馬燈
   ============================================================ */
@media (max-width: 760px) {
    .partner-section .section-head { margin-bottom: 30px; }
    .partner-marquee {
        gap: 10px;
        /* 兩端淡出，讓"無限滾動"更可感知 */
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }
    .partner-marquee__row,
    .partner-marquee__group { gap: 10px; }
    .partner-tile { width: 132px; height: 60px; padding: 10px 12px; border-radius: 8px; }
}

/* ============================================================
   10. 頁腳與諮詢彈窗
   ============================================================ */
@media (max-width: 760px) {
    .site-footer__cta {
        min-height: 0;
        padding: 38px 0 30px;
        grid-template-columns: 1fr;
        gap: 26px;
        align-items: start;
    }
    .site-footer__cta h2 { margin-top: 16px; font-size: 27px; line-height: 1.16; letter-spacing: -.035em; }
    .site-footer__cta-button {
        justify-self: stretch;
        margin: 0;
        min-height: 52px;
        border-radius: 10px;
        font-size: 15px;
    }

    .site-footer__top { padding-top: 26px; grid-template-columns: 1fr; gap: 24px; }
    .site-footer__brand img { height: 34px; width: auto; }
    .site-footer__brand p { margin-top: 13px; font-size: 12.5px; line-height: 1.75; }

    /* 聯繫方式：手機號與微信並排，郵箱獨佔整行 */
    .site-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .footer-contact { min-height: 74px; padding: 13px 14px; border-radius: 10px; }
    .footer-contact:last-child { grid-column: 1 / -1; }
    .footer-contact span { font-size: 11px; }
    .footer-contact strong { margin-top: 7px; font-size: 14.5px; word-break: break-all; }

    .site-footer__bottom {
        margin-top: 22px;
        padding-top: 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 10.5px;
        line-height: 1.6;
    }

    /* 諮詢彈窗：接近全屏、底部安全區留白 */
    .contact-dialog {
        width: calc(100% - 20px);
        max-width: 460px;
        max-height: calc(100dvh - 20px);
        border-radius: 18px;
    }
    .contact-dialog__inner { padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
    .dialog-close { width: 34px; height: 34px; font-size: 19px; }
    .contact-dialog h2 { max-width: 100%; font-size: 26px; line-height: 1.16; }
    .contact-dialog > div > p { font-size: 14px; line-height: 1.7; }
    .contact-options { margin-top: 20px; grid-template-columns: 1fr; gap: 9px; }
    .contact-option { min-height: 74px; padding: 14px 16px; border-radius: 10px; }
    .contact-option strong { margin-top: 8px; font-size: 15px; }

    .contact-retain h2 { font-size: 21px; line-height: 1.24; }
    .contact-retain > p { font-size: 13.5px; line-height: 1.6; }
    .contact-retain__form { gap: 10px; margin-top: 14px; }
    .contact-retain__actions .button { min-height: 50px; font-size: 15px; }
}

/* ============================================================
   11. 案例庫頁
   ============================================================ */
@media (max-width: 760px) {
    .page-hero { min-height: 0; padding: 100px 0 52px; }
    .page-hero--compact { padding: 98px 0 46px; }
    .page-hero::after { right: -10px; bottom: -14px; font-size: 96px; }
    .page-hero h1,
    .page-hero--compact h1 { margin-top: 16px; font-size: 28px; line-height: 1.16; letter-spacing: -.035em; }
    .page-hero p,
    .page-hero--compact p { margin-top: 16px; font-size: 14.5px; line-height: 1.78; }

    .library-section { padding: 40px 0 54px; }
    .library-section--top { padding-top: 84px; }
    .library-toolbar { margin-bottom: 18px; }

    /* 篩選條：橫向滑動 + 兩端漸隱提示
       注意：不能用負 margin 製造出血，否則會撐破文檔寬度，
       導致 position:fixed 的 header 按更寬的文檔佈局、
       右側漢堡按鈕被裁掉（曾出現「導航靠右收了」）。 */
    .filter-list {
        width: 100%;
        padding: 0 0 10px;
        margin: 0;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
        mask-image: linear-gradient(90deg, #000 86%, transparent);
    }
    .filter-list::-webkit-scrollbar { display: none; }
    .filter-chip { min-height: 40px; padding: 0 15px; flex: 0 0 auto; font-size: 12.5px; }

    /* 案例列表：單列大卡，封面與文字都更易讀 */
    .case-grid,
    .library-section .case-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 22px;
    }
    .library-section .case-card__link { padding-bottom: 16px; }
    .library-section .case-card__media { aspect-ratio: 1.5 / 1; border-radius: 10px; }
    .library-section .case-card__meta { inset: auto 12px 12px; }
    .library-section .case-card__meta span { min-height: 28px; padding: 0 10px; font-size: 10.5px; }
    .library-section .case-card h3 { margin-top: 12px; font-size: 17.5px; line-height: 1.38; }
    .library-section .case-card p {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.72;
        min-height: 0;
        -webkit-line-clamp: 3;
    }
    .library-section .case-card__action { padding-top: 14px; font-size: 12.5px; }
    .data-message { padding: 36px 16px; }
}

/* ============================================================
   12. 案例詳情頁
   ============================================================ */
@media (max-width: 760px) {
    .detail-hero { min-height: 0; padding: 88px 0 40px; }
    .detail-hero__grid { grid-template-columns: 1fr; gap: 22px; }
    .detail-hero__meta { margin-bottom: 20px; gap: 12px; }
    .back-link { font-size: 12.5px; }
    .detail-industry { min-height: 32px; padding-inline: 12px; font-size: 10.5px; }
    .detail-hero h1 { margin-top: 14px; font-size: 29px; line-height: 1.12; letter-spacing: -.035em; }
    .detail-summary { margin-top: 16px; font-size: 14.5px; line-height: 1.8; }
    .detail-hero__note { margin-top: 20px; font-size: 11.5px; }

    .detail-cover-wrap { min-height: 0; padding: 8px; border-radius: 14px; }
    .detail-cover { min-height: 0; height: auto; aspect-ratio: 1.42 / 1; border-radius: 10px; }
    .detail-cover__label { min-width: 140px; left: 16px; bottom: 16px; padding: 9px 11px; border-radius: 10px; }
    .detail-cover__label strong { font-size: 13px; }

    .detail-results { padding: 42px 0 44px; }
    .detail-results__head { grid-template-columns: 1fr; gap: 14px; }
    .detail-results__head h2 { margin-top: 11px; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
    .detail-results__head > p { justify-self: start; font-size: 14px; line-height: 1.78; }

    /* 指標卡重新設計（移動端）：
       桌面端為「序號 / 大數字 / 描述 / 進度條」四層豎排，
       窄屏上縱向拉得過長（每張約 252px）。
       改為左右兩欄，卡片高度壓到約 100px：
         左欄（窄）：序號 + 大數值 + 進度條
         右欄（寬）：指標描述，垂直居中
       頂部色條改為左側豎條，整列視覺連貫。 */
    .detail-metrics {
        margin-top: 20px;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .detail-metric {
        min-height: 0;
        padding: 15px 16px;
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 16px;
        border-radius: 14px;
        border-left: 3px solid var(--metric-accent);
        border-top: 1px solid rgba(122, 79, 242, .13);
    }
    .detail-metric::before { display: none; }

    /* 左欄容器：JS 把序號/數值/進度條收進這裏 */
    .detail-metric__main {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 0;
    }

    /* 序號 span 與圓點在移動端被 JS 移除，此處兜底隱藏 */
    .detail-metric__top { display: none; }

    .detail-metric__result { align-self: auto; }
    .detail-metric__result strong {
        display: block;
        font-size: 31px;
        line-height: 1;
        letter-spacing: -.05em;
        color: #17124f;
    }
    /* 描述已由 JS 移到右欄，原位置隱藏 */
    .detail-metric__result p { display: none; }

    .detail-metric__track {
        height: 5px;
        margin-top: 0;
    }

    /* 右欄：指標描述，垂直居中對齊左欄數值 */
    .detail-metric__copy {
        min-width: 0;
        align-self: center;
    }
    .detail-metric__copy p {
        margin: 0;
        color: #332e58;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        text-wrap: balance;
    }

    .detail-content { padding: 42px 0 48px; }
    .detail-background__title h2 { margin-top: 11px; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
    .detail-background__copy {
        min-height: 0;
        margin-top: 20px;
        padding: 20px 16px 22px 28px;
        border-left-width: 4px;
        border-radius: 0 12px 12px 0;
    }
    .detail-background__copy::before { left: 8px; top: 12px; font-size: 40px; }
    .detail-background__copy::after { right: 8px; font-size: 34px; }
    .detail-background__copy p { font-size: 14px; line-height: 1.85; }

    .detail-challenge-section,
    .detail-practice { margin-top: 40px; }

    /* 挑戰-對照卡：完全重設計
       原佈局：左右兩個大卡 + 中間圓形箭頭。
       窄屏堆疊後變成「挑戰/響應/挑戰/響應」四段，讀起來割裂。
       新佈局：每組合併為一張卡 —— 頂部「業務挑戰」標籤 + 挑戰正文，
       中間一條帶箭頭的分隔行，下方淡紫底的「系統響應」+ 響應正文。
       標籤去掉數字（由 mobile.js 處理）。 */
    .challenge-list {
        margin-top: 20px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .challenge-row {
        min-height: 0;
        display: block;
        padding: 0;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(122, 79, 242, .13);
    }
    /* 挑戰區 */
    .challenge-row > div:first-child {
        min-height: 0;
        padding: 16px 16px 14px;
        display: block;
        background: #fff;
    }
    /* 標籤：內聯貼合文字，不被 flex 拉伸通欄
       注意：主樣式 .challenge-row > div 是 display:flex，
       span 作為 flex 子項預設 stretch，需顯式 align-self:flex-start */
    .challenge-row span {
        display: inline-block;
        align-self: flex-start;
        width: auto;
        max-width: 100%;
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(214, 74, 74, .09);
        color: #c9524f;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .02em;
    }
    .challenge-row p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.72;
        color: var(--ink);
    }

    /* 中間分隔行：取代圓形箭頭，改為「↓ 系統方案」文字條 */
    .challenge-row > i {
        width: auto;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin: 0;
        padding: 0 16px;
        border-radius: 0;
        background: linear-gradient(90deg,
            rgba(122, 79, 242, .04) 0%,
            rgba(122, 79, 242, .13) 50%,
            rgba(122, 79, 242, .04) 100%);
        color: #6b4bd8;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .06em;
        box-shadow: none;
        transform: none;
        font-style: normal;
    }
    /* 兩側裝飾短線，中間是文字（由 JS 寫入）*/
    .challenge-row > i::before,
    .challenge-row > i::after {
        content: "";
        width: 16px;
        height: 1px;
        background: rgba(122, 79, 242, .34);
    }

    /* 響應區：淡紫底，與挑戰區形成層次 */
    .challenge-row > div:last-child,
    .challenge-row__answer {
        min-height: 0;
        padding: 16px;
        display: block;
        background: linear-gradient(150deg, #f4f1ff 0%, #fbfaff 100%);
    }
    .challenge-row__answer span {
        background: rgba(122, 79, 242, .12);
        color: #5c3fd6;
    }
    .challenge-row__answer p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.75;
        color: #332e58;
    }
    .detail-section-head h2 { margin-top: 11px; font-size: 25px; line-height: 1.22; letter-spacing: -.035em; }
    /* challenge-row 系列規則已在上方「挑戰-對照卡」段落統一定義，此處不再重複 */

    .detail-sections { margin-top: 20px; gap: 12px; }
    .detail-section { min-height: 0; padding: 8px; grid-template-columns: 1fr; gap: 0; border-radius: 14px; }
    .detail-section:nth-child(even) > div,
    .detail-section:nth-child(even) img { order: initial; }
    .detail-section > div { padding: 17px 15px 19px; }
    /* 序號 span 被 JS 移除，標題直接頂到卡片頂部，取消多餘 margin */
    .detail-section h2 { margin-top: 0; font-size: 23px; line-height: 1.24; letter-spacing: -.035em; }
    .detail-section p { margin-top: 12px; font-size: 13.5px; line-height: 1.78; }
    .detail-section img { min-height: 0; height: auto; aspect-ratio: 1.42 / 1; border-radius: 10px; }
}

/* ============================================================
   13. 關於我們頁
   ============================================================ */
@media (max-width: 760px) {
    /* 關於頁區塊間距（桌面端 118–130px 在窄屏過大，這裏統一收緊） */
    .manifesto { padding: 48px 0 52px; }
    .values-section { padding: 48px 0 52px; }
    .timeline-section { padding: 48px 0 54px; }

    .manifesto__grid { grid-template-columns: 1fr; gap: 10px; }
    .manifesto__statement { min-height: 0; padding: 22px 20px 24px; border-radius: 14px; }
    .manifesto__lead { font-size: 24px; line-height: 1.18; letter-spacing: -.035em; }
    .manifesto__statement > p { margin-top: 14px; font-size: 13.5px; line-height: 1.72; }

    .manifesto__copy { gap: 8px; }
    .manifesto__copy article { padding: 16px 16px 18px; border-radius: 13px; }
    .manifesto__copy article::after { top: 16px; bottom: 16px; }
    .manifesto__copy p { margin-top: 8px; font-size: 13px; line-height: 1.75; }

    .about-numbers { margin-top: 10px; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .about-number,
    .about-number:nth-child(2),
    .about-number:nth-child(4) {
        min-height: 96px;
        margin: 0;
        padding: 14px;
        transform: none;
        border-radius: 13px;
    }
    .about-number strong { font-size: 30px; letter-spacing: -.04em; }
    .about-number span { margin-top: 5px; font-size: 10.5px; }

    .values-layout { grid-template-columns: 1fr; gap: 22px; }
    .values-intro h2 { margin-top: 15px; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
    .values-intro p { margin-top: 13px; font-size: 14px; line-height: 1.75; }
    .values-grid { grid-template-columns: 1fr; gap: 8px; }
    .value-card {
        min-height: 0;
        padding: 17px 16px;
        grid-template-columns: 36px 1fr;
        gap: 5px 13px;
        align-items: start;
        border-radius: 13px;
    }
    .value-card span { width: 36px; height: 36px; font-size: 11.5px; }
    .value-card h3 { font-size: 17.5px; }
    .value-card p { margin-top: 7px; font-size: 12.5px; line-height: 1.7; }

    .growth-layout { grid-template-columns: 1fr; gap: 26px; }
    .growth-rings { max-width: 280px; margin-inline: auto; }
    .growth-rings__core { width: 80px; height: 80px; }
    .growth-rings__core strong { font-size: 19px; }
    .growth-year { padding: 5px 8px; font-size: 10px; }
    .growth-story h2 { margin-top: 14px; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
    .growth-story__intro { margin-top: 12px; font-size: 14px; line-height: 1.75; }

    .timeline { margin-top: 20px; grid-template-columns: 1fr; }
    .timeline::before { left: 26px; }
    .timeline article,
    .timeline article + article { padding: 0 0 12px; grid-template-columns: 52px 1fr; gap: 12px; border: 0; }
    .timeline time { width: 52px; font-size: 10.5px; }
    .timeline time::after { left: 21px; }
    .timeline article > div { padding-bottom: 12px; }
    .timeline h3 { font-size: 16px; }
    .timeline p { margin-top: 5px; font-size: 12.5px; line-height: 1.7; }
}

/* ============================================================
   14. 平板：≤1024px 的兩欄收斂
   ============================================================ */
@media (max-width: 1024px) {
    .hero-v3__grid { grid-template-columns: 1fr; gap: 48px; }
    .hero-v3 h1 { font-size: clamp(40px, 6.4vw, 56px); }
    .hero-v3__copy { font-size: 16px; }
    .problem-grid { grid-template-columns: repeat(2, 1fr); }
    .problem-grid::before { display: none; }
    .capability-panel { padding: 40px 34px; grid-template-columns: 1fr; gap: 30px; }
    .capability-explorer { grid-template-columns: 288px minmax(0, 1fr); }
    .site-footer__top { grid-template-columns: 1fr; }
}

/* ============================================================
   15. 小屏手機 ≤430px 精修
   ============================================================ */
@media (max-width: 430px) {
    .shell { width: calc(100% - 28px); }

    .hero-v3 { padding: 84px 0 42px; }
    .hero-v3 h1 { font-size: 30px; line-height: 1.16; }
    .hero-v3__copy { font-size: 14.5px; line-height: 1.78; }
    .hero-v3__actions .button { min-height: 50px; font-size: 14.5px; }

    /* 僅 360px 以下並排會明顯擁擠，回退為縱向堆疊 */
    @media (max-width: 359px) {
        .hero-v3__actions { grid-template-columns: 1fr; }
        .hero-v3__actions .button { padding-inline: 18px; font-size: 15px; }
    }

    .hero-v3__proof li { padding: 13px 4px; }
    .hero-v3__proof strong { font-size: 21px; }
    .hero-v3__proof span { font-size: 10px; }

    .hero-showcase__stage { aspect-ratio: 1.5 / 1; }
    .hero-showcase__text strong { font-size: 15px; }
    .hero-showcase__bg { font-size: 12px; -webkit-line-clamp: 3; }

    .section-head h2 { font-size: 26px; }
    .section-head p { font-size: 14px; }

    .problem-card,
    .problem-card:nth-child(2),
    .problem-card:nth-child(5) { padding: 18px 17px 20px; }
    .problem-card h3 { font-size: 17px; }
    .problem-card p { font-size: 13px; }

    .capability-panel h3 { font-size: 20px; }
    .capability-panel__copy > p { font-size: 13.5px; }

    .case-carousel__track .case-card { flex: 0 0 100%; }
    .case-card h3 { font-size: 18px; }
    .case-card p,
    .library-section .case-card p { font-size: 12.5px; }

    .page-hero h1,
    .page-hero--compact h1,
    .detail-hero h1 { font-size: 26px; }

    .site-footer__cta h2,
    .detail-results__head h2,
    .detail-background__title h2,
    .values-intro h2,
    .growth-story h2 { font-size: 25px; }

    .detail-section-head h2 { font-size: 24px; }
    .detail-section h2 { font-size: 22px; }
    /* 左欄固定 100px，字號需收窄以免「100%」等長值溢出 */
    .detail-metric { grid-template-columns: 92px minmax(0, 1fr); gap: 13px; }
    .detail-metric__result strong { font-size: 27px; }
    .detail-metric__copy p { font-size: 13px; }
}

/* ============================================================
   16. 極窄屏 ≤360px 兜底
   ============================================================ */
@media (max-width: 360px) {
    .shell { width: calc(100% - 24px); }

    .site-header { height: 58px; }
    .brand img { height: 27px; }
    .nav-toggle { width: 40px; height: 40px; }

    .hero-v3 { padding: 78px 0 40px; }
    .hero-v3 h1 { font-size: 27px; }
    .hero-v3__proof strong { font-size: 19px; }
    .hero-v3__proof span { font-size: 9.5px; }

    .hero-showcase__stage { aspect-ratio: 1.42 / 1; }
    .hero-showcase__arrow { width: 32px; height: 32px; font-size: 13px; }
    .hero-showcase__pages { display: none; }

    .section-head h2 { font-size: 24px; }
    .problem-card h3 { font-size: 16.5px; }
    .problem-card p { font-size: 12.5px; line-height: 1.78; }

    .capability-panel { padding: 22px 16px 24px; }
    .capability-panel h3 { font-size: 19px; }

    .case-carousel__track .case-card,
    .case-grid,
    .library-section .case-grid,
    .problem-grid,
    .values-grid,
    .about-numbers { grid-template-columns: 1fr; }

    .site-footer__links { grid-template-columns: 1fr; }
    .footer-contact:last-child { grid-column: auto; }

    .detail-metric { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 14px; }
    .detail-metric__result strong { font-size: 25px; }
    .detail-metric__copy p { font-size: 12.5px; }
}

/* ============================================================
   17. 橫屏矮屏（手機橫放）
   ============================================================ */
@media (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
    .hero-v3 { padding: 78px 0 34px; }
    .hero-v3 h1 { font-size: 28px; }
    .hero-v3__actions { margin-top: 18px; }
    .hero-v3__proof { margin-top: 20px; }
    .site-header { height: 56px; }
}

/* ============================================================
   語言切換分段控件（移動端抽屜內全寬）—— max-width:1024px 內生效
   ============================================================ */
@media (max-width: 1024px) {
    .site-nav .lang-seg { display: flex; width: calc(100% - 16px); margin: 14px 8px 0; border: 1px solid rgba(19, 21, 26, .1); border-radius: 11px; overflow: hidden; background: #fff; }
    .site-nav .lang-seg a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0; font-size: 14.5px; font-weight: 700; color: rgba(19, 21, 26, .65); text-decoration: none; }
    .site-nav .lang-seg a + a { border-left: 1px solid rgba(19, 21, 26, .08); }
    .site-nav .lang-seg a.on { background: rgba(122, 79, 242, .1); color: #4f34d8; box-shadow: none; }
    .site-nav .lang-seg + .button { margin-top: 10px; }
}

/* ============================================================
   語言切換分段控件（移動端抽屜內全寬）—— max-width:1024px 內生效
   ============================================================ */
@media (max-width: 1024px) {
    .site-nav .lang-seg { display: flex; width: calc(100% - 16px); margin: 14px 8px 0; border: 1px solid rgba(19, 21, 26, .1); border-radius: 11px; overflow: hidden; background: #fff; }
    .site-nav .lang-seg a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0; font-size: 14.5px; font-weight: 700; color: rgba(19, 21, 26, .65); text-decoration: none; }
    .site-nav .lang-seg a + a { border-left: 1px solid rgba(19, 21, 26, .08); }
    .site-nav .lang-seg a.on { background: rgba(122, 79, 242, .1); color: #4f34d8; box-shadow: none; }
    .site-nav .lang-seg + .button { margin-top: 10px; }
}