/* =========================================================================
   vk1 = vg1 的配色（珊瑚橘全換金）+ vj1 的 hero（真實 App 畫面輪播）
   兩份 extra.css 直接疊：vg1 在前吃變數，vj1 在後蓋 hero 版型。
   注意：LINE 綠 #06c755、Google 四色、YouTube 紅是各家品牌色，不跟著換金。
   ========================================================================= */

/* =========================================================================
   配色實驗共用底：深灰藍 + 淺藍（取自新 logo）
   logo 取色：線稿 #394555、環形字 #1e3458、地球填色 #b6dcfe、皇冠金 #f5c23c
   ========================================================================= */
:root{
  --ink:#39455a;          /* logo 線稿深灰藍（原 #1e2a3a 偏純黑藍） */
  --mute:#6d7c93;
  --blue:#4a86c8;         /* 降飽和：原 #2f8fe6 太亮，跟線稿的沉穩對不上 */
  --blue-d:#2b6099;
  --blue-l:#dcecfc;       /* 往 logo 地球填色 #b6dcfe 靠，原 #eaf4fd 太淡 */
  --line:#dde5ef;
  --bg:#f4f8fc;
  --gold:#e0a92e;
  --gold-hi:#f5c23c;      /* 皇冠亮金，只給圖形 */
  --gold-deep:#a3711a;    /* 金色文字／按鈕用，白字對比 4.3:1 */
  --gold-l:#fdf4e2;
}
/* 深灰藍線稿感：卡片外框收斂、陰影變冷 */
body{background:#fff}
.blocked,.bc,.wc,.rule,.plan,.pk,.cpi,.tile,.use,.step-card,.chip,.devs span{border-color:var(--line)}
/* 地球線稿：填色與線條直接吃 logo 的值 */
.globe-fill{fill:#dcecfc}
.gl{stroke:rgba(57,69,90,.30)}
.gl.eq{stroke:rgba(57,69,90,.50)}      /* 原本是橘色赤道線，改深灰藍 */
.nd{fill:#4a86c8}
.arc{stroke:rgba(74,134,200,.55)}
.pulse{stroke:#4a86c8}
/* hero 英文小標：原本橘色，改深灰藍 */
.hero .en{color:var(--mute)}

/* ---------- vg1：深灰藍＋淺藍為底，原本橘色的位置全部改走金黃 ---------- */
:root{
  /* 珊瑚橘 → 金黃（皇冠同家族，但提亮、不混濁） */
  --coral:#f0b429;
  --coral-l:#fdf3da;
  --coral-d:#39455a;        /* 淡金底上的文字＝深灰藍，避開混濁的深金 */
  --coral-s:#f7d98a;
  --coral-a:rgba(240,180,41,.24);
  --peach:#f8e3b0;          /* hero 左下光暈 → 淡金 */
  --warm:#fdf1d8;           /* CTA 漸層暖端 */
  --warm2:#fbe9c4;
  --gold-l:#fdf3da;
  --gold-b:#f2dca8;
  --gold-t:#39455a;
  --gold-t2:#39455a;
  --ec-accent:#f0b429;--ec-accent-text:#39455a;
  --ec-bubble-bg:#f0b429;--ec-bubble-text:#39455a;
  --ec-danger:#c0452a;
}
/* 金底一律配深灰藍字（對比 7:1），不用白字 */
.btn-coral,.btn-line{background:var(--coral);color:#39455a}
.btn-coral:hover,.btn-line:hover{background:#e3a719;filter:none}
.plan .badge,.pk .flag{background:var(--coral);color:#39455a}
.chat .me{background:var(--coral);color:#39455a}
.btn-white{color:#39455a}
/* ★ 中國大陸專線：金色字在白底讀不到，維持藍 */
.menu .hot{color:var(--blue-d)}
/* hero 互動 App：連線色走金黃 */
.vknob{background:var(--coral);color:#39455a;box-shadow:0 12px 28px rgba(240,180,41,.4)}
.vhalo{border-color:var(--coral);opacity:.4}
.vchips button.on{background:var(--coral);border-color:var(--coral);color:#39455a}
.vchips button:not(.on):hover{border-color:var(--coral);color:#8a6412}
/* 地球儀赤道線原本是橘的 → 金 */
.gl.eq{stroke:rgba(240,180,41,.75)}


/* =========================================================================
   vj1 hero：真實 App 畫面輪播（LINE → Google → YouTube）
   賣「結果」不賣「工具」：手機裡不是 VPN 控制台，是三個在大陸本來打不開、
   現在照常用的畫面，一進頁面就自己在動。
   配色沿用現行珊瑚橘；之後要換色只吃變數，不會白工。
   ========================================================================= */

/* ---------- 手機外框 ---------- */
.vpnapp.vj{width:min(302px,84%);aspect-ratio:302/566}
.vpnapp.vj .vscreen{padding:0;display:block;position:relative;text-align:left}
.hero-art:has(.vpnapp.vj){padding-bottom:34px}
/* 浮動卡原本 bottom:16% 會被右下角購物車按鈕壓到，往上挪 */
.hero-art:has(.vpnapp.vj) .f1{left:-26px;top:13%}
.hero-art:has(.vpnapp.vj) .f2{right:-28px;top:56%;bottom:auto}

/* ---------- 頂部狀態列（常駐，告訴你「正連著」） ---------- */
.vjbar{position:relative;z-index:2;height:28px;display:flex;align-items:center;gap:6px;
  padding:0 12px;background:#fff;font-size:10.5px;font-weight:800;color:var(--ink)}
.vjbar .sg{margin-left:auto}
.vjbar .sg .i{width:13px;height:13px}

/* 連線狀態：螢幕底部常駐橫條（放頂部會被瀏海壓到） */
.vjnet{position:absolute;z-index:2;left:0;right:0;bottom:0;height:26px;
  display:flex;align-items:center;gap:6px;padding:0 12px;
  background:#eaf6ee;border-top:1px solid #cfe9d8;font-size:10px;color:#0f7a43}
.vjnet .dot{width:5px;height:5px;border-radius:50%;background:#06c755;flex:none;
  animation:vjpulse 1.7s ease-in-out infinite}
.vjnet b{font-weight:900}
.vjnet em{margin-left:auto;font-style:normal;font-weight:800;opacity:.75}

/* ---------- 輪播舞台 ---------- */
.vjstage{position:absolute;inset:28px 0 26px}
/* .vjs 是 <section>，會吃到全站的 section{padding:90px 0}，要歸零 */
.vjs{position:absolute;inset:0;padding:0;display:flex;flex-direction:column;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .52s ease,transform .52s ease}
.vjs.on{opacity:1;transform:none;pointer-events:auto}
.vjh{flex:none;height:42px;display:flex;align-items:center;gap:9px;padding:0 13px;
  font-weight:900;font-size:13.5px}
.vjbody{flex:1;overflow:hidden}

/* ---------- 1. LINE ---------- */
.vjh.line{background:#06c755;color:#fff}
.vjh.line .bk{font-size:20px;line-height:1;margin-top:-2px}
.vjh.line .hic{margin-left:auto}
.vjh.line .hic .i{width:17px;height:17px}
.vjbody.line{background:#e4ebf3;padding:12px 12px 8px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end}
.bb{max-width:76%;padding:7px 11px;border-radius:14px;font-size:12.5px;line-height:1.5;
  margin-bottom:8px;position:relative;opacity:0}
.bb.them{background:#fff;color:var(--ink);border-top-left-radius:4px}
.bb.me{align-self:flex-end;background:#06c755;color:#fff;border-top-right-radius:4px}
.bb.me em{position:absolute;left:-26px;bottom:3px;font-style:normal;
  font-size:9.5px;font-weight:700;color:#7a8ca0}
.bb.typing{display:inline-flex;gap:4px;align-items:center;padding:10px 12px;background:#fff}
.bb.typing i{width:5px;height:5px;border-radius:50%;background:#a6b6c8}
.vjs.on .bb{animation:vjpop .4s ease both}
.vjs.on .bb:nth-child(1){animation-delay:.10s}
.vjs.on .bb:nth-child(2){animation-delay:.42s}
.vjs.on .bb:nth-child(3){animation-delay:.74s}
.vjs.on .bb:nth-child(4){animation-delay:1.06s}
.vjs.on .bb:nth-child(5){animation-delay:1.42s}
.vjs.on .bb.typing i{animation:vjtype 1.1s ease-in-out infinite}
.vjs.on .bb.typing i:nth-child(2){animation-delay:.18s}
.vjs.on .bb.typing i:nth-child(3){animation-delay:.36s}
.vjin{flex:none;height:40px;display:flex;align-items:center;gap:9px;padding:0 12px;
  background:#fff;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute)}
.vjin span{flex:1}
.vjin .send{width:25px;height:25px;border-radius:50%;background:#06c755;color:#fff;
  display:grid;place-items:center}
.vjin .send .i{width:14px;height:14px}

/* ---------- 2. Google ---------- */
.vjh.g{background:#fff;border-bottom:1px solid var(--line);color:var(--ink)}
.gw{font-family:"Plus Jakarta Sans";font-size:17px;font-weight:800;letter-spacing:-.4px}
.gw i{color:var(--c);font-style:normal}
.vjbody.g{background:#fff;padding:14px 13px}
.sbox{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;
  padding:9px 14px;box-shadow:0 2px 8px rgba(30,42,58,.07);margin-bottom:16px}
.mg{width:15px;height:15px;flex:none;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round}
.q{font-size:12.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center}
.car{width:1.5px;height:13px;background:var(--blue);margin-left:3px}
.vjs.on .car{animation:vjblink 1s steps(1) infinite}
.res{margin-bottom:12px}
.res b{display:block;font-size:12.5px;line-height:1.4;color:#1a5fd0;font-weight:800;margin-bottom:6px}
.l{display:block;height:6px;border-radius:3px;background:#e7edf4;margin-bottom:5px}
.w9{width:92%}.w8{width:80%}.w7{width:67%}.w6{width:55%}.w5{width:46%}.w4{width:36%}

/* ---------- 3. YouTube ---------- */
.vjh.y{background:#fff;border-bottom:1px solid var(--line);color:var(--ink)}
.ylogo{display:flex;align-items:center;gap:5px}
.ylogo .i.f{width:20px;height:20px;color:#ff0000}
.ylogo b{font-family:"Plus Jakarta Sans";font-size:14.5px;letter-spacing:-.4px}
.vjbody.y{background:#fff}
.player{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#31445c,#151d29);
  display:grid;place-items:center}
.player .pl{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.94);
  color:#ff0000;display:grid;place-items:center}
.player .pl svg{width:17px;height:17px;fill:#ff0000;margin-left:2px}
.player .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.3)}
.player .bar i{display:block;height:100%;width:0;background:#ff0000}
.vjs.on .player .bar i{animation:vjbar 3.8s linear forwards}
.meta{padding:11px 12px 9px}
.meta b{display:block;font-size:12.5px;font-weight:800;line-height:1.4;margin-bottom:3px}
.meta small{color:var(--mute);font-size:10.5px}
.vrow{display:flex;gap:9px;padding:0 12px 10px}
.th{width:76px;height:43px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,#dde7f1,#c6d5e5)}
.tx{flex:1;padding-top:5px}
.tx .l{height:6px;margin-bottom:7px}

/* ---------- 圓點 ---------- */
.vjdots{position:absolute;left:50%;transform:translateX(-50%);bottom:-26px;
  display:flex;gap:7px;align-items:center}
.vjdots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:#c3d0de;cursor:pointer;transition:width .3s ease,background .3s ease}
.vjdots button.on{width:20px;border-radius:999px;background:var(--coral)}
.vjdots button:focus-visible{outline:2px solid var(--blue-d);outline-offset:3px}

@keyframes vjpop{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
@keyframes vjtype{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes vjblink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes vjbar{from{width:0}to{width:100%}}
@keyframes vjpulse{0%,100%{opacity:1}50%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
  .vjs,.vjs.on .bb,.vjs.on .bb.typing i,.vjs.on .car,.vjs.on .player .bar i,.vjbar .st .dot{
    animation:none!important;transition:none!important}
  .bb{opacity:1}
  .player .bar i{width:38%}
}
@media (max-width:820px){
  .vpnapp.vj{width:min(280px,80%)}
  .hero-art:has(.vpnapp.vj){padding-bottom:30px}
}


/* =========================================================================
   vk2 追加：① 六個理由整區加深  ② 購物車改藍
   ========================================================================= */

/* ---------- ① 六個理由 ----------
   原本怪在哪（五件事同時發生）：
   a. 三層同款卡疊在一起：區塊底 #f4f8fc → 主卡 #dcecfc → 裡面裝置小卡又是白底細邊框。
      三層都是「圓角＋淺色＋1px 邊框」，只有大小不同，眼睛分不出層級。
   b. 主卡的 #dcecfc 跟區塊底 #f4f8fc 幾乎同一個亮度，想強調卻沒強調到。
   c. 主卡佔 2×2 但內容垂直置中，上下各空一大塊，像被硬撐開。
   d. 六個 icon 完全同款，沒有主次。
   e. 這一區是全站唯一 h2 後面沒有副標的，節奏會突然斷掉（已在 body 補上）。
   做法：主卡改實色深藏藍、白字，裡面的裝置卡改半透明白。層級變成
   「淺底 → 深卡 → 卡內半透明」，一眼分得出來，也真的深下去了。 */

.why{background:#edf2f8}                 /* 區塊底再壓深一點，白卡才浮得起來 */
.why .bc{box-shadow:0 2px 10px rgba(30,52,88,.05)}

.why .bc.main{
  background:linear-gradient(150deg,#26364f 0%,#1a2740 100%);
  border-color:transparent;
  box-shadow:0 20px 44px rgba(26,39,64,.28)}
.why .bc.main h3{color:#fff}
.why .bc.main p{color:rgba(255,255,255,.74)}
.why .bc.main .ic{width:62px;height:62px;background:#fff;color:#1a2740}   /* d. 主卡 icon 放大做出主次 */

/* 裝置小卡：深卡裡面不要再放一層白卡，改半透明 */
.why .bc.main .devs span{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.17);
  color:#fff}
.why .bc.main .devs svg{color:#b6dcfe}    /* logo 地球的粉藍 */
.why .bc.main .devs small{color:rgba(255,255,255,.74)}

/* 皇冠金在上半頁的第一個落點：主卡標題壓一條金線 */
.why .bc.main h3::after{
  content:"";display:block;width:38px;height:3px;border-radius:2px;
  background:var(--gold-hi);margin-top:14px}

/* ---------- ② 購物車改藍 ---------- */
:root{
  --ec-accent:#2b6099;--ec-accent-text:#fff;
  --ec-bubble-bg:#2b6099;--ec-bubble-text:#fff;
}


/* =========================================================================
   vk3：主卡退一階，裡面的內容拉上來
   vk2 的 #26364f→#1a2740 幾乎到黑，白字雖然看得到，但裝置卡只有 .09 的
   半透明，整團內容是「浮在黑底上」而不是「被托起來」。
   這版把卡片換成偏藍的中深色，同時把裡面每一層的對比都往上加。
   ========================================================================= */
.why .bc.main{
  background:linear-gradient(150deg,#35597e 0%,#27415f 100%);
  box-shadow:0 18px 40px rgba(39,65,95,.24)}
.why .bc.main p{color:rgba(255,255,255,.84)}

/* 裝置卡：從 .09 拉到 .16，加亮邊與投影，真的浮起來 */
.why .bc.main .devs span{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 6px 16px rgba(20,36,56,.18),inset 0 1px 0 rgba(255,255,255,.22);
  font-size:14.5px}
.why .bc.main .devs svg{color:#d6ebff}
.why .bc.main .devs small{color:rgba(255,255,255,.86)}

/* ---------- 三步驟：LINE ID 藥丸 ----------
   原本是 LINE 綠底綠字，但它坐在 .step-card 的淡藍灰底（--bg）上，
   整張卡就這一點綠，反而像貼錯。改成白底＋細邊＋深字：
   白色在淡藍底上會浮起來，ID 更好認也更好複製，勾勾留一點金呼應皇冠。 */
.step-card .lineid{
  background:#fff;border:1px solid var(--line);color:var(--ink);
  box-shadow:0 2px 8px rgba(30,52,88,.06)}
.step-card .lineid svg{color:var(--gold-deep)}

/* ---------- 基本方案 vs 中國大陸專線：兩張卡拉開 ----------
   原本 gap:22px，兩張卡幾乎黏在一起，右邊那張的斜角標籤又往外凸，
   看起來像同一塊。桌機拉到 44px，容器同步放寬免得卡片被壓窄。 */
.vs2{gap:44px;max-width:1020px}
@media (max-width:820px){ .vs2{gap:26px} }


/* =========================================================================
   vk4：金底上的字改走暖色
   vg1 當初把金底的字設成深灰藍 #39455a，對比有 7:1 沒問題，但那是「冷色壓在
   暖色上」——藍灰跟金的色相差太遠，疊在一起眼睛會讀成混濁，也就是髒感。
   改成金色自己家族的深棕 #4a3410：同一個色相往下壓，對比 6.3:1 仍過 AA，
   讀起來是濃，不是髒。
   ========================================================================= */
.btn-coral,.btn-line{color:#4a3410}
.btn-coral:hover,.btn-line:hover{color:#3d2b0b}
.plan .badge,.pk .flag{color:#4a3410}
.chat .me{color:#4a3410}

/* ── vk5：「免費試用三天」按鈕改深灰底 ──
   使用者：「免費試用三天不要黃底好了 深灰底試試看」。
   只動試用／LINE 按鈕（.btn-line ＋ 導覽列的試用鈕），
   「搶購優惠／立馬下單／看專線方案」等 .btn-coral 仍是金色。 */
.btn-line,.menu .btn-coral{background:#2d333d;color:#fff}
.btn-line:hover,.menu .btn-coral:hover{background:#1e232a;color:#fff;filter:none}


/* ══ vk9：六個理由對照表（平衡版） ══
   使用者：表格要留，但 vk7「太凸顯翻牆神手，其他的太淡有點怪」、「太重、不要框線」。
   做法：沒有外框、沒有浮卡、沒有格線；兩欄等寬、表頭同大小，
   只用淡色斑馬列分行；差別靠金勾 vs 灰叉，一般 VPN 文字用正常灰（不再刻意淡化）。 */
.why9{background:#fff}
.tb9{max-width:1000px;margin:52px auto 0;text-align:left}
.tb9-h,.tb9-r{display:grid;grid-template-columns:170px 1fr 1fr;column-gap:24px;align-items:center}
.tb9-h{padding:0 22px 14px;font-size:17px;font-weight:900}
.tb9-h .us{display:flex;align-items:center;gap:10px;color:var(--ink)}
.tb9-h .us img{width:36px;height:auto}
.tb9-h .them{color:var(--ink)}
.tb9-r{padding:17px 22px;border-radius:16px;font-size:15px}
.tb9-r:nth-child(even){background:#f4f7fb}
.tb9-r .k{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink)}
.tb9-r .ki{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue-l);color:var(--blue-d);flex:none}
.tb9-r .ki svg{width:17px;height:17px}
.tb9-r .us,.tb9-r .them{display:flex;align-items:flex-start;gap:10px;line-height:1.55}
.tb9-r .us{color:var(--ink);font-weight:700}
.tb9-r .them{color:var(--mute)}
.tb9 .ok,.tb9 .no{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.tb9 .ok{background:var(--coral);color:#4a3410}
.tb9 .ok svg{width:13px;height:13px;stroke-width:3}
.tb9 .no{background:#e3e8ef;color:#7d8899}
.tb9 .no svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
@media (max-width:760px){
 .tb9{margin-top:36px}
 .tb9-h{display:flex;justify-content:center;gap:22px;padding:0 0 14px;font-size:14px}
 .tb9-h>div:first-child{display:none}
 .tb9-h .us img{display:none}
 .tb9-h .us::before,.tb9-h .them::before{content:"";width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:-1px}
 .tb9-h .us::before{background:var(--coral)}
 .tb9-h .them::before{background:#cfd6e0}
 .tb9-h .them{display:flex;align-items:center}
 .tb9-r{grid-template-columns:1fr;row-gap:10px;padding:16px}
 .tb9-r .k{margin-bottom:2px}
 .tb9-r .them{font-size:14px}
}

/* vk9b：使用者要「區塊要有底色和其他區塊區隔，也要小心不要和表格打架」。
   前後（App 牆、三步驟）都是白底 → 本區改淡藍灰底；
   斑馬紋拿掉，每列都是白色圓角條、之間留 8px 縫，底色只負責分區塊、白條負責分行，不互相干擾 */
.why9{background:#edf2f8}
.tb9{display:grid;row-gap:8px}
.tb9-r,.tb9-r:nth-child(even){background:#fff}

/* 2026-09-30 表頭定案：頁籤式（vk10 的 B2）。使用者：B 做成圓弧邊有底色像頁籤、緊貼表格，灰再深一點；
   叉叉圓底改成跟灰頁籤同色。只在桌機（手機沒有分欄，維持小圖例） */
@media (min-width:761px){
 .tb9{row-gap:8px}
 .tb9-h{padding:0 22px;margin-bottom:-4px;font-size:17px;align-items:end}
 .tb9-h .us,.tb9-h .them{margin-left:-14px;padding:12px 14px 10px;border-radius:14px 14px 0 0;border-bottom:3px solid #a9b5c5;background:#cdd6e2}
 .tb9-h .us{background:#fdf3da;border-bottom-color:var(--coral);color:#4a3410;margin-right:-10px}
 .tb9-h .us img{width:30px}
 .tb9-h .them{margin-left:-4px;margin-right:-22px}
}
.tb9 .no{background:#cdd6e2;color:#5b6778}
.tb9-h .them::before{background:#cdd6e2}

/* 2026-09-30 使用者（手機截圖圈起來）：hero 手機畫面的時間／訊號、底部「已連線／台北節點」都離邊邊太近，
   電腦和手機都是。螢幕圓角 34px，原本左右內距只有 12px → 改 24px，兩條各加高，輪播舞台跟著讓位 */
.vjbar{height:34px;padding:4px 26px 0}
.vjnet{height:30px;padding:0 24px;font-size:10.5px}
.vjstage{inset:34px 0 30px}

/* 同日：手機版 logo 縮小一點（50px → 40px，字 18 → 16px） */
@media (max-width:560px){
 .brand img{height:40px}
 .brand span{font-size:16px}
}

/* 2026-09-30 使用者（手機）：「手機版表格怎麼會是長這樣」→ 手機也改成跟桌機一樣的兩欄對照：
   上方金／灰頁籤表頭，每列＝項目名稱佔整行、下面左翻牆神手右一般 VPN（取代原本的卡片＋小圖例） */
@media (max-width:760px){
 .tb9{row-gap:8px}
 .tb9-h{display:grid;grid-template-columns:1fr 1fr;column-gap:8px;padding:0;margin-bottom:-4px;align-items:end}
 .tb9-h>div:first-child{display:none}
 .tb9-h .us,.tb9-h .them{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px 8px;
   border-radius:12px 12px 0 0;border-bottom:3px solid #a9b5c5;background:#cdd6e2;color:var(--ink);font-size:14.5px;font-weight:900}
 .tb9-h .us{background:#fdf3da;border-bottom-color:var(--coral);color:#4a3410}
 .tb9-h .us::before,.tb9-h .them::before{display:none}
 .tb9-h .us img{display:block;width:24px;height:auto}
 .tb9-r{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:10px;padding:14px;align-items:start}
 .tb9-r .k{grid-column:1/-1;margin-bottom:0;font-size:15px}
 .tb9-r .ki{width:30px;height:30px}
 .tb9-r .us,.tb9-r .them{font-size:13.5px;gap:7px}
 .tb9 .ok,.tb9 .no{width:20px;height:20px}
}

/* 2026-09-30 使用者（手機）：「準備好了嗎」區塊不要邊框 → 手機上改滿版：去邊框、去圓角，漸層底延伸到螢幕兩側 */
@media (max-width:560px){
 .contact{padding-top:0;padding-bottom:0}
 .cta3{border:0;border-radius:0;margin-inline:calc(50% - 50vw);padding:52px calc(50vw - 50% + 4px) 56px}
}
.contact{overflow-x:clip}   /* 滿版 CTA 用 100vw，有捲軸的瀏覽器會多出幾 px 橫向捲動 */

/* 同日：「為什麼需要 VPN」下方四張用途卡不要邊框（電腦手機一致），淡藍底在白區塊上本身就分得出來 */
.whyvpn .use{border:0}

/* 同日：「然後加個動畫好了」→ 四張用途卡進場動畫。只有 JS 加上 .anim 才先藏（沒 JS 照常顯示），
   捲到畫面加 .go：依序往上浮現＋淡入，圖示小彈一下；減少動態效果的使用者不跑（JS 直接 return） */
.uses.anim .use{opacity:0;transform:translateY(22px)}
.uses.anim.go .use{animation:useIn .6s cubic-bezier(.2,.7,.2,1) forwards}
.uses.anim.go .use:nth-child(2){animation-delay:.1s}
.uses.anim.go .use:nth-child(3){animation-delay:.2s}
.uses.anim.go .use:nth-child(4){animation-delay:.3s}
.uses.anim.go .use .ic{animation:useIc .5s ease-out both}
.uses.anim.go .use:nth-child(1) .ic{animation-delay:.25s}
.uses.anim.go .use:nth-child(2) .ic{animation-delay:.35s}
.uses.anim.go .use:nth-child(3) .ic{animation-delay:.45s}
.uses.anim.go .use:nth-child(4) .ic{animation-delay:.55s}
@keyframes useIn{to{opacity:1;transform:none}}
@keyframes useIc{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* 2026-09-30 手機表格拿掉項目名稱列（使用者：「這樣會不會有點亂不夠直覺」→ 看了 /vk11/ 說「比較改這樣OK 做進首頁」） */
@media (max-width:760px){
 .tb9-r .k{display:none}
 .tb9-r{padding:14px 12px;row-gap:0}
 .tb9-r .us,.tb9-r .them{font-size:14px}
}

/* 同日：手機底部固定列「這邊如果用黃色和藍色呢？看方案黃色」→ LINE 試用＝logo 藍、看方案＝金底深棕字 */
@media (max-width:560px){
 .mbar .btn-line{background:var(--blue-d);color:#fff}
 .mbar .btn-line:hover{background:#1f4f82;color:#fff}
 .mbar .btn-ghost{background:var(--coral);border-color:var(--coral);color:#4a3410}
}

/* 同日：「三步驟」卡片「這裡我在考慮也不要邊框」→ 拿掉（電腦手機一致），淡藍底在白區塊上照樣分得出來 */
.step-card{border:0}
/* 同日：「如果改灰和藍呢」→ 看方案由金改深灰（白字），LINE 試用維持藍 */
@media (max-width:560px){
 .mbar .btn-ghost{background:#2d333d;border-color:#2d333d;color:#fff}
}
/* 同日：「顏色反過來」→ LINE 試用＝深灰（跟全站試用鈕一致）、看方案＝藍 */
@media (max-width:560px){
 .mbar .btn-line,.mbar .btn-line:hover{background:#2d333d;color:#fff}
 .mbar .btn-ghost{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
}

/* 同日：LINE ID 膠囊前的勾「換成藍灰色系」（原 --gold-deep） */
.step-card .lineid svg{color:#56708f;stroke-width:2.6}

/* 同日：方案卡「立刻購買／立馬下單」預設太淡 → 預設直接用原本 hover 的藍框藍字；hover 改實心藍底白字 */
.plan .btn-ghost{border-color:var(--blue-d);color:var(--blue-d)}
.plan .btn-ghost:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}

/* 同日：結帳殼頁（/checkout/、/order/complete/）原本 inline padding:48px 0 96px，手機「上面的留白太多」→ 改 class 控制 */
.shellmain{padding:48px 0 96px;min-height:46vh}
@media (max-width:560px){.shellmain{padding:12px 0 110px}}

/* 同日：「結帳頁面不用那兩個按鈕」→ 結帳／訂單完成／付款結果頁藏手機底部固定列，底部也不用再留位子 */
body:has(.shellmain) .mbar,body:has(.payres) .mbar{display:none}
@media (max-width:560px){.shellmain{padding-bottom:40px}}


/* 2026-09-30 手機 hero 四行勾勾清單進場動畫（/vk12/ 預覽後使用者說「直接換上首頁」）（使用者：「手機板的 LINE 訊息…四行 做點動畫」）
   一行接一行從左滑入＋淡入，圓圈小彈，勾勾用 stroke-dash 畫出來；只在手機、且沒開減少動態效果 */
@media (max-width:560px) and (prefers-reduced-motion:no-preference){
 .hero li{opacity:0;transform:translateX(-18px);animation:heroLi .55s cubic-bezier(.2,.7,.2,1) forwards}
 .hero li .ic{animation:heroIc .5s ease-out both}
 .hero li .ic svg{stroke-dasharray:30;stroke-dashoffset:30;animation:heroCk .45s ease-out forwards}
 .hero li:nth-child(1){animation-delay:.25s}.hero li:nth-child(1) .ic{animation-delay:.4s}.hero li:nth-child(1) .ic svg{animation-delay:.5s}
 .hero li:nth-child(2){animation-delay:.4s}.hero li:nth-child(2) .ic{animation-delay:.55s}.hero li:nth-child(2) .ic svg{animation-delay:.65s}
 .hero li:nth-child(3){animation-delay:.55s}.hero li:nth-child(3) .ic{animation-delay:.7s}.hero li:nth-child(3) .ic svg{animation-delay:.8s}
 .hero li:nth-child(4){animation-delay:.7s}.hero li:nth-child(4) .ic{animation-delay:.85s}.hero li:nth-child(4) .ic svg{animation-delay:.95s}
}
@keyframes heroLi{to{opacity:1;transform:none}}
@keyframes heroIc{0%{transform:scale(.5)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes heroCk{to{stroke-dashoffset:0}}

/* 同日：「hero 對話應該是要在上面，現在是在下面」→ LINE 對話從上往下排（原本 flex-end 貼著輸入框，上方空一大塊） */
.vjbody.line{justify-content:flex-start;padding-top:16px}

/* 同日：「快速穩定在手機旁邊，24 小時防火牆有貼到手機」→ 兩張浮動卡都改成以手機邊緣為基準、各留 10px
   （原本 f1 用區塊左緣推、f2 用右緣推，所以一邊有空隙一邊壓到手機）。--pw＝手機寬，跟 .vpnapp.vj 同步 */
.hero-art:has(.vpnapp.vj){--pw:min(302px,84%)}
.hero-art:has(.vpnapp.vj) .f1{left:auto;right:calc(50% + var(--pw) / 2 + 10px)}
.hero-art:has(.vpnapp.vj) .f2{right:auto;left:calc(50% + var(--pw) / 2 + 10px)}
@media (max-width:820px){.hero-art:has(.vpnapp.vj){--pw:min(280px,80%)}}

/* 同日：LINE 對話標題列的電話圖示「沒有對齊媽媽，有點往上跑」→ span 是行內元素被基線撐高，改 flex 置中 */
.vjh.line .hic{display:flex;align-items:center}
.vjh.line .bk{margin-top:0;display:flex;align-items:center}
.hero-art:has(.vpnapp.vj) .float{width:max-content}   /* 改用 left 定位後會被區塊右緣擠窄折行，固定用內容寬 */
/* 窄一點的寬度手機兩側放不下卡片（1024px 右卡超出畫面 60px、1201px 超出 17px、600px 超出 10px；實測 1280 以上才放得下），這些寬度直接藏起來 */
@media (min-width:821px) and (max-width:1279px),(max-width:640px){.hero-art:has(.vpnapp.vj) .float{display:none}}

/* 2026-09-30 表格項目圖示拿掉圓底（/vk14/ 預覽後使用者要上首頁） */
.tb9-r .ki{background:none;width:auto;height:auto;border-radius:0}
.tb9-r .ki svg{width:19px;height:19px;color:var(--blue-d)}

/* 同日：教學頁右側客服卡改成先 QR code 再按鈕（原本 img 在按鈕下 margin-top:12px） */
.aside .box.line img{display:block;margin:4px auto 14px}