/* ============================================================
   pages/index.css — 首頁專屬樣式
   創巢數位 Nest Digital | 版本 redesign-v1
   ============================================================ */

/* canvas 升到 #css-starfield 之上，Three.js 星星可見於斜帶上層
   #css-starfield::before（黑洞斜帶）由 base.css 統一管理、本檔不再覆蓋 */
#starfield-canvas {
    z-index: 1;
}

/* ─── 首頁基礎 ─── */
body {
    padding-top: 0;
    /* 首頁覆寫：底色壓到 #020b1e，ambient 漸層近零，Three.js 星場對比更深邃
       base.css 的 #050d2e 保留給其他頁面 */
    background:
        radial-gradient(ellipse 80% 55% at 15% 0%, rgba(var(--c-blue-rgb), 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 88% 100%, rgba(var(--c-navy-rgb), 0.07) 0%, transparent 55%),
        #020b1e;
}

/* ════════════════════════════════════════════════════════════
   Section 1｜Hero
   ════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* 背景放射光暈（偏左上，非置中，製造方向感） */
.hero__glow {
    position: absolute;
    top: 25%;
    left: 15%;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(
        ellipse at center,
        rgba(var(--c-blue-rgb), 0.04) 0%,
        transparent 60%
    );
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: radiate 7s ease-in-out infinite;
    z-index: 0;
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--sec-px);
    padding-top: 5rem;                  /* 上移：內容浮在視口上半部，下方黑空間深邃 */
    padding-bottom: 7rem;

    /* container query 起點：title 字級 / 太空人尺寸用 cqw 跟著 hero__inner 自身寬度縮放，
       不再跟著 viewport 縮放。viewport > 1200 時 hero__inner 被 max-width 卡住、cqw 也鎖住，
       title + 太空人停止縮小、gap 不會爆開。修「視窗縮窄時主標題與太空人逐漸分離」問題的根因。 */
    container-type: inline-size;
}

/* 左欄：語意三段式（敘事 / 行動 / 引導），不用統一 gap，改用各段明確 margin */
.hero__content {
    display: flex;
    flex-direction: column;
    padding-left: 1.5rem;
}

/* 主標題（2026-04-21 深空舞台版：均一字級，收緊字距讓字型本身說話）
   letter-spacing 0.06em：Chiron Sung 明朝骨架在深黑背景上的俐落存在感
   font-size 用 cqw（container query width）取代 vw：
   - viewport > 1200：hero__inner 卡 max-width 1200，cqw 同步鎖住，字級不再隨視窗縮
   - viewport ≤ 1200：cqw = vw，行為跟原本 vw 等價 */
.hero__title {
    font-family: var(--f-serif-cjk);
    /* RWD 字級自適應（cqw 隨 hero__inner 容器寬度縮放）：
       下界 1.5rem(24px) + 7cqw 大係數 → 全 mobile 範圍隨視窗變化、不卡下界
       360 mobile → 24px / 430 mobile → 27px / 768 → 51px / 1200+ → 56px upper */
    font-size: clamp(1.5rem, 7cqw, 3.5rem);
    font-weight: 900;
    line-height: 1.75;
    letter-spacing: 0.06em;
}

/* 每行只需 block 換行，其餘全部繼承父層 */
.hero__title .line {
    display: block;
}

/* 第 3、4 行「卻永遠 / 解決不了的問題」底線（保留冷光線設計元素） */
.hero__title .line:nth-child(3),
.hero__title .line:nth-child(4) {
    position: relative;
    width: fit-content;
}

.hero__title .line:nth-child(3)::after,
.hero__title .line:nth-child(4)::after {
    content: '';
    position: absolute;
    bottom: 0.12em;
    left: 0;
    width: 130%;  /* 超出文字向右延展 30%，作為光線射出的尾段 */
    height: 1px;
    /* 左側射出 gradient（與副標分隔線「光從右射出」形成鏡像呼應）
       77% 對應文字右邊緣（width 130% × 100/130 = 77%），77-100% 為超出文字的尾段 */
    background: linear-gradient(
        90deg,
        rgba(var(--c-blue-rgb), 0.75) 0%,
        rgba(var(--c-blue-rgb), 0.60) 20%,
        rgba(var(--c-blue-rgb), 0.40) 50%,
        rgba(var(--c-blue-rgb), 0.20) 77%,
        rgba(var(--c-blue-rgb), 0.08) 90%,
        transparent 100%
    );
}

