/* SnatchOS 官網 v5 · 低擬真共用樣式 */
:root{
  --or:#FF6A24;--or2:#FF8A47;--or3:#FFB784;
  --ink:#EDEDEA;--mut:rgba(237,237,234,.62);
  --bg:#0B0B0E;--warm:#15100C;--cool:#101317;--panel:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.1);--green:#8fd19e;--red:#ff8a72;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Noto Sans TC',system-ui,sans-serif;line-height:1.75;-webkit-text-size-adjust:100%;padding-bottom:40px}
a{color:inherit;text-decoration:none}
::selection{background:var(--or);color:#fff}

/* 低擬真狀態條 */
#lofi{position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(255,106,36,.14);
  border-top:1px solid rgba(255,140,60,.4);backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--or3);padding:7px 14px;text-align:center}

/* 導覽（多分頁） */
html{scroll-padding-top:78px}
nav{position:sticky;top:0;z-index:100;background:rgba(11,11,14,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.5)}
nav .bar{max-width:1120px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:14px;height:58px}
nav .logo{font-family:var(--mono);letter-spacing:.28em;font-size:13px;flex:none;white-space:nowrap}
nav .logo b{color:var(--or)}
nav .links{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;font-size:13.5px;white-space:nowrap}
nav .links::-webkit-scrollbar{display:none}
nav .links a{padding:6px 10px;border-radius:99px;color:var(--mut);flex:none}
nav .links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
nav .links a.on{color:var(--or2);background:rgba(255,106,36,.14);font-weight:700}
nav .sep{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:rgba(237,237,234,.28);
  padding:0 8px 0 12px;border-left:1px solid var(--line);margin-left:6px;align-self:stretch;
  display:flex;align-items:center}
nav .cta{flex:none;font-size:13px;font-weight:700;background:var(--or);color:#fff;padding:8px 15px;border-radius:99px;white-space:nowrap}
section[id]{scroll-margin-top:74px}

/* 區塊 */
section{padding:12vh 20px;border-top:1px solid rgba(255,255,255,.05)}
section.warm{background:var(--warm)}
section.cool{background:var(--cool)}
section.tight{padding:8vh 20px}
.wrap{max-width:1020px;margin:0 auto}
.wrap.narrow{max-width:780px}
.center{text-align:center}
.actno{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--or2);display:flex;align-items:center;gap:12px;margin-bottom:16px}
.actno::before{content:'';width:26px;height:1px;background:var(--or)}
.center .actno{justify-content:center}
h1{font-size:clamp(27px,4.2vw,44px);font-weight:900;line-height:1.4}
h2{font-size:clamp(23px,3.2vw,36px);font-weight:900;line-height:1.42}
h3{font-size:clamp(18px,2.1vw,23px);font-weight:900;line-height:1.5}
.lead{margin-top:14px;color:var(--mut);font-size:15px;max-width:660px}
.center .lead{margin-left:auto;margin-right:auto}
.grad{color:var(--or2)}

/* 卡片與格線 */
.cols{display:grid;gap:14px;margin-top:24px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--panel)}
.card b.t{display:block;font-size:16px;margin-bottom:6px}
.card .s{font-size:13.5px;color:var(--mut)}
.card .tiny{font-size:11.5px;color:rgba(237,237,234,.4);margin-top:8px;font-family:var(--mono)}

/* 路線標示（本版重點） */
.route{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:#9db8ff;border:1px dashed rgba(120,160,255,.5);background:rgba(80,120,255,.09);
  border-radius:99px;padding:2px 9px;margin-left:8px;vertical-align:middle;white-space:nowrap}
.route.ext{color:#c9a0ff;border-color:rgba(180,140,255,.5);background:rgba(150,110,255,.1)}
.route.stub{color:var(--or3);border-color:rgba(255,140,60,.45);background:rgba(255,106,36,.08)}

/* 佔位框 */
.ph{border:1.5px dashed rgba(255,140,60,.5);border-radius:16px;padding:22px 18px;text-align:center;
  background:rgba(255,106,36,.05);color:var(--or3);font-size:13px;font-family:var(--mono);line-height:1.85}
.ph b{display:block;font-family:'Noto Sans TC';font-size:14.5px;color:var(--or2);margin-bottom:5px}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;padding:12px 24px;border-radius:99px;margin-top:22px}
.btn.p{background:var(--or);color:#fff}
.btn.g{border:1px solid var(--line);color:var(--ink)}

/* 問句式痛點 */
.qlist{margin-top:26px;display:grid;gap:10px}
.q{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--panel)}
.q .ask{font-size:16.5px;font-weight:700;line-height:1.6}
.q .ask::before{content:'「為什麼';color:var(--or2)}
.q .ask::after{content:'？」';color:var(--or2)}
.q .ans{margin-top:9px;font-size:13.5px;color:var(--green);font-weight:700}
.q .ans::before{content:'→ ';}

