/* 字型：由 tools/build_fonts.py 自動產生，唔好手改 */
/* @fonts:start */
@font-face { font-family: "Chiron Hei HK"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/chiron-hei-hk.c9b950c3d6.woff2") format("woff2");
  unicode-range: U+20-7e, U+b7, U+2014, U+30fb, U+4e00, U+4e0a, U+4ea4, U+4ed8, U+4ee3, U+4f5c, U+4f86, U+500b, U+5011, U+5168, U+516c, U+5206, U+5230, U+5283, U+529b, U+52d9, U+5316, U+5373, U+539f, U+53ca, U+53ea, U+5408, U+54c1, U+554f, U+578b, U+5929, U+59cb, U+5a92, U+5b8c, U+5c0b, U+5c6c, U+5e7e, U+5fc3, U+5feb, U+606f, U+60a8, U+60f3, U+611f, U+61c9, U+6210-6211, U+6230, U+6253, U+641c, U+65b0, U+65b9, U+65bc, U+65e5, U+6700, U+670d, U+672a, U+672c, U+6790, U+6838, U+6848, U+6cd5, U+6d41, U+6d88, U+6e2c, U+6e2f, U+700f, U+71df, U+724c, U+7406, U+7522, U+7528, U+7531, U+7565, U+767c, U+76ee, U+79d2, U+7a0b, U+7a3f, U+7acb, U+7ad9, U+7b56, U+7cfb, U+7d71, U+7db2, U+7dda, U+80fd, U+8207, U+8996, U+89ba, U+89bd, U+8a08, U+8a2d, U+8cea, U+8d77, U+8ddf, U+8fed, U+901f-9020, U+90e8, U+92b7, U+958b, U+95dc, U+9700, U+9801, U+9805, U+9867, U+9996, U+9a57, U+9ad4, U+9ad8, U+ff0c, U+ff1a; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/space-grotesk.df360a0fd5.woff2") format("woff2");
  unicode-range: U+20-7e, U+a9, U+b7, U+2013-2014, U+2022, U+2026, U+203a, U+2192-2193, U+21b5, U+2212, U+2248, U+229e, U+2318, U+258d, U+25c2, U+25cf, U+2605, U+26a1, U+2713, U+2715, U+2717, U+2b07; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonts/jetbrains-mono.4a51e8794a.woff2") format("woff2");
  unicode-range: U+20-7e, U+a9, U+b7, U+2013-2014, U+2022, U+2026, U+203a, U+2192-2193, U+21b5, U+2212, U+2248, U+229e, U+2318, U+258d, U+25c2, U+25cf, U+2605, U+26a1, U+2713, U+2715, U+2717, U+2b07; }
/* @fonts:end */

/* =========================================================
   GoGobuddy — 滑動敘事 · 科技 HUD 風格
   ========================================================= */
:root {
  /* 色彩角色（NGT 品牌，來源 ngt.hk）：
     底色／文字 = 中性藍黑；--cyan = 訊號（標籤、進度、啟動中、連結、焦點框）；
     --violet = 副色（YOTTA、次要按鈕、環境光）；--grad = 品牌時刻（主標題、重點字、收尾、hover）；
     --pink 只喺漸變同故障殘影入面出現；主按鈕用 --ink 白底深字（同 ngt.hk 一樣） */
  --bg: #050609;
  --bg-2: #0a0c13;
  --panel: rgba(10,12,19, .78);
  --fg: #f5f6f8;
  --muted: #8a91a0;
  --dim: #474c5a;
  --cyan: #62ecff;
  --cyan-a: rgba(98,236,255, .1);
  --line: rgba(98,236,255, .22);
  --wline: rgba(255, 255, 255, .08);
  --violet: #8f7bff;
  --pink: #ff6ad5;
  --ink: #f5f6f8;
  --frame: #4a5870;
  --grad: linear-gradient(100deg, var(--cyan), var(--violet) 55%, var(--pink));
  --sans: "Space Grotesk", "Chiron Hei HK", "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif;
  --mono: "JetBrains Mono", "Chiron Hei HK", ui-monospace, Menlo, monospace;
  --hdr: 64px;
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* 背景：視差格網 + 章節大字（畫布喺 #bg） */
.bg-grid-wrap {
  position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 78%);
}
.bg-grid {
  position: absolute; left: 0; right: 0; top: -64px; bottom: -64px; will-change: transform;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .55;
}
.bg-word {
  position: fixed; left: 0; bottom: 4vh; z-index: -1; pointer-events: none; white-space: nowrap; will-change: transform;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(120px, 21vw, 340px); line-height: .9; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(98,236,255,.11);
}
.bg-word span { display: inline-block; transition: opacity .3s, filter .3s, transform .5s cubic-bezier(.2,.8,.2,1); }
.bg-word span.out { opacity: 0; filter: blur(14px); transform: scale(1.12); transition-duration: .3s; }
main { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
.hl { color: var(--cyan); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-v { color: var(--violet); }
.kick { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: var(--cyan); margin-bottom: 16px; }
/* 段落標題標籤：粗體、淡底、左邊實色邊，一眼知道呢段講咩；出現時由左至右擦出（main.js 加 .kz） */
.kick-t { position: relative; display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 7px 14px 7px 11px; font-size: 15px; font-weight: 700; letter-spacing: .06em;
  background: color-mix(in srgb, currentColor 11%, transparent); border-left: 3px solid currentColor; }
.kick-t::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.kick-js .kick-t:not(.kz) { clip-path: inset(0 100% 0 0); }
/* 每段開頭先淨係顯示標題標籤（main.js 喺 .stage 加 .title-only），標籤出齊先到內容 */
.title-only { visibility: hidden; }
.title-only .kick-t { visibility: visible; }
/* 標題時間畫面淨係得標籤：用大字顯示（改字體大小，唔係縮放，唔會矇），內容開始先縮返做段落名 */
.kick-t { transition: font-size .5s cubic-bezier(.2,.8,.2,1), padding .5s cubic-bezier(.2,.8,.2,1), gap .5s; }
.title-only .kick-t { padding: 12px 24px 12px 18px; gap: 14px; font-size: clamp(22px, 2.6vw, 34px); }
.kick-t.kz { animation: kick-wipe .7s cubic-bezier(.65,0,.35,1) both; }
.kick-t.kz::after { content: ""; position: absolute; top: -2px; bottom: -2px; width: 3px; background: currentColor; box-shadow: 0 0 14px 2px currentColor; animation: kick-edge .7s cubic-bezier(.65,0,.35,1) both; }
@keyframes kick-wipe { from { clip-path: inset(-6px 100% -6px 0); } to { clip-path: inset(-6px -12px -6px 0); } }
@keyframes kick-edge { 0% { left: 0; opacity: 1; } 85% { left: calc(100% - 3px); opacity: 1; } 100% { left: calc(100% - 3px); opacity: 0; } }
.caret { display: inline-block; width: .5em; height: 1em; margin-left: 4px; background: var(--cyan); vertical-align: -0.12em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.fx-scan {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.18) 2px 3px);
}
.fx-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 120px; top: -120px;
  background: linear-gradient(transparent, rgba(98,236,255,.04), transparent);
  animation: sweep 7s linear infinite;
}
@keyframes sweep { to { top: 110%; } }
.topbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; }
.topbar i { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: 0 0 10px rgba(143,123,255,.7); }

/* HUD 角框 */
.hud {
  --c: var(--frame); --s: 12px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--s) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--s) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--s) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--s) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px var(--s) no-repeat,
    var(--panel);
  border: 1px solid var(--wline);
}

/* 按鈕 */
.btn {
  --cut: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  color: var(--cyan); background: rgba(98,236,255,.06); border: 0; cursor: pointer; white-space: nowrap;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, transform .2s;
}
.btn:hover { background: rgba(98,236,255,.16); transform: translateY(-2px); }
.btn-main { background: var(--ink); color: #05080d; box-shadow: none; }
.btn-main:hover { background: var(--grad); }
.btn-sm { padding: 8px 16px; font-size: 14px; --cut: 7px; }
.btn-lg { padding: 16px 30px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--hdr);
  display: flex; align-items: center; gap: 24px; padding: 0 28px;
  background: linear-gradient(rgba(5,6,9,.9), rgba(5,6,9,.55)); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wline);
}
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { display: block; height: 32px; width: auto; }
.hdr-nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--muted); }
.hdr-nav a:hover { color: var(--cyan); }
/* 頂部 WhatsApp 按鈕 */
.hdr-wa {
  --cut: 7px; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 12px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--fg); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--wline);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background .2s, transform .2s;
}
.hdr-wa:hover { background: rgba(98,236,255,.12); box-shadow: inset 0 0 0 1px var(--line); transform: translateY(-1px); }
.hdr-wa svg { width: 17px; height: 17px; fill: none; stroke: #25d366; color: #25d366; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hdr-wa svg path + path { fill: currentColor; stroke: none; }

/* 底部懸浮列：左右兩粒按鈕，中間滑動橫幅 */
.dock { position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 75; display: flex; align-items: center; gap: 14px; pointer-events: none; }
.dock > * { pointer-events: auto; }

/* 懸浮按鈕 */
.fab {
  --cut: 12px;
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 18px;
  font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #05080d; background: var(--ink);
  border: 0; cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 0 18px rgba(143,123,255,.5));
  opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s, background .2s;
}
body.booted .fab, body.booted .ticker { opacity: 1; transform: none; transition-delay: 3s, 3s, 0s; }
.fab:hover { background: var(--grad); }
.fab:active { transform: scale(.97); }
.fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.fab:hover svg { transform: translateX(3px); }
.fab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); animation: blink 1.2s steps(1) infinite; }
.fab-ring { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(143,123,255,.35) 50%, transparent 70%); background-size: 250% 100%; animation: fab-shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes fab-shine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
/* 懸浮按鈕：左邊（30 秒項目分析，用副色紫） */
.fab-l { padding: 14px 20px; background: rgba(21,19,42,.92); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(143,123,255,.6); filter: none; }
.fab-l svg { stroke: var(--violet); }
.fab-l:hover { background: rgba(38,33,78,.95); }
.fab-l:hover svg { transform: rotate(-12deg); }