/* 「跳躍思維」：黃色高亮即足夠，字級與全行一致 */
.hero__title .highlight {
    color: var(--c-yellow);
    text-shadow:
        0 0 28px rgba(var(--c-yellow-rgb), 0.5),
        0 0 64px rgba(var(--c-yellow-rgb), 0.22);
}

/* CTA 按鈕組 */
.hero__cta-group {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    /* 副標已移至 Hero 底部讀出條，CTA 直接接標題，需補上留白 */
    margin-top: 2.25rem;
}

/* Hero 範圍內 CTA：字級收小（2026-05-07 ghost 按鈕「了解我們」已拿掉，僅剩 primary） */
.hero__cta-group .btn {
    font-size: 0.9375rem;
}

/* 向下捲動提示 */
.hero__scroll-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.3);
    margin-top: var(--sp-lg);
    letter-spacing: 0.08em;
}

.hero__scroll-hint__line {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

/* ─── Hero 副標區容器 ─── */
.hero__rift {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;  /* 副標靠齊畫面最右側 */
    justify-content: flex-end;
    padding-bottom: 5rem;
    z-index: 3;
    pointer-events: none;
}

/* ─── 副標文字（仿宋編輯感）─── */
.hero__readout {
    position: relative;
    z-index: 2;

    text-align: right;
    padding: 0 var(--sec-px);
    max-width: 900px;
    width: 100%;

    /* 字型：cwTeX Q Fangsong 繁體仿宋（單一 Medium 字重，編輯感骨架，與 h1 Chiron Sung 明朝對位） */
    font-family: var(--f-fang-cjk);
    font-size: clamp(0.75rem, 1.225vw, 1.05rem);  /* 縮小 ~2px（原 clamp(0.875, 1.4vw, 1.175rem)） */
    /* 不指定 font-weight：仿宋僅 Medium 一字重，避免瀏覽器合成假粗體 */
    letter-spacing: 0.06em;
    line-height: 1.7;
    color: rgba(var(--c-stellar-rgb), 0.85);

    /* 2026-05-06：text 右邊緣對齊 .manifesto__inner（max-w 1200 容器右邊），而非 viewport 右側。
       寬視窗 (vw - max-w)/2 為向左推距離，narrow 視窗 < max-w 時收斂為 0。
       divider 保留原 viewport 右側位置（不加此 margin） */
    margin: 0 max(0px, calc((100vw - var(--max-w)) / 2)) 0 0;
    white-space: normal;

    /* text-shadow 四層（與 final-cta 副標同設計：跨背景 legibility shadow + 偏移層次感）
       ① 1px 1px 0 純黑（偏移陰影硬邊）
       ② 2px 2px 3px 黑 0.85（偏移陰影柔影）
       ③ 0 0 12px 純黑（擴散中暈）
       ④ 0 0 24px 黑 0.5（擴散外暈）
       原冷藍光暈（0 0 40px c-blue 0.18 / 0 2px 60px c-blue 0.08，文字背面光源感）已替換 */
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 1),
        2px 2px 3px rgba(0, 0, 0, 0.85),
        0 0 12px rgba(0, 0, 0, 1),
        0 0 24px rgba(0, 0, 0, 0.5);
}

/* 兩段語意 dim / strong 視覺扁平化：HTML 語意標籤保留供無障礙；視覺無差異對比 */

/* strong：font-weight: normal 防瀏覽器在仿宋單字重上合成假粗體 */
.hero__readout strong {
    font-weight: normal;
}

/* ─── 中英文之間的冷光分隔線 ──
   線寬超出文字容器（max-width 1200 vs 文字 max-width 900），
   gradient 左端 transparent 右端深電藍高峰（光從右射出，與右對齊文字方向呼應） */