/* 金流對比 */
.fee{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-top:22px}
.fee .box{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--panel)}
.fee .box.us{border-color:rgba(255,140,60,.5);background:rgba(255,106,36,.07)}
.fee .lbl{font-size:13px;color:var(--mut);margin-bottom:10px}
.fee .num{font-family:var(--mono);font-size:30px;font-weight:500}
.fee .them .num{color:var(--red)}
.fee .us .num{color:var(--or2)}
.fee ul{list-style:none;margin-top:12px;font-size:13px;color:var(--mut)}
.fee li{padding:4px 0 4px 16px;position:relative}
.fee li::before{content:'·';position:absolute;left:4px}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px}
.fee .them .bar i{background:var(--red);width:100%}
.fee .us .bar i{background:var(--or2);width:24%}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:16px}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
th{background:rgba(255,255,255,.05);color:var(--or2);font-weight:700;white-space:nowrap}
td{color:var(--mut)}
td b{color:var(--ink)}

/* 報價計算機 */
.quote{border:1px solid rgba(255,140,60,.4);border-radius:20px;padding:clamp(18px,3vw,30px);background:rgba(255,255,255,.03);margin-top:22px}
.mods{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.mod{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;background:rgba(255,255,255,.02)}
.mod.on{border-color:rgba(255,140,60,.6);background:rgba(255,106,36,.1)}
.mod input{margin-top:4px;accent-color:var(--or)}
.mod .nm{font-size:14px;font-weight:700}
.mod .pr{font-family:var(--mono);font-size:11.5px;color:var(--mut);display:block}
.qtotal{margin-top:18px;border:2px solid rgba(255,106,36,.6);border-radius:16px;padding:16px 20px;background:rgba(255,106,36,.07);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.qtotal .v{font-family:var(--mono);font-size:clamp(22px,3vw,30px);color:var(--or2)}

/* 網站地圖 */
.sitemap{border:1.5px dashed rgba(120,160,255,.4);border-radius:18px;padding:20px;background:rgba(80,120,255,.05)}
.sitemap h4{font-size:14px;color:#9db8ff;font-family:var(--mono);letter-spacing:.14em;margin-bottom:14px}
.smgrid{display:grid;gap:10px;grid-template-columns:repeat(4,1fr)}
.smitem{border:1px solid rgba(120,160,255,.3);border-radius:12px;padding:11px 13px;background:rgba(11,11,14,.5)}
.smitem b{display:block;font-size:14px}
.smitem span{font-family:var(--mono);font-size:10.5px;color:#9db8ff}
.smitem p{font-size:12px;color:var(--mut);margin-top:5px}

footer{padding:26px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;color:rgba(237,237,234,.4)}
footer .fl{font-family:var(--mono);letter-spacing:.32em;color:var(--or2)}

@media(max-width:860px){
  .c2,.c3,.c4,.fee,.mods,.smgrid{grid-template-columns:1fr}
  .smgrid{grid-template-columns:repeat(2,1fr)}
  section{padding:9vh 16px}
  nav .bar{gap:10px;padding:0 12px}
  nav .sep{display:none}
  nav .links{font-size:13px}
}

/* ─── 顯眼章節名（Why Us） ─── */
.bigno{font-family:var(--mono);letter-spacing:.18em;font-weight:500;
  font-size:clamp(20px,3.4vw,34px);color:var(--or2);display:inline-block;margin-bottom:14px;
  padding:8px 22px;border:1.5px solid rgba(255,140,60,.55);border-radius:99px;
  background:rgba(255,106,36,.1);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,106,36,.35)}50%{box-shadow:0 0 0 14px rgba(255,106,36,0)}}
.bigno em{font-style:normal;font-family:'Noto Sans TC';font-weight:900;letter-spacing:0}
.only{background:linear-gradient(90deg,var(--or),#ffd08a);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ─── 影片式示範（手機模擬器＋側邊說明） ─── */
.vdemo{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:22px;align-items:center;
  border:1.5px dashed rgba(255,140,60,.5);border-radius:20px;padding:20px;
  background:rgba(255,106,36,.05);margin-top:22px;text-align:left}
.vdemo .screen{border:1px solid rgba(255,140,60,.6);border-radius:26px;aspect-ratio:390/844;
  width:100%;max-width:280px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(0,0,0,.35);color:var(--or3);font-family:var(--mono);font-size:12px;text-align:center;padding:16px}
.vdemo .screen b{font-family:'Noto Sans TC';font-size:14px;color:var(--or2)}
.vdemo .screen .zoom{font-size:11px;color:var(--mut);line-height:1.7}
.vdemo .steps{list-style:none}
.vdemo .steps li{padding:9px 0 9px 30px;position:relative;font-size:14px;border-bottom:1px dashed rgba(255,255,255,.08)}
.vdemo .steps li:last-child{border-bottom:0}
.vdemo .steps li b{color:var(--or2)}
.vdemo .steps li::before{content:counter(s);counter-increment:s;position:absolute;left:0;top:9px;
  width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,140,60,.6);color:var(--or2);
  font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center}
.vdemo .steps{counter-reset:s}
.vdemo .cap{font-size:12px;color:var(--mut);font-family:var(--mono);margin-top:12px}

/* ─── 報價：同行比較 ─── */
/* 9/3 同行對比長條與「省下多少」綠框已移除（Peter 拍板） */
.save{margin-top:12px;border:2px solid rgba(143,209,158,.5);background:rgba(143,209,158,.09);
  border-radius:14px;padding:13px 16px;font-size:14px}
.save b{color:var(--green);font-family:var(--mono);font-size:18px}
.pledge{margin-top:14px;border:1px solid rgba(255,140,60,.45);border-radius:14px;padding:14px 16px;
  background:rgba(255,106,36,.06);font-size:13.5px;line-height:1.8}
.pledge .tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--or2);border:1px solid rgba(255,140,60,.5);border-radius:99px;padding:2px 10px;margin-bottom:8px}

@media(max-width:860px){ .vdemo{grid-template-columns:1fr} .vdemo .screen{max-width:220px} }

/* ─── 報價：分層模組 ─── */
.qsec{margin-top:22px}
.qsec .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.qsec .hd h4{font-size:16px;font-weight:900}
.qsec .hd .tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:2px 9px;border-radius:99px;
  border:1px solid rgba(255,140,60,.5);color:var(--or2);background:rgba(255,106,36,.08)}
