@charset "UTF-8";

/* =========================================================
   /tw/zh/commercial/products/ironwolf-pro 專用樣式。

   共用部分不在這裡：
   - header（.commercial-dark-nav）：commercial-assets/css/style.css
   - footer（.df-footer）：resources/views/front/partials/footer-dark.blade.php 自帶 <style>
   這支只放本頁內容區（.ironwolf-page 之下）的樣式。

   斷點沿用 commercial 系列：1280px（小桌機／平板）、768px（手機）。
   字級為設計稿指定的固定 px（桌機／手機兩組），不用 clamp。
   ========================================================= */

/* ⚠ 這裡務必用 overflow-x: clip，不可用 hidden。
   overflow-x: hidden 會讓 overflow-y 由 visible 被計算成 auto，使 .ironwolf-page 變成一個
   可捲動容器；AOS 的 fade-up 進場前是 translate3d(0,100px,0)，位移量若超出區塊的
   padding-bottom，就會在 .ironwolf-page 內部產生一段「幽靈捲動區」。macOS 的觸控板捲動有
   scroll latching（手勢會鎖在最先捲到的容器上，不會中途接力給頁面），於是使用者往下滑
   只滑得動那一小段，要等 AOS 播完位移歸零、幽靈區消失後才滑得動整頁。
   clip 只裁切、不建立捲動容器，overflow-y 維持 visible，就沒有這個問題。 */
.ironwolf-page {
    font-family:
        "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    background-color: #000;
    color: #fff;
    overflow-x: clip;
}

/* 內容區共用容器。
   max-width 1520 + padding 40：1920 視窗時內容起點落在 240px（＝設計稿的文字左緣）。 */
.ironwolf-container {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 手機才出現的換行（桌機隱藏），用法同 commercial 的 .commercial-mbr */
.ironwolf-mbr {
    display: none;
}

/* 只在桌機強制斷行（手機隱藏、改為依寬度自然斷行） */
.ironwolf-dbr {
    display: inline;
}

/* =========================================================
   Hero：背景 banner.webp 滿版 cover ＋黑色遮罩，
   桌機文左、產品圖壓在背景光束中心上（右側留白），手機改為圖上文下並置中。
   ========================================================= */
.ironwolf-hero {
    position: relative;
    overflow: hidden;
    background-color: #000;
    /* 產品圖 450 + 上下 100 ＝ 650，與 banner.webp 在 1920 視窗的自然高度（664）相當 */
    padding: 100px 0;
}

.ironwolf-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* <picture> 只是桌機／手機換圖用的容器，預設 display:inline、高度 auto，
   會讓下面 img 的 height:100% 算不出值（cover 破功），所以要自己撐滿 .ironwolf-hero-bg */
.ironwolf-hero-bg picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* object-position 58%：視窗比背景圖更窄時左右會被裁切，把光束中心（原圖約 58%）留在畫面內 */
.ironwolf-hero-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
}

/* 黑色遮罩：壓暗背景，讓白字在綠色光束上仍可讀 */
.ironwolf-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.ironwolf-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

.ironwolf-hero-text {
    flex: 0 1 600px;
    min-width: 0;
}

/* 產品圖不貼齊右緣：往左靠在背景光束上（1920 視窗時圖片中心約在視窗 62%），右側留白 */
.ironwolf-hero-media {
    flex: 0 0 450px;
    margin-left: 9%;
}

.ironwolf-hero-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== Hero 文字 ===== */
.ironwolf-hero-eyebrow {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: #fff;
}

.ironwolf-hero-title {
    margin: 0 0 20px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #fff;
}

.ironwolf-hero-slogan {
    margin: 0 0 32px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #fc606c;
}

.ironwolf-hero-lead {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #fff;
}

.ironwolf-hero-desc {
    margin: 0 0 28px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: #fff;
}

/* ===== Hero 按鈕 ===== */
.ironwolf-hero-btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.ironwolf-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 8px 18px;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    transition:
        background 0.2s,
        border-color 0.2s;
}

/* 觀看產品介紹：白框透明底 */
.ironwolf-hero-btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.ironwolf-hero-btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* 立即洽詢報價：綠底、深色字與深色右箭頭，灰框 */
.ironwolf-hero-btn-quote {
    border: 1px solid #6d6d6d;
    background: #6ebe49;
    color: #191919;
}

