/* ============================================================
   components.css — 可重用元件
   創巢數位 Nest Digital | 版本 redesign-v1
   禁止：在此寫任何頁面專屬樣式
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. 導覽列 (Nav)
   ════════════════════════════════════════════════════════════ */

/* ─── 全寬橫楣 Nav ───
   貼頂滿寬橫楣（非 SaaS 慣用 floating glass pill）
   連結用 Mono uppercase；hover 時 Fraunces wght 軸動 + cyan hairline 滑入
*/
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);

    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(var(--c-stellar-rgb), 0.08);
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
    height: 56px;

    transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

/* 底緣亮青光線（與左側 .manifesto__line 同結構：全色值漸層 + opacity 控亮度）
   .site-nav::before 與 .scrolled box-shadow 都用 c-cyan 保持同色系 */
.site-nav::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--c-cyan) 50%,
        transparent 100%
    );
    opacity: 0.55;
    transition: opacity var(--t-base);
    pointer-events: none;
}

.site-nav:hover::before {
    opacity: 1;
}

.site-nav.scrolled {
    background: rgba(var(--c-black-rgb), 0.92);
    border-bottom-color: rgba(var(--c-stellar-rgb), 0.14);
    box-shadow: 0 1px 0 rgba(var(--c-cyan-rgb), 0.18);
}

/* ─── 品牌區：純文字並行排版（中文在前、英文在後）2026-05-06 重設計
   單行 baseline 對齊，中英並列形成「主訴求 + 副標」連續閱讀節奏。 */
.nav__brand {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 1em;
    text-decoration: none;
    line-height: 1;
}

.nav__brand-zh {
    font-family: var(--f-serif-cjk);   /* Chiron Sung HK，與 h1 主標同家族延續品牌個性 */
    font-size: 17px;  /* 16 → 17 中英比例平衡，中文主訴求視覺重量提升 */
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--c-stellar);
}

.nav__brand-en {
    font-family: var(--f-mono);        /* JetBrains Mono，technical wordmark 質感 */
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-cyan);
}

/* 中英文之間的垂直冷光線
   layout 解耦：外 span 在 flex flow 只佔 1em 高度（不撐高 parent，baseline 對齊不被破壞）
   視覺線條由 ::before 絕對定位向上下兩端伸出（top -22px 上延、bottom -25px 下延）
   y 範圍 ~ nav y=-2 to y=61：上方略出 nav 頂、下方 5px 微超出 nav 底緣 hairline
   gradient peak 在 50%（線條中心 ≈ brand 文字高度），向兩端漸隱
   下半段 75-92% 保留可見 alpha 讓過 hairline 後仍有 0.23 → 0 漸隱尾段 */
.nav__brand-divider {
    width: 1px;
    height: 1em;
    align-self: center;
    flex-shrink: 0;
    position: relative;
}

.nav__brand-divider::before {
    content: '';
    position: absolute;
    top: -22px;
    bottom: -25px;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--c-cyan-rgb), 0.30) 25%,
        rgba(var(--c-cyan-rgb), 0.85) 50%,
        rgba(var(--c-cyan-rgb), 0.55) 75%,
        rgba(var(--c-cyan-rgb), 0.30) 92%,
        transparent 100%
    );
    box-shadow: 0 0 4px rgba(var(--c-cyan-rgb), 0.30);
}

/* ─── 連結區：絕對置中，CTA 靠右（margin-left: auto） ──── */
.nav__links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 44px);
}

.nav__links a {
    font-family: var(--f-serif-cjk);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.1em;  /* 0.35em → 0.1em 字距收斂、字像詞不像散字 */
    color: color-mix(in srgb, var(--c-blue), white 70%);
    /* idle 拿掉 blue 暈光（保留 hover 時才有），降噪 + 拉開層次 */
    position: relative;
    padding: 18px 0;
    transition: color 0.18s ease, text-shadow 0.18s ease;
}

/* Hover hairline：從中心向兩側拉開的 cyan 細線
   位於文字上方靠 nav 頂端區域（top: 8px from element top，元素 padding-top 18px 內，距文字上緣 ~10px） */