.qsec .hd .tag.req{background:var(--or);color:#fff;border-color:var(--or)}
.qsec .sd{font-size:12.5px;color:var(--mut);margin-bottom:10px}
.rows{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02)}
.r{display:grid;grid-template-columns:22px 1fr auto;gap:3px 12px;align-items:start;
  padding:13px 15px;border-top:1px solid var(--line);cursor:pointer}
.rows>.r:first-child,.gbody>.r:first-child{border-top:0}
.r:hover{background:rgba(255,255,255,.03)}
.r.on{background:rgba(255,106,36,.1);box-shadow:inset 3px 0 0 var(--or)}
.r.lock{cursor:default;background:rgba(255,106,36,.07);box-shadow:inset 3px 0 0 var(--or)}
.r input{width:16px;height:16px;accent-color:var(--or);margin:2px 0 0}
.r .n{grid-column:2;font-weight:700;font-size:14.5px}
.r .d{grid-column:2;grid-row:2;font-size:12px;color:var(--mut);line-height:1.6;margin-top:2px}
.r .p{grid-column:3;grid-row:1;font-family:var(--mono);font-size:14px;color:var(--or2);white-space:nowrap}
.r .cp{grid-column:3;grid-row:2;font-family:var(--mono);font-size:10.5px;color:var(--red);white-space:nowrap;text-align:right;margin-top:3px}
.gp{border-top:1px solid var(--line)}
.rows>.gp:first-child{border-top:0}
.gp>summary{list-style:none;cursor:pointer;padding:13px 15px;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);font-weight:700;font-size:14.5px}
.gp>summary::-webkit-details-marker{display:none}
.gp>summary::before{content:'▸';color:var(--or2);font-size:13px;transition:transform .18s;display:inline-block}
.gp[open]>summary::before{transform:rotate(90deg)}
.gp>summary .sub{font-family:var(--mono);font-size:10.5px;color:var(--mut);font-weight:400}
.gp>summary .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--or2)}
.gbody{border-top:1px dashed var(--line)}
.gnote{padding:9px 15px;font-size:11.5px;color:var(--or3);background:rgba(255,106,36,.05);
  border-top:1px dashed rgba(255,140,60,.3)}
.qinfo{margin-top:10px;border:1px dashed var(--line);border-radius:12px;padding:12px 15px;font-size:12.5px;color:var(--mut)}
.qinfo b{color:var(--ink)}
.qinfo .li{padding:4px 0}

/* ─── 用戶體驗輪播 ─── */
.car{margin-top:24px;position:relative}
.cartrack{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.cartrack::-webkit-scrollbar{display:none}
.carslide{flex:0 0 100%;scroll-snap-align:start;padding:0 2px}
.carhint{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.cardots{display:flex;gap:7px}
.dot{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.2);cursor:pointer;
  transition:width .25s,background .25s;position:relative;overflow:hidden;border:0;padding:0}
.dot.on{width:42px;background:rgba(255,106,36,.28)}
.dot.on i{position:absolute;inset:0;background:var(--or);width:0;animation:fill var(--dur,7s) linear forwards}
@keyframes fill{to{width:100%}}
.swipe{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:rgba(237,237,234,.4)}
.carslide .vdemo{margin-top:0}
.carslide .role{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--or2);border:1px solid rgba(255,140,60,.5);background:rgba(255,106,36,.1);
  border-radius:99px;padding:3px 11px;margin-bottom:10px}
.bgnote{margin-top:12px;border-left:2px solid rgba(255,140,60,.5);padding:6px 0 6px 12px;
  font-size:12.5px;color:var(--or3);line-height:1.75}
.bgnote b{color:var(--or2)}

/* ═══ B+C 混合背景（C 動態已實作、B 照片以標籤示意） ═══ */
section{position:relative;overflow:hidden}
section .wrap{position:relative;z-index:2}
.bgtag{position:absolute;top:10px;right:12px;z-index:3;font-family:var(--mono);font-size:10px;
  letter-spacing:.05em;color:var(--or3);border:1px dashed rgba(255,140,60,.4);border-radius:99px;
  padding:2px 10px;background:rgba(11,11,14,.65)}
.bgph{position:absolute;inset:0;z-index:0;pointer-events:none}
.bgph.hero{background:
  radial-gradient(60% 85% at 72% 15%, rgba(255,106,36,.13), transparent 62%),
  radial-gradient(45% 70% at 15% 85%, rgba(255,170,80,.07), transparent 65%);
  animation:heroDrift 10s ease-in-out infinite alternate}
