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

/* ─── 首頁基礎 ─── */
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：字級收小 */
.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 */
        font-size: clamp(0.75rem, 2.9vw, 0.875rem);
        letter-spacing: 0;
    }

    /* 手機強制斷行：<strong>「而是一個敢用不同方法的團隊」永遠在第二行
       桌機保持 inline 自然 flow；display: block 只在 ≤900px 套用、CSS-only 不動 HTML
       配合 base .hero__readout 的 text-align: right、兩行各自靠右對齊 */
    .hero__readout strong {
        display: block;
    }

    .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);
}

/* 服務區標題三行（eyebrow / title / label）左緣對齊主視覺 Hero —— Hero `.hero__content` 有額外
   padding-left:1.5rem，服務區原本只有 gutter、少這 24px 才會太靠左。兩區容器同 max-w 1200/sec-px、
   左緣一致，故此縮排全斷點通用（桌機+手機一致對齊）。2026-06-23 */
.section-header { padding-left: 1.5rem; }
.accordion-wrap .alabel { padding-left: 1.5rem; }

/* ══ 六張服務卡片格線（04-4 §0，2026-08-06；取代舊手風琴）══ */
.svc-index-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding-left: 1.5rem;
}
.svc-index-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.75rem 1.75rem 1.5rem;
    border: 1px solid rgba(var(--c-cyan-rgb), 0.15);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.svc-index-card:hover {
    border-color: rgba(var(--c-cyan-rgb), 0.45);
    background: rgba(var(--c-cyan-rgb), 0.04);
    transform: translateY(-3px);
}
.svc-index-card--muted { opacity: 0.5; }
.svc-index-card--muted:hover { opacity: 0.7; transform: none; }
.svc-index-card__tag {
    font-family: var(--f-mono);
    font-size: 0.63rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(var(--c-cyan-rgb), 0.65);
}
.svc-index-card__title {
    font-family: var(--f-serif-cjk);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 400;
    color: rgba(var(--c-stellar-rgb), 0.95);
    margin: 0.3rem 0 0;
    line-height: 1.3;
}
.svc-index-card__desc {
    font-family: var(--f-sans);
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(var(--c-stellar-rgb), 0.5);
    flex: 1;
    margin-top: 0.35rem;
}
.svc-index-card__arrow {
    font-family: var(--f-mono);
    font-size: 1rem;
    color: rgba(var(--c-cyan-rgb), 0.45);
    margin-top: 0.85rem;
    display: inline-block;
    transition: color 0.2s, transform 0.2s;
}
.svc-index-card:hover .svc-index-card__arrow {
    color: rgba(var(--c-cyan-rgb), 0.9);
    transform: translateX(4px);
}
@media (max-width: 820px) {
    .svc-index-grid { grid-template-columns: repeat(2, 1fr); padding-left: 0; }
}
@media (max-width: 480px) {
    .svc-index-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   Section 5｜產品展示（一鍵式架站 ＋ 跳動E投放）
   上下交錯雜誌排版：文字 ↔ 視覺，交替左右
   ════════════════════════════════════════════════════════════ */

.product-showcase {
    position: relative;
    overflow: clip;
    /* 下方 180px buffer 給太空人 scale + rotation 不被 clip 截到 */
    padding-bottom: calc(var(--sp-w1) + 10px);
}

.product-showcase__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 70% 40% at 50% 60%,
        rgba(var(--c-blue-rgb), 0.10) 0%,
        transparent 65%
    );
}

/* ── 單一產品區塊 ── */
.spotlight-block {
    position: relative;
    z-index: 1;
    padding: var(--sp-w1) var(--sec-px);
    max-width: var(--max-w);
    margin: 0 auto;
}

.spotlight-block__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text visual";
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

.spotlight-block__text  { grid-area: text; }
.spotlight-block__visual { grid-area: visual; }

/* 翻轉：視覺在左、文字在右，文字欄靠右對齊 */
.spotlight-block--flip .spotlight-block__inner {
    grid-template-areas: "visual text";
}

.spotlight-block--flip .spotlight-block__text {
    text-align: right;
}

.spotlight-block--flip .spotlight-block__points li {
    padding-left: 0;
    padding-right: 1.3em;
}

.spotlight-block--flip .spotlight-block__points li::before {
    left: auto;
    right: 0;
}

/* ── 文字欄 ── */
.spotlight-block__eyebrow {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: rgba(var(--c-cyan-rgb), 0.65);
    margin: 0 0 0.65rem;
    text-transform: uppercase;
}

.spotlight-block__name {
    font-family: var(--f-serif-cjk);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--c-stellar);
    margin: 0 0 0.35rem;
}

.spotlight-block__price {
    font-family: var(--f-mono);
    font-size: clamp(0.95rem, 1.7vw, 1.2rem);
    color: var(--c-yellow);
    letter-spacing: 0.07em;
    margin: 0 0 1.6rem;
    text-shadow: 0 0 18px rgba(var(--c-yellow-rgb), 0.35);
}

.spotlight-block__points {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.spotlight-block__points li {
    font-family: var(--f-sans);
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    font-weight: 300;
    color: rgba(var(--c-stellar-rgb), 0.65);
    padding-left: 1.3em;
    position: relative;
}

.spotlight-block__points li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: rgba(var(--c-cyan-rgb), 0.45);
}

/* ── 視覺欄：三個 Demo 縮圖（2+1 格線）── */
.spotlight-demos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

/* 第三張獨佔整行，高度壓小讓重心在上兩張 */
.spotlight-demos .spotlight-demo:last-child {
    grid-column: 1 / -1;
}
.spotlight-demos .spotlight-demo:last-child img {
    max-height: 140px;
}

.spotlight-demo {
    position: relative;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(var(--c-blue-rgb), 0.2);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.spotlight-demo:hover {
    border-color: rgba(var(--c-cyan-rgb), 0.5);
    transform: translateY(-3px);
}

.spotlight-demo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spotlight-demo__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.35rem 0.6rem;
    background: rgba(5, 13, 46, 0.82);
    backdrop-filter: blur(4px);
    font-family: var(--f-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: rgba(var(--c-cyan-rgb), 0.75);
}

.spotlight-demos__note {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    color: rgba(var(--c-stellar-rgb), 0.28);
    letter-spacing: 0.04em;
    margin: 0.6rem 0 0;
    text-align: right;
}

/* ── 視覺欄：廣告平台截圖 ── */
.spotlight-ads-frame {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(var(--c-blue-rgb), 0.25);
    box-shadow:
        0 0 0 1px rgba(var(--c-blue-rgb), 0.08),
        0 8px 40px rgba(var(--c-blue-rgb), 0.18);
    background: rgba(var(--c-navy-rgb), 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotlight-ads-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── 截圖 / 影片 箭頭輪播 ── */
.spotlight-carousel {
    position: relative;
    /* 固定高度：所有 panel 共用同一空間，截圖與影片容器一致 */
    min-height: 380px;
}

/* 所有 panel 永遠 absolute 填滿 carousel，靠 opacity 切換可見性 */
.spotlight-panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.spotlight-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 左右箭頭 */
.spotlight-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(var(--c-blue-rgb), 0.38);
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spotlight-carousel__arrow:hover {
    border-color: rgba(var(--c-blue-rgb), 0.75);
    background: rgba(var(--c-blue-rgb), 0.12);
    color: #fff;
    box-shadow: 0 0 12px rgba(var(--c-blue-rgb), 0.28);
}
.spotlight-carousel__arrow--prev { left:  0.6rem; }
.spotlight-carousel__arrow--next { right: 0.6rem; }

/* ── 單支 Reel（全高居中，panel 決定容器大小）── */
.spotlight-reel {
    height: 100%;
    aspect-ratio: 9 / 16;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(var(--c-navy-rgb), 0.5);
    border: 1px solid rgba(var(--c-blue-rgb), 0.15);
}
.spotlight-reel iframe,
.spotlight-reel video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    object-fit: contain;
}

/* ── 視覺佔位（素材待補）── */
.spotlight-placeholder {
    width: 100%;
    min-height: 380px;
    border-radius: 8px;
    border: 1px dashed rgba(var(--c-blue-rgb), 0.25);
    background: rgba(var(--c-navy-rgb), 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.spotlight-placeholder span {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.2);
}

/* ── 兩個產品區塊之間的分隔線 ── */
.spotlight-sep {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--sec-px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--c-blue-rgb), 0.18) 15%,
        rgba(var(--c-blue-rgb), 0.18) 85%,
        transparent 100%
    );
}