.hero__readout-divider {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    height: 1px;
    margin: 0.05em 0 0.2em;  /* top 較緊讓中文底部靠近線、bottom 留隔英文間距 */
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--c-blue-rgb), 0.08) 40%,
        rgba(var(--c-blue-rgb), 0.35) 70%,
        rgba(var(--c-blue-rgb), 0.70) 90%,
        rgba(var(--c-blue-rgb), 0.90) 100%
    );
    /* 警示：勿加全向 box-shadow（0 0 Xpx），會在 line gradient 左半部 alpha < halo
       時造成「淡光暈中夾的暗縫」黑線錯覺。只用方向性偏移光暈強化光從右射出感。 */
    box-shadow: 12px 0 20px rgba(var(--c-blue-rgb), 0.30);
}

/* ─── 副標下方英文（同義重寫，非逐字翻譯）───
   英文為編輯感 echo / refrain。
   等寬對齊：clamp 比例 0.88×中文（中文 1-1.3rem → 英文 0.88-1.15rem 視覺寬度匹配）。
   z-index：position:relative + z-index:2，防未來插入 pseudo 元素時被堆疊遮擋。 */
.hero__readout-en {
    position: relative;
    z-index: 2;

    text-align: right;
    padding: 0 var(--sec-px);
    max-width: 900px;
    width: 100%;
    /* 2026-05-06：text 右邊緣對齊 .manifesto__inner（max-w 1200 容器右邊）；spacing 仍由 divider 接管 */
    margin: 0 max(0px, calc((100vw - var(--max-w)) / 2)) 0 0;

    /* 字型：Italiana（var(--f-display-en) hairline serif，文藝復興雜誌封面感）
       設計取捨：保留 Italiana hairline 視覺，拿掉 text-shadow 避免偏移陰影吃字
       （與中文 .hero__readout 不對稱：中文有陰影、英文裸字。中文仿宋筆畫夠粗不吃字、英文 hairline 吃字） */
    font-family: var(--f-display-en);
    font-size: clamp(0.775rem, 1.16vw, 1.025rem);  /* 縮小 ~2px（原 clamp(0.9, 1.3vw, 1.15rem)）；峰值仍受 max-width 900px 限制不超過 ~789px 自然寬度 */
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: rgba(var(--c-stellar-rgb), 0.85);
}

/* 手機版主視覺：title 上方 / CTA 縮小 / 太空人靠右下 / 副標底部
   設計取捨：直立螢幕 hero pattern 是「字在上、圖在右下角輔助裝飾」、不是圖頂上
   太空人保持輕量（120-160px）避免壓 CTA、副標能完整顯示 */
@media (max-width: 900px) {
    /* hero flex stretch：hero__inner 撐滿 hero 高度（100vh）、
       讓 .hero-astronaut absolute bottom 對齊 hero 底部、不是 hero__inner 內容底部
       （否則 hero__inner 會收縮成內容高度 ~465px、太空人會跑到 hero 中段） */
    .hero {
        align-items: stretch;
    }

    /* hero__inner padding-top 還原為簡短：title 緊接 nav 下方、視覺重量在上半部 */
    .hero__inner {
        padding-top: 6rem;
        padding-bottom: 4rem;
    }

    /* 副標位置：rift 占 hero 底部 45%、padding-bottom 3rem（dock-nav 已退役不需避開） */
    .hero__rift {
        padding-bottom: 3rem;
        height: 45%;
    }

    .hero__readout {
        /* clamp 隨視窗 vw 縮放：430 viewport (14 Pro Max) 拿 12.47px 可單行
           較小手機（360-414）自動縮小到 12px、仍會自然 wrap 2 行（文字長度物理限制） */
        font-size: clamp(0.75rem, 2.9vw, 0.875rem);
        letter-spacing: 0;
    }

    .hero__readout-divider {
        margin: 0.05em 0 0.15em;
    }

    .hero__readout-en {
        font-size: 0.875rem;
    }

    /* CTA 按鈕 mobile 縮小（讓出空間 + 視覺密度配合 mobile）
       桌機 0.9375rem 14×16=225px 寬，mobile 收 0.85 + padding 0.65/1.4 = ~165px 寬 */
    .hero__cta-group .btn {
        font-size: 0.85rem;
        padding: 0.65rem 1.4rem;
    }

    /* 「往下探索」hint mobile 隱藏（「探索服務 →」按鈕已是明確 scroll CTA、不需重複引導） */
    .hero__scroll-hint {
        display: none;
    }
}


/* ════════════════════════════════════════════════════════════
   Section 2｜宣言（Manifesto）
   ════════════════════════════════════════════════════════════ */