@keyframes heroDrift{to{transform:translate(3%,-2%) scale(1.06)}}
#rain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.33}

/* C-1 五節點動線 */
.flow{position:relative;margin-top:26px;padding-top:6px}
.fline{position:absolute;left:6%;right:6%;top:27px;height:2px;background:rgba(255,255,255,.08);border-radius:99px}
.fline i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#00ff41 70%,var(--or2));transition:width 1.8s ease}
.flow.seen .fline i{width:100%}
.fnodes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative}
.fnode{text-align:center;padding-top:0}
.fnode .d{width:14px;height:14px;border-radius:50%;margin:14px auto 10px;border:2px solid rgba(255,255,255,.25);
  background:var(--bg);transition:all .4s ease;position:relative;z-index:1}
.flow.seen .fnode .d{border-color:#00ff41;box-shadow:0 0 10px rgba(0,255,65,.45)}
.flow.seen .fnode:last-child .d{border-color:var(--or2);box-shadow:0 0 10px rgba(255,140,60,.5)}
.fnode:nth-child(1) .d{transition-delay:.15s}.fnode:nth-child(2) .d{transition-delay:.5s}
.fnode:nth-child(3) .d{transition-delay:.85s}.fnode:nth-child(4) .d{transition-delay:1.2s}
.fnode:nth-child(5) .d{transition-delay:1.6s}
.fnode b{display:block;font-size:13.5px;margin-bottom:4px}
.fnode span{font-size:11.5px;color:var(--mut);line-height:1.55;display:block}
.fnode .x{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:10px;color:var(--or3);
  border:1px dashed rgba(255,140,60,.45);border-radius:99px;padding:1px 8px}

/* C-2 三格對照 */
.see3 .shot{position:relative;height:120px;border-radius:10px;overflow:hidden;background:#191919;margin-bottom:12px}
.see3 .shot::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px);
  animation:scan 6s linear infinite}
@keyframes scan{to{background-position:0 60px}}
.see3 .shot .cam{position:absolute;top:6px;left:8px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.45)}
.see3 .shot .rec{position:absolute;top:6px;right:8px;font-family:var(--mono);font-size:9px;color:#ff5f4d;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.see3 svg{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%)}
.see3 .fig{stroke:rgba(255,255,255,.4);stroke-width:2.5;fill:none;stroke-linecap:round}
.see3 .skel{stroke:#00ff41;stroke-width:1.6;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(0,255,65,.6))}
.see3 .jnt{fill:#00ff41}
.see3 .tagline{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-family:var(--mono);
  font-size:9.5px;color:#00ff41;background:rgba(0,0,0,.55);border:1px solid rgba(0,255,65,.4);
  border-radius:4px;padding:1px 7px;white-space:nowrap}
.see3 .data{position:absolute;inset:0;padding:14px;font-family:var(--mono);font-size:11.5px;
  color:#00ff41;line-height:2;background:#0a0d0a}
.see3 .data .dim{color:rgba(0,255,65,.45)}

/* ═══ B 層實景背景（2026-08-08 上線） ═══ */
.bgimg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;pointer-events:none}
.bgimg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,14,.82),rgba(11,11,14,.55) 26%,rgba(11,11,14,.58) 72%,rgba(11,11,14,.88))}
.bgimg.b1{background-image:url('bg/b1.webp')}
.bgimg.b2{background-image:url('bg/b2.webp')}
.bgimg.b3{background-image:url('bg/b3.webp')}
.bgimg.b4{background-image:url('bg/b4.webp')}
.bgimg.b5{background-image:url('bg/b5.webp')}
.bgimg.b5::after{background:linear-gradient(180deg,rgba(11,11,14,.8),rgba(11,11,14,.62) 30%,rgba(11,11,14,.66) 70%,rgba(11,11,14,.9))}
.bgimg.b6{background-image:url('bg/b6.webp')}
.bgimg.b7{background-image:url('bg/b7.webp')}
.bgimg.b7::after{background:linear-gradient(180deg,rgba(11,11,14,.85),rgba(11,11,14,.68) 30%,rgba(11,11,14,.7) 70%,rgba(11,11,14,.92))}
/* 幕1 光影漂移疊在照片上方；數位雨也要壓過照片 */
.bgph.hero{z-index:1}
#rain{z-index:1}
/* 幕1 靜態照緩慢 Ken Burns，先頂替循環短片 */
.bgimg.b1{animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07) translateX(-1.5%)}}

