/* ==========================================================================
   VilaNet apps hub (2026-10 refresh) — apps.php / apps.tpl only (linked from
   includes/head.tpl when $templatefile == 'apps'). `va-` prefixed. Same tokens as
   css/vila-home.css: navy, brand cyan family, Titillium headings, Roboto body.
   Cloudflare caches this file for a year: bump &mv= in includes/head.tpl on every edit.
   ========================================================================== */
.va {
  --va-navy:#06121b; --va-navy-2:#082031; --va-ink:#082031; --va-body:#3a4a57; --va-muted:#5a6b78;
  --va-cyan:#28a3cc; --va-cyan-hi:#55c8e8; --va-cyan-ink:#0a6f91; --va-line:#e2e8ee; --va-page:#f3f6f8;
  --va-cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Hiragino Sans","Yu Gothic",sans-serif;
  --va-head:"Titillium Web",var(--va-cjk); --va-text:"Roboto",var(--va-cjk);
  font:400 16px/1.6 var(--va-text); color:var(--va-body);
}
.va *, .va *::before, .va *::after { box-sizing:border-box; }
.va p { margin:0; }
.va a { text-decoration:none; }
.va a:focus-visible { outline:3px solid #0a84ff; outline-offset:3px; border-radius:8px; }
.va .va-wrap { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---- Full-width page: this file loads only on apps.php, so these resets stay here.
   WHMCS ignores skipMainBodyContainer for this custom page; release the 1320px
   container and hide the theme's lined page title (the intro band carries the h1). */
#main-body { padding-top:0; padding-bottom:0; }
#main-body > .container { max-width:none; width:100%; padding-left:0; padding-right:0; }
#main-body > .container > .row { margin-left:0; margin-right:0; }
#main-body > .container > .row > .main-content { padding-left:0; padding-right:0; }
#main-body .main-content > .header-lined { display:none; }

/* ---- Intro band (continues the dark header) ---------------------------- */
.va-intro { color:#fff; padding:56px 0 64px; text-align:center;
  background:radial-gradient(800px 360px at 50% 0%,rgba(40,163,204,.18),transparent 70%),linear-gradient(180deg,#0e2c40 0%,#082031 100%); }
.va .va-eyebrow { display:inline-flex; align-items:center; gap:14px; margin:0 0 12px; color:var(--va-cyan-hi); font:700 15px/1.3 var(--va-head); letter-spacing:.22em; text-transform:uppercase; }
.va .va-eyebrow::before, .va .va-eyebrow::after { content:""; width:40px; height:1px; background:linear-gradient(90deg,transparent,var(--va-cyan-hi)); }
.va .va-eyebrow::after { background:linear-gradient(90deg,var(--va-cyan-hi),transparent); }
.va .va-title { margin:0; color:#fff; font:700 clamp(32px,4.6vw,54px)/1.12 var(--va-head); letter-spacing:.01em; text-transform:uppercase; text-wrap:balance; filter:drop-shadow(0 0 22px rgba(40,163,204,.35)); }
.va .va-sub { max-width:620px; margin:16px auto 0; color:#c3d1dc; font-size:18px; }
.va .va-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
.va .va-chips a { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; color:#e6f2f8; font:600 15px/1 var(--va-head); letter-spacing:.06em;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(140,210,235,.22); transition:background-color .25s ease,color .25s ease,box-shadow .25s ease; }
.va .va-chips a:hover { color:#06121b; background:var(--va-cyan-hi); box-shadow:0 8px 22px -8px rgba(40,163,204,.9); }
.va .va-chips .fa { color:var(--va-cyan-hi); }
.va .va-chips a:hover .fa { color:#06121b; }

/* ---- Light platform groups -------------------------------------------- */
.va-light { background:var(--va-page); padding:72px 0 88px; }
.va .va-group + .va-group { margin-top:64px; }
.va .va-group { scroll-margin-top:24px; }
.va .va-h2 { margin:0 0 24px; color:var(--va-ink); font:700 clamp(24px,2.6vw,32px)/1.15 var(--va-head); letter-spacing:.02em; text-transform:uppercase; }
.va .va-h2::after { content:""; display:block; width:56px; height:4px; margin-top:12px; border-radius:4px; background:linear-gradient(90deg,#06a8f1,#22ce9c); }
.va .va-grid { display:grid; gap:20px; }
.va .va-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.va .va-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.va .va-card { display:flex; flex-direction:column; padding:28px; border-radius:18px; background:#fff;
  box-shadow:0 1px 2px rgba(8,32,49,.06),0 20px 44px -18px rgba(8,32,49,.28); transition:translate .35s ease,box-shadow .35s ease; scroll-margin-top:24px; }
.va .va-card:hover { translate:0 -4px; box-shadow:0 1px 2px rgba(8,32,49,.06),0 28px 52px -20px rgba(8,32,49,.34); }
.va .va-card__top { display:flex; align-items:center; gap:14px; }
.va .va-icon { display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:14px; color:var(--va-cyan); font-size:24px;
  background:linear-gradient(135deg,rgba(40,163,204,.14),rgba(85,200,232,.10)); }
.va .va-card__name { margin:0; color:var(--va-ink); font:700 22px/1.2 var(--va-head); letter-spacing:.02em; }
.va .va-card__text { margin:14px 0 20px; color:var(--va-body); font-size:15px; flex:1; }
.va .va-card__actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.va .va-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 18px; border-radius:999px;
  color:var(--va-ink); font:700 14px/1 var(--va-head); letter-spacing:.08em; text-transform:uppercase; box-shadow:inset 0 0 0 2px var(--va-ink);
  transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,translate .25s ease; }
.va .va-btn:hover { background:var(--va-ink); color:#fff; }
.va .va-btn--primary { color:#06121b; background:var(--va-cyan-hi); box-shadow:0 10px 24px -10px rgba(40,163,204,.8); }
.va .va-btn--primary:hover { background:#7fd6f0; color:#06121b; translate:0 -1px; }
.va .va-card__guide { align-self:flex-start; margin-top:18px; color:var(--va-cyan-ink); font:700 14px/1 var(--va-head); letter-spacing:.12em; text-transform:uppercase; }
.va .va-card__guide:hover { color:var(--va-ink); }

/* ---- Routers & power users: dark glass band (homepage why-us style) ---- */
.va-dark { position:relative; overflow:hidden; padding:88px 0 96px; color:#eef8fc; scroll-margin-top:24px;
  background:radial-gradient(900px 420px at 50% 20%,rgba(40,163,204,.16),transparent 70%),linear-gradient(180deg,#082031 0%,#06121b 100%); }
.va .va-h2--light { color:#fff; }
.va .va-dark__sub { margin:-8px 0 32px; color:#b6cbd8; font-size:17px; }
.va .va-glass { position:relative; display:flex; flex-direction:column; padding:30px; border-radius:24px; scroll-margin-top:24px;
  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 .5s ease,box-shadow .5s ease; }
.va .va-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) { .va .va-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); } }
.va .va-orb { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:var(--va-cyan-hi); font-size:24px;
  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); }
.va .va-glass__name { margin:22px 0 0; color:#fff; font:700 22px/1.2 var(--va-head); letter-spacing:.02em; }
.va .va-glass__text { margin:12px 0 24px; color:#b6cbd8; font-size:15px; flex:1; }
.va .va-btn--ghost { color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.85); }
.va .va-btn--ghost:hover { background:#fff; color:#06121b; }

/* ---- Help strip ---------------------------------------------------------- */
.va-help { background:#fff; padding:40px 0; }
.va .va-help__row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.va .va-help__item { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 16px; padding:20px 24px; border-radius:16px; background:var(--va-page); box-shadow:inset 0 0 0 1px var(--va-line); transition:box-shadow .25s ease; }
.va .va-help__item span { color:var(--va-body); }
.va .va-help__item b { color:var(--va-cyan-ink); font:700 15px/1.2 var(--va-head); letter-spacing:.06em; text-transform:uppercase; }
.va .va-help__item:hover { box-shadow:inset 0 0 0 2px var(--va-cyan); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:991px) {
  .va .va-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .va .va-wrap { padding:0 16px; }
  .va-intro { padding:40px 0 48px; }
  .va .va-eyebrow { font-size:13px; gap:10px; }
  .va .va-eyebrow::before, .va .va-eyebrow::after { width:24px; }
  .va .va-sub { font-size:16px; }
  .va .va-chips a { min-height:40px; padding:0 14px; font-size:14px; }
  .va-light { padding:48px 0 64px; }
  .va .va-group + .va-group { margin-top:48px; }
  .va .va-grid--2, .va .va-grid--3, .va .va-help__row { grid-template-columns:minmax(0,1fr); }
  .va .va-card, .va .va-glass { padding:22px 20px; }
  .va-dark { padding:64px 0 72px; }
}
@media (prefers-reduced-motion:reduce) {
  .va *, .va *::before, .va *::after { transition:none !important; }
  .va .va-card:hover, .va .va-glass:hover, .va .va-btn--primary:hover { translate:none; }
}