/* 中間橫幅：內容向右滑動，滑鼠停喺上面就暫停 */
.ticker {
  flex: 1; min-width: 0; height: 46px; display: flex; align-items: center; overflow: hidden;
  background: rgba(5,6,9,.88); border: 1px solid var(--line); backdrop-filter: blur(8px);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s;
}
body.booted .ticker.seen { transition-delay: 0s; }
body.booted .ticker.off { opacity: 0; transform: translateY(12px); pointer-events: none; }
.ticker-track { display: flex; width: max-content; animation: ticker-r 62s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes ticker-r { from { transform: translateX(-50%); } to { transform: none; } }
.ticker-set { display: flex; flex: none; }
.ticker-set a { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; white-space: nowrap; font-size: 14.5px; color: var(--fg); border-right: 1px dashed var(--line); }
.ticker-set a:hover { color: var(--cyan); }
.ticker-set b { color: var(--cyan); }
.ticker-set em { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 2px 7px; color: #05080d; background: var(--violet); }

/* 章節導航 */
.chapters { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 50; display: grid; gap: 14px; }
.chapters a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.chapters a span { opacity: 0; transform: translateX(6px); transition: all .25s; white-space: nowrap; background: rgba(5,6,9,.9); padding: 2px 6px; }
.chapters a i { width: 8px; height: 8px; border: 1px solid var(--dim); transform: rotate(45deg); transition: all .25s; flex: none; }
.chapters a:hover span, .chapters a.on span { opacity: 1; transform: none; }
.chapters a.on { color: var(--cyan); }
.chapters a.on i { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* ---------- 滑動場景 ---------- */
.scene { position: relative; height: calc(var(--len) * var(--vh)); }
.stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
/* 相連場景重疊：新場景先隱形就位，交接時兩個一齊固定、交叉淡入淡出 */
/* 靜態模式（main.js：視窗高過 2400px，即搜尋器渲染）：每段固定 900px，唔重疊 */
.static { --vh: 900px; }
.static .scene + .scene { margin-top: 0; }
.static .scene, .static .stage { height: auto; }
.static .stage { position: relative; min-height: var(--vh); overflow: visible; }
.static .reveal { opacity: 1; transform: none; }
.static .kick-t { clip-path: none !important; }
/* 疊埋輪流出現嘅內容（上鎖四段字幕、上手兩幕）逐段排落去，全部文字同佢哋嘅外層都顯示 */
.static .cap, .static .ez-worry, .static .ez-main { position: relative; inset: auto; }
.static .stage :is(h1, h2, h3, p, li, summary), .static .stage *:has(h1, h2, h3, p, li, summary) { opacity: 1 !important; visibility: visible !important; }
.static .final-bubbles li { opacity: 1; }
.scene + .scene { margin-top: calc(-1.2 * var(--vh)); scroll-margin-top: calc(-.3 * var(--vh)); } /* 1.2 = 1 + main.js 嘅 FADE */
.stage h2 { font-size: clamp(34px, 5vw, 76px); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }

/* === 00 進入 === */
.stage-intro { display: grid; place-items: center; text-align: center; }
.floor {
  position: absolute; left: -50%; right: -50%; bottom: -8%; height: 62%;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 70px 70px; transform: perspective(520px) rotateX(72deg); transform-origin: 50% 100%;
  animation: floor 2.4s linear infinite; opacity: 0;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}
body.booted .floor { opacity: .9; transition: opacity 1.6s; }
@keyframes floor { to { background-position: 0 70px; } }
.horizon { position: absolute; left: 0; right: 0; top: 74%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 30px 4px rgba(98,236,255,.25); opacity: 0; transform: scaleX(0); }
body.booted .horizon { opacity: .6; transform: none; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity 1.2s; }
.intro-title { position: relative; z-index: 3; padding: 0 16px; will-change: transform, opacity; }
.intro-title h1 { margin: 0; font-weight: 700; }
.it-line { display: block; clip-path: inset(0 100% 0 0); }
.it-1, .it-3 { font-size: clamp(26px, 3.8vw, 54px); line-height: 1.3; }
.it-big { position: relative; display: inline-block; font-size: clamp(72px, 14vw, 210px); line-height: .95; letter-spacing: -.04em; color: var(--cyan); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 36px rgba(143,123,255,.4)); margin: 6px 0 10px; }
.it-big::before, .it-big::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; }
.it-big::before { color: var(--pink); -webkit-text-fill-color: var(--pink); }
.it-big::after { color: #fff; -webkit-text-fill-color: #fff; }
body.booted .it-big::before { animation: glitch-a 3.2s steps(1) 1.2s infinite; }
body.booted .it-big::after { animation: glitch-b 3.2s steps(1) 1.2s infinite; }
@keyframes glitch-a { 0%, 86%, 100% { opacity: 0; } 87% { opacity: .8; transform: translate(-6px, 2px); clip-path: inset(10% 0 60% 0); } 90% { opacity: .8; transform: translate(5px, -2px); clip-path: inset(55% 0 20% 0); } 93% { opacity: 0; } }
@keyframes glitch-b { 0%, 87%, 100% { opacity: 0; } 88% { opacity: .5; transform: translate(4px, 0); clip-path: inset(40% 0 35% 0); } 91% { opacity: 0; } }
.it-4 { margin-top: 26px; font-size: clamp(28px, 4.2vw, 60px); font-weight: 700; min-height: 1.4em; clip-path: none; opacity: 0; }
.it-answer { background: rgba(98,236,255,.1); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(98,236,255,.4); padding: 0 .3em; }
.it-answer:empty { padding: 0; }
.it-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 820px; margin: 30px auto 0; }
/* 賣點：逐個淡入，再畫剔號（--i = 次序） */
.it-tags span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); color: var(--cyan); background: var(--cyan-a); opacity: 0; transform: translateY(10px) scale(.96); }
.it-tags svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(98,236,255,.7)); }
.it-tags path { stroke-dasharray: 16; stroke-dashoffset: 16; }
body.booted .it-tags span { animation: tag-in .5s cubic-bezier(.2,.8,.2,1) calc(2.5s + var(--i) * .15s) forwards; }
body.booted .it-tags path { animation: tick-draw .35s ease-out calc(2.75s + var(--i) * .15s) forwards; }
/* 重點賣點：紅色底框 */
.it-tags span.hot { color: var(--fg); font-weight: 600; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad) border-box; border-color: transparent; box-shadow: 0 0 18px -6px rgba(143,123,255,.7); }
.it-tags span.hot svg { stroke: var(--pink); filter: none; }
@keyframes tag-in { to { opacity: 1; transform: none; } }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
body.booted .it-1 { animation: reveal .6s steps(10) forwards; }
body.booted .it-2 { animation: reveal .5s cubic-bezier(.7,0,.2,1) .45s forwards; }
body.booted .it-3 { animation: reveal .6s steps(10) .9s forwards; }
body.booted .it-4 { opacity: 1; transition: opacity .2s 1.4s; }
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }
.intro-fade { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; z-index: 4; }

/* === 01 大鎖 === */
.stage-lock { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 2vw; padding: var(--hdr) 6vw 0; }
.cipher-bg {
  position: absolute; inset: 0; margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: rgba(98,236,255,.15);
  white-space: pre; overflow: hidden; opacity: 0; pointer-events: none;
  mask-image: radial-gradient(ellipse at 65% 50%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 65% 50%, #000 10%, transparent 70%);
}
.captions { position: relative; height: 60vh; z-index: 4; }
.cap { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-38%); opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.cap.on { opacity: 1; transform: translateY(-50%); }
.cap h2 { font-size: clamp(32px, 3.9vw, 62px); }
.cap p { margin-top: 22px; max-width: 460px; font-size: 18px; color: var(--muted); }
.lock-wrap { position: relative; height: 82vh; display: grid; place-items: center; }
.lock-holder { position: relative; z-index: 2; }
.lock { display: block; width: min(28vw, 320px); overflow: visible; will-change: transform; transition: filter .5s; }
#lock.locked .lock { filter: drop-shadow(0 0 30px rgba(98,236,255,.55)); }
#lock.locked .lock-holder { animation: thud .4s ease-out; }
@keyframes thud { 30% { transform: translateY(8px) scale(.98); } 60% { transform: translateY(-3px); } }
.shackle { fill: none; stroke: var(--cyan); stroke-width: 20; }
.body { fill: #07080c; stroke: var(--cyan); stroke-width: 4; }
.body-glow { fill: url(#lg-body); opacity: 0; transition: opacity .5s; }
#lock.locked .body-glow { opacity: 1; }
.body-lines line { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 6; }
.keyhole { fill: none; stroke: var(--cyan); stroke-width: 4; transition: fill .3s; }
#lock.locked .keyhole { fill: var(--cyan); }
.lock-label { font-family: var(--mono); font-size: 12px; fill: var(--muted); letter-spacing: .1em; }
.ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.ring-1 { width: min(42vw, 500px); border: 1px dashed var(--line); animation: spin 50s linear infinite; }
.ring-2 { width: min(54vw, 640px); border: 1px solid rgba(98,236,255,.08); animation: spin 80s linear infinite reverse; }
.ring-2::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.shock { position: absolute; left: 50%; top: 50%; width: min(28vw, 320px); aspect-ratio: 1; translate: -50% -50%; border: 2px solid var(--cyan); border-radius: 50%; opacity: 0; pointer-events: none; }
#lock.locked .shock { animation: shock .9s ease-out; }
@keyframes shock { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.6); } }
.lock-readout { position: absolute; bottom: 5vh; left: 0; right: 0; display: flex; justify-content: center; gap: 24px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--muted); }
#lock-state { color: var(--fg); }
#lock.locked #lock-state { color: var(--cyan); }
.files { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; --rx: min(19vw, 300px); --ry: min(32vh, 290px); }
.file {
  --k: 0; position: absolute; left: 0; top: 0; white-space: nowrap;
  transform: translate(-50%, -50%) translate(calc(var(--x) * var(--rx) * (1 - var(--k))), calc(var(--y) * var(--ry) * (1 - var(--k)))) scale(calc(1 - var(--k) * .7));
}
.file-in {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; font-family: var(--mono); font-size: 13px;
  color: var(--fg); border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); animation: bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s);
}
.file-in em { font-style: normal; font-size: 10px; font-weight: 600; padding: 1px 5px; background: rgba(255,255,255,.8); color: #000; }
.file-in b { font-weight: 400; }
.file.enc .file-in { color: var(--cyan); border-color: var(--line); background: var(--cyan-a); }
.file.enc .file-in em { background: var(--cyan); }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* === 02 安全 === */
.stage-col { display: flex; flex-direction: column; justify-content: center; gap: 6vh; padding: calc(var(--hdr) + 2vh) 6vw 3vh; }
.sc-head h2 { font-size: clamp(30px, 4.2vw, 60px); }
.pipe { position: relative; height: 170px; margin: 0 2vw; }
.pipe-line { position: absolute; left: 6%; right: 6%; top: 52px; height: 2px; background: var(--wline); }
.pipe-line i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.pnode { position: absolute; top: 10px; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; text-align: center; }
.pnode .ico { position: relative; width: 84px; height: 84px; display: grid; place-items: center; overflow: hidden; }
.pnode svg, .pk-icon svg { width: 38px; height: 38px; fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: round; }
.pnode b { margin-top: 8px; font-size: 15px; }
.pnode small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.beam { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: var(--violet); box-shadow: 0 0 10px var(--violet); opacity: 0; }
.pnode-mid.scan .ico { --c: var(--violet); }
.pnode-mid.scan .beam { opacity: 1; animation: beam 1s linear infinite; }
@keyframes beam { 0% { top: 0; } 100% { top: 100%; } }
.denied { position: absolute; top: calc(100% + 8px); font-family: var(--mono); font-size: 13px; color: var(--violet); border: 1px solid var(--violet); padding: 2px 8px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: all .3s; background: var(--bg); }
.pnode-mid.scan .denied { opacity: 1; transform: none; }
.packet { position: absolute; top: 30px; left: 6%; transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; }
.pk-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--cyan); box-shadow: 0 0 20px rgba(98,236,255,.4); }
.pk-icon svg { width: 24px; height: 24px; stroke: var(--cyan); }
.pk-text { position: absolute; bottom: calc(100% + 10px); font-family: var(--mono); font-size: 12.5px; padding: 4px 8px; white-space: nowrap; background: var(--bg-2); border: 1px solid var(--wline); }
.pk-text.cipher { color: var(--cyan); border-color: var(--line); }
.pk-text.plain { color: var(--fg); }
.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.feat { padding: 22px; opacity: .22; transform: translateY(14px); transition: opacity .5s, transform .5s; --c: var(--dim); }
.feat.on { opacity: 1; transform: none; --c: var(--cyan); }
.feat-no { font-family: var(--mono); font-size: 13px; color: var(--cyan); }
.feat h3 { font-size: 21px; margin: 8px 0 6px; }
.feat p { color: var(--muted); font-size: 14.5px; }