.manifesto {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--sp-xl) 0;
    overflow: hidden;
    position: relative;
}

/* Manifesto 內容層 */
.manifesto__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--sec-px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-md);
}

.manifesto__big-text {
    font-family: var(--f-serif-cjk);
    /* clamp 雙界調整、確保所有 viewport 自然 wrap 一致 6/3 split:
       下界 3.1rem(49.6px): 360 mobile content 320 容納 6 字 + 全形空格（49.6×6.38=316 < 320）
       上界 10.8rem(172.8px): 1720+ desktop content 1120 容納 6 字 + 空格（172.8×6.38=1102 < 1120）
       中段 13vw: 跟視窗縮放、字級隨容器自然調整 */
    font-size: clamp(3.1rem, 13vw, 10.8rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-align: right;
}


.manifesto__big-text .accent {
    /* 空心描邊：用 em 單位、stroke 跟字級等比縮放
       桌機 156px 字 → 0.022em = 3.4px stroke（≈原 3px）
       手機 72px 字 → 0.022em = 1.6px stroke（小字配細描邊、視覺比例一致） */
    color: transparent;
    -webkit-text-stroke: 0.022em var(--c-yellow);
    display: inline-block;
    position: relative;
}

/* 下方說明文字 */
.manifesto__body {
    width: 100%;       /* fill .manifesto__inner content area，讓 divider 可以延伸到 1120px 寬 */
    text-align: right;
}

.manifesto__body p {
    /* RWD 自適應：mobile 14px / 桌機隨 vw 縮放至 22px 上界 */
    font-size: clamp(0.875rem, 2vw, 1.375rem);
    line-height: 1.8;
    color: var(--c-muted);
    white-space: nowrap;  /* 不分行（單行右對齊，mobile MQ override 為 normal）*/
    margin: 0;            /* spacing 由 .manifesto__body-divider 接管 */

    /* text-shadow 四層（與 Hero 副標 / final-cta 副標同設計：跨背景 legibility shadow + 偏移層次感）*/
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 1),
        2px 2px 3px rgba(0, 0, 0, 0.85),
        0 0 12px rgba(0, 0, 0, 1),
        0 0 24px rgba(0, 0, 0, 0.5);
}

/* 中英文之間冷光分隔線（與 Hero 副標 .hero__readout-divider 同設計語言：c-blue 右側射出）
   寬度突破 .manifesto__body 容器，右邊緣延伸到 viewport 右側
   公式：100% (.manifesto__body 寬) + max(padding, 50vw - max-w/2 + padding)
   = 100% + max(40px, 50vw - 560px)
   寬視窗：50vw-560 主導；窄視窗（< max-w）：40px 主導 */
.manifesto__body-divider {
    width: calc(100% + max(var(--sec-px), 50vw - var(--max-w) / 2 + var(--sec-px)));
    height: 1px;
    margin: 0.5em 0 0.4em;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--c-blue-rgb), 0.15) 20%,    /* 左側提亮：原 0.08@40% → 0.15@20% */
        rgba(var(--c-blue-rgb), 0.40) 50%,    /* 中段提亮：原 0.35@70% → 0.40@50% */
        rgba(var(--c-blue-rgb), 0.70) 80%,    /* 同色更早：原 0.70@90% → 0.70@80% */
        rgba(var(--c-blue-rgb), 0.90) 100%    /* 右側源頭不變 */
    );
    box-shadow: 12px 0 20px rgba(var(--c-blue-rgb), 0.30);
}

/* 中文下方英文 echo（與 Hero 副標英文同設計語言：Italiana / cyan / 單行右對齊） */
.manifesto__body-en {
    font-family: var(--f-display-en);  /* Italiana 雜誌封面感 hairline serif */
    font-size: 1rem;
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: rgba(var(--c-cyan-rgb), 0.65);
    white-space: nowrap;
    margin-top: 0;  /* spacing 由 divider 接管 */
}

/* 左側裝飾線 */
.manifesto__line {
    position: absolute;
    left: var(--sec-px);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: linear-gradient(180deg, transparent, var(--c-blue), transparent);
}

