/* ==========================================================================
   Voodoo Services V14 — visual layer
   Ink + electric violet + magenta + hex-lime, matching voodoopay.online.
   Presentation only. Loaded after main.css so every existing page keeps working.
   ========================================================================== */
:root {
  --ink: #0B0A14;
  --ink-2: #12101F;
  --ink-3: #1A1730;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --glass: rgba(255,255,255,.045);
  --glass-2: rgba(255,255,255,.075);
  --text: #F4F2FF;
  --muted: #A39FBF;
  --faint: #6E6A8A;
  --lime: #D4FF3A;
  --lime-ink: #151A00;
  --violet: #8C6CFF;
  --magenta: #FF4FB8;
  --ok: #4DFFB0;
  --warn: #FFC94D;
  --bad: #FF5C7A;
  --font-display: 'Unbounded','Manrope',system-ui,sans-serif;
  --font-body: 'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  --wrap: 1180px;
  --gut: clamp(18px,5vw,48px);
  --bar-h: 68px;
  --safe-b: env(safe-area-inset-bottom,0px);
  --safe-t: env(safe-area-inset-top,0px);
}

body.vx *, body.vx *::before, body.vx *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
html body.vx {
  background: var(--ink);
  color: var(--text);
  font: 500 16px/1.55 var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
:where(body.vx a) { color: inherit; }
body.vx :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
body.vx [hidden] { display: none !important; }
body.vx.vx-lock { overflow: hidden; }
.vx-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--lime); color: var(--lime-ink); padding: 10px 16px; border-radius: 12px; font-weight: 800; transition: top .2s; }
.vx-skip:focus { top: 12px; }
.vx-ico { flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Atmosphere ---------- */
.vx-aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vx-aura i { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.vx-aura i:nth-child(1) { width: 460px; height: 460px; left: -160px; top: -180px; background: var(--violet); opacity: .5; animation: vxd1 18s ease-in-out infinite alternate; }
.vx-aura i:nth-child(2) { width: 380px; height: 380px; right: -140px; top: -60px; background: var(--magenta); opacity: .3; animation: vxd2 22s ease-in-out infinite alternate; }
.vx-aura i:nth-child(3) { width: 300px; height: 300px; left: 34%; top: 38vh; background: var(--lime); opacity: .07; animation: vxd1 26s ease-in-out infinite alternate-reverse; }
@keyframes vxd1 { to { transform: translate(70px,60px) scale(1.18); } }
@keyframes vxd2 { to { transform: translate(-60px,80px) scale(.9); } }
.vx-grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vx-sparks { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Header ---------- */
.vx-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--bar-h); padding: calc(10px + var(--safe-t)) var(--gut) 10px;
  background: linear-gradient(var(--ink) 35%, rgba(11,10,20,0));
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.vx-bar.scrolled { background: rgba(11,10,20,.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.vx-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.vx-mark { width: 40px; height: 40px; flex: none; overflow: visible; filter: drop-shadow(0 6px 18px rgba(140,108,255,.5)); }
.vx-spark { transform-box: fill-box; transform-origin: center; animation: vxtw 3.4s ease-in-out infinite; }
@keyframes vxtw { 50% { transform: scale(.55) rotate(45deg); opacity: .5; } }
.vx-word { font: 700 clamp(14px,4vw,17px)/1 var(--font-display); letter-spacing: -.035em; color: var(--text); white-space: nowrap; }
.vx-word span { background: linear-gradient(95deg,#9B7DFF,#FF4FB8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vx-nav { display: none; align-items: center; gap: 4px; }
.vx-nav a, .vx-navstatus { padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--muted); background: none; border: 0; cursor: pointer; transition: color .2s, background .2s; display: inline-flex; align-items: center; gap: 8px; }
.vx-nav a:hover, .vx-navstatus:hover { color: var(--text); background: var(--glass-2); }
.vx-nav .vx-cta { margin-left: 6px; background: var(--lime); color: var(--lime-ink) !important; font-weight: 800; box-shadow: 0 8px 26px rgba(212,255,58,.2); }
.vx-nav .vx-cta:hover { box-shadow: 0 10px 34px rgba(212,255,58,.36); background: var(--lime); }
.vx-mini { display: flex; }
.vx-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); font-weight: 800; font-size: 13.5px; color: var(--text); cursor: pointer; }
.vx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(77,255,176,.6); animation: vxpulse 2.2s infinite; }
@keyframes vxpulse { 70% { box-shadow: 0 0 0 8px rgba(77,255,176,0); } 100% { box-shadow: 0 0 0 0 rgba(77,255,176,0); } }
@media (min-width: 860px) { .vx-nav { display: flex; } .vx-mini { display: none; } }

/* ---------- Buttons ---------- */
.vx-btn, body.vx .vx-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 18px; border: 1px solid transparent; cursor: pointer;
  font: 800 16px/1 var(--font-body); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .25s, background .25s;
}
.vx-btn:active { transform: scale(.98); }
.vx-btn-lime { background: var(--lime); color: var(--lime-ink) !important; box-shadow: 0 10px 30px rgba(212,255,58,.22), inset 0 -2px 0 rgba(0,0,0,.12); }
.vx-btn-lime:hover { box-shadow: 0 14px 40px rgba(212,255,58,.38); transform: translateY(-2px); }
.vx-btn-lime::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%); transform: translateX(-130%); animation: vxsheen 5.5s ease-in-out infinite; }
@keyframes vxsheen { 0%,62%,100% { transform: translateX(-130%); } 80% { transform: translateX(130%); } }
.vx-btn-ghost { background: var(--glass-2); border-color: var(--line-2); color: var(--text) !important; }
.vx-btn-ghost:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); transform: translateY(-2px); }