/* === 00b 五大承諾 === */
.stage-promise { display: flex; flex-direction: column; justify-content: center; gap: 5vh; padding: calc(var(--hdr) + 3vh) 6vw 4vh; }
.pm-head { text-align: center; }
.pm-head h2 { font-size: clamp(30px, 4vw, 60px); }
.pm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pm-card { --panel: rgba(9,11,17, .97); position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 26px 22px; opacity: 0; will-change: transform, opacity; transition: filter .4s, box-shadow .4s; }
.pm-card.focus { --c: var(--cyan); z-index: 5; box-shadow: 0 0 90px -10px rgba(98,236,255,.45); }
.pm-card.dim { filter: brightness(.42) saturate(.6); }
.pm-card.all { box-shadow: 0 0 50px -22px rgba(143,123,255,.55); }
.pm-no { position: absolute; top: 14px; right: 20px; font-family: var(--mono); font-size: 54px; font-weight: 600; line-height: 1; color: rgba(98,236,255,.13); }
.pm-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid var(--line); background: var(--cyan-a); }
.pm-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pm-card h3 { margin-bottom: 10px; font-size: clamp(20px, 1.6vw, 26px); }
.pm-card p { color: var(--muted); font-size: 15px; }
.pm-card p b { color: var(--fg); }
.pm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }
.pm-tags span { padding: 4px 10px; font-family: var(--mono); font-size: 12px; color: var(--cyan); border: 1px solid var(--line); }
.pm-tags span.solid { background: var(--cyan); border-color: var(--cyan); color: #05080d; }
.pm-foot { text-align: center; font-family: var(--mono); font-size: 13px; color: var(--muted); opacity: 0; transition: opacity .5s; }
.pm-foot.on { opacity: 1; }
@media (max-width: 1280px) and (min-width: 901px) {
  /* 闊度唔夠：六張卡改用細版（圖示擺左邊），上 3 下 3 */
  .pm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pm-card { grid-column: span 2; min-height: 0; padding: 20px 20px 18px 88px; }
  .pm-icon { position: absolute; left: 20px; top: 20px; width: 50px; height: 50px; }
  .pm-no { font-size: 40px; }
  .pm-tags { padding-top: 12px; }
}

/* === 01 AI 點幫你返工（簡化版） === */
.stage-office { display: flex; flex-direction: column; justify-content: center; gap: 4vh; padding: calc(var(--hdr) + 3vh) 6vw 4vh; }
.of-head { text-align: center; }
.of-head h2 { font-size: clamp(28px, 3.6vw, 56px); }
.of-sub { margin-top: 12px; font-size: 17px; color: var(--muted); }
.of-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.of-card { --c: var(--dim); display: flex; flex-direction: column; gap: 12px; padding: 22px; opacity: .4; transition: opacity .4s, box-shadow .4s, transform .4s; }
.of-card.on { --c: var(--cyan); opacity: 1; transform: translateY(-6px); box-shadow: 0 0 50px -16px rgba(98,236,255,.55); }
.of-card.done { --c: var(--line); opacity: 1; }
.of-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.of-card.on .of-top, .of-card.done .of-st { color: var(--cyan); }
.of-card h3 { font-size: 20px; }
.of-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.of-row em { grid-column: 2; font-style: normal; font-size: 11.5px; }
.of-track { height: 8px; background: var(--wline); }
.of-track i { display: block; height: 100%; width: 0; }
.of-ai .of-track i { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.of-hu .of-track i { background: rgba(255,255,255,.5); }
.of-ai em { color: var(--cyan); }
.of-res { min-height: 2.8em; font-size: 14px; color: var(--fg); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.of-card.done .of-res { opacity: 1; transform: none; }
.of-total { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; align-items: end; padding: 18px 26px; }
.of-total small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.of-total b { font-size: clamp(20px, 2vw, 28px); font-variant-numeric: tabular-nums; }
.of-saved { text-align: right; }
.of-saved b { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; color: var(--cyan); text-shadow: 0 0 24px rgba(98,236,255,.35); white-space: nowrap; }

/* === 01b 一句指令 === */
.stage-cmd { position: sticky; }
.cmd-head { position: absolute; left: 0; right: 0; top: calc(var(--hdr) + 3vh); z-index: 3; text-align: center; padding: 0 6vw; }
.cmd-head h2 { font-size: clamp(28px, 3.4vw, 52px); }
.cmd-zone { position: absolute; left: 50%; top: 56%; z-index: 4; width: min(720px, 90vw); transform: translate(-50%, -50%); will-change: transform; }
/* 舊設定清單 */
.setup { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 20px 24px; transform-origin: 50% 50%; }
.setup-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.setup-title em { font-style: normal; color: var(--violet); }
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-list li { --s: 0; position: relative; display: flex; gap: 14px; align-items: center; height: 40px; overflow: hidden; font-size: 16px; border-bottom: 1px dashed var(--wline); transition: color .3s; }
.setup-list li i { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.setup-list li span { position: relative; }
.setup-list li span::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--violet); transform-origin: left; transform: scaleX(var(--s)); }
.setup-list li.x { color: var(--dim); }
/* 印章：全部劃走之後重重落下 */
.setup-stamp {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: min(420px, 86%);
  display: grid; justify-items: center; gap: 2px; padding: 12px 18px 14px;
  color: var(--cyan); border: 6px solid currentColor; border-radius: 14px;
  outline: 2px solid currentColor; outline-offset: -14px;
  background: rgba(5,6,9, .55);
  transform: translate(-50%, -50%) rotate(-9deg); opacity: 0; pointer-events: none;
  filter: url(#ink) drop-shadow(0 0 18px rgba(98,236,255,.45));
}
.setup-stamp.slam { opacity: .95; animation: stamp-slam .42s cubic-bezier(.55, 0, .9, .4) both; }
.ss-stars { font-size: 12px; letter-spacing: .6em; }
.ss-brand { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(36px, 5vw, 58px); line-height: 1; letter-spacing: -.01em; }
.ss-line { font-family: "Chiron Hei HK", sans-serif; font-weight: 900; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: .14em; }
@keyframes stamp-slam {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(3.4); }
  70%  { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(.94); }
  85%  { transform: translate(-50%, -50%) rotate(-9deg) scale(1.03); }
  100% { opacity: .95; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
}
/* 印章落地嗰下震動（.3s 延遲 = 印章撞落嘅時間） */
.stage-cmd.shake { animation: screen-shake .5s .29s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes screen-shake {
  10% { transform: translate(-8px, 5px) rotate(-.5deg); }
  20% { transform: translate(9px, -6px) rotate(.5deg); }
  30% { transform: translate(-10px, 4px) rotate(-.35deg); }
  40% { transform: translate(7px, 3px) rotate(.35deg); }
  55% { transform: translate(-5px, -2px); }
  70% { transform: translate(3px, 1px); }
  85% { transform: translate(-1px, 0); }
}

/* === 01 辦公：全部完成大綠剔 === */
.of-done {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 6px;
  text-align: center; background: rgba(5,6,9, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; pointer-events: none;
}
.of-done.on { opacity: 1; visibility: visible; transition: opacity .25s; }
.of-check { position: relative; width: min(220px, 50vw, 34vh); aspect-ratio: 1; }
.of-check svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.of-disc { fill: var(--cyan); transform-origin: 50% 50%; transform: scale(0); filter: drop-shadow(0 0 22px rgba(98,236,255,.6)); }
.of-tick { fill: none; stroke: #05080d; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.of-rays line { stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 14 40; stroke-dashoffset: 14; opacity: 0; }
.of-ring { position: absolute; inset: 0; border-radius: 50%; border: 5px solid var(--cyan); opacity: 0; }
.of-done-t { margin-top: 14px; font-size: clamp(30px, 4vw, 52px); line-height: 1.15; color: var(--fg); opacity: 0; }
.of-done-s { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; color: var(--cyan); opacity: 0; }
.of-done.on .of-disc { animation: of-pop .55s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.of-done.on .of-tick { animation: of-draw .45s .38s cubic-bezier(.65, 0, .35, 1) forwards; }
.of-done.on .of-rays line { animation: of-ray .6s .5s ease-out forwards; }
.of-done.on .of-ring { animation: of-ring 1s .32s ease-out forwards; }
.of-done.on .of-done-t { animation: of-rise .4s .7s ease-out forwards; }
.of-done.on .of-done-s { animation: of-rise .4s .8s ease-out forwards; }
@keyframes of-pop { to { transform: scale(1); } }
@keyframes of-draw { to { stroke-dashoffset: 0; } }
@keyframes of-ray { 0% { opacity: 1; stroke-dashoffset: 14; } 100% { opacity: 0; stroke-dashoffset: -40; } }
@keyframes of-ring { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes of-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 指令欄 */
.cmd-bar { position: relative; display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 16px 20px; text-align: left; font-size: clamp(16px, 1.6vw, 21px); opacity: 0; transition: box-shadow .4s; }
.cmd-bar.sent { box-shadow: 0 0 0 1px var(--cyan), 0 0 60px -12px rgba(98,236,255,.7); }
.cmd-prompt { font-family: var(--mono); font-size: 1.3em; color: var(--cyan); }
.cmd-input { flex: 1; min-width: 0; }
.kbd { flex: none; padding: 6px 10px; font-family: var(--mono); font-size: 12px; color: var(--dim); border: 1px solid var(--wline); border-bottom-width: 3px; transition: all .15s; }
.kbd.ready { color: var(--cyan); border-color: var(--cyan); }
.kbd.pressed { transform: translateY(2px); border-bottom-width: 1px; background: var(--cyan); color: #05080d; }
.cmd-status { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--muted); opacity: 0; }
#cmd-status.live { color: var(--cyan); }
.cmd-count b { font-size: 18px; color: var(--cyan); font-variant-numeric: tabular-nums; }
/* Agent 方格 */
.agent-grid { position: absolute; left: 50%; z-index: 2; width: min(1120px, 88vw); transform: translateX(-50%); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; opacity: 0; }
.ag-tile { --w: 0%; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--wline); background: rgba(10,12,19,.6); opacity: .18; font-size: 12.5px; will-change: transform, opacity; transition: border-color .25s, background .25s; }
.ag-tile .t-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--dim); }
.ag-tile .t-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); align-self: center; }
.ag-tile b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-tile .t-bar { height: 3px; background: var(--wline); }
.ag-tile .t-bar::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--cyan); }
.ag-tile.run { border-color: var(--line); background: var(--cyan-a); opacity: 1; }
.ag-tile.run .t-top i { background: var(--cyan); animation: blink .5s steps(1) infinite; }
.ag-tile.done { border-color: var(--cyan); opacity: 1; }
.ag-tile.done .t-top { color: var(--cyan); }
.ag-tile.done .t-top i { background: var(--cyan); }
.ag-scan { position: absolute; left: -12px; right: -12px; top: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 18px 2px rgba(98,236,255,.6); opacity: 0; pointer-events: none; z-index: 2; }
.cmd-more { position: absolute; left: 0; right: 0; bottom: 2.4vh; z-index: 2; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); opacity: 0; }
.cmd-more b { color: var(--cyan); }
/* 結果 */
.cmd-result { position: absolute; left: 50%; z-index: 5; width: min(460px, 86vw); padding: 22px 26px; text-align: center; opacity: 0; transform: translate(-50%, -50%) scale(.9); box-shadow: 0 0 80px -16px rgba(98,236,255,.6); --panel: rgba(9,11,17,.96); }
.cr-file { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 22px; }
.cr-badge { padding: 4px 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; background: var(--cyan); color: #05080d; }
.cr-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cr-tags span { padding: 3px 9px; font-family: var(--mono); font-size: 12px; color: var(--cyan); border: 1px solid var(--line); }

/* === 02b 多 Agent 分工 === */
.stage-orch { display: flex; flex-direction: column; justify-content: safe center; gap: 3vh; padding: calc(var(--hdr) + 2vh) 6vw 3vh; }
.or-head h2 { font-size: clamp(28px, 3.4vw, 52px); }
.or-head p { margin-top: 10px; color: var(--muted); font-size: 16px; max-width: 920px; }
.or-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: stretch; }
.or-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.or-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 15px; min-height: 48px; }
.or-prompt { font-family: var(--mono); color: var(--cyan); flex: none; }
.or-diagram { position: relative; height: min(52vh, 470px); }
.or-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.or-lines path { fill: none; stroke-width: 2; }
.or-lines .base { stroke: var(--wline); }
.or-lines .glow { stroke: var(--cyan); stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(98,236,255,.8)); }
.or-pk { position: absolute; z-index: 3; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); transform: rotate(45deg); opacity: 0; pointer-events: none; }
.o-node { position: absolute; z-index: 2; transform: translate(-50%, -50%); --c: var(--dim); transition: box-shadow .3s; }
.o-out { opacity: 0; visibility: hidden; }
.o-boss, .o-out { display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-width: 230px; }
.o-boss b, .o-out b { display: block; font-size: 16px; }
.o-boss small, .o-out small { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.o-node.active { --c: var(--cyan); box-shadow: 0 0 34px -8px rgba(98,236,255,.55); }
.o-node.active small { color: var(--cyan); }
.o-badge { display: grid; place-items: center; min-width: 40px; height: 34px; padding: 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; border: 1px solid var(--line); color: var(--cyan); transition: all .3s; }
.o-boss .o-badge { width: 48px; height: 48px; border: 0; background: var(--cyan); color: #05080d; font-size: 15px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.o-boss.active .o-badge { animation: pulse-b 1.4s ease-in-out infinite; }
@keyframes pulse-b { 50% { filter: brightness(1.4); transform: scale(1.06); } }
.o-agent { opacity: 0; visibility: hidden; width: 17.5%; padding: 14px 10px 12px; display: grid; justify-items: center; gap: 3px; text-align: center; }
.o-agent b { font-size: 15px; margin-top: 4px; }
.o-agent small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.o-bar { width: 100%; height: 4px; margin-top: 6px; background: var(--wline); }
.o-bar i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.o-agent em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; }
.o-agent.got { --c: var(--line); }
.o-agent.got em { color: var(--fg); }
.o-agent.run { --c: var(--cyan); box-shadow: 0 0 26px -10px rgba(98,236,255,.7); }
.o-agent.run em { color: var(--cyan); }
.o-agent.run .o-badge { animation: blink .7s steps(1) infinite; }
.o-agent.done { --c: var(--cyan); }
.o-agent.done .o-badge { background: var(--cyan); color: #05080d; }
.o-agent.done em { color: var(--cyan); }
.or-panel { padding: 22px; display: flex; flex-direction: column; }
.or-panel .kick { margin: 6px 0 10px; font-size: 12px; letter-spacing: .08em; }
.gantt { display: grid; gap: 14px; margin-bottom: 14px; }
.g-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.g-label { font-size: 13.5px; }
.g-row em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.g-ai em { color: var(--cyan); }
.g-track { grid-column: 1 / -1; position: relative; height: 14px; display: flex; gap: 2px; }
.g-human .g-track i { flex: 1; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 4px, rgba(255,255,255,.04) 4px 8px); }
.g-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.6); }
.g-par { flex-direction: column; height: auto; gap: 3px; }
.g-par::after { content: "◂ 5 項同時進行、同時完成"; position: absolute; left: calc(2.5% + 10px); top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: var(--cyan); white-space: nowrap; }
.g-par i { display: block; height: 4px; width: 0; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.g-msg { font-size: 12.5px; color: var(--violet); opacity: 0; transition: opacity .3s; }
.g-msg.on { opacity: 1; }
.qa { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; font-family: var(--mono); font-size: 13px; }
.qa li { color: var(--dim); transition: color .3s; }
.qa li::before { content: "[  ] "; }
.qa li.on { color: var(--cyan); }
.qa li.on::before { content: "[✓] "; }
.deliver { opacity: .15; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.deliver.on { opacity: 1; transform: none; }
.d-files { display: flex; flex-wrap: wrap; gap: 6px; }
.d-files span { font-family: var(--mono); font-size: 11.5px; padding: 3px 7px; border: 1px solid var(--line); }
.d-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.d-badges b { font-size: 13px; padding: 4px 9px; background: var(--cyan); color: #05080d; }
.or-note { margin-top: auto; padding-top: 10px; font-size: 11px; color: var(--dim); }

/* === 05 上手：第一幕（解答擔心）同第二幕（三步示範）疊喺同一個畫面，main.js 交叉淡入淡出 === */
.ez-worry, .ez-main { position: absolute; inset: 0; }
.ez-worry { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr) + 2vh) 7vw 4vh; }
.ez-worry h2 { margin-top: 10px; font-size: clamp(32px, 4.6vw, 64px); }
.ez-ans { margin-top: 14px; font-size: 19px; color: var(--muted); }
.ez-fix { list-style: none; padding: 0; margin: 4vh 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1180px; }
.ez-fix li { position: relative; display: grid; align-content: start; gap: 8px; padding: 18px; border: 1px solid var(--wline); background: rgba(10,12,19,.6); transition: border-color .4s, background .4s; }
.ez-fix small { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); }
/* 三拍取代（main.js 加 .s1 → .s2 → .s3）：麻煩先大字橙色出場 → 發光橙線劃走 → 縮細變灰，解決方法彈出 */
.ez-fix s { position: relative; width: fit-content; font-size: 18px; font-weight: 700; line-height: 1.35; color: #c4bdff; text-decoration: none; transition: font-size .45s cubic-bezier(.2,.8,.2,1), color .45s, font-weight .45s; }
.ez-fix s::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 3px; background: var(--violet); box-shadow: 0 0 12px rgba(143,123,255,.9); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.6,0,.2,1), height .45s, box-shadow .45s; }
.ez-fix b { font-size: 17px; line-height: 1.4; color: var(--cyan); opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .3s, transform .5s cubic-bezier(.2,1.6,.4,1); }
.ez-fix li.s1 { border-color: rgba(143,123,255,.6); background: rgba(143,123,255,.08); }
.ez-fix li.s2 s::after { transform: scaleX(1); }
.ez-fix li.s3 { border-color: var(--line); background: rgba(10,12,19,.6); animation: fix-flash .9s; }
.ez-fix li.s3 s { font-size: 13.5px; font-weight: 400; color: var(--muted); }
.ez-fix li.s3 s::after { height: 1.5px; box-shadow: none; }
.ez-fix li.s3 b { opacity: 1; transform: none; }
.ez-fix-badge { position: absolute; top: -12px; right: -10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 15px; font-weight: 900; color: #05080d; background: var(--violet); transform: scale(0); transition: transform .3s cubic-bezier(.2,1.6,.4,1), background .3s; }
.ez-fix-badge::before { content: "✗"; }
.ez-fix li.s1 .ez-fix-badge { transform: scale(1); }
.ez-fix li.s3 .ez-fix-badge { color: #05080d; background: var(--cyan); animation: badge-flip .5s cubic-bezier(.2,1.6,.4,1); }
.ez-fix li.s3 .ez-fix-badge::before { content: "✓"; }
@keyframes badge-flip { 0% { transform: scale(1.9) rotate(-35deg); } 100% { transform: scale(1); } }
@keyframes fix-flash { 0% { background: rgba(98,236,255,.24); box-shadow: 0 0 40px -4px rgba(98,236,255,.7); } 100% { box-shadow: none; } }
.ez-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin-top: 4vh; }
.ez-time s { font-size: 16px; color: var(--muted); text-decoration: line-through 2px var(--violet); }
.ez-time b { display: inline-block; font-size: clamp(28px, 3.2vw, 44px); color: var(--cyan); transform-origin: 0 60%; }
.ez-time.hit b { animation: pull-hit .5s cubic-bezier(.3,1.6,.5,1); }
.stage-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6vw; padding: var(--hdr) 9vw 0 7vw; }
.stage-split p { margin-top: 20px; font-size: 18px; color: var(--muted); max-width: 460px; }

