/* ============================================================
   pj2 — 工程系統頁改版原型
   所有樣式都掛在 .pj2 / .pj2-* 底下,避免影響共用 master 的樣式
   ============================================================ */
:root {
    --pj2-navy: #0c1629;
    --pj2-navy-2: #13213d;
    --pj2-ink: #1e2022;
    --pj2-muted: #677788;
    --pj2-line: #e3e8f0;
    --pj2-soft: #f5f8fc;
    --pj2-paper: #f6f1e6;
    --pj2-blue: #377dff;
    --pj2-blue-2: #6aa1ff;
    --pj2-amber: #ffb020;
    --pj2-red: #e5484d;
    --pj2-green: #20b486;
    --pj2-radius: 14px;
    --pj2-font: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
}

.pj2 { font-family: var(--pj2-font); color: var(--pj2-ink); overflow-x: hidden; }
.pj2 h1, .pj2 h2, .pj2 h3, .pj2 h4 { font-family: var(--pj2-font); letter-spacing: .01em; }

/* ---------- 共用 ---------- */
.pj2-section { padding: 88px 0; }
.pj2-section--soft { background: var(--pj2-soft); }
.pj2-section--paper { background: var(--pj2-paper); }
/* 「深色」區塊改用與主視覺同色系的亮藍 (白字仍清楚) */
.pj2-section--dark {
    color: #eef4ff;
    background:
        radial-gradient(800px 460px at 90% 0%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(600px 400px at 0% 100%, rgba(255,200,90,.12), transparent 60%),
        linear-gradient(150deg, #2458b8 0%, #3572e3 60%, #4a86f0 100%);
}
.pj2-section--dark h2, .pj2-section--dark h3 { color: #fff; }
.pj2-section--dark p { color: #e6eeff; }
.pj2-section--dark .pj2-eyebrow { color: #ffd66e; }
.pj2-section--dark .pj2-btn--primary { background: #fff; color: #1f55c0 !important; box-shadow: 0 10px 26px rgba(10,30,80,.25); }
.pj2-section--dark .pj2-btn--primary:hover { background: #f1f6ff; }
.pj2-section--dark .pj2-btn--ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }

.pj2-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.pj2-head h2 { font-size: 2rem; font-weight: 700; margin-bottom: .6rem; }
.pj2-head p { color: var(--pj2-muted); font-size: 1.05rem; margin: 0; }
.pj2-section--dark .pj2-head p { color: #dfe9ff; }

.pj2-eyebrow {
    display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .12em;
    color: var(--pj2-amber); margin-bottom: .9rem;
}
.pj2-eyebrow--dark { color: var(--pj2-blue); }

.pj2-btn {
    display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
    padding: .8rem 1.6rem; font-weight: 600; font-size: 1rem; border: 1.5px solid transparent;
    cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    text-decoration: none !important; font-family: var(--pj2-font);
}
.pj2-btn:hover { transform: translateY(-2px); }
.pj2-btn--primary { background: var(--pj2-blue); color: #fff !important; box-shadow: 0 8px 24px rgba(55,125,255,.35); }
.pj2-btn--primary:hover { background: #2a6ae8; }
.pj2-btn--ghost { background: rgba(255,255,255,.06); color: #fff !important; border-color: rgba(255,255,255,.35); }
.pj2-btn--ghost:hover { background: rgba(255,255,255,.12); }
.pj2-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

.pj2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pj2-green); box-shadow: 0 0 0 4px rgba(32,180,134,.25); }

/* AI 小球 (全站 AI 的視覺符號) */
.pj2-orb {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0 10%, #8fb8ff 22%, var(--pj2-blue) 60%, #1d4fc4 100%);
    box-shadow: 0 0 0 4px rgba(55,125,255,.18), 0 0 22px rgba(55,125,255,.6);
    animation: pj2-pulse 2.4s ease-in-out infinite;
}
.pj2-orb--sm { width: 26px; height: 26px; }
@keyframes pj2-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(55,125,255,.18), 0 0 18px rgba(55,125,255,.5); }
    50% { box-shadow: 0 0 0 7px rgba(55,125,255,.10), 0 0 30px rgba(55,125,255,.8); }
}

/* ---------- ① Hero ---------- */
/* 主視覺用較亮的藍 (header 的白字與淺黃 logo 需要有色底才看得清楚) */
.pj2-hero {
    position: relative; color: #eef4ff; padding: 72px 0 96px;
    background:
        radial-gradient(900px 520px at 85% 10%, rgba(255,255,255,.22), transparent 60%),
        radial-gradient(640px 420px at 0% 100%, rgba(255,200,90,.16), transparent 60%),
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(135deg, #2458b8 0%, #3572e3 55%, #4a86f0 100%);
}
.pj2-hero .pj2-eyebrow { color: #ffd66e; }
.pj2-hero__title { color: #fff; font-size: 2.6rem; line-height: 1.3; font-weight: 700; margin-bottom: 1.2rem; text-shadow: 0 2px 16px rgba(10,30,80,.18); }
.pj2-hl { color: #ffd66e; }
.pj2-hero__lead { font-size: 1.08rem; line-height: 1.85; max-width: 560px; margin-bottom: 2rem; color: #eef4ff; }
.pj2-hero .pj2-btn--primary { background: #fff; color: #1f55c0 !important; box-shadow: 0 10px 26px rgba(10,30,80,.25); }
.pj2-hero .pj2-btn--primary:hover { background: #f1f6ff; }
.pj2-hero .pj2-btn--ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }
.pj2-trust { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .9rem; color: #e1ebff; }
.pj2-trust li::before { content: "✓"; color: #ffd66e; margin-right: .4rem; font-weight: 700; }

/* hero mockup */
.pj2-mock {
    position: relative; background: #fff; border-radius: var(--pj2-radius); color: var(--pj2-ink);
    box-shadow: 0 30px 80px rgba(0,0,0,.45); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
    margin: 0 8px 40px;
}
.pj2-mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--pj2-line); font-size: .78rem; color: var(--pj2-muted); }
.pj2-mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #e3e8f0; }
.pj2-mock__bar span { margin-left: 8px; }
.pj2-mock__body { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pj2-mock__kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pj2-mock__kpis div { background: var(--pj2-soft); border-radius: 10px; padding: 10px 12px; }
.pj2-mock small { display: block; font-size: .72rem; color: var(--pj2-muted); margin-bottom: 4px; }
.pj2-mock__kpis b { font-size: 1.15rem; }
.pj2-mock__kpis b.up { color: var(--pj2-green); }
.pj2-mock__chart, .pj2-mock__budget { border: 1px solid var(--pj2-line); border-radius: 10px; padding: 10px 12px; }
.pj2-mock__chart svg { width: 100%; height: 96px; }
.pj2-mock__chart .plan { fill: none; stroke: #c6d3e6; stroke-width: 2.5; stroke-dasharray: 5 5; }
/* 示意畫面的動畫在頁面載入 3 秒後才開始 */
.pj2-mock__chart .real { fill: none; stroke: var(--pj2-blue); stroke-width: 3; stroke-dasharray: 260; stroke-dashoffset: 260; animation: pj2-draw 2.2s 3.4s ease-out forwards; }
.pj2-mock__chart circle { fill: var(--pj2-blue); opacity: 0; animation: pj2-fade .3s 5.5s forwards; }
@keyframes pj2-draw { to { stroke-dashoffset: 0; } }
@keyframes pj2-fade { to { opacity: 1; } }
.pj2-mock__legend { display: flex; gap: 12px; font-size: .7rem; color: var(--pj2-muted); }
.pj2-mock__legend span::before { content: ""; display: inline-block; width: 12px; height: 3px; margin-right: 4px; vertical-align: middle; }
.pj2-mock__legend .p::before { background: #c6d3e6; }
.pj2-mock__legend .r::before { background: var(--pj2-blue); }
.pj2-mock__budget .row-b { display: grid; grid-template-columns: 44px 1fr 34px; align-items: center; gap: 6px; font-size: .75rem; margin-top: 10px; }
.pj2-mock__budget .row-b div { height: 8px; background: var(--pj2-soft); border-radius: 6px; overflow: hidden; }
.pj2-mock__budget .row-b i { display: block; height: 100%; background: var(--pj2-blue); border-radius: 6px; transform-origin: left; animation: pj2-grow 1.4s 3s ease-out both; }
.pj2-mock__budget .row-b.warn i { background: linear-gradient(90deg, var(--pj2-amber), var(--pj2-red)); }
.pj2-mock__budget .row-b.warn em { color: var(--pj2-red); font-weight: 700; }
.pj2-mock__budget em { font-style: normal; text-align: right; }
@keyframes pj2-grow { from { transform: scaleX(0); } }
.pj2-mock__toast {
    position: absolute; left: -24px; bottom: -34px; right: 40px; display: flex; gap: 12px; align-items: flex-start;
    background: var(--pj2-navy-2); color: #dbe4f3; border: 1px solid rgba(143,184,255,.35); border-radius: 12px;
    padding: 12px 14px; font-size: .85rem; line-height: 1.55; box-shadow: 0 16px 40px rgba(0,0,0,.45);
    opacity: 0; transform: translateY(12px); animation: pj2-toast .5s 5.9s ease-out forwards;
}
.pj2-mock__toast b { display: block; color: #fff; }
@keyframes pj2-toast { to { opacity: 1; transform: none; } }

/* ---------- ② 痛點 ---------- */
.pj2-pain { height: 100%; border: 1px solid var(--pj2-line); border-radius: var(--pj2-radius); padding: 26px 22px; background: #fff; transition: box-shadow .2s, transform .2s; }
.pj2-pain:hover { box-shadow: 0 14px 34px rgba(12,22,41,.08); transform: translateY(-3px); }
.pj2-pain__ic { font-size: 1.8rem; margin-bottom: .8rem; }
.pj2-pain h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.pj2-pain p { color: var(--pj2-muted); margin: 0; line-height: 1.7; }

/* ---------- ③ 動畫播放器 ---------- */
.pj2-story { max-width: 960px; margin: 0 auto; }
.pj2-story__stage {
    position: relative; background: #fbf8f1; border: 2px solid #2b2b2b; border-radius: 18px; overflow: hidden;
    box-shadow: 8px 8px 0 rgba(43,43,43,.12); aspect-ratio: 16 / 9;
}
.pj2-story__stage svg { display: block; width: 100%; height: 100%; }
.pj2-story__stage.paused * { animation-play-state: paused !important; }
.pj2-story__cap {
    position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); max-width: 88%;
    background: rgba(255,255,255,.94); border: 2px solid #2b2b2b; border-radius: 12px; padding: .5rem 1.1rem;
    font-size: clamp(.85rem, 2vw, 1.15rem); font-weight: 600; text-align: center; color: #2b2b2b;
    transition: opacity .35s;
}
.pj2-story__cap b { color: var(--pj2-blue); }
.pj2-story__play {
    position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--pj2-blue); color: #fff; font-size: 1.8rem; box-shadow: 0 10px 30px rgba(55,125,255,.5);
    display: flex; align-items: center; justify-content: center; padding-left: 6px; transition: transform .15s;
}
.pj2-story__play:hover { transform: scale(1.06); }
.pj2-story__ctrl { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.pj2-story__btn { border: 2px solid #2b2b2b; background: #fff; border-radius: 999px; width: 40px; height: 40px; cursor: pointer; font-size: 1rem; flex: none; }
.pj2-story__track { flex: 1; display: flex; gap: 6px; }
.pj2-story__seg { flex: 1; height: 8px; border-radius: 6px; background: #e4dccb; border: 0; padding: 0; cursor: pointer; position: relative; overflow: hidden; }
.pj2-story__seg i { position: absolute; inset: 0; background: var(--pj2-blue); transform-origin: left; transform: scaleX(0); }
.pj2-story__time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--pj2-muted); flex: none; }

/* 動畫元素 */
.st-line { fill: none; stroke: #2b2b2b; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.st-thin { stroke-width: 2; }
.st-fill { fill: #fff; stroke: #2b2b2b; stroke-width: 3; }
.st-sketch { filter: url(#pj2Rough); }
.st-ai-glow { fill: var(--pj2-blue); }
.st-scene { opacity: 0; transition: opacity .6s ease; }
.st-scene.on { opacity: 1; }
.st-pop { transform-box: fill-box; transform-origin: center; }
.st-scene.on .st-pop { animation: st-pop .5s both; }
@keyframes st-pop { from { transform: scale(0); } 70% { transform: scale(1.15); } to { transform: scale(1); } }
.st-scene.on .st-fly { animation: st-fly 1.4s both; }
@keyframes st-fly { from { transform: translate(-40px, 30px); opacity: 0; } to { transform: none; opacity: 1; } }
.st-bob { animation: st-bob 2.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes st-bob { 50% { transform: translateY(-8px); } }
.st-walk { animation: st-walk .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top center; }
@keyframes st-walk { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.st-shake { animation: st-shake .25s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes st-shake { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.st-scene.on .st-grow { animation: st-grow 3.5s ease-out both; transform-box: fill-box; transform-origin: bottom; }
@keyframes st-grow { from { transform: scaleY(.15); } }
.st-scene.on .st-drawin { stroke-dasharray: 600; animation: st-drawin 2.5s ease-out both; }
@keyframes st-drawin { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.st-blink { animation: st-blink 1s steps(2) infinite; }
@keyframes st-blink { 50% { opacity: .25; } }
.st-d1 { animation-delay: .4s !important; } .st-d2 { animation-delay: .9s !important; } .st-d3 { animation-delay: 1.5s !important; }
.st-d4 { animation-delay: 2.2s !important; } .st-d5 { animation-delay: 3s !important; }

/* ---------- ④ AI 卡片 ---------- */
.pj2-ai {
    height: 100%; border-radius: var(--pj2-radius); padding: 26px 24px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(143,184,255,.18); transition: border-color .2s, transform .2s;
}
.pj2-ai:hover { border-color: rgba(143,184,255,.55); transform: translateY(-3px); }
.pj2-ai--feature { border-color: rgba(255,176,32,.45); }
.pj2-ai__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.pj2-ai__ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(55,125,255,.16); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.pj2-ai h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
.pj2-ai p { margin: 0; line-height: 1.75; }
.pj2-tag { font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; }
.pj2-tag--soon { color: var(--pj2-amber); background: rgba(255,176,32,.12); }
.pj2-tag--live { color: var(--pj2-green); background: rgba(32,180,134,.14); }

/* ---------- ⑤ 模組 ---------- */
.pj2-mod { height: 100%; border: 1px solid var(--pj2-line); border-radius: var(--pj2-radius); overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
.pj2-mod:hover { box-shadow: 0 18px 40px rgba(12,22,41,.10); transform: translateY(-3px); }
.pj2-mod img { width: 100%; height: 170px; object-fit: cover; object-position: left top; border-bottom: 1px solid var(--pj2-line); background: var(--pj2-soft); }
.pj2-mod__b { padding: 20px 22px 24px; }
.pj2-mod__k { font-size: .78rem; font-weight: 700; color: var(--pj2-blue); letter-spacing: .08em; }
.pj2-mod h3 { font-size: 1.15rem; font-weight: 700; margin: .35rem 0 .5rem; }
.pj2-mod p { color: var(--pj2-muted); line-height: 1.75; margin: 0; }

.pj2-full { border: 1px solid var(--pj2-line); border-radius: var(--pj2-radius); background: var(--pj2-soft); }
.pj2-full summary { cursor: pointer; padding: 16px 22px; font-weight: 600; color: var(--pj2-blue); list-style: none; }
.pj2-full summary::-webkit-details-marker { display: none; }
.pj2-full summary::after { content: "+"; float: right; font-size: 1.2rem; line-height: 1; }
.pj2-full[open] summary::after { content: "−"; }
.pj2-full__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 24px; padding: 4px 22px 22px; }
.pj2-full h4 { font-size: .95rem; font-weight: 700; margin: 12px 0 6px; }
.pj2-full ul { padding-left: 1.1rem; margin: 0; color: var(--pj2-muted); font-size: .92rem; line-height: 1.8; }

/* ---------- ⑥ 流程 ---------- */
.pj2-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: s; }
.pj2-flow li { position: relative; background: #fff; border: 1px solid var(--pj2-line); border-radius: 12px; padding: 44px 14px 18px; text-align: center; counter-increment: s; }
.pj2-flow li::before {
    content: counter(s); position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px; border-radius: 50%; background: var(--pj2-blue); color: #fff; font-size: .78rem; font-weight: 700; line-height: 24px;
}
.pj2-flow li:not(:last-child)::after { content: "›"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--pj2-blue); font-size: 1.4rem; font-weight: 700; z-index: 1; }
.pj2-flow b { display: block; font-size: 1rem; }
.pj2-flow span { font-size: .82rem; color: var(--pj2-muted); }
.pj2-flowlinks { text-align: center; margin-top: 28px; color: var(--pj2-muted); font-size: .92rem; }
.pj2-flowlinks a { margin: 0 .5rem; }

/* ---------- ⑦ 畫面 ---------- */
.pj2-screen { position: relative; border-radius: var(--pj2-radius); overflow: hidden; background: #000; box-shadow: 0 18px 40px rgba(12,22,41,.14); }
.pj2-screen video { display: block; width: 100%; }
.pj2-screen span { position: absolute; top: 10px; left: 10px; background: rgba(12,22,41,.75); color: #fff; font-size: .75rem; padding: .2rem .6rem; border-radius: 999px; }
.pj2-screen--phone { border-radius: 22px; border: 5px solid #1b1b1b; }

/* ---------- ⑧ Final ---------- */
.pj2-final h2 { font-size: 2.4rem; font-weight: 700; }
.pj2-final__lead { font-size: 1.08rem; line-height: 1.85; max-width: 560px; margin: 1rem 0 2rem; }
.pj2-agentcard { background: #fff; color: var(--pj2-ink); border-radius: 18px; padding: 24px; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.pj2-agentcard__h { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.pj2-agentcard__h b { display: block; }
.pj2-agentcard__h small { color: var(--pj2-green); }
.pj2-agentcard p { background: var(--pj2-soft); border-radius: 4px 14px 14px 14px; padding: 12px 14px; line-height: 1.7; margin-bottom: 14px; }
.pj2-agentcard__q { display: flex; flex-wrap: wrap; gap: 8px; }
.pj2-agentcard__q button, .pj2-chat__quick button {
    border: 1.5px solid var(--pj2-blue); color: var(--pj2-blue); background: #fff; border-radius: 999px;
    padding: .4rem .9rem; font-size: .88rem; cursor: pointer; font-family: var(--pj2-font); transition: background .15s, color .15s;
}
.pj2-agentcard__q button:hover, .pj2-chat__quick button:hover { background: var(--pj2-blue); color: #fff; }

/* ---------- AI 顧問對話視窗 ---------- */
.pj2-fab {
    position: fixed; right: 22px; bottom: 76px; z-index: 1050; display: flex; align-items: center; gap: 10px;
    background: var(--pj2-navy); color: #fff; border: 0; border-radius: 999px; padding: 8px 18px 8px 8px; cursor: pointer;
    box-shadow: 0 12px 30px rgba(12,22,41,.35); font-family: var(--pj2-font); font-weight: 600;
}
.pj2-fab.hide { display: none; }
.pj2-chat {
    position: fixed; right: 22px; bottom: 22px; z-index: 1060; width: 400px; max-width: calc(100vw - 32px);
    height: 620px; max-height: calc(100vh - 44px); background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(12,22,41,.35); display: none; flex-direction: column; font-family: var(--pj2-font);
}
.pj2-chat.open { display: flex; animation: pj2-up .25s ease-out; }
@keyframes pj2-up { from { transform: translateY(16px); opacity: 0; } }
.pj2-chat__h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--pj2-navy); color: #fff; }
.pj2-chat__h b { display: block; font-size: .98rem; }
.pj2-chat__h small { color: #8fe0c4; font-size: .75rem; }
.pj2-chat__x { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.pj2-chat__note { font-size: .72rem; background: #fff7e6; color: #8a5a00; padding: 6px 14px; border-bottom: 1px solid #f3e2bd; }
.pj2-chat__log { flex: 1; overflow-y: auto; padding: 16px; background: var(--pj2-soft); display: flex; flex-direction: column; gap: 10px; }
.pj2-msg { max-width: 86%; padding: 10px 13px; line-height: 1.65; font-size: .92rem; white-space: pre-line; }
.pj2-msg--bot { background: #fff; border: 1px solid var(--pj2-line); border-radius: 4px 14px 14px 14px; align-self: flex-start; }
.pj2-msg--me { background: var(--pj2-blue); color: #fff; border-radius: 14px 4px 14px 14px; align-self: flex-end; }
.pj2-msg b { color: var(--pj2-blue); }
.pj2-msg--typing { color: var(--pj2-muted); }
.pj2-msg--typing i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin: 0 2px; animation: pj2-typing 1s infinite; }
.pj2-msg--typing i:nth-child(2) { animation-delay: .15s; } .pj2-msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pj2-typing { 50% { opacity: .2; } }
.pj2-chat__quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; background: #fff; }
.pj2-chat__in { display: flex; gap: 8px; padding: 10px 14px 14px; background: #fff; }
.pj2-chat__in input { flex: 1; border: 1.5px solid var(--pj2-line); border-radius: 999px; padding: .55rem 1rem; font-size: .92rem; outline: none; font-family: var(--pj2-font); }
.pj2-chat__in input:focus { border-color: var(--pj2-blue); }
.pj2-chat__in button { border: 0; background: var(--pj2-blue); color: #fff; border-radius: 999px; padding: 0 1.1rem; cursor: pointer; font-weight: 600; font-family: var(--pj2-font); }

/* 對話中的卡片:推薦方案 / Demo / 名單 */
.pj2-card { align-self: stretch; background: #fff; border: 1px solid var(--pj2-line); border-radius: 12px; padding: 12px 14px; font-size: .88rem; }
.pj2-card h5 { font-size: .95rem; font-weight: 700; margin: 0 0 8px; }
.pj2-card ul { padding-left: 1.1rem; margin: 0 0 8px; line-height: 1.75; }
.pj2-card .pj2-card__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.pj2-card .pj2-card__btns button, .pj2-card .pj2-card__btns a {
    border: 0; background: var(--pj2-blue); color: #fff !important; border-radius: 8px; padding: .4rem .8rem; font-size: .82rem; cursor: pointer; text-decoration: none;
}
.pj2-card .pj2-card__btns .alt { background: var(--pj2-soft); color: var(--pj2-ink) !important; }
.pj2-card label { display: block; font-size: .78rem; color: var(--pj2-muted); margin: 6px 0 2px; }
.pj2-card input, .pj2-card select { width: 100%; border: 1px solid var(--pj2-line); border-radius: 8px; padding: .4rem .6rem; font-size: .88rem; }

/* 導覽 Demo:迷你系統畫面 */
.pj2-demo { border: 1px solid var(--pj2-line); border-radius: 10px; overflow: hidden; margin: 6px 0 10px; font-size: .76rem; }
.pj2-demo__bar { background: var(--pj2-navy); color: #fff; padding: 6px 10px; display: flex; justify-content: space-between; }
.pj2-demo table { width: 100%; border-collapse: collapse; }
.pj2-demo th, .pj2-demo td { padding: 5px 8px; border-bottom: 1px solid var(--pj2-line); text-align: right; }
.pj2-demo th:first-child, .pj2-demo td:first-child { text-align: left; }
.pj2-demo th { background: var(--pj2-soft); font-weight: 600; }
.pj2-demo .hl { background: #fff4d6; box-shadow: inset 3px 0 0 var(--pj2-amber); }
.pj2-demo .bad { color: var(--pj2-red); font-weight: 700; }
.pj2-demo .ok { color: var(--pj2-green); font-weight: 700; }
.pj2-demo__sum { display: flex; justify-content: space-between; padding: 6px 10px; background: var(--pj2-soft); }
.pj2-demo__sum.hl b { color: var(--pj2-blue); }
.pj2-steps { display: flex; gap: 4px; margin-bottom: 8px; }
.pj2-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--pj2-line); }
.pj2-steps i.on { background: var(--pj2-blue); }

/* ---------- RWD ---------- */
@media (max-width: 991.98px) {
    .pj2-hero { padding-top: 56px; }
    .pj2-hero__title { font-size: 2.1rem; }
    .pj2-mock { transform: none; margin: 0 0 40px; }
    .pj2-mock__toast { left: 12px; right: 12px; }
    .pj2-flow { grid-template-columns: repeat(3, 1fr); }
    .pj2-flow li:nth-child(3)::after { display: none; }
}
@media (max-width: 575.98px) {
    .pj2-section { padding: 64px 0; }
    .pj2-head h2 { font-size: 1.6rem; }
    .pj2-hero__title { font-size: 1.75rem; }
    .pj2-mock__body { grid-template-columns: 1fr; }
    .pj2-flow { grid-template-columns: repeat(2, 1fr); }
    .pj2-flow li::after { display: none; }
    .pj2-chat { right: 8px; bottom: 8px; max-width: calc(100vw - 16px); }
    .pj2-fab { right: 12px; bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .pj2 *, .pj2-chat * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* 動畫結尾 CTA */
.pj2-story__end { position: absolute; left: 0; right: 0; bottom: 12%; display: none; justify-content: center; gap: .8rem; }
.pj2-story__stage.ended .pj2-story__end { display: flex; }
.pj2-story__replay { background: #fff; color: #2b2b2b; border-color: #2b2b2b; }

/* ---------- 信任證明 (數字待提供) ---------- */
.pj2-proof { background: #fff; border-bottom: 1px solid var(--pj2-line); padding: 34px 0; }
.pj2-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.pj2-proof__grid b { display: inline-block; font-size: 1.7rem; font-weight: 800; color: var(--pj2-blue); line-height: 1.2; }
.pj2-proof__grid span { display: block; margin-top: .3rem; color: var(--pj2-muted); font-size: .9rem; }
/* 原型用:待提供的內容以虛線框標示,上線前移除 */
.pj2-todo { outline: 2px dashed #f0a020; outline-offset: 4px; border-radius: 4px; }

/* ---------- AI 卡片:輸入 → 產出 ---------- */
.pj2-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pj2-tag--local { color: #bfe8ff; background: rgba(96,190,255,.16); }
.pj2-ai--local { border-color: rgba(96,190,255,.4); }
.pj2-io {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: .2rem 0 .8rem;
    font-size: .82rem; font-weight: 600;
}
.pj2-io span { background: rgba(255,255,255,.08); border: 1px solid rgba(143,184,255,.3); color: #e3ecff; border-radius: 8px; padding: .22rem .55rem; }
.pj2-io span:last-child { background: rgba(55,125,255,.28); border-color: rgba(143,184,255,.6); color: #fff; }
.pj2-io i { font-style: normal; color: var(--pj2-amber); font-weight: 800; }

/* ---------- 資料安全 ---------- */
.pj2-safe {
    margin-top: 20px; border-radius: var(--pj2-radius); padding: 24px 26px;
    background: linear-gradient(90deg, rgba(32,180,134,.12), rgba(55,125,255,.08)); border: 1px solid rgba(32,180,134,.35);
    display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center;
}
.pj2-safe__h { display: flex; gap: 14px; align-items: flex-start; }
.pj2-safe__ic { font-size: 1.8rem; line-height: 1; }
.pj2-safe__h b { display: block; color: #fff; font-size: 1.15rem; margin-bottom: .3rem; }
.pj2-safe__h small { color: #b8c6dc; font-size: .88rem; line-height: 1.6; }
.pj2-safe ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pj2-safe li { font-size: .88rem; line-height: 1.65; color: #c9d3e3; }
.pj2-safe li b { display: block; color: #8fe0c4; margin-bottom: .2rem; font-size: .95rem; }

/* ---------- 方案與價格 ---------- */
.pj2-price { height: 100%; background: #fff; border: 1px solid var(--pj2-line); border-radius: var(--pj2-radius); padding: 26px 24px; text-align: center; }
.pj2-price__ic { display: inline-flex; width: 54px; height: 54px; border-radius: 50%; background: #eef4ff; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: .8rem; }
.pj2-price h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .4rem; }
.pj2-price p { color: var(--pj2-muted); margin: 0; line-height: 1.7; }
.pj2-price__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8rem; margin-top: 12px; }
.pj2-price__cta small { width: 100%; text-align: center; color: var(--pj2-muted); }
.pj2-btn--outline { background: #fff; color: var(--pj2-blue) !important; border-color: var(--pj2-blue); }
.pj2-btn--outline:hover { background: #eef4ff; }

/* ---------- LINE ---------- */
.pj2-btn--line { background: #06c755; color: #fff !important; }
.pj2-btn--line:hover { background: #05b04b; }
.pj2-linefab {
    position: fixed; right: 22px; bottom: 132px; z-index: 1050; width: 50px; height: 50px; border-radius: 50%;
    background: #06c755; color: #fff !important; font-weight: 800; font-size: .72rem; letter-spacing: .02em;
    display: flex; align-items: center; justify-content: center; text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(6,199,85,.4); font-family: var(--pj2-font);
}

@media (max-width: 991.98px) {
    .pj2-safe { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .pj2-proof__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
    .pj2-proof__grid b { font-size: 1.35rem; }
    .pj2-safe ul { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .pj2-linefab { right: 12px; bottom: 124px; width: 44px; height: 44px; }
}

/* ---------- 亮藍底上的 AI 卡片、標籤、資料安全 ---------- */
.pj2-section--dark .pj2-ai { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); box-shadow: 0 10px 30px rgba(10,30,80,.12); }
.pj2-section--dark .pj2-ai:hover { border-color: rgba(255,255,255,.7); }
.pj2-section--dark .pj2-ai--feature { border-color: rgba(255,214,110,.75); }
.pj2-section--dark .pj2-ai--local { border-color: rgba(191,232,255,.6); }
.pj2-section--dark .pj2-ai__ic { background: rgba(255,255,255,.2); }
.pj2-section--dark .pj2-ai p { color: #eaf1ff; }
.pj2-section--dark .pj2-tag--soon { color: #5a3b00; background: #ffd66e; }
.pj2-section--dark .pj2-tag--local { color: #0b3b7a; background: #d6ecff; }
.pj2-section--dark .pj2-tag--live { color: #fff; background: var(--pj2-green); }
.pj2-section--dark .pj2-io span { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.pj2-section--dark .pj2-io span:last-child { background: #fff; border-color: #fff; color: #1f55c0; }
.pj2-section--dark .pj2-io i { color: #ffd66e; }
.pj2-section--dark .pj2-safe { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.pj2-section--dark .pj2-safe__h small { color: #e1ebff; }
.pj2-section--dark .pj2-safe li { color: #eaf1ff; }
.pj2-section--dark .pj2-safe li b { color: #fff; }
.pj2-section--dark .pj2-agentcard { box-shadow: 0 24px 60px rgba(10,30,80,.28); }
.pj2-section--dark .pj2-agentcard p { color: var(--pj2-ink); }

/* 浮動 LINE 按鈕:滑過顯示 QR code (桌機) */
.pj2-linefab__qr {
    position: absolute; right: 60px; bottom: -10px; background: #fff; border-radius: 12px; padding: 10px 10px 6px;
    box-shadow: 0 16px 40px rgba(12,22,41,.25); text-align: center; opacity: 0; visibility: hidden; transform: translateX(8px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.pj2-linefab__qr img { display: block; width: 150px; height: 150px; }
.pj2-linefab__qr em { display: block; font-style: normal; font-weight: 600; font-size: .75rem; color: #1e2022; margin-top: 4px; white-space: nowrap; }
.pj2-linefab:hover .pj2-linefab__qr, .pj2-linefab:focus .pj2-linefab__qr { opacity: 1; visibility: visible; transform: none; }
@media (hover: none) { .pj2-linefab__qr { display: none; } }

/* ---------- AI 助手視窗:可移動、可縮放 ---------- */
.pj2-chat__h { cursor: move; user-select: none; -webkit-user-select: none; touch-action: none; }
.pj2-chat__x { cursor: pointer; }
.pj2-chat--free { right: auto; bottom: auto; max-width: 100vw; max-height: 100vh; animation: none !important; }
.pj2-chat--dragging { user-select: none; -webkit-user-select: none; transition: none; }
.pj2-chat--dragging * { pointer-events: none; }
.pj2-chat__rs { position: absolute; width: 20px; height: 20px; z-index: 3; touch-action: none; }
.pj2-chat__rs--nw { left: 0; top: 0; cursor: nwse-resize; }
.pj2-chat__rs--se { right: 0; bottom: 0; cursor: nwse-resize; }
/* 縮放握把:兩條斜線 */
.pj2-chat__rs::after { content: ""; position: absolute; width: 9px; height: 9px; opacity: .55; }
.pj2-chat__rs--se::after { right: 5px; bottom: 5px; border-right: 2px solid #8a97a8; border-bottom: 2px solid #8a97a8; border-bottom-right-radius: 3px; }
.pj2-chat__rs--nw::after { left: 6px; top: 6px; border-left: 2px solid rgba(255,255,255,.75); border-top: 2px solid rgba(255,255,255,.75); border-top-left-radius: 3px; }
@media (max-width: 575.98px) {
    .pj2-chat__h { cursor: default; touch-action: auto; }
    .pj2-chat__rs { display: none; }
}

/* 上方 banner (沿用原本 pj.aspx 的建築照片):輪播載入前先顯示深藍底,避免白底看不到導覽列 */
.pj2 .u-hero-v1 { background: #14224a; min-height: 84px; }
/* banner 與主視覺之間不留空隙 (原本的縮圖輪播是空的) */
.pj2 #heroNavThumb { display: none; }

/* AI 顧問 (第 1 階段,2026-10-01):蜜罐欄位、回答回饋、留資料同意、說明列連結 */
.pj2-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pj2-fb { align-self: flex-start; display: flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--pj2-muted); margin-top: -4px; }
.pj2-fb button { border: 1px solid var(--pj2-line); background: #fff; border-radius: 999px; padding: 0 8px; line-height: 1.7; cursor: pointer; }
.pj2-fb button.on { border-color: var(--pj2-blue); background: #eef3ff; }
.pj2-fb button:disabled:not(.on) { opacity: .45; cursor: default; }
.pj2-card .pj2-agree { display: flex; gap: 6px; align-items: flex-start; font-size: .76rem; margin-top: 8px; }
.pj2-card .pj2-agree input { width: auto; margin-top: 3px; }
.pj2-chat__note a { color: inherit; text-decoration: underline; margin-left: 4px; }