.ironwolf-hero-btn-quote:hover {
    background: #7fce5a;
}

/* right-arrow.svg 原生 20×20（黑色箭頭），維持 1:1 不縮放 */
.ironwolf-hero-btn-icon {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* =========================================================
   第二區塊：四大特色（future1~4.svg）
   桌機四欄並排、文字左對齊；手機單欄置中。
   icon 為原生 100×100 的 svg，維持 1:1 不縮放（本身不帶框線）。
   ========================================================= */
.ironwolf-future {
    background-color: #000;
    padding: 100px 0;
}

.ironwolf-future-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.ironwolf-future-icon {
    display: block;
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
}

.ironwolf-future-title {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
}

.ironwolf-future-desc {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.05em;
    color: #b0b0b0;
}

/* =========================================================
   第三區塊：全方位智慧監控應用（section-1-bg／section-1-product）
   背景光帶為去背圖，直接疊在黑底上（不加遮罩），滿版寬、垂直置中。
   桌機產品圖左、文字右，整組水平置中；手機圖上文下。
   ========================================================= */
.ironwolf-section1 {
    position: relative;
    overflow: clip;
    background-color: #000;
    /* 產品圖原生 538 高 + 上下 90 ＝ 718，與設計稿的區塊高度相當 */
    padding: 90px 0;
}

/* 用 flex 置中而不是 translateY(-50%)：AOS 的 fade 在 .aos-animate 會把 transform 改寫成
   translateZ(0)，若用 transform 置中會在動畫結束時被清掉、圖片跳位。 */
.ironwolf-section1-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
}

.ironwolf-section1-bg-img {
    display: block;
    width: 100%;
    height: auto;
}

.ironwolf-section1-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 126px;
}

.ironwolf-section1-media {
    flex: 0 1 580px;
}

.ironwolf-section1-img {
    display: block;
    width: 100%;
    height: auto;
}

.ironwolf-section1-text {
    flex: 0 1 auto;
}

.ironwolf-section1-eyebrow {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #fff;
}

.ironwolf-section1-title {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
}

/* =========================================================
   第四區塊：支援智慧場域的關鍵影像工作負載（section-2-1~4.webp）
   頂端漸層分隔線 ＋ 置中標題 ＋ 四張卡片（桌機 2×2、手機單欄）。
   卡片文案區塊 #000000B8，比圖片窄並上移壓住圖片下緣。
   ========================================================= */
.ironwolf-section2 {
    background-color: #000;
    padding: 0 0 100px;
}

/* 分隔線：置中的綠色漸層，寬度為視窗的一半。進場由中央往兩側展開（見下方 ironwolf-line 自訂動畫） */
.ironwolf-divider {
    width: 50%;
    height: 11px;
    margin: 0 auto;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(220, 31, 46, 0.3) 53.37%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* AOS 自訂動畫：寬度 0 → 50%。
   AOS 2.3.1 的 duration／delay 是用 [data-aos][data-aos][data-aos-duration="..."] 這類
   attribute selector 給 transition-duration，對自訂名稱同樣有效；但 transition-property
   只有內建的 fade／zoom 等有設，自訂動畫要自己指定。 */
[data-aos="ironwolf-line"] {
    width: 0;
    transition-property: width;
}

[data-aos="ironwolf-line"].aos-animate {
    width: 50%;
}

.ironwolf-section2-title {
    margin: 0 0 56px;
    padding-top: 60px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: center;
    color: #fc606c;
}

/* 卡片以 gap 32 分兩欄：1920 視窗時每張正好 704px＝圖片原生寬 */
.ironwolf-section2-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px 32px;
}

.ironwolf-case-img {
    display: block;
    width: 100%;
    height: auto;
}

/* 文案區塊：半透明黑、比圖片窄（95%）並上移 28px 壓住圖片下緣。
   上移用負 margin 而非 transform，卡片底部才不會多出一段空白。 */
.ironwolf-case-body {
    position: relative;
    width: 95%;
    margin: -28px auto 0;
    padding: 32px 28px 40px;
    background: #000000b8;
}