.ez-steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 6px; max-width: 420px; }
.ez-steps li { display: flex; gap: 16px; align-items: center; padding: 12px 16px; border-left: 2px solid var(--wline); color: var(--muted); transition: all .35s; }
.ez-steps li b { font-family: var(--mono); color: var(--dim); }
.ez-steps li span { display: grid; font-size: 18px; font-weight: 700; }
.ez-steps li small { font-size: 13px; font-weight: 400; color: var(--muted); }
.ez-steps li.on { border-left-color: var(--cyan); color: var(--fg); background: var(--cyan-a); }
.ez-steps li.on b { color: var(--cyan); }
.ez-need { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; font-family: var(--mono); font-size: 13px; }
.ez-need span { padding: 5px 10px; border: 1px solid var(--wline); }
.ez-need .y { color: var(--cyan); border-color: var(--line); }
.ez-need .n { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--violet); }
.ez-device { width: 100%; max-width: 540px; height: 400px; display: flex; flex-direction: column; justify-self: center; }
.dev-bar { display: flex; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--wline); font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.dev-bar span:last-child { color: var(--cyan); }
.dev-bar { gap: 12px; }
.dev-bar span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-bar span:last-child { flex: none; }
.dev-screen { position: relative; flex: 1; }
.ez-scr { position: absolute; inset: 0; padding: 30px; opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s; }
.ez-scr.on { opacity: 1; transform: none; }
.ez-scr label { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 10px; letter-spacing: .1em; }
.ez-btn { display: inline-block; margin-top: 22px; padding: 12px 22px; font-weight: 700; color: var(--cyan); box-shadow: inset 0 0 0 1px var(--line); transition: all .2s; }
.ez-btn.pressed { background: var(--cyan); color: #05080d; }
.msg { max-width: 88%; padding: 12px 16px; margin-bottom: 14px; font-size: 15px; }
.msg-u { margin-left: auto; width: fit-content; background: rgba(255,255,255,.06); border: 1px solid var(--wline); opacity: 0; transform: translateY(8px); transition: all .3s; }
.msg-u.on { opacity: 1; transform: none; }
.msg-a { border: 1px solid var(--line); background: var(--cyan-a); min-height: 50px; white-space: pre-line; transition: opacity .3s; }
.msg-a.empty { opacity: 0; }
.ez-kh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ez-kh label { margin: 0; }
.ez-new { margin: 0; padding: 8px 14px; font-size: 14px; }
.ez-kv { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 14px; border: 1px solid var(--wline); font-family: var(--mono); font-size: 14px; }
.ez-kv small { width: 3em; color: var(--muted); font-family: var(--sans); }
.ez-scr { padding: 20px 22px; }
.ez-pop { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.ez-pop.on { opacity: 1; transform: none; }
.ez-mini { margin: 0; padding: 7px 13px; font-size: 13px; }
.ez-pill { display: inline-block; padding: 2px 8px; font-family: var(--mono); font-size: 11.5px; color: var(--cyan); border: 1px solid var(--line); background: var(--cyan-a); }
.ez-slot { position: absolute; left: 22px; right: 22px; top: 72px; min-height: 64px; }
.ez-empty { display: grid; place-items: center; border: 1px dashed var(--wline); font-size: 13px; color: var(--muted); }
.ez-keycard { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); background: var(--cyan-a); }
.ez-keycard b { font-size: 15px; }
.ez-keycard code { display: block; margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ez-dialog { position: absolute; z-index: 2; left: 12%; right: 12%; top: 16px; display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: 0 20px 50px -10px rgba(0,0,0,.85); }
.ez-dialog .ez-btn { justify-self: end; }
.ez-toast { position: absolute; left: 22px; right: 22px; bottom: 16px; display: flex; justify-content: center; }
.ez-toast span { padding: 7px 14px; font-size: 13px; font-weight: 700; color: #05080d; background: var(--cyan); }
.ez-wsteps { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 11px; color: var(--dim); counter-reset: w; }
.ez-wsteps li { counter-increment: w; }
.ez-wsteps li::before { content: counter(w) ". "; }
.ez-wsteps li.on { color: var(--cyan); }
.ez-wsteps li.done { color: var(--muted); }
.ez-q { display: block; margin-bottom: 10px; font-size: 15px; }
.ez-sub { display: block; margin: -6px 0 14px; font-size: 12.5px; color: var(--muted); }
.ez-reg { display: grid; gap: 8px; }
.ez-reg .ez-btn { justify-self: start; margin-top: 4px; }
.ez-os { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ez-os span { padding: 12px; text-align: center; font-weight: 700; border: 1px solid var(--wline); transition: all .3s; }
.ez-os.picked .mine { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-a); }
.ez-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ez-pill i { font-style: normal; }
.ez-term { position: absolute; left: 28%; right: 14px; top: 44%; bottom: 12px; overflow: hidden; font-family: var(--mono); font-size: 12px; background: #0a0c13; border: 1px solid var(--wline); box-shadow: 0 -10px 40px -8px rgba(0,0,0,.85); }
.ez-tbar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--wline); }
.ez-tbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--wline); }
.ez-tbar span { margin-left: 6px; }
.ez-tbody { display: grid; align-content: start; gap: 3px; padding: 8px 10px; line-height: 1.45; }
.ez-tbody em { font-style: normal; color: var(--cyan); }
.ez-fin { font-weight: 700; color: var(--cyan); }
.typing::after { content: "▍"; color: var(--cyan); }
.ez-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ez-tool span { margin-right: 4px; }
.ez-tool button { padding: 6px 16px; font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 1px solid var(--wline); cursor: pointer; transition: all .2s; }
.ez-tool button:hover { color: var(--fg); border-color: var(--line); }
.ez-tool button[aria-pressed="true"] { font-weight: 700; color: #05080d; background: var(--cyan); border-color: var(--cyan); }
.ez-steps small i { font-style: normal; color: var(--cyan); }
.dev-help { padding: 12px 18px; border-top: 1px solid var(--wline); font-size: 13px; color: var(--muted); }

/* === 06 Agent 橫向 === */
.stage-agent { display: flex; align-items: center; padding: calc(var(--hdr) + 2vh) 7vw 4vh; }
.ag-wrap { width: min(980px, 100%); }
.ag-wrap h2 { margin: 10px 0 5vh; font-size: clamp(32px, 4.6vw, 64px); }
.ag-vs { display: grid; gap: 14px; }
.ag-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 22px; border: 1px solid var(--wline); background: rgba(10,12,19,.6); }
.ag-row small { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.ag-on { border-color: var(--line); }
.ag-on small { color: var(--cyan); }
.ag-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 18px; }
.ag-flow span { padding: 6px 14px; border: 1px solid var(--wline); color: var(--dim); transition: color .3s, border-color .3s, background .3s; }
.ag-flow span.lit { color: var(--fg); border-color: rgba(255,255,255,.3); }
.ag-on .ag-flow span.lit { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-a); }
.ag-flow s { text-decoration: line-through 2px var(--violet); }
.ag-flow i { font-style: normal; color: var(--dim); }
.ag-uses { list-style: none; padding: 0; margin: 4vh 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ag-uses li { position: relative; padding: 14px 16px; border: 1px dashed var(--wline); font-size: 15px; color: var(--muted); }
/* 剔號：由三倍大旋轉撼落 → 光圈擴散；格仔同時震一震、閃一閃 */
.ag-tick { position: absolute; top: -12px; right: -10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 16px; font-weight: 900; color: #05080d; background: var(--cyan); opacity: 0; transform: scale(0); pointer-events: none; }
.ag-uses li.hit { border-style: solid; border-color: var(--line); background: rgba(10,12,19,.6); animation: tile-shake .42s .1s, tile-flash .9s .1s; }
.ag-uses li.hit .ag-tick { animation: tick-slam .5s cubic-bezier(.2,1.6,.4,1) forwards, tick-ring .8s .32s ease-out; }
@keyframes tick-slam { 0% { opacity: 0; transform: scale(3.4) rotate(-30deg); } 55% { opacity: 1; transform: scale(.82) rotate(6deg); } 100% { opacity: 1; transform: none; } }
@keyframes tick-ring { from { box-shadow: 0 0 0 0 rgba(98,236,255,.75), 0 0 24px rgba(98,236,255,.8); } to { box-shadow: 0 0 0 26px rgba(98,236,255,0), 0 0 10px rgba(98,236,255,.4); } }
@keyframes tile-shake { 0%, 100% { transform: none; } 15% { transform: translate(-4px, 3px) rotate(-.6deg); } 35% { transform: translate(4px, -3px) rotate(.6deg); } 55% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, -1px); } }
@keyframes tile-flash { 0% { background: rgba(98,236,255,.32); box-shadow: 0 0 40px -4px rgba(98,236,255,.7); } 100% { background: rgba(10,12,19,.6); box-shadow: none; } }
.ag-uses b { display: block; margin-bottom: 4px; font-size: 18px; color: var(--fg); }