/* ═══ 8/8 Peter：翻頁式滾動＋字級放大（僅首頁 body#pgHome） ═══ */
html:has(#pgHome){scroll-snap-type:y mandatory}
#pgHome section{scroll-snap-align:start;scroll-snap-stop:always;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:10vh;padding-bottom:10vh}
#pgHome section.tight{min-height:auto;scroll-snap-align:start}
#pgHome footer{scroll-snap-align:end}

/* 字級整體放大 */
h1{font-size:clamp(33px,5.4vw,58px)}
h2{font-size:clamp(28px,4.2vw,46px)}
h3{font-size:clamp(21px,2.6vw,28px)}
.lead{font-size:17px;max-width:700px;line-height:1.85}
.card b.t{font-size:18px}
.card .s{font-size:15px}
.card .tiny{font-size:12.5px}
.q .ask{font-size:19px}
.q .ans{font-size:15px}
.fee .num{font-size:clamp(30px,3.6vw,40px)}
.fee ul{font-size:14.5px}
.btn{font-size:16px;padding:14px 28px}
nav .links{font-size:14.5px}
.actno{font-size:12px}
.vdemo .steps li{font-size:15px}
.fnode b{font-size:15px}
.fnode span{font-size:12.5px}
.r .n{font-size:15.5px}
.r .d{font-size:13px}
.smitem b{font-size:15px}
table{font-size:14.5px}

/* ─── 輪播真影片格 ─── */
.vdemo.hasvid{grid-template-columns:1fr}
.vidbox{aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(255,140,60,.5);background:#000}
.vidbox video{width:100%;height:100%;display:block;object-fit:cover}
.vidbox+.cap,.vidcap{font-size:12px;color:var(--mut);font-family:var(--mono);margin-top:8px}

/* ─── 創辦人肖像（去背版） ─── */
.founderpic{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;
  background:radial-gradient(90% 80% at 50% 12%,#1c2534,#0b0e14 78%);
  display:flex;align-items:flex-end;justify-content:center}
.founderpic::before{content:'';position:absolute;left:10%;right:10%;bottom:-8%;height:38%;
  background:radial-gradient(50% 60% at 50% 100%,rgba(255,106,36,.32),transparent 70%);filter:blur(10px)}
.founderpic img{position:relative;height:96%;object-fit:contain;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.55))}
.founderpic .tag{position:absolute;top:12px;left:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--or3);border:1px solid rgba(255,140,60,.4);border-radius:99px;
  padding:2px 10px;background:rgba(11,11,14,.55)}

/* ═══ 8/11 修正：創辦人比例＋小螢幕截斷 ═══ */
/* 創辦人照片限寬置中，不再撐滿半欄 */
.founderpic{max-width:380px;width:100%;margin:0 auto}
/* 首頁每幕底部保底留白（固定狀態條 30px + 呼吸），避免內容貼底被蓋 */
#pgHome section{padding-bottom:max(10vh,84px)}
/* 高度不足的螢幕（13吋筆電等）：改由上往下排、縮距離、縮字級 */
@media (max-height:920px){
  #pgHome section{justify-content:flex-start;padding-top:8vh;padding-bottom:84px}
  h1{font-size:clamp(26px,4.4vw,42px)}
  h2{font-size:clamp(22px,3.4vw,34px)}
  h3{font-size:clamp(18px,2.2vw,24px)}
  .lead{font-size:15px;margin-top:10px;line-height:1.7}
  .cols{margin-top:16px;gap:10px}
  .card{padding:14px}
  .card b.t{font-size:15.5px}
  .card .s{font-size:13.5px}
  .q{padding:12px 14px}
  .q .ask{font-size:16.5px}
  .q .ans{font-size:13.5px}
  .btn{font-size:14px;padding:10px 20px;margin-top:14px}
  .founderpic{max-width:300px}
  .bigno{font-size:clamp(17px,2.6vw,26px);padding:6px 16px}
  .vdemo{padding:14px;gap:14px}
  .fee .num{font-size:clamp(24px,3vw,32px)}
  section.tight{min-height:auto}
}