.ironwolf-case-title {
    margin: 0 0 28px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
}

/* 標題下方的短綠線 */
.ironwolf-case-line {
    display: block;
    width: 48px;
    height: 4px;
    margin-bottom: 32px;
    background: #DC1F2E;
}

.ironwolf-case-desc {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: #fff;
}

/* =========================================================
   第五區塊：常見問題（展開／收合）
   標題列與答案區為兩個獨立的圓角框（綠框、深色底），答案區在收合時高度為 0。
   高度過渡需要實際 px，由頁面 JS 量 scrollHeight 後設定（見 blade 的 @section('scripts')）。
   ========================================================= */
.ironwolf-faq {
    background-color: #000;
    padding: 100px 0;
}

/* 區塊標題：置中、品牌綠，設計稿 40px（手機 32px） */
.ironwolf-faq-heading {
    margin: 0 0 56px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: center;
    color: #6ebe49;
}

.ironwolf-faq-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 標題列與答案框共用的框線與圓角 */
.ironwolf-faq-head,
.ironwolf-faq-panel-inner {
    border: 1px solid var(--color-border-brand, #6ebe49);
    border-radius: 12px;
}

/* 收合狀態：純黑底、不帶陰影 */
.ironwolf-faq-head {
    background: #000;
}

/* 展開狀態：標題列與答案框同一個底色（設計稿值）
   （第一層不透明 #191919 已完全覆蓋第二層，保留兩層是為了與設計稿數值對得起來） */
.ironwolf-faq-head[aria-expanded="true"],
.ironwolf-faq-panel-inner {
    background:
        linear-gradient(
            0deg,
            var(--color-bg-ground-variant, #191919),
            var(--color-bg-ground-variant, #191919)
        ),
        linear-gradient(
            0deg,
            var(--color-bg-bg-on-dark, rgba(110, 190, 73, 0.03)),
            var(--color-bg-bg-on-dark, rgba(110, 190, 73, 0.03))
        );
}

/* 展開時標題列與答案框相連：標題列下緣切齊（不圓角），由標題列的 border-bottom 當分隔線。
   陰影由標題列往下打在內文上緣：預設標題列先畫、會被答案框的不透明底色蓋掉，
   所以要 position + z-index 把標題列（連同它的陰影）疊到答案框之上。 */
.ironwolf-faq-head[aria-expanded="true"] {
    position: relative;
    z-index: 1;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0px 4px 12px 0px #6ebe498f;
}

/* 標題列本身是 <button>，清掉瀏覽器預設並拉成整列可點 */
.ironwolf-faq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 24px 28px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.ironwolf-faq-head:focus-visible {
    outline: 2px solid #6ebe49;
    outline-offset: 2px;
}

.ironwolf-faq-q {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
}

/* 加號／減號依展開狀態切換（兩張圖都先載，切換時不會閃一下）。
   兩張圖疊在同一格（absolute），容器高度才不會被兩張圖撐成兩倍。 */
.ironwolf-faq-icon {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
}

.ironwolf-faq-icon img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* ⚠ 切換用的選擇器要比 .ironwolf-faq-icon img（0,1,1）更明確，否則 display:block 會蓋掉隱藏 */
.ironwolf-faq-icon .ironwolf-faq-icon-minus {
    display: none;
}

.ironwolf-faq-head[aria-expanded="true"] .ironwolf-faq-icon-plus {
    display: none;
}

.ironwolf-faq-head[aria-expanded="true"] .ironwolf-faq-icon-minus {
    display: block;
}

/* 只負責裁切與高度過渡，邊框／內距都在 inner 上，收合時才不會露出一條框 */
.ironwolf-faq-panel {
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease;
}

/* 緊貼標題列：不留間距、上緣不圓角、去掉上框線（分隔線用標題列的 border-bottom）。
   陰影不放這裡，改由標題列往下打（見上方 .ironwolf-faq-head[aria-expanded="true"]）。 */
.ironwolf-faq-panel-inner {
    padding: 40px 48px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ironwolf-faq-a {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: #fff;
}

/* =========================================================
   第六區塊：合作案例輪播（section-3-bg／section-example.webp）
   背景光帶貼齊區塊上緣、鋪滿寬度；輪播容器由容器左緣延伸到視窗右緣，
   右側的下一張被視窗邊緣切掉。卡片桌機圖左文右、手機圖上文下。
   不自動播放、不 loop（Swiper 設定見 blade 的 @section('scripts')）。
   ========================================================= */
.ironwolf-section3 {
    position: relative;
    overflow: clip;
    background-color: #000;
    padding: 100px 0;
}

.ironwolf-section3-bg {
    position: absolute;
    /* 只貼上緣（不用 inset:0 撐滿），光帶原比例約 6:1，落在標題與卡片上緣一帶 */
    inset: 0 0 auto;
    z-index: 0;
}

.ironwolf-section3-bg-img {
    display: block;
    width: 100%;
    height: auto;
}

.ironwolf-section3-inner {
    position: relative;
    z-index: 1;
}

.ironwolf-partner-heading {
    margin: 0 0 56px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
}

/* 輪播容器：左緣沿用 .ironwolf-container，右緣用負 margin 推到視窗右緣
   （50% 是容器內寬的一半、50vw 是視窗的一半，差值正好等於容器右內緣到視窗右緣的距離）。
   Swiper 自己有 overflow:hidden，所以超出的下一張會被容器右緣＝視窗右緣切掉。
   ⚠ 100vw 含捲軸寬度，Windows 上右緣會多推約 15px（被 .ironwolf-page 的 overflow-x: clip 吃掉，
   不會產生水平捲軸），視覺上只是最後一張的裁切位置略微超出視窗，可接受。 */
.ironwolf-partner-swiper {
    margin-right: calc(50% - 50vw);
}

/* slidesPerView: 'auto' → 卡片寬度在這裡定。
   height: auto 讓 flex 的 stretch 生效，同一組卡片才會等高（Swiper 預設 slide 為 height:100%）。
   ⚠ 選擇器要壓過 swiper-bundle.css 的 .swiper-slide，所以三個斷點都寫成後代形式（特異性一致） */
.ironwolf-partner-swiper .ironwolf-partner-slide {
    width: 960px;
    max-width: calc(100vw - 80px);
    height: auto;
}

/* 無框線，改用綠色淡陰影 ＋ 背景毛玻璃（模糊卡片後方的背景光帶）。
   backdrop-filter 需要底色帶透明度才看得出效果，所以底色維持半透明黑。 */
.ironwolf-partner-card {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    height: 100%;
    padding: 28px 24px;
    background: #00000066;
    box-shadow: 0px 9px 54px -3px #6ebe4914;
    -webkit-backdrop-filter: blur(44px);
    backdrop-filter: blur(44px);
}

.ironwolf-partner-media {
    flex: 0 0 440px;
}

/* 固定 7:4 並 cover：之後接 API 時圖片尺寸不一，卡片高度才不會忽高忽低 */
.ironwolf-partner-img {
    display: block;
    width: 100%;
    aspect-ratio: 7 / 4;
    object-fit: cover;
}

.ironwolf-partner-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ironwolf-partner-title {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
}

.ironwolf-partner-desc {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.05em;
    color: #fff;
}

/* 箭頭：白色圓框（沿用 commercial 系列視覺），放在輪播下方的 flex 流內
   （position: static 覆蓋 Swiper 預設的絕對定位）。第一／最後一張時
   Swiper 會加 .swiper-button-disabled 自動變淡，不另外覆寫。 */
.ironwolf-partner-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 56px;
}

.ironwolf-partner-prev,
.ironwolf-partner-next {
    position: static;
    margin: 0;
    width: 48px;
    height: 48px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition:
        background 0.2s,
        border-color 0.2s;
}

.ironwolf-partner-prev::after,
.ironwolf-partner-next::after {
    font-size: 18px;
}

.ironwolf-partner-prev:hover,
.ironwolf-partner-next:hover {
    background: rgba(110, 190, 73, 0.25);
    border-color: #6ebe49;
}

/* =========================================================
   第七區塊：頁尾 CTA（section-4-bg／section-4-mobile-bg／section-4-product）
   背景是去背的黑色半圓＋綠色光暈，直接疊在黑底上（不加遮罩）；
   內容置中堆疊：產品圖 → 標題 → 內文 → 兩顆按鈕。
   按鈕沿用 Hero 的 .ironwolf-hero-btn 系列（設計相同，改樣式時兩處會一起變）。
   ========================================================= */
.ironwolf-section4 {
    position: relative;
    overflow: clip;
    background-color: #000;
    /* 下方留白特別多：留給背景半圓的下半部（1920 視窗時區塊高度≈背景圖自然高度 780） */
    padding: 48px 0 160px;
}

.ironwolf-section4-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* cover ＋底部對齊：視窗比背景圖更窄時半圓等比放大、左右被裁，
   不會在區塊裡露出沒有背景的空白 */
.ironwolf-section4-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.ironwolf-section4-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 去背產品圖（硬碟＋周圍軌道線與光點）。原生 960×790，硬碟本體只佔中間約 44% 寬，
   上下各有一段透明留白，所以視覺間距會比 margin-bottom 看起來更寬一些。 */
.ironwolf-cta-img {
    display: block;
    width: 420px;
    max-width: 100%;
    height: auto;
    margin-bottom: 40px;
}

.ironwolf-cta-title {
    margin: 0 0 20px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fff;
}

.ironwolf-cta-desc {
    margin: 0 0 32px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: #fff;
}

.ironwolf-cta-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* ===== 小桌機／平板：縮圖、縮小圖文間距，維持左右並排 ===== */
@media (max-width: 1280px) {
    /* 這一段的左右留白比 .ironwolf-container 預設多 80px（40 → 120）。
       只給 Hero～合作案例與常見問題，頁尾 CTA（.ironwolf-section4-inner）維持 40px。
       選擇器都刻意只用單一 class：這樣手機段的 .ironwolf-container { padding: 0 20px }
       才能靠「同特異性、寫在後面」把它蓋回 20px。 */
    .ironwolf-hero-inner,
    .ironwolf-future-grid,
    .ironwolf-section1-inner,
    .ironwolf-section2-inner,
    .ironwolf-section3-inner,
    .ironwolf-faq-list {
        padding-left: 120px;
        padding-right: 120px;
    }

    .ironwolf-hero {
        padding: 80px 0;
    }

    .ironwolf-hero-media {
        flex-basis: 340px;
        margin-left: 5%;
    }

    .ironwolf-hero-title {
        font-size: 40px;
    }

    .ironwolf-hero-slogan {
        font-size: 24px;
    }

    /* 四欄維持並排，只縮欄距與標題字級 */
    .ironwolf-future {
        padding: 80px 0;
    }

    .ironwolf-future-grid {
        gap: 24px;
    }

    .ironwolf-future-icon {
        margin-bottom: 16px;
    }

    .ironwolf-future-title {
        font-size: 24px;
    }

    /* 全方位容量應用：縮產品圖與圖文間距，維持左右並排 */
    .ironwolf-section1 {
        padding: 70px 0;
    }

    .ironwolf-section1-inner {
        gap: 60px;
    }

    .ironwolf-section1-media {
        flex-basis: 440px;
    }

    .ironwolf-section1-title {
        font-size: 40px;
    }

    /* 應用情境：維持 2×2，縮字級與卡片內距 */
    .ironwolf-section2 {
        padding-bottom: 80px;
    }

    .ironwolf-section2-title {
        padding-top: 50px;
        margin-bottom: 40px;
        font-size: 32px;
    }

    .ironwolf-section2-grid {
        gap: 48px 24px;
    }

    .ironwolf-case-body {
        margin-top: -20px;
        padding: 24px 20px 28px;
    }

    .ironwolf-case-title {
        margin-bottom: 20px;
        font-size: 28px;
    }

    .ironwolf-case-line {
        margin-bottom: 24px;
    }

    .ironwolf-case-desc {
        font-size: 20px;
    }

    /* 常見問題：縮內距與間距，字級維持設計稿值 */
    .ironwolf-faq {
        padding: 80px 0;
    }

    .ironwolf-faq-heading {
        margin-bottom: 40px;
        font-size: 32px;
    }

    .ironwolf-faq-list {
        gap: 24px;
    }

    .ironwolf-faq-head {
        padding: 20px 24px;
    }

    .ironwolf-faq-panel-inner {
        padding: 32px 36px;
    }

    /* 合作案例：卡片縮窄、圖片同比例縮小，維持圖左文右 */
    .ironwolf-section3 {
        padding: 80px 0;
    }

    .ironwolf-partner-heading {
        margin-bottom: 40px;
        font-size: 32px;
    }

    /* max-width 跟著這一段加寬的左右留白調整（120×2），窄視窗時卡片才不會一開場就被切掉 */
    .ironwolf-partner-swiper .ironwolf-partner-slide {
        width: 720px;
        max-width: calc(100vw - 240px);
    }

    .ironwolf-partner-card {
        gap: 24px;
        padding: 20px;
    }

    .ironwolf-partner-media {
        flex-basis: 320px;
    }

    .ironwolf-partner-title {
        margin-bottom: 20px;
        font-size: 28px;
    }

    .ironwolf-partner-nav {
        margin-top: 40px;
    }

    /* 頁尾 CTA：縮產品圖與標題字級，按鈕維持左右並排 */
    .ironwolf-section4 {
        padding: 40px 0 120px;
    }

    .ironwolf-cta-img {
        width: 340px;
        margin-bottom: 32px;
    }

    .ironwolf-cta-title {
        font-size: 40px;
    }
}

/* ===== 手機：產品圖在上、文字在下並置中 ===== */
@media (max-width: 768px) {
    .ironwolf-container {
        padding: 0 20px;
    }

    .ironwolf-mbr {
        display: block;
    }

    .ironwolf-hero {
        padding: 40px 0 60px;
    }

    /* 背景只鋪在上方產品圖範圍（光束正好落在硬碟後方），下緣用遮罩漸層淡出成純黑 */
    .ironwolf-hero-bg {
        inset: 0 0 auto;
        height: 340px;
    }

    /* 手機背景換成 banner-mobile.webp（390×349，已按手機構圖裁切），
       不需要桌機那組 58% 偏移，改回置中 */
    .ironwolf-hero-bg-img {
        object-position: center;
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 60%,
            transparent 100%
        );
        mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    }

    .ironwolf-hero-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 產品圖移到文字上方 */
    .ironwolf-hero-media {
        order: -1;
        flex: 0 0 auto;
        width: 240px;
        max-width: 64%;
        margin: 0 0 24px;
    }

    .ironwolf-hero-text {
        flex: 0 0 auto;
        width: 100%;
    }

    .ironwolf-hero-eyebrow {
        margin-bottom: 8px;
        font-size: 20px;
    }

    .ironwolf-hero-title {
        margin-bottom: 16px;
        font-size: 36px;
    }

    .ironwolf-hero-slogan {
        margin-bottom: 24px;
        font-size: 24px;
    }

    .ironwolf-hero-lead {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .ironwolf-hero-desc {
        margin-bottom: 24px;
        /* 手機字級同桌機 20px（設計稿指定），不覆寫 font-size */
        text-align: left;
    }

    .ironwolf-hero-btns {
        justify-content: center;
        gap: 12px;
    }

    .ironwolf-hero-btn {
        gap: 12px;
    }

    /* 四大特色：單欄置中堆疊（字級同桌機，設計稿未另給手機值） */
    .ironwolf-future {
        padding: 60px 0;
    }

    .ironwolf-future-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ironwolf-future-item {
        text-align: center;
    }

    .ironwolf-future-icon {
        margin: 0 auto 16px;
    }

    /* 全方位容量應用：產品圖在上、文字在下（文字維持靠左） */
    .ironwolf-dbr {
        display: none;
    }

    .ironwolf-section1 {
        padding: 60px 0;
    }

    /* 背景光帶只鋪在上方產品圖範圍，並放大裁切（原圖 3.6:1，直接縮到手機寬會細到看不出來） */
    .ironwolf-section1-bg {
        inset: 0 0 auto;
        height: 340px;
    }

    .ironwolf-section1-bg-img {
        height: 100%;
        object-fit: cover;
    }

    .ironwolf-section1-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .ironwolf-section1-media {
        flex: 0 0 auto;
        width: 300px;
        max-width: 76%;
        margin: 0 auto;
    }

    .ironwolf-section1-eyebrow {
        margin-bottom: 12px;
    }

    .ironwolf-section1-title {
        font-size: 36px;
    }

    /* 應用情境：單欄堆疊 */
    .ironwolf-section2 {
        padding-bottom: 60px;
    }

    .ironwolf-section2-title {
        padding-top: 40px;
        margin-bottom: 32px;
        font-size: 32px;
    }

    .ironwolf-section2-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* 圖片在手機滿版貼齊左右邊：撐出 .ironwolf-container 的 20px 左右內距。
       只放大圖片，grid 軌道與下方文案區塊維持原寬度、原位置。
       .ironwolf-page 已有 overflow-x: clip，撐出去的部分被裁掉、不會產生水平捲軸。 */
    .ironwolf-case-img {
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    .ironwolf-case-body {
        margin-top: -16px;
        padding: 20px 16px 24px;
    }

    .ironwolf-case-title {
        margin-bottom: 16px;
        font-size: 28px;
    }

    .ironwolf-case-line {
        margin-bottom: 20px;
    }

    .ironwolf-case-desc {
        font-size: 20px;
    }

    /* 常見問題：縮內距、icon 縮一階，字級維持設計稿值 */
    .ironwolf-faq {
        padding: 60px 0;
    }

    .ironwolf-faq-heading {
        margin-bottom: 32px;
        font-size: 32px;
    }

    .ironwolf-faq-list {
        gap: 20px;
    }

    .ironwolf-faq-head {
        gap: 16px;
        padding: 16px 20px;
    }

    .ironwolf-faq-icon {
        width: 32px;
        height: 32px;
    }

    .ironwolf-faq-panel-inner {
        padding: 24px 20px;
    }

    /* 合作案例：卡片改為圖上文下、寬度 76vw（右側露出下一張一角）；箭頭置中 */
    .ironwolf-section3 {
        padding: 60px 0;
    }

    /* 光帶原比例（約 6:1）縮到手機寬只有 60px 高、幾乎看不見，
       改為固定高度並放大裁切（同 .ironwolf-section1-bg 的手機處理） */
    .ironwolf-section3-bg {
        height: 460px;
    }

    .ironwolf-section3-bg-img {
        height: 100%;
        object-fit: cover;
    }

    .ironwolf-partner-heading {
        margin-bottom: 32px;
        font-size: 32px;
    }

    .ironwolf-partner-swiper .ironwolf-partner-slide {
        width: 76vw;
        max-width: calc(100vw - 40px);
    }

    .ironwolf-partner-card {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding: 16px 16px 28px;
    }

    .ironwolf-partner-media {
        flex: 0 0 auto;
    }

    .ironwolf-partner-title {
        margin-bottom: 20px;
        font-size: 28px;
    }

    /* 手機內文字級同桌機 20px（設計稿指定），不覆寫 font-size */

    .ironwolf-partner-nav {
        justify-content: center;
        margin-top: 40px;
    }

    .ironwolf-partner-prev,
    .ironwolf-partner-next {
        width: 44px;
        height: 44px;
    }

    /* 頁尾 CTA：換直式背景（圓在圖的上半部，故改為貼齊上緣）、按鈕上下堆疊 */
    .ironwolf-section4 {
        padding: 24px 0 80px;
    }

    .ironwolf-section4-bg-img {
        object-position: center top;
    }

    /* 用 vw：產品圖含周圍軌道線，要以視窗寬（不是容器內寬）為基準才對得上設計稿的比例 */
    .ironwolf-cta-img {
        width: 76vw;
        max-width: 320px;
        margin-bottom: 16px;
    }

    .ironwolf-cta-title {
        font-size: 36px;
    }

    /* 手機內文字級同桌機 20px（設計稿未另給），不覆寫 font-size */

    .ironwolf-cta-btns {
        flex-direction: column;
        gap: 12px;
    }

    /* 兩顆按鈕等寬並置中文字（自然寬度接近但不完全相同） */
    .ironwolf-cta-btns .ironwolf-hero-btn {
        min-width: 160px;
        justify-content: center;
    }

    /* 綠色「聯繫專人」排在上面（桌機是白框在左、綠底在右） */
    .ironwolf-cta-btns .ironwolf-hero-btn-quote {
        order: -1;
    }
}