@media (max-width: 900px) {
    .manifesto__inner {
        align-items: flex-start;
    }

    /* big-text 維持靠右（與桌機一致），width:100% 讓右對齊有空間生效
       align-items: flex-start 下 h2 預設只取 max-content 寬度、text-align 失效 */
    .manifesto__big-text {
        width: 100%;
    }


    /* body 中英文副標 mobile 維持靠右對齊（呼應 big-text 右對齊、視覺一致）
       但 mobile 必須允許 wrap（desktop 的 nowrap 在 mobile 會 overflow） */
    .manifesto__body p {
        white-space: normal;
    }


    /* mobile 描邊已由基礎 em 單位等比縮放、不需再 override */
}

/* 真手機寬度（≤640px）才強制 body p span 換行：
   tablet（641-900）寬度足夠、保持 inline 自然 wrap、不強制斷成 2/3 行 */
@media (max-width: 640px) {
    .manifesto__body p span {
        display: block;
    }
}


/* ════════════════════════════════════════════════════════════
   Section 3｜服務星圖（Services Bento）
   ════════════════════════════════════════════════════════════ */

.services-section {
    padding: var(--sp-xl) 0;
    scroll-margin-top: 80px;
}

.services-section__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--sec-px);
}

/* 非對稱 Bento Grid（2026-04-16 原始設計，從舊版 創巢官網/ 恢復） */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 1rem;
    margin-top: var(--sp-lg);
}

/* A 社群經營 — 左上單欄（2026-05-11 與 C 對換寬度：FEATURED C 升格為 hero、A 退回 supporting 視覺重量） */
.bento--a {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    min-height: 280px;
}

/* C AI 虛擬網紅 — 右上跨 col 2-3 FEATURED hero（2026-05-11 升格：用視覺重量強化「主角」訊號、對應 FEATURED 標籤的 narrative） */
.bento--c {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    min-height: 280px;
}

/* FEATURED 標籤：z-index: 2 高於 Liquid Glass ::before/::after */
.bento--c::after {
    content: 'FEATURED';
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    color: var(--c-yellow);
    letter-spacing: 0.18em;
    opacity: 0.75;
    z-index: 2;
}

/* C 卡專屬英文 echo 副標（FEATURED 卡差異化：呼應 hero / manifesto / final-cta 雙語對位） */
.bento--c .service-card__title-en {
    font-family: var(--f-display-en);
    font-size: var(--fs-md);
    font-weight: 400;
    color: rgba(var(--c-stellar-rgb), 0.55);
    letter-spacing: 0.03em;
    line-height: 1.3;
}

/* B 網站 — 左中 */
.bento--b-web {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    min-height: 220px;
}

/* B 系統 — 中 */
.bento--b-sys {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    min-height: 220px;
}

/* D 顧問 — 右，跨兩行 */
.bento--d {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
    min-height: 320px;
}

/* E 跳動E投放 — 左下，跨兩欄 */
.bento--e {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    min-height: 220px;
}

/* 手機 ≤ 900px：單欄垂直堆疊，所有 grid-column / grid-row 重置 auto
   排序依 HTML：A → C(FEATURED) → B-web → B-sys → D → E
   FEATURED C 卡排第二位、進站前兩張就看到最強文案 */
@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .bento-grid > .card {
        grid-column: auto;
        grid-row: auto;
    }
}

/* ════════════════════════════════════════════════════════════
   Section 5｜終點 CTA（反轉 CTA：「先別點」）
   居中布局（與服務區塊 cetered grid 視覺重心一致）
   設計策略：句號為視覺重音（停下來）→ 對稱冷光線 → 副標反轉接續
   ════════════════════════════════════════════════════════════ */