/* ═══ 8/11 二輪修正 ═══ */
/* ④ 滾動體驗：mandatory→proximity（看完剩尾段才吸到下一幕） */
html:has(#pgHome){scroll-snap-type:y proximity}
#pgHome section{scroll-snap-stop:normal}

/* ① 幕2 金流：內容整體上移、間距收緊，部落格按鈕保證可見 */
#pgHome section .fee{margin-top:14px}
#pgHome section .fee .box{padding:14px}
#pgHome section .fee ul{margin-top:8px;font-size:13.5px}
#pgHome section .fee li{padding:3px 0 3px 16px}

/* ② 創辦人：拿掉框、放大去背人像、拉近與文字距離 */
.founderpic{background:none;border-radius:0;overflow:visible;aspect-ratio:auto;max-width:440px}
.founderpic::before{left:16%;right:16%;bottom:2%;height:22%;
  background:radial-gradient(50% 70% at 50% 100%,rgba(255,106,36,.35),transparent 70%)}
.founderpic img{height:auto;max-height:72vh;width:100%;object-fit:contain}
.founderpic .tag{display:none}
.foundergrid{grid-template-columns:.72fr 1.28fr;gap:6px;align-items:center}
@media(max-width:860px){.foundergrid{grid-template-columns:1fr}}
@media(max-height:920px){.founderpic{max-width:340px}.founderpic img{max-height:62vh}}

/* ③ 六個為什麼：兩欄並列，畫面更 compact */
.qlist{grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:860px){.qlist{grid-template-columns:1fr}}

/* ═══ 8/11 三輪：關閉 CSS 吸附（改由 JS 滾動輔助接手，門檻可控） ═══ */
html:has(#pgHome){scroll-snap-type:none}
#pgHome section{scroll-snap-align:none}

/* ═══ 8/12 輪播影片放大＋標題上移置中 ═══ */
.vdemo.hasvid{border:0;background:none;padding:0;border-radius:0}
.vidcap{font-size:15.5px;color:var(--ink);font-family:'Noto Sans TC';text-align:center;margin:0 0 12px}
.vidcap b{color:var(--or2)}
.vidbox+.vidcap{margin:8px 0 0}

/* ═══ 8/12 老闆頁六問排版（畫面槽）＋分頁影片版式 ═══ */
.qa6{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:28px;align-items:center;margin-top:30px}
.phslot{aspect-ratio:390/720;width:100%;max-width:280px;margin:0 auto;border:1.5px dashed rgba(255,140,60,.5);
  border-radius:24px;background:rgba(255,106,36,.05);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;color:var(--or3);font-family:var(--mono);font-size:11.5px;text-align:center;padding:16px}
.ask6{font-size:13.5px;color:var(--red);font-family:var(--mono);margin-bottom:8px}
.qa6 h3{font-size:clamp(18px,2vw,24px);margin-bottom:10px}
.sub6{font-size:14.5px;color:var(--mut);line-height:1.9}
.sub6 b{color:var(--or2)}
@media(max-width:860px){.qa6{grid-template-columns:1fr}.phslot{max-width:220px}}
.vstory{margin-top:34px}
.vstory .why{font-size:14.5px;color:var(--mut);line-height:1.9;max-width:820px;margin:8px 0 14px}
.vstory .why b{color:var(--or2)}
.vstory .after{font-size:13.5px;color:var(--or3);font-family:var(--mono);margin-top:10px}
.sub6 p{margin:0 0 10px}
.sub6 p:last-child{margin:0}

/* ═══ 8/12 創辦人訓練照 ═══ */
.trainpic{margin:22px auto 0;max-width:340px;text-align:center}
.trainpic img{width:100%;height:auto;border-radius:16px;display:block;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.trainpic figcaption{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--mut)}

/* ═══ 8/12 部落格文章頁 ═══ */
.article h2{margin:38px 0 14px;font-size:clamp(20px,2.2vw,26px)}
.article h2:first-child{margin-top:0}
.article h3{margin:26px 0 10px;font-size:16.5px;color:var(--or2)}
.article p{font-size:15px;color:var(--mut);line-height:2.05;margin:0 0 16px}
.article p b,.article li b{color:var(--ink)}
.article ol,.article ul{margin:0 0 18px 22px}
.article li{font-size:15px;color:var(--mut);line-height:2;margin-bottom:8px}
.article a{color:var(--or2)}
.article .formula{font-family:var(--mono);color:var(--or3);background:rgba(255,106,36,.06);
  border:1px dashed rgba(255,140,60,.35);border-radius:10px;padding:11px 16px;font-size:13.5px;margin:4px 0 20px}
.article .note{font-size:12px;font-family:var(--mono);margin-top:24px}
.article .refs li{font-size:13px;line-height:1.85;margin-bottom:12px;word-break:break-word}
.article .refs a{font-family:var(--mono);font-size:12px}

/* ═══ 8/12 Secondary 按鈕精緻化（清楚但不壓過 Primary） ═══ */
.btn.g{border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .18s,background .18s}
.btn.g:hover{border-color:rgba(255,140,60,.65);background:rgba(255,106,36,.08);color:var(--or2)}
.btn.p{box-shadow:0 6px 22px rgba(255,106,36,.28);transition:filter .18s}
.btn.p:hover{filter:brightness(1.08)}
@media(max-width:860px){
  nav .links{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
}

/* ═══ 8/12 老闆頁六問：真實畫面上線 ═══ */
.phshot{max-width:280px;margin:0 auto}
.phshot img{width:100%;height:auto;display:block;border-radius:26px;
  box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07)}
@media(max-width:860px){.phshot{max-width:240px}}

/* ═══ 8/12 文章內畫面組 ═══ */
.shots{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:6px 0 26px}
.shots .phshot{max-width:230px;margin:0}
@media(max-width:860px){.shots .phshot{max-width:200px}}

/* ═══ 8/12 首頁 Footer（sitemap 縮編） ═══ */
footer.big{display:block;padding:44px 20px 22px}
footer.big .fwrap{max-width:1120px;margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;align-items:start}
footer.big .fbrand p{margin-top:12px;font-size:13px;color:var(--mut);line-height:1.8}
footer.big .fcol{display:flex;flex-direction:column;gap:9px}
footer.big .fcol b{font-size:12px;color:var(--or3);font-family:var(--mono);letter-spacing:.12em;margin-bottom:2px}
footer.big .fcol a{font-size:13.5px;color:var(--mut)}
footer.big .fcol a:hover{color:var(--or2)}
footer.big .fbase{max-width:1120px;margin:30px auto 0;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);font-size:11.5px;color:var(--mut);font-family:var(--mono)}
@media(max-width:860px){footer.big .fwrap{grid-template-columns:1fr 1fr}}

/* ═══ 8/12 正式 Logo（向量＋Inter 黑斜體） ═══ */
.logo .logosvg{height:26px;width:auto;display:block}
footer .fl .logosvg{height:13px;width:auto;display:block;opacity:.92}
footer.big .fbrand .logosvg{height:16px}

/* ═══ 8/13 合規自檢表 ═══ */
.selfcheck{margin-top:6px}
.ck{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border:1px solid rgba(255,255,255,.1);
  border-radius:12px;margin-bottom:10px;cursor:pointer;background:rgba(255,255,255,.02);transition:border-color .15s}
.ck:hover{border-color:rgba(255,140,60,.4)}
.ck input{margin-top:4px;accent-color:var(--or);width:17px;height:17px;flex:none}
.ck span{font-size:14.5px;color:var(--mut);line-height:1.8}
.ck span b{color:var(--ink)}
.ck:has(input:checked){border-color:rgba(255,140,60,.55);background:rgba(255,106,36,.06)}
.ckcard{margin-top:20px;border-radius:14px;padding:20px 22px}
.ckcard b{font-size:17px}
.ckcard p{margin:10px 0 0;font-size:14px;line-height:1.9}
.ckcard.pass{border:1.5px solid rgba(80,200,120,.5);background:rgba(80,200,120,.08)}
.ckcard.pass b{color:#7ede9e}
.ckcard.risk{border:1.5px solid rgba(255,90,90,.55);background:rgba(255,90,90,.08)}
.ckcard.risk b{color:#ff8a8a}
.ckcard.risk .btn{margin-top:14px}

/* ═══ 9/3 首頁幕 2 · 凱基安心購：合作徽章／獎項列／註腳；動線補手機直式（獨家技術幕一起受惠） ═══ */
.partner{display:inline-flex;align-items:center;margin-top:18px;border:1px solid rgba(255,140,60,.45);border-radius:99px;
  background:rgba(255,106,36,.08);overflow:hidden;max-width:100%;font-size:13.5px;line-height:1.5;transition:border-color .18s,background .18s}
.partner:hover{border-color:rgba(255,140,60,.8);background:rgba(255,106,36,.14)}
.partner>span{padding:8px 14px;white-space:nowrap}
.partner .pl{font-weight:900;border-right:1px solid rgba(255,140,60,.35);display:inline-flex;align-items:baseline;gap:6px}
.partner .pl small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--or3);font-weight:400}
.partner .pt b{color:var(--or2)}
.partner .px{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--or3);padding-left:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.chips span b{color:var(--or3);font-weight:500}
.fine{font-size:11.5px;color:rgba(237,237,234,.45);margin-top:18px;font-family:var(--mono);line-height:1.7;max-width:760px}
@media(max-width:860px){
  .partner{flex-wrap:wrap;border-radius:16px}
  .partner .pl{border-right:0;border-bottom:1px solid rgba(255,140,60,.35);width:100%}
  .partner .px{padding-left:14px;padding-top:0}
  .fline{display:none}
  .fnodes{grid-template-columns:1fr;gap:2px;padding-left:22px;border-left:2px solid rgba(255,255,255,.08)}
  .fnode{position:relative;text-align:left;padding:7px 0}
  .fnode .d{position:absolute;left:-30px;top:12px;margin:0}
  .fnode span br{display:none}
  .fnode .x{margin-top:3px}
}

/* ═══ 凱基銀行標誌：9/7 起全站不放，只留純文字「凱基銀行」 ═══ */
/* 原因：標誌屬凱基內部審核與合約範疇，須送審＋簽約後才能使用（9/7 銀行會議）。 */
/* 圖檔已移出可部署目錄（改放 web/assets-src/v5/kgib-mark.svg，不上線）。 */
/* 下面的 .kgi 尺寸規則刻意保留——簽約通過後把 <img class="kgi"> 放回去就會對位。 */
/* 標誌最小 14px——再小四個色塊會糊成一團（9/3 實測 11px 不可讀）。 */
/* .chips .who 現在給「符合運動部許可」那顆亮底標籤用，仍在使用中。 */
.kgi{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin-right:6px;flex:none}
.partner .pl .kgi{width:18px;height:18px;vertical-align:-4px;margin-right:8px}
.actno .kgi{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.fnode b .kgi{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.chips .who{color:var(--ink);border-color:rgba(255,255,255,.22)}
.chips .who .kgi{width:14px;height:14px;vertical-align:-3px;margin-right:5px}

/* ═══ 9/3 報價：金額卡（取代同行對比長條）＋轉換方案（取代比價保證） ═══ */
.amt{margin-top:16px;border:2px solid rgba(255,106,36,.55);border-radius:16px;padding:18px 20px;background:rgba(255,106,36,.08)}
.amt .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mut);margin-bottom:4px}
.amt .big{font-family:var(--mono);font-size:clamp(25px,4.4vw,38px);color:var(--or2);line-height:1.15;font-variant-numeric:tabular-nums}
.amt .conv{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,140,60,.28)}
.amt .conv span{display:block;font-size:12px;color:var(--mut);font-family:var(--mono);letter-spacing:.1em}
.amt .conv b{font-family:var(--mono);font-size:19px;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.amt .foot{font-size:12.5px;color:var(--mut);margin-top:13px}
.swap{margin-top:16px;border:1px solid rgba(255,140,60,.45);border-radius:16px;padding:18px 20px;background:rgba(255,255,255,.025)}
.swap .tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  border:1px solid rgba(255,140,60,.6);color:var(--or2);border-radius:99px;padding:2px 11px;margin-bottom:12px}
.swap h3{font-size:clamp(18px,2.5vw,23px);margin-bottom:10px}
.swap p{font-size:14.5px;color:var(--mut);line-height:1.95;max-width:62ch}
.swap p b{color:var(--ink)}
.swap .btn{margin-top:16px}
.eg{margin:14px 0;border-left:3px solid var(--or);background:rgba(255,106,36,.07);
  border-radius:0 12px 12px 0;padding:12px 16px;font-size:14px;color:var(--mut);line-height:1.9}