.nav__links a::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--c-cyan);
    box-shadow: 0 0 6px rgba(var(--c-cyan-rgb), 0.6);
    transform: translateX(-50%);
    transition: width 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nav__links a:hover {
    color: var(--c-cyan);
    text-shadow:
        0 0 8px rgba(var(--c-cyan-rgb), 1),
        0 0 22px rgba(var(--c-cyan-rgb), 0.5);
}

.nav__links a:hover::after {
    width: 100%;
}

/* Active：短刻度劃 + cyan 冷光（與 hover 同調，表示「當前頁」） */
.nav__links a.active {
    color: var(--c-cyan);
    text-shadow:
        0 0 8px rgba(var(--c-cyan-rgb), 0.8),
        0 0 20px rgba(var(--c-cyan-rgb), 0.35);
}

.nav__links a.active::after {
    width: 18px;
    background: rgba(var(--c-stellar-rgb), 0.9);
    box-shadow: none;
}

/* ─── CTA：純文字 + 箭頭（2026-05-06 拿掉描邊框） ──── */
.nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;  /* 強制推到右側 */
    font-family: var(--f-serif-cjk);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.28em;
    color: var(--c-stellar) !important;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s ease;
}

.nav__cta-arrow {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    margin-left: 4px;
    transform: translateX(0);
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease;
}

.nav__cta:hover {
    color: var(--c-cyan) !important;
}

.nav__cta:hover .nav__cta-arrow {
    transform: translateX(3px);
}

.nav__cta::after {
    display: none !important;
}

/* ─── Hamburger 按鈕（mobile 顯示，桌機隱藏）─── */
.nav__hamburger {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    margin-left: auto;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    position: relative;
    z-index: 1;
}

.nav__hamburger-line {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--c-stellar);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease,
                background 0.2s ease;
    transform-origin: center;
}

.nav__hamburger:hover .nav__hamburger-line {
    background: var(--c-cyan);
}

/* 開啟狀態：上下兩條變 X、中間一條淡出 */
.site-nav.is-open .nav__hamburger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
    background: var(--c-cyan);
}

.site-nav.is-open .nav__hamburger-line:nth-child(2) {
    opacity: 0;
}

.site-nav.is-open .nav__hamburger-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
    background: var(--c-cyan);
}

/* mobile 內 .nav__links 的「聯絡我們」項目（dropdown 收進選單時使用），桌機隱藏 */
.nav__links-cta-mobile {
    display: none;
}

@media (max-width: 900px) {
    /* 桌機 nav__links / nav__cta 隱藏；mobile 改用 hamburger 抽屜 */
    .site-nav .nav__links,
    .site-nav .nav__cta {
        display: none;
    }

    /* 顯示 hamburger 按鈕 */
    .nav__hamburger {
        display: flex;
    }

    /* 開啟時 nav__links 從 nav 下方滑入：full-width、垂直堆疊、深黑半透 + cyan border */
    .site-nav.is-open .nav__links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        /* 從 nav 底部開始的 dropdown panel */
        position: fixed;
        top: 56px;                      /* nav 高度 */
        left: 0;
        right: 0;
        transform: none;                /* 覆寫桌機的 translateX(-50%) */

        background: rgba(var(--c-black-rgb), 0.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(var(--c-cyan-rgb), 0.30);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

        padding: 0.5rem 0;
        z-index: calc(var(--z-nav) - 1);
    }

    .site-nav.is-open .nav__links li {
        border-bottom: 1px solid rgba(var(--c-stellar-rgb), 0.06);
    }

    .site-nav.is-open .nav__links li:last-child {
        border-bottom: 0;
    }

    .site-nav.is-open .nav__links a {
        display: block;
        width: 100%;
        padding: 1rem clamp(1.25rem, 5vw, 2rem);
        font-size: 1rem;
        letter-spacing: 0.16em;
        color: var(--c-stellar);
        text-shadow: none;  /* 抽屜內裝模式不需 hover 暈光殘影 */
    }

    .site-nav.is-open .nav__links a:hover,
    .site-nav.is-open .nav__links a.active {
        color: var(--c-cyan);
        background: rgba(var(--c-cyan-rgb), 0.05);
    }

    /* 抽屜內 hover hairline 隱藏（從中心展開的設計只適合桌機橫向 nav） */
    .site-nav.is-open .nav__links a::after {
        display: none;
    }

    /* 抽屜內顯示「聯絡我們」項目（雖跟 .nav__cta 重複，但 dropdown 內「聯絡」是主訴求 CTA） */
    .nav__links-cta-mobile {
        display: list-item;
    }

    .site-nav.is-open .nav__links-cta-mobile a {
        color: var(--c-yellow);
    }
}