.final-cta {
    position: relative;
    padding: var(--sp-w1) 0;
    /* 上下 padding 給足太空人 scale 1.5 + rotation 12° 擴張 buffer：
       上方 100px 防 scale 從中心向上擴張部分被 clip、
       下方 180px 防腳尖被下方 site-footer 蓋掉 */
    padding-top: calc(var(--sp-w1) + 100px);
    padding-bottom: calc(var(--sp-w1) + 180px);
    /* overflow: clip（兩軸一致）：完全 paint clip，不創 scroll container、不出 scrollbar；
       hidden 在某軸對 GPU 加速 transform 元素可能逃出，clip 是 paint-time 硬切。
       禁止改回 overflow-x: hidden + overflow-y: visible（spec 違法組合會 promote 成 auto） */
    overflow: clip;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════
   太空人 Beat 04（無頭追頭盔）2026-05-08
   ─────────────────────────────────────────────────────────────
   自動 loop 影片、Final CTA 底部、背景層、不影響文字可讀性
   位於「我準備好了」按鈕下方、Footer NEST DIGITAL 上方的空白區
   ═══════════════════════════════════════════════════════════ */
.footer-astronaut {
    position: absolute;
    /* 初始放左下、由 JS 接管 transform 控制橫移 + 翻轉
       不要在 CSS 預設 transform，避免跟 GSAP 控制衝突 */
    left: 0;
    bottom: 0;
    width: clamp(280px, 35vw, 520px);
    aspect-ratio: 16 / 9;
    /* 等比例從中心擴張（四邊一起往外長、視覺中心不偏移）
       .final-cta 的 overflow: clip + 上下 padding buffer 避免 scale + rotation 撞邊界 */
    transform-origin: 50% 50%;
    z-index: 0;
    pointer-events: none;
    opacity: 0; /* JS 接管後才顯示，避免 flash */
}

.footer-astronaut video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    /* WebM (VP9+alpha) 影片自帶 alpha 通道，瀏覽器原生合成
       不需要 blend mode hack，角色顏色 / 陰影都精確保留 */
}

@media (max-width: 900px) {
    .footer-astronaut {
        width: clamp(220px, 60vw, 320px);
        bottom: 0.5rem;
    }
}

/* 背景中央微光暈：暗黑底上的「終點之光」，呼應「準備好了」這個承諾 */
.final-cta__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        rgba(var(--c-blue-rgb), 0.14) 0%,
        rgba(var(--c-blue-rgb), 0.06) 30%,
        transparent 70%
    );
    z-index: 0;
}

.final-cta__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--sec-px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 主標題「先別點。」— 仿宋大字，句號是視覺重音停止符 */
.final-cta__title {
    font-family: var(--f-serif-cjk);
    font-size: clamp(3.5rem, 9vw, 7.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--c-stellar);
    margin: 0;
}

/* 英文 echo「Don't click yet.」（Italiana hairline serif）
   字型：var(--f-display-en) Italiana，與 Hero 副標英文 .hero__readout-en 同字型（裸字優雅版）
   text-shadow 已拿掉（保留 hairline 視覺特色，避免陰影吃字） */
.final-cta__title-en {
    font-family: var(--f-display-en);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.4;
    color: rgba(var(--c-cyan-rgb), 0.95);
    margin: 0.6em 0 0;
}

/* 對稱冷光分隔線：中央向兩端衰減
   與 Hero / Manifesto 的「右側單向射出」線形成反差，呼應居中語境 */
.final-cta__divider {
    width: clamp(280px, 40vw, 480px);
    height: 1px;
    margin: var(--sp-md) 0 var(--sp-sm);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--c-blue-rgb), 0.30) 25%,
        rgba(var(--c-blue-rgb), 0.85) 50%,
        rgba(var(--c-blue-rgb), 0.30) 75%,
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(var(--c-blue-rgb), 0.40);
}

/* 副標題「除非你準備好不正常一次。」— 仿宋編輯感，反轉接續主標
   text-shadow 四層：右下偏移投影 + 360° 包圍（拿掉白色高光避免改變字形輪廓）
   ① 右下 45° 銳影（硬邊偏移）
   ② 右下 45° 柔影（投影過渡）
   ③ 360° 中暈（包圍墊底）
   ④ 360° 大暈（外圍擴散）*/
.final-cta__subtitle {
    font-family: var(--f-fang-cjk);
    font-size: clamp(1rem, 1.6vw, 1.375rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: rgba(var(--c-stellar-rgb), 0.85);
    margin: 0;
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 1),
        2px 2px 3px rgba(0, 0, 0, 0.85),
        0 0 12px rgba(0, 0, 0, 1),
        0 0 24px rgba(0, 0, 0, 0.5);
}

/* 副標題英文 echo（Italiana hairline serif）
   字型：var(--f-display-en) Italiana，與 .final-cta__title-en / Hero 副標英文同字型（裸字優雅版）
   text-shadow 已拿掉（保留 hairline 視覺特色） */
