/*
 * FxVPSPRO — site footer.
 *
 * This is the live site's own footer stylesheet, lifted from the inline
 * <style> block that ships with #fxvps-footer-final on fxvpspro.com, so the
 * two look the same. Same id, same class names, same tokens, same background
 * plate, same double green glow along the top edge.
 *
 * THREE DELIBERATE DEPARTURES, all noted where they occur:
 *
 *  1. No backdrop-filter. The original blurs six surfaces (brand pill, social
 *     pills, four cards, payment pills, contact pills). On the live site that
 *     blurs a static background image; here it would blur the fixed WebGL
 *     canvas on every frame, which is precisely what made this page stutter.
 *     The panels are given the resulting colour outright instead.
 *  2. Three class names — .fx-logo, .fx-dot, .fx-card — are already taken by
 *     the header and mega menu. Everything here is scoped under the id, as
 *     the original is, and the few properties that could still leak in are
 *     reset explicitly.
 *  3. The theme's own tokens are not used. The footer carries the live site's
 *     palette (#39ff88 rather than the page's --accent) so it matches the
 *     rest of fxvpspro.com rather than this template.
 */

#fxvps-footer-final,
#fxvps-footer-final *{box-sizing:border-box}
#fxvps-footer-final img{max-width:100%;height:auto}

/* full bleed out of any boxed container */
#fxvps-footer-final .fx-bleed{width:100vw;margin-left:calc(50% - 50vw)}
#fxvps-footer-final,
#fxvps-footer-final .fx-bleed,
#fxvps-footer-final .fx-wrap{max-width:none}

#fxvps-footer-final{
  position:relative;z-index:1;overflow:visible;
  --fx-green:var(--accent,#5df0a8);          /* was #39ff88 */
  --fx-green2:var(--accent-2,#2fd38a);        /* was #1dbf73 */
  --fx-text:var(--ink,#f3f6ff);              /* was #eaf2ff */
  --fx-muted:var(--muted,#9aa6c4);           /* was rgba(234,242,255,.72) */
  --fx-border:var(--line-strong,rgba(150,175,230,.22));
  --fx-panel:var(--glass,rgba(10,15,33,.74));
  --fx-shadow:rgba(0,0,0,.40);
  --fx-accent-rgb:93,240,168;        /* #5df0a8, for the glows below */
  --fx-bg:url('https://fxvpspro.b-cdn.net/storage/2026/01/fxvpspro-fx.png');
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ====== Wrapper ====== */
#fxvps-footer-final .fx-wrap{
  position:relative;color:var(--fx-text);padding:74px 16px 0;overflow:hidden;
  background:
    radial-gradient(1100px 420px at 50% 0%, rgba(var(--fx-accent-rgb),.14) 0%, rgba(var(--fx-accent-rgb),0) 62%),
    radial-gradient(900px 360px at 50% 40%, rgba(var(--accent-rgb),.06) 0%, rgba(var(--accent-rgb),0) 68%),
    linear-gradient(180deg, rgba(4,6,15,.80) 0%, rgba(4,6,15,.94) 100%),
    var(--fx-bg) center/cover no-repeat;
}

/* double glow along the top edge */
#fxvps-footer-final .fx-wrap::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--fx-accent-rgb),0),rgba(var(--fx-accent-rgb),.55),rgba(var(--fx-accent-rgb),0));
  filter:blur(.2px);opacity:.85;
}
#fxvps-footer-final .fx-wrap::after{
  content:"";position:absolute;left:0;right:0;top:10px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--fx-accent-rgb),0),rgba(var(--fx-accent-rgb),.35),rgba(var(--fx-accent-rgb),0));
  box-shadow:0 0 24px rgba(var(--fx-accent-rgb),.25);opacity:.95;
}

#fxvps-footer-final .fx-overlay{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 520px at 50% 20%, rgba(4,6,15,.30) 0%, rgba(4,6,15,.72) 70%),
    linear-gradient(180deg, rgba(4,6,15,.42) 0%, rgba(4,6,15,.80) 100%);
}
#fxvps-footer-final .fx-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto}

/* ====== Brand / top text ====== */
#fxvps-footer-final .fx-top{text-align:center;margin-bottom:18px}
#fxvps-footer-final .fx-brand-pill{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;
  /* was rgba(0,0,0,.38) + blur(10px); solid instead — see note 1 */
  background:var(--glass-2);border:1px solid rgba(var(--fx-accent-rgb),.25);
  box-shadow:0 18px 60px var(--fx-shadow);
}
#fxvps-footer-final .fx-dot{
  width:10px;height:10px;border-radius:50%;margin:0;flex:0 0 auto;
  background:var(--fx-green);box-shadow:0 0 0 5px rgba(var(--fx-accent-rgb),.18);animation:none;
}
#fxvps-footer-final .fx-brand{font-weight:900;color:#fff;letter-spacing:.2px;font-size:14px}
#fxvps-footer-final .fx-top p{
  margin:12px auto 0;max-width:920px;line-height:1.95;font-size:14px;color:var(--fx-muted);
}
#fxvps-footer-final .fx-top b{color:var(--fx-green)}