/* ════════════════════════════════════════════════════════════
   2. 玻璃擬態卡片 (Glass Card)
   ════════════════════════════════════════════════════════════ */

/* ──── Liquid Glass 水狀卡片（2026-05-07 借用 Apple Liquid Glass 三技法）────
   ① 邊緣折射光：border-box gradient 模擬水鏡邊緣光環（取代 1px solid border）
   ② 內部水面反光：多層 inset box-shadow 形成「光打在水面」的體積感
   ③ Hover 整片折射：::after radial cyan 微光浮現
   材質角色：.card 本體 = 冷藍水狀；.service-card__icon / __arrow = 黃色 CTA 訊號（分工）
*/
.card {
    /* 雙層背景：padding-box 玻璃底色 / border-box 折射光環 */
    background:
        linear-gradient(135deg,
            rgba(var(--c-blue-rgb), 0.10) 0%,
            rgba(var(--c-blue-rgb), 0.18) 100%) padding-box,
        linear-gradient(135deg,
            rgba(var(--c-cyan-rgb), 0.45) 0%,
            rgba(var(--c-cyan-rgb), 0.08) 35%,
            rgba(var(--c-blue-rgb), 0.10) 65%,
            rgba(var(--c-cyan-rgb), 0.30) 100%) border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    padding: var(--sp-md);
    position: relative;
    overflow: hidden;

    /* 多層光影：inset 水面反光 + inset 體積陰影 + inset 上方光暈 + 外部浮起投影 */
    box-shadow:
        inset 0 1px 0 rgba(var(--c-cyan-rgb), 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        inset 0 40px 60px -40px rgba(var(--c-cyan-rgb), 0.10),
        0 8px 32px rgba(0, 0, 0, 0.20);

    transition:
        transform var(--t-base),
        box-shadow var(--t-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(var(--c-cyan-rgb), 0.32),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        inset 0 40px 60px -40px rgba(var(--c-cyan-rgb), 0.20),
        0 12px 40px rgba(var(--c-cyan-rgb), 0.18),
        0 0 24px rgba(var(--c-yellow-rgb), 0.12);
}

/* 上半部水面反光漸層（取代原右上角藍光點，現在是光打在水面） */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(var(--c-stellar-rgb), 0.06) 0%,
        transparent 100%);
    pointer-events: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Hover 整片折射光（cyan radial，預設居中；後續可由 JS 更新 --card-mx/my 改鼠標跟隨） */
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--card-mx, 50%) var(--card-my, 50%),
        rgba(var(--c-cyan-rgb), 0.20) 0%,
        transparent 55%
    );
    opacity: 0;
    transition: opacity var(--t-base);
    pointer-events: none;
    border-radius: var(--radius-lg);
}

.card:hover::after {
    opacity: 1;
}


/* ════════════════════════════════════════════════════════════
   3. 按鈕 (Buttons — 2026-05-07 Apple Liquid Glass 風重設計)
   設計語言：呼應服務卡片 Liquid Glass 質感（雙 background gradient + inset 光影）
   字型：var(--f-sans) Noto Sans TC 500 取代 Chiron Sung HK 仿宋（按鈕用 sans 不用宋）
   互動：Apple ease-out-expo transition (cubic-bezier(0.16, 1, 0.3, 1))
        + :active scale(0.97) 點擊回饋
        + 黃色 CTA ::after 光暈擴散（visualEffect 風）
   ════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.8rem;
    border-radius: 10px;  /* 6px → 10px Apple visionOS 風 */
    font-family: var(--f-sans);  /* 仿宋 → Noto Sans TC */
    font-weight: 500;  /* 700 → 500 更精緻 */
    font-size: var(--fs-base);
    letter-spacing: 0.04em;  /* 0.06em → 0.04em 收斂 */
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);  /* Apple ease-out-expo */
}

.btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease-out;
}

/* ── 訊號型 (.btn--primary)：液態玻璃藍按鈕（呼應服務卡片）── */
.btn--primary {
    background:
        linear-gradient(135deg,
            rgba(var(--c-blue-rgb), 0.12) 0%,
            rgba(var(--c-blue-rgb), 0.22) 100%) padding-box,
        linear-gradient(135deg,
            rgba(var(--c-cyan-rgb), 0.42) 0%,
            rgba(var(--c-cyan-rgb), 0.10) 50%,
            rgba(var(--c-cyan-rgb), 0.32) 100%) border-box;
    color: rgba(var(--c-stellar-rgb), 0.95);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    box-shadow:
        inset 0 1px 0 rgba(var(--c-cyan-rgb), 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 4px 16px rgba(var(--c-blue-rgb), 0.18);
}

.btn--primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(var(--c-cyan-rgb), 0.40),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 6px 24px rgba(var(--c-cyan-rgb), 0.30),
        0 0 36px rgba(var(--c-blue-rgb), 0.25);
    color: var(--c-stellar);
}

/* ── 黃金型 (.btn--yellow)：液態金按鈕（CTA 主轉換、實體金屬光感）── */
.btn--yellow {
    background:
        linear-gradient(180deg,
            rgba(var(--c-yellow-rgb), 1.0) 0%,
            rgba(var(--c-amber-rgb), 0.92) 100%) padding-box,
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(var(--c-yellow-rgb), 0.4) 50%,
            rgba(var(--c-amber-rgb), 0.7) 100%) border-box;
    color: var(--c-black);
    font-weight: 700;  /* 900 → 700 精緻 */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),  /* 頂邊白高光：實體表面光 */
        inset 0 -1px 2px rgba(0, 0, 0, 0.20),     /* 底邊黑陰影：實體深度 */
        0 4px 18px rgba(var(--c-yellow-rgb), 0.35),
        0 0 0 0 rgba(var(--c-yellow-rgb), 0);     /* 預備光暈擴散 */
}

.btn--yellow:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 2px rgba(0, 0, 0, 0.25),
        0 8px 32px rgba(var(--c-yellow-rgb), 0.45),
        0 0 48px rgba(var(--c-yellow-rgb), 0.20);
}

.btn--yellow:active {
    transform: translateY(-2px) scale(0.97);
}

/* 黃色 CTA 點擊瞬間光暈擴散（Apple visualEffect 風：::after radial 從中心炸開） */
.btn--yellow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.22) 30%,
        transparent 60%);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
    border-radius: inherit;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.btn--yellow:active::after {
    opacity: 1;
    transform: scale(2);
    transition: opacity 0.05s ease-in, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 箭頭 icon 動畫（內部箭頭 hover 右移） */
.btn .btn-arrow {
    display: inline-block;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover .btn-arrow {
    transform: translateX(4px);
}


/* ════════════════════════════════════════════════════════════
   4. 標籤 (Tags / Badges)
   ════════════════════════════════════════════════════════════ */

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--f-serif);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--c-muted);
}

.tag--yellow {
    border-color: rgba(var(--c-yellow-rgb), 0.4);
    background: rgba(var(--c-yellow-rgb), 0.08);
    color: var(--c-yellow);
}

/* Size modifier — 卡片內標籤縮小變體 */
.tag--xs {
    font-size: 0.65rem;
    padding: 0.22rem 0.6rem;
}


/* ════════════════════════════════════════════════════════════
   5. Section 標題區塊
   ════════════════════════════════════════════════════════════ */