.final-cta__subtitle-en {
    font-family: var(--f-display-en);
    font-size: clamp(0.875rem, 1.2vw, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: rgba(var(--c-cyan-rgb), 0.95);
    margin: 0.5em 0 0;
}

/* CTA 按鈕外距（樣式本體由 components.css 的 .btn--yellow 接管） */
.final-cta__btn {
    margin-top: var(--sp-lg);
}


/* ════════════════════════════════════════════════════════════
   太空人 ScrollTrigger 偵序列（2026-05-07 PoC 掛載）
   ─────────────────────────────────────────────────────────────
   固定於 viewport 右側，捲動 Hero → Manifesto 期間驅動 72 偵
   動畫。Manifesto 結束後淡出（避免太空人停留干擾 Bento）。
   未去背 raw PNG 暫時直接渲染（白底），驗證 scroll 流暢度後
   再決定是否補偵 / 去背。
   ═══════════════════════════════════════════════════════════ */
.hero-astronaut {
    position: absolute;       /* 黏在 Hero 內部右側、跟隨 Hero 捲動，非 viewport-fixed */
    top: 50%;
    /* right / width / height 用 cqw 跟 title font-size 同步：跟容器（hero__inner）寬度縮放，
       而非跟視窗縮放。配合 hero__inner max-width 1200 上限，避免視窗 > 1200 時太空人繼續放大、
       脫離容器邊界 → 跟 title 之間 gap 撐開的 bug。 */
    right: clamp(2rem, 4cqw, 5rem);
    transform: translateY(-50%);
    width: clamp(240px, 47cqw, 540px);
    height: clamp(240px, 47cqw, 540px);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.hero-astronaut.loaded {
    opacity: 1;
}

.hero-astronaut canvas {
    width: 100%;
    height: 100%;
    display: block;
    /* 零重力漂浮：輪迴 6 秒微幅上下 + 旋轉，靜止時也有生命感
       與 ScrollTrigger 偵切換獨立（canvas drawImage 跟 CSS transform 不衝突）*/
    animation: float 6s ease-in-out infinite;
}

/* 無障礙：尊重「減少動態」偏好 */
@media (prefers-reduced-motion: reduce) {
    .hero-astronaut canvas {
        animation: none;
    }
}

/* 手機版：太空人靠右下、視覺主導
   尺寸 RWD 雙軸縮放：min(85vw, 可用垂直空間)，再 clamp 220-360px
   - 短手機（780vh 以下）：calc(100vh - 530px) 主導、太空人縮小避免擠 CTA
   - 高手機（932vh，user 14 Pro Max 測試基準）：85vw 主導、達 360px 上限
   bottom 8rem：給副標 buffer */
@media (max-width: 900px) {
    .hero-astronaut {
        --ast-size: clamp(220px, min(85vw, calc(100vh - 530px)), 360px);
        top: auto;
        bottom: 8rem;
        right: 1.5rem;
        transform: none;
        width: var(--ast-size);
        height: var(--ast-size);
    }
}


/* ════════════════════════════════════════════════════════════
   Beat 03 太空人 ScrollTrigger（Manifesto 區塊內 9:16 直式）
   ─────────────────────────────────────────────────────────────
   懸線揮手 → 掙扎 → 掉下消失 動畫，捲動 Manifesto 期間驅動 179 偵
   定位 Manifesto 右側、9:16 直式
   ═══════════════════════════════════════════════════════════ */
.manifesto-astronaut {
    position: absolute;
    /* top 由 JS initManifestoAstronautScroll() 動態計算對齊
       .manifesto__body-divider，這裡不寫死，避免衝突 */
    left: calc(var(--sec-px) + 4rem);   /* 從 +1rem 改 +4rem，往右推 3rem (約 48px) */
    transform: none;
    width: clamp(168px, 21.6vw, 312px);   /* 比原本放大 20%（140→168 / 18vw→21.6vw / 260→312） */
    /* 9:16 比例（自動算高度，不要改 width 以外的尺寸控制）*/
    aspect-ratio: 9 / 16;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.manifesto-astronaut.loaded {
    opacity: 1;
}

.manifesto-astronaut canvas {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 900px) {
    .manifesto-astronaut {
        left: 1rem;
        width: clamp(173px, 43.2vw, 288px);     /* 原 144-240 × 1.2 倍 */
    }
}