/* ---------- Common ---------- */
.vx-home { position: relative; z-index: 2; overflow-x: clip; }
.vx-section { position: relative; width: min(100%, var(--wrap)); margin: 0 auto; padding: clamp(56px,9vw,110px) var(--gut); }
.vx-eyebrow { font: 800 11.5px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin: 0; }
.vx-head h2, .vx-contact-intro h2, .vx-cta-band h2 { font: 700 clamp(24px,6.2vw,48px)/1.08 var(--font-display); letter-spacing: -.045em; margin: 14px 0 16px; text-wrap: balance; }
.vx-head h2 em, .vx-contact-intro h2 em, .vx-h1 em { font-style: normal; background: linear-gradient(95deg,var(--lime),#9BFFCF 45%,var(--violet) 80%,var(--magenta)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: vxgrad 7s linear infinite; }
@keyframes vxgrad { to { background-position: -220% 0; } }
.vx-head p:not(.vx-eyebrow), .vx-contact-intro p:not(.vx-eyebrow), .vx-cta-band p:not(.vx-eyebrow) { color: var(--muted); font-size: clamp(15px,2.2vw,18px); max-width: 52ch; }
.vx-js .vx-rv { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--rd,0s); }
.vx-js .vx-rv.in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.vx-hero { position: relative; width: min(100%, var(--wrap)); margin: 0 auto; padding: 14px var(--gut) 34px; }
.vx-live { display: grid; grid-template-columns: 12px 1fr 20px; align-items: center; gap: 12px; width: min(100%,560px); margin: 0 0 22px; padding: 11px 16px; border-radius: 18px; text-align: left; cursor: pointer; background: var(--glass); border: 1px solid var(--line-2); color: var(--text); backdrop-filter: blur(10px); transition: border-color .25s, transform .2s; font: inherit; }
.vx-live:hover { border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.vx-live-copy { display: grid; gap: 2px; min-width: 0; }
.vx-live-copy strong { font-size: 13.5px; font-weight: 800; }
.vx-live-copy small { color: var(--muted); font-size: 12px; }
.vx-live-arrow { color: var(--muted); font-size: 22px; line-height: 1; }
.vx-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); animation: vxpulse 2.2s infinite; }
.vx-lv-degraded .vx-live-dot, .vx-lv-maintenance .vx-live-dot, .vx-lv-custom .vx-live-dot { background: var(--warn); }
.vx-lv-outage .vx-live-dot { background: var(--bad); }
.vx-hero-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; align-items: center; }
.vx-hero-copy { position: relative; z-index: 2; }
.vx-h1 { font: 700 clamp(26px,8vw,54px)/1.06 var(--font-display); letter-spacing: -.05em; margin: 18px 0 20px; text-wrap: balance; }
.vx-line { display: block; overflow: hidden; padding: .04em 0 .12em; margin-bottom: -.04em; }
.vx-line > * { display: inline-block; animation: vxline .95s var(--ease) both; animation-delay: calc(var(--d) * .13s + .1s); }
@keyframes vxline { from { transform: translateY(110%) rotate(2deg); } }
.vx-lede { color: var(--muted); font-size: clamp(16px,2.4vw,19px); max-width: 44ch; }
.vx-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vx-js .vx-in { opacity: 0; animation: vxrise .9s var(--ease) forwards; animation-delay: calc(var(--d) * .1s + .12s); }
@keyframes vxrise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Orbit stage */
.vx-stage { --s: min(88vw, 520px); --r1: calc(var(--s) * .265); --r2: calc(var(--s) * .435); position: relative; width: var(--s); height: var(--s); margin: 14px auto 0; }
.vx-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%); border: 1px dashed rgba(255,255,255,.14); }
.vx-ring-a { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); border-color: rgba(140,108,255,.4); }
.vx-ring-b { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); border-color: rgba(255,79,184,.28); }
.vx-ring-c { width: calc(var(--s) * 1.0); height: calc(var(--s) * 1.0); border: 1px solid rgba(255,255,255,.05); }
.vx-core { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * .27); height: calc(var(--s) * .27); transform: translate(-50%,-50%); display: grid; place-items: center; }
.vx-core::before { content: ''; position: absolute; inset: -34%; border-radius: 50%; background: radial-gradient(circle,rgba(140,108,255,.55),rgba(255,79,184,.22) 45%,transparent 70%); filter: blur(14px); animation: vxbreath 4.5s ease-in-out infinite; }
@keyframes vxbreath { 50% { transform: scale(1.18); opacity: .7; } }
.vx-core-mark { position: relative; width: 100%; height: 100%; animation: vxfloat 6s ease-in-out infinite; }
@keyframes vxfloat { 50% { transform: translateY(-7px) rotate(-2deg); } }
.vx-orbit { position: absolute; inset: 0; animation: vxspin var(--dur,70s) linear infinite; }
.vx-orbit-in { --r: var(--r1); --dur: 56s; }
.vx-orbit-out { --r: var(--r2); --dur: 84s; animation-direction: reverse; }
.vx-orbit-out .vx-planet { animation-direction: normal; }
@keyframes vxspin { to { transform: rotate(360deg); } }
.vx-slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--ang)) translateX(var(--r)) rotate(calc(var(--ang) * -1)); }
.vx-planet { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; display: grid; place-items: center; border-radius: 20px; color: #0B0A14; text-decoration: none;
  background: linear-gradient(145deg, var(--a), color-mix(in srgb, var(--a) 62%, #fff)); box-shadow: 0 10px 30px color-mix(in srgb, var(--a) 45%, transparent), inset 0 -3px 0 rgba(0,0,0,.14);
  animation: vxspin var(--dur) linear infinite reverse; transition: filter .25s, box-shadow .25s; }
.vx-orbit-out .vx-planet { animation-direction: normal; }
.vx-planet:hover, .vx-planet:focus-visible { filter: brightness(1.12); box-shadow: 0 14px 44px color-mix(in srgb, var(--a) 70%, transparent); }
.vx-planet em { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); padding: 5px 10px; border-radius: 10px; background: var(--ink-3); border: 1px solid var(--line-2); color: var(--text); font: 800 11.5px/1 var(--font-body); font-style: normal; white-space: nowrap; opacity: 0; pointer-events: none; transition: .2s; z-index: 5; }
.vx-planet:hover em, .vx-planet:focus-visible em { opacity: 1; transform: translateX(-50%); }
.vx-stage:hover .vx-orbit, .vx-stage:hover .vx-planet, .vx-stage:focus-within .vx-orbit, .vx-stage:focus-within .vx-planet { animation-play-state: paused; }

.vx-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 30px; }
.vx-stats > div { padding: 16px 12px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); text-align: center; }
.vx-stats b { display: block; font: 700 clamp(24px,5vw,38px)/1 var(--font-display); letter-spacing: -.04em; background: linear-gradient(120deg,var(--text),var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vx-stats span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
@media (min-width: 980px) {
  .vx-hero { padding-top: 22px; }
  .vx-hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 20px; min-height: min(640px, 74vh); }
  .vx-stage { --s: min(42vw, 560px); margin: 0 0 0 auto; }
  .vx-stats { max-width: 560px; }
}

/* ---------- Ticker ---------- */
.vx-ticker { position: relative; z-index: 2; overflow: hidden; border-block: 1px solid var(--line); background: rgba(255,255,255,.02); padding: 16px 0; }
.vx-ticker-track { display: flex; width: max-content; animation: vxtick 38s linear infinite; }
.vx-ticker-track > div { display: flex; align-items: center; flex: none; }
.vx-ticker span { font: 700 13px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 0 26px; white-space: nowrap; }
.vx-ticker i { font-style: normal; color: var(--lime); }
@keyframes vxtick { to { transform: translateX(-50%); } }

/* ---------- Worlds ---------- */
.vx-chooser { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 30px 0 14px; }
.vx-chooser-label { font: 800 13px/1 var(--font-body); color: var(--muted); letter-spacing: .06em; margin-right: 4px; }
.vx-chip { position: relative; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); font-weight: 700; font-size: 14px; color: var(--text); text-decoration: none; transition: .22s var(--ease); }
.vx-chip::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--a); margin-right: 9px; box-shadow: 0 0 10px var(--a); }
.vx-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--a) 70%, transparent); background: color-mix(in srgb, var(--a) 14%, transparent); }
.vx-group { margin-top: clamp(30px,5vw,54px); }
.vx-group-head { display: block; margin-bottom: 16px; } .vx-group-head p { margin-top: 6px; }
.vx-group-head h3 { font: 700 clamp(18px,3.2vw,24px)/1.1 var(--font-display); letter-spacing: -.03em; }
.vx-group-head p { color: var(--faint); font-size: 14px; font-weight: 600; }
.vx-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.vx-card { --mx: 50%; --my: 0%; position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 8px; padding: 24px; min-height: 270px; border-radius: 28px; text-decoration: none; color: var(--text);
  background: var(--glass); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s, box-shadow .3s, opacity .8s var(--ease); transform-style: preserve-3d; will-change: transform; }