.eg .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--or2);margin-bottom:4px}
.eg b{color:var(--ink)}
.terms{list-style:none;margin:14px 0 0;padding:0;font-size:12.5px;color:var(--mut)}
.terms li{position:relative;padding-left:16px;margin:7px 0;line-height:1.75}
.terms li::before{content:'·';position:absolute;left:3px;top:0;color:var(--or2);font-weight:700}
.terms b{color:var(--ink)}
.qnote{font-size:12px;color:var(--mut);margin-top:14px;font-family:var(--mono);line-height:1.7}

/* 公司資訊（批 D：Twilio Trust Hub 與永豐徵審都要求網站上看得到營運主體）。
   固定錨點 #company——審核的人拿到的是這條網址，點進去要直接看到，不能自己找。 */
.companyinfo{max-width:1120px;margin:0 auto;padding:34px 20px 26px}
.companyinfo h2{font-size:12px;color:var(--or3);font-family:var(--mono);letter-spacing:.12em;margin:0 0 10px}
.companyinfo .cointro{font-size:13.5px;color:var(--mut);line-height:1.9;margin:0 0 14px}
.companyinfo .cointro b{color:var(--ink);font-weight:600}
.companyinfo .cogrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.companyinfo .cogrid>div{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;line-height:1.8}
.companyinfo dt{color:var(--or3);font-size:12px;min-width:76px;font-family:var(--mono);letter-spacing:.04em}
.companyinfo dd{color:var(--mut);word-break:break-all}
/* 信箱與電話是可點的（手機可直接撥）——全站 a{color:inherit} 會讓它看起來像純文字，補一條淡底線當提示 */
.companyinfo dd a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:3px}
.companyinfo dd a:hover{text-decoration-color:var(--or2)}
/* 手機：一欄。審核的人不一定用電腦，這一區在小螢幕上要照樣讀得完整。 */
@media(max-width:860px){.companyinfo .cogrid{grid-template-columns:1fr}}
.colink{color:var(--or3)}
.colink:hover{color:var(--or2)}