/* ====== Social ====== */
#fxvps-footer-final .fx-social{
  margin-top:14px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
}
#fxvps-footer-final .fx-social span{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:var(--glass-2);border:1px solid var(--fx-border);
  color:var(--muted-2);font-weight:800;font-size:12.5px;
}
#fxvps-footer-final .fx-social a{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  text-decoration:none;background:var(--glass-2);border:1px solid var(--fx-border);
  color:#fff;font-weight:800;font-size:12.5px;transition:.18s ease;
}
#fxvps-footer-final .fx-social a:hover{
  color:var(--fx-green);border-color:rgba(var(--fx-accent-rgb),.35);transform:translateY(-1px);
}

/* ====== Cards ====== */
#fxvps-footer-final .fx-grid{
  margin-top:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
}
#fxvps-footer-final .fx-card{
  position:relative;overflow:hidden;display:block;margin:0;
  background:var(--glass);border:1px solid rgba(var(--fx-accent-rgb),.20);
  border-radius:16px;padding:18px;box-shadow:0 20px 70px var(--fx-shadow);
}
#fxvps-footer-final .fx-card::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:radial-gradient(420px 160px at 14% 0%, rgba(var(--fx-accent-rgb),.14) 0%, rgba(var(--fx-accent-rgb),0) 62%);
}
#fxvps-footer-final .fx-card h3{
  position:relative;margin:0 0 12px;font-size:13.5px;text-transform:uppercase;
  letter-spacing:.45px;color:#fff;font-weight:700;
}
#fxvps-footer-final .fx-card ul{position:relative;list-style:none;margin:0;padding:0}
#fxvps-footer-final .fx-card li{
  display:flex;gap:10px;align-items:flex-start;margin:10px 0;list-style:none;
  color:var(--muted);font-size:13px;line-height:1.65;
}
#fxvps-footer-final .fx-card li::before{
  content:"";width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 auto;
  background:var(--fx-green);box-shadow:0 0 0 5px rgba(var(--fx-accent-rgb),.14);
}
#fxvps-footer-final .fx-card a{color:inherit;text-decoration:none;font-weight:600}
#fxvps-footer-final .fx-card a:hover{color:var(--fx-green)}

/* ====== Payments ====== */
#fxvps-footer-final .fx-pay{margin:22px 0 16px;text-align:center}
#fxvps-footer-final .fx-pay .title{font-size:12px;color:var(--muted-2);margin-bottom:10px}
#fxvps-footer-final .fx-pay-row{
  display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;
  padding:8px 6px 14px;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
#fxvps-footer-final .fx-pay-row::-webkit-scrollbar{height:6px}
#fxvps-footer-final .fx-pay-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
#fxvps-footer-final .fx-logo{
  /* margin-left is reset because the header's own .fx-logo indents itself */
  flex:0 0 auto;min-width:132px;height:42px;margin:0;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;
  border-radius:999px;background:var(--glass);border:1px solid var(--line-strong);
  color:#fff;font-weight:900;font-size:12px;letter-spacing:.3px;
  box-shadow:0 14px 50px rgba(0,0,0,.35);position:relative;overflow:hidden;
}
#fxvps-footer-final .fx-logo::before{
  content:"";position:absolute;inset:-2px;pointer-events:none;
  background:radial-gradient(220px 80px at 30% 0%, rgba(var(--fx-accent-rgb),.12) 0%, rgba(var(--fx-accent-rgb),0) 60%);
}
#fxvps-footer-final .fx-logo i{
  width:18px;height:18px;border-radius:50%;display:inline-block;
  background:rgba(var(--fx-accent-rgb),.22);border:1px solid rgba(var(--fx-accent-rgb),.25);
  box-shadow:0 0 22px rgba(var(--fx-accent-rgb),.18);
}

/* ====== Risk warning ====== */
#fxvps-footer-final .fx-warn{
  margin-top:10px;padding:18px 0 4px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12.6px;line-height:2;text-align:center;
}
#fxvps-footer-final .fx-warn strong{color:#fff}

/* ====== Contacts ====== */
#fxvps-footer-final .fx-contact{
  margin:10px 0 18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
#fxvps-footer-final .fx-contact span{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:var(--glass-2);border:1px solid rgba(var(--fx-accent-rgb),.25);
  color:rgba(var(--fx-accent-rgb),.95);font-weight:800;font-size:12.5px;
}
#fxvps-footer-final .fx-contact a{color:inherit;text-decoration:none}
#fxvps-footer-final .fx-contact a:hover{text-decoration:underline}
#fxvps-footer-final .fx-contact svg{width:14px;height:14px;flex:0 0 auto}

/* ====== Bottom ====== */
#fxvps-footer-final .fx-bottom{
  position:relative;z-index:1;
  border-top:1px solid var(--line);background:rgba(4,6,15,.72);
  padding:14px 16px;text-align:center;color:var(--muted-2);font-size:12.2px;
}

/* ====== Responsive ====== */
@media (max-width:980px){ #fxvps-footer-final .fx-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ #fxvps-footer-final .fx-grid{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  #fxvps-footer-final .fx-social a{transition:none}
}

/* the glint rides along in the footer too */
#fxvps-footer-final .fx-foot-logo{position:relative;display:inline-block}