.vx-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--a) 24%, transparent), transparent 62%); }
.vx-card:hover::before, .vx-card:focus-visible::before { opacity: 1; }
.vx-card:hover { border-color: color-mix(in srgb, var(--a) 55%, transparent); box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 44px color-mix(in srgb, var(--a) 14%, transparent); }
.vx-card-glow { position: absolute; z-index: -1; width: 190px; height: 190px; right: -70px; top: -70px; border-radius: 50%; background: var(--a); opacity: .2; filter: blur(34px); transition: opacity .3s, transform .5s var(--ease); }
.vx-card:hover .vx-card-glow { opacity: .42; transform: scale(1.2); }
.vx-card-ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 18px; color: #0B0A14; background: linear-gradient(145deg, var(--a), color-mix(in srgb, var(--a) 60%, #fff)); box-shadow: 0 10px 28px color-mix(in srgb, var(--a) 40%, transparent); transition: transform .4s var(--ease); }
.vx-card:hover .vx-card-ic { transform: translateY(-3px) rotate(-6deg) scale(1.06); }
.vx-card h4 { font: 700 19px/1.15 var(--font-display); letter-spacing: -.035em; margin: 0; }
.vx-card small { color: var(--a); font: 800 12.5px/1.3 var(--font-body); letter-spacing: .02em; }
.vx-card p { color: var(--muted); font-size: 14.5px; margin: 4px 0 0; }
.vx-card-go { align-self: end; margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--text); }
.vx-card-go svg { transition: transform .3s var(--ease); }
.vx-card:hover .vx-card-go svg { transform: translateX(5px); }
.vx-card.flash { animation: vxflash 1.2s ease; }
@keyframes vxflash { 30% { box-shadow: 0 0 0 3px var(--a), 0 0 60px color-mix(in srgb, var(--a) 60%, transparent); } }

