/* ==========================================================================
   VilaVPN homepage sections — founder-picked mix (2026-10-15):
   base = design option B "Refined original", trust-band route map from
   option C "Bold bento", glowing HOT plan from option A "Deep space".
   Homepage only (linked from header.tpl). Every class is `vb-` prefixed so
   neither Bootstrap (.btn, .badge) nor the 2015 theme CSS can reach it.
   Markup: homepage.tpl, includes/pricing-plans.tpl, includes/testimonial-band.tpl.
   ⛔ Never use a bare <header> in these sections: style.css styles the element
   selector `header` as the 640px hero (see includes/testimonial-band.tpl).
   ========================================================================== */
.vb {
  --vb-navy-900:#06121b; --vb-navy-800:#082031; --vb-navy-700:#0e2c40;
  --vb-cyan:#28a3cc; --vb-cyan-hover:#47bbe0; --vb-cyan-ink:#0a6f91;
  --vb-teal:#14f1d9; --vb-blue:#0a84ff;
  --vb-grad-a:#06a8f1; --vb-grad-b:#22ce9c;
  --vb-hot:#ffe14d; --vb-hot-fold:#b89a00;
  --vb-ink:#082031; --vb-body:#3a4a57; --vb-muted:#5a6b78;
  --vb-page:#f3f6f8; --vb-line:#e2e8ee;
  --vb-shadow-sm:0 1px 2px rgba(8,32,49,.06),0 8px 20px -10px rgba(8,32,49,.16);
  --vb-shadow-md:0 1px 2px rgba(8,32,49,.06),0 20px 44px -18px rgba(8,32,49,.28);
  --vb-ease:cubic-bezier(.22,.61,.36,1);
  --vb-cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Hiragino Sans","Yu Gothic",sans-serif;
  --vb-head:"Titillium Web",var(--vb-cjk);
  --vb-text:"Roboto",var(--vb-cjk);
  font:400 16px/1.6 var(--vb-text); color:var(--vb-body);
}
.vb *, .vb *::before, .vb *::after { box-sizing:border-box; }
.vb a { color:inherit; }
.vb a:focus-visible, .vb button:focus-visible { outline:3px solid var(--vb-blue); outline-offset:3px; border-radius:6px; }
.vb .vb-wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.vb .vb-sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.vb svg.vb-ic { width:1em; height:1em; flex:none; }
.vb p { margin:0; }