/* ---------- 一般區塊 ---------- */
.sec { position: relative; padding: 140px 0; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - 32px); }
.sec-head { margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.15; }
.sec-head p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* 價錢表 */
.pr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.pr-card { padding: 26px 26px 14px; }
.pr-top { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pr-top h3 { font-size: 28px; }
.pr-top small { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.pr-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 54px; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px dashed var(--wline); }
.pr-body .pr-row:last-child { border-bottom: 0; }
/* 價錢入場動畫（main.js 逐行加 .go；.now = 唔使播，直接顯示） */
/* 每行嘅淡入同「其餘型號」拉開都由捲動逐格推（H.pricing），唔用 transition */
.pr-body .pr-row { opacity: 0; }
.pr-cell s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 1.5px; background: var(--violet); transform: scaleX(0); transform-origin: left; transition: transform .3s .25s; }
.pr-row.go .pr-cell s::after { transform: scaleX(1); }
.pr-save { opacity: 0; transform: scale(1.9) rotate(-10deg); }
.pr-row.go .pr-save { animation: pr-stamp .32s .78s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes pr-stamp { to { opacity: 1; transform: none; } }
.pr-row.now, .pr-row.now .pr-cell s::after { transition: none; }
.pr-row.now .pr-save { animation: none; opacity: 1; transform: none; }
.pr-more { height: 0; overflow: hidden; }
.pr-th { padding: 12px 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.pr-th span:nth-child(n+2), .pr-cell, .pr-save { text-align: right; }
.pr-name { min-width: 0; }
.pr-name b { display: block; font-size: 16px; }
.pr-name code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.pr-cell { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--mono); font-variant-numeric: tabular-nums; line-height: 1.35; }
.pr-cell s { position: relative; font-size: 12px; color: var(--muted); text-decoration: none; }
.pr-cell b { font-size: 16px; color: var(--cyan); }
.pr-save { justify-self: end; padding: 2px 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: #05080d; background: var(--cyan); }
.pr-empty { padding: 28px 0; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.pr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.pr-meta a:hover { text-decoration: underline; }
.pr-meta a:first-of-type { margin-left: auto; }
.pr-src { display: inline-flex; align-items: center; gap: 8px; }
.pr-src i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pr-src.live { color: var(--cyan); }
.pr-src.live i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: blink 1.2s steps(1) infinite; }
.pr-legend s { text-decoration-color: rgba(143,123,255,.8); }
.pr-legend b { color: var(--cyan); font-weight: 600; }

/* 價錢場景：卡住畫面；內容高過畫面時 main.js 會將 .pr-wrap 慢慢向上推 */
.stage-pricing { padding-top: calc(var(--hdr) + 2vh); }
.stage-pricing .sec-head { margin-bottom: 3vh; }
.stage-pricing .sec-head h2 { font-size: clamp(30px, 3.8vw, 54px); }
.stage-pricing .sec-head p { margin-top: 8px; }
.stage-pricing .pr-card { padding-top: 20px; }
.stage-pricing .pr-row:not(.pr-th) { padding: 10px 0; }
.stage-pricing .pr-meta { margin-top: 16px; }
.pr-wrap { will-change: transform; }

/* 拉動動畫（main.js 寫 transform／opacity） */
#promo { overflow-x: clip; }
#pr-min { display: inline-block; font-variant-numeric: tabular-nums; }
#pr-min.hit { animation: pull-hit .5s cubic-bezier(.3,1.6,.5,1); }
.pr-card, .promo, .promo-tag, .pt { will-change: transform, opacity; }
.promo-tag { transform-origin: 30% 60%; }
.promo-tag.hit { animation: pull-hit .45s cubic-bezier(.3,1.6,.5,1); }
.pt.hit { border-style: solid; box-shadow: 0 0 26px -8px rgba(143,123,255,.7); transition: box-shadow .3s, border-color .3s; }
@keyframes pull-hit { 40% { transform: scale(1.12); text-shadow: 0 0 28px currentColor; } }

/* 增值優惠 */
.promo { --c: var(--violet); position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; padding: 48px; overflow: hidden;
  box-shadow: 0 0 80px -30px rgba(143,123,255,.55); }
.promo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 0% 0%, rgba(143,123,255,.16), transparent 55%), radial-gradient(circle at 100% 100%, rgba(98,236,255,.1), transparent 50%); }
.promo .kick { color: var(--violet); }
.promo-tag { display: inline-block; margin-bottom: 18px; padding: 6px 18px; font-size: clamp(30px, 4vw, 52px); font-weight: 900; line-height: 1.1; color: #05080d; background: var(--violet);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.promo h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.2; }
.promo-cap { margin-top: 16px; font-size: 17px; color: var(--muted); }
.promo-cap b { color: var(--violet); font-size: 22px; }
.promo-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.promo-side { display: flex; flex-direction: column; gap: 22px; }
.promo-tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 6px; text-align: center; border: 1px dashed rgba(143,123,255,.55); background: rgba(143,123,255,.06); }
.pt span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pt b { font-family: var(--mono); font-size: clamp(20px, 2vw, 26px); color: var(--violet); }
.pt small { font-family: var(--mono); font-size: 10.5px; color: var(--fg); }
.promo-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.promo-steps li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; }
.promo-steps b { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--violet); border: 1px solid rgba(143,123,255,.5); }
.promo-note { font-size: 13.5px; color: var(--fg); padding: 10px 14px; border-left: 2px solid var(--violet); background: rgba(143,123,255,.07); }

