/* public/css/footer.css */
:root{
  --v-bg:#0f1016;
  --v-surface:#141726;
  --v-surface-2:#0e111b;
  --v-stroke:rgba(255,255,255,.08);
  --v-text:#e7e9ee;
  --v-muted:#a0a7b7;
  --v-accent:#7c3aed;   /* Verox purple */
  --v-accent-2:#22d3ee; /* cyan */
  --v-yellow:#d6a400;   /* brand gold used across site */
}

.vx-footer{color:var(--v-text);background:linear-gradient(180deg,var(--v-surface) 0%,var(--v-bg) 100%);border-top:1px solid var(--v-stroke);margin-top:24px}
.vx-container{max-width:1150px;margin:0 auto;padding:0 18px}
.vx-foot-hero{background:linear-gradient(90deg,var(--v-accent) 0%,var(--v-accent-2) 100%);padding:16px 0}
.vx-hero-left{display:flex;align-items:center;gap:14px}
.vx-logo{width:44px;height:44px;border-radius:10px;background:#fff0;display:block}
.vx-hero-text{display:flex;flex-direction:column}
.vx-server{font-weight:800;letter-spacing:.3px;cursor:pointer}
.vx-server:hover{opacity:.95}
.vx-server.vx-copied{filter:brightness(1.2)}
.vx-online{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.9}
.vx-dot{width:8px;height:8px;border-radius:999px;background:#34d399;box-shadow:0 0 8px #34d399}

.vx-hero-right{display:flex;gap:10px;margin-left:auto}
.vx-foot-hero .vx-container{display:flex;align-items:center;gap:18px}
.vx-social{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);transition:.18s transform, .18s background}
.vx-social:hover{transform:translateY(-2px);background:rgba(255,255,255,.22)}
.vx-social svg{width:18px;height:18px;fill:#fff}

.vx-foot-body{padding:28px 0;border-top:1px solid var(--v-stroke)}
.vx-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
.vx-col h4{margin:0 0 10px;font-weight:800;color:#fff}
.vx-col p{margin:0 0 12px;color:var(--v-muted)}
.vx-chip{display:inline-block;font-size:12px;border:1px solid var(--v-stroke);color:var(--v-text);padding:6px 10px;border-radius:999px;text-decoration:none;background:var(--v-surface-2)}
.vx-chip:hover{border-color:#ffffff26}

.vx-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vx-links a{color:var(--v-text);opacity:.9;text-decoration:none;border:1px solid transparent;padding:6px 8px;border-radius:10px;display:inline-block}
.vx-links a:hover{opacity:1;border-color:var(--v-stroke);background:var(--v-surface-2)}

.vx-btn{display:inline-block;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:800;background:linear-gradient(90deg,var(--v-yellow),#ffd24d);color:#111;border:0;box-shadow:0 6px 20px #ffd24d33}
.vx-btn:hover{filter:brightness(1.03)}

.vx-foot-tail{border-top:1px solid var(--v-stroke);padding:14px 0;background:var(--v-surface-2)}
.vx-tail{display:flex;align-items:center;gap:12px}
.vx-copy{color:var(--v-muted);font-size:12px}
.vx-mini-links{margin-left:auto;display:flex;gap:14px}
.vx-mini-links a{color:var(--v-muted);text-decoration:none;font-size:12px}
.vx-mini-links a:hover{color:#fff}

@media (max-width:900px){
  .vx-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .vx-foot-hero .vx-container{flex-direction:column;align-items:flex-start}
  .vx-grid{grid-template-columns:1fr}
  .vx-mini-links{margin-left:0}
}