/* ── 太空人 Beat 04（無頭追頭盔）── */
.footer-astronaut {
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(280px, 35vw, 520px);
    aspect-ratio: 16 / 9;
    transform-origin: 50% 50%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
}

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

/* ── RWD ── */
@media (max-width: 860px) {
    .spotlight-block__inner,
    .spotlight-block--flip .spotlight-block__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "text";
    }

    .spotlight-demos {
        grid-template-columns: repeat(3, 1fr);
    }

    .spotlight-demos .spotlight-demo:last-child {
        grid-column: auto;
    }
    .spotlight-demos .spotlight-demo:last-child img {
        max-height: none;
    }

    .spotlight-demos__note {
        text-align: center;
    }

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

@media (max-width: 500px) {
    .spotlight-demos {
        grid-template-columns: 1fr 1fr;
    }
    .spotlight-demos .spotlight-demo:last-child {
        grid-column: 1 / -1;
    }
    .spotlight-demos .spotlight-demo:last-child img {
        max-height: 120px;
    }

}


/* ════════════════════════════════════════════════════════════
   太空人 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 倍 */
    }
}


/* ════════════════════════════════════════════════════════════
   Section 3｜服務區整併（2026-06-23 由 index-rain-preview 整進正式頁）
   3a 數位行銷手風琴（.svc-accordion 前綴隔離）／3b 軟體開發三服務堆疊玻璃（.dev-glass-stack）
   ════════════════════════════════════════════════════════════ */
      /* 手風琴容器 — 2026-06-19 原生內嵌（原為 iframe service-accordion-embed.html；改為 .svc-accordion 前綴隔離） */
      .accordion-wrap{ position:relative; z-index:2; width:100%; max-width:1280px; margin:0 auto; padding:0; }
      .accordion-wrap .alabel{ font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.28em;
        color:rgba(var(--c-yellow-rgb),.58); padding:0 1vw 14px; margin-top:-.4rem; }


      /* ══ 數位行銷手風琴（全選擇器加 .svc-accordion 前綴，與全站 CSS 隔離）══ */
      .svc-accordion{
        --cyan:0,200,255; --blue:23,54,245; --yellow:245,166,35; --stellar:225,235,255; --ink:5,12,26;
        --dk:26,32,44; --dk2:54,62,76; --teal:14,108,128;
        --f-cjk:"Chiron Sung HK","Noto Serif TC",serif; --f-en:"Italiana",serif;
        --f-mono:"JetBrains Mono",monospace; --f-body:"Noto Sans TC",sans-serif;
        --ease:cubic-bezier(.16,1,.3,1);
        /* Slab energy tuning (codex blue restored): vivid cyan glowing IN the stone on 3 surfaces —
           slab edge / inner carved frame / carved service text — plus a from-within fog. Every idle
           card breathes subtly; hover brightens that card. Same on desktop & mobile. */
        --svc-cycle:4.6s;
        --svc-edge-idle:.20;   --svc-edge-hover:.62;
        --svc-frame-idle:.28;  --svc-frame-hover:.82;
        --svc-fog-idle:.22;    --svc-fog-hover:.58;
        --svc-text-idle:.28;   --svc-text-hover:.72;
        --svc-halo-idle:.82;   --svc-halo-hover:1.25;   /* breathing glow AROUND the card outline（2026-06-23 增強周圍呼吸；卡內 edge/frame/fog/text 不動）*/
        --svc-open-muted:.06;
        --svc-pulse:1;         /* breathing multiplier, animated via @property below */
        display:flex; align-items:center; justify-content:center; width:100%; font-family:var(--f-body);
      }
      .svc-accordion *{ margin:0; padding:0; box-sizing:border-box; }
      .svc-accordion .acc{ position:relative; display:flex; gap:8px; width:min(1240px,100%,124vh); aspect-ratio:1.55/1; }
      .svc-accordion .acc::before{ content:''; position:absolute; inset:-26px -32px; z-index:0; pointer-events:none; border-radius:36px; background:radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.2), rgba(220,230,238,.09) 42%, transparent 72%); filter:blur(16px); opacity:.7; }
      .svc-accordion .panel{ position:relative; z-index:1; flex:1 1 0; min-width:0; border-radius:16px; overflow:hidden; cursor:pointer; border:1px solid rgba(var(--stellar),.14); background:radial-gradient(120% 80% at 50% 0%, rgba(var(--blue),.18), transparent 60%), linear-gradient(180deg, rgba(12,22,46,.55), rgba(5,12,26,.78)); box-shadow:-1px -1px 0 rgba(255,255,255,.6), 1px 1px 0 rgba(255,255,255,.18), 0 0 8px rgba(255,255,255,.1), 0 10px 22px rgba(0,0,0,.34); transition:flex .62s var(--ease), transform .62s var(--ease), border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
      .svc-accordion .panel:not(.open):hover{ border-color:rgba(var(--cyan),.6); }
      .svc-accordion .panel.open{ flex:4 1 0; cursor:default; transform:translateY(-3px); border-color:rgba(255,255,255,.5); box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 18px 44px rgba(0,0,0,.45), 0 0 60px rgba(240,247,255,.12); }
      .svc-accordion .panel.open::before{ content:''; position:absolute; left:0; top:14%; bottom:14%; width:2px; z-index:5; background:linear-gradient(180deg,transparent,rgba(var(--yellow),.85),transparent); box-shadow:0 0 12px rgba(var(--yellow),.4); }
      .svc-accordion .bgimg{ position:absolute; inset:0; background-size:cover; background-position:center; box-shadow:inset 0 3px 7px rgba(0,0,0,.30), inset 0 -3px 6px rgba(255,255,255,.42), inset 3px 0 7px rgba(0,0,0,.16), inset -3px 0 6px rgba(255,255,255,.22); transition:opacity .5s var(--ease), filter .55s var(--ease); }
      .svc-accordion .bgimg::after{ content:''; position:absolute; inset:13px; border-radius:9px; border:1px solid rgba(18,24,34,.20); box-shadow:0 1px 0 rgba(255,255,255,.48), 0 -1px 0 rgba(0,0,0,.10), inset 0 1px 1px rgba(255,255,255,.38), inset 0 -1px 1px rgba(0,0,0,.18), inset 1px 0 0 rgba(255,255,255,.18), inset -1px 0 0 rgba(0,0,0,.10); }
      .svc-accordion .panel.open .bgimg{ opacity:0; }
      .svc-accordion .acc:has(.panel.open) .panel:not(.open) .bgimg{ filter:brightness(.84) contrast(.95) saturate(.88); }
      .svc-accordion .acc:has(.panel.open) .panel:not(.open){ box-shadow:-1px -1px 0 rgba(255,255,255,.4), 0 0 10px rgba(255,255,255,.34), 0 0 22px rgba(240,247,255,.14), 0 8px 20px rgba(0,0,0,.32); }
      .svc-accordion .spine{ position:absolute; inset:0; z-index:3; opacity:1; transition:opacity .35s var(--ease); }
      .svc-accordion .panel.open .spine{ opacity:0; pointer-events:none; }
      .svc-accordion .spine .num{ position:absolute; top:7%; right:12%; font-family:var(--f-en); font-size:clamp(2.15rem,2.2vw,2.55rem); line-height:.75; color:rgba(58,64,78,.12); text-shadow:0 1.5px 0 rgba(255,255,255,.4), 0 -1px 1px rgba(0,0,0,.16); }
      .svc-accordion .spine__cols{ position:absolute; top:11%; left:50%; transform:translateX(-50%); display:flex; flex-direction:row; align-items:flex-start; gap:8px; }
      .svc-accordion .spine .v{ writing-mode:vertical-rl; font-family:var(--f-cjk); font-weight:600; font-size:clamp(1.55rem,1.45vw,1.82rem); letter-spacing:.18em; line-height:1.18; color:rgba(22,24,27,.9); -webkit-text-stroke:.15px rgba(248,250,255,.45); text-shadow:0 0 2px rgba(250,252,255,.95), 0 1.4px .2px rgba(255,255,255,.85), -.9px -.9px .8px rgba(0,0,0,.52), 0 -1.3px 1.7px rgba(0,0,0,.44); transition:color .4s var(--ease), text-shadow .4s var(--ease); }
      .svc-accordion .spine .ven{ writing-mode:vertical-rl; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(62,68,82,.38); text-shadow:0 1px 0 rgba(255,255,255,.4); padding-left:7px; border-left:1px solid rgba(22,28,40,.12); }
      .svc-accordion .panel:not(.open):hover .v{ color:rgba(18,19,20,.84); }
      .svc-accordion .body{ position:absolute; inset:0; z-index:2; padding:clamp(22px,3vh,40px) clamp(24px,3vw,48px); opacity:0; visibility:hidden; transition:opacity .45s var(--ease) .12s, visibility 0s .6s; display:grid; grid-template-rows:auto 1fr; overflow:hidden; }
      .svc-accordion .panel.open .body{ opacity:1; visibility:visible; transition:opacity .55s var(--ease) .2s; }
      .svc-accordion .bgart{ position:absolute; inset:0; z-index:-2; background:#f3f1ec center/cover no-repeat; }
      .svc-accordion .body::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(100deg, rgba(248,247,243,.72) 0%, rgba(248,247,243,.44) 38%, rgba(248,247,243,.08) 64%, rgba(248,247,243,0) 100%); }
      .svc-accordion .body:has(.sbody)::before{ background:linear-gradient(100deg, rgba(248,247,243,.9) 0%, rgba(248,247,243,.84) 38%, rgba(248,247,243,.52) 56%, rgba(248,247,243,.14) 74%, rgba(248,247,243,0) 90%); }
      .svc-accordion .panel[data-key="blog"] .bgart{ background-position:82% 22%; background-size:auto 134%; filter:saturate(.82) brightness(.99); }
      .svc-accordion .panel[data-key="blog"] .body::before{ background:linear-gradient(100deg, rgba(248,247,243,.93) 0%, rgba(248,247,243,.85) 40%, rgba(248,247,243,.5) 60%, rgba(248,247,243,.12) 78%, rgba(248,247,243,0) 92%); }
      .svc-accordion .panel[data-key="ads"] .body::before{ background:linear-gradient(100deg, rgba(250,248,243,.94) 0%, rgba(250,248,243,.86) 40%, rgba(250,248,243,.5) 60%, rgba(250,248,243,.12) 78%, rgba(250,248,243,0) 92%); }
      .svc-accordion .panel[data-key="ai"] .bgart{ background-position:14% center; }
      .svc-accordion .panel[data-key="ai"] .copy{ max-width:min(50%,22em); }
      .svc-accordion .panel[data-key="ai"] .proof,.svc-accordion .panel[data-key="ai"] .priceline{ max-width:min(56%,24em); }
      .svc-accordion .panel[data-key="ai"] .body::before{ background:linear-gradient(100deg, rgba(250,247,242,.95) 0%, rgba(250,247,242,.87) 40%, rgba(250,247,242,.5) 60%, rgba(250,247,242,.1) 78%, rgba(250,247,242,0) 92%); }
      .svc-accordion .head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; position:relative; }
      .svc-accordion .kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:rgba(var(--dk2),.85); padding-top:6px; border-top:1px solid rgba(var(--yellow),.7); display:inline-block; align-self:flex-start; }
      .svc-accordion .bignum{ font-family:var(--f-en); font-size:clamp(2.6rem,5vw,4.2rem); line-height:.8; color:rgba(var(--dk),.10); }
      .svc-accordion .title{ font-family:var(--f-cjk); font-weight:600; font-size:clamp(2rem,3.4vw,2.9rem); color:rgba(var(--dk),.97); letter-spacing:.04em; margin-top:clamp(10px,2vh,22px); text-shadow:0 1px 0 rgba(255,255,255,.6); }
      .svc-accordion .en{ font-family:var(--f-en); font-size:clamp(1rem,1.6vw,1.35rem); color:rgba(var(--teal),.85); letter-spacing:.03em; margin-top:4px; }
      .svc-accordion .lead{ font-size:clamp(.86rem,1.05vw,.98rem); line-height:1.7; color:rgba(var(--dk2),.86); max-width:34em; margin-top:clamp(10px,1.5vh,16px); }
      .svc-accordion .sbody{ display:flex; flex-direction:column; min-height:0; height:100%; }
      .svc-accordion .copy{ max-width:min(56%,29em); }
      .svc-accordion .deal{ margin-top:auto; padding-top:clamp(8px,1.2vh,12px); background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.66) 26%, rgba(255,255,255,.82)); }
      .svc-accordion .deal .cta{ margin-top:10px; }
      .svc-accordion .meta{ margin-top:13px; }
      .svc-accordion .meta + .meta{ margin-top:14px; }
      .svc-accordion .meta .ml{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(var(--dk2),.5); margin-bottom:8px; }
      .svc-accordion .acts{ font-size:.84rem; line-height:1.6; color:rgba(var(--dk2),.78); }
      .svc-accordion .acts b{ color:rgba(var(--dk),.92); font-weight:600; }
      .svc-accordion .offer{ display:flex; flex-direction:column; max-width:min(88%,44em); }
      .svc-accordion .offer-row{ position:relative; display:grid; grid-template-columns:minmax(4.5em,auto) minmax(0,1fr) max-content; align-items:baseline; gap:14px; min-height:38px; padding:6px 2px; border-top:1px solid rgba(20,24,28,.12); text-decoration:none; cursor:pointer; transition:background .25s var(--ease); }
      .svc-accordion .offer-row:last-of-type{ border-bottom:1px solid rgba(20,24,28,.12); }
      .svc-accordion .offer-row:hover{ background:rgba(255,255,255,.42); }
      .svc-accordion .offer-name{ font-family:var(--f-cjk); font-weight:600; font-size:1rem; color:rgba(var(--dk),.96); white-space:nowrap; }
      .svc-accordion .offer-name .rec{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; color:#8a6d2e; margin-left:7px; vertical-align:1px; }
      .svc-accordion .offer-note{ font-size:.78rem; line-height:1.35; color:rgba(var(--dk2),.7); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .svc-accordion .offer-price{ font-family:var(--f-mono); font-size:.86rem; font-variant-numeric:tabular-nums; color:rgba(var(--dk),.92); white-space:nowrap; }
      .svc-accordion .offer-price small{ font-size:.64rem; color:rgba(var(--dk2),.55); letter-spacing:.04em; }
      .svc-accordion .offer-price .ar{ color:rgba(160,110,30,.95); margin-left:5px; }
      .svc-accordion .offer-row.feat::before{ content:''; position:absolute; left:-10px; top:9px; bottom:9px; width:2px; background:#b99a52; }
      .svc-accordion .cta{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:12px; width:min(88%,44em); height:46px; padding:0 8px 0 22px; margin-top:16px; font-family:var(--f-body); font-size:.94rem; font-weight:700; letter-spacing:.06em; color:#fff; text-shadow:0 1px 2px rgba(0,40,50,.45); text-decoration:none; border-radius:999px; background:linear-gradient(180deg,#0e93ab,#0a5d70); box-shadow:0 8px 22px rgba(12,108,128,.42), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .25s var(--ease), box-shadow .3s var(--ease); }
      .svc-accordion .cta::after{ content:''; position:absolute; top:0; left:-60%; width:45%; height:100%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); animation:svc-cta-sheen 3.2s ease-in-out infinite; }
      .svc-accordion .cta .ar{ width:32px; height:32px; display:grid; place-items:center; border-radius:50%; font-family:var(--f-mono); font-weight:700; background:#fff; color:#0e7e94; z-index:1; transition:transform .3s var(--ease); }
      .svc-accordion .cta:hover{ transform:translateY(-2px) scale(1.012); box-shadow:0 12px 28px rgba(14,126,148,.5), inset 0 1px 0 rgba(255,255,255,.4); }
      .svc-accordion .cta:hover .ar{ transform:translateX(3px); }
      @keyframes svc-cta-sheen{ 0%{left:-60%} 38%,100%{left:130%} }
      @keyframes svc-sheet-up{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }   /* 全螢幕展開滑入 */
      @keyframes svc-lid-pulse{ 0%,100%{ opacity:.72; filter:drop-shadow(0 0 5px rgba(0,200,255,.36)) } 48%{ opacity:1; filter:drop-shadow(0 0 13px rgba(0,200,255,.82)) } }
      .svc-accordion .priceline{ font-family:var(--f-mono); font-size:.82rem; color:rgba(160,110,30,.95); letter-spacing:.04em; margin-top:18px; }
      .svc-accordion .proof{ display:flex; gap:clamp(18px,2.6vw,34px); margin-bottom:6px; }
      .svc-accordion .stat{ display:flex; flex-direction:column; line-height:1; }
      .svc-accordion .stat b{ font-family:var(--f-en); font-weight:400; font-size:clamp(1.7rem,2.5vw,2.2rem); color:rgba(var(--teal),.96); }
      .svc-accordion .stat span{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; color:rgba(var(--dk2),.72); margin-top:6px; white-space:nowrap; }
      .svc-accordion .deal .priceline{ margin-top:0; }
      .svc-accordion .panel[data-key="blog"] .bignum{ color:rgba(var(--dk),.05); }
      @media(prefers-reduced-motion:reduce){ .svc-accordion .cta::after{ animation:none; } }
      /* Slab energy (codex blue restored + idle breathing): vivid cyan from inside the stone on
         three surfaces — edge leak / inner carved frame / carved text — plus a from-within fog.
         All 4 idle cards breathe subtly (animated --svc-pulse multiplies every surface together);
         hover brightens that card; siblings dim when one is open. No lightning lines.
         Same on desktop & mobile. Tunable via .svc-accordion vars above. */
      @property --svc-pulse{ syntax:"<number>"; inherits:true; initial-value:1; }

      .svc-accordion .panel:not(.open){
        --svc-edge-live:var(--svc-edge-idle);
        --svc-frame-live:var(--svc-frame-idle);
        --svc-fog-live:var(--svc-fog-idle);
        --svc-text-live:var(--svc-text-idle);
        --svc-halo-live:var(--svc-halo-idle);
        box-shadow:
          -1px -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(255,255,255,.16),
          0 0 16px rgba(0,200,255,calc(var(--svc-halo-live) * var(--svc-pulse) * .58)),
          0 0 44px rgba(0,200,255,calc(var(--svc-halo-live) * var(--svc-pulse) * .40)),
          0 0 92px rgba(0,200,255,calc(var(--svc-halo-live) * var(--svc-pulse) * .25)),
          0 0 160px rgba(0,200,255,calc(var(--svc-halo-live) * var(--svc-pulse) * .14)),
          0 10px 22px rgba(0,0,0,.34);
        animation:svc-breathe var(--svc-cycle) ease-in-out infinite;
      }
      .svc-accordion .panel:not(.open):is(:hover,:focus-visible){
        --svc-edge-live:var(--svc-edge-hover);
        --svc-frame-live:var(--svc-frame-hover);
        --svc-fog-live:var(--svc-fog-hover);
        --svc-text-live:var(--svc-text-hover);
        --svc-halo-live:var(--svc-halo-hover);
      }
      .svc-accordion .acc:has(.panel.open) .panel:not(.open){
        --svc-edge-live:var(--svc-open-muted);
        --svc-frame-live:var(--svc-open-muted);
        --svc-fog-live:0;
        --svc-text-live:0;
        --svc-halo-live:var(--svc-open-muted);
        box-shadow:
          -1px -1px 0 rgba(255,255,255,.4),
          0 0 12px rgba(0,200,255,calc(var(--svc-halo-live) * var(--svc-pulse) * .5)),
          0 8px 20px rgba(0,0,0,.32);
      }
      @keyframes svc-breathe{ 0%,100%{ --svc-pulse:.5; } 50%{ --svc-pulse:1; } }

      /* (1) slab edge — blue light leaking from the stone's thickness edges */
      .svc-accordion .panel:not(.open)::before{
        content:''; position:absolute; inset:-1px; z-index:2; pointer-events:none; border-radius:16px;
        opacity:calc(var(--svc-edge-live) * var(--svc-pulse));
        background:
          linear-gradient(90deg, rgba(0,200,255,.42), transparent 11%, transparent 89%, rgba(0,200,255,.38)),
          linear-gradient(180deg, rgba(180,238,255,.16), transparent 20%, transparent 70%, rgba(0,200,255,.36));
        box-shadow:
          inset 0 0 0 1px rgba(0,200,255,.22),
          inset 10px 0 26px rgba(0,200,255,.16),
          inset -10px 0 26px rgba(0,200,255,.14),
          inset 0 -20px 36px rgba(0,200,255,.16),
          0 0 22px rgba(0,200,255,.16);
        mix-blend-mode:screen;
      }
      /* (2) inner carved frame — cyan glowing under the engraved frame line */
      .svc-accordion .panel:not(.open) .bgimg::after{
        border-color:rgba(0,200,255,calc(.10 + var(--svc-frame-live) * var(--svc-pulse)));
        box-shadow:
          0 1px 0 rgba(255,255,255,.46),
          0 -1px 0 rgba(0,0,0,.12),
          inset 0 1px 1px rgba(255,255,255,.36),
          inset 0 -1px 1px rgba(0,0,0,.18),
          inset 0 0 20px rgba(0,200,255,calc(var(--svc-frame-live) * var(--svc-pulse) * .42)),
          inset 0 -12px 26px rgba(0,200,255,calc(var(--svc-frame-live) * var(--svc-pulse) * .32)),
          0 0 16px rgba(0,200,255,calc(var(--svc-frame-live) * var(--svc-pulse) * .26));
      }
      /* (3) energy from deep in the stone — the "surging out" fog */
      .svc-accordion .panel:not(.open) .bgimg::before{
        content:''; position:absolute; inset:-10% -14%; z-index:1; pointer-events:none;
        opacity:calc(var(--svc-fog-live) * var(--svc-pulse));
        background:
          radial-gradient(ellipse at 50% 60%, rgba(0,200,255,.34) 0 11%, rgba(0,200,255,.15) 28%, rgba(0,200,255,.05) 48%, transparent 70%),
          radial-gradient(ellipse at 50% 100%, rgba(0,200,255,.30) 0 10%, rgba(0,200,255,.12) 30%, transparent 60%),
          radial-gradient(ellipse at 28% 40%, rgba(190,242,255,.16) 0 7%, rgba(0,200,255,.07) 24%, transparent 48%),
          radial-gradient(ellipse at 74% 74%, rgba(0,200,255,.22) 0 8%, rgba(0,200,255,.09) 26%, transparent 52%);
        filter:blur(8px) saturate(1.2);
        mix-blend-mode:screen;
      }
      /* (4) carved service text — stays dark-engraved, cyan reflection deep in the carve */
      .svc-accordion .panel:not(.open) .spine .v{
        text-shadow:
          0 0 2px rgba(250,252,255,.95),
          0 0 11px rgba(0,200,255,calc(var(--svc-text-live) * var(--svc-pulse))),
          0 1.4px .2px rgba(255,255,255,.85),
          -.9px -.9px .8px rgba(0,0,0,.52),
          0 -1.3px 1.7px rgba(0,0,0,.44);
      }
      .svc-accordion .panel:not(.open) .spine .ven{
        text-shadow:
          0 1px 0 rgba(255,255,255,.42),
          0 0 7px rgba(0,200,255,calc(var(--svc-text-live) * var(--svc-pulse) * .7));
      }
      .svc-accordion .panel:not(.open):focus-visible{ outline:1px solid rgba(0,200,255,.4); outline-offset:3px; }
      @media(prefers-reduced-motion:reduce){
        .svc-accordion .panel:not(.open){ animation:none; }
      }
      /* 手機（≤820px）方案 B：堆疊牌組 — 單卡置中、左右拖曳換卡、點焦點卡就地展開
         （2026-06-23 取代橫向展櫃；以使用者體驗最佳為準則，與下方開發區「單卡滑動」同操作語言）
         每張牌的 transform / opacity / z-index / filter 由 index-accordion.js 依與焦點卡距離即時設定。*/
      @media(max-width:820px){
        /* 桌機 .svc-accordion 是 flex（置中受限寬的 .acc）；手機改 block，讓 .acc 撐滿 350、牌組真正置中 */
        .svc-accordion{ display:block; }
        /* 手機移除桌機用的外層 4vw 留白，只留 .services-section__inner 的 20px 頁面邊距
           （桌機 4vw 是寬幅手風琴的呼吸框，到手機會與頁面邊距疊成雙重縮排）2026-06-23 */
        .accordion-wrap{ padding-inline:0; }
        /* 標題改單行＋縮小（2026-06-23 創辦人推翻原雙行）：accent 回 inline 同一行、
           font 用 clamp 縮到 360–430px 手機都能一行容下（12 字 × ~1.05em ≤ 內容寬）*/
        .section-header__title{ font-size:clamp(20px,6.1vw,26px); white-space:nowrap; }
        .section-header__title .accent{ display:inline; }

        /* 收斂頭部垂直空間：桌機的大留白在手機上嚴重佔版面、把牌組推到半頁以下，
           手機壓掉約 110px（112→34 上 padding、41.6→16 標題下距、eyebrow/alabel 收緊）2026-06-23 */
        .services-section{ padding-top:2.1rem; padding-bottom:2.8rem; }
        /* 標題文字左緣對齊主視覺 Hero：Hero __content 有額外 padding-left:1.5rem，服務區原本只有 gutter、少這 24px 才會太靠左 2026-06-23 */
        .section-header{ margin-bottom:1rem; padding-left:1.5rem; }
        .section-header__eyebrow{ margin-bottom:.5rem; }
        .accordion-wrap .alabel{ padding-bottom:9px; padding-left:1.5rem; }

        /* 牌組舞台：相對定位容器，卡片絕對堆疊置中；高度由 JS 量焦點卡後寫入 --deck-h */
        .svc-accordion .acc{
          position:relative; display:block;
          width:100%; height:auto; aspect-ratio:auto; gap:0;
          overflow:visible; padding:10px 0 4px;
          min-height:var(--deck-h,118vw);
          touch-action:pan-y; user-select:none; -webkit-user-select:none;
        }
        .svc-accordion .acc::before{ display:none; }            /* 桌機環境光暈在牌組下不適用 */

        /* 卡片比例鎖死 .388（＝月面碑刻單格自然比例 1.55÷4），由 height 驅動隨畫面縮放、
           width 自動換算，永不壓縮圖像；展開時於下方 .open 規則解鎖回流內撐高 */
        .svc-accordion .acc.is-deck .panel{
          position:absolute; left:50%; top:10px;
          height:var(--card-h,clamp(440px,72vh,610px)); width:auto; aspect-ratio:var(--card-aspect,.388);
          margin:0; transform:translateX(-50%); transform-origin:center 40%;
          transition:transform .5s var(--ease), opacity .42s var(--ease), filter .42s var(--ease), box-shadow .5s var(--ease);
          will-change:transform,opacity; backface-visibility:hidden;
        }
        .svc-accordion .acc.is-dragging .panel{ transition:none; }   /* 拖曳中貼著手指、不延遲 */
        .svc-accordion .panel:not(.open):hover{ transform:translateX(-50%); }

        /* 展開：點卡 → 該服務白底藝術＋內容「滑上來蓋滿整個螢幕」（含 nav），內容可上下捲、左上 ✕ 退出
           （2026-06-23 由區塊內就地展開改為全螢幕接管；.acc 不設 min-height:0、保留 deck-h 避免背後塌陷跳動）*/
        .svc-accordion .acc.is-deck.is-open .panel:not(.open){ opacity:0; pointer-events:none; }
        .svc-accordion .acc.is-deck .panel.open{
          position:fixed; inset:0; left:0; top:0; width:100vw; height:100vh; height:100dvh;
          margin:0; border-radius:0; aspect-ratio:auto; overflow:hidden;
          transform:none; opacity:1; filter:none; z-index:9000;
          transition:none;   /* 關掉牌組殘留的 .5s transform transition，避免與 slide-up 雙力道疊加變糊 */
          animation:svc-sheet-up .42s cubic-bezier(.22,1,.36,1);
        }
        .svc-accordion .panel:not(.open) .body{ display:none; }
        .svc-accordion .panel.open .body{
          position:absolute; inset:0; height:auto; min-height:100%; display:block;
          overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
          padding:66px clamp(22px,6vw,40px) calc(44px + env(safe-area-inset-bottom));
        }
        /* 手機全螢幕展開：背景圖當「全幅背景」。① 關掉桌機左重遮罩 ② 改用靜態垂直遮罩（上下可讀、中段透出圖；
           貼在 .bgart::after 不隨內容捲動）③ 各卡 background-position 把主體帶進直式畫面（2026-06-23）*/
        .svc-accordion .acc.is-deck .panel.open .body::before{ background:none; }
        .svc-accordion .acc.is-deck .panel.open .bgart{ background-size:cover; }
        .svc-accordion .acc.is-deck .panel.open .bgart::after{ content:''; position:absolute; inset:0; pointer-events:none;
          background:linear-gradient(180deg, rgba(248,247,243,.85) 0%, rgba(248,247,243,.6) 17%, rgba(248,247,243,.3) 38%,
            rgba(248,247,243,.18) 58%, rgba(248,247,243,.36) 80%, rgba(248,247,243,.62) 100%); }
        .svc-accordion .acc.is-deck .panel.open[data-key="social"] .bgart{ background-position:56% 42%; }
        .svc-accordion .acc.is-deck .panel.open[data-key="blog"]   .bgart{ background-position:88% center; }   /* 圖左移、露出右上角燈塔（直式為左右裁切，y 無作用）*/
        .svc-accordion .acc.is-deck .panel.open[data-key="ads"]    .bgart{ background-position:72% 40%; }
        .svc-accordion .acc.is-deck .panel.open[data-key="ai"]     .bgart{ background-position:46% center; }
        .svc-accordion .copy,.svc-accordion .offer,
        .svc-accordion .panel[data-key="ai"] .copy,
        .svc-accordion .panel[data-key="ai"] .proof,
        .svc-accordion .panel[data-key="ai"] .priceline{ max-width:100%; }
        .svc-accordion .cta{ width:100%; }
        /* 堆疊牢籠（血淚）：.services-section 自帶 position:relative+z-index:1、accordion-wrap 自帶 z-index:2，
           兩層脈絡會把 z-9000 全螢幕蓋層困在 nav(z-100) 底下。展開時兩層都抬到 nav 之上，蓋層才真的蓋掉 nav
           （含左上關閉鈕，因它也在 accordion-wrap 脈絡內）。桌機 .acc 不會有 is-open，:has 不觸發、不受影響。2026-06-23 */
        .services-section:has(.acc.is-open){ z-index:9000; }
        .accordion-wrap:has(.acc.is-open){ z-index:9000; }

        /* 導引點（手勢替代控制：UX gesture-alternative；JS 動態建立、置於 .acc 之後）
           2026-06-23 收斂精緻化：細點＋窄帶（點擊區 24×20、原 40×40），把垂直空間還給卡片 */
        .svc-deck-dots{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:8px; }
        .svc-deck-dots.is-hidden{ display:none; }
        /* 宇宙元素圖示（星/月/日/土星）取代圓點：未選＝暗白、選中＝青光＋微放大（沿用青光語言）*/
        .svc-deck-dot{ width:30px; height:26px; padding:0; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
          color:rgba(225,235,255,.30); transition:color .28s var(--ease), transform .28s var(--ease), filter .28s var(--ease); }
        .svc-deck-dot svg{ width:16px; height:16px; display:block; }
        .svc-deck-dot.is-active{ color:rgba(0,200,255,.95); transform:scale(1.18); filter:drop-shadow(0 0 5px rgba(0,200,255,.55)); }
        .svc-deck-dot:focus-visible{ outline:2px solid rgba(0,200,255,.55); outline-offset:2px; border-radius:8px; }

        /* 收合鈕：全螢幕展開時固定左上、深圓底白叉，明確退出路徑（UX escape-routes）；z 高於 9000 蓋層 */
        .svc-deck-close{ display:none; position:fixed; top:calc(12px + env(safe-area-inset-top)); left:12px; z-index:9001;
          width:42px; height:42px; padding:0; border:0; border-radius:50%; cursor:pointer;
          align-items:center; justify-content:center; font-size:17px; line-height:1; color:#fff;
          background:rgba(8,14,30,.62); box-shadow:0 2px 12px rgba(0,0,0,.3); backdrop-filter:blur(8px);
          -webkit-tap-highlight-color:transparent; }
        .svc-accordion .acc.is-open ~ .svc-deck-close{ display:flex; }
      }
      @media(min-width:821px){ .svc-deck-dots,.svc-deck-close{ display:none !important; } }

      /* ── 服務六張卡片網格（A方案：月面碑刻視覺語言，3×2 平鋪）── */
      .svc-grid-wrap{ width:100%; max-width:1280px; margin:0 auto; padding-inline:clamp(1rem,3vw,2.5rem); }
      .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }

      .svc-card{
        position:relative; display:block; text-decoration:none;
        aspect-ratio:1/1; border-radius:16px; overflow:hidden;
        border:1px solid rgba(255,255,255,.18);
        cursor:pointer;
        /* 字型變數（與 .svc-accordion 一致）*/
        --f-cjk:"Chiron Sung HK","Noto Serif TC",serif;
        --f-en:"Italiana",serif;
        /* 碑藍發光系統變數 */
        --svc-cycle:4.6s;
        --svc-edge-idle:.20;  --svc-edge-hover:.62;
        --svc-frame-idle:.28; --svc-frame-hover:.82;
        --svc-fog-idle:.22;   --svc-fog-hover:.58;
        --svc-text-idle:.28;  --svc-text-hover:.72;
        --svc-halo-idle:.82;  --svc-halo-hover:1.25;
        --svc-edge-live:var(--svc-edge-idle);
        --svc-frame-live:var(--svc-frame-idle);
        --svc-fog-live:var(--svc-fog-idle);
        --svc-text-live:var(--svc-text-idle);
        --svc-halo-live:var(--svc-halo-idle);
        --svc-pulse:1;
        box-shadow:
          -1px -1px 0 rgba(255,255,255,.55), 1px 1px 0 rgba(255,255,255,.16),
          0 0 16px rgba(0,200,255,calc(var(--svc-halo-live)*var(--svc-pulse)*.58)),
          0 0 44px rgba(0,200,255,calc(var(--svc-halo-live)*var(--svc-pulse)*.40)),
          0 0 92px rgba(0,200,255,calc(var(--svc-halo-live)*var(--svc-pulse)*.25)),
          0 0 160px rgba(0,200,255,calc(var(--svc-halo-live)*var(--svc-pulse)*.14)),
          0 10px 22px rgba(0,0,0,.34);
        animation:svc-breathe var(--svc-cycle) ease-in-out infinite;
        transition:transform .35s var(--ease), border-color .3s var(--ease);
      }
      .svc-card:hover, .svc-card:focus-visible{
        --svc-edge-live:var(--svc-edge-hover);
        --svc-frame-live:var(--svc-frame-hover);
        --svc-fog-live:var(--svc-fog-hover);
        --svc-text-live:var(--svc-text-hover);
        --svc-halo-live:var(--svc-halo-hover);
        transform:translateY(-4px);
        border-color:rgba(0,200,255,.6);
      }
      .svc-card:focus-visible{ outline:1px solid rgba(0,200,255,.4); outline-offset:3px; }

      /* 石板背景 */
      .svc-card__bg{
        position:absolute; inset:0;
        box-shadow:
          inset 0 3px 7px rgba(0,0,0,.30),
          inset 0 -3px 6px rgba(255,255,255,.42),
          inset 3px 0 7px rgba(0,0,0,.16),
          inset -3px 0 6px rgba(255,255,255,.22);
      }
      /* (2) 凹刻內框藍光 */
      .svc-card__bg::after{
        content:''; position:absolute; inset:13px; border-radius:9px;
        border:1px solid rgba(0,200,255,calc(.10 + var(--svc-frame-live)*var(--svc-pulse)));
        box-shadow:
          0 1px 0 rgba(255,255,255,.46), 0 -1px 0 rgba(0,0,0,.12),
          inset 0 1px 1px rgba(255,255,255,.36), inset 0 -1px 1px rgba(0,0,0,.18),
          inset 0 0 20px rgba(0,200,255,calc(var(--svc-frame-live)*var(--svc-pulse)*.42)),
          inset 0 -12px 26px rgba(0,200,255,calc(var(--svc-frame-live)*var(--svc-pulse)*.32)),
          0 0 16px rgba(0,200,255,calc(var(--svc-frame-live)*var(--svc-pulse)*.26));
      }
      /* (3) 石內湧出霧氣 */
      .svc-card__bg::before{
        content:''; position:absolute; inset:-10% -14%; z-index:1; pointer-events:none;
        opacity:calc(var(--svc-fog-live)*var(--svc-pulse));
        background:
          radial-gradient(ellipse at 50% 60%, rgba(0,200,255,.34) 0 11%, rgba(0,200,255,.15) 28%, rgba(0,200,255,.05) 48%, transparent 70%),
          radial-gradient(ellipse at 50% 100%, rgba(0,200,255,.30) 0 10%, rgba(0,200,255,.12) 30%, transparent 60%),
          radial-gradient(ellipse at 28% 40%, rgba(190,242,255,.16) 0 7%, rgba(0,200,255,.07) 24%, transparent 48%),
          radial-gradient(ellipse at 74% 74%, rgba(0,200,255,.22) 0 8%, rgba(0,200,255,.09) 26%, transparent 52%);
        filter:blur(8px) saturate(1.2);
        mix-blend-mode:screen;
      }
      /* (1) 石板邊緣漏光 */
      .svc-card::before{
        content:''; position:absolute; inset:-1px; z-index:4; pointer-events:none; border-radius:16px;
        opacity:calc(var(--svc-edge-live)*var(--svc-pulse));
        background:
          linear-gradient(90deg, rgba(0,200,255,.42), transparent 11%, transparent 89%, rgba(0,200,255,.38)),
          linear-gradient(180deg, rgba(180,238,255,.16), transparent 20%, transparent 70%, rgba(0,200,255,.36));
        box-shadow:
          inset 0 0 0 1px rgba(0,200,255,.22),
          inset 10px 0 26px rgba(0,200,255,.16),
          inset -10px 0 26px rgba(0,200,255,.14),
          inset 0 -20px 36px rgba(0,200,255,.16),
          0 0 22px rgba(0,200,255,.16);
        mix-blend-mode:screen;
      }

      /* 底部漸層遮罩（獨立 div，不佔用 ::before）*/
      .svc-card__overlay{
        position:absolute; bottom:0; left:0; right:0; height:65%;
        z-index:2; pointer-events:none;
        background:linear-gradient(180deg, transparent 0%, rgba(4,8,18,.88) 100%);
      }

      /* 數字、文字標籤（頂部橫向帶）*/
      .svc-card__top{
        position:absolute; top:0; left:0; right:0; z-index:3;
        padding:clamp(14px,2vh,24px) clamp(14px,1.8vw,20px);
        display:flex; flex-direction:column; align-items:center; gap:5px;
        background:linear-gradient(180deg, rgba(5,10,20,.72) 0%, rgba(5,10,20,.28) 65%, transparent 100%);
      }
      .svc-card__label{
        display:flex; flex-direction:column; align-items:center; gap:4px; width:100%;
      }
      /* (4) 文字青光反射 */
      .svc-card__cjk{
        font-family:var(--f-cjk);
        font-weight:800;
        font-size:clamp(1.4rem,1.7vw,1.9rem);
        letter-spacing:.06em;
        line-height:1.2;
        color:rgba(232,240,255,.96); text-align:center;
        -webkit-text-stroke:.15px rgba(255,255,255,.12);
        text-shadow:
          0 0 12px rgba(0,200,255,calc(var(--svc-text-live)*var(--svc-pulse)*.8)),
          0 0 28px rgba(0,200,255,calc(var(--svc-text-live)*var(--svc-pulse)*.4)),
          0 1px 3px rgba(0,0,0,.9),
          0 2px 8px rgba(0,0,0,.7);
      }
      .svc-card__en{
        font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
        color:rgba(0,200,255,.72); text-align:center;
        text-shadow:0 0 8px rgba(0,200,255,calc(var(--svc-text-live)*var(--svc-pulse)*.6));
      }

      /* 底部資訊帶 */
      .svc-card__foot{
        position:absolute; bottom:0; left:0; right:0; z-index:5;
        padding:clamp(10px,1.5vh,16px) clamp(14px,1.8vw,20px);
        display:flex; flex-direction:column; gap:4px;
      }
      .svc-card__desc{
        font-family:var(--f-sans); font-size:clamp(.72rem,.85vw,.82rem);
        color:rgba(220,230,255,.90); line-height:1.4;
        text-shadow:0 1px 4px rgba(0,0,0,.7);
      }
      .svc-card__price{
        font-family:var(--f-mono); font-size:clamp(.66rem,.78vw,.74rem);
        color:rgba(255,199,9,.92); letter-spacing:.04em;
        text-shadow:0 0 14px rgba(255,199,9,.35);
      }
      .svc-card:hover .svc-card__price{
        color:rgba(255,215,60,1);
        text-shadow:0 0 18px rgba(255,199,9,.55);
      }
      .svc-card__cta{
        font-family:var(--f-mono); font-size:clamp(.66rem,.78vw,.74rem);
        color:rgba(0,200,255,.85); letter-spacing:.1em;
        display:flex; align-items:center; gap:4px;
        overflow:hidden;
      }
      .svc-card__arrow{
        color:rgba(0,200,255,.9);
        font-size:18px; font-weight:700;
        display:inline-block; line-height:1;
        transform-origin:left center;
      }
      @keyframes svc-arrow-fly{
        0%   { transform:translateX(0)    scaleX(1);   opacity:1; }
        18%  { transform:translateX(4px)  scaleX(1.5); opacity:1; }
        100% { transform:translateX(72px) scaleX(1);  opacity:0; }
      }
      .svc-card:hover .svc-card__arrow{
        animation:svc-arrow-fly .08s cubic-bezier(.55,0,1,.75) forwards;
      }
      @media(prefers-reduced-motion:reduce){
        .svc-card:hover .svc-card__arrow{ animation:none; }
      }

      /* Coming Soon 卡 */
      .svc-card--soon{ opacity:.65; cursor:default; pointer-events:none; animation:none; }
      .svc-card--soon .svc-card__cjk{ color:rgba(22,24,27,.6); }
      .svc-card--soon .svc-card__price{ color:rgba(140,150,170,.6); }
      @media(prefers-reduced-motion:reduce){ .svc-card{ animation:none; } }

      @media(max-width:820px){
        .svc-grid{ grid-template-columns:repeat(2,1fr); }
      }
      @media(max-width:480px){
        .svc-grid{ grid-template-columns:1fr; }
        .svc-card{ aspect-ratio:1/1; }
      }

      /* ── 軟體開發區（#dev）：斜卡片 + CSS 3D 多層程式碼隧道落雨（2026-06-24 拔 WebGL 改 CSS 3D） ──
         卡片由 index-glass-stack.js 動態注入；全選擇器加 .dev-glass-stack 前綴與全站 CSS 隔離。 */
      #dev{ position:relative; min-height:100vh; min-height:100dvh; background:transparent; }
      .dev-glass-stack{ position:relative; z-index:1; width:100%;
        --cardW:min(960px,92vw); --cardH:min(560px,78vh); --cardRadius:28px; --tiltX:9; --tiltY:-16;
        --dg-blue:23,54,245; --dg-gold:245,166,35;
        /* CSS 3D 程式碼隧道落雨參數（demo-liquid/dev-rain-css3d-sandbox.html 定版） */
        --persp:600px; --layers:6; --gap:620px; --comp:.2; --fog:.82; --dof:0px; --fall:13s; --parallax:.05; --density:5; --barsPerCol:2; --breadth:1.5; --l2:.2; --l2r:46%; --bgDim:.55;
        --bandK:1.08; --rainBandH:calc(var(--cardH) * var(--bandK));   /* 落雨橫帶高度 = 卡片高 × bandK（原設計 1.08）*/
        min-height:100vh; min-height:100dvh; background:transparent; }
      .dev-stack-stage{ position:relative; min-height:100vh; min-height:100dvh; width:100%; overflow:hidden; touch-action:pan-y; background:transparent; }
      /* ===== CSS 3D 多層程式碼隧道（取代 WebGL canvas；無 Three.js）===== */
      /* 落雨收成「置中橫帶」（非滿版）：高 ≈ 卡片高、上下羽化進乾淨深底、左右出血超出畫面 */
      .dev-rain3d{ position:absolute; left:0; right:0; top:50%; height:var(--rainBandH); transform:translateY(-50%);
        z-index:1; pointer-events:none; perspective:var(--persp); perspective-origin:50% 50%;
        -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
                mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%); }
      .dev-rain3d::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
        background:radial-gradient(130% 130% at 50% 50%, #0a1838 0%, #050d24 52%, #02060f 100%);
        filter:brightness(var(--bgDim)); }
      .dev-rain-scene{ position:absolute; inset:0; transform-style:preserve-3d;
        transform:rotateX(calc(var(--tiltX)*1deg)) rotateY(calc(var(--tiltY)*1deg)); }
      .dev-rain-layer{ position:absolute; inset:0 -10%; transform-style:preserve-3d; will-change:transform; }
      .dev-rain3d .bar-wrap{ position:absolute; top:0; will-change:transform; animation:dev-barfall linear infinite; }
      .dev-rain3d .bar{ display:inline-block; white-space:nowrap; font-family:"JetBrains Mono",monospace;
        transform-origin:0 0; transform:rotate(-90deg);
        background:linear-gradient(to right, rgba(255,255,255,.96) 0%, rgba(232,244,255,.9) 6%,
          rgba(var(--bc),.92) 18%, rgba(var(--bc),.5) 55%, rgba(var(--bc),0) 96%);
        -webkit-background-clip:text; background-clip:text; color:transparent;
        filter:drop-shadow(0 0 5px rgba(150,190,255,.32)); }
      .dev-rain-paused .bar-wrap{ animation-play-state:paused; }
      @keyframes dev-barfall{ from{ transform:translateY(calc(var(--rainBandH) * -0.25));} to{ transform:translateY(calc(var(--rainBandH) * 1.25));} }
      .dev-stack-html-deck{ position:absolute; inset:0; z-index:2; pointer-events:none; }
      .dev-glass-stack .deck{ position:absolute; inset:0; }
      .dev-glass-stack .html-card{ position:absolute; left:50%; top:50%; width:var(--cardW); height:var(--cardH);
        margin-left:calc(var(--cardW) / -2); margin-top:calc(var(--cardH) / -2);
        border-radius:var(--cardRadius); overflow:hidden; pointer-events:none;
        transform-origin:center center; will-change:transform,opacity; backface-visibility:hidden;
        background:transparent; box-shadow:none; opacity:0; visibility:hidden;
        transition:transform 360ms ease-out, opacity 360ms ease-out, visibility 0s linear 360ms; }
      .dev-glass-stack .html-card.is-active{ opacity:1; visibility:visible; transition:transform 360ms ease-out, opacity 360ms ease-out; }
      .dev-glass-stack .ghost{ position:absolute; right:-4%; bottom:-22%; z-index:2; font-family:"Noto Serif TC",serif; font-weight:700;
        font-size:min(38vw,420px); line-height:.8; color:rgba(225,235,255,.032); user-select:none; pointer-events:none; letter-spacing:-.02em; }
      .dev-glass-stack .grain{ position:absolute; left:0; top:0; width:32%; height:100%; z-index:3; opacity:.055; pointer-events:none;
        font-family:"JetBrains Mono",monospace; font-size:12px; line-height:2; color:rgb(var(--dg-blue)); white-space:pre; overflow:hidden;
        -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 50%,transparent 100%); mask-image:linear-gradient(90deg,#000 0%,#000 50%,transparent 100%); }
      .dev-glass-stack .codebar{ position:absolute; top:0; left:0; right:0; z-index:5; padding:13px 26px; border-bottom:1px solid rgba(225,235,255,.05); opacity:.72; }
      .dev-glass-stack .codebar .cpath{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(225,235,255,.42); }
      .dev-glass-stack .content{ position:relative; z-index:5; width:100%; height:100%; padding:54px 56px 50px; display:flex; flex-direction:row; align-items:center; gap:clamp(28px,3.8vw,52px); }
      /* L2 文字襯底：羽化暗暈（取代原硬邊矩形，消除可見直角；--l2/--l2r 可調）*/
      .dev-glass-stack .lead{ position:relative; z-index:1; flex:1 1 46%; min-width:0; }
      .dev-glass-stack .lead::before{ content:''; position:absolute; inset:-18% -24% -22% -22%; z-index:-1; pointer-events:none;
        background:radial-gradient(ellipse 70% 64% at 38% 50%, rgba(3,9,28,var(--l2)) 0%,
          rgba(3,9,28,calc(var(--l2)*.55)) calc(var(--l2r)*.6), rgba(3,9,28,0) var(--l2r));
        filter:blur(6px); }
      .dev-glass-stack .klab{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.26em; color:rgba(var(--dg-gold),.82); }
      .dev-glass-stack .knum{ position:absolute; top:36px; right:58px; font-family:"Italiana",serif; font-size:54px; color:rgba(255,199,9,.92); line-height:1; text-shadow:0 1px 10px rgba(0,0,0,.55); }
      .dev-glass-stack .ztitle{ font-family:"Noto Serif TC",serif; font-weight:700; font-size:clamp(2.1rem,4vw,3.2rem); color:rgba(225,235,255,.97); margin:16px 0 8px; line-height:1.12; letter-spacing:.02em; text-shadow:0 2px 18px rgba(0,0,0,.35); }
      .dev-glass-stack .zen{ font-family:"Italiana",serif; font-size:1.18rem; color:rgba(210,222,245,.5); letter-spacing:.04em; text-shadow:0 1px 1px rgba(2,8,22,.75); }
      .dev-glass-stack .zsub{ margin-top:14px; font-size:.92rem; line-height:1.65; color:rgba(225,235,255,.6); max-width:34ch; text-shadow:0 1px 1px rgba(2,8,22,.72); }
      .dev-glass-stack .svccol{ position:relative; z-index:0; flex:0 0 44%; }
      .dev-glass-stack .svccol::before{ content:''; position:absolute; inset:-28px -22px -30px -24px; z-index:-1; pointer-events:none;
        background:radial-gradient(ellipse at 48% 46%, rgba(0,0,0,.30) 0%, rgba(1,5,18,.18) 42%, rgba(1,5,18,0) 72%); }
      .dev-glass-stack .svc-head{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(var(--dg-gold),.72); margin-bottom:26px; }
      .dev-glass-stack .svc{ list-style:none; margin:0; }
      .dev-glass-stack .svc li{ position:relative; margin-bottom:26px; }
      .dev-glass-stack .svc li:last-child{ margin-bottom:0; }
      .dev-glass-stack .svc li::before{ content:''; display:block; width:22px; height:1px; background:rgba(var(--dg-gold),.5); margin-bottom:12px; }
      .dev-glass-stack .svc li .sn{ display:block; font-family:"Noto Serif TC",serif; font-size:1.12rem; color:rgba(225,235,255,.97); letter-spacing:.01em; }
      .dev-glass-stack .svc li .sd{ display:block; margin-top:5px; font-size:.8rem; line-height:1.55; color:rgba(225,235,255,.76); white-space:normal; text-shadow:0 1px 2px rgba(0,3,14,.92), 0 0 14px rgba(0,0,0,.58); }
      .dev-card-arrow{ position:absolute; top:50%; z-index:7; width:48px; height:72px; border:0; border-radius:8px; transform:translateY(-50%);
        display:grid; place-items:center; cursor:pointer; pointer-events:auto; color:rgba(225,235,255,.9);
        background:rgba(4,10,28,.38); box-shadow:inset 0 0 0 1px rgba(225,235,255,.12), 0 10px 30px rgba(0,0,0,.25);
        backdrop-filter:blur(10px); transition:opacity .2s ease, background .2s ease, transform .2s ease; }
      .dev-card-arrow:hover:not(:disabled){ background:rgba(8,18,48,.62); transform:translateY(-50%) scale(1.035); }
      .dev-card-arrow:focus-visible,.dev-card-dot:focus-visible{ outline:2px solid rgba(245,166,35,.95); outline-offset:4px; }
      .dev-card-arrow:disabled{ opacity:.28; cursor:default; }
      .dev-card-arrow--prev{ left:clamp(14px,4vw,64px); }
      .dev-card-arrow--next{ right:clamp(14px,4vw,64px); }
      .dev-card-arrow span{ font-family:"JetBrains Mono",monospace; font-size:28px; line-height:1; }
      .dev-card-dots{ position:absolute; left:50%; bottom:clamp(22px,5vh,54px); z-index:7; display:flex; gap:4px; transform:translateX(-50%); pointer-events:auto; }
      .dev-card-dot{ width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
        background:transparent; }
      .dev-card-dot::before{ content:''; width:11px; height:11px; border-radius:50%; border:1px solid rgba(225,235,255,.42);
        background:rgba(225,235,255,.16); box-shadow:0 0 0 5px rgba(225,235,255,0); transition:background .2s ease, border-color .2s ease, box-shadow .2s ease; }
      .dev-card-dot.is-active::before{ background:rgba(245,166,35,.92); border-color:rgba(245,166,35,.95); box-shadow:0 0 0 5px rgba(245,166,35,.12); }
      @media(prefers-reduced-motion:reduce){
        .dev-glass-stack .html-card,.dev-glass-stack .html-card.is-active{ transition:none; }
      }

      @media (max-width:760px){
        .dev-glass-stack .content{ flex-direction:column; align-items:flex-start; gap:22px; padding:42px 30px; }
        .dev-glass-stack .svccol{ flex:0 0 auto; }
        .dev-glass-stack .svc li{ margin-bottom:18px; }
      }