.section-header {
    margin-bottom: var(--sp-lg);
}

.section-header__eyebrow {
    font-family: var(--f-serif);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-yellow);
    margin-bottom: var(--sp-sm);
}

.section-header__title {
    color: var(--c-white);
}

.section-header__title .accent {
    color: var(--c-yellow);
}


/* ════════════════════════════════════════════════════════════
   6. 服務卡片 (Service Card — 2026-05-07 極簡編輯陳列)
   結構：[head: label] → [body: title + desc + tag] → [arrow]
   設計判斷：移除編號 / icon 等視覺主錨，靠 Liquid Glass 質感 + 字型對位 +
            留白建立品牌識別。服務區是「陳列、選擇」性質，不該爆破。
   字型對位：
     - label = JetBrains Mono 黃色 + 上方冷光分隔線（呼應全站冷光線語言）
     - title = Chiron Sung HK 中文（呼應 Hero h1 主標）
     - desc = Noto Sans TC（內文）
     - arrow = Italiana italic「Read more」+ 線條延展
   ════════════════════════════════════════════════════════════ */

.service-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    cursor: pointer;
    text-decoration: none;
    color: var(--c-white);
}

/* 內容推到 .card ::before/::after 之上（Liquid Glass 折射層在底） */
.service-card > * {
    position: relative;
    z-index: 1;
}

.service-card__head {
    display: flex;
}

/* label：上方冷光分隔線 + mono uppercase 黃色（取代「左 border」用「上 border」） */
.service-card__label {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    color: var(--c-yellow);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-top: var(--sp-xs);
    border-top: 1px solid rgba(var(--c-yellow-rgb), 0.45);
    line-height: 1.4;
    align-self: flex-start;  /* 限制寬度貼齊文字、避免上分隔線拉滿整列 */
}

/* 中段：title + desc 緊湊群組 */
.service-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.service-card__title {
    font-family: var(--f-serif-cjk);
    font-size: var(--fs-xl);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--c-stellar);
}

.service-card__desc {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    line-height: 1.7;
}

/* 底部 arrow：Italiana italic 「Read more」+ 線條延展（hover 時拉長變黃） */
.service-card__arrow {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--f-display-en);
    font-style: italic;
    font-size: var(--fs-md);
    color: rgba(var(--c-stellar-rgb), 0.85);
    letter-spacing: 0.02em;
    transition: color var(--t-fast);
}

.service-card__arrow-line {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: rgba(var(--c-stellar-rgb), 0.55);
    transition: width var(--t-base), background var(--t-base);
}

.card:hover .service-card__arrow {
    color: var(--c-yellow);
}

.card:hover .service-card__arrow-line {
    width: 56px;
    background: rgba(var(--c-yellow-rgb), 0.8);
}

/* D 顧問卡的 tag row（「詢價制」黃 tag 容器） */
.service-card__tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: var(--sp-xs) 0;
}


/* ════════════════════════════════════════════════════════════
   7. 分隔線
   ════════════════════════════════════════════════════════════ */

.divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin: var(--sp-xl) 0;
}


/* ════════════════════════════════════════════════════════════
   8. 頁尾 (Footer)
   設計方向：電影片尾收束（end credits）
   ─ 上方對稱冷光線（呼應 final-cta__divider，更克制）
   ─ 巨型 NEST DIGITAL 大字（Italiana hairline serif）
   ─ 雜誌式座標讀出條（地址）
   ─ 兩欄資訊（CONTACT / STUDIO）
   ─ 最底版權行
   ════════════════════════════════════════════════════════════ */

.site-footer {
    position: relative;
    z-index: var(--z-content);
    padding: var(--sp-w1) 0 var(--sp-md);
}

.site-footer__inner {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--sec-px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 上方對稱冷光線：與 final-cta__divider 同設計但更克制（更窄、更弱） */
.site-footer__divider {
    width: clamp(240px, 35vw, 400px);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--c-blue-rgb), 0.20) 25%,
        rgba(var(--c-blue-rgb), 0.65) 50%,
        rgba(var(--c-blue-rgb), 0.20) 75%,
        transparent 100%
    );
    box-shadow: 0 0 8px rgba(var(--c-blue-rgb), 0.30);
}