/* ---------- Product sheet ---------- */
.vx-sheet-wrap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; pointer-events: none; }
.vx-sheet-back { position: absolute; inset: 0; background: rgba(5,4,12,0); transition: background .3s; }
.vx-sheet { position: relative; width: 100%; max-width: 860px; max-height: 92dvh; overflow: auto; padding: 14px 22px calc(26px + var(--safe-b)); border-radius: 30px 30px 0 0; background: linear-gradient(180deg,#1A1730,#12101F); border: 1px solid var(--line-2); border-bottom: 0; transform: translateY(105%); transition: transform .45s var(--ease); box-shadow: 0 -30px 80px rgba(0,0,0,.6); }
.vx-sheet::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto 14px; }
.vx-sheet-wrap.open { visibility: visible; pointer-events: auto; }
.vx-sheet-wrap.open .vx-sheet-back { background: rgba(5,4,12,.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.vx-sheet-wrap.open .vx-sheet { transform: none; }
.vx-x { position: absolute; right: 16px; top: 16px; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--line-2); color: var(--text); cursor: pointer; transition: transform .2s; }
.vx-x:hover { transform: rotate(90deg); }
.vx-panel { display: grid; gap: 22px; padding-top: 6px; }
.vx-panel-art { position: relative; display: grid; place-items: center; height: 150px; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--a) 30%, transparent), transparent 62%), var(--glass); border: 1px solid var(--line); }
.vx-panel-orb { position: relative; z-index: 2; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 30px; color: #0B0A14; background: linear-gradient(145deg,var(--a),color-mix(in srgb,var(--a) 55%,#fff)); box-shadow: 0 16px 50px color-mix(in srgb,var(--a) 55%,transparent); animation: vxfloat 5s ease-in-out infinite; }
.vx-panel-art i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed color-mix(in srgb,var(--a) 55%,transparent); transform: translate(-50%,-50%); animation: vxringspin 22s linear infinite; }
.vx-panel-art i:nth-of-type(1) { width: 150px; height: 150px; }
.vx-panel-art i:nth-of-type(2) { width: 230px; height: 230px; animation-direction: reverse; opacity: .6; }
@keyframes vxringspin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.vx-panel-copy small { color: var(--a); font: 800 12.5px/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.vx-panel-copy h3 { font: 700 clamp(24px,5vw,36px)/1.08 var(--font-display); letter-spacing: -.045em; margin: 8px 0 12px; }
.vx-panel-copy p { color: var(--muted); font-size: 16px; }
.vx-panel-copy ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.vx-panel-copy li { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 15px; }
.vx-panel-copy li svg { margin-top: 2px; color: var(--a); }
.vx-panel-actions { display: grid; gap: 10px; margin-top: 24px; }
.vx-panel.vx-enter .vx-panel-art, .vx-panel.vx-enter .vx-panel-copy > * { animation: vxrise .55s var(--ease) both; }
.vx-panel.vx-enter .vx-panel-copy > *:nth-child(2) { animation-delay: .05s; } .vx-panel.vx-enter .vx-panel-copy > *:nth-child(3) { animation-delay: .1s; } .vx-panel.vx-enter .vx-panel-copy > *:nth-child(4) { animation-delay: .15s; } .vx-panel.vx-enter .vx-panel-copy > *:nth-child(5) { animation-delay: .2s; }
@media (min-width: 760px) {
  .vx-sheet-wrap { align-items: center; padding: 24px; }
  .vx-sheet { border-radius: 32px; border-bottom: 1px solid var(--line-2); transform: translateY(40px) scale(.96); opacity: 0; transition: transform .45s var(--ease), opacity .3s; padding: 30px; }
  .vx-sheet::before { display: none; }
  .vx-sheet-wrap.open .vx-sheet { transform: none; opacity: 1; }
  .vx-panel { grid-template-columns: .85fr 1.15fr; gap: 34px; align-items: center; }
  .vx-panel-art { height: 340px; }
  .vx-panel-orb { width: 120px; height: 120px; border-radius: 38px; }
  .vx-panel-art i:nth-of-type(1) { width: 210px; height: 210px; } .vx-panel-art i:nth-of-type(2) { width: 320px; height: 320px; }
  .vx-panel-actions { grid-auto-flow: row; grid-template-columns: repeat(2, max-content); justify-content: start; } .vx-panel-actions .vx-btn-lime { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- How it connects ---------- */
.vx-how-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 30px; align-items: center; }
.vx-how .vx-btn { margin-top: 22px; min-height: 50px; }
.vx-map { position: relative; border-radius: 32px; background: var(--glass); border: 1px solid var(--line); padding: 10px; overflow: hidden; }
.vx-map::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 47%, rgba(212,255,58,.12), transparent 55%); }
.vx-map-svg { position: relative; width: 100%; height: auto; display: block; overflow: visible; }
.vx-flow { stroke: url(#vxl); stroke-width: 2; stroke-dasharray: 5 7; fill: none; animation: vxdash 1.4s linear infinite; opacity: .8; }
@keyframes vxdash { to { stroke-dashoffset: -24; } }
.vx-flow-dot { fill: var(--lime); animation: vxtravel 3.2s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--lime)); }
.vx-flow-dot:nth-of-type(2) { animation-delay: 1s; } .vx-flow-dot:nth-of-type(3) { animation-delay: 2s; }
@keyframes vxtravel { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)); opacity: 0; } }
.vx-map-core { fill: var(--lime); }
.vx-map-halo { fill: none; stroke: var(--lime); stroke-opacity: .35; stroke-dasharray: 3 6; transform-origin: 200px 160px; animation: vxringspin2 18s linear infinite; }
@keyframes vxringspin2 { to { transform: rotate(360deg); } }
.vx-map-t1 { font: 700 17px var(--font-display); fill: var(--lime-ink); letter-spacing: -.03em; } .vx-map-t1.b { font-size: 20px; }
.vx-map-node circle { fill: #14112A; stroke: var(--a); stroke-width: 2; }
.vx-map-node text { font: 800 12px var(--font-body); fill: var(--text); }
@media (min-width: 900px) { .vx-how-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; } }