/* ═══ 客戶案例頁（case-reaction-force.html） ═══ */
/* 引述：客戶說的話，全站唯一會放別人原話的地方——要看得出是「引述」不是我們的文案 */
.saidby{border-left:3px solid var(--or2);padding:4px 0 4px 18px;margin-top:24px}
.saidby p{font-size:clamp(17px,2.3vw,21px);line-height:1.8;color:var(--ink);font-weight:700;margin:0}
.saidby .by{margin-top:11px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mut)}
.saidby .by b{color:var(--or2);font-weight:500}

/* 環境照 2×2（手機 1 欄）。ph＝還沒拿到照片的佔位，虛線框讓它一眼看得出是空的 */
.envgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.envshot{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:rgba(255,255,255,.02);aspect-ratio:4/3}
.envshot img{width:100%;height:100%;object-fit:cover;display:block}
.envshot .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 10px;font-size:12px;color:var(--ink);
  background:linear-gradient(180deg,transparent,rgba(11,11,14,.85))}
.envshot.ph{display:flex;align-items:center;justify-content:center;text-align:center;
  border-style:dashed;border-color:rgba(255,140,60,.38);background:rgba(255,106,36,.05)}
.envshot.ph span{font-family:var(--mono);font-size:11.5px;color:var(--or3);line-height:1.85;padding:14px}
.envshot.ph span b{display:block;color:var(--or2);font-size:12.5px;margin-bottom:5px;font-weight:500}
@media(max-width:860px){.envgrid{grid-template-columns:1fr}}

/* 場館數字 */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.fact{border:1px solid var(--line);border-radius:14px;padding:14px 15px;background:rgba(255,255,255,.02)}
.fact .v{font-family:var(--mono);font-size:clamp(17px,2.2vw,22px);color:var(--or2);line-height:1.3}
.fact .k{font-size:12px;color:var(--mut);margin-top:5px;line-height:1.6}
@media(max-width:860px){.facts{grid-template-columns:repeat(2,1fr)}}

/* 對照列：他們的模式 vs 一般系統的預設 */
.vs{display:grid;gap:10px;margin-top:22px}
.vs .vsrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.vs .vsrow>div{border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:13.5px;line-height:1.8}
.vs .them{color:var(--mut)}
.vs .them b{color:var(--red);display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;margin-bottom:6px;font-weight:500}
.vs .us{border-color:rgba(255,140,60,.45);background:rgba(255,106,36,.06);color:var(--ink)}
.vs .us b{color:var(--or2);display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;margin-bottom:6px;font-weight:500}
@media(max-width:860px){.vs .vsrow{grid-template-columns:1fr}}