/* 品牌大字區塊 */
.site-footer__brand-block {
    margin-top: var(--sp-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* NEST DIGITAL 巨型大字 — Italiana hairline serif，雜誌封面尺度 */
.site-footer__brand-mark {
    font-family: var(--f-display-en);
    font-size: clamp(2.5rem, 10vw, 9rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.06em;
    color: rgba(var(--c-stellar-rgb), 0.92);
    margin: 0;
    white-space: nowrap;
}

/* 大字下方地址（座標讀出條） */
.site-footer__location {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    color: rgba(var(--c-stellar-rgb), 0.45);
    margin: 1.5em 0 0;
}

/* 兩欄資訊區（CONTACT / STUDIO 雙公司）
   2026-05-11 修：原 `1fr 2.2fr / max-width 960px` 固定容器框架造成「視覺內容中心 vs 容器幾何中心」偏差 145px
   （CONTACT 內容貼欄左 + STUDIO pair 置中於 2.2fr 寬欄，視覺重心嚴重左偏）。
   改 `auto auto` shrink-to-content + 移除固定寬度，讓父層 .site-footer__inner align-items: center
   把整組「CONTACT cluster + gap + STUDIO cluster」當一個自然 fit 的單元置中於 viewport，視覺與幾何重合。 */
.site-footer__info {
    margin-top: var(--sp-w1);
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--sp-w1);
    text-align: left;
}

.site-footer__col-label {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.2em;
    color: rgba(var(--c-cyan-rgb), 0.55);
    margin: 0 0 var(--sp-sm);
}

.site-footer__col p {
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    color: rgba(var(--c-stellar-rgb), 0.78);
    line-height: 1.7;
    margin: 0;
}

/* STUDIO 雙公司聯名 pair：兩家公司資訊水平排列、中間冷光 X 連接（聯名符號）
   entry flex 0 0 auto 收文字寬度、pair justify-content center 整組居中 → X 視覺貼在文字之間 */
.site-footer__studio-pair {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    flex-wrap: wrap;
    justify-content: center;
}

.site-footer__studio-entry {
    flex: 0 0 auto;
}

/* 雙公司聯名 X：兩條交叉冷光線手繪、深藍 c-blue 配三層光暈
   不用 × 字符（Italiana 字型視覺重心歪、且筆畫粗細跟「冷光線」氣質不符） */
.site-footer__studio-x {
    position: relative;
    flex-shrink: 0;
    width: clamp(32px, 3.2vw, 44px);
    height: clamp(32px, 3.2vw, 44px);
    user-select: none;
}

.site-footer__studio-x::before,
.site-footer__studio-x::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--c-blue);
    /* 三層深藍 box-shadow 模擬冷光霓虹散射 */
    box-shadow:
        0 0 4px rgba(var(--c-blue-rgb), 0.90),
        0 0 10px rgba(var(--c-blue-rgb), 0.60),
        0 0 22px rgba(var(--c-blue-rgb), 0.32);
    transform-origin: center;
}

.site-footer__studio-x::before {
    transform: translateY(-50%) rotate(45deg);
}

.site-footer__studio-x::after {
    transform: translateY(-50%) rotate(-45deg);
}

/* 最底版權行 */
.site-footer__copy {
    margin-top: var(--sp-lg);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    color: rgba(var(--c-stellar-rgb), 0.30);
}

/* 手機版（暫定基礎，待桌機定案後再精修） */
@media (max-width: 900px) {
    .site-footer {
        padding: var(--sp-lg) 0 var(--sp-md);
    }
    .site-footer__brand-mark {
        letter-spacing: 0.02em;
    }
    .site-footer__info {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
        text-align: center;
        margin-top: var(--sp-lg);
    }

    /* mobile：雙公司改垂直堆疊、cyan X 仍在中間做視覺連接 */
    .site-footer__studio-pair {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .site-footer__studio-entry {
        flex: 0 1 auto;
    }
}