/* 價錢段「用量試算」掣 */
/* 掣本身唔郁（撳嘅範圍固定，手機都撳得中），入面嘅綠色外觀上下彈跳：跳兩下再停一陣，落地壓扁少少；滑鼠移上去或者鍵盤選中就停低 */
.pr-calc-btn { padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }
.pr-calc-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.pr-calc-btn > .btn { padding: 10px 18px; font-size: 14px; letter-spacing: 0; transform-origin: 50% 100%; animation: calc-jump 2.2s cubic-bezier(.3,0,.3,1) infinite; }
.pr-calc-btn:hover > .btn, .pr-calc-btn:focus-visible > .btn { animation-play-state: paused; }
@keyframes calc-jump {
  0%, 42%, 100% { transform: none; background: var(--cyan); }
  10% { transform: translateY(-11px); background: #9af3ff; }
  19% { transform: translateY(0) scale(1.04, .9); }
  24% { transform: none; }
  30% { transform: translateY(-5px); background: #9af3ff; }
  36% { transform: translateY(0) scale(1.02, .95); }
}

/* 用量試算彈窗 */
.dlg-open, .dlg-open body { overflow: hidden; }
.calc-dlg { width: min(1120px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; color: var(--fg); background: transparent; border: 0; overflow: visible; }
.calc-dlg::backdrop { background: rgba(3,4,7,.78); backdrop-filter: blur(4px); }
.calc-dlg[open] { animation: cd-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes cd-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.cd-box { position: relative; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 30px 32px; background: var(--bg-2); }
.cd-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; font-size: 18px; color: var(--muted); background: transparent; border: 1px solid var(--wline); cursor: pointer; }
.cd-x:hover { color: var(--fg); border-color: var(--line); }
.cd-box h2 { padding-right: 40px; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.2; }
.cd-intro { margin: 10px 0 22px; color: var(--muted); font-size: 15px; }
.cd-calc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: start; }
.cd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px; }
.cd-field { display: grid; gap: 6px; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.cd-inp { display: flex; align-items: center; border: 1px solid var(--wline); background: rgba(0,0,0,.4); padding-right: 10px; transition: border-color .2s; }
.cd-inp:focus-within { border-color: var(--cyan); }
.cd-inp input, .cd-inp select { flex: 1; min-width: 0; width: 100%; padding: 10px 12px; font-family: var(--mono); font-size: 15px; color: var(--fg); background: transparent; border: 0; outline: 0; }
.cd-inp select { cursor: pointer; font-size: 14px; }
.cd-inp select option { color: var(--fg); background: var(--bg-2); }
.cd-inp em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.cd-q { margin: 24px 0 2px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.cd-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px dashed var(--wline); }
.cd-task label { font-size: 15px; }
.cd-sv { font-family: var(--mono); color: var(--cyan); white-space: nowrap; }
.cd-sv small { margin-left: 4px; font-size: 11px; color: var(--muted); }
.cd-eff { grid-column: 1 / -1; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cd-pick { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cd-pick .cd-inp { flex: 1; min-width: 0; }
.cd-pick select { padding: 6px 10px; font-size: 13px; }
.cd-cost { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-task.off label, .cd-task.off .cd-pick { opacity: .45; }
.cd-task input[type=range] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 10px 0 4px; background: linear-gradient(90deg, var(--cyan) var(--p, 0%), var(--wline) var(--p, 0%)); cursor: pointer; }
.cd-task input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--bg); border: 2px solid var(--cyan); transform: rotate(45deg); cursor: pointer; }
.cd-task input[type=range]::-moz-range-thumb { width: 14px; height: 14px; background: var(--bg); border: 2px solid var(--cyan); border-radius: 0; cursor: pointer; }
.cd-note { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.cd-out { position: sticky; top: 0; padding: 22px; border: 1px solid var(--line); background: rgba(0,0,0,.35); }
.cd-label { margin-bottom: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.cd-big { font-size: clamp(38px, 4.6vw, 58px); font-weight: 700; line-height: 1.1; color: var(--cyan); text-shadow: 0 0 30px rgba(98,236,255,.3); font-variant-numeric: tabular-nums; }
.cd-sub { margin-top: 4px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.cd-grid div { padding: 12px; border: 1px solid var(--wline); background: rgba(0,0,0,.3); }
.cd-grid span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.cd-grid b { font-size: 19px; font-variant-numeric: tabular-nums; }
.cd-grid s { color: var(--muted); text-decoration-color: rgba(143,123,255,.8); }
.cd-grid .lime { color: var(--cyan); }
.cd-grid .pct { margin-left: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.cd-bars { display: grid; gap: 10px; margin-bottom: 20px; }
.cd-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; }
.cd-bar em { font-style: normal; font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-bar i { grid-column: 1 / -1; display: block; height: 6px; background: var(--wline); }
.cd-bar i b { display: block; height: 100%; background: var(--cyan); box-shadow: 0 0 10px rgba(98,236,255,.45); transition: width .45s cubic-bezier(.2,.8,.2,1); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--wline); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-size: 18px; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 22px; color: var(--cyan); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); font-size: 16px; }

/* CTA */
.final { text-align: center; padding: 160px 0 140px; }
.final-lock { width: 110px; overflow: visible; filter: drop-shadow(0 0 26px rgba(98,236,255,.55)); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 48px rgba(98,236,255,.85)); transform: scale(1.04); } }
.final-q { margin-top: 36px; font-size: clamp(18px, 2vw, 24px); color: var(--muted); }
.final-a { font-size: clamp(52px, 8vw, 120px); line-height: 1.1; color: var(--cyan); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 40px rgba(143,123,255,.35)); margin: 8px 0 16px; }
.final-easy { font-size: clamp(19px, 2.3vw, 28px); font-weight: 700; }
.final-easy b { color: var(--cyan); }
/* 優點：波波由下面浮上嚟，之後輕輕上下飄；背後細波波不停向上冒 */
.final-perks { position: relative; max-width: 760px; margin: 30px auto 0; }
.final-bubbles { position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.final-bubbles li { padding: 11px 22px; border-radius: 999px; font-size: 15.5px; color: var(--fg); border: 1px solid rgba(143,123,255,.5); opacity: 0;
  background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.26), rgba(98,236,255,.1) 42%, rgba(98,236,255,.03) 72%);
  box-shadow: inset 0 0 16px rgba(98,236,255,.2), 0 0 20px -6px rgba(98,236,255,.55); }
