/* ==========================================================================
   VilaVPN footer (2026-10 refresh) — SITEWIDE (linked from includes/head.tpl).
   Matches the homepage sections in css/vila-home.css: navy, cyan/teal accents,
   Titillium headings, Roboto body. Every class is `vf-` prefixed; markup in footer.tpl.
   Cloudflare caches this file for a year: bump &mv= in includes/head.tpl on every edit.
   ========================================================================== */
.vf {
  --vf-cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Hiragino Sans","Yu Gothic",sans-serif;
  --vf-head:"Titillium Web",var(--vf-cjk);
  --vf-text:"Roboto",var(--vf-cjk);
  position:relative; overflow:hidden; color:#b6cbd8; font:400 15px/1.6 var(--vf-text);
  background:radial-gradient(800px 360px at 85% 0%,rgba(40,163,204,.14),transparent 70%),radial-gradient(600px 300px at 0% 100%,rgba(20,241,217,.06),transparent 70%),linear-gradient(180deg,#071722 0%,#06121b 60%,#040c12 100%);
}
.vf::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#06a8f1,#22ce9c); opacity:.9; }
.vf *, .vf *::before, .vf *::after { box-sizing:border-box; }
.vf a { color:#b6cbd8; text-decoration:none; transition:color .25s ease; }
.vf a:hover { color:#14f1d9; text-decoration:none; }
.vf a:focus-visible { outline:3px solid #0a84ff; outline-offset:3px; border-radius:6px; }
.vf ul { margin:0; padding:0; list-style:none; }
.vf p { margin:0; }
.vf .vf-wrap { max-width:1200px; margin:0 auto; padding:72px 24px 0; }
.vf .vf-grid { display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr)) minmax(240px,1.3fr); gap:40px; align-items:start; }

/* Brand column */
.vf .vf-logo { display:inline-flex; align-items:center; gap:12px; color:#fff; font:700 24px/1 var(--vf-head); letter-spacing:.02em; }
.vf .vf-logo:hover { color:#fff; }
.vf .vf-logo img { width:40px; height:auto; }
.vf .vf-tag { margin-top:14px; color:#8ea9b9; font-size:14px; }
.vf .vf-social { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.vf .vf-social a { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#d3e4ee; font-size:17px;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(140,210,235,.18); transition:color .25s ease,background-color .25s ease,box-shadow .25s ease,translate .25s ease; }
.vf .vf-social a:hover { color:#06121b; background:#14f1d9; box-shadow:0 0 22px rgba(20,241,217,.45); translate:0 -2px; }

/* Link columns */
.vf .vf-h { margin:0 0 16px; color:#fff; font:700 13px/1.2 var(--vf-head); letter-spacing:.16em; text-transform:uppercase; }
.vf .vf-col li + li { margin-top:10px; }
.vf .vf-col a { display:inline-flex; align-items:center; gap:8px; font-size:14.5px; }
.vf .vf-col a .fa { font-size:13px; color:#28a3cc; }

/* Mirror card */
.vf .vf-mirror { display:flex; gap:14px; align-items:flex-start; padding:20px; border-radius:18px;
  background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(20,241,217,.28),0 0 30px rgba(40,163,204,.12); }
.vf .vf-mirror__icon { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; color:#14f1d9; font-size:18px; background:rgba(20,241,217,.10); }
.vf .vf-mirror__main { display:inline-flex; align-items:center; gap:8px; color:#fff; font:700 17px/1.2 var(--vf-head); letter-spacing:.02em; }
.vf .vf-mirror__main .fa { font-size:13px; color:#14f1d9; transition:translate .25s ease; }
.vf .vf-mirror__main:hover .fa { translate:3px 0; }
.vf .vf-mirror__sub { display:block; margin-top:6px; font-size:13px; line-height:1.5; color:#8ea9b9; }
.vf .vf-mail { display:block; white-space:nowrap; color:#b6cbd8; }
.vf .vf-mirror > div { min-width:0; }

/* Bottom bar */
.vf .vf-bottom { margin-top:56px; padding:22px 0 28px; border-top:1px solid rgba(140,210,235,.12); color:#7f98a8; font-size:13px; }

/* Responsive */
@media (max-width:991px) {
  .vf .vf-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vf .vf-brand { grid-column:1 / -1; }
  .vf .vf-mirror { grid-column:1 / -1; max-width:520px; }
}
@media (max-width:600px) {
  .vf .vf-wrap { padding:56px 16px 0; }
  .vf .vf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
  .vf .vf-col:last-of-type { grid-column:1 / -1; }
  .vf .vf-bottom { margin-top:40px; }
}
@media (prefers-reduced-motion:reduce) {
  .vf *, .vf *::before, .vf *::after { transition:none !important; }
  .vf .vf-social a:hover, .vf .vf-mirror__main:hover .fa { translate:none; }
}