/* ---------- Why ---------- */
.vx-why-grid { display: grid; gap: 14px; margin-top: 34px; }
.vx-why-grid article { position: relative; overflow: hidden; padding: 28px; border-radius: 28px; background: var(--glass); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s; }
.vx-why-grid article:hover { transform: translateY(-5px); border-color: rgba(140,108,255,.5); }
.vx-why-grid article::after { content: ''; position: absolute; right: -50px; bottom: -50px; width: 160px; height: 160px; border-radius: 50%; background: var(--violet); opacity: .16; filter: blur(30px); }
.vx-why-grid b { display: block; font: 700 46px/1 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.4px rgba(212,255,58,.8); margin-bottom: 18px; }
.vx-why-grid h3 { font: 700 22px/1.1 var(--font-display); letter-spacing: -.035em; margin-bottom: 8px; }
.vx-why-grid p { color: var(--muted); }
@media (min-width: 800px) { .vx-why-grid { grid-template-columns: repeat(3,1fr); } }

/* ---------- CTA band ---------- */
.vx-cta-wrap { padding-block: 24px; }
.vx-cta-band { position: relative; overflow: hidden; text-align: center; padding: clamp(38px,7vw,76px) 22px; border-radius: 36px; background: linear-gradient(140deg,rgba(140,108,255,.34),rgba(255,79,184,.18) 55%,rgba(212,255,58,.12)); border: 1px solid rgba(140,108,255,.4); box-shadow: 0 24px 70px rgba(60,20,100,.3); }
.vx-cta-band::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(from 0deg,transparent,rgba(255,255,255,.09),transparent 30%); animation: vxringspin2 14s linear infinite; }
.vx-cta-band > * { position: relative; }
.vx-cta-band h2 { margin-inline: auto; max-width: 18ch; }
.vx-cta-band p:not(.vx-eyebrow) { margin: 0 auto 26px; }