.final .wrap.in .final-bubbles li { animation: bubble-rise 1.1s cubic-bezier(.2,.8,.2,1) calc(.35s + var(--i) * .2s) forwards, bubble-float calc(3.2s + var(--i) * .45s) ease-in-out calc(1.45s + var(--i) * .2s) infinite; }
@keyframes bubble-rise { 0% { opacity: 0; transform: translateY(70px) scale(.5); } 65% { opacity: 1; transform: translateY(-8px) scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes bubble-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.final-fizz { position: absolute; left: 0; right: 0; top: -40px; bottom: -30px; overflow: hidden; pointer-events: none; }
.final-fizz span { position: absolute; bottom: 0; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  border: 1px solid rgba(98,236,255,.55); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 60%); }
.final .wrap.in .final-fizz span { animation: fizz var(--t) linear var(--d) infinite; }
@keyframes fizz { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 50% { transform: translate(8px, -70px); } 100% { opacity: 0; transform: translate(-4px, -150px); } }
.final-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.footer { border-top: 1px solid var(--wline); padding: 48px 0 120px; color: var(--muted); font-size: 13px; }
.ft-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.ft-brand p { max-width: 34em; line-height: 1.7; }
.footer-logo { display: block; height: 28px; width: auto; margin: 0 0 14px; }
.ft-col { display: flex; flex-direction: column; gap: 8px; }
.ft-col b { color: var(--fg); font-size: 14px; margin-bottom: 4px; }
.ft-col a:hover { color: var(--cyan); }
.ft-copy { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--wline); font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ft-brand { grid-column: 1 / -1; }
}