/* ---- Buttons: one system ---------------------------------------------- */
.vb .vb-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 30px; border:0; border-radius:999px; font:700 16px/1 var(--vb-head); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:transform .3s var(--vb-ease),background-color .3s var(--vb-ease),color .3s var(--vb-ease),box-shadow .3s var(--vb-ease); }
.vb .vb-btn .vb-ic { font-size:18px; transition:transform .3s var(--vb-ease); }
.vb .vb-btn:hover { text-decoration:none; }
.vb .vb-btn:hover .vb-ic { transform:translateX(3px); }
.vb .vb-btn--primary { background:var(--vb-cyan); color:var(--vb-navy-900); box-shadow:0 10px 24px -10px rgba(40,163,204,.8); }
.vb .vb-btn--primary:hover { background:var(--vb-cyan-hover); color:var(--vb-navy-900); }
.vb .vb-btn--ghost { background:transparent; color:var(--vb-ink); box-shadow:inset 0 0 0 2px var(--vb-ink); }
.vb .vb-btn--ghost:hover { background:var(--vb-ink); color:#fff; }

/* ---- Section heading (div, never <header>) ---------------------------- */
.vb .vb-head { text-align:center; }
.vb .vb-eyebrow { margin:0 0 10px; font:700 16px/1.2 var(--vb-head); letter-spacing:.16em; text-transform:uppercase; color:var(--vb-muted); }
.vb .vb-h2 { margin:0; font:700 clamp(30px,3.4vw,46px)/1.08 var(--vb-head); letter-spacing:.01em; text-transform:uppercase; color:var(--vb-ink); text-wrap:balance; }
.vb .vb-h2::after { content:""; display:block; width:64px; height:4px; margin:18px auto 0; border-radius:4px; background:linear-gradient(90deg,var(--vb-grad-a),var(--vb-grad-b)); }

/* ---- 1. Feature cards -------------------------------------------------- */
/* #features-section is the hero "Learn more" anchor; the id also carries legacy style.css rules */
#features-section.vb-features { background:var(--vb-page); padding:0 0 96px; }
.vb .vb-features__grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:-40px; }
.vb .vb-fcard { position:relative; display:flex; flex-direction:column; background:#fff; border-radius:16px; box-shadow:var(--vb-shadow-md); overflow:hidden; transition:translate .35s var(--vb-ease),box-shadow .35s var(--vb-ease); }
.vb .vb-fcard:hover { translate:0 -4px; box-shadow:0 1px 2px rgba(8,32,49,.06),0 28px 52px -20px rgba(8,32,49,.34); }
.vb .vb-fcard__body { flex:1; padding:40px 24px 30px; text-align:center; }
.vb .vb-fcard__icon { display:block; width:68px; height:68px; margin:0 auto 20px; }
.vb .vb-fcard__title { margin:0; font:700 23px/1.15 var(--vb-head); letter-spacing:.06em; text-transform:uppercase; color:var(--vb-ink); }
.vb .vb-fcard__label { margin:6px 0 14px; font:700 13px/1.2 var(--vb-head); letter-spacing:.16em; text-transform:uppercase; color:var(--vb-muted); }
.vb .vb-fcard__text { font:400 15px/1.65 var(--vb-text); color:var(--vb-body); overflow-wrap:anywhere; }
.vb .vb-fcard__more { display:flex; align-items:center; justify-content:center; gap:10px; min-height:56px; background:var(--vb-navy-800); color:#fff; font:700 15px/1 var(--vb-head); letter-spacing:.16em; text-transform:uppercase; text-decoration:none; transition:background-color .3s var(--vb-ease); }
.vb .vb-fcard__more:hover { background:var(--vb-cyan-ink); color:#fff; text-decoration:none; }
.vb .vb-fcard__more .vb-ic { font-size:18px; transition:transform .3s var(--vb-ease); }
.vb .vb-fcard__more:hover .vb-ic { transform:translateX(4px); }
.vb .vb-fcard__more:focus-visible { outline-offset:-4px; }
.vb .vb-sash { position:absolute; top:26px; left:-42px; width:160px; padding:7px 0; transform:rotate(-45deg); background:var(--vb-hot); color:var(--vb-navy-900); font:900 14px/1 var(--vb-head); letter-spacing:.22em; text-align:center; box-shadow:0 6px 14px -6px rgba(8,32,49,.45); }

/* ---- 2. Pricing (B) + HOT beacon (A) ---------------------------------- */
.vb-pricing { background:#fff; padding:96px 0 112px; }
.vb .vb-chip { display:inline-block; margin-top:22px; padding:9px 18px; border-radius:999px; background:#dcf7f1; color:#0a6b57; font:500 15px/1.2 var(--vb-text); }
.vb .vb-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1080px; margin:64px auto 0; align-items:stretch; }
.vb .vb-plan { position:relative; container-type:inline-size; display:flex; flex-direction:column; background:#fff; border-radius:20px; box-shadow:var(--vb-shadow-md); transition:translate .35s var(--vb-ease),box-shadow .35s var(--vb-ease); }
.vb .vb-plan:hover { translate:0 -4px; }
.vb .vb-plan__head { position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; height:188px; padding-bottom:18px; border-radius:20px 20px 0 0; color:#fff; background:var(--vb-photo) center 28%/cover no-repeat; }
.vb .vb-plan__head::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(180deg,rgba(6,18,27,.10) 0%,rgba(6,18,27,.42) 45%,rgba(8,32,49,.86) 100%),linear-gradient(135deg,rgba(10,132,255,.50),rgba(34,206,156,.10)); }
.vb .vb-plan__price { display:flex; align-items:baseline; gap:6px; font:700 min(58px,16.5cqi)/1 var(--vb-head); letter-spacing:-.01em; text-shadow:0 2px 14px rgba(6,18,27,.45); white-space:nowrap; }
.vb .vb-plan__cur { font:400 20px/1 var(--vb-text); opacity:.95; }
.vb .vb-plan__per { margin-top:8px; font:400 14px/1 var(--vb-text); letter-spacing:.04em; color:rgba(255,255,255,.9); }
.vb .vb-plan__tag { position:relative; z-index:1; align-self:center; margin:-21px 0 0; padding:12px 28px; border-radius:999px; background:linear-gradient(90deg,var(--vb-grad-a),var(--vb-grad-b)); color:var(--vb-navy-900); font:700 15px/1 var(--vb-head); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; box-shadow:0 0 0 5px #fff,0 10px 22px -8px rgba(6,168,241,.65); }
.vb .vb-plan__traffic { margin:26px 26px 0; padding:16px 12px; border-radius:14px; background:var(--vb-page); text-align:center; }
.vb .vb-plan__traffic b { display:block; font:700 38px/1 var(--vb-head); color:var(--vb-ink); }
.vb .vb-plan__traffic span { display:block; margin-top:8px; font:700 12px/1 var(--vb-head); letter-spacing:.16em; text-transform:uppercase; color:var(--vb-muted); }
.vb .vb-plan__list { flex:1; display:grid; align-content:start; gap:15px; margin:24px 0 0; padding:0 28px; list-style:none; }
.vb .vb-plan__list li { display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:12px; font:400 15px/1.35 var(--vb-text); color:var(--vb-body); }
.vb .vb-plan__list li > .vb-ic { font-size:20px; color:var(--vb-cyan-ink); }
.vb .vb-plan__list .vb-k { font-weight:500; color:var(--vb-ink); }
.vb .vb-plan__list .vb-v { font-weight:500; color:var(--vb-ink); text-align:right; overflow-wrap:anywhere; }
.vb .vb-plan__list .vb-ok { width:22px; height:22px; display:block; }
.vb .vb-plan__cta { padding:30px 26px 28px; }
.vb .vb-plan__cta .vb-btn { width:100%; }
.vb .vb-ribbon { position:absolute; top:-8px; left:22px; z-index:3; width:48px; height:66px; filter:drop-shadow(0 6px 8px rgba(8,32,49,.25)); }
.vb .vb-ribbon span { display:block; width:100%; height:100%; padding-top:16px; background:var(--vb-hot); color:var(--vb-navy-900); font:900 15px/1 var(--vb-head); letter-spacing:.08em; text-align:center; clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); }
.vb .vb-ribbon::after { content:""; position:absolute; top:0; right:-8px; border-bottom:8px solid var(--vb-hot-fold); border-right:8px solid transparent; }
/* HOT plan: lit, rotating edge + beam above (from option A) */
.vb .vb-plan--hot { translate:0 -18px; border-radius:22px; padding:2px; overflow:visible;
  background:linear-gradient(160deg,rgba(85,200,232,.95),rgba(40,163,204,.35) 45%,rgba(10,132,255,.85));
  box-shadow:0 0 50px rgba(85,200,232,.28),0 30px 90px -20px rgba(40,163,204,.55); }
.vb .vb-plan--hot:hover { translate:0 -22px; }
.vb .vb-plan__edge { position:absolute; inset:0; border-radius:22px; overflow:hidden; pointer-events:none; }
.vb .vb-plan__edge::before { content:""; position:absolute; inset:-60%; background:conic-gradient(from 0deg,transparent 0 58%,rgba(85,200,232,0) 62%,#55c8e8 76%,#e6f7fd 79%,#4cc3e8 83%,transparent 90%); animation:vb-orbit 6s linear infinite; }
.vb .vb-plan__inner { position:relative; display:flex; flex-direction:column; flex:1; border-radius:20px; background:#fff; }
.vb .vb-plan--hot .vb-plan__price { text-shadow:0 0 18px rgba(85,200,232,.85),0 0 46px rgba(85,200,232,.45); }
.vb .vb-plan--hot .vb-btn--primary { background:linear-gradient(90deg,#55c8e8,#28a3cc); box-shadow:0 10px 30px rgba(85,200,232,.45); }
.vb .vb-plan--hot .vb-btn--primary:hover { background:linear-gradient(90deg,#6fd3f0,#47bbe0); }
.vb .vb-beacon { position:absolute; left:50%; top:-110px; width:320px; height:150px; transform:translateX(-50%); pointer-events:none; z-index:0;
  background:radial-gradient(50% 100% at 50% 100%,rgba(85,200,232,.32),rgba(85,200,232,0) 72%); animation:vb-beam 3.6s cubic-bezier(.45,0,.55,1) infinite alternate; }
.vb .vb-beacon::before { content:""; position:absolute; left:50%; bottom:0; width:2px; height:60px; transform:translateX(-50%); background:linear-gradient(180deg,transparent,rgba(85,200,232,.95)); box-shadow:0 0 12px #55c8e8; }
@keyframes vb-orbit { to { transform:rotate(360deg); } }
@keyframes vb-beam { from { opacity:.55; } to { opacity:1; } }

/* ---- 3. Trust band (B layout) + route map (C) ------------------------- */
/* The quote wall keeps its own styles from css/custom.css. */
.vb.trust-band, .vb #trust-band { color:#fff; padding:96px 0 72px; background:radial-gradient(700px 380px at 88% 18%,rgba(40,163,204,.20),transparent 70%),radial-gradient(520px 320px at 8% 100%,rgba(20,241,217,.08),transparent 70%),linear-gradient(180deg,#082031,#06121b); }
.vb .vb-trust__grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:center; text-align:left; }
.vb .trust-band__claim { text-align:left; margin:0; padding:0; max-width:none; }
.vb .trust-band__eyebrow { display:block; margin:0 0 10px; padding:0; border:0; border-radius:0; background:none; font:700 16px/1.2 var(--vb-head); letter-spacing:.16em; text-transform:uppercase; color:var(--vb-teal); }
.vb .trust-band__claim-line { margin:0; font:700 clamp(30px,3.4vw,46px)/1.08 var(--vb-head); letter-spacing:.01em; text-transform:uppercase; color:#fff; text-wrap:balance; }
.vb .trust-band__claim-line::after { content:""; display:block; width:64px; height:4px; margin:18px 0 0; border-radius:4px; background:linear-gradient(90deg,var(--vb-grad-a),var(--vb-grad-b)); }
.vb .trust-band__claim-sub { max-width:520px; margin:22px 0 0; font:400 18px/1.6 var(--vb-text); color:#c3d1dc; }
.vb .trust-band__proof { margin:0; padding:0; }
.vb .trust-band__stores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.vb .trust-band__store { min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:26px 24px 24px; border-radius:18px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); border:0; }
.vb .trust-band__store-link { order:2; display:inline-block; border-radius:8px; }
.vb .trust-band__store-badge { display:block; width:120px; height:40px; }
.vb .trust-band__rating { order:1; display:block; margin:0 0 20px; text-align:left; }
.vb .trust-band__rating-num { display:flex; align-items:baseline; gap:6px; font:700 60px/1 var(--vb-head); color:#fff; }
.vb .trust-band__rating-star { font-size:38px; color:var(--vb-hot); }
.vb .trust-band__rating-src { display:block; margin-top:10px; font:500 15px/1.3 var(--vb-text); color:#d3dee6; letter-spacing:0; text-transform:none; }
.vb .trust-band__ratings-note { margin:14px 0 0; font:400 13px/1.5 var(--vb-text); color:#93a8b8; text-align:left; }
.vb .trust-band__heading { color:#fff; }
.vb .vb-route { margin:56px 0 40px; padding:44px 56px; border-radius:20px; background-color:#082031; background-image:radial-gradient(rgba(40,163,204,.22) 1px,transparent 1.2px); background-size:22px 22px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.vb .vb-route__map { display:grid; grid-template-columns:auto 1fr 112px; min-height:400px; }
.vb .vb-route__origin { align-self:center; position:relative; z-index:1; }
.vb .vb-route__pill { display:flex; align-items:center; gap:12px; max-width:9em; padding:18px 22px; border-radius:18px; background:#fff; color:var(--vb-navy-900); font:700 26px/1.05 var(--vb-head); letter-spacing:.03em; text-transform:uppercase; }
.vb .vb-route__pulse { position:relative; width:12px; height:12px; border-radius:50%; background:var(--vb-teal); flex:none; box-shadow:0 0 0 2px var(--vb-navy-900); }
.vb .vb-route__pulse::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--vb-teal); animation:vb-pulse 2.2s cubic-bezier(.2,.6,.3,1) infinite; }
.vb .vb-route__lines { position:relative; }
.vb .vb-route__svg { position:absolute; inset:0; width:100%; height:100%; }
.vb .vb-route__base path { fill:none; stroke:url(#vbRouteGrad); stroke-width:2.5; vector-effect:non-scaling-stroke; opacity:.55; }
.vb .vb-route__flow path { fill:none; stroke:#14f1d9; stroke-width:3.5; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:7 93; animation:vb-flow 2.6s linear infinite; }
.vb .vb-route__flow path:nth-child(2) { animation-delay:-.4s; }
.vb .vb-route__flow path:nth-child(3) { animation-delay:-1.1s; }
.vb .vb-route__flow path:nth-child(4) { animation-delay:-1.8s; }
.vb .vb-route__flow path:nth-child(5) { animation-delay:-.7s; }
.vb .vb-route__flow path:nth-child(6) { animation-delay:-2.1s; }
.vb .vb-route__flow path:nth-child(7) { animation-delay:-1.4s; }
.vb .vb-route__user { width:26px; height:26px; flex:none; color:var(--vb-cyan-ink); }
.vb .vb-route__mid { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; }
.vb .vb-route__premium { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:linear-gradient(120deg,#fff3a6,#ffd23f 55%,#f5b301); color:#2a2100; font:700 13px/1.2 var(--vb-head); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; box-shadow:0 0 0 4px #082031,0 6px 18px rgba(255,210,63,.35); }
.vb .vb-route__premium sup { top:-.35em; font-size:.8em; }
.vb .vb-nw { white-space:nowrap; }
.vb .vb-route__star { width:13px; height:13px; flex:none; }
.vb .vb-route__note { margin:22px 0 0; font:400 13px/1.55 var(--vb-text); color:#93a8b8; text-align:left; }
.vb .vb-route__chip { padding:6px 14px; border-radius:999px; background:linear-gradient(120deg,#28a3cc,#14f1d9); color:var(--vb-navy-900); font:700 16px/1.2 var(--vb-head); letter-spacing:.06em; white-space:nowrap; box-shadow:0 0 0 5px #082031; }
.vb .vb-route__nodes { display:grid; grid-template-rows:repeat(7,1fr); margin:0; padding:0; list-style:none; }
.vb .vb-route__nodes li { align-self:center; padding:4px 0; border:2px solid var(--vb-teal); border-radius:14px; background:var(--vb-navy-900); color:#fff; font:700 28px/1.2 var(--vb-head); text-align:center; }
@keyframes vb-pulse { from { transform:scale(1); opacity:.7; } to { transform:scale(3.2); opacity:0; } }
@keyframes vb-flow { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }

/* ---- 4. Why us: option A "stage" (founder pick 2026-10-15), recoloured to the original cyan family ----------- */
.vb-why { position:relative; overflow:hidden; padding:104px 0 112px; color:#eef8fc;
  background:radial-gradient(900px 500px at 50% 38%,rgba(40,163,204,.14),transparent 70%),linear-gradient(180deg,#06121b 0%,#082031 55%,#06121b 100%); }
.vb .vb-eyebrow--lines { display:inline-flex; align-items:center; gap:14px; margin:0; font:700 15px/1.3 var(--vb-head); letter-spacing:.22em; text-transform:uppercase; color:#55c8e8; text-shadow:0 0 14px rgba(85,200,232,.55); }
.vb .vb-eyebrow--lines::before, .vb .vb-eyebrow--lines::after { content:""; width:44px; height:1px; flex:none; }
.vb .vb-eyebrow--lines::before { background:linear-gradient(90deg,transparent,#55c8e8); }
.vb .vb-eyebrow--lines::after { background:linear-gradient(90deg,#55c8e8,transparent); }
.vb .vb-h2--glow { margin-top:14px; font-size:clamp(30px,4.4vw,54px); line-height:1.15; letter-spacing:.02em; color:#fff; filter:drop-shadow(0 0 22px rgba(40,163,204,.35)); }
.vb .vb-h2--glow::after { display:none; }
.vb .vb-grad { background:linear-gradient(180deg,#ffffff 35%,#8fdcf3 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vb .vb-stage { position:relative; max-width:1080px; margin:48px auto 0; padding:24px 0 70px; }
.vb .vb-stage__floor { position:absolute; left:-20%; right:-20%; bottom:-40px; height:340px; pointer-events:none;
  background-image:linear-gradient(rgba(40,163,204,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(40,163,204,.32) 1px,transparent 1px);
  background-size:56px 56px; background-position:center top; transform:perspective(520px) rotateX(64deg); transform-origin:50% 100%;
  -webkit-mask:radial-gradient(60% 90% at 50% 100%,#000 20%,transparent 75%); mask:radial-gradient(60% 90% at 50% 100%,#000 20%,transparent 75%); }
.vb .vb-stage__orb { position:absolute; left:50%; top:46%; width:min(900px,120%); aspect-ratio:2/1; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(40,163,204,.35),rgba(10,132,255,.12) 45%,transparent 70%); }
.vb .vb-stage__platform { position:absolute; z-index:0; left:50%; bottom:22px; width:78%; height:70px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(85,200,232,.55),rgba(40,163,204,.18) 55%,transparent 72%); }
.vb .vb-holo { position:relative; z-index:1; margin:0; border-radius:28px; padding:clamp(12px,3vw,36px);
  background:repeating-linear-gradient(180deg,rgba(40,163,204,.05) 0 1px,transparent 1px 4px),radial-gradient(70% 80% at 50% 40%,#f6fcfe 0%,#e2f2f8 60%,#cbe7f2 100%);
  box-shadow:0 0 0 1px rgba(85,200,232,.75),0 0 0 8px rgba(40,163,204,.10),0 0 70px rgba(40,163,204,.55),0 50px 90px -30px rgba(85,200,232,.45); }
.vb .vb-holo picture, .vb .vb-holo img { display:block; width:100%; height:auto; }
.vb .vb-holo__corner { position:absolute; width:26px; height:26px; border:2px solid #55c8e8; filter:drop-shadow(0 0 6px #55c8e8); }
.vb .vb-holo__corner--tl { top:-14px; left:-14px; border-right:0; border-bottom:0; border-top-left-radius:10px; }
.vb .vb-holo__corner--tr { top:-14px; right:-14px; border-left:0; border-bottom:0; border-top-right-radius:10px; }
.vb .vb-holo__corner--bl { bottom:-14px; left:-14px; border-right:0; border-top:0; border-bottom-left-radius:10px; }
.vb .vb-holo__corner--br { bottom:-14px; right:-14px; border-left:0; border-top:0; border-bottom-right-radius:10px; }
.vb .vb-paytray { position:relative; z-index:1; max-width:760px; margin:28px auto 0; padding:14px 30px; border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#e8f5fa); box-shadow:0 0 0 1px rgba(85,200,232,.6),0 0 40px rgba(40,163,204,.40); }
.vb .vb-paytray picture, .vb .vb-paytray img { display:block; width:100%; height:auto; }
.vb .vb-paytray__split { display:none; }
.vb .vb-apps-head { margin-top:clamp(72px,9vw,112px); }
.vb .vb-apps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:clamp(36px,5vw,56px); }
.vb .vb-glass { position:relative; border-radius:26px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(40,163,204,.16),transparent 60%),linear-gradient(170deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 45%,rgba(10,132,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 40px 80px -40px rgba(0,0,0,.75); transition:translate .7s cubic-bezier(.32,.72,0,1),box-shadow .7s cubic-bezier(.32,.72,0,1); }
.vb .vb-glass::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg,rgba(85,200,232,.65),rgba(40,163,204,.14) 32%,rgba(40,163,204,.06) 62%,rgba(10,132,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
@media (hover:hover) {
  .vb .vb-glass:hover { translate:0 -6px; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(85,200,232,.18),0 30px 70px -30px rgba(40,163,204,.55); }
}
.vb .vb-app { display:flex; align-items:center; gap:24px; padding:30px 96px 30px 32px; overflow:hidden; }
.vb .vb-app h3 { margin:0; font:700 22px/1.25 var(--vb-head); letter-spacing:.03em; color:#eef8fc; }
.vb .vb-app p { margin-top:6px; font:400 15px/1.6 var(--vb-text); color:#b6cbd8; }
.vb .vb-app__idx { position:absolute; right:22px; top:10px; font:700 64px/1 var(--vb-head); color:rgba(76,195,232,.10); pointer-events:none; }
.vb .vb-orb { position:relative; width:76px; height:76px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:radial-gradient(circle at 50% 30%,rgba(40,163,204,.38),rgba(8,32,49,.25) 70%);
  box-shadow:inset 0 0 0 1px rgba(85,200,232,.35),inset 0 0 22px rgba(85,200,232,.16),0 0 34px rgba(40,163,204,.38); }
.vb .vb-orb::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid transparent; border-top-color:rgba(85,200,232,.7); border-right-color:rgba(85,200,232,.15); animation:vb-orbit 10s linear infinite; }
.vb .vb-orb svg { width:38px; height:38px; filter:drop-shadow(0 0 6px rgba(85,200,232,.55)); }

/* ---- 5. News ------------------------------------------------------------ */
.vb-news { background:#fff; padding:88px 0 96px; }
.vb .vb-news__list { max-width:1000px; margin:44px auto 0; padding:0; list-style:none; }
.vb .vb-news__item { display:grid; grid-template-columns:96px 1fr; gap:28px; padding:30px 0; border-top:1px solid var(--vb-line); }
.vb .vb-news__item:last-child { border-bottom:1px solid var(--vb-line); }
.vb .vb-date { display:flex; flex-direction:column; align-items:center; justify-content:center; width:96px; height:96px; border-radius:18px; background:var(--vb-navy-800); color:#fff; text-align:center; }
.vb .vb-date__m { font:700 14px/1 var(--vb-head); letter-spacing:.18em; text-transform:uppercase; color:var(--vb-teal); }
.vb .vb-date__d { margin-top:6px; font:700 32px/1 var(--vb-head); }
.vb .vb-date__y { margin-top:6px; font:500 12px/1 var(--vb-text); color:#93a8b8; }
.vb .vb-news__title { margin:0; font:700 22px/1.3 var(--vb-head); color:var(--vb-ink); }
.vb .vb-news__title a { text-decoration:none; transition:color .25s var(--vb-ease); }
.vb .vb-news__title a:hover { color:var(--vb-cyan-ink); text-decoration:underline; text-underline-offset:4px; }
.vb .vb-news__excerpt { margin:10px 0 0; font:400 15px/1.65 var(--vb-text); color:var(--vb-body); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.vb .vb-news__excerpt p { display:inline; margin:0; }
.vb .vb-readmore { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:4px; color:var(--vb-cyan-ink); font:700 14px/1 var(--vb-head); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.vb .vb-readmore:hover { color:var(--vb-cyan-ink); text-decoration:none; }
.vb .vb-readmore .vb-ic { font-size:17px; transition:transform .3s var(--vb-ease); }
.vb .vb-readmore:hover .vb-ic { transform:translateX(4px); }

/* ---- 6. Value banner ---------------------------------------------------- */
.vb-values { position:relative; padding:60px 0; background:#06121b; }
.vb-values::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#06a8f1,#22ce9c); }
.vb .vb-values__list { display:grid; grid-template-columns:repeat(4,1fr); margin:0; padding:0; list-style:none; }
.vb .vb-values__list li { display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 22px; font:700 22px/1.15 var(--vb-head); letter-spacing:.05em; text-transform:uppercase; color:#fff; text-wrap:balance; }
.vb .vb-values__list li + li { box-shadow:inset 1px 0 0 rgba(255,255,255,.12); }
.vb .vb-values__list .vb-ic { font-size:30px; color:var(--vb-teal); }
.vb .vb-values__list li:last-child span { background:linear-gradient(90deg,var(--vb-teal),#5cc8ef); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- CJK tuning --------------------------------------------------------- */
.vb [lang^="zh"].trust-band__claim-line { letter-spacing:.04em; line-height:1.2; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:1100px) {
  .vb .vb-features__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .vb .vb-apps { grid-template-columns:minmax(0,1fr); }
  .vb .vb-plans { grid-template-columns:1fr; max-width:460px; gap:36px; }
  .vb .vb-plan--hot, .vb .vb-plan--hot:hover { translate:none; }
  .vb .vb-beacon { top:-46px; width:280px; height:80px; }
  .vb .vb-beacon::before { display:none; }
  .vb .vb-trust__grid { grid-template-columns:minmax(0,1fr); gap:40px; }
  .vb .vb-route { padding:36px 32px; }
  .vb .vb-route__map { grid-template-columns:auto 1fr 88px; min-height:380px; }
  .vb .vb-route__pill { font-size:20px; }
  .vb .vb-route__nodes li { font-size:22px; }
  .vb .vb-values__list { grid-template-columns:repeat(2,1fr); row-gap:8px; }
  .vb .vb-values__list li { justify-content:flex-start; }
  .vb .vb-values__list li + li { box-shadow:none; }
}
@media (max-width:600px) {
  .vb .vb-wrap { padding:0 16px; }
  .vb .vb-eyebrow, .vb .trust-band__eyebrow { font-size:14px; }
  .vb .vb-h2::after, .vb .trust-band__claim-line::after { margin-top:14px; width:56px; }
  #features-section.vb-features { padding-bottom:64px; }
  .vb-why { padding:64px 0 72px; }
  .vb .vb-eyebrow--lines::before, .vb .vb-eyebrow--lines::after { width:24px; }
  .vb .vb-stage { margin-top:32px; padding-bottom:52px; }
  .vb .vb-holo { border-radius:18px; }
  .vb .vb-holo__corner { width:18px; height:18px; }
  .vb .vb-holo__corner--tl, .vb .vb-holo__corner--tr { top:-9px; }
  .vb .vb-holo__corner--bl, .vb .vb-holo__corner--br { bottom:-9px; }
  .vb .vb-holo__corner--tl, .vb .vb-holo__corner--bl { left:-9px; }
  .vb .vb-holo__corner--tr, .vb .vb-holo__corner--br { right:-9px; }
  .vb .vb-paytray { border-radius:22px; padding:14px 16px; }
  .vb .vb-paytray__full { display:none; }
  .vb .vb-paytray__split { display:grid; gap:10px; justify-items:center; }
  .vb .vb-paytray__split span { display:block; background-image:url("../img/payment/payment-methods-1500-b7931b5f5bc0.png"); background-repeat:no-repeat; }
  .vb .vb-paytray__a { width:100%; aspect-ratio:800/160; background-size:187.5% 100%; background-position:0 0; }
  .vb .vb-paytray__b { width:87.5%; aspect-ratio:700/160; background-size:214.2857% 100%; background-position:100% 0; }
  .vb .vb-app { padding:22px 64px 22px 20px; gap:18px; align-items:flex-start; }
  .vb .vb-orb { width:60px; height:60px; }
  .vb .vb-orb svg { width:30px; height:30px; }
  .vb .vb-app h3 { font-size:20px; }
  .vb .vb-app__idx { font-size:48px; }
  .vb .vb-features__grid { grid-template-columns:1fr; gap:14px; margin-top:-24px; }
  .vb .vb-fcard__body { display:grid; grid-template-columns:52px 1fr; column-gap:16px; padding:22px 20px 20px; text-align:left; }
  .vb .vb-fcard__icon { grid-row:1 / span 3; width:52px; height:52px; margin:2px 0 0; }
  .vb .vb-fcard__title { font-size:20px; }
  .vb .vb-fcard__label { margin:4px 0 10px; }
  .vb .vb-fcard__more { min-height:48px; font-size:14px; }
  .vb .vb-sash { left:auto; right:-46px; top:16px; transform:rotate(45deg); font-size:12px; padding:6px 0; }
  .vb-pricing { padding:64px 0 72px; }
  .vb .vb-plans { margin-top:44px; gap:28px; }
  .vb .vb-plan__head { height:168px; }
  .vb .vb-plan__traffic { margin:24px 20px 0; }
  .vb .vb-plan__list { padding:0 22px; gap:14px; }
  .vb .vb-plan__list li { font-size:14.5px; }
  .vb .vb-plan__cta { padding:26px 20px 22px; }
  .vb.trust-band, .vb #trust-band { padding:64px 0 48px; }
  .vb .trust-band__claim-sub { font-size:16px; }
  .vb .trust-band__stores { gap:12px; }
  .vb .trust-band__store { padding:20px 16px 18px; }
  .vb .trust-band__rating-num { font-size:46px; }
  .vb .trust-band__rating-star { font-size:30px; }
  .vb .trust-band__rating-src { font-size:14px; }
  .vb .trust-band__store-badge { width:110px; max-width:100%; height:auto; }
  .vb .vb-route { margin:40px 0 28px; padding:24px 16px; }
  .vb .vb-route__map { grid-template-columns:auto 1fr 64px; min-height:360px; }
  .vb .vb-route__pill { font-size:15px; padding:12px; max-width:7.4em; gap:10px; }
  .vb .vb-route__nodes li { font-size:19px; }
  .vb .vb-route__chip { font-size:12px; padding:4px 9px; }
  .vb .vb-route__mid { width:calc(100% - 8px); }
  .vb .vb-route__premium { max-width:100%; white-space:normal; justify-content:center; text-align:center; font-size:10px; line-height:1.25; padding:4px 8px; gap:4px; letter-spacing:.03em; }
  .vb .vb-route__chip { max-width:100%; white-space:normal; text-align:center; }
  .vb .vb-route__star { width:10px; height:10px; }
  .vb .vb-route__user { width:18px; height:18px; }
  .vb .vb-route__note { font-size:12px; margin-top:16px; }
  .vb-news { padding:64px 0 72px; }
  .vb .vb-news__item { grid-template-columns:64px 1fr; gap:16px; padding:22px 0; }
  .vb .vb-date { width:64px; height:64px; border-radius:14px; }
  .vb .vb-date__m { font-size:11px; letter-spacing:.14em; }
  .vb .vb-date__d { font-size:22px; margin-top:4px; }
  .vb .vb-date__y { display:none; }
  .vb .vb-news__title { font-size:18px; }
  .vb-values { padding:36px 0; }
  .vb .vb-values__list li { gap:10px; padding:10px 0; font-size:16px; letter-spacing:.03em; }
  .vb .vb-values__list .vb-ic { font-size:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .vb *, .vb *::before, .vb *::after { animation:none !important; transition:none !important; }
  .vb .vb-fcard:hover, .vb .vb-plan:hover, .vb .vb-glass:hover { translate:none; }
  .vb .vb-plan--hot:hover { translate:0 -18px; }
}
@media (prefers-reduced-motion:reduce) and (max-width:900px) {
  .vb .vb-plan--hot:hover { translate:none; }
}

/* Trust band: notes on the dark band */
.vb .trust-band__legal, .vb .trust-band__consent-note { color:#93a8b8; }

/* ---- Hero badges: App Store · Google Play · All platforms (includes/store-badge.tpl).
   header.tpl's critical CSS sizes `.hero-downloads a/img` as half-width 38px tiles
   (36px on phones); badges keep their own 40px height and natural width instead. */
.hero-downloads { gap:8px; max-width:360px; }
.hero-downloads a.sb { flex:0 0 auto; height:40px; opacity:1; }
.hero-downloads a.sb img { width:auto; height:40px; object-fit:fill; }