/* ---------- Contact ---------- */
.vx-contact-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 34px; align-items: center; }
.vx-notes { list-style: none; display: grid; gap: 10px; margin: 26px 0 0; padding: 0; }
.vx-notes li { display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; padding: 10px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--muted); }
.vx-notes svg { color: var(--lime); }
.vx-form-card { padding: clamp(22px,4vw,40px); border-radius: 32px; background: radial-gradient(circle at 100% 0, rgba(140,108,255,.2), transparent 40%), rgba(18,16,31,.86); border: 1px solid var(--line-2); box-shadow: 0 30px 90px rgba(0,0,0,.45); backdrop-filter: blur(16px); }
body.vx .vx-form-card .voodoo-contact-form { display: grid; gap: 18px; }
body.vx .vx-form-card .field-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
body.vx .vx-form-card label { display: grid; gap: 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
body.vx .vx-form-card input[type=text], body.vx .vx-form-card input[type=email], body.vx .vx-form-card input[type=number], body.vx .vx-form-card textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 16px !important; border: 1px solid var(--line-2) !important; background: rgba(0,0,0,.3) !important; color: var(--text) !important; font: 600 16px/1.4 var(--font-body) !important; outline: none; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
body.vx .vx-form-card textarea { min-height: 150px; resize: vertical; }
body.vx .vx-form-card input:focus, body.vx .vx-form-card textarea:focus { border-color: var(--violet) !important; box-shadow: 0 0 0 4px rgba(140,108,255,.22) !important; }
body.vx .vx-form-card ::placeholder { color: var(--faint); font-weight: 500; }
body.vx .vx-form-card .captcha-row { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: end; }
body.vx .vx-form-card .captcha-badge { padding: 12px 14px; border-radius: 16px; background: rgba(77,255,176,.06); border: 1px solid rgba(77,255,176,.25); display: grid; gap: 3px; }
body.vx .vx-form-card .captcha-badge strong { font-size: 12.5px; color: #BFFFE2; } body.vx .vx-form-card .captcha-badge small { font-size: 11px; color: var(--muted); }
body.vx .vx-form-card .submit-button { width: 100%; background: var(--lime) !important; color: var(--lime-ink) !important; min-height: 58px; border-radius: 18px !important; font-size: 17px !important; }
body.vx .vx-form-card .honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
body.vx .vx-form-card .voodoo-character-count { color: var(--faint) !important; }
body.vx .vx-notice { margin-bottom: 18px; padding: 13px 16px; border-radius: 16px; font-size: 14px; font-weight: 700; border: 1px solid; }
body.vx .vx-notice.success { background: rgba(77,255,176,.08); border-color: rgba(77,255,176,.35); color: #BFFFE2; }
body.vx .vx-notice.error { background: rgba(255,92,122,.1); border-color: rgba(255,92,122,.4); color: #FFC2CD; }
@media (min-width: 640px) { body.vx .vx-form-card .field-row { grid-template-columns: 1fr 1fr; } body.vx .vx-form-card .captcha-row { grid-template-columns: 1fr auto; } }
@media (min-width: 900px) { .vx-contact-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 64px; } }

/* ---------- Status banner/drawer ---------- */
.vx-drawer { position: fixed; inset: 0; z-index: 95; visibility: hidden; pointer-events: none; display: flex; justify-content: flex-end; align-items: flex-end; }
.vx-drawer-back { position: absolute; inset: 0; background: rgba(5,4,12,0); transition: background .3s; }
.vx-drawer-panel { position: relative; width: 100%; max-height: 90dvh; overflow: auto; padding: 26px 22px calc(26px + var(--safe-b)); border-radius: 30px 30px 0 0; background: linear-gradient(180deg,#1A1730,#12101F); border: 1px solid var(--line-2); transform: translateY(105%); transition: transform .45s var(--ease); }
.vx-drawer.open { visibility: visible; pointer-events: auto; }
.vx-drawer.open .vx-drawer-back { background: rgba(5,4,12,.7); backdrop-filter: blur(5px); }
.vx-drawer.open .vx-drawer-panel { transform: none; }
.vx-drawer-panel h2 { font: 700 26px/1.1 var(--font-display); letter-spacing: -.04em; margin: 10px 0 18px; }
.vx-overall { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 20px; background: rgba(77,255,176,.07); border: 1px solid rgba(77,255,176,.3); margin-bottom: 14px; }
.vx-overall.vx-lv-degraded, .vx-overall.vx-lv-maintenance, .vx-overall.vx-lv-custom { background: rgba(255,201,77,.07); border-color: rgba(255,201,77,.35); }
.vx-overall.vx-lv-outage { background: rgba(255,92,122,.08); border-color: rgba(255,92,122,.4); }
.vx-overall .vx-live-dot { margin-top: 5px; flex: none; }
.vx-overall strong { display: block; font-size: 15px; } .vx-overall p { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.vx-status-list { display: grid; gap: 8px; }
.vx-status-row { display: flex; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); }
.vx-status-row strong { display: block; font-size: 15px; } .vx-status-row small { color: var(--muted); font-weight: 700; font-size: 12.5px; } .vx-status-row p { color: var(--muted); font-size: 13px; margin-top: 4px; } .vx-status-row em { display: block; font-style: normal; color: var(--warn); font-size: 12px; margin-top: 4px; }
.vx-sdot { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 12px rgba(77,255,176,.6); }
.vx-sdot.degraded, .vx-sdot.maintenance { background: var(--warn); box-shadow: 0 0 12px rgba(255,201,77,.6); }
.vx-sdot.outage { background: var(--bad); box-shadow: 0 0 12px rgba(255,92,122,.6); }
.vx-status-updated { margin-top: 16px; font-size: 12.5px; color: var(--faint); }
.vx-status-updated a { color: var(--lime); font-weight: 800; }
@media (min-width: 760px) { .vx-drawer { align-items: stretch; } .vx-drawer-panel { width: min(100%,460px); max-height: none; height: 100%; border-radius: 30px 0 0 30px; transform: translateX(105%); } .vx-drawer.open .vx-drawer-panel { transform: none; } }

/* ---------- Footer ---------- */
.vx-foot { position: relative; z-index: 2; margin-top: 30px; padding: 54px var(--gut) 36px; border-top: 1px solid var(--line); background: linear-gradient(180deg,rgba(255,255,255,.02),transparent); }
.vx-foot-grid { width: min(100%,var(--wrap)); margin: 0 auto; display: grid; gap: 34px; }
.vx-foot-brand p { margin-top: 14px; color: var(--muted); max-width: 30ch; }
.vx-foot-links { display: grid; gap: 10px; align-content: start; }
.vx-foot-links b { font: 800 11.5px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 4px; }
.vx-foot-links a { color: var(--muted); font-weight: 600; font-size: 15px; transition: color .2s; width: max-content; }
.vx-foot-links a:hover { color: var(--text); }
.vx-foot-base { width: min(100%,var(--wrap)); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; color: var(--faint); font-size: 13.5px; }
.vx-foot-base .voodoo-legal-footer-links { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.vx-foot-base .voodoo-legal-footer-links a { color: var(--muted); } .vx-foot-base .voodoo-legal-footer-links a:hover { color: var(--text); } .vx-foot-base .voodoo-legal-footer-links span { color: var(--faint); }
@media (min-width: 800px) { .vx-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
body.vx.home .vx-foot, body.vx.front-page .vx-foot { padding-bottom: calc(110px + var(--safe-b)); }
@media (min-width: 860px) { body.vx.home .vx-foot, body.vx.front-page .vx-foot { padding-bottom: 36px; } }

/* ---------- Mobile dock (home only) ---------- */
.vx-dock { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b)); width: min(492px, calc(100% - 24px)); height: 72px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; padding: 0 6px; border-radius: 26px; background: rgba(20,18,34,.78); border: 1px solid var(--line-2); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.vx-dock a, .vx-dock button { display: grid; justify-items: center; gap: 3px; padding: 8px 0; color: var(--muted); font: 700 11px/1 var(--font-body); letter-spacing: .02em; background: none; border: 0; cursor: pointer; text-decoration: none; transition: color .2s; }
.vx-dic { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 12px; transition: background .25s, color .25s, transform .25s; }
.vx-dock .on { color: var(--text); }
.vx-dock .on .vx-dic { background: var(--lime); color: var(--lime-ink); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,255,58,.35); }
@media (min-width: 860px) { .vx-dock { display: none; } }

/* =========================================================================
   Inner pages: shops, status centre, legal, WooCommerce, ordinary pages.
   Same markup and logic as before — recoloured to the Voodoo Pay look.
   ========================================================================= */
html body.vx:not(.home), html body.vx.woocommerce-checkout, html body.vx.woocommerce-cart { background: var(--ink) !important; color: var(--text) !important; }
body.vx .voodoo-content-page, body.vx .pins-shop-page, body.vx .pins-lock-page, body.vx .bots-shop, body.vx .v7-status-page, body.vx .voodoo-public-status-page, body.vx .pins-premium { position: relative; z-index: 2; background: transparent !important; }
body.vx .voodoo-content-page { min-height: 70vh; padding-top: clamp(28px,5vw,60px) !important; }
body.vx .voodoo-page-heading h1, body.vx .pins-shop-hero h1, body.vx .bots-hero h1, body.vx .v7-status-hero h1, body.vx .pins-premium-copy h1, body.vx .pins-lock-card h1, body.vx .woocommerce h1, body.vx .voodoo-public-status-shell h1 { font-family: var(--font-display) !important; letter-spacing: -.045em !important; }
body.vx .overline, body.vx .v40-kicker, body.vx .bots-hero > span, body.vx .pins-premium-copy > span, body.vx .pins-section-heading > span, body.vx .pins-lock-card > span, body.vx .bots-modal > section > span { color: var(--lime) !important; font-family: var(--font-body) !important; font-weight: 800 !important; letter-spacing: .18em !important; }
body.vx .voodoo-page-heading h1, body.vx .pins-shop-hero h1, body.vx .bots-hero h1, body.vx .v7-status-hero h1, body.vx .pins-premium-copy h1, body.vx .pins-lock-card h1, body.vx .voodoo-public-status-shell h1, body.vx .woocommerce h1 { font-size: clamp(28px,6.2vw,54px) !important; line-height: 1.08 !important; }
body.vx .pins-section-heading h2, body.vx .pins-why-card h2, body.vx .pins-more-section h2, body.vx .v7-timeline h2 { font-family: var(--font-display) !important; font-size: clamp(24px,5vw,40px) !important; letter-spacing: -.04em !important; line-height: 1.1 !important; }
body.vx .bots-grid h2 { font-size: 20px !important; letter-spacing: -.02em !important; }
body.vx .bots-hero, body.vx .pins-premium-hero, body.vx .v7-status-hero { background: transparent !important; }
body.vx .woocommerce, body.vx .woocommerce-page { color: var(--text); }
body.vx .woocommerce a:not(.button):not(.vx-btn) { color: #C9BBFF; } body.vx .woocommerce a:not(.button):not(.vx-btn):hover { color: var(--lime); }

/* surfaces */
body.vx .bots-grid article, body.vx .bots-advice, body.vx .bots-modal > section, body.vx .pins-lock-card, body.vx .pins-lock-help, body.vx .pins-feature-grid article, body.vx .pins-plan-card, body.vx .pins-why-card, body.vx .pins-why-points div, body.vx .pins-more-grid article, body.vx .pins-household-note, body.vx .pins-console-screen,
body.vx .v7-status-card, body.vx .v7-overall, body.vx .v7-timeline > *, body.vx .v7-uptime, body.vx .voodoo-page-content, body.vx .woocommerce form.checkout, body.vx .woocommerce-checkout-review-order, body.vx .woocommerce-cart-form, body.vx .cart_totals {
  background: var(--glass) !important; border: 1px solid var(--line) !important; border-radius: 26px !important; box-shadow: 0 20px 60px rgba(0,0,0,.28) !important; backdrop-filter: blur(10px); }
body.vx .pins-plan-card.featured { border-color: rgba(212,255,58,.5) !important; background: linear-gradient(160deg,rgba(212,255,58,.08),var(--glass)) !important; }
body.vx .pins-popular { background: var(--lime) !important; color: var(--lime-ink) !important; }
body.vx .pins-feature-grid article:hover, body.vx .bots-grid article:hover { border-color: rgba(140,108,255,.5) !important; }

/* primary buttons -> lime */
body.vx .bots-buy, body.vx .pins-dropdown-form button, body.vx .pins-lock-card button, body.vx .pins-premium-actions a:not(.secondary), body.vx .bots-hero a, body.vx .bots-modal a, body.vx .woocommerce #place_order, body.vx .woocommerce a.button.alt, body.vx .woocommerce button.button.alt, body.vx .woocommerce .checkout-button, body.vx .woocommerce a.button, body.vx .woocommerce button.button:not(.disabled), body.vx .woocommerce input.button, body.vx .button.primary {
  background: var(--lime) !important; color: var(--lime-ink) !important; border: 1px solid transparent !important; border-radius: 16px !important; font-family: var(--font-body) !important; font-weight: 800 !important; box-shadow: 0 10px 30px rgba(212,255,58,.2) !important; transition: transform .18s var(--ease), box-shadow .25s !important; }
body.vx .bots-buy:hover, body.vx .pins-dropdown-form button:not(:disabled):hover, body.vx .pins-lock-card button:hover, body.vx .pins-premium-actions a:not(.secondary):hover, body.vx .woocommerce #place_order:hover, body.vx .woocommerce a.button:hover, body.vx .woocommerce button.button:hover { background: var(--lime) !important; color: var(--lime-ink) !important; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(212,255,58,.36) !important; }
body.vx .pins-premium-actions a.secondary, body.vx .pins-lock-help a, body.vx .bots-modal-close { background: var(--glass-2) !important; color: var(--text) !important; border: 1px solid var(--line-2) !important; box-shadow: none !important; }
body.vx .pins-dropdown-form button:disabled { opacity: .45 !important; box-shadow: none !important; }

/* fields */
body.vx .pins-lock-card input, body.vx .pins-duration-select, body.vx .woocommerce input.input-text, body.vx .woocommerce textarea, body.vx .woocommerce select, body.vx.woocommerce-checkout input.input-text, body.vx.woocommerce-checkout textarea, body.vx.woocommerce-checkout select, body.vx .select2-selection {
  background: rgba(0,0,0,.3) !important; border: 1px solid var(--line-2) !important; border-radius: 16px !important; color: var(--text) !important; font-family: var(--font-body) !important; font-weight: 600 !important; }
body.vx .pins-lock-card input:focus, body.vx .pins-duration-select:focus, body.vx .woocommerce input.input-text:focus, body.vx .woocommerce textarea:focus { border-color: var(--violet) !important; box-shadow: 0 0 0 4px rgba(140,108,255,.22) !important; outline: none; }
body.vx .woocommerce label, body.vx.woocommerce-checkout label { color: var(--muted) !important; font-weight: 700 !important; }
body.vx .woocommerce-error, body.vx .woocommerce-info, body.vx .woocommerce-message { background: rgba(140,108,255,.1) !important; border: 1px solid rgba(140,108,255,.3) !important; border-radius: 16px !important; color: #D5CCFF !important; }
body.vx .woocommerce-error { background: rgba(255,92,122,.1) !important; border-color: rgba(255,92,122,.4) !important; color: #FFC2CD !important; }
body.vx .woocommerce-message { background: rgba(77,255,176,.08) !important; border-color: rgba(77,255,176,.35) !important; color: #BFFFE2 !important; }
body.vx .woocommerce table.shop_table, body.vx.woocommerce-checkout .woocommerce-checkout-review-order-table { border-color: var(--line) !important; border-radius: 18px; }
body.vx .woocommerce table.shop_table th, body.vx .woocommerce table.shop_table td { border-color: var(--line) !important; }
body.vx .order-total td, body.vx .order-total th { color: var(--lime) !important; }

/* status dots on the status centre & bots shop */
body.vx .bot-status, body.vx .voodoo-service-status-dot, body.vx .voodoo-live-dot { animation: vxpulse 2.2s infinite; }
body.vx .bot-live { color: var(--ok) !important; }
body.vx .bots-grid header > i, body.vx .pins-feature-grid i, body.vx .pins-more-grid i { background: linear-gradient(145deg,var(--violet),var(--magenta)) !important; color: #fff !important; border-radius: 16px !important; }
body.vx .pins-console-screen { background: linear-gradient(160deg,rgba(140,108,255,.2),rgba(255,79,184,.1)) !important; }
body.vx .pins-console-glow { background: radial-gradient(circle,rgba(140,108,255,.5),transparent 68%) !important; }

/* legal pages */
body.vx.voodoo-legal-page .voodoo-content-page { background: transparent !important; }
body.vx.voodoo-legal-page .voodoo-page-content { padding: clamp(22px,4vw,44px) !important; }
body.vx .voodoo-page-content h2, body.vx .voodoo-page-content h3 { color: var(--text); }
body.vx .voodoo-page-content p, body.vx .voodoo-page-content li { color: var(--muted); }
body.vx .voodoo-page-content a { color: #C9BBFF; }

/* the old fixed-header spacing is no longer needed */
body.vx .pins-shop-page, body.vx .pins-lock-page, body.vx .bots-shop, body.vx .v7-status-page, body.vx .voodoo-public-status-page { padding-top: clamp(28px,5vw,60px) !important; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .vx-js .vx-rv, .vx-js .vx-in { opacity: 1 !important; transform: none !important; }
  .vx-ticker-track { animation: none; }
}

/* ---------- Talk to us ---------- */
.vx-talk { display: grid; gap: 14px; }
.vx-talk-card { position: relative; overflow: hidden; display: grid; gap: 10px; padding: clamp(22px,4vw,34px); border-radius: 30px; background: var(--glass); border: 1px solid var(--line-2); }
.vx-talk-card::after { content: ''; position: absolute; width: 200px; height: 200px; right: -70px; top: -70px; border-radius: 50%; background: var(--a); opacity: .2; filter: blur(36px); pointer-events: none; }
.vx-talk-card > * { position: relative; z-index: 1; }
.vx-talk-card .vx-card-ic { margin-bottom: 6px; }
.vx-talk-card h3 { font: 700 clamp(19px,3.4vw,24px)/1.15 var(--font-display); letter-spacing: -.035em; }
.vx-talk-card p { color: var(--muted); }
.vx-talk-card small { color: var(--faint); font-size: 13px; font-weight: 600; }
.vx-talk-card small a { color: var(--lime); }
.vx-talk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.vx-talk-actions .vx-btn { min-height: 52px; }
.vx-talk-card h3, .vx-talk-card p { margin: 0; }

/* Talk section tidy-up */
.vx-talk-card{gap:12px}
.vx-talk-actions{display:flex;flex-wrap:wrap;gap:10px}
.vx-talk-actions .vx-btn{flex:1 1 200px;justify-content:center}
@media(max-width:640px){.vx-talk-actions{flex-direction:column}.vx-talk-actions .vx-btn{width:100%;flex:none}.vx-contact-grid{gap:26px}.vx-contact-intro h2{margin-bottom:10px}}

/* ===== Checkout payment methods: clean mobile layout (radio + label on one row, box underneath) ===== */
html body.vx.woocommerce-checkout #payment ul.payment_methods { border-radius: 20px !important; overflow: hidden; border: 1px solid var(--line-2) !important; background: rgba(0,0,0,.28) !important; }
html body.vx.woocommerce-checkout #payment ul.payment_methods > li { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 12px !important; padding: 14px 16px !important; background: transparent !important; border-bottom: 1px solid var(--line) !important; }
html body.vx.woocommerce-checkout #payment ul.payment_methods > li > input[type=radio] { flex: 0 0 auto !important; margin: 0 !important; width: 20px !important; height: 20px !important; accent-color: var(--lime); }
html body.vx.woocommerce-checkout #payment ul.payment_methods > li > label { flex: 1 1 0 !important; min-width: 0 !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 10px !important; font: 700 15px/1.3 var(--font-body) !important; color: var(--text) !important; }
html body.vx.woocommerce-checkout #payment ul.payment_methods > li > label > * { min-height: 0 !important; height: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; }
html body.vx.woocommerce-checkout #payment ul.payment_methods > li > label img { max-height: 24px !important; max-width: 56px !important; width: auto !important; margin: 0 !important; }
html body.vx.woocommerce-checkout #payment ul.payment_methods > li > label a { font-weight: 600; font-size: 13px; }
html body.vx.woocommerce-checkout #payment ul.payment_methods > li > .payment_box { flex: 0 0 100% !important; width: 100% !important; box-sizing: border-box !important; margin: 4px 0 0 !important; padding: 14px !important; border-radius: 16px !important; background: rgba(140,108,255,.08) !important; border: 1px solid var(--line) !important; color: var(--muted) !important; overflow: visible !important; }
html body.vx.woocommerce-checkout #payment .payment_box::before { display: none !important; }
html body.vx.woocommerce-checkout #payment .payment_box iframe, html body.vx.woocommerce-checkout #payment .payment_box > div { max-width: 100% !important; }
html body.vx.woocommerce-checkout #payment .payment_box label { color: var(--text) !important; }