/* ---------- 響應式 ---------- */
@media (max-width: 1100px) {
  .hdr-nav { display: none; }
  .hdr-wa { margin-left: auto; }
}
@media (max-width: 900px) {
  :root { --hdr: 56px; }
  .bg-word { font-size: 30vw; bottom: 2vh; -webkit-text-stroke-color: rgba(98,236,255,.09); }
  .hdr { padding: 0 16px; gap: 12px; }
  .logo img { height: 26px; }
  .chapters { display: none; }
    /* 鎖：上下排 */
  .stage-lock { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52% 48%; padding: var(--hdr) 20px 0; gap: 0; }
  .lock-wrap { order: -1; height: 100%; }
  .captions { height: 100%; }
  .cap { top: 8%; transform: translateY(12px); }
  .cap.on { transform: none; }
  .cap h2 { font-size: clamp(30px, 8vw, 44px); }
  .cap p { font-size: 15.5px; margin-top: 14px; }
  .lock { width: min(40vw, 190px); }
  .shock { width: min(40vw, 190px); }
  .ring-1 { width: min(66vw, 320px); }
  .ring-2 { width: min(84vw, 400px); }
  .files { --rx: 27vw; --ry: 19vh; }
  .file-in { font-size: 11px; padding: 5px 8px; }
  .lock-readout { bottom: 0; font-size: 11px; }
  .cipher-bg { mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%); }
  /* 安全 */
  .stage-col { padding: calc(var(--hdr) + 16px) 20px 16px; gap: 3vh; }
  .pipe { height: 150px; margin: 0; }
  .pnode .ico { width: 60px; height: 60px; }
  .pnode svg { width: 28px; height: 28px; }
  .pipe-line { top: 40px; }
  .packet { top: 18px; }
  .pnode b { font-size: 13px; margin-top: 4px; }
  .pnode small { display: none; }
  .pk-text { font-size: 11px; }
  .sc-head h2 { font-size: clamp(26px, 7.4vw, 40px); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feat { padding: 14px; }
  .feat h3 { font-size: 16px; margin: 4px 0; }
  .feat p { font-size: 12.5px; line-height: 1.5; }
  /* 承諾 */
  .stage-promise { padding: calc(var(--hdr) + 14px) 16px 14px; gap: 14px; }
  .pm-head h2 { font-size: clamp(26px, 7vw, 36px); }
  .pm-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pm-card { min-height: 0; padding: 12px 16px 12px 74px; }
  .pm-icon { position: absolute; left: 16px; top: 16px; width: 44px; height: 44px; margin: 0; }
  .pm-icon svg { width: 24px; height: 24px; }
  .pm-card h3 { font-size: 18px; margin-bottom: 4px; }
  .pm-card p { font-size: 13px; line-height: 1.5; }
  .pm-tags { display: none; }  /* 五張卡要擠入一屏，手機版唔顯示標籤 */
  .pm-no { top: 10px; right: 12px; font-size: 34px; }
  .pm-foot { font-size: 11px; }
  /* 辦公 */
  .stage-office { padding: calc(var(--hdr) + 14px) 16px 14px; gap: 14px; }
  .of-head h2 { font-size: clamp(24px, 6.6vw, 36px); }
  .of-sub { margin-top: 6px; font-size: 13px; }
  .of-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .of-card { padding: 12px; gap: 7px; }
  .of-card.on { transform: none; }
  .of-card h3 { font-size: 15px; }
  .of-row { grid-template-columns: 28px minmax(0, 1fr); font-size: 10.5px; gap: 2px 6px; }
  .of-row em { font-size: 10px; }
  .of-track { height: 6px; }
  .of-res { min-height: 2.7em; font-size: 11.5px; line-height: 1.35; }
  .of-total { grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 12px 14px; }
  .of-total b { font-size: 16px; }
  .of-saved { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
  .of-saved b { font-size: 26px; }
  /* 指令 */
  .cmd-head { top: calc(var(--hdr) + 16px); padding: 0 16px; }
  .cmd-head h2 { font-size: clamp(22px, 6.2vw, 32px); }
  .cmd-zone { width: calc(100% - 32px); }
  .setup { padding: 14px 16px; }
  .setup-list li { height: 34px; font-size: 13.5px; gap: 10px; }
  .setup-stamp { width: 92%; border-width: 4px; outline-offset: -11px; padding: 10px 12px 12px; }
  .ss-brand { font-size: 34px; }
  .ss-line { font-size: 19px; letter-spacing: .1em; }
  .cmd-bar { min-height: 56px; padding: 12px 14px; font-size: 14.5px; gap: 8px; }
  .kbd { font-size: 10px; padding: 4px 6px; }
  .cmd-status { font-size: 10.5px; }
  .cmd-count b { font-size: 14px; }
  .agent-grid { width: calc(100% - 32px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ag-tile { padding: 6px 7px; font-size: 11px; }
  .ag-tile .t-top { font-size: 9px; }
  .cr-file { font-size: 18px; }
  /* 分工 */
  .stage-orch { padding: calc(var(--hdr) + 12px) 16px 12px; gap: 12px; }
  .or-head h2 { font-size: clamp(24px, 6.6vw, 36px); }
  .or-head p { display: none; }
  .or-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .or-main { gap: 8px; }
  .or-input { font-size: 13px; padding: 8px 12px; min-height: 40px; }
  .or-diagram { height: 30vh; }
  .o-boss, .o-out { min-width: 0; padding: 6px 10px; gap: 8px; }
  .o-boss .o-badge { width: 32px; height: 32px; font-size: 12px; }
  .o-badge { min-width: 30px; height: 26px; font-size: 10px; padding: 0 4px; }
  .o-boss b, .o-out b { font-size: 13px; }
  .o-boss small, .o-out small { font-size: 10.5px; }
  .o-agent { width: 18.6%; padding: 7px 2px 8px; }
  .o-agent b { font-size: 11px; margin-top: 2px; }
  .o-agent small, .o-agent em { display: none; }
  .or-panel { padding: 12px 14px; }
  .or-panel .kick { margin: 2px 0 6px; font-size: 10.5px; }
  .gantt { gap: 8px; margin-bottom: 8px; }
  .g-label { font-size: 12px; }
  .qa { grid-template-columns: 1fr 1fr; font-size: 11px; gap: 3px; margin-bottom: 6px; }
  .d-files, .or-note, .deliver .kick { display: none; }
  .d-badges { margin-top: 2px; }
  .d-badges b { font-size: 11px; padding: 3px 7px; }
  /* 分欄場景 */
  .ez-worry { padding: calc(var(--hdr) + 12px) 20px 100px; }
  .ez-worry h2 { font-size: clamp(30px, 8.4vw, 44px); }
  .ez-ans { margin-top: 10px; font-size: 15.5px; }
  .ez-fix { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px; }
  .ez-fix li { grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; }
  .ez-fix small { grid-row: span 2; align-self: center; }
  .ez-fix s { font-size: 15.5px; }
  .ez-fix li.s3 s { font-size: 12.5px; }
  .ez-fix b { font-size: 15px; }
  .kick-t { padding: 6px 12px 6px 9px; font-size: 13.5px; gap: 8px; }
  .cd-box { padding: 22px 16px; }
  .cd-calc, .cd-top { grid-template-columns: minmax(0, 1fr); }
  .cd-out { position: static; padding: 16px; }
  .title-only .kick-t { padding: 10px 16px 10px 12px; gap: 10px; font-size: clamp(19px, 5.6vw, 24px); }
  .ez-fix-badge { top: -9px; right: -6px; width: 24px; height: 24px; font-size: 13px; }
  .ez-time { margin-top: 16px; }
  .ez-time s { font-size: 13.5px; }
  .stage-split { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 3vh; padding: calc(var(--hdr) + 12px) 20px 16px; }
  .stage-split h2 { font-size: clamp(32px, 9vw, 48px); }
  .stage-split p { font-size: 15.5px; margin-top: 12px; }
  .ez-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
  .ez-steps li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-left: 0; border-top: 2px solid var(--wline); }
  .ez-steps li.on { border-top-color: var(--cyan); }
  .ez-steps li span { font-size: 14px; }
  .ez-steps li small { display: none; }
  .ez-tool { margin-top: 12px; }
  .ez-scr { padding: 14px; }
  .ez-slot { left: 14px; right: 14px; top: 58px; }
  .ez-dialog { left: 4%; right: 4%; top: 8px; padding: 12px 14px; gap: 8px; }
  .ez-wsteps { display: none; }
  .ez-term { left: 10px; right: 10px; font-size: 11px; }
  .ez-tbody { gap: 1px; padding: 6px 8px; line-height: 1.35; }
  .ez-need { display: none; }
  .ez-device { height: 330px; }
  .ez-kh { margin-bottom: 10px; }
  .ez-kv { min-height: 34px; font-size: 13px; }
  /* Agent */
  .stage-agent { padding: calc(var(--hdr) + 12px) 20px 16px; }
  .ag-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
  .ag-flow { gap: 6px; font-size: 15px; }
  .ag-flow span { padding: 5px 10px; }
  .ag-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .ag-uses li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ag-tick { top: -10px; right: -6px; width: 24px; height: 24px; font-size: 13px; }
  .ag-uses li { padding: 10px 12px; font-size: 13.5px; }
  .ag-uses b { font-size: 16px; }
  /* 一般 */
  .sec { padding: 96px 0; }
  .pr-grid, .promo { grid-template-columns: minmax(0, 1fr); }
  .promo { padding: 32px 24px; gap: 30px; }
}
@media (max-width: 600px) {
  /* 手機位唔夠：橫幅放喺兩粒按鈕上面，佔全行 */
  .dock { left: 12px; right: 12px; bottom: 12px; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .ticker { order: -1; flex: 1 1 100%; height: 34px; }
  .ticker-set a { padding: 0 20px; font-size: 13px; }
  .fab { padding: 9px 14px 9px 12px; font-size: 13.5px; gap: 8px; --cut: 9px; }
  .fab svg { width: 15px; height: 15px; }
  /* 全屏段落底部留位俾懸浮按鈕 */
  .stage-office, .stage-col, .stage-orch, .stage-promise, .stage-split, .stage-agent { padding-bottom: 100px; }
  .cmd-more { bottom: 104px; }
  .hdr .btn-sm { display: none; }
  .hdr-wa { padding: 6px 12px 6px 10px; font-size: 13px; }
  .pr-card { padding: 20px 16px 8px; }
  .pr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 4px 10px; }
  .pr-row .pr-name { grid-column: 1 / -1; }
  .pr-th span:first-child { display: none; }
  .pr-th span:nth-child(-n+3), .pr-row .pr-cell { text-align: left; align-items: flex-start; }
  .pr-meta a:first-of-type { margin-left: 0; }
  .promo { padding: 28px 16px; }
  .promo-cta .btn { flex: 1 1 100%; white-space: normal; }
  .it-tags { gap: 7px; }
  .it-tags span { font-size: 11px; padding: 4px 8px; gap: 5px; }
  .it-tags svg { width: 11px; height: 11px; }
}
@media (max-height: 720px) and (max-width: 900px) {
  .stage-promise { gap: 8px; padding-bottom: 84px; }
  .pm-head h2 { font-size: 24px; }
  .pm-grid { gap: 6px; }
  .pm-card { padding-top: 9px; padding-bottom: 9px; }
  .pm-card p { font-size: 12px; line-height: 1.4; }
  .pm-foot { display: none; }
}
@media (max-height: 640px) and (max-width: 900px) {
  .feat p { display: none; }
  .ez-device { height: 290px; }
}

@media (prefers-reduced-motion: reduce) {
  .fab-ring, .fab-dot { animation: none !important; }
  .it-tags span { animation: none !important; opacity: 1; transform: none; }
  .it-tags path { animation: none !important; stroke-dashoffset: 0; }
  .ticker { overflow-x: auto; }
  .ticker-track { animation: none; }
  .fx-scan::after, .ring, .floor, .file-in, .final-lock, .final-fizz span { animation: none !important; }
  .final .wrap.in .final-bubbles li { animation: none !important; opacity: 1; }
  .ag-uses li.hit, .ag-uses li.hit .ag-tick, .ez-fix li.s3, .ez-fix li.s3 .ez-fix-badge, .pr-calc-btn > .btn { animation: none !important; }
  .ag-uses li.hit .ag-tick { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .setup-stamp.slam, .stage-cmd.shake { animation: none !important; }
  #pr-min.hit, .ez-time.hit b, .promo-tag.hit { animation: none !important; }
  .of-done.on .of-disc, .of-done.on .of-tick, .of-done.on .of-done-t, .of-done.on .of-done-s { animation: none !important; transform: none; stroke-dashoffset: 0; opacity: 1; }
  .of-rays, .of-ring { display: none; }
}

/* =========================================================
   NGT 內容：沿用上面嘅色、字、HUD 角框，只係加返新內容要用嘅排版
   ========================================================= */
/* 01 關於：簡介段落；三個重點排三格 */
.ag-lead { max-width: 46em; margin: -2vh 0 4vh; font-size: 17px; line-height: 1.75; color: var(--muted); }
.ag-uses-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 03 工作流程：標題下面嘅副題 */
.sc-head p { margin-top: 12px; font-size: 17px; color: var(--muted); }

/* 04 精選作品 */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.work-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; transition: transform .25s, box-shadow .25s; }
.work-card:hover { --c: var(--cyan); transform: translateY(-3px); box-shadow: 0 0 40px -14px rgba(98,236,255,.6); }
.work-no { font-family: var(--mono); font-size: 13px; color: var(--cyan); }
.work-card h3 { font-size: 21px; padding-right: 24px; }
.work-card p { color: var(--muted); font-size: 14.5px; }
.work-go { position: absolute; top: 18px; right: 20px; font-style: normal; font-family: var(--mono); color: var(--dim); transition: color .25s, transform .25s; }
.work-card:hover .work-go { color: var(--cyan); transform: translate(2px, -2px); }
.work-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.work-count { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* 05 核心能力 */
.cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cap-card { display: flex; flex-direction: column; padding: 30px 28px 26px; }
.cap-card .kick { margin-bottom: 10px; }
.cap-card h3 { margin-bottom: 12px; font-size: clamp(22px, 2vw, 28px); }
.cap-card p, .cap-list { color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.cap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cap-list li::before { content: "› "; font-family: var(--mono); color: var(--cyan); }
.cap-link { margin-top: auto; padding-top: 22px; font-family: var(--mono); font-size: 13px; color: var(--cyan); }
.cap-link:hover { text-decoration: underline; }

/* 07 媒體報導 */
.press-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.press-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; transition: transform .25s, box-shadow .25s; }
.press-card .kick { margin-bottom: 0; }
.press-card b { font-size: clamp(22px, 2.2vw, 30px); }
.press-go { font-family: var(--mono); font-size: 13px; color: var(--muted); transition: color .25s; }
.press-card:hover { --c: var(--cyan); transform: translateY(-3px); box-shadow: 0 0 40px -14px rgba(98,236,255,.6); }
.press-card:hover .press-go { color: var(--cyan); }

@media (max-width: 900px) {
  .ag-lead { margin: -2vh 0 2.5vh; font-size: 14.5px; line-height: 1.6; }
  .ag-uses-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-head p { font-size: 14.5px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .work-card { padding: 16px; }
  .work-card h3 { font-size: 17px; }
  .work-card p { font-size: 13px; }
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
  .cap-card { padding: 24px 20px 20px; }
}
@media (max-width: 600px) {
  .work-grid, .press-grid { grid-template-columns: minmax(0, 1fr); }
  .work-more .btn { flex: 1 1 100%; white-space: normal; }
}
@media (max-height: 720px) and (max-width: 900px) {
  .ag-lead { display: none; }  /* 矮畫面擠唔落：簡介留返俾 SEO／無障礙，畫面只顯示標題同重點 */
}

/* 手機：六張服務卡排兩欄；「關於」收細啲，等成段擠入一屏（唔好俾底部懸浮列遮住） */
@media (max-width: 900px) {
  .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pm-card { padding: 12px; }
  .pm-icon { position: static; width: 32px; height: 32px; margin: 0 0 8px; }
  .pm-icon svg { width: 18px; height: 18px; }
  .pm-no { top: 8px; right: 10px; font-size: 26px; }
  .pm-card h3 { font-size: 15.5px; }
  .pm-card p { font-size: 12px; line-height: 1.45; }
  .ag-wrap h2 { margin: 6px 0 2vh; font-size: clamp(26px, 7.4vw, 40px); }
  #about .ag-vs { gap: 8px; }
  #about .ag-row { gap: 6px; padding: 10px 12px; }
  #about .ag-flow { gap: 5px; font-size: 13px; }
  #about .ag-flow span { padding: 3px 8px; }
  .ag-uses-3 { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 2.5vh; }
  .ag-uses-3 li { padding: 9px 12px; font-size: 12.5px; line-height: 1.5; }
  .ag-uses-3 b { margin-bottom: 2px; font-size: 15px; }
}
@media (max-height: 720px) and (max-width: 900px) {
  .pm-icon { display: none; }
  .ag-uses-3 li span { display: none; }  /* 矮畫面只留三個重點標題 */
}

/* 鍵盤焦點：青色外框；斜角按鈕（clip-path 會剪走 outline）改用紫色內框 */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn:focus-visible, .fab:focus-visible, .hdr-wa:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--violet), inset 0 0 0 4px var(--bg); }
::selection { background: rgba(143,123,255,.45); color: #fff; }