/* =========================================================
   VEXDROP — MASTER CUSTOM CSS (FINAL PERFECT REPAIR)
   File: Assets/custom.css
   ========================================================= */

:root {
  --vex-bg: #030305;
  --vex-purple: #8b5cf6;
  --vex-purple-light: #b79cff;
  --vex-max: 1440px;
  --cl-accent: 139, 92, 246 !important;
}

/* =========================================================
   1. MACBOOK & SAFARI FIX: BLAUEN KASTEN ENTFERNEN
   ========================================================= */
[class*="hero"] div[class*="rotate"]:not(:has(img)),
[class*="hero"] div[class*="-rotate"]:not(:has(img)),
main div[class*="rotate-"]:not(:has(img)):not(:has(button)),
main div[class*="-rotate-"]:not(:has(img)):not(:has(button)),
.sa-hero div[class*="rotate"]:not(:has(img)),
.sa-hero div[class*="-rotate"]:not(:has(img)),
section div[class*="rotate-"]:not(:has(img)) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =========================================================
   2. CYBERPUNK SCROLLBAR
   ========================================================= */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
::-webkit-scrollbar-track {
  background: #040308 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c3aed 0%, #c084fc 50%, #4c1d95 100%) !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.8), inset 0 0 4px rgba(255, 255, 255, 0.5) !important;
  border: 1.5px solid #040308 !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9333ea 0%, #e9d5ff 50%, #6d28d9 100%) !important;
  box-shadow: 0 0 18px rgba(192, 132, 252, 1), inset 0 0 6px #ffffff !important;
}
* {
  scrollbar-width: thin !important;
  scrollbar-color: #8b5cf6 #040308 !important;
}

html { background: var(--vex-bg) !important; scroll-behavior: smooth; overflow-x: clip !important; }
body {
  margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: clip !important;
  background: radial-gradient(900px 520px at 85% 0%, rgba(109,40,217,.09), transparent 70%),
              radial-gradient(800px 480px at 15% 10%, rgba(88,28,135,.07), transparent 70%),
              var(--vex-bg) !important;
  color: #e9e7ef !important;
}

* { box-sizing: border-box; }
img { max-width: 100%; }
a { text-decoration: none !important; }
::selection { background: var(--vex-purple); color: #fff; }
main, main > div { background: transparent !important; }
.container, .max-w-screen-xl, .max-w-7xl { max-width: var(--vex-max); }

/* PRELOADER */
body > div[class*="loading"]:first-child, body > div[class*="loader"]:first-child, .sa-page-loading, #loading-screen { z-index: 99999999 !important; }
header.sa-header, header { z-index: 35 !important; }
#nprogress .bar { background: linear-gradient(90deg, #7c3aed, #c084fc, #ffffff) !important; height: 2px !important; box-shadow: 0 0 14px rgba(192, 132, 252, 0.8) !important; z-index: 999999999 !important; }

/* TOPBAR SCANNER */
.vex-topbar, .sa-announcement, .sa-announcement-bar {
  position: relative; z-index: 1100; width: 100% !important; margin: 0 !important; overflow: hidden;
  background: linear-gradient(180deg, rgba(8,8,12,.98), rgba(4,4,7,.96)) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important; color: rgba(255,255,255,.38) !important;
}
.vex-topbar::after {
  content: ""; position: absolute; top: 0; left: -20%; width: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.9), transparent);
  box-shadow: 0 0 16px rgba(139,92,246,.65); animation: vexTopbarScan 7s linear infinite; pointer-events: none;
}
@keyframes vexTopbarScan { 0% { left: -20%; opacity: 0; } 12% { opacity: 1; } 55% { opacity: .85; } 100% { left: 110%; opacity: 0; } }

/* LOGO */
.sa-navbar-logo, .sa-navbar-logo a, header .sa-navbar-logo { display: inline-flex !important; align-items: center !important; height: 40px !important; max-height: 40px !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; }
.sa-navbar-logo img, header .sa-navbar-logo img, #navbar .sa-navbar-logo img { display: block !important; height: 36px !important; max-height: 36px !important; width: auto !important; max-width: 130px !important; object-fit: contain !important; filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.45)) !important; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease !important; }
.sa-navbar-logo:hover img { transform: scale(1.06) !important; filter: drop-shadow(0 0 18px rgba(192, 132, 252, 0.85)) !important; }
.sa-navbar-logo:active img, .sa-navbar-logo.is-tapped img { transform: scale(0.92) !important; }

/* =========================================================
   3. NAVBAR — VEXDROP COMMAND BAR
   ========================================================= */
header.sa-header { z-index:35 !important; }
.sa-navbar--classic { position:relative !important; background:transparent !important; }

.vxn-bar {
  position:relative !important; isolation:isolate !important;
  background:linear-gradient(180deg, rgba(8,7,13,.82), rgba(5,4,9,.72)) !important;
  -webkit-backdrop-filter:blur(18px) saturate(160%) !important; backdrop-filter:blur(18px) saturate(160%) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
.vxn-bar.is-scrolled {
  background:linear-gradient(180deg, rgba(8,7,13,.95), rgba(5,4,9,.9)) !important;
  border-bottom-color:rgba(155,92,255,.18) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.45) !important;
}
.vxn-bar-glow {
  position:absolute !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; overflow:hidden !important;
}
.vxn-bar-glow::before {
  content:"" !important; position:absolute !important; top:-60px !important; left:50% !important; width:620px !important; height:120px !important; margin-left:-310px !important;
  background:radial-gradient(ellipse, rgba(139,92,246,.22), transparent 70%) !important; filter:blur(10px) !important;
  animation:vxnGlow 8s ease-in-out infinite !important;
}
@keyframes vxnGlow { 0%,100% { transform:translateX(-80px); opacity:.7; } 50% { transform:translateX(80px); opacity:1; } }
.vxn-bar-line { position:absolute !important; left:0 !important; right:0 !important; bottom:-1px !important; height:1px !important; overflow:hidden !important; pointer-events:none !important; }
.vxn-bar-line i { position:absolute !important; top:0 !important; left:-25% !important; width:25% !important; height:1px !important; background:linear-gradient(90deg,transparent,#c9a6ff,transparent) !important; box-shadow:0 0 12px rgba(155,92,255,.8) !important; animation:vxnLine 6s cubic-bezier(.4,0,.2,1) infinite !important; }
@keyframes vxnLine { 0% { left:-25%; opacity:0; } 15% { opacity:1; } 70% { opacity:1; } 100% { left:110%; opacity:0; } }

.vxn-inner {
  display:grid !important; grid-template-columns:1fr auto 1fr !important; align-items:center !important; gap:16px !important;
  height:72px !important; max-width:var(--vex-max, 1440px) !important; transition:height .35s cubic-bezier(.2,.8,.2,1) !important;
}
.vxn-bar.is-scrolled .vxn-inner { height:62px !important; }

/* logo */
.sa-navbar-logo { justify-self:start !important; display:inline-flex !important; align-items:center !important; height:auto !important; max-height:none !important; position:relative !important; }
.sa-navbar-logo img, #navbar .sa-navbar-logo img {
  display:block !important; height:38px !important; max-height:38px !important; width:auto !important; max-width:140px !important; object-fit:contain !important;
  filter:drop-shadow(0 0 10px rgba(139,92,246,.45)) !important;
  transition:transform .35s cubic-bezier(.3,1.4,.4,1), filter .3s ease, height .35s ease !important;
  animation:vxnLogoFloat 5s ease-in-out infinite !important;
}
@keyframes vxnLogoFloat { 0%,100% { filter:drop-shadow(0 0 8px rgba(139,92,246,.35)); } 50% { filter:drop-shadow(0 0 16px rgba(170,120,255,.7)); } }
.vxn-bar.is-scrolled .sa-navbar-logo img { height:32px !important; }
.sa-navbar-logo:hover img { transform:scale(1.07) rotate(-2deg) !important; }
.sa-navbar-logo:active img { transform:scale(.93) !important; }

/* link pill + sliding indicator */
.vxn-links {
  position:relative !important; align-items:center !important; gap:2px !important; padding:4px !important;
  border:1px solid rgba(255,255,255,.07) !important; border-radius:14px !important;
  background:rgba(255,255,255,.025) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.vxn-indicator {
  position:absolute !important; top:4px !important; bottom:4px !important; left:0 !important; width:0; z-index:0 !important;
  border-radius:10px !important; pointer-events:none !important; opacity:0 !important;
  background:linear-gradient(135deg, rgba(155,92,255,.28), rgba(109,40,217,.18)) !important;
  border:1px solid rgba(180,140,255,.35) !important; box-shadow:0 0 18px rgba(139,92,246,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition:transform .4s cubic-bezier(.3,1.25,.4,1), width .4s cubic-bezier(.3,1.25,.4,1), opacity .25s ease !important;
}
.vxn-indicator.is-visible { opacity:1 !important; }
.vxn-link {
  position:relative !important; z-index:1 !important; display:inline-flex !important; align-items:center !important; height:36px !important; white-space:nowrap !important;
  padding:0 17px !important; border-radius:10px !important; background:transparent !important;
  color:rgba(236,230,245,.55) !important; font-size:12.5px !important; font-weight:650 !important; letter-spacing:.02em !important;
  transition:color .25s ease !important;
}
.vxn-link:hover, .vxn-link.is-active { color:#fff !important; background:transparent !important; }
.vxn-link.is-active::after {
  content:"" !important; position:absolute !important; bottom:5px !important; left:50% !important; width:4px !important; height:4px !important; margin-left:-2px !important;
  border-radius:50% !important; background:#c9a6ff !important; box-shadow:0 0 8px #a878ff !important;
}

/* actions */
.vxn-actions { justify-self:end !important; display:flex !important; align-items:center !important; gap:10px !important; }
.vxn-icon-btn {
  position:relative !important; width:42px !important; height:42px !important; display:grid !important; place-items:center !important; padding:0 !important;
  border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important; background:rgba(255,255,255,.03) !important;
  color:rgba(236,230,245,.7) !important; cursor:pointer !important; overflow:visible !important;
  transition:color .2s ease, border-color .2s ease, background .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.3,1.4,.4,1) !important;
}
.vxn-icon-btn svg { width:19px !important; height:19px !important; transition:transform .3s cubic-bezier(.3,1.4,.4,1) !important; }
.vxn-icon-btn:hover {
  color:#fff !important; border-color:rgba(170,120,255,.45) !important; background:rgba(139,92,246,.12) !important;
  box-shadow:0 0 20px rgba(139,92,246,.3), inset 0 1px 0 rgba(255,255,255,.08) !important; transform:translateY(-2px) !important;
}
.vxn-icon-btn:active { transform:translateY(0) scale(.94) !important; }
.sa-navbar-cart:hover svg { transform:rotate(-8deg) scale(1.08) !important; }
.vex-search-trigger--icon:hover svg { transform:rotate(-14deg) scale(1.1) !important; }
.vex-search-trigger-ring { inset:-4px !important; border-radius:15px !important; }

.vxn-badge {
  position:absolute !important; top:-6px !important; right:-6px !important; min-width:19px !important; height:19px !important; padding:0 5px !important;
  display:inline-grid !important; place-items:center !important; border-radius:999px !important; border:2px solid #07060b !important;
  background:linear-gradient(135deg,#b88bff,#7c3aed) !important; color:#fff !important; font-size:9.5px !important; font-weight:800 !important; line-height:1 !important;
  box-shadow:0 0 12px rgba(155,92,255,.8) !important; animation:vxnBadge 2.4s ease-in-out infinite !important;
}
@keyframes vxnBadge { 0%,100% { box-shadow:0 0 8px rgba(155,92,255,.6); } 50% { box-shadow:0 0 18px rgba(185,140,255,1); } }

.vxn-account {
  position:relative !important; align-items:center !important; gap:8px !important; height:42px !important; padding:0 18px 0 15px !important; overflow:hidden !important; isolation:isolate !important;
  border:1px solid rgba(170,120,255,.35) !important; border-radius:12px !important;
  background:linear-gradient(135deg, rgba(155,92,255,.2), rgba(109,40,217,.1)) !important;
  color:#f3eefa !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:.03em !important; white-space:nowrap !important; cursor:pointer !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition:transform .25s cubic-bezier(.3,1.4,.4,1), box-shadow .25s ease, border-color .25s ease !important;
}
.vxn-account svg { width:16px !important; height:16px !important; transition:transform .3s cubic-bezier(.3,1.4,.4,1) !important; }
.vxn-account::before {
  content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:-50% !important; width:35% !important; z-index:-1 !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent) !important; transform:skewX(-20deg) !important;
  animation:vxnSweep 4.5s ease-in-out infinite !important;
}
@keyframes vxnSweep { 0%,60% { left:-50%; } 85%,100% { left:130%; } }
.vxn-account:hover { transform:translateY(-2px) !important; border-color:rgba(200,160,255,.7) !important; box-shadow:0 0 24px rgba(139,92,246,.45), inset 0 1px 0 rgba(255,255,255,.12) !important; }
.vxn-account:hover svg { transform:translateX(2px) !important; }

/* burger */
.vxn-burger {
  position:relative !important; width:42px !important; height:42px !important; padding:0 !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important;
  border:1px solid rgba(170,120,255,.3) !important; border-radius:12px !important; background:rgba(139,92,246,.1) !important; cursor:pointer !important;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
@media (max-width:1023px) { .vxn-burger { display:inline-flex !important; } }
@media (min-width:1024px) { .vxn-burger { display:none !important; } }
.vxn-burger i { display:block !important; width:18px !important; height:2px !important; border-radius:2px !important; background:#e9dcff !important; transition:transform .35s cubic-bezier(.3,1.4,.4,1), opacity .2s ease, width .3s ease !important; }
.vxn-burger i:nth-child(2) { width:12px !important; margin-left:6px !important; }
.vxn-burger:hover i:nth-child(2) { width:18px !important; margin-left:0 !important; }
.vxn-burger.is-open { background:rgba(139,92,246,.25) !important; border-color:rgba(200,160,255,.6) !important; box-shadow:0 0 18px rgba(139,92,246,.45) !important; }
.vxn-burger.is-open i:nth-child(1) { transform:translateY(6px) rotate(45deg) !important; }
.vxn-burger.is-open i:nth-child(2) { opacity:0 !important; transform:scaleX(0) !important; }
.vxn-burger.is-open i:nth-child(3) { transform:translateY(-6px) rotate(-45deg) !important; }

@media (max-width:1023px) {
  .vxn-inner { display:flex !important; justify-content:space-between !important; height:64px !important; }
  .vxn-bar.is-scrolled .vxn-inner { height:58px !important; }
  .vxn-actions { gap:8px !important; }
  .vxn-icon-btn, .vxn-burger { width:40px !important; height:40px !important; }
  .sa-navbar-logo img, #navbar .sa-navbar-logo img { height:32px !important; }
}

/* =========================================================
   4. MOBILE MENU — SLIDE-IN SHEET
   ========================================================= */
html.vxn-menu-locked, html.vxn-menu-locked body { overflow:hidden !important; }
.vxn-sheet { position:fixed !important; inset:0 !important; z-index:9999990 !important; display:flex; justify-content:flex-end !important; }
.vxn-sheet-backdrop { position:absolute !important; inset:0 !important; border:0 !important; padding:0 !important; background:rgba(3,2,7,.72) !important; -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important; cursor:pointer !important; }
.vxn-sheet-panel {
  position:relative !important; z-index:1 !important; width:min(400px, 100vw) !important; height:100dvh !important; overflow-y:auto !important; overflow-x:hidden !important; isolation:isolate !important;
  display:flex !important; flex-direction:column !important; padding:14px 18px calc(18px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg,#100c19 0%,#09080e 55%,#060509 100%) !important;
  border-left:1px solid rgba(155,92,255,.2) !important; box-shadow:-30px 0 90px rgba(0,0,0,.7) !important;
}
.vxn-sheet-enter, .vxn-sheet-leave { transition:opacity .35s ease !important; }
.vxn-sheet-enter .vxn-sheet-panel { transition:transform .55s cubic-bezier(.16,1,.3,1) !important; }
.vxn-sheet-leave .vxn-sheet-panel { transition:transform .3s cubic-bezier(.7,0,.84,0) !important; }
.vxn-sheet-enter-start, .vxn-sheet-leave-end { opacity:0 !important; }
.vxn-sheet-enter-start .vxn-sheet-panel, .vxn-sheet-leave-end .vxn-sheet-panel { transform:translateX(100%) !important; }
.vxn-sheet-enter-end, .vxn-sheet-leave-start { opacity:1 !important; }
.vxn-sheet-enter-end .vxn-sheet-panel, .vxn-sheet-leave-start .vxn-sheet-panel { transform:translateX(0) !important; }

.vxn-sheet-aura { position:absolute !important; top:-120px !important; right:-100px !important; width:360px !important; height:360px !important; z-index:-1 !important; border-radius:50% !important; background:radial-gradient(circle,rgba(139,92,246,.25),transparent 65%) !important; filter:blur(18px) !important; pointer-events:none !important; animation:vxcAura 9s ease-in-out infinite !important; }
.vxn-sheet-grid { position:absolute !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) !important; background-size:30px 30px !important; -webkit-mask-image:radial-gradient(ellipse 100% 40% at 100% 0%,#000 20%,transparent 75%) !important; mask-image:radial-gradient(ellipse 100% 40% at 100% 0%,#000 20%,transparent 75%) !important; }

.vxn-sheet-head { display:flex !important; align-items:center !important; gap:10px !important; min-height:52px !important; padding-bottom:14px !important; border-bottom:1px solid rgba(255,255,255,.06) !important; }
.vxn-sheet-logo img { height:34px !important; width:auto !important; filter:drop-shadow(0 0 10px rgba(139,92,246,.5)) !important; }
.vxn-sheet-status { display:inline-flex !important; align-items:center !important; gap:6px !important; margin-left:auto !important; color:#6d6577 !important; font-size:8px !important; font-weight:700 !important; letter-spacing:.2em !important; }
.vxn-sheet-status i { position:relative !important; width:6px !important; height:6px !important; border-radius:50% !important; background:#4ade80 !important; box-shadow:0 0 8px #4ade80 !important; }
.vxn-sheet-status i::after { content:"" !important; position:absolute !important; inset:0 !important; border-radius:50% !important; background:#4ade80 !important; animation:vxcPing 1.8s ease-out infinite !important; }
.vxn-sheet-close { width:40px !important; height:40px !important; display:grid !important; place-items:center !important; padding:0 !important; border:1px solid rgba(255,255,255,.09) !important; border-radius:12px !important; background:rgba(255,255,255,.03) !important; color:#cbbfe0 !important; cursor:pointer !important; transition:all .25s ease !important; }
.vxn-sheet-close svg { width:16px !important; height:16px !important; transition:transform .4s cubic-bezier(.3,1.5,.4,1) !important; }
.vxn-sheet-close:hover, .vxn-sheet-close:active { color:#fff !important; border-color:rgba(170,120,255,.5) !important; background:rgba(139,92,246,.15) !important; }
.vxn-sheet-close:active svg, .vxn-sheet-close:hover svg { transform:rotate(90deg) !important; }

.vxn-sheet-kicker { display:flex !important; align-items:center !important; gap:10px !important; margin:22px 2px 10px !important; color:#5f5869 !important; font-size:8px !important; font-weight:700 !important; letter-spacing:.24em !important; }
.vxn-sheet-kicker i { flex:1 !important; height:1px !important; background:linear-gradient(90deg,rgba(155,92,255,.35),transparent) !important; }

.vxn-sheet-links { display:flex !important; flex-direction:column !important; gap:6px !important; }
.vxn-sheet-link {
  position:relative !important; display:flex !important; align-items:center !important; gap:14px !important; min-height:58px !important; padding:0 16px !important; overflow:hidden !important; isolation:isolate !important;
  border:1px solid rgba(255,255,255,.06) !important; border-radius:14px !important; background:rgba(255,255,255,.02) !important;
  color:#ece6f5 !important; font-size:17px !important; font-weight:750 !important; letter-spacing:.01em !important; -webkit-tap-highlight-color:transparent !important;
  transition:border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.3,1.4,.4,1) !important;
}
.vxn-sheet:not([style*="display: none"]) .vxn-sheet-link,
.vxn-sheet:not([style*="display: none"]) .vxn-sheet-quick,
.vxn-sheet:not([style*="display: none"]) .vxn-sheet-foot { animation:vxnItemIn .55s cubic-bezier(.16,1,.3,1) both !important; animation-delay:calc(var(--i,0) * 55ms + 140ms) !important; }
@keyframes vxnItemIn { from { opacity:0; transform:translateX(34px); } to { opacity:1; transform:none; } }
.vxn-sheet-link em { font-style:normal !important; color:#5d4a80 !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.1em !important; font-variant-numeric:tabular-nums !important; transition:color .2s ease !important; }
.vxn-sheet-link span { flex:1 !important; }
.vxn-sheet-link svg { width:18px !important; height:18px !important; color:#6f5d8f !important; transition:transform .3s cubic-bezier(.3,1.4,.4,1), color .2s ease !important; }
.vxn-sheet-link::before { content:"" !important; position:absolute !important; left:0 !important; top:22% !important; bottom:22% !important; width:3px !important; border-radius:3px !important; background:linear-gradient(180deg,#d0b0ff,#7c3aed) !important; box-shadow:0 0 12px rgba(155,92,255,.9) !important; transform:scaleY(0) !important; transition:transform .25s ease !important; }
.vxn-sheet-link::after { content:"" !important; position:absolute !important; inset:0 !important; z-index:-1 !important; background:radial-gradient(260px circle at 0% 50%, rgba(139,92,246,.22), transparent 70%) !important; opacity:0 !important; transition:opacity .25s ease !important; }
.vxn-sheet-link:hover, .vxn-sheet-link:active, .vxn-sheet-link.is-active { border-color:rgba(170,120,255,.35) !important; }
.vxn-sheet-link:active { transform:scale(.98) !important; }
.vxn-sheet-link:hover::before, .vxn-sheet-link:active::before, .vxn-sheet-link.is-active::before { transform:scaleY(1) !important; }
.vxn-sheet-link:hover::after, .vxn-sheet-link:active::after, .vxn-sheet-link.is-active::after { opacity:1 !important; }
.vxn-sheet-link:hover em, .vxn-sheet-link.is-active em { color:#b98bff !important; }
.vxn-sheet-link:hover svg, .vxn-sheet-link:active svg, .vxn-sheet-link.is-active svg { color:#e0ccff !important; transform:translate(3px,-3px) !important; }

.vxn-sheet-quick { display:grid !important; grid-template-columns:repeat(auto-fit, minmax(0,1fr)) !important; gap:8px !important; margin-top:14px !important; }
.vxn-quick { position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:7px !important; height:76px !important; padding:0 !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:14px !important; background:rgba(255,255,255,.025) !important; color:#b6a8cc !important; font-size:9px !important; font-weight:750 !important; letter-spacing:.2em !important; cursor:pointer !important; transition:all .2s ease !important; }
.vxn-quick svg { width:21px !important; height:21px !important; color:#a57cf0 !important; transition:transform .3s cubic-bezier(.3,1.4,.4,1) !important; }
.vxn-quick b { position:absolute !important; top:10px !important; right:12px !important; min-width:18px !important; height:18px !important; padding:0 5px !important; display:grid !important; place-items:center !important; border-radius:999px !important; background:linear-gradient(135deg,#b88bff,#7c3aed) !important; color:#fff !important; font-size:9px !important; letter-spacing:0 !important; box-shadow:0 0 10px rgba(155,92,255,.8) !important; }
.vxn-quick:hover, .vxn-quick:active { color:#fff !important; border-color:rgba(170,120,255,.4) !important; background:rgba(139,92,246,.12) !important; }
.vxn-quick:active svg { transform:scale(.85) !important; }

.vxn-sheet-foot { margin-top:auto !important; padding-top:20px !important; display:flex !important; flex-direction:column !important; gap:12px !important; }
.vxn-sheet-cta { position:relative !important; overflow:hidden !important; isolation:isolate !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; width:100% !important; height:54px !important; border:1px solid rgba(215,190,255,.35) !important; border-radius:14px !important; background:linear-gradient(135deg,#a36bff 0%,#7c3aed 50%,#5b21b6 100%) !important; color:#fff !important; font-size:14px !important; font-weight:800 !important; letter-spacing:.06em !important; cursor:pointer !important; box-shadow:0 12px 30px rgba(109,40,217,.35), inset 0 1px 0 rgba(255,255,255,.2) !important; }
.vxn-sheet-cta svg { width:18px !important; height:18px !important; }
.vxn-sheet-cta::before { content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:-40% !important; width:25% !important; z-index:-1 !important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent) !important; transform:skewX(-20deg) !important; animation:vxcSweep 3.4s ease-in-out infinite !important; }
.vxn-sheet-cta:active { transform:scale(.98) !important; }
.vxn-sheet-selectors { display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; }
.vxn-sheet-note { margin:4px 0 0 !important; text-align:center !important; color:#433d4b !important; font-size:8px !important; font-weight:700 !important; letter-spacing:.18em !important; }

/* =========================================================
   5. LOGIN — ACCESS TERMINAL
   ========================================================= */
.vxl-root { position:fixed !important; inset:0 !important; z-index:9999998 !important; overflow-y:auto !important; }
.vxl-backdrop { position:fixed !important; inset:0 !important; background:radial-gradient(700px 500px at 50% 40%, rgba(139,92,246,.14), transparent 65%), rgba(3,2,7,.82) !important; -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important; }
.vxl-fade-enter, .vxl-fade-leave { transition:opacity .3s ease !important; }
.vxl-fade-from { opacity:0 !important; } .vxl-fade-to { opacity:1 !important; }
.vxl-center { position:relative !important; min-height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:24px 14px !important; pointer-events:none !important; }
.vxl-card {
  position:relative !important; width:100% !important; max-width:420px !important; padding:18px 22px 16px !important; pointer-events:auto !important; isolation:isolate !important; overflow:hidden !important;
  border-radius:22px !important; background:linear-gradient(180deg,#120e1c 0%,#0b0911 60%,#08070c 100%) !important; color:#ece6f5 !important; text-align:left !important;
  box-shadow:0 40px 120px rgba(0,0,0,.75), 0 0 60px rgba(109,40,217,.12) !important;
}
.vxl-card-enter { transition:opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1) !important; }
.vxl-card-leave { transition:opacity .2s ease, transform .2s ease !important; }
.vxl-card-from { opacity:0 !important; transform:perspective(900px) rotateX(10deg) translateY(24px) scale(.95) !important; }
.vxl-card-to { opacity:1 !important; transform:none !important; }

/* animated gradient border */
.vxl-border { position:absolute !important; inset:0 !important; z-index:5 !important; border-radius:inherit !important; padding:1px !important; pointer-events:none !important;
  background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.12) 0 55%, rgba(217,194,255,.9) 75%, rgba(155,92,255,.12) 90%) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite:xor !important; mask-composite:exclude !important;
  animation:vxcSpinA 5s linear infinite !important; transition:filter .3s ease !important; }
.vxl-grid { position:absolute !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) !important; background-size:28px 28px !important; -webkit-mask-image:radial-gradient(ellipse 80% 45% at 50% 0%,#000 25%,transparent 75%) !important; mask-image:radial-gradient(ellipse 80% 45% at 50% 0%,#000 25%,transparent 75%) !important; animation:vxcGrid 20s linear infinite !important; }
.vxl-aura { position:absolute !important; top:-140px !important; left:50% !important; width:380px !important; height:280px !important; margin-left:-190px !important; z-index:-1 !important; border-radius:50% !important; background:radial-gradient(ellipse,rgba(139,92,246,.28),transparent 65%) !important; filter:blur(20px) !important; pointer-events:none !important; animation:vxnGlow 9s ease-in-out infinite !important; transition:background .4s ease !important; }
.vxl-laser { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:1px !important; overflow:hidden !important; z-index:6 !important; pointer-events:none !important; }
.vxl-laser i { position:absolute !important; left:-30% !important; width:30% !important; height:1px !important; background:linear-gradient(90deg,transparent,#fff,#c4b5fd,transparent) !important; box-shadow:0 0 12px rgba(139,92,246,.9) !important; animation:vxcLaser 4s cubic-bezier(.4,0,.2,1) infinite !important; }

/* top */
.vxl-top { display:flex !important; align-items:center !important; justify-content:space-between !important; min-height:36px !important; }
.vxl-top-left { display:flex !important; align-items:center !important; gap:12px !important; }
.vxl-back {
  position:relative !important; display:inline-flex !important; align-items:center !important; gap:6px !important; height:34px !important; padding:0 12px 0 9px !important; overflow:hidden !important;
  border:1px solid rgba(170,120,255,.3) !important; border-radius:10px !important; background:rgba(139,92,246,.1) !important;
  color:#d7c4f7 !important; font-size:9.5px !important; font-weight:800 !important; letter-spacing:.16em !important; cursor:pointer !important;
  transition:all .25s ease !important;
}
.vxl-back svg { width:15px !important; height:15px !important; transition:transform .3s cubic-bezier(.3,1.5,.4,1) !important; }
.vxl-back:hover { color:#fff !important; border-color:rgba(200,160,255,.65) !important; background:rgba(139,92,246,.2) !important; box-shadow:0 0 18px rgba(139,92,246,.4) !important; }
.vxl-back:hover svg { transform:translateX(-4px) !important; animation:vxlNudge .8s ease-in-out infinite !important; }
@keyframes vxlNudge { 0%,100% { transform:translateX(-4px); } 50% { transform:translateX(-1px); } }
.vxl-back:active { transform:scale(.95) !important; }
.vxl-back-enter { transition:opacity .3s ease, transform .4s cubic-bezier(.3,1.4,.4,1) !important; }
.vxl-back-from { opacity:0 !important; transform:translateX(-14px) !important; }
.vxl-back-to { opacity:1 !important; transform:none !important; }
.vxl-steps { display:flex !important; gap:5px !important; }
.vxl-steps i { width:16px !important; height:4px !important; border-radius:4px !important; background:rgba(255,255,255,.08) !important; transition:all .4s cubic-bezier(.3,1.3,.4,1) !important; }
.vxl-steps i.is-on { width:24px !important; background:linear-gradient(90deg,#b88bff,#7c3aed) !important; box-shadow:0 0 10px rgba(155,92,255,.7) !important; }
.vxl-close { position:relative !important; overflow:hidden !important; isolation:isolate !important; width:36px !important; height:36px !important; display:grid !important; place-items:center !important; padding:0 !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:11px !important; background:rgba(255,255,255,.02) !important; color:#80788a !important; cursor:pointer !important; transition:color .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
.vxl-close::before { content:"" !important; position:absolute !important; inset:-60% !important; z-index:-2 !important; background:conic-gradient(transparent 0 60%, #c9a6ff 80%, transparent) !important; opacity:0 !important; transition:opacity .2s ease !important; }
.vxl-close::after { content:"" !important; position:absolute !important; inset:1px !important; z-index:-1 !important; border-radius:10px !important; background:#120f1b !important; }
.vxl-close svg { width:15px !important; height:15px !important; transition:transform .4s cubic-bezier(.3,1.5,.4,1) !important; }
.vxl-close:hover { color:#fff !important; border-color:transparent !important; box-shadow:0 0 18px rgba(139,92,246,.45) !important; }
.vxl-close:hover::before { opacity:1 !important; animation:vexSpinClockwise 1.2s linear infinite !important; }
.vxl-close:hover svg { transform:rotate(90deg) scale(1.1) !important; }

/* hero */
.vxl-hero { display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; margin:10px 0 18px !important; }
.vxl-emblem { position:relative !important; width:74px !important; height:74px !important; display:grid !important; place-items:center !important; margin-bottom:14px !important; }
.vxl-emblem-ring { position:absolute !important; inset:10px !important; border-radius:20px !important; padding:1px !important; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.2) 0 60%, #e1ccff 82%, rgba(155,92,255,.2)) !important; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite:xor !important; mask-composite:exclude !important; animation:vxcSpinA 2.6s linear infinite !important; }
.vxl-emblem::before { content:"" !important; position:absolute !important; inset:11px !important; border-radius:19px !important; background:radial-gradient(circle at 50% 30%, rgba(155,92,255,.3), rgba(20,14,34,.95) 70%) !important; }
.vxl-emblem-orbit { position:absolute !important; inset:0 !important; border-radius:50% !important; border:1px dashed rgba(155,92,255,.22) !important; animation:vexSpinClockwise 7s linear infinite !important; }
.vxl-emblem-orbit.o2 { inset:-6px !important; border:0 !important; animation-duration:4.5s !important; animation-direction:reverse !important; }
.vxl-emblem-orbit b { position:absolute !important; top:-2px !important; left:50% !important; width:5px !important; height:5px !important; margin-left:-2.5px !important; border-radius:50% !important; background:#e8dbff !important; box-shadow:0 0 10px #a878ff !important; }
.vxl-emblem-orbit.o2 b { width:3px !important; height:3px !important; background:#8b5cf6 !important; }
.vxl-emblem-icon { position:relative !important; z-index:2 !important; color:#d9c4ff !important; animation:vxcFloat 3.4s ease-in-out infinite !important; }
.vxl-emblem-icon svg { width:26px !important; height:26px !important; filter:drop-shadow(0 0 10px rgba(170,120,255,.7)) !important; }
.vxl-emblem-icon svg:not([style*="display: none"]) { animation:vxlIconSwap .5s cubic-bezier(.3,1.5,.4,1) both !important; }
@keyframes vxlIconSwap { from { opacity:0; transform:scale(.4) rotate(-30deg); } to { opacity:1; transform:none; } }
.vxl-kicker { display:inline-flex !important; align-items:center !important; gap:5px !important; color:#5f5869 !important; font-size:8px !important; font-weight:700 !important; letter-spacing:.22em !important; }
.vxl-kicker i { color:#8a63c9 !important; font-style:normal !important; }
.vxl-caret { display:inline-block !important; width:4px !important; height:8px !important; background:#9b6dff !important; animation:vexCaret 1s steps(1) infinite !important; }
.vxl-title { margin:8px 0 0 !important; text-transform:uppercase !important; font-size:23px !important; font-weight:800 !important; letter-spacing:.02em !important; line-height:1.2 !important; background:linear-gradient(100deg,#f5f0fb 0 40%,#caa8ff 50%,#f5f0fb 60% 100%) !important; background-size:250% 100% !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; animation:vexBrandShine 4s ease-in-out infinite !important; }

/* steps */
.vxl-step:not([style*="display: none"]) { animation:vxlStepIn .45s cubic-bezier(.16,1,.3,1) both !important; }
@keyframes vxlStepIn { from { opacity:0; transform:translateX(22px); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
.vxl-sub { margin:0 0 14px !important; text-align:center !important; color:#7a7285 !important; font-size:12.5px !important; line-height:1.55 !important; }
.vxl-sub b { color:#d4bdff !important; font-weight:700 !important; word-break:break-all !important; }

/* fields */
.vxl-field {
  position:relative !important; display:flex !important; align-items:center !important; height:54px !important; overflow:hidden !important; cursor:text !important;
  border:1px solid rgba(255,255,255,.09) !important; border-radius:14px !important; background:rgba(255,255,255,.025) !important;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
}
.vxl-field-icon { position:absolute !important; left:16px !important; width:18px !important; height:18px !important; color:#6f6280 !important; pointer-events:none !important; transition:color .25s ease, transform .3s cubic-bezier(.3,1.4,.4,1) !important; }
.vxl-field input { width:100% !important; height:100% !important; padding:0 48px 0 46px !important; border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; color:#f3eefa !important; font-size:15px !important; font-weight:550 !important; }
.vxl-field input::placeholder { color:#4f485a !important; }
.vxl-field input.vxl-mono { letter-spacing:.35em !important; font-variant-numeric:tabular-nums !important; }
.vxl-field input.vxl-mono::placeholder { letter-spacing:.02em !important; }
.vxl-field-line { position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; height:2px !important; background:linear-gradient(90deg,transparent,#b98bff,transparent) !important; transform:scaleX(0) !important; transition:transform .45s cubic-bezier(.2,.8,.2,1) !important; }
.vxl-field:focus-within { border-color:rgba(170,120,255,.55) !important; background:rgba(139,92,246,.06) !important; box-shadow:0 0 0 4px rgba(139,92,246,.1), 0 0 28px rgba(109,40,217,.15) !important; }
.vxl-field:focus-within .vxl-field-icon { color:#c9a6ff !important; transform:scale(1.1) !important; }
.vxl-field:focus-within .vxl-field-line { transform:scaleX(1) !important; }
.vxl-eye { position:absolute !important; right:8px !important; width:36px !important; height:36px !important; display:grid !important; place-items:center !important; padding:0 !important; border:0 !important; border-radius:10px !important; background:transparent !important; color:#7a6d8c !important; cursor:pointer !important; transition:all .2s ease !important; }
.vxl-eye svg { width:18px !important; height:18px !important; }
.vxl-eye:hover { color:#fff !important; background:rgba(139,92,246,.15) !important; }
.vxl-altcha { margin-top:10px !important; }

/* OTP */
.vxl-otp { display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; }
.vxl-otp-cell {
  width:48px !important; height:58px !important; padding:0 !important; text-align:center !important; outline:0 !important; caret-color:#b98bff !important;
  border:1px solid rgba(255,255,255,.1) !important; border-radius:13px !important; background:rgba(255,255,255,.03) !important;
  color:#fff !important; font-size:23px !important; font-weight:800 !important; font-variant-numeric:tabular-nums !important;
  transition:border-color .2s ease, box-shadow .25s ease, background .2s ease, transform .25s cubic-bezier(.3,1.5,.4,1) !important;
  animation:vxlCellIn .45s cubic-bezier(.3,1.4,.4,1) both !important; animation-delay:calc(var(--i) * 45ms + 120ms) !important;
}
@keyframes vxlCellIn { from { opacity:0; transform:translateY(12px) scale(.9); } to { opacity:1; transform:none; } }
.vxl-otp-cell:focus { border-color:rgba(190,150,255,.8) !important; background:rgba(139,92,246,.1) !important; box-shadow:0 0 0 4px rgba(139,92,246,.14), 0 0 22px rgba(139,92,246,.35) !important; transform:translateY(-3px) !important; }
.vxl-otp-cell.is-filled { border-color:rgba(170,120,255,.5) !important; background:linear-gradient(180deg,rgba(155,92,255,.18),rgba(109,40,217,.08)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 14px rgba(139,92,246,.25) !important; }
.vxl-otp-sep { width:10px !important; height:2px !important; border-radius:2px !important; background:rgba(155,92,255,.4) !important; }
.vxl-otp.is-error .vxl-otp-cell { border-color:rgba(255,90,130,.6) !important; background:rgba(255,60,110,.07) !important; color:#ffc1cf !important; box-shadow:0 0 14px rgba(255,60,110,.25) !important; }

/* error message */
.vxl-error { display:flex !important; align-items:center !important; gap:8px !important; margin:10px 0 0 !important; padding:10px 12px !important; border:1px solid rgba(255,90,130,.3) !important; border-radius:11px !important; background:linear-gradient(90deg,rgba(255,60,110,.1),rgba(255,60,110,.03)) !important; color:#ffb4c4 !important; font-size:12px !important; font-weight:600 !important; }
.vxl-error svg { width:16px !important; height:16px !important; flex-shrink:0 !important; color:#ff6b8f !important; animation:vxlErrIcon .6s ease both !important; }
.vxl-error:not([style*="display: none"]) { animation:vxlErrIn .4s cubic-bezier(.3,1.4,.4,1) both !important; }
@keyframes vxlErrIn { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes vxlErrIcon { 0% { transform:scale(0) rotate(-90deg); } 60% { transform:scale(1.3) rotate(10deg); } 100% { transform:none; } }
.vxl-error--center { justify-content:center !important; }

/* ERROR STATE — shake + glitch + red scan + red border */
.vxl-field.is-error { border-color:rgba(255,90,130,.65) !important; background:rgba(255,60,110,.06) !important; box-shadow:0 0 0 4px rgba(255,60,110,.1), 0 0 24px rgba(255,60,110,.2) !important; }
.vxl-field.is-error .vxl-field-icon { color:#ff7b9c !important; }
.vxl-field.is-error .vxl-field-line { background:linear-gradient(90deg,transparent,#ff5a82,transparent) !important; transform:scaleX(1) !important; }
.vxl-card.vxl-shake { animation:vxlShake .55s cubic-bezier(.36,.07,.19,.97) both !important; }
@keyframes vxlShake { 10%,90% { transform:translateX(-2px); } 20%,80% { transform:translateX(4px); } 30%,50%,70% { transform:translateX(-7px) skewX(-1deg); } 40%,60% { transform:translateX(7px) skewX(1deg); } }
.vxl-card.has-error .vxl-border { background:conic-gradient(from var(--vxc-a,0deg), rgba(255,60,110,.15) 0 55%, #ff8aa6 75%, rgba(255,60,110,.15) 90%) !important; }
.vxl-card.has-error .vxl-aura { background:radial-gradient(ellipse,rgba(255,60,110,.22),transparent 65%) !important; }
.vxl-errscan { position:absolute !important; left:0 !important; right:0 !important; top:0 !important; height:40% !important; z-index:4 !important; pointer-events:none !important; opacity:0 !important; background:linear-gradient(180deg,transparent,rgba(255,60,110,.12),transparent) !important; }
.vxl-card.vxl-shake .vxl-errscan { animation:vxlErrScan .7s ease-out both !important; }
@keyframes vxlErrScan { 0% { top:-40%; opacity:1; } 100% { top:110%; opacity:0; } }
.vxl-card.vxl-shake .vxl-title { animation:vexNfGlitch .6s steps(1) 1 both, vexBrandShine 4s ease-in-out infinite !important; }
.vxl-card.vxl-shake .vxl-emblem-icon { color:#ff8aa6 !important; }
.vxl-card.has-error .vxl-emblem-ring { background:conic-gradient(from var(--vxc-a,0deg), rgba(255,60,110,.2) 0 60%, #ffc2d0 82%, rgba(255,60,110,.2)) !important; }

/* button */
.vxl-btn {
  position:relative !important; width:100% !important; height:52px !important; margin-top:14px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; overflow:hidden !important; isolation:isolate !important;
  border:1px solid rgba(215,190,255,.35) !important; border-radius:14px !important; background:linear-gradient(135deg,#a36bff 0%,#7c3aed 50%,#5b21b6 100%) !important; background-size:200% 200% !important;
  color:#fff !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.14em !important; text-transform:uppercase !important; cursor:pointer !important;
  box-shadow:0 12px 32px rgba(109,40,217,.35), inset 0 1px 0 rgba(255,255,255,.22) !important;
  animation:vxcGradient 5s ease infinite !important; transition:transform .2s cubic-bezier(.3,1.4,.4,1), box-shadow .2s ease, opacity .2s ease !important;
}
.vxl-btn::before { content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:-40% !important; width:25% !important; z-index:-1 !important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent) !important; transform:skewX(-20deg) !important; animation:vxcSweep 3.4s ease-in-out infinite !important; }
.vxl-btn-glow { position:absolute !important; inset:-2px !important; z-index:-2 !important; border-radius:inherit !important; background:conic-gradient(from var(--vxc-a,0deg),#7c3aed,#e0c8ff,#7c3aed,#4c1d95,#7c3aed) !important; filter:blur(8px) !important; opacity:0 !important; transition:opacity .25s ease !important; animation:vxcSpinA 3s linear infinite !important; }
.vxl-btn:hover { transform:translateY(-2px) !important; box-shadow:0 18px 44px rgba(109,40,217,.55), 0 0 30px rgba(155,92,255,.4), inset 0 1px 0 rgba(255,255,255,.25) !important; }
.vxl-btn:hover .vxl-btn-glow { opacity:.55 !important; }
.vxl-btn:active { transform:scale(.98) !important; }
.vxl-btn-arrow { width:16px !important; height:16px !important; transition:transform .25s cubic-bezier(.3,1.5,.4,1) !important; }
.vxl-btn:hover .vxl-btn-arrow { transform:translateX(5px) !important; }
.vxl-spinner { display:none !important; width:16px !important; height:16px !important; border-radius:50% !important; border:2px solid rgba(255,255,255,.3) !important; border-top-color:#fff !important; animation:vexSpinClockwise .7s linear infinite !important; }
.vxl-btn.is-loading { cursor:wait !important; }
.vxl-btn.is-loading .vxl-btn-arrow { display:none !important; }
.vxl-btn.is-loading .vxl-spinner { display:block !important; }
.vxl-btn:disabled { opacity:.85 !important; transform:none !important; }

.vxl-link { display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; margin:14px auto 0 !important; padding:6px 10px !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:#8a7f98 !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; cursor:pointer !important; transition:color .2s ease, background .2s ease, letter-spacing .3s ease !important; }
.vxl-link svg { width:14px !important; height:14px !important; transition:transform .5s cubic-bezier(.3,1.3,.4,1) !important; }
.vxl-link:hover { color:#e0ccff !important; background:rgba(139,92,246,.1) !important; letter-spacing:.1em !important; }
.vxl-link:hover svg { transform:rotate(-20deg) scale(1.1) !important; }
.vxl-link:disabled { opacity:.4 !important; cursor:wait !important; }

.vxl-or { position:relative !important; display:flex !important; align-items:center !important; gap:12px !important; margin:14px 0 !important; color:#4f4958 !important; font-size:9px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; }
.vxl-or::before, .vxl-or::after { content:"" !important; flex:1 !important; height:1px !important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent) !important; }
.vxl-discord { width:100% !important; height:48px !important; margin-top:10px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; border:1px solid rgba(88,101,242,.35) !important; border-radius:14px !important; background:rgba(88,101,242,.1) !important; color:#dfe2ff !important; font-size:13px !important; font-weight:700 !important; cursor:pointer !important; transition:all .25s ease !important; }
.vxl-discord svg { width:19px !important; height:19px !important; color:#8b96ff !important; transition:transform .3s cubic-bezier(.3,1.4,.4,1) !important; }
.vxl-discord:hover { background:rgba(88,101,242,.22) !important; border-color:rgba(130,140,255,.6) !important; box-shadow:0 0 22px rgba(88,101,242,.35) !important; transform:translateY(-2px) !important; }
.vxl-discord:hover svg { transform:rotate(-10deg) scale(1.15) !important; }

.vxl-foot { display:flex !important; justify-content:space-between !important; margin-top:18px !important; padding-top:12px !important; border-top:1px solid rgba(255,255,255,.05) !important; color:#433d4b !important; font-size:8px !important; font-weight:700 !important; letter-spacing:.16em !important; }
.vxl-foot span:first-child { display:inline-flex !important; align-items:center !important; gap:6px !important; }
.vxl-foot i { width:5px !important; height:5px !important; border-radius:50% !important; background:#4ade80 !important; box-shadow:0 0 8px #4ade80 !important; }

@media (max-width:480px) {
  .vxl-card { padding:16px 16px 14px !important; border-radius:20px !important; }
  .vxl-otp { gap:6px !important; }
  .vxl-otp-cell { width:42px !important; height:52px !important; font-size:20px !important; }
  .vxl-otp-sep { width:6px !important; }
  .vxl-foot span:nth-child(2) { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vxn-bar *, .vxn-sheet *, .vxl-card, .vxl-card * { animation:none !important; }
}

/* =========================================================
   6. VEXDROP SEARCH V24 — NEBULA COMMAND
   ========================================================= */

html.vex-search-locked,
html.vex-search-locked body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.vex-search-stage {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 94px 18px 24px !important;
  box-sizing: border-box !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  transition: opacity .18s ease, visibility 0s linear .18s !important;
}
.vex-search-stage.is-open {
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .18s ease, visibility 0s linear 0s !important;
}
.vex-search-stage.is-visible { opacity: 1 !important; }

.vex-search-backdrop {
  position: fixed !important;
  inset: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: radial-gradient(700px 430px at 50% 12%, rgba(139,92,246,.09), transparent 68%), rgba(2,2,7,.84) !important;
  cursor: pointer !important;
}

.vex-search-console {
  position: relative !important;
  z-index: 2 !important;
  width: min(720px, calc(100vw - 34px)) !important;
  max-height: min(610px, calc(100dvh - 120px)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #111019 0%, #0b0a10 52%, #09080d 100%) !important;
  box-shadow: 0 38px 110px rgba(0,0,0,.70), 0 0 0 1px rgba(139,92,246,.025), 0 0 55px rgba(116,63,205,.055) !important;
  transform: translate3d(0,-12px,0) scale(.975) !important;
  opacity: 0 !important;
  transition: transform .24s cubic-bezier(.18,.82,.22,1), opacity .18s ease !important;
  isolation: isolate !important;
}
.vex-search-stage.is-visible .vex-search-console { transform: translate3d(0,0,0) scale(1) !important; opacity: 1 !important; }
.vex-search-console::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 8% !important;
  width: 84% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(169,116,255,.65), transparent) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}
.vex-search-console::after {
  content: "" !important;
  position: absolute !important;
  right: -120px !important;
  bottom: -120px !important;
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(139,92,246,.055), transparent 68%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.vex-search-corner { position:absolute !important; width:28px !important; height:28px !important; z-index:11 !important; pointer-events:none !important; opacity:.55 !important; }
.vex-search-corner-tl { top:-1px; left:-1px; border-top:1px solid rgba(166,113,255,.55); border-left:1px solid rgba(166,113,255,.55); border-top-left-radius:20px; }
.vex-search-corner-tr { top:-1px; right:-1px; border-top:1px solid rgba(166,113,255,.55); border-right:1px solid rgba(166,113,255,.55); border-top-right-radius:20px; }
.vex-search-corner-bl { bottom:-1px; left:-1px; border-bottom:1px solid rgba(166,113,255,.23); border-left:1px solid rgba(166,113,255,.23); border-bottom-left-radius:20px; }
.vex-search-corner-br { bottom:-1px; right:-1px; border-bottom:1px solid rgba(166,113,255,.23); border-right:1px solid rgba(166,113,255,.23); border-bottom-right-radius:20px; }

.vex-search-top, .vex-search-input-area, .vex-search-content, .vex-search-bottom-line { position:relative !important; z-index:3 !important; }
.vex-search-top { min-height:66px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; padding:0 17px !important; border-bottom:1px solid rgba(255,255,255,.055) !important; background:rgba(255,255,255,.008) !important; }
.vex-search-brand { display:flex !important; align-items:center !important; gap:10px !important; }
.vex-search-mark { width:30px !important; height:30px !important; display:grid !important; place-items:center !important; border:1px solid rgba(155,92,255,.24) !important; border-radius:9px !important; background:rgba(155,92,255,.045) !important; }
.vex-search-mark span { width:5px !important; height:5px !important; border-radius:50% !important; background:#aa78ff !important; box-shadow:0 0 13px rgba(170,120,255,.8) !important; }
.vex-search-brand-text { display:flex !important; flex-direction:column !important; gap:2px !important; }
.vex-search-brand-text strong { color:#eeeaf4 !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.15em !important; }
.vex-search-brand-text span { color:#514b5a !important; font-size:6px !important; letter-spacing:.14em !important; }
.vex-search-top-meta { display:flex !important; align-items:center !important; gap:11px !important; }
.vex-search-platform { color:#4b4652 !important; font-size:6px !important; font-weight:700 !important; letter-spacing:.15em !important; }
.vex-search-close { width:32px !important; height:32px !important; display:grid !important; place-items:center !important; padding:0 !important; border:1px solid rgba(255,255,255,.065) !important; border-radius:8px !important; background:rgba(255,255,255,.018) !important; color:#625d68 !important; cursor:pointer !important; transition:color .14s ease,border-color .14s ease,background .14s ease,transform .14s ease !important; }
.vex-search-close:hover { color:#fff !important; border-color:rgba(155,92,255,.34) !important; background:rgba(155,92,255,.075) !important; transform:scale(1.04) !important; }
.vex-search-close svg { width:14px !important; height:14px !important; }

.vex-search-input-area { padding:13px 13px 7px !important; }
.vex-search-input-wrap { position:relative !important; height:53px !important; display:flex !important; align-items:center !important; border:1px solid rgba(255,255,255,.085) !important; border-radius:13px !important; background:#111017 !important; overflow:hidden !important; transition:border-color .14s ease,box-shadow .14s ease !important; }
.vex-search-input-wrap::after { content:"" !important; position:absolute !important; left:12% !important; right:12% !important; bottom:0 !important; height:1px !important; background:linear-gradient(90deg,transparent,rgba(155,92,255,.22),transparent) !important; pointer-events:none !important; }
.vex-search-input-wrap:focus-within { border-color:rgba(155,92,255,.56) !important; box-shadow:0 0 0 3px rgba(155,92,255,.045),0 0 26px rgba(118,59,214,.06) !important; }
.vex-search-scan { position:absolute !important; left:-20% !important; top:0 !important; width:18% !important; height:1px !important; background:linear-gradient(90deg,transparent,rgba(201,169,255,.8),transparent) !important; opacity:0 !important; pointer-events:none !important; }
.vex-search-input-wrap:focus-within .vex-search-scan { animation:vexSearchScan 2.6s linear infinite !important; opacity:1 !important; }
@keyframes vexSearchScan { from { transform:translateX(0); } to { transform:translateX(720%); } }
.vex-search-icon { position:absolute !important; left:16px !important; width:17px !important; height:17px !important; color:#8a69ae !important; pointer-events:none !important; }
.vex-search-input { width:100% !important; height:100% !important; padding:0 50px 0 45px !important; border:0 !important; outline:0 !important; background:transparent !important; color:#eeeaf4 !important; font-size:13px !important; font-weight:500 !important; }
.vex-search-input::placeholder { color:#5d5765 !important; }
.vex-search-input::-webkit-search-cancel-button { display:none !important; }
.vex-search-clear { position:absolute !important; right:9px !important; width:29px !important; height:29px !important; display:grid !important; place-items:center !important; padding:0 !important; border:1px solid rgba(255,255,255,.065) !important; border-radius:8px !important; background:rgba(255,255,255,.018) !important; color:#605966 !important; cursor:pointer !important; transition:.12s ease !important; }
.vex-search-clear:hover { color:#fff !important; border-color:rgba(155,92,255,.34) !important; background:rgba(155,92,255,.075) !important; }
.vex-search-clear svg { width:12px !important; height:12px !important; }
.vex-search-desktop-hint { display:block !important; padding:3px 4px 0 !important; color:#45404d !important; text-align:right !important; font-size:5px !important; font-weight:700 !important; letter-spacing:.14em !important; }
.vex-search-desktop-hint[hidden] { display:none !important; }

.vex-search-content { padding:0 13px 13px !important; min-height:0 !important; }
.vex-search-idle { min-height:82px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:14px !important; }
.vex-search-idle-orbit { position:relative !important; width:40px !important; height:40px !important; flex:0 0 40px !important; }
.vex-idle-ring { position:absolute !important; inset:3px !important; border:1px solid rgba(158,108,228,.20) !important; border-radius:50% !important; }
.vex-idle-ring.ring-one { animation:vexIdleOne 5s linear infinite !important; }
.vex-idle-ring.ring-two { animation:vexIdleTwo 5s linear infinite !important; }
.vex-idle-core { position:absolute !important; left:50% !important; top:50% !important; width:6px !important; height:6px !important; transform:translate(-50%,-50%) !important; border-radius:50% !important; background:#ae7dff !important; box-shadow:0 0 16px rgba(174,125,255,.75) !important; }
@keyframes vexIdleOne { from { transform:rotate(45deg) scaleX(.56); } to { transform:rotate(405deg) scaleX(.56); } }
@keyframes vexIdleTwo { from { transform:rotate(-45deg) scaleX(.56); } to { transform:rotate(-405deg) scaleX(.56); } }
.vex-search-idle-copy { display:flex !important; flex-direction:column !important; gap:4px !important; }
.vex-search-idle-copy strong { color:#aaa3b2 !important; font-size:9px !important; letter-spacing:.045em !important; }
.vex-search-idle-copy span { color:#514b59 !important; font-size:7px !important; }
.vex-search-idle[hidden],.vex-search-results-head[hidden],.vex-search-empty[hidden],.vex-search-clear[hidden] { display:none !important; }

.vex-search-results-head { height:26px !important; display:flex !important; align-items:center !important; justify-content:space-between !important; padding:0 3px !important; color:#504a58 !important; font-size:6px !important; font-weight:700 !important; letter-spacing:.16em !important; }
.vex-search-count { color:#8360af !important; font-size:6px !important; letter-spacing:.08em !important; }
.vex-search-results { display:flex !important; flex-direction:column !important; gap:5px !important; max-height:390px !important; overflow-y:auto !important; scrollbar-width:thin !important; scrollbar-color:rgba(155,92,255,.17) transparent !important; }
.vex-search-result { position:relative !important; display:flex !important; align-items:center !important; gap:11px !important; min-height:61px !important; padding:6px 10px 6px 6px !important; border:1px solid rgba(255,255,255,.05) !important; border-radius:11px !important; background:#0f0e14 !important; color:inherit !important; text-decoration:none !important; opacity:1 !important; visibility:visible !important; transform:translate3d(0,0,0) !important; transition:background .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease !important; }
.vex-search-result.vex-result-hidden { display:none !important; }
.vex-search-results.has-matches .vex-search-result:not(.vex-result-hidden) { animation:vexSearchResultIn .22s cubic-bezier(.2,.8,.2,1) both !important; animation-delay:var(--vex-result-delay,0ms) !important; }
@keyframes vexSearchResultIn { from { opacity:0; transform:translate3d(0,7px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
.vex-search-result:hover { background:linear-gradient(90deg,rgba(155,92,255,.06),rgba(255,255,255,.012)) !important; border-color:rgba(155,92,255,.25) !important; box-shadow:0 8px 22px rgba(0,0,0,.18) !important; transform:translate3d(2px,0,0) !important; }
.vex-search-product-image { width:45px !important; height:45px !important; flex:0 0 45px !important; display:grid !important; place-items:center !important; overflow:hidden !important; border:1px solid rgba(255,255,255,.065) !important; border-radius:9px !important; background:#08070c !important; }
.vex-search-product-image img { width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; }
.vex-search-product-image span { color:#8d62bc !important; font-size:16px !important; font-weight:800 !important; }
.vex-search-product-info { min-width:0 !important; flex:1 !important; display:flex !important; flex-direction:column !important; gap:4px !important; }
.vex-search-product-info strong { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; color:#ebe7f0 !important; font-size:12px !important; font-weight:600 !important; }
.vex-search-product-info span { color:#514b58 !important; font-size:6px !important; font-weight:600 !important; letter-spacing:.13em !important; }
.vex-search-product-price { display:flex !important; align-items:center !important; gap:8px !important; color:#d7d0df !important; font-size:10px !important; font-weight:700 !important; }
.vex-search-product-price svg { width:13px !important; height:13px !important; color:#955bdd !important; transition:transform .14s ease !important; }
.vex-search-result:hover .vex-search-product-price svg { transform:translateX(3px) !important; }

.vex-search-empty { min-height:115px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-direction:column !important; gap:6px !important; text-align:center !important; }
.vex-search-empty[hidden] { display:none !important; }
.vex-search-empty-symbol { position:relative !important; width:31px !important; height:31px !important; border:1px solid rgba(155,92,255,.16) !important; border-radius:50% !important; }
.vex-search-empty-symbol::before,.vex-search-empty-symbol::after { content:"" !important; position:absolute !important; left:7px !important; right:7px !important; top:14px !important; height:1px !important; background:#7a5b98 !important; transform:rotate(45deg) !important; }
.vex-search-empty-symbol::after { transform:rotate(-45deg) !important; }
.vex-search-empty strong { color:#aaa3b2 !important; font-size:9px !important; letter-spacing:.08em !important; }
.vex-search-empty span { color:#57515f !important; font-size:8px !important; }
.vex-search-bottom-line { height:1px !important; margin:0 9% !important; background:linear-gradient(90deg,transparent,rgba(155,92,255,.18),transparent) !important; }

@media (max-width:640px) {
  .vex-search-stage { padding:58px 7px 10px !important; }
  .vex-search-console { width:calc(100vw - 14px) !important; max-height:calc(100dvh - 70px) !important; border-radius:15px !important; }
  .vex-search-corner-tl { border-top-left-radius:15px; }
  .vex-search-corner-tr { border-top-right-radius:15px; }
  .vex-search-corner-bl { border-bottom-left-radius:15px; }
  .vex-search-corner-br { border-bottom-right-radius:15px; }
  .vex-search-top { min-height:56px !important; padding:0 13px !important; }
  .vex-search-platform,.vex-search-desktop-hint { display:none !important; }
  .vex-search-input-area { padding:9px !important; }
  .vex-search-input-wrap { height:50px !important; }
  .vex-search-content { padding:0 9px 9px !important; }
  .vex-search-idle { min-height:72px !important; }
  .vex-search-results { max-height:calc(100dvh - 185px) !important; }
  .vex-search-result { min-height:57px !important; }
  .vex-search-product-image { width:42px !important; height:42px !important; flex-basis:42px !important; }
  .vex-search-product-info strong { font-size:11px !important; }
  .vex-search-product-price { font-size:9px !important; }
  .vex-search-product-price svg { width:12px !important; height:12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vex-search-stage,.vex-search-console,.vex-search-result,.vex-search-idle-orbit,.vex-idle-ring,.vex-search-scan { animation:none !important; transition:none !important; }
}

/* =========================================================
   6b. VEXDROP SEARCH FX — Spotlight, Ping, Chips, Trigger
   ========================================================= */

/* --- Console: 3D tilt-in on open --- */
.vex-search-stage { perspective: 1200px !important; }
.vex-search-console { transform: rotateX(4deg) translate3d(0,-14px,0) scale(.972) !important; }
.vex-search-stage.is-visible .vex-search-console { transform: rotateX(0) translate3d(0,0,0) scale(1) !important; }

/* --- Ambient glow top + live cursor spotlight + scanlines --- */
.vex-search-console-glow {
  position:absolute !important; left:0 !important; right:0 !important; top:-40% !important; height:80% !important;
  background:radial-gradient(ellipse 55% 50% at 50% 50%, rgba(139,92,246,.10), transparent 70%) !important;
  pointer-events:none !important; z-index:0 !important;
  animation:vexSearchAmbient 7s ease-in-out infinite !important;
}
@keyframes vexSearchAmbient { 0%,100% { opacity:.7; transform:translateX(-4%); } 50% { opacity:1; transform:translateX(4%); } }

.vex-search-console-glow2 {
  position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
  background:radial-gradient(260px circle at var(--vex-mx,50%) var(--vex-my,20%), rgba(170,125,255,.085), transparent 70%) !important;
  opacity:0 !important; transition:opacity .3s ease !important;
}
.vex-search-console.vex-spotlight-active .vex-search-console-glow2 { opacity:1 !important; }

.vex-search-console-scan {
  position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px) !important;
}

/* --- Ping wave when the console opens --- */
.vex-search-ping {
  position:absolute !important; left:50% !important; top:0 !important; width:10px !important; height:10px !important;
  border:1px solid rgba(177,132,255,.5) !important; border-radius:50% !important;
  transform:translate(-50%,-50%) scale(0) !important; opacity:0 !important;
  pointer-events:none !important; z-index:2 !important;
}
.vex-search-stage.is-visible .vex-search-ping { animation:vexSearchPing .8s cubic-bezier(.2,.7,.3,1) .06s both !important; }
@keyframes vexSearchPing {
  0% { transform:translate(-50%,-50%) scale(0); opacity:.9; }
  100% { transform:translate(-50%,-50%) scale(70); opacity:0; }
}

/* --- Top border light travels across --- */
.vex-search-console::before { animation:vexSearchTopLight 4.5s ease-in-out infinite !important; }
@keyframes vexSearchTopLight { 0%,100% { left:-20%; width:40%; opacity:.4; } 50% { left:80%; width:40%; opacity:1; } }

/* --- Brand mark: rotating inner ring --- */
.vex-search-mark { position:relative !important; }
.vex-search-mark::after {
  content:"" !important; position:absolute !important; inset:6px !important; border-radius:50% !important;
  border:1px solid transparent !important; border-top-color:rgba(190,150,255,.7) !important;
  animation:vexSpinClockwise 2.4s linear infinite !important;
}

/* --- Input: keystroke pulse + icon reaction --- */
.vex-search-input-wrap.vex-key-pulse { animation:vexKeyPulse .24s ease !important; }
@keyframes vexKeyPulse {
  0%,100% { box-shadow:0 0 0 3px rgba(155,92,255,.045), 0 0 26px rgba(118,59,214,.06); }
  45% { box-shadow:0 0 0 4px rgba(155,92,255,.12), 0 0 40px rgba(118,59,214,.16); }
}
.vex-search-icon { transition:transform .2s cubic-bezier(.3,1.4,.4,1), color .2s ease !important; }
.vex-search-input-wrap:focus-within .vex-search-icon { color:#b98bff !important; transform:rotate(-12deg) scale(1.08) !important; }
.vex-search-input-wrap.vex-key-pulse .vex-search-icon { transform:rotate(-12deg) scale(1.2) !important; }

/* --- Idle: stacked layout + trending chips --- */
.vex-search-idle { flex-direction:column !important; gap:14px !important; padding:10px 0 6px !important; min-height:auto !important; }
.vex-search-idle-top { display:flex !important; align-items:center !important; justify-content:center !important; gap:14px !important; }
.vex-search-idle-copy strong { display:inline-block !important; transition:opacity .18s ease, transform .18s ease !important; }

.vex-search-trending {
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important;
  gap:6px !important; max-width:560px !important; margin:0 auto !important;
}
.vex-search-trending-label {
  color:#4f4957 !important; font-size:7px !important; font-weight:700 !important; letter-spacing:.18em !important; margin-right:4px !important;
}
.vex-trend-chip {
  position:relative !important; overflow:hidden !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  height:28px !important; padding:0 11px 0 9px !important; margin:0 !important;
  border:1px solid rgba(255,255,255,.07) !important; border-radius:999px !important;
  background:rgba(255,255,255,.02) !important; color:#9d95a8 !important;
  font-size:10.5px !important; font-weight:600 !important; line-height:1 !important; white-space:nowrap !important;
  cursor:pointer !important;
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease !important;
  animation:vexChipIn .38s cubic-bezier(.18,.8,.2,1) both !important;
  animation-delay:calc(var(--vex-chip-delay, 0ms) + 120ms) !important;
}
.vex-trend-chip svg {
  display:block !important; width:11px !important; height:11px !important; flex:0 0 11px !important;
  color:#7a58ab !important; transition:transform .3s ease, color .15s ease !important;
}
.vex-trend-chip::after {
  content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:-40% !important; width:30% !important;
  background:linear-gradient(90deg, transparent, rgba(200,170,255,.18), transparent) !important;
  transform:skewX(-20deg) translateX(-100%) !important; pointer-events:none !important;
}
.vex-trend-chip:hover {
  color:#fff !important; border-color:rgba(160,110,255,.45) !important; background:rgba(139,92,246,.10) !important;
  transform:translateY(-2px) !important; box-shadow:0 6px 18px rgba(88,40,170,.18) !important;
}
.vex-trend-chip:hover svg { color:#c39bff !important; transform:rotate(90deg) scale(1.1) !important; }
.vex-trend-chip:hover::after { animation:vexChipSweep .7s ease both !important; }
.vex-trend-chip:active { transform:translateY(0) scale(.96) !important; }
@keyframes vexChipIn { from { opacity:0; transform:translateY(6px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes vexChipSweep { to { transform:skewX(-20deg) translateX(500%); } }

/* --- Result count pop --- */
.vex-search-count { display:inline-block !important; }
.vex-search-count.vex-pop { animation:vexCountPop .34s cubic-bezier(.3,1.5,.4,1) !important; }
@keyframes vexCountPop { 40% { transform:scale(1.35); color:#d4bdff; } }

/* --- Results: accent bar, sweep, 3D entrance --- */
.vex-search-result { overflow:hidden !important; }
.vex-search-result::after {
  content:"" !important; position:absolute !important; left:0 !important; top:18% !important; bottom:18% !important; width:2px !important;
  border-radius:2px !important; background:linear-gradient(180deg,#c29cff,#7c3aed) !important;
  box-shadow:0 0 10px rgba(155,92,255,.7) !important; transform:scaleY(0) !important;
  transition:transform .2s cubic-bezier(.2,.8,.2,1) !important; pointer-events:none !important;
}
.vex-search-result::before {
  content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:-40% !important; width:25% !important;
  background:linear-gradient(90deg, transparent, rgba(190,150,255,.07), transparent) !important;
  transform:skewX(-18deg) translateX(-100%) !important; pointer-events:none !important;
}
.vex-search-result:hover::after { transform:scaleY(1) !important; }
.vex-search-result:hover::before { animation:vexChipSweep .8s ease both !important; }
.vex-search-product-image img { transition:transform .3s ease !important; }
.vex-search-result:hover .vex-search-product-image img { transform:scale(1.08) !important; }
.vex-search-results.has-matches .vex-search-result:not(.vex-result-hidden) {
  animation:vexSearchResultIn3d .34s cubic-bezier(.18,.8,.2,1) both !important;
  animation-delay:var(--vex-result-delay,0ms) !important;
}
@keyframes vexSearchResultIn3d {
  from { opacity:0; transform:perspective(600px) rotateX(-8deg) translate3d(0,10px,0); }
  to { opacity:1; transform:perspective(600px) rotateX(0) translate3d(0,0,0); }
}

/* --- Empty state shake --- */
.vex-search-empty:not([hidden]) .vex-search-empty-symbol { animation:vexEmptyShake .45s ease both !important; }
@keyframes vexEmptyShake { 20%,60% { transform:translateX(-4px); } 40%,80% { transform:translateX(4px); } }

/* --- Navbar trigger: breathing ring --- */
.vex-search-trigger-ring {
  position:absolute !important; inset:-4px !important; border-radius:15px !important; pointer-events:none !important;
  border:1px solid rgba(168,85,247,0) !important; animation:vexTriggerBreathe 3.2s ease-in-out infinite !important;
}
@keyframes vexTriggerBreathe {
  0%,100% { border-color:rgba(168,85,247,0); transform:scale(.96); }
  50% { border-color:rgba(168,85,247,.35); transform:scale(1); box-shadow:0 0 16px rgba(139,92,246,.2); }
}
header .vex-search-trigger--icon svg { transition:transform .3s cubic-bezier(.3,1.4,.4,1) !important; }
header .vex-search-trigger--icon:hover svg { transform:rotate(-14deg) scale(1.12) !important; }
.vex-search-trigger-sweep, .vex-search-trigger-kbd { pointer-events:none !important; }
.vex-search-trigger-kbd {
  display:inline-flex !important; align-items:center !important; height:18px !important; padding:0 5px !important;
  border-radius:5px !important; border:1px solid rgba(255,255,255,.1) !important; background:rgba(255,255,255,.04) !important;
  color:#716a7b !important; font-size:9px !important; font-weight:700 !important; font-family:inherit !important;
}

@media (max-width:640px) {
  .vex-search-trending { gap:5px !important; }
  .vex-trend-chip { height:26px !important; font-size:10px !important; }
  .vex-trend-chip:nth-of-type(n+5) { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vex-search-console-glow, .vex-search-ping, .vex-search-console::before, .vex-search-mark::after,
  .vex-trend-chip, .vex-search-trigger-ring, .vex-search-count, .vex-search-empty-symbol,
  .vex-search-results.has-matches .vex-search-result:not(.vex-result-hidden) { animation:none !important; }
  .vex-search-console-glow2 { display:none !important; }
}

/* =========================================================
   6c. SEARCH V25 — Hover, Close, No-Signal, Brand
   ========================================================= */

/* ---------- Results: no horizontal scroll ever ---------- */
.vex-search-results { overflow-x:hidden !important; padding:2px !important; margin:-2px !important; }

/* ---------- Result hover: cursor spotlight + gradient border ---------- */
.vex-search-result {
  isolation:isolate !important;
  transform:none !important;
  transition:border-color .2s ease, background .2s ease, box-shadow .25s ease !important;
}
.vex-search-result:hover,
.vex-search-result.is-active {
  transform:none !important;
  border-color:rgba(160,110,255,.38) !important;
  background:
    radial-gradient(180px circle at var(--rx,30%) var(--ry,50%), rgba(155,92,255,.16), transparent 70%),
    linear-gradient(90deg, rgba(155,92,255,.07), rgba(255,255,255,.012)) !important;
  box-shadow:0 0 0 1px rgba(155,92,255,.10), 0 10px 30px rgba(40,10,90,.35), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
/* animated light running along the top edge */
.vex-search-result::before {
  content:"" !important; position:absolute !important; top:0 !important; left:0 !important; right:auto !important; bottom:auto !important;
  width:40% !important; height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(220,195,255,.95), transparent) !important;
  box-shadow:0 0 10px rgba(170,120,255,.8) !important;
  transform:translateX(-110%) !important; opacity:0 !important; animation:none !important;
}
.vex-search-result:hover::before,
.vex-search-result.is-active::before { opacity:1 !important; animation:vexRowEdgeRun 1.4s cubic-bezier(.4,0,.2,1) infinite !important; }
@keyframes vexRowEdgeRun { from { transform:translateX(-110%); } to { transform:translateX(260%); } }

/* left accent bar */
.vex-search-result::after { top:16% !important; bottom:16% !important; }
.vex-search-result.is-active::after { transform:scaleY(1) !important; }

/* image: glow + zoom */
.vex-search-product-image { transition:border-color .2s ease, box-shadow .25s ease !important; }
.vex-search-result:hover .vex-search-product-image,
.vex-search-result.is-active .vex-search-product-image {
  border-color:rgba(170,120,255,.45) !important;
  box-shadow:0 0 18px rgba(139,92,246,.35) !important;
}
.vex-search-result:hover .vex-search-product-image img { transform:scale(1.1) rotate(-1.5deg) !important; }

/* name slides a bit, label lights up */
.vex-search-product-info strong { transition:transform .25s cubic-bezier(.2,.8,.2,1), color .2s ease !important; }
.vex-search-product-info span { transition:color .2s ease, letter-spacing .3s ease !important; }
.vex-search-result:hover .vex-search-product-info strong,
.vex-search-result.is-active .vex-search-product-info strong { transform:translateX(3px) !important; color:#fff !important; }
.vex-search-result:hover .vex-search-product-info span,
.vex-search-result.is-active .vex-search-product-info span { color:#9d78d6 !important; letter-spacing:.18em !important; }

/* arrow becomes a glowing round "go" button */
.vex-search-product-price svg {
  box-sizing:content-box !important; width:12px !important; height:12px !important; padding:6px !important;
  border-radius:50% !important; border:1px solid rgba(255,255,255,.07) !important; background:rgba(255,255,255,.02) !important;
  transition:transform .25s cubic-bezier(.3,1.4,.4,1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.vex-search-result:hover .vex-search-product-price svg,
.vex-search-result.is-active .vex-search-product-price svg {
  transform:translateX(0) rotate(-45deg) !important; color:#fff !important;
  background:linear-gradient(135deg,#9b5cff,#6d28d9) !important; border-color:rgba(220,200,255,.4) !important;
  box-shadow:0 0 16px rgba(139,92,246,.6) !important;
}
.vex-search-result.is-launch { animation:vexRowLaunch .35s ease both !important; }
@keyframes vexRowLaunch { 50% { transform:scale(.985); } 100% { transform:scale(1); box-shadow:0 0 40px rgba(155,92,255,.5); } }

/* ---------- Close (X) + clear button ---------- */
.vex-search-close, .vex-search-clear { position:relative !important; overflow:hidden !important; isolation:isolate !important; }
.vex-search-close::before, .vex-search-clear::before {
  content:"" !important; position:absolute !important; inset:-60% !important; z-index:-1 !important;
  background:conic-gradient(from 0deg, transparent 0 60%, rgba(190,150,255,.9) 80%, transparent 100%) !important;
  opacity:0 !important; transition:opacity .2s ease !important;
}
.vex-search-close::after, .vex-search-clear::after {
  content:"" !important; position:absolute !important; inset:1px !important; z-index:-1 !important;
  border-radius:inherit !important; background:#120f1b !important;
}
.vex-search-close svg, .vex-search-clear svg { transition:transform .35s cubic-bezier(.3,1.5,.4,1), color .2s ease !important; }
.vex-search-close:hover, .vex-search-clear:hover {
  transform:none !important; color:#fff !important; border-color:transparent !important;
  box-shadow:0 0 18px rgba(139,92,246,.45) !important;
}
.vex-search-close:hover::before, .vex-search-clear:hover::before { opacity:1 !important; animation:vexSpinClockwise 1.2s linear infinite !important; }
.vex-search-close:hover svg, .vex-search-clear:hover svg { transform:rotate(90deg) scale(1.15) !important; }
.vex-search-close:active svg, .vex-search-clear:active svg { transform:rotate(180deg) scale(.8) !important; }

/* ---------- Brand mark top-left: orbit + ring + shine ---------- */
.vex-search-mark { overflow:visible !important; }
.vex-search-mark::after { display:none !important; }
.vex-mark-ring {
  position:absolute !important; inset:-3px !important; border-radius:11px !important; pointer-events:none !important;
  background:conic-gradient(from var(--vex-a,0deg), transparent 0 70%, rgba(200,160,255,.95) 88%, transparent) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important; mask-composite:exclude !important; padding:1px !important;
  animation:vexMarkRing 2.6s linear infinite !important;
}
@property --vex-a { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes vexMarkRing { to { --vex-a:360deg; } }
.vex-mark-orbit {
  position:absolute !important; inset:5px !important; border-radius:50% !important;
  border:1px dashed rgba(177,132,255,.35) !important; animation:vexSpinClockwise 4s linear infinite !important;
}
.vex-mark-orbit b {
  position:absolute !important; top:-2.5px !important; left:50% !important; width:4px !important; height:4px !important; margin-left:-2px !important;
  border-radius:50% !important; background:#e3d2ff !important; box-shadow:0 0 8px #b98bff !important;
}
.vex-search-mark span { position:relative !important; z-index:2 !important; animation:vexMarkCore 1.8s ease-in-out infinite !important; }
@keyframes vexMarkCore { 0%,100% { transform:scale(.8); box-shadow:0 0 8px rgba(170,120,255,.6); } 50% { transform:scale(1.25); box-shadow:0 0 18px rgba(200,160,255,1); } }

.vex-brand-shine {
  background:linear-gradient(100deg, #eeeaf4 0%, #eeeaf4 40%, #c9a6ff 50%, #eeeaf4 60%, #eeeaf4 100%) !important;
  background-size:250% 100% !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; animation:vexBrandShine 3.4s ease-in-out infinite !important;
}
@keyframes vexBrandShine { 0% { background-position:100% 0; } 60%,100% { background-position:-50% 0; } }
.vex-brand-sub { display:inline-flex !important; align-items:center !important; gap:3px !important; }
.vex-caret { display:inline-block !important; width:4px !important; height:6px !important; background:#9b6dff !important; animation:vexCaret 1s steps(1) infinite !important; }
@keyframes vexCaret { 50% { opacity:0; } }

/* ---------- No results: "NO SIGNAL" radar + glitch ---------- */
.vex-search-empty { gap:8px !important; padding:18px 0 14px !important; min-height:auto !important; }
.vex-search-empty-symbol { display:none !important; }
.vex-nf-radar {
  position:relative !important; width:64px !important; height:64px !important; display:grid !important; place-items:center !important;
  color:#c9a8ff !important; margin-bottom:6px !important;
}
.vex-nf-radar svg { position:relative !important; z-index:3 !important; width:22px !important; height:22px !important; animation:vexNfIcon 2.4s ease-in-out infinite !important; }
@keyframes vexNfIcon { 0%,100% { transform:rotate(0); } 20% { transform:rotate(-12deg); } 40% { transform:rotate(10deg); } 60% { transform:rotate(0); } }
.vex-nf-ring { position:absolute !important; border-radius:50% !important; border:1px solid rgba(155,92,255,.22) !important; }
.vex-nf-ring.r1 { inset:0 !important; }
.vex-nf-ring.r2 { inset:12px !important; border-style:dashed !important; animation:vexSpinCounter 6s linear infinite !important; }
.vex-nf-sweep {
  position:absolute !important; inset:0 !important; border-radius:50% !important;
  background:conic-gradient(from 0deg, rgba(170,120,255,.45), transparent 70deg) !important;
  animation:vexSpinClockwise 2s linear infinite !important;
}
.vex-nf-blip {
  position:absolute !important; top:9px !important; right:12px !important; width:5px !important; height:5px !important; border-radius:50% !important;
  background:#ff7a9a !important; box-shadow:0 0 10px #ff4d7a !important; animation:vexNfBlip 2s ease-out infinite !important;
}
@keyframes vexNfBlip { 0%,40% { opacity:0; transform:scale(.4); } 50% { opacity:1; transform:scale(1.2); } 100% { opacity:0; transform:scale(.8); } }
.vex-search-empty:not([hidden]) .vex-nf-radar { animation:vexNfIn .5s cubic-bezier(.3,1.4,.4,1) both !important; }
@keyframes vexNfIn { from { opacity:0; transform:scale(.6) rotate(-30deg); } to { opacity:1; transform:scale(1) rotate(0); } }

.vex-nf-title {
  position:relative !important; color:#ece6f5 !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.3em !important;
  animation:vexNfGlitch 2.8s steps(1) infinite !important;
}
@keyframes vexNfGlitch {
  0%,86%,100% { text-shadow:none; transform:none; }
  88% { text-shadow:-2px 0 #ff4d7a, 2px 0 #7c9cff; transform:translateX(1px); }
  90% { text-shadow:2px 0 #ff4d7a, -2px 0 #7c9cff; transform:translateX(-1px) skewX(-8deg); }
  92% { text-shadow:-1px 0 #ff4d7a, 1px 0 #7c9cff; transform:none; }
}
.vex-nf-desc { color:#5e5767 !important; font-size:9px !important; max-width:300px !important; line-height:1.5 !important; }
.vex-nf-desc b { color:#b38cff !important; font-weight:700 !important; }
.vex-nf-reset {
  display:inline-flex !important; align-items:center !important; gap:6px !important; height:28px !important; padding:0 12px !important; margin-top:6px !important;
  border:1px solid rgba(155,92,255,.22) !important; border-radius:999px !important; background:rgba(155,92,255,.05) !important;
  color:#b89be0 !important; font-size:8px !important; font-weight:700 !important; letter-spacing:.14em !important; cursor:pointer !important;
  transition:all .2s ease !important;
}
.vex-nf-reset svg { width:11px !important; height:11px !important; transition:transform .5s cubic-bezier(.3,1.3,.4,1) !important; }
.vex-nf-reset:hover { color:#fff !important; border-color:rgba(180,140,255,.55) !important; background:rgba(155,92,255,.14) !important; box-shadow:0 0 18px rgba(139,92,246,.3) !important; }
.vex-nf-reset:hover svg { transform:rotate(-360deg) !important; }

@media (prefers-reduced-motion: reduce) {
  .vex-mark-ring, .vex-mark-orbit, .vex-search-mark span, .vex-brand-shine, .vex-caret,
  .vex-nf-radar, .vex-nf-radar svg, .vex-nf-ring, .vex-nf-sweep, .vex-nf-blip, .vex-nf-title,
  .vex-search-result::before { animation:none !important; }
}

/* =========================================================
   7. CYBERPUNK 404 ERROR PAGE
   ========================================================= */
.vex-404-active,
.vex-error-card {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 60px auto !important;
  padding: 44px 32px !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(16, 13, 26, 0.98) 0%, rgba(7, 6, 13, 1) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.95), 0 0 70px rgba(139, 92, 246, 0.35) !important;
  text-align: center !important;
}

/* =========================================================
   8. VEXDROP CART V4 — HYPERDRIVE DRAWER
   States are wrapped in plain divs → Alpine x-show always wins.
   ========================================================= */

.vex-cart-modal-root {
  position:fixed !important; inset:0 !important; z-index:9999999 !important;
  display:flex; justify-content:flex-end !important; align-items:stretch !important;
}
.vex-cart-modal-root[style*="display: none"] { display:none !important; }
.vex-cart-root-enter,.vex-cart-root-leave { transition:opacity .28s ease !important; }
.vex-cart-root-enter-start,.vex-cart-root-leave-end { opacity:0 !important; }
.vex-cart-root-enter-end,.vex-cart-root-leave-start { opacity:1 !important; }

.vex-cart-backdrop-shield {
  position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important; padding:0 !important; margin:0 !important;
  background:radial-gradient(800px 600px at 85% 50%, rgba(139,92,246,.12), transparent 60%), rgba(2,2,7,.8) !important;
  cursor:pointer !important; box-shadow:none !important; border-radius:0 !important;
}

.vex-cart-drawer-box {
  position:relative !important; z-index:2 !important; width:min(460px,100vw) !important; height:100dvh !important;
  display:flex !important; flex-direction:column !important; overflow:hidden !important; isolation:isolate !important;
  background:linear-gradient(180deg,#0f0c17 0%,#09080e 50%,#07060b 100%) !important;
  border-left:1px solid rgba(255,255,255,.06) !important;
  box-shadow:-40px 0 120px rgba(0,0,0,.7) !important;
}
.vex-cart-drawer-enter { transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .3s ease !important; }
.vex-cart-drawer-leave { transition:transform .3s cubic-bezier(.7,0,.84,0), opacity .25s ease !important; }
.vex-cart-drawer-enter-start,.vex-cart-drawer-leave-end { transform:translate3d(100%,0,0) skewY(-1.5deg) !important; opacity:0 !important; }
.vex-cart-drawer-enter-end,.vex-cart-drawer-leave-start { transform:translate3d(0,0,0) skewY(0) !important; opacity:1 !important; }

/* ---------- ambient layers ---------- */
.vxc-aura {
  position:absolute !important; top:-160px !important; right:-120px !important; width:420px !important; height:420px !important; z-index:-1 !important;
  border-radius:50% !important; background:radial-gradient(circle, rgba(139,92,246,.22), transparent 65%) !important;
  filter:blur(20px) !important; pointer-events:none !important; animation:vxcAura 9s ease-in-out infinite !important;
}
@keyframes vxcAura { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-60px,80px) scale(1.15); } }
.vxc-grid {
  position:absolute !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; opacity:.5 !important;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) !important;
  background-size:32px 32px !important;
  -webkit-mask-image:radial-gradient(ellipse 90% 45% at 80% 0%, #000 20%, transparent 75%) !important;
  mask-image:radial-gradient(ellipse 90% 45% at 80% 0%, #000 20%, transparent 75%) !important;
  animation:vxcGrid 20s linear infinite !important;
}
@keyframes vxcGrid { to { background-position:0 32px, 32px 0; } }
.vxc-edge {
  position:absolute !important; top:0 !important; bottom:0 !important; left:0 !important; width:1px !important; z-index:5 !important; pointer-events:none !important;
  background:linear-gradient(180deg, transparent, rgba(180,130,255,.9), transparent) !important; background-size:100% 40% !important; background-repeat:no-repeat !important;
  box-shadow:0 0 14px rgba(139,92,246,.5) !important; animation:vxcEdge 3.5s ease-in-out infinite !important;
}
@keyframes vxcEdge { 0% { background-position:0 -40%; } 100% { background-position:0 140%; } }
.vxc-laser { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:1px !important; overflow:hidden !important; z-index:5 !important; pointer-events:none !important; }
.vxc-laser i { position:absolute !important; left:-30% !important; width:30% !important; height:1px !important; background:linear-gradient(90deg,transparent,#fff,#c4b5fd,transparent) !important; box-shadow:0 0 12px rgba(139,92,246,.8) !important; animation:vxcLaser 4s cubic-bezier(.4,0,.2,1) infinite !important; }
@keyframes vxcLaser { 0% { transform:translateX(0); } 60%,100% { transform:translateX(450%); } }
.vxc-particles { position:absolute !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; overflow:hidden !important; }
.vxc-particles i { position:absolute !important; bottom:-10px !important; width:2px !important; height:2px !important; border-radius:50% !important; background:#c4a4ff !important; box-shadow:0 0 6px #a87bff !important; opacity:0 !important; animation:vxcRise 9s linear infinite !important; }
.vxc-particles i:nth-child(1) { left:12% !important; animation-delay:0s !important; }
.vxc-particles i:nth-child(2) { left:32% !important; animation-delay:-2.5s !important; animation-duration:11s !important; }
.vxc-particles i:nth-child(3) { left:51% !important; animation-delay:-5s !important; }
.vxc-particles i:nth-child(4) { left:68% !important; animation-delay:-1.2s !important; animation-duration:12s !important; }
.vxc-particles i:nth-child(5) { left:84% !important; animation-delay:-7s !important; }
.vxc-particles i:nth-child(6) { left:93% !important; animation-delay:-3.8s !important; animation-duration:10s !important; }
@keyframes vxcRise { 0% { transform:translateY(0); opacity:0; } 10% { opacity:.8; } 90% { opacity:.4; } 100% { transform:translateY(-105dvh); opacity:0; } }

/* ---------- header ---------- */
.vxc-head { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; min-height:78px !important; padding:0 20px !important; border-bottom:1px solid rgba(255,255,255,.05) !important; animation:vxcDrop .5s .08s cubic-bezier(.16,1,.3,1) both !important; }
@keyframes vxcDrop { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.vxc-brand { display:flex !important; align-items:center !important; gap:12px !important; min-width:0 !important; }
.vxc-emblem { position:relative !important; width:38px !important; height:38px !important; flex:0 0 38px !important; display:grid !important; place-items:center !important; border-radius:11px !important; background:linear-gradient(145deg,rgba(155,92,255,.16),rgba(255,255,255,.02)) !important; color:#c9a6ff !important; }
.vxc-emblem svg { position:relative !important; z-index:2 !important; width:16px !important; height:16px !important; animation:vxcBag 3s ease-in-out infinite !important; }
@keyframes vxcBag { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
.vxc-emblem-ring {
  position:absolute !important; inset:0 !important; border-radius:inherit !important; padding:1px !important;
  background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.15) 0 65%, #d9c2ff 85%, rgba(155,92,255,.15)) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite:xor !important; mask-composite:exclude !important;
  animation:vxcSpinA 2.8s linear infinite !important;
}
@property --vxc-a { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes vxcSpinA { to { --vxc-a:360deg; } }
.vxc-emblem-orbit { position:absolute !important; inset:-6px !important; border-radius:50% !important; animation:vexSpinClockwise 5s linear infinite !important; pointer-events:none !important; }
.vxc-emblem-orbit b { position:absolute !important; top:0 !important; left:50% !important; width:4px !important; height:4px !important; margin-left:-2px !important; border-radius:50% !important; background:#e6d6ff !important; box-shadow:0 0 8px #b07cff !important; }
.vxc-brand-copy { display:flex !important; flex-direction:column !important; gap:5px !important; min-width:0 !important; }
.vxc-kicker { display:inline-flex !important; align-items:center !important; gap:4px !important; color:#5f5869 !important; font-size:7px !important; font-weight:700 !important; letter-spacing:.2em !important; }
.vxc-kicker i { color:#8a63c9 !important; font-style:normal !important; }
.vxc-caret { display:inline-block !important; width:4px !important; height:7px !important; background:#9b6dff !important; animation:vexCaret 1s steps(1) infinite !important; }
.vxc-brand-copy h2 { display:flex !important; align-items:center !important; gap:8px !important; margin:0 !important; line-height:1 !important; }
.vxc-title {
  font-size:14px !important; font-weight:800 !important; letter-spacing:.14em !important;
  background:linear-gradient(100deg,#f1ecf8 0 40%,#c9a6ff 50%,#f1ecf8 60% 100%) !important; background-size:250% 100% !important;
  -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important;
  animation:vexBrandShine 3.8s ease-in-out infinite !important;
}
.vxc-count { display:inline-grid !important; place-items:center !important; min-width:20px !important; height:20px !important; padding:0 6px !important; border-radius:999px !important; background:linear-gradient(135deg,#9b5cff,#6d28d9) !important; color:#fff !important; font-size:10px !important; font-weight:800 !important; box-shadow:0 0 14px rgba(139,92,246,.6) !important; }
.is-bump { animation:vxcBump .45s cubic-bezier(.3,1.6,.4,1) !important; }
@keyframes vxcBump { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:scale(1); } }
.vxc-head-actions { display:flex !important; align-items:center !important; gap:12px !important; }
.vxc-secure { display:inline-flex !important; align-items:center !important; gap:6px !important; color:#6d6377 !important; font-size:7px !important; font-weight:700 !important; letter-spacing:.18em !important; }
.vxc-secure i { position:relative !important; width:6px !important; height:6px !important; border-radius:50% !important; background:#4ade80 !important; box-shadow:0 0 8px #4ade80 !important; }
.vxc-secure i::after { content:"" !important; position:absolute !important; inset:0 !important; border-radius:50% !important; background:#4ade80 !important; animation:vxcPing 1.8s ease-out infinite !important; }
@keyframes vxcPing { from { transform:scale(1); opacity:.7; } to { transform:scale(3); opacity:0; } }

/* close button: spinning conic border + X rotates */
.vxc-close { position:relative !important; overflow:hidden !important; isolation:isolate !important; width:34px !important; height:34px !important; display:grid !important; place-items:center !important; padding:0 !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:10px !important; background:rgba(255,255,255,.02) !important; color:#7a7282 !important; cursor:pointer !important; transition:color .2s ease, box-shadow .2s ease, border-color .2s ease !important; }
.vxc-close::before { content:"" !important; position:absolute !important; inset:-60% !important; z-index:-2 !important; background:conic-gradient(transparent 0 60%, #c9a6ff 80%, transparent) !important; opacity:0 !important; transition:opacity .2s ease !important; }
.vxc-close::after { content:"" !important; position:absolute !important; inset:1px !important; z-index:-1 !important; border-radius:9px !important; background:#120f1b !important; }
.vxc-close svg { width:14px !important; height:14px !important; transition:transform .4s cubic-bezier(.3,1.5,.4,1) !important; }
.vxc-close:hover { color:#fff !important; border-color:transparent !important; box-shadow:0 0 18px rgba(139,92,246,.45) !important; }
.vxc-close:hover::before { opacity:1 !important; animation:vexSpinClockwise 1.2s linear infinite !important; }
.vxc-close:hover svg { transform:rotate(90deg) scale(1.15) !important; }
.vxc-close:active svg { transform:rotate(180deg) scale(.8) !important; }

/* ---------- pipeline ---------- */
.vxc-pipeline { display:flex !important; align-items:center !important; gap:8px !important; padding:12px 20px !important; border-bottom:1px solid rgba(255,255,255,.04) !important; animation:vxcDrop .5s .14s cubic-bezier(.16,1,.3,1) both !important; }
.vxc-step { display:flex !important; align-items:center !important; gap:6px !important; flex-shrink:0 !important; color:#4a4452 !important; font-size:7px !important; font-weight:700 !important; letter-spacing:.14em !important; }
.vxc-step i { display:grid !important; place-items:center !important; width:18px !important; height:18px !important; border-radius:6px !important; border:1px solid rgba(255,255,255,.07) !important; font-style:normal !important; font-size:7px !important; }
.vxc-step.is-on { color:#d9c7ff !important; }
.vxc-step.is-on i { border-color:rgba(170,120,255,.55) !important; background:rgba(155,92,255,.18) !important; box-shadow:0 0 12px rgba(139,92,246,.45) !important; color:#fff !important; }
.vxc-link { position:relative !important; flex:1 !important; height:1px !important; background:rgba(255,255,255,.07) !important; overflow:hidden !important; }
.vxc-link b { position:absolute !important; top:0 !important; left:-40% !important; width:40% !important; height:1px !important; background:linear-gradient(90deg,transparent,#b98bff,transparent) !important; animation:vxcFlow 2.2s linear infinite !important; }
.vxc-link:nth-of-type(4) b { animation-delay:1.1s !important; }
@keyframes vxcFlow { to { left:100%; } }

/* ---------- body ---------- */
.vxc-body { position:relative !important; flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain !important; padding:16px !important; scrollbar-width:thin !important; scrollbar-color:rgba(155,92,255,.2) transparent !important; }
.vxc-body::-webkit-scrollbar { width:5px !important; }
.vxc-body::-webkit-scrollbar-thumb { background:rgba(155,92,255,.22) !important; border-radius:99px !important; }

/* skeleton */
.vxc-skeletons { display:flex !important; flex-direction:column !important; gap:10px !important; }
.vxc-skel { display:flex !important; gap:12px !important; align-items:center !important; padding:10px !important; border:1px solid rgba(255,255,255,.04) !important; border-radius:14px !important; }
.vxc-skel > i { width:54px !important; height:54px !important; border-radius:11px !important; }
.vxc-skel > div { flex:1 !important; display:flex !important; flex-direction:column !important; gap:7px !important; }
.vxc-skel b { display:block !important; height:7px !important; border-radius:4px !important; }
.vxc-skel b:nth-child(1) { width:30% !important; } .vxc-skel b:nth-child(2) { width:75% !important; height:9px !important; } .vxc-skel b:nth-child(3) { width:45% !important; }
.vxc-skel > i, .vxc-skel b { background:linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(155,92,255,.12) 50%,rgba(255,255,255,.03) 100%) !important; background-size:200% 100% !important; animation:vxcShimmer 1.3s linear infinite !important; }
@keyframes vxcShimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* shared state layout */
.vxc-state { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; min-height:calc(100dvh - 240px) !important; padding:20px 10px !important; }
.vxc-state p { margin:10px 0 20px !important; max-width:260px !important; color:#6a6373 !important; font-size:11px !important; line-height:1.6 !important; }

/* empty: void portal */
.vxc-void { position:relative !important; width:130px !important; height:130px !important; display:grid !important; place-items:center !important; margin-bottom:22px !important; animation:vxcPop .7s .15s cubic-bezier(.3,1.4,.4,1) both !important; }
@keyframes vxcPop { from { opacity:0; transform:scale(.5) rotate(-40deg); } to { opacity:1; transform:none; } }
.vxc-void-ring { position:absolute !important; border-radius:50% !important; border:1px solid rgba(155,92,255,.2) !important; }
.vxc-void-ring.r1 { inset:0 !important; border-style:dashed !important; animation:vexSpinClockwise 22s linear infinite !important; }
.vxc-void-ring.r2 { inset:18px !important; border-color:transparent !important; border-top-color:rgba(200,160,255,.8) !important; border-right-color:rgba(155,92,255,.3) !important; animation:vexSpinCounter 3.2s linear infinite !important; }
.vxc-void-ring.r3 { inset:34px !important; background:radial-gradient(circle,rgba(139,92,246,.25),transparent 70%) !important; border-color:rgba(155,92,255,.3) !important; animation:vxcBreathe 3s ease-in-out infinite !important; }
@keyframes vxcBreathe { 0%,100% { transform:scale(.92); box-shadow:0 0 0 rgba(139,92,246,0); } 50% { transform:scale(1.05); box-shadow:0 0 30px rgba(139,92,246,.35); } }
.vxc-void-dot { position:absolute !important; inset:0 !important; border-radius:50% !important; }
.vxc-void-dot::before { content:"" !important; position:absolute !important; top:-3px !important; left:50% !important; width:6px !important; height:6px !important; margin-left:-3px !important; border-radius:50% !important; background:#e3d0ff !important; box-shadow:0 0 12px #a878ff !important; }
.vxc-void-dot.d1 { animation:vexSpinClockwise 6s linear infinite !important; }
.vxc-void-dot.d2 { inset:18px !important; animation:vexSpinClockwise 4s linear infinite reverse !important; }
.vxc-void-dot.d2::before { width:4px !important; height:4px !important; margin-left:-2px !important; top:-2px !important; }
.vxc-void-dot.d3 { animation:vexSpinClockwise 9s linear infinite !important; animation-delay:-4s !important; }
.vxc-void-dot.d3::before { background:#7c5cff !important; width:4px !important; height:4px !important; }
.vxc-void-core { position:relative !important; z-index:2 !important; color:#d4bdff !important; animation:vxcFloat 3.2s ease-in-out infinite !important; }
.vxc-void-core svg { width:28px !important; height:28px !important; filter:drop-shadow(0 0 10px rgba(170,120,255,.7)) !important; }
@keyframes vxcFloat { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-6px) rotate(4deg); } }
.vxc-empty-title { color:#f0eaf7 !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.2em !important; animation:vxcDrop .5s .3s both !important; }
.vxc-empty p { animation:vxcDrop .5s .38s both !important; }
.vxc-empty .vxc-cta { animation:vxcDrop .5s .46s both !important; }
.vxc-perks { display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:6px !important; margin-top:26px !important; animation:vxcDrop .5s .56s both !important; }
.vxc-perks span { display:inline-flex !important; align-items:center !important; gap:5px !important; padding:5px 9px !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:999px !important; color:#6f6879 !important; font-size:9px !important; font-weight:600 !important; }
.vxc-perks i { color:#a57cf0 !important; font-style:normal !important; font-size:9px !important; }

/* error */
.vxc-error-core { position:relative !important; width:70px !important; height:70px !important; display:grid !important; place-items:center !important; margin-bottom:16px !important; color:#ff8fa8 !important; }
.vxc-error-core i { position:absolute !important; inset:0 !important; border-radius:50% !important; border:1px solid rgba(255,90,130,.35) !important; animation:vxcPing 2s ease-out infinite !important; }
.vxc-error-core i + i { animation-delay:1s !important; }
.vxc-error-core svg { width:26px !important; height:26px !important; filter:drop-shadow(0 0 10px rgba(255,80,120,.6)) !important; }
.vxc-glitch { color:#f4e9ef !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.24em !important; animation:vexNfGlitch 2.6s steps(1) infinite !important; }
.vxc-ghost-btn { display:inline-flex !important; align-items:center !important; gap:7px !important; height:34px !important; padding:0 16px !important; border:1px solid rgba(155,92,255,.3) !important; border-radius:999px !important; background:rgba(155,92,255,.06) !important; color:#cdb6f5 !important; font-size:9px !important; font-weight:700 !important; letter-spacing:.16em !important; cursor:pointer !important; transition:all .2s ease !important; }
.vxc-ghost-btn svg { width:12px !important; height:12px !important; transition:transform .6s cubic-bezier(.3,1.3,.4,1) !important; }
.vxc-ghost-btn:hover { color:#fff !important; background:rgba(155,92,255,.16) !important; box-shadow:0 0 20px rgba(139,92,246,.35) !important; }
.vxc-ghost-btn:hover svg { transform:rotate(360deg) !important; }

/* server messages */
.vxc-messages { display:flex !important; flex-direction:column !important; gap:6px !important; margin-bottom:10px !important; }
.vxc-message { margin:0 !important; padding:9px 12px !important; border:1px solid rgba(217,119,6,.25) !important; border-radius:10px !important; background:rgba(217,119,6,.06) !important; color:#e7b670 !important; font-size:10px !important; }

/* ---------- item cards ---------- */
.vxc-items { display:flex !important; flex-direction:column !important; gap:10px !important; }
.vxc-card {
  position:relative !important; display:grid !important; grid-template-columns:56px minmax(0,1fr) auto !important; align-items:center !important; gap:12px !important;
  padding:10px 12px 10px 10px !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:14px !important; overflow:hidden !important; isolation:isolate !important;
  background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(155,92,255,.02)) !important;
  transition:border-color .2s ease, box-shadow .25s ease, background .2s ease !important;
  animation:vxcCardIn .5s cubic-bezier(.16,1,.3,1) both !important; animation-delay:calc(var(--i,0) * 70ms + 180ms) !important;
}
@keyframes vxcCardIn { from { opacity:0; transform:translateX(40px) scale(.97); } to { opacity:1; transform:none; } }
.vxc-card::before { content:"" !important; position:absolute !important; left:0 !important; top:18% !important; bottom:18% !important; width:2px !important; border-radius:2px !important; background:linear-gradient(180deg,#d0b0ff,#7c3aed) !important; box-shadow:0 0 10px rgba(155,92,255,.8) !important; transform:scaleY(0) !important; transition:transform .25s cubic-bezier(.2,.8,.2,1) !important; }
.vxc-card::after { content:"" !important; position:absolute !important; top:0 !important; left:0 !important; width:35% !important; height:1px !important; background:linear-gradient(90deg,transparent,#e2cfff,transparent) !important; opacity:0 !important; transform:translateX(-110%) !important; }
.vxc-card:hover { border-color:rgba(160,110,255,.35) !important; background:linear-gradient(135deg,rgba(155,92,255,.08),rgba(255,255,255,.015)) !important; box-shadow:0 12px 30px rgba(30,8,70,.45), inset 0 1px 0 rgba(255,255,255,.04) !important; }
.vxc-card:hover::before { transform:scaleY(1) !important; }
.vxc-card:hover::after { opacity:1 !important; animation:vexRowEdgeRun 1.4s cubic-bezier(.4,0,.2,1) infinite !important; }
.vxc-card-index { position:absolute !important; right:10px !important; top:7px !important; color:rgba(255,255,255,.07) !important; font-size:18px !important; font-weight:800 !important; letter-spacing:-.04em !important; pointer-events:none !important; transition:color .2s ease !important; z-index:-1 !important; }
.vxc-card:hover .vxc-card-index { color:rgba(155,92,255,.18) !important; }
.vxc-thumb { position:relative !important; width:56px !important; height:56px !important; overflow:hidden !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important; background:#09080d !important; transition:border-color .2s ease, box-shadow .25s ease !important; }
.vxc-thumb img { width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; transition:transform .4s cubic-bezier(.2,.8,.2,1) !important; }
.vxc-card:hover .vxc-thumb { border-color:rgba(170,120,255,.5) !important; box-shadow:0 0 18px rgba(139,92,246,.35) !important; }
.vxc-card:hover .vxc-thumb img { transform:scale(1.1) rotate(-2deg) !important; }
.vxc-thumb-fallback { width:100% !important; height:100% !important; display:grid !important; place-items:center !important; color:#9b6dd8 !important; font-size:18px !important; font-weight:800 !important; background:radial-gradient(circle,rgba(155,92,255,.14),transparent 72%) !important; }
.vxc-card-main { min-width:0 !important; display:flex !important; flex-direction:column !important; gap:3px !important; }
.vxc-card-name { overflow:hidden !important; color:#ece6f2 !important; font-size:12.5px !important; font-weight:700 !important; line-height:1.3 !important; text-overflow:ellipsis !important; white-space:nowrap !important; transition:color .2s ease !important; }
.vxc-card-name:hover { color:#cfb2ff !important; }
.vxc-card-variant { overflow:hidden !important; color:#6d6577 !important; font-size:10px !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
.vxc-addons { display:flex !important; flex-wrap:wrap !important; gap:4px !important; }
.vxc-addons span { padding:2px 6px !important; border-radius:999px !important; background:rgba(155,92,255,.08) !important; color:#a48cc4 !important; font-size:8.5px !important; }
.vxc-card-ctrl { display:flex !important; align-items:center !important; gap:7px !important; margin-top:6px !important; }
.vxc-qty { display:inline-flex !important; align-items:center !important; height:27px !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:8px !important; background:rgba(0,0,0,.25) !important; overflow:hidden !important; }
.vxc-qty button { width:26px !important; height:100% !important; display:grid !important; place-items:center !important; padding:0 !important; border:0 !important; background:transparent !important; color:#8f7ba8 !important; font-size:13px !important; cursor:pointer !important; transition:background .15s ease, color .15s ease !important; }
.vxc-qty button:hover { color:#fff !important; background:rgba(155,92,255,.22) !important; }
.vxc-qty button:active { background:rgba(155,92,255,.4) !important; }
.vxc-qty span { display:inline-block !important; min-width:24px !important; text-align:center !important; color:#f0eaf6 !important; font-size:11px !important; font-weight:700 !important; }
.vxc-remove { width:27px !important; height:27px !important; display:grid !important; place-items:center !important; padding:0 !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:8px !important; background:transparent !important; color:#6a6272 !important; cursor:pointer !important; transition:all .18s ease !important; }
.vxc-remove svg { width:13px !important; height:13px !important; overflow:visible !important; }
.vxc-remove .vxc-lid { transform-origin:4px 7px !important; transition:transform .25s cubic-bezier(.3,1.5,.4,1) !important; }
.vxc-remove:hover { color:#ff8fa8 !important; border-color:rgba(255,90,130,.35) !important; background:rgba(255,90,130,.08) !important; box-shadow:0 0 14px rgba(255,80,120,.25) !important; }
.vxc-remove:hover .vxc-lid { transform:rotate(-22deg) translateY(-1px) !important; }
.vxc-card-price { display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:3px !important; align-self:end !important; padding-bottom:2px !important; }
.vxc-card-price strong { color:#f3eef8 !important; font-size:13px !important; font-weight:800 !important; }
.vxc-card-price s { color:#5b5463 !important; font-size:9px !important; }
.vxc-card-price small { color:#6a6373 !important; font-size:8.5px !important; }

/* ---------- footer ---------- */
.vxc-foot-wrap { flex:0 0 auto !important; }
.vxc-foot { position:relative !important; padding:16px 18px 16px !important; border-top:1px solid rgba(255,255,255,.06) !important; background:linear-gradient(180deg,rgba(15,12,23,.9),#0a0910) !important; animation:vxcRiseIn .55s .2s cubic-bezier(.16,1,.3,1) both !important; }
.vxc-foot::before { content:"" !important; position:absolute !important; top:-1px !important; left:15% !important; right:15% !important; height:1px !important; background:linear-gradient(90deg,transparent,rgba(170,120,255,.7),transparent) !important; }
@keyframes vxcRiseIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.vxc-rows { display:flex !important; flex-direction:column !important; gap:6px !important; }
.vxc-row { display:flex !important; align-items:center !important; justify-content:space-between !important; color:#6d6578 !important; font-size:9px !important; font-weight:700 !important; letter-spacing:.14em !important; }
.vxc-row span:last-child { color:#b3aabd !important; letter-spacing:.02em !important; font-size:11px !important; }
.vxc-row.is-save span:last-child { color:#4ade80 !important; }
.vxc-row.is-total { margin-top:4px !important; padding-top:10px !important; border-top:1px dashed rgba(255,255,255,.07) !important; color:#a898bb !important; }
.vxc-row.is-total strong { display:inline-block !important; font-size:22px !important; font-weight:800 !important; letter-spacing:-.02em !important; background:linear-gradient(100deg,#fff 0 40%,#d6bbff 50%,#fff 60% 100%) !important; background-size:250% 100% !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; animation:vexBrandShine 4s ease-in-out infinite !important; }
.vxc-row.is-total strong.is-bump { animation:vxcBump .45s cubic-bezier(.3,1.6,.4,1), vexBrandShine 4s ease-in-out infinite !important; }
.vxc-foot-error { margin:10px 0 0 !important; color:#ff8fa8 !important; font-size:10px !important; }

/* CTA (checkout + explore) */
.vxc-cta {
  position:relative !important; width:100% !important; min-height:52px !important; margin-top:14px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
  overflow:hidden !important; isolation:isolate !important; border:1px solid rgba(215,190,255,.35) !important; border-radius:13px !important;
  background:linear-gradient(135deg,#a36bff 0%,#7c3aed 50%,#5b21b6 100%) !important; background-size:200% 200% !important;
  color:#fff !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.16em !important; text-decoration:none !important; cursor:pointer !important;
  box-shadow:0 12px 32px rgba(109,40,217,.35), inset 0 1px 0 rgba(255,255,255,.22) !important;
  animation:vxcGradient 5s ease infinite !important; transition:transform .2s cubic-bezier(.3,1.4,.4,1), box-shadow .2s ease !important;
}
@keyframes vxcGradient { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
.vxc-cta::before { content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:-40% !important; width:25% !important; z-index:-1 !important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent) !important; transform:skewX(-20deg) !important; animation:vxcSweep 3.4s ease-in-out infinite !important; }
@keyframes vxcSweep { 0%,30% { left:-40%; } 60%,100% { left:130%; } }
.vxc-cta-glow { position:absolute !important; inset:-2px !important; z-index:-2 !important; border-radius:inherit !important; background:conic-gradient(from var(--vxc-a,0deg),#7c3aed,#e0c8ff,#7c3aed,#4c1d95,#7c3aed) !important; filter:blur(8px) !important; opacity:.0 !important; transition:opacity .25s ease !important; animation:vxcSpinA 3s linear infinite !important; }
.vxc-cta:hover { transform:translateY(-2px) scale(1.01) !important; box-shadow:0 18px 44px rgba(109,40,217,.55), 0 0 30px rgba(155,92,255,.4), inset 0 1px 0 rgba(255,255,255,.25) !important; }
.vxc-cta:hover .vxc-cta-glow { opacity:.55 !important; }
.vxc-cta:active { transform:translateY(0) scale(.98) !important; }
.vxc-cta svg { width:15px !important; height:15px !important; flex-shrink:0 !important; }
.vxc-cta .vxc-arrow { transition:transform .25s cubic-bezier(.3,1.5,.4,1) !important; }
.vxc-cta:hover .vxc-arrow { transform:translateX(5px) !important; }
.vxc-cta:hover .vxc-lock { animation:vxcLock .5s ease !important; }
@keyframes vxcLock { 30% { transform:rotate(-12deg); } 60% { transform:rotate(10deg); } }
.vxc-cta.is-loading { cursor:wait !important; opacity:.85 !important; }
.vxc-cta.is-loading .vxc-arrow { animation:vxcLoadArrow .8s ease-in-out infinite !important; }
@keyframes vxcLoadArrow { 50% { transform:translateX(6px); opacity:.3; } }
.vxc-cta--small { width:auto !important; min-height:42px !important; padding:0 20px !important; margin-top:0 !important; font-size:10px !important; border-radius:11px !important; }

.vxc-foot-links { display:flex !important; justify-content:space-between !important; margin-top:12px !important; }
.vxc-foot-links a, .vxc-foot-links button { padding:0 !important; border:0 !important; background:none !important; color:#6f6779 !important; font-size:8.5px !important; font-weight:700 !important; letter-spacing:.14em !important; text-decoration:none !important; cursor:pointer !important; transition:color .15s ease, letter-spacing .25s ease !important; }
.vxc-foot-links a:hover, .vxc-foot-links button:hover { color:#cdb2ff !important; letter-spacing:.18em !important; }
.vxc-trust { display:flex !important; justify-content:space-between !important; gap:6px !important; margin-top:14px !important; padding-top:12px !important; border-top:1px solid rgba(255,255,255,.04) !important; }
.vxc-trust span { display:inline-flex !important; align-items:center !important; gap:6px !important; color:#554e5d !important; font-size:7.5px !important; font-weight:700 !important; letter-spacing:.14em !important; }
.vxc-trust i { width:5px !important; height:5px !important; border-radius:50% !important; background:#9b6dff !important; box-shadow:0 0 8px #9b6dff !important; animation:vxcBlink 2.4s ease-in-out infinite !important; }
.vxc-trust i.t2 { animation-delay:.8s !important; } .vxc-trust i.t3 { animation-delay:1.6s !important; }
@keyframes vxcBlink { 0%,100% { opacity:.3; transform:scale(.8); } 50% { opacity:1; transform:scale(1.2); } }

@media (max-width:640px) {
  .vex-cart-drawer-box { width:100vw !important; border-left:0 !important; }
  .vxc-head { min-height:68px !important; padding:0 14px !important; }
  .vxc-secure { display:none !important; }
  .vxc-pipeline { padding:10px 14px !important; }
  .vxc-step span { display:none !important; }
  .vxc-body { padding:12px !important; }
  .vxc-foot { padding:14px 12px !important; }
  .vxc-card { grid-template-columns:48px minmax(0,1fr) auto !important; gap:10px !important; }
  .vxc-thumb { width:48px !important; height:48px !important; }
  .vxc-trust span:nth-child(3) { display:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vex-cart-drawer-box *, .vex-cart-drawer-box *::before, .vex-cart-drawer-box *::after { animation:none !important; }
}


/* =========================================================
   10. VEXDROP PAGES — Products, Product, FAQ, Reviews,
       Status, Cart page, Legal, Blog, Customer, Footer
   Scoped to every page except the custom homepage.
   ========================================================= */
body:not(.sa-tpl-shop) {
  --vx-card: linear-gradient(160deg, rgba(22,17,34,.72) 0%, rgba(12,10,19,.82) 55%, rgba(9,8,14,.9) 100%);
  --vx-line: rgba(255,255,255,.07);
  --vx-glow: rgba(139,92,246,.35);
}

/* ---------- ambient page backdrop ---------- */
body:not(.sa-tpl-shop)::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 20%,transparent 75%);
  animation:vxcGrid 30s linear infinite;
}
body:not(.sa-tpl-shop)::after {
  content:""; position:fixed; top:-220px; left:50%; width:900px; height:520px; margin-left:-450px; z-index:0; pointer-events:none;
  border-radius:50%; background:radial-gradient(ellipse, rgba(124,58,237,.16), transparent 65%); filter:blur(30px);
  animation:vxnGlow 14s ease-in-out infinite;
}

/* ---------- breadcrumbs ---------- */
.sa-breadcrumbs { padding-top:22px !important; margin-bottom:-6px !important; }
.sa-breadcrumbs ol {
  display:inline-flex !important; padding:7px 14px !important; border:1px solid var(--vx-line) !important; border-radius:999px !important;
  background:rgba(255,255,255,.025) !important; font-size:12px !important; animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both;
}
.sa-breadcrumbs a { color:#8a8196 !important; transition:color .2s ease, text-shadow .2s ease !important; }
.sa-breadcrumbs a:hover { color:#fff !important; text-shadow:0 0 12px rgba(185,140,255,.8) !important; }
.sa-breadcrumbs [aria-current] { color:#d9c7ff !important; }
.sa-breadcrumbs svg { color:#6d4fa0 !important; }

@keyframes vxpFadeUp { from { opacity:0; transform:translateY(14px); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }

/* ---------- page headers ---------- */
body:not(.sa-tpl-shop) .sa-section-header { position:relative; }
body:not(.sa-tpl-shop) .sa-section-eyebrow {
  display:inline-flex !important; align-items:center; gap:8px; padding:6px 14px 6px 12px !important; margin-bottom:16px !important;
  border:1px solid rgba(155,92,255,.28) !important; border-radius:999px !important; background:rgba(139,92,246,.08) !important;
  color:#cdb4ff !important; font-size:10.5px !important; font-weight:800 !important; letter-spacing:.2em !important; text-transform:uppercase;
  animation:vxpFadeUp .6s .05s cubic-bezier(.16,1,.3,1) both;
}
body:not(.sa-tpl-shop) .sa-section-eyebrow::before {
  content:""; width:6px; height:6px; border-radius:50%; background:#b98bff; box-shadow:0 0 10px #a878ff; animation:vxnBadge 2s ease-in-out infinite;
}
body:not(.sa-tpl-shop) .sa-section-eyebrow > span { display:none; }
body:not(.sa-tpl-shop) .sa-section-title {
  font-weight:800 !important; letter-spacing:-.035em !important; line-height:1.05 !important;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,#c9a6ff 50%,#fff 62%,#fff 100%); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:vxpFadeUp .7s .12s cubic-bezier(.16,1,.3,1) both, vexBrandShine 6s 1s ease-in-out infinite;
}
body:not(.sa-tpl-shop) .sa-section-title .mk { -webkit-text-fill-color:#b98bff; }
body:not(.sa-tpl-shop) .sa-section-header.text-center .sa-section-title::after,
body:not(.sa-tpl-shop) .sa-section-header.mx-auto .sa-section-title::after {
  content:""; display:block; width:64px; height:3px; margin:18px auto 0; border-radius:3px;
  background:linear-gradient(90deg,transparent,#a878ff,transparent); box-shadow:0 0 14px rgba(155,92,255,.8);
  animation:vxpBar 1s .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes vxpBar { from { width:0; opacity:0; } to { width:64px; opacity:1; } }
body:not(.sa-tpl-shop) .sa-section-subtitle { color:#8a8296 !important; font-size:15px; animation:vxpFadeUp .7s .2s cubic-bezier(.16,1,.3,1) both; }

/* ---------- generic cards & inputs on inner pages ---------- */
body:not(.sa-tpl-shop) .rounded-card.border.border-theme.bg-surface {
  background:var(--vx-card) !important; border-color:var(--vx-line) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body:not(.sa-tpl-shop) .input, body:not(.sa-tpl-shop) .\!input, body:not(.sa-tpl-shop) .input-stepper {
  background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.09) !important; border-radius:12px !important;
  transition:border-color .2s ease, box-shadow .25s ease, background .2s ease !important;
}
body:not(.sa-tpl-shop) .input { height:42px; }
body:not(.sa-tpl-shop) .input:focus, body:not(.sa-tpl-shop) .input-stepper:focus-within {
  border-color:rgba(170,120,255,.6) !important; background:rgba(139,92,246,.06) !important; box-shadow:0 0 0 4px rgba(139,92,246,.12), 0 0 22px rgba(109,40,217,.18) !important;
}
body:not(.sa-tpl-shop) .input-stepper > button:hover { background:rgba(139,92,246,.2) !important; color:#fff !important; }

/* generic accent buttons → VEXDROP gradient */
body:not(.sa-tpl-shop) button.bg-accent-500, body:not(.sa-tpl-shop) a.bg-accent-500, .vxp-cta {
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,#a36bff 0%,#7c3aed 50%,#5b21b6 100%) !important; background-size:200% 200% !important;
  border:1px solid rgba(215,190,255,.3) !important; color:#fff !important; font-weight:700 !important;
  box-shadow:0 10px 28px rgba(109,40,217,.32), inset 0 1px 0 rgba(255,255,255,.2) !important;
  animation:vxcGradient 6s ease infinite;
  transition:transform .25s cubic-bezier(.3,1.4,.4,1), box-shadow .25s ease !important;
}
body:not(.sa-tpl-shop) button.bg-accent-500::after, body:not(.sa-tpl-shop) a.bg-accent-500::after, .vxp-cta::after {
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:25%; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent); transform:skewX(-20deg);
  animation:vxcSweep 3.8s ease-in-out infinite;
}
body:not(.sa-tpl-shop) button.bg-accent-500:hover:not(:disabled), body:not(.sa-tpl-shop) a.bg-accent-500:hover, .vxp-cta:hover:not(:disabled) {
  transform:translateY(-2px); box-shadow:0 16px 40px rgba(109,40,217,.5), 0 0 26px rgba(155,92,255,.35), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
body:not(.sa-tpl-shop) button.bg-accent-500:active:not(:disabled) { transform:scale(.97); }

/* ---------- reveal on scroll (JS adds .vx-r / .vx-in) ---------- */
.vx-r { opacity:0; transform:translateY(28px) scale(.98); filter:blur(4px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--vx-d,0ms), transform .7s cubic-bezier(.16,1,.3,1) var(--vx-d,0ms), filter .7s ease var(--vx-d,0ms), box-shadow .3s ease, border-color .3s ease, background .3s ease; }
.vx-r.vx-in { opacity:1; transform:none; filter:none; }
.vx-r.vx-in[data-vx-tilt] { transition:opacity .7s ease, filter .7s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }

/* =========================================================
   PRODUCT CARDS
   ========================================================= */
.sa-product-card:not(.vx-card) {
  position:relative !important; isolation:isolate; transform-style:preserve-3d; will-change:transform;
  background:var(--vx-card, #100d18) !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:18px !important;
  box-shadow:0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.sa-product-card:not(.vx-card)::before {
  content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.1) 0 55%, #e2cfff 75%, rgba(155,92,255,.1) 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:vxcSpinA 3s linear infinite;
}
.sa-product-card:not(.vx-card)::after {
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,30%), rgba(160,110,255,.16), transparent 65%);
}
.sa-product-card:not(.vx-card):hover { border-color:transparent !important; box-shadow:0 28px 70px rgba(20,6,50,.55), 0 0 40px rgba(139,92,246,.18) !important; }
.sa-product-card:not(.vx-card):hover::before, .sa-product-card:not(.vx-card):hover::after { opacity:1; }
.sa-product-card:not(.vx-card) .sa-product-card-media { border-color:rgba(255,255,255,.06) !important; }
.sa-product-card:not(.vx-card) .sa-product-card-media img { transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease !important; }
.sa-product-card:not(.vx-card):hover .sa-product-card-media img { transform:scale(1.08) !important; filter:saturate(1.15) brightness(1.05); }
.sa-product-card-media::after {
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); transform:skewX(-20deg);
}
.sa-product-card:not(.vx-card):hover .sa-product-card-media::after { animation:vxpShine .9s cubic-bezier(.4,0,.2,1) both; }
@keyframes vxpShine { to { left:130%; } }
.sa-product-card-media::before {
  content:""; position:absolute; inset:auto 0 0 0; height:50%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(10,8,16,.7), transparent);
}
.sa-product-card-title { color:#f2edf8 !important; font-weight:700 !important; transition:color .25s ease; }
.sa-product-card:not(.vx-card):hover .sa-product-card-title { color:#fff !important; text-shadow:0 0 18px rgba(185,140,255,.5); }
.sa-product-card:not(.vx-card) .border-t.border-theme { border-color:rgba(255,255,255,.06) !important; }
.sa-product-card-price {
  font-weight:800 !important; background:linear-gradient(135deg,#e6d7ff,#a878ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sa-product-card-stock .text-success { position:relative; padding-left:12px; }
.sa-product-card-stock .text-success::before {
  content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80;
  animation:vxnBadge 2s ease-in-out infinite;
}
.sa-product-card-stock .text-success svg { display:none; }
.sa-product-card:not(.vx-card) .rounded-badge { backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(0,0,0,.35); }

/* =========================================================
   PRODUCTS PAGE — filters, count, pagination
   ========================================================= */
.sa-page-products aside .rounded-card { border-radius:18px !important; padding:14px !important; }
.sa-page-products-link { position:relative; transition:all .2s ease !important; }
.sa-page-products-link:hover { transform:translateX(3px); }
.sa-page-products-link[aria-current] { background:linear-gradient(90deg, rgba(139,92,246,.2), rgba(139,92,246,.04)) !important; color:#e6d7ff !important; box-shadow:inset 2px 0 0 #a878ff; }
.sa-page-products aside p.uppercase, .sa-page-products aside label.uppercase { color:#6f6380 !important; letter-spacing:.18em !important; font-size:10px !important; }
.sa-page-products-items { perspective:1400px; }

.vx-pagination a, .vx-pagination span.relative {
  min-width:40px; justify-content:center; height:40px; border-color:rgba(255,255,255,.08) !important; background:rgba(255,255,255,.025) !important;
  transition:all .2s ease !important;
}
.vx-pagination a:hover { background:rgba(139,92,246,.18) !important; color:#fff !important; border-color:rgba(170,120,255,.5) !important; }
.vx-pagination [aria-current] { background:linear-gradient(135deg,#9b5cff,#6d28d9) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 0 18px rgba(139,92,246,.5); }

/* =========================================================
   PRODUCT PAGE
   ========================================================= */
.sa-page-product-title:not(.vx-drop-title) {
  font-weight:800 !important; letter-spacing:-.03em !important;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,#c9a6ff 50%,#fff 62%,#fff 100%); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:vxpFadeUp .7s cubic-bezier(.16,1,.3,1) both, vexBrandShine 6s 1s ease-in-out infinite;
}
.sa-page-product .status { align-self:flex-start; width:fit-content; padding:6px 12px 6px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.03); }

/* gallery */
.sa-product-gallery.splide.main, .sa-product-gallery--single, .sa-product-gallery--empty {
  border-radius:20px !important; overflow:hidden; border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 50px rgba(109,40,217,.12) !important;
}
.sa-page-product [data-dsr] > .sa-product-gallery, .sa-page-product .sa-product-gallery { animation:vxpGalleryIn .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes vxpGalleryIn { from { transform:perspective(1200px) rotateY(6deg) translateX(-20px) scale(.97); filter:blur(6px); } to { transform:none; filter:none; } }
.sa-product-gallery img { transition:transform .8s cubic-bezier(.16,1,.3,1) !important; }
.sa-product-gallery.splide.main:hover img, .sa-product-gallery--single:hover { transform:scale(1.03); }
.splide.thumbnails .splide__slide { border-radius:12px !important; overflow:hidden; border:1px solid rgba(255,255,255,.08) !important; opacity:.5; transition:opacity .25s ease, border-color .25s ease, box-shadow .25s ease !important; }
.splide.thumbnails .splide__slide.is-active { opacity:1; border-color:rgba(170,120,255,.7) !important; box-shadow:0 0 18px rgba(139,92,246,.45); }
.sa-page-product .splide__arrow { width:40px !important; height:40px !important; border-radius:12px !important; background:rgba(12,10,19,.75) !important; border:1px solid rgba(170,120,255,.3) !important; backdrop-filter:blur(8px); opacity:.85; transition:all .2s ease !important; }
.sa-page-product .splide__arrow:hover { background:rgba(139,92,246,.35) !important; opacity:1; box-shadow:0 0 18px rgba(139,92,246,.5); }
.sa-page-product .splide__arrow svg { fill:#fff !important; }

/* buy box */
.vxp-buybox {
  position:relative; isolation:isolate; overflow:hidden; border-radius:22px !important; padding:24px !important;
  animation:vxpBoxIn .8s .1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes vxpBoxIn { from { transform:translateY(24px) scale(.98); filter:blur(6px); } to { transform:none; filter:none; } }
.vxp-buybox::before {
  content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.1) 0 55%, rgba(226,207,255,.85) 75%, rgba(155,92,255,.1) 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:vxcSpinA 6s linear infinite;
}
.vxp-buybox::after {
  content:""; position:absolute; top:-120px; right:-80px; width:300px; height:260px; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse, rgba(139,92,246,.22), transparent 65%); filter:blur(16px); animation:vxcAura 10s ease-in-out infinite;
}
.vxp-pricebar { border-color:rgba(255,255,255,.07) !important; }
.sa-page-product-price {
  font-size:34px !important; font-weight:800 !important; letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(155,92,255,.35));
}
.vxp-pricebar .text-success { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.25); }

/* variants */
.vxp-variant { position:relative; overflow:hidden; border-radius:12px !important; transition:all .25s cubic-bezier(.3,1.3,.4,1) !important; }
.vxp-variant:hover { transform:translateY(-2px); border-color:rgba(170,120,255,.55) !important; box-shadow:0 8px 22px rgba(60,20,130,.3); }
.vxp-variant.bg-accent-500, .vxp-variant.border-accent-500 {
  background:linear-gradient(135deg, rgba(155,92,255,.3), rgba(109,40,217,.18)) !important; border-color:rgba(200,160,255,.75) !important; color:#fff !important;
  box-shadow:0 0 0 3px rgba(139,92,246,.15), 0 0 22px rgba(139,92,246,.35) !important;
}
.vxp-variant.bg-accent-500::after, .vxp-variant.border-accent-500::after {
  content:""; position:absolute; top:0; bottom:0; left:-50%; width:30%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transform:skewX(-20deg); animation:vxpShine 1s ease both;
}

/* add to cart / buy now */
.sa-add-to-cart {
  min-height:52px; border-radius:14px !important; letter-spacing:.04em;
}
.sa-add-to-cart.vx-pulse { animation:vxpCartPulse .6s cubic-bezier(.3,1.5,.4,1), vxcGradient 6s ease infinite; }
@keyframes vxpCartPulse { 0% { transform:scale(1); } 30% { transform:scale(.94); } 60% { transform:scale(1.04); } 100% { transform:scale(1); } }
.sa-add-to-cart svg { transition:transform .3s cubic-bezier(.3,1.4,.4,1); }
.sa-add-to-cart:hover:not(:disabled) svg { transform:translateX(3px) rotate(-10deg); }
.vxp-buynow {
  min-height:52px; border-radius:14px !important; position:relative; overflow:hidden; isolation:isolate;
  border-color:rgba(170,120,255,.4) !important; background:rgba(139,92,246,.08) !important; color:#eadcff !important; font-weight:700 !important; letter-spacing:.04em;
  transition:all .25s cubic-bezier(.3,1.3,.4,1) !important;
}
.vxp-buynow::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg, rgba(155,92,255,.35), rgba(109,40,217,.2)); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.vxp-buynow:hover:not(:disabled) { color:#fff !important; border-color:rgba(200,160,255,.8) !important; box-shadow:0 0 26px rgba(139,92,246,.4); transform:translateY(-2px); }
.vxp-buynow:hover:not(:disabled)::before { transform:scaleX(1); }
.vxp-buynow svg { transition:transform .3s cubic-bezier(.3,1.4,.4,1); }
.vxp-buynow:hover svg { transform:translateX(4px); }

/* burst particles */
.vx-burst { position:fixed; z-index:99999999; width:0; height:0; pointer-events:none; }
.vx-burst i { position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; background:#d9c2ff; box-shadow:0 0 10px #a878ff; animation:vxBurst .8s cubic-bezier(.16,1,.3,1) forwards; }
.vx-burst i:nth-child(3n) { background:#7c3aed; width:4px; height:4px; }
.vx-burst i:nth-child(4n) { background:#fff; }
@keyframes vxBurst { 0% { transform:translate(0,0) scale(1); opacity:1; } 100% { transform:translate(var(--x),var(--y)) scale(0); opacity:0; } }

/* trust line + live stats */
.vxp-trust { gap:8px !important; }
.vxp-trust > span { padding:6px 11px; border:1px solid rgba(255,255,255,.07); border-radius:999px; background:rgba(255,255,255,.025); color:#9a90a8; transition:all .2s ease; }
.vxp-trust > span:hover { border-color:rgba(170,120,255,.4); color:#e6d7ff; }
.vxp-live { border-radius:16px !important; }
.vxp-live svg { animation:vxnBadge 2s ease-in-out infinite; border-radius:50%; }
.vxp-live .font-semibold { color:#e6d7ff !important; }

/* tabs */
.vxp-tabs { gap:6px !important; padding:5px; border:1px solid rgba(255,255,255,.07) !important; border-radius:14px; background:rgba(255,255,255,.02); width:fit-content; max-width:100%; }
.vxp-tab { margin:0 !important; border:0 !important; border-radius:10px; color:#8f86a0 !important; transition:all .25s ease !important; }
.vxp-tab:hover { color:#fff !important; background:rgba(255,255,255,.04); }
.vxp-tab.border-accent-500 { color:#fff !important; background:linear-gradient(135deg, rgba(155,92,255,.3), rgba(109,40,217,.18)); box-shadow:inset 0 0 0 1px rgba(190,150,255,.45), 0 0 18px rgba(139,92,246,.3); }
.sa-page-product .editor { animation:vxpFadeUp .5s cubic-bezier(.16,1,.3,1) both; }

/* accordions (product + FAQ) */
.vxp-acc > button, .sa-page-faq-item:not(.vx-kb-item) > button { transition:color .2s ease, background .2s ease !important; }
.vxp-acc > button:hover, .sa-page-faq-item:not(.vx-kb-item) > button:hover { background:rgba(139,92,246,.06); }

/* =========================================================
   RICH TEXT (descriptions, legal, blog)
   ========================================================= */
body:not(.sa-tpl-shop) .editor { color:#cfc7da !important; line-height:1.75; }
body:not(.sa-tpl-shop) .editor h1, body:not(.sa-tpl-shop) .editor h2, body:not(.sa-tpl-shop) .editor h3,
body:not(.sa-tpl-shop) .editor .e-heading-h1, body:not(.sa-tpl-shop) .editor .e-heading-h2, body:not(.sa-tpl-shop) .editor .e-heading-h3 {
  color:#fff !important; font-weight:800; letter-spacing:-.02em; margin-top:1.4em; margin-bottom:.5em; padding-left:14px; position:relative;
}
body:not(.sa-tpl-shop) .editor h2::before, body:not(.sa-tpl-shop) .editor .e-heading-h2::before,
body:not(.sa-tpl-shop) .editor h3::before, body:not(.sa-tpl-shop) .editor .e-heading-h3::before {
  content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:3px; border-radius:3px; background:linear-gradient(180deg,#c9a6ff,#7c3aed); box-shadow:0 0 10px rgba(155,92,255,.7);
}
body:not(.sa-tpl-shop) .editor a, body:not(.sa-tpl-shop) .editor .e-link { color:#c9a6ff !important; text-decoration:none !important; background:linear-gradient(#a878ff,#a878ff) 0 100%/0 1px no-repeat; transition:background-size .3s ease, color .2s ease; }
body:not(.sa-tpl-shop) .editor a:hover { color:#fff !important; background-size:100% 1px; }
body:not(.sa-tpl-shop) .editor strong, body:not(.sa-tpl-shop) .editor .e-text-bold { color:#fff; }
body:not(.sa-tpl-shop) .editor ul { list-style:disc; padding-left:1.3em; }
body:not(.sa-tpl-shop) .editor ol { list-style:decimal; padding-left:1.3em; }
body:not(.sa-tpl-shop) .editor ul li::marker, body:not(.sa-tpl-shop) .editor ol li::marker { color:#a878ff; }
body:not(.sa-tpl-shop) .editor .e-quote, body:not(.sa-tpl-shop) .editor blockquote { border-left:3px solid #8b5cf6 !important; padding:10px 16px !important; border-radius:0 12px 12px 0; background:rgba(139,92,246,.07); color:#e0d6ee; }
body:not(.sa-tpl-shop) .editor .e-hr, body:not(.sa-tpl-shop) .editor hr { background:linear-gradient(90deg,transparent,rgba(155,92,255,.5),transparent) !important; height:1px !important; }
body:not(.sa-tpl-shop) .editor code, body:not(.sa-tpl-shop) .editor .e-text-code { background:rgba(139,92,246,.14) !important; color:#e6d7ff; border-radius:6px; }

/* =========================================================
   FAQ PAGE
   ========================================================= */
.sa-page-faq-items { counter-reset:vxfaq; }
.sa-page-faq-item:not(.vx-kb-item) {
  position:relative; border-radius:16px !important; transition:border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1) !important;
}
.sa-page-faq-item:not(.vx-kb-item) > button { gap:14px !important; padding:18px 20px !important; font-size:15px; font-weight:700 !important; color:#ece6f5 !important; }
.sa-page-faq-item:not(.vx-kb-item) > button::before {
  counter-increment:vxfaq; content:counter(vxfaq, decimal-leading-zero);
  flex-shrink:0; display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  border:1px solid rgba(155,92,255,.25); background:rgba(139,92,246,.08); color:#a88bd8; font-size:11px; font-weight:800; letter-spacing:.04em;
  transition:all .3s ease;
}
.sa-page-faq-item:not(.vx-kb-item) > button { justify-content:flex-start !important; }
.sa-page-faq-item:not(.vx-kb-item) > button > svg { margin-left:auto; width:30px !important; height:30px !important; padding:7px; border-radius:50%; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#b89be0 !important; transition:transform .45s cubic-bezier(.3,1.4,.4,1), background .3s ease, color .3s ease !important; }
.sa-page-faq-item:not(.vx-kb-item):hover { border-color:rgba(170,120,255,.3) !important; transform:translateX(3px); }
.sa-page-faq-item:not(.vx-kb-item):has(.faq-panel-open) { border-color:rgba(170,120,255,.45) !important; box-shadow:0 0 0 1px rgba(139,92,246,.12), 0 18px 50px rgba(40,10,90,.35), 0 0 30px rgba(139,92,246,.12) !important; }
.sa-page-faq-item:not(.vx-kb-item):has(.faq-panel-open)::after { content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:3px; background:linear-gradient(180deg,#d0b0ff,#7c3aed); box-shadow:0 0 12px rgba(155,92,255,.9); }
.sa-page-faq-item:not(.vx-kb-item):has(.faq-panel-open) > button::before { background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; border-color:transparent; box-shadow:0 0 16px rgba(139,92,246,.55); }
.sa-page-faq-item:not(.vx-kb-item):has(.faq-panel-open) > button > svg { background:rgba(139,92,246,.25); color:#fff !important; }
.sa-page-faq-item:not(.vx-kb-item) .faq-panel-inner > div { padding-left:68px !important; padding-right:24px !important; color:#a79db4 !important; font-size:14px !important; line-height:1.7; }
.sa-page-faq-item:not(.vx-kb-item) .faq-panel-open .faq-panel-inner > div { animation:vxpFadeUp .5s cubic-bezier(.16,1,.3,1) both; }
@media (max-width:640px) { .sa-page-faq-item:not(.vx-kb-item) .faq-panel-inner > div { padding-left:20px !important; } }

/* =========================================================
   REVIEWS / FEEDBACK
   ========================================================= */
.sa-feedback-card { position:relative; isolation:isolate; border-radius:18px !important; background:var(--vx-card, #100d18) !important; border:1px solid rgba(255,255,255,.07) !important; transition:border-color .3s ease, box-shadow .3s ease !important; overflow:hidden; }
.sa-feedback-card::before { content:"\201C"; position:absolute; right:14px; top:-14px; font:800 110px/1 Georgia, serif; color:rgba(139,92,246,.1); pointer-events:none; transition:color .3s ease, transform .5s cubic-bezier(.3,1.4,.4,1); }
.sa-feedback-card:hover { border-color:rgba(170,120,255,.35) !important; box-shadow:0 22px 60px rgba(30,8,70,.45), 0 0 30px rgba(139,92,246,.15) !important; }
.sa-feedback-card:hover::before { color:rgba(170,120,255,.22); transform:translateY(6px) rotate(-6deg); }
.sa-feedback-card svg.text-warning, .sa-feedback-card svg.text-accent-500 { color:#fbbf24 !important; filter:drop-shadow(0 0 5px rgba(251,191,36,.55)); }
.sa-feedback-card:hover svg.text-warning, .sa-feedback-card:hover svg.text-accent-500 { animation:vxpStar .6s cubic-bezier(.3,1.5,.4,1) both; }
.sa-feedback-card svg:nth-child(2) { animation-delay:.05s !important; } .sa-feedback-card svg:nth-child(3) { animation-delay:.1s !important; }
.sa-feedback-card svg:nth-child(4) { animation-delay:.15s !important; } .sa-feedback-card svg:nth-child(5) { animation-delay:.2s !important; }
@keyframes vxpStar { 40% { transform:scale(1.35) rotate(15deg); } 100% { transform:none; } }

/* =========================================================
   STATUS PAGE
   ========================================================= */
.sa-status-card:not(.vx-mon-row) { position:relative; isolation:isolate; overflow:hidden; border-radius:16px !important; transition:border-color .3s ease, box-shadow .3s ease !important; }
.sa-status-card:not(.vx-mon-row)::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .3s ease; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(160,110,255,.14), transparent 65%); }
.sa-status-card:not(.vx-mon-row):hover { border-color:rgba(170,120,255,.35) !important; box-shadow:0 18px 50px rgba(30,8,70,.4) !important; }
.sa-status-card:not(.vx-mon-row):hover::after { opacity:1; }
.sa-status-card:not(.vx-mon-row) .status { padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.sa-status-card:not(.vx-mon-row) img { transition:transform .5s cubic-bezier(.3,1.3,.4,1); }
.sa-status-card:not(.vx-mon-row):hover img { transform:scale(1.08) rotate(-3deg); }

/* =========================================================
   CART PAGE
   ========================================================= */
.sa-page-cart-item:not(.vx-bay-item) { border-radius:18px !important; transition:border-color .3s ease, box-shadow .3s ease !important; }
.sa-page-cart-item:not(.vx-bay-item):hover { border-color:rgba(170,120,255,.35) !important; box-shadow:0 18px 50px rgba(30,8,70,.4) !important; }
.sa-page-cart-price { font-size:17px; font-weight:800 !important; background:linear-gradient(135deg,#fff,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vxp-summary { position:relative; isolation:isolate; overflow:hidden; border-radius:22px !important; }
.vxp-summary::before { content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.1) 0 55%, rgba(226,207,255,.8) 75%, rgba(155,92,255,.1) 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 6s linear infinite; }
.vxp-cta { min-height:52px; border-radius:14px !important; letter-spacing:.06em; }

/* =========================================================
   FOOTER
   ========================================================= */
.sa-footer {
  position:relative; isolation:isolate; overflow:hidden; z-index:1;
  border-top:1px solid rgba(255,255,255,.06) !important;
  background:linear-gradient(180deg, rgba(10,8,16,.6), #050408 70%) !important;
}
.sa-footer::before {
  content:""; position:absolute; top:-1px; left:0; width:30%; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,#c9a6ff,transparent); box-shadow:0 0 14px rgba(155,92,255,.8);
  animation:vxnLine 7s cubic-bezier(.4,0,.2,1) infinite;
}
.sa-footer::after {
  content:"VEXDROP"; position:absolute; left:50%; bottom:-.26em; transform:translateX(-50%); z-index:-1; pointer-events:none; white-space:nowrap;
  font-size:clamp(90px, 17vw, 260px); font-weight:900; letter-spacing:-.05em; line-height:1;
  background:linear-gradient(180deg, rgba(139,92,246,.14), transparent 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sa-footer h3 { color:#fff !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.sa-footer h3::before { content:""; width:5px; height:5px; border-radius:50%; background:#a878ff; box-shadow:0 0 8px #a878ff; }
.sa-footer-link { position:relative; display:inline-flex !important; align-items:center; gap:6px; width:fit-content; color:#8a8196 !important; transition:color .2s ease, transform .3s cubic-bezier(.3,1.4,.4,1) !important; }
.sa-footer-link::before { content:"→"; font-size:12px; color:#a878ff; opacity:0; width:0; overflow:hidden; transition:all .3s cubic-bezier(.3,1.4,.4,1); }
.sa-footer-link:hover { color:#fff !important; transform:translateX(2px); }
.sa-footer-link:hover::before { opacity:1; width:12px; }
.sa-footer a[aria-label] { border:1px solid rgba(255,255,255,.07); transition:all .25s cubic-bezier(.3,1.4,.4,1) !important; }
.sa-footer a[aria-label]:hover { color:#fff !important; background:rgba(139,92,246,.18) !important; border-color:rgba(170,120,255,.5); transform:translateY(-3px); box-shadow:0 0 18px rgba(139,92,246,.4); }
.sa-footer .border-t.border-theme { border-color:rgba(255,255,255,.06) !important; }
.sa-footer .wrap { position:relative; padding-bottom:clamp(60px, 10vw, 150px) !important; }

@media (prefers-reduced-motion: reduce) {
  body:not(.sa-tpl-shop)::before, body:not(.sa-tpl-shop)::after, .sa-product-card:not(.vx-card)::before, .vxp-buybox::before, .vxp-buybox::after,
  .sa-footer::before, body:not(.sa-tpl-shop) .sa-section-title, .vx-r { animation:none !important; transition:none !important; }
  .vx-r { opacity:1 !important; transform:none !important; filter:none !important; }
}


/* =========================================================
   11. VEXDROP PAGE WORLDS — shared foundation
   Every page has its own hero art + layout (vault, drop, kb,
   trust, monitor, bay, protocol).
   ========================================================= */
.vx-page { position:relative; padding:34px 0 110px; isolation:isolate; }
.vx-page .wrap { position:relative; }

/* ---------- HERO ---------- */
.vx-hero {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:center; gap:40px;
  min-height:300px; padding:44px 0 36px; margin-bottom:34px;
}
.vx-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(155,92,255,.5), rgba(255,255,255,.06) 40%, transparent); }
.vx-hero-copy { position:relative; z-index:2; min-width:0; grid-column:1; grid-row:1; }
.vx-hero-meta { display:flex; align-items:center; gap:12px; margin-bottom:22px; animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; }
.vx-hero-code {
  display:inline-grid; place-items:center; min-width:42px; height:30px; padding:0 10px; border-radius:9px;
  background:linear-gradient(135deg,#a36bff,#6d28d9); color:#fff; font-size:11px; font-weight:900; letter-spacing:.08em;
  box-shadow:0 0 22px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.vx-hero-kicker { display:inline-flex; align-items:center; gap:10px; color:#8d82a0; font-size:11px; font-weight:800; letter-spacing:.24em; }
.vx-hero-kicker i { width:26px; height:1px; background:linear-gradient(90deg,#a878ff,transparent); }
.vx-hero-title {
  position:relative; margin:0; overflow-wrap:break-word; font-size:clamp(46px, 7.4vw, 108px); font-weight:900; line-height:.9; letter-spacing:-.055em; text-transform:uppercase;
  background:linear-gradient(100deg,#fff 0%,#fff 35%,#caa8ff 50%,#fff 65%,#fff 100%); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:vxHeroTitle 1s .08s cubic-bezier(.16,1,.3,1) both, vexBrandShine 7s 1.2s ease-in-out infinite;
}
.vx-hero-title::after {
  content:attr(data-text); position:absolute; left:0; top:0; z-index:-1; pointer-events:none;
  -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(170,120,255,.35);
  transform:translate(6px,6px); animation:vxHeroEcho 6s ease-in-out infinite;
}
@keyframes vxHeroTitle { from { opacity:0; transform:translateY(40px) skewY(3deg); filter:blur(10px); letter-spacing:0; } to { opacity:1; transform:none; filter:none; } }
@keyframes vxHeroEcho { 0%,100% { transform:translate(6px,6px); opacity:.8; } 50% { transform:translate(10px,9px); opacity:.35; } }
.vx-hero-sub { max-width:520px; margin:22px 0 0; color:#8f879c; font-size:16px; line-height:1.65; animation:vxpFadeUp .8s .25s cubic-bezier(.16,1,.3,1) both; }
.vx-hero-stats { display:flex; flex-wrap:wrap; gap:0; margin-top:30px; border-top:1px solid rgba(255,255,255,.07); max-width:560px; }
.vx-stat { flex:1 1 140px; padding:16px 20px 0 0; animation:vxpFadeUp .7s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 90ms + 350ms); }
.vx-stat + .vx-stat { padding-left:20px; border-left:1px solid rgba(255,255,255,.06); }
.vx-stat strong { display:flex; align-items:baseline; gap:3px; color:#fff; font-size:30px; font-weight:900; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.vx-stat strong em { font-style:normal; font-size:16px; color:#a878ff; }
.vx-stat > span { display:block; margin-top:4px; color:#62596f; font-size:9.5px; font-weight:800; letter-spacing:.2em; }

.vx-hero-decor { grid-column:2; grid-row:1; position:relative; z-index:1; width:340px; height:300px; justify-self:end; display:grid; place-items:center; transition:transform .6s cubic-bezier(.2,.8,.2,1); animation:vxDecorIn 1.1s .15s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes vxDecorIn { from { opacity:0; transform:scale(.7) rotate(-12deg); filter:blur(12px); } to { opacity:1; transform:none; filter:none; } }
.vx-hero-decor::before { content:""; position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle, rgba(139,92,246,.28), transparent 65%); filter:blur(24px); animation:vxnGlow 8s ease-in-out infinite; }

/* vault door */
.vxh-vault { position:relative; width:250px; height:250px; }
.vxh-vault i { position:absolute; border-radius:50%; }
.vxh-vault .r1 { inset:0; border:2px solid rgba(155,92,255,.25); box-shadow:inset 0 0 40px rgba(139,92,246,.15); background:repeating-conic-gradient(from 0deg, rgba(170,120,255,.35) 0 2deg, transparent 2deg 15deg); -webkit-mask:radial-gradient(circle, transparent 60%, #000 61%, #000 70%, transparent 71%); mask:radial-gradient(circle, transparent 60%, #000 61%, #000 70%, transparent 71%); animation:vexSpinClockwise 26s linear infinite; }
.vxh-vault .r2 { inset:34px; border:1px dashed rgba(200,160,255,.4); animation:vexSpinCounter 14s linear infinite; }
.vxh-vault .r3 { inset:64px; border:6px solid transparent; border-top-color:#a36bff; border-right-color:rgba(163,107,255,.3); filter:drop-shadow(0 0 10px #8b5cf6); animation:vexSpinClockwise 3s cubic-bezier(.6,0,.4,1) infinite; }
.vxh-vault .bolt { position:absolute; left:50%; top:50%; width:10px; height:26px; margin:-13px 0 0 -5px; border-radius:4px; background:linear-gradient(180deg,#d9c2ff,#6d28d9); box-shadow:0 0 12px rgba(155,92,255,.8); animation:vxBolt 6s cubic-bezier(.6,0,.4,1) infinite; }
.vxh-vault .b1 { --r:0deg; } .vxh-vault .b2 { --r:90deg; } .vxh-vault .b3 { --r:180deg; } .vxh-vault .b4 { --r:270deg; }
@keyframes vxBolt { 0%,100% { transform:rotate(var(--r)) translateY(-112px); } 45%,55% { transform:rotate(calc(var(--r) + 90deg)) translateY(-96px); } }
.vxh-vault .core { position:absolute; inset:98px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, #b98bff 30%, #4c1d95 75%); box-shadow:0 0 40px rgba(155,92,255,.9), 0 0 80px rgba(109,40,217,.5); animation:vxCore 3s ease-in-out infinite; }
@keyframes vxCore { 0%,100% { transform:scale(.92); } 50% { transform:scale(1.06); } }

/* faq glyph */
.vxh-faq { position:relative; width:250px; height:250px; display:grid; place-items:center; }
.vxh-faq .q { position:relative; z-index:2; font-size:170px; font-weight:900; line-height:1; background:linear-gradient(160deg,#fff,#b98bff 55%,#5b21b6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 30px rgba(139,92,246,.6)); animation:vxQ 5s ease-in-out infinite; }
@keyframes vxQ { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-14px) rotate(6deg); } }
.vxh-faq i { position:absolute; border-radius:50%; border:1px solid rgba(155,92,255,.28); }
.vxh-faq .o1 { inset:6px; transform:rotateX(70deg); animation:vxOrbitTilt 9s linear infinite; }
.vxh-faq .o2 { inset:36px; border-style:dashed; animation:vexSpinCounter 16s linear infinite; }
@keyframes vxOrbitTilt { to { transform:rotateX(70deg) rotate(360deg); } }
.vxh-faq em { position:absolute; width:8px; height:8px; border-radius:50%; background:#e6d7ff; box-shadow:0 0 12px #a878ff; }
.vxh-faq .p1 { animation:vxOrbitDot 7s linear infinite; } .vxh-faq .p2 { animation:vxOrbitDot 7s -2.3s linear infinite; width:5px; height:5px; } .vxh-faq .p3 { animation:vxOrbitDot 7s -4.6s linear infinite; background:#8b5cf6; }
@keyframes vxOrbitDot { from { transform:rotate(0) translateX(120px) rotate(0); } to { transform:rotate(360deg) translateX(120px) rotate(-360deg); } }

/* trust stars */
.vxh-trust { position:relative; width:260px; height:260px; }
.vxh-trust i { position:absolute; left:50%; top:50%; margin:-18px 0 0 -18px; width:36px; height:36px; display:grid; place-items:center; font-style:normal; font-size:30px; color:#fbbf24; text-shadow:0 0 18px rgba(251,191,36,.8); animation:vxStarOrbit 12s linear infinite; }
.vxh-trust .s1 { animation-delay:0s; } .vxh-trust .s2 { animation-delay:-2.4s; } .vxh-trust .s3 { animation-delay:-4.8s; } .vxh-trust .s4 { animation-delay:-7.2s; } .vxh-trust .s5 { animation-delay:-9.6s; }
@keyframes vxStarOrbit { from { transform:rotate(0) translateX(105px) rotate(0) scale(1); } 50% { transform:rotate(180deg) translateX(105px) rotate(-180deg) scale(1.25); } to { transform:rotate(360deg) translateX(105px) rotate(-360deg) scale(1); } }
.vxh-trust .halo { position:absolute; inset:70px; border-radius:50%; background:radial-gradient(circle, rgba(251,191,36,.25), rgba(139,92,246,.2) 50%, transparent 70%); border:1px solid rgba(251,191,36,.25); animation:vxCore 3s ease-in-out infinite; }

/* monitor radar */
.vxh-monitor { position:relative; width:250px; height:250px; border-radius:50%; overflow:hidden; background:radial-gradient(circle, rgba(34,197,94,.06), transparent 70%); }
.vxh-monitor .ring { position:absolute; border-radius:50%; border:1px solid rgba(74,222,128,.22); }
.vxh-monitor .r1 { inset:0; } .vxh-monitor .r2 { inset:40px; } .vxh-monitor .r3 { inset:80px; }
.vxh-monitor::before, .vxh-monitor::after { content:""; position:absolute; background:rgba(74,222,128,.14); }
.vxh-monitor::before { left:50%; top:0; bottom:0; width:1px; } .vxh-monitor::after { top:50%; left:0; right:0; height:1px; }
.vxh-monitor .sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(74,222,128,.55), transparent 60deg); animation:vexSpinClockwise 3s linear infinite; }
.vxh-monitor .blip { position:absolute; width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 14px #4ade80; animation:vxBlip 3s ease-out infinite; }
.vxh-monitor .b1 { left:30%; top:26%; } .vxh-monitor .b2 { left:68%; top:40%; animation-delay:1s; } .vxh-monitor .b3 { left:44%; top:72%; animation-delay:2s; background:#a878ff; box-shadow:0 0 14px #a878ff; }
@keyframes vxBlip { 0%,20% { opacity:0; transform:scale(.3); } 30% { opacity:1; transform:scale(1.4); } 100% { opacity:0; transform:scale(.8); } }

/* bay equalizer */
.vxh-bay { display:flex; align-items:flex-end; gap:14px; height:200px; }
.vxh-bay i { width:30px; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg,#d9c2ff,#7c3aed 60%,#3b0f7a); box-shadow:0 0 22px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.4); animation:vxBar 2.4s cubic-bezier(.6,0,.4,1) infinite; transform-origin:bottom; }
.vxh-bay i:nth-child(1) { height:40%; animation-delay:0s; } .vxh-bay i:nth-child(2) { height:75%; animation-delay:-.4s; } .vxh-bay i:nth-child(3) { height:100%; animation-delay:-.8s; } .vxh-bay i:nth-child(4) { height:62%; animation-delay:-1.2s; } .vxh-bay i:nth-child(5) { height:30%; animation-delay:-1.6s; }
@keyframes vxBar { 0%,100% { transform:scaleY(.45); } 50% { transform:scaleY(1); } }

/* protocol sheets */
.vxh-protocol { position:relative; width:220px; height:260px; }
.vxh-protocol .sheet { position:absolute; inset:0; border-radius:16px; border:1px solid rgba(170,120,255,.3); background:linear-gradient(160deg, rgba(40,28,64,.9), rgba(14,11,22,.95)); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.vxh-protocol .s1 { transform:rotate(-12deg) translate(-24px,10px); opacity:.45; animation:vxSheet1 6s ease-in-out infinite; }
.vxh-protocol .s2 { transform:rotate(-5deg) translate(-10px,4px); opacity:.7; animation:vxSheet2 6s ease-in-out infinite; }
.vxh-protocol .s3 { padding:40px 26px; display:flex; flex-direction:column; gap:14px; animation:vxSheet3 6s ease-in-out infinite; }
.vxh-protocol .s3 i { display:block; height:7px; border-radius:4px; background:linear-gradient(90deg, rgba(200,160,255,.5), rgba(200,160,255,.1)); animation:vxLine 3s ease-in-out infinite; transform-origin:left; }
.vxh-protocol .s3 i:nth-child(2) { width:80%; animation-delay:.3s; } .vxh-protocol .s3 i:nth-child(3) { width:92%; animation-delay:.6s; } .vxh-protocol .s3 i:nth-child(4) { width:60%; animation-delay:.9s; }
@keyframes vxLine { 0%,100% { transform:scaleX(1); } 50% { transform:scaleX(.7); } }
@keyframes vxSheet1 { 50% { transform:rotate(-16deg) translate(-32px,14px); } }
@keyframes vxSheet2 { 50% { transform:rotate(-7deg) translate(-14px,6px); } }
@keyframes vxSheet3 { 50% { transform:translateY(-8px) rotate(1deg); } }
.vxh-protocol .seal { position:absolute; right:-18px; bottom:22px; width:70px; height:70px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 30%, #c9a6ff, #6d28d9); color:#fff; font-size:30px; font-weight:900; box-shadow:0 0 30px rgba(139,92,246,.7); animation:vxSeal 6s cubic-bezier(.3,1.5,.4,1) infinite; }
@keyframes vxSeal { 0%,10% { transform:scale(0) rotate(-40deg); } 18%,90% { transform:scale(1) rotate(-12deg); } 100% { transform:scale(0) rotate(-40deg); } }

/* reveal + tilt share one transition list on page-world elements */
.vx-page .vx-r { transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--vx-d,0ms), transform .4s cubic-bezier(.2,.8,.2,1), filter .7s ease var(--vx-d,0ms), border-color .35s ease, box-shadow .35s ease, background .3s ease !important; }
.vx-page .vx-r:not(.vx-in) { transition:none !important; }

/* ---------- shared bits ---------- */
.vx-btn {
  position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 24px; border:1px solid rgba(215,190,255,.35); border-radius:13px;
  background:linear-gradient(135deg,#a36bff 0%,#7c3aed 50%,#5b21b6 100%); background-size:200% 200%;
  color:#fff !important; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 12px 30px rgba(109,40,217,.35), inset 0 1px 0 rgba(255,255,255,.22);
  animation:vxcGradient 6s ease infinite; transition:transform .25s cubic-bezier(.3,1.4,.4,1), box-shadow .25s ease;
}
.vx-btn::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:25%; z-index:-1; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); animation:vxcSweep 3.6s ease-in-out infinite; }
.vx-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 18px 44px rgba(109,40,217,.55), 0 0 28px rgba(155,92,255,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.vx-btn:active:not(:disabled) { transform:scale(.97); }
.vx-btn:disabled { opacity:.6; cursor:wait; }
.vx-btn svg { width:17px; height:17px; }
.vx-btn--xl { width:100%; height:56px; font-size:13px; }

.vx-chip { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:999px; background:var(--chip, rgba(139,92,246,.9)); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.12em; box-shadow:0 4px 14px rgba(0,0,0,.35); backdrop-filter:blur(6px); }
.vx-chip--ghost { background:rgba(10,8,16,.7); border:1px solid rgba(255,255,255,.15); }

.vx-panel { position:relative; isolation:isolate; overflow:hidden; padding:0 22px 22px; border-radius:22px; background:linear-gradient(170deg, rgba(24,18,38,.9), rgba(10,8,16,.95)); box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.vx-panel::before { content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.12) 0 55%, rgba(226,207,255,.85) 75%, rgba(155,92,255,.12) 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 6s linear infinite; }
.vx-panel::after { content:""; position:absolute; top:-100px; right:-80px; width:280px; height:240px; z-index:-1; border-radius:50%; background:radial-gradient(ellipse, rgba(139,92,246,.25), transparent 65%); filter:blur(14px); animation:vxcAura 10s ease-in-out infinite; pointer-events:none; }
.vx-panel-top { display:flex; align-items:center; justify-content:space-between; height:52px; margin:0 -22px 18px; padding:0 22px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.015); }
.vx-panel-label { color:#9a8fb0; font-size:10px; font-weight:800; letter-spacing:.24em; }
.vx-panel-live { display:inline-flex; align-items:center; gap:7px; color:#4ade80; font-size:9.5px; font-weight:800; letter-spacing:.2em; }
.vx-panel-live i { position:relative; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; }
.vx-panel-live i::after { content:""; position:absolute; inset:0; border-radius:50%; background:#4ade80; animation:vxcPing 1.8s ease-out infinite; }

.vx-dossier-label { display:flex; align-items:center; gap:12px; margin:0 0 18px; color:#6f6580; font-size:10.5px; font-weight:800; letter-spacing:.26em; }
.vx-dossier-label i { width:8px; height:8px; border-radius:2px; background:#a878ff; box-shadow:0 0 10px #a878ff; transform:rotate(45deg); }
.vx-dossier-label::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(155,92,255,.35), transparent); }

.vx-void { display:flex; flex-direction:column; align-items:center; text-align:center; padding:70px 20px; }
.vx-void-ring { position:relative; width:130px; height:130px; display:grid; place-items:center; margin-bottom:26px; }
.vx-void-ring i { position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(155,92,255,.35); animation:vexSpinClockwise 18s linear infinite; }
.vx-void-ring i + i { inset:20px; border-style:solid; border-color:transparent; border-top-color:#b98bff; border-right-color:rgba(155,92,255,.3); animation:vexSpinCounter 2.6s linear infinite; }
.vx-void-ring span { font-size:40px; font-weight:900; color:#d4bdff; text-shadow:0 0 22px rgba(155,92,255,.8); animation:vxcFloat 3s ease-in-out infinite; }
.vx-void-ring svg { width:34px; height:34px; }
.vx-void h3 { margin:0; color:#fff; font-size:20px; font-weight:900; letter-spacing:.16em; animation:vexNfGlitch 3s steps(1) infinite; }
.vx-void p { margin:12px 0 26px; max-width:360px; color:#7e768b; font-size:14px; }

.vx-pager { margin-top:44px; }
.vx-pager .vx-pagination { max-width:520px; margin:0 auto; }

.vx-sheet { position:fixed; inset:0; z-index:9999990; display:flex; justify-content:flex-end; }
.vx-sheet-bg { position:absolute; inset:0; background:rgba(3,2,7,.75); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:vxpFade .3s ease both; }
@keyframes vxpFade { from { opacity:0; } }
.vx-sheet-panel { position:relative; width:min(380px,100vw); height:100dvh; overflow-y:auto; background:linear-gradient(180deg,#110d1b,#08070c); border-left:1px solid rgba(155,92,255,.2); box-shadow:-30px 0 90px rgba(0,0,0,.7); animation:vxSheetIn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes vxSheetIn { from { transform:translateX(100%); } }
.vx-sheet-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(14,11,22,.95); }
.vx-sheet-head span { display:inline-flex; align-items:center; gap:9px; color:#fff; font-size:12px; font-weight:900; letter-spacing:.22em; }
.vx-sheet-head span i { width:7px; height:7px; border-radius:50%; background:#a878ff; box-shadow:0 0 10px #a878ff; }
.vx-sheet-head button { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:11px; background:rgba(255,255,255,.03); color:#cbbfe0; cursor:pointer; transition:all .25s ease; }
.vx-sheet-head button svg { width:15px; height:15px; transition:transform .4s cubic-bezier(.3,1.5,.4,1); }
.vx-sheet-head button:hover { color:#fff; border-color:rgba(170,120,255,.5); background:rgba(139,92,246,.15); }
.vx-sheet-head button:hover svg { transform:rotate(90deg); }
.vx-sheet-body { padding:16px 14px 30px; }
.vx-sheet-body .input { background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.09) !important; border-radius:11px !important; }

@media (max-width:900px) {
  .vx-hero { grid-template-columns:1fr; gap:10px; padding-top:26px; min-height:0; }
  .vx-hero-decor { position:absolute; right:-70px; top:-10px; opacity:.4; scale:.6; }
  .vx-hero-decor::before { display:none; }
}

/* =========================================================
   11a. THE VAULT — products
   ========================================================= */
.vx-cmd { display:flex; gap:10px; margin-bottom:16px; animation:vxpFadeUp .7s .3s cubic-bezier(.16,1,.3,1) both; }
.vx-cmd-search { position:relative; flex:1; display:flex; align-items:center; height:58px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.025); overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.vx-cmd-search::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:linear-gradient(90deg,transparent,#b98bff,transparent); transform:scaleX(0); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.vx-cmd-search:focus-within { border-color:rgba(170,120,255,.55); background:rgba(139,92,246,.06); box-shadow:0 0 0 4px rgba(139,92,246,.1), 0 0 34px rgba(109,40,217,.2); }
.vx-cmd-search:focus-within::after { transform:scaleX(1); }
.vx-cmd-search > svg { width:20px; height:20px; margin-left:20px; color:#8a6dc0; flex-shrink:0; transition:transform .3s cubic-bezier(.3,1.4,.4,1), color .2s ease; }
.vx-cmd-search:focus-within > svg { color:#d4bdff; transform:rotate(-12deg) scale(1.1); }
.vx-cmd-search input { flex:1; height:100%; padding:0 14px; border:0; outline:0; background:transparent; color:#f3eefa; font-size:15px; font-weight:550; }
.vx-cmd-search input::placeholder { color:#5d5669; }
.vx-cmd-search button { width:44px; height:44px; margin-right:7px; display:grid; place-items:center; border:0; border-radius:12px; background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; cursor:pointer; box-shadow:0 0 18px rgba(139,92,246,.45); transition:transform .25s cubic-bezier(.3,1.4,.4,1); }
.vx-cmd-search button svg { width:18px; height:18px; }
.vx-cmd-search button:hover { transform:translateX(3px); }
.vx-cmd-filter { position:relative; display:inline-flex; align-items:center; gap:10px; height:58px; padding:0 22px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.025); color:#d6c8ec; font-size:11px; font-weight:800; letter-spacing:.2em; cursor:pointer; transition:all .25s ease; }
.vx-cmd-filter svg { width:18px; height:18px; transition:transform .35s cubic-bezier(.3,1.4,.4,1); }
.vx-cmd-filter:hover { color:#fff; border-color:rgba(170,120,255,.45); background:rgba(139,92,246,.12); box-shadow:0 0 22px rgba(139,92,246,.25); }
.vx-cmd-filter:hover svg { transform:scaleX(-1); }
.vx-cmd-filter b { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:linear-gradient(135deg,#b88bff,#7c3aed); color:#fff; font-size:10px; letter-spacing:0; box-shadow:0 0 10px rgba(155,92,255,.8); }

.vx-cats { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; margin-bottom:22px; scrollbar-width:none; }
.vx-cats::-webkit-scrollbar { display:none; }
.vx-cat { position:relative; flex-shrink:0; display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 18px 0 14px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.02); color:#a499b4 !important; font-size:12.5px; font-weight:700; white-space:nowrap; transition:all .25s cubic-bezier(.3,1.3,.4,1); animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 50ms + 350ms); }
.vx-cat i { width:6px; height:6px; border-radius:50%; background:#5a4a78; transition:all .25s ease; }
.vx-cat:hover { color:#fff !important; border-color:rgba(170,120,255,.45); transform:translateY(-2px); }
.vx-cat:hover i { background:#b98bff; box-shadow:0 0 8px #a878ff; }
.vx-cat.is-active { color:#fff !important; border-color:rgba(200,160,255,.6); background:linear-gradient(135deg, rgba(155,92,255,.3), rgba(109,40,217,.16)); box-shadow:0 0 22px rgba(139,92,246,.3), inset 0 1px 0 rgba(255,255,255,.1); }
.vx-cat.is-active i { background:#fff; box-shadow:0 0 10px #fff; animation:vxnBadge 1.6s ease-in-out infinite; }

.vx-grid-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; color:#6f6580; font-size:10.5px; font-weight:800; letter-spacing:.22em; }
.vx-grid-head > span:first-child { display:inline-flex; align-items:center; gap:10px; }
.vx-grid-head > span:first-child i { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; animation:vxnBadge 2s ease-in-out infinite; }
.vx-grid-query { color:#d4bdff; letter-spacing:.08em; }
.vx-grid-query a { margin-left:8px; color:#ff8fa8 !important; }

.vx-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:22px; perspective:1400px; }

/* ----- drop card ----- */
.vx-card {
  position:relative; display:flex; flex-direction:column; isolation:isolate; overflow:hidden; border-radius:22px; color:inherit !important;
  background:linear-gradient(170deg, rgba(24,18,38,.85), rgba(10,8,16,.95)); border:1px solid rgba(255,255,255,.07);
  box-shadow:0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.vx-card-frame { position:absolute; inset:0; z-index:6; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s ease; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.1) 0 55%, #ecdcff 75%, rgba(155,92,255,.1) 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 3s linear infinite; }
.vx-card-spot { position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(340px circle at var(--mx,50%) var(--my,30%), rgba(170,120,255,.18), transparent 60%); }
.vx-card:hover { border-color:transparent; box-shadow:0 34px 80px rgba(20,6,50,.6), 0 0 44px rgba(139,92,246,.22); }
.vx-card:hover .vx-card-frame, .vx-card:hover .vx-card-spot { opacity:1; }
.vx-card-media { position:relative; aspect-ratio:var(--product-card-image-aspect-ratio, 16/9); overflow:hidden; background:#0c0a12; }
.vx-card-media img { width:100%; height:100%; object-fit:var(--product-image-fit, cover); transition:transform .9s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.vx-card:hover .vx-card-media img { transform:scale(1.1) rotate(-1deg); filter:saturate(1.2) brightness(1.06); }
.vx-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,8,16,.95) 0%, rgba(10,8,16,.2) 45%, transparent 70%); pointer-events:none; }
.vx-card-placeholder { width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(circle, rgba(139,92,246,.3), transparent 70%); }
.vx-card-placeholder span { font-size:64px; font-weight:900; color:#d4bdff; text-shadow:0 0 30px rgba(155,92,255,.8); }
.vx-card-shine { position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:2; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); transform:skewX(-20deg); pointer-events:none; }
.vx-card:hover .vx-card-shine { animation:vxpShine 1s cubic-bezier(.4,0,.2,1) both; }
.vx-card-no { position:absolute; left:16px; bottom:10px; z-index:3; font-size:44px; font-weight:900; line-height:1; letter-spacing:-.05em; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.35); transition:all .4s cubic-bezier(.3,1.3,.4,1); }
.vx-card:hover .vx-card-no { -webkit-text-stroke-color:rgba(200,160,255,.9); transform:translateY(-4px); text-shadow:0 0 24px rgba(155,92,255,.6); }
.vx-card-badges { position:absolute; top:14px; right:14px; z-index:3; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.vx-card-body { position:relative; z-index:5; display:flex; flex-direction:column; gap:16px; padding:16px 20px 20px; }
.vx-card-title { margin:0; color:#f4effa; font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.3; transition:color .25s ease, text-shadow .25s ease; }
.vx-card:hover .vx-card-title { color:#fff; text-shadow:0 0 20px rgba(185,140,255,.55); }
.vx-card-row { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.08); }
.vx-card-stock span { display:inline-flex; align-items:center; gap:7px; font-size:9.5px; font-weight:800; letter-spacing:.18em; }
.vx-card-stock .is-in { color:#4ade80; }
.vx-card-stock .is-in i { width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:vxnBadge 2s ease-in-out infinite; }
.vx-card-stock .is-out { color:#ff7b9c; }
.vx-card-stock .is-group { color:#b98bff; }
.vx-card-price { display:flex; flex-direction:column; align-items:flex-end; line-height:1; }
.vx-card-price small { color:#6f6580; font-size:8.5px; font-weight:800; letter-spacing:.2em; margin-bottom:4px; }
.vx-card-price s { color:#5d5669; font-size:11px; margin-bottom:3px; }
.vx-card-price strong { font-size:22px; font-weight:900; letter-spacing:-.03em; background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vx-card-go { position:absolute; top:14px; left:14px; z-index:5; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(10,8,16,.6); border:1px solid rgba(255,255,255,.15); color:#fff; backdrop-filter:blur(8px); opacity:0; transform:scale(.6) rotate(-45deg); transition:all .4s cubic-bezier(.3,1.4,.4,1); }
.vx-card-go svg { width:17px; height:17px; }
.vx-card:hover .vx-card-go { opacity:1; transform:none; background:linear-gradient(135deg,#9b5cff,#6d28d9); border-color:transparent; box-shadow:0 0 22px rgba(139,92,246,.7); }

/* =========================================================
   11b. DROP — product page
   ========================================================= */
.vx-drop { padding-top:20px; overflow:clip; }
.vx-drop-aura { position:absolute; top:-120px; left:50%; width:1200px; height:700px; margin-left:-600px; z-index:-2; background-size:cover; background-position:center; filter:blur(90px) saturate(1.4); opacity:.28; pointer-events:none; animation:vxAura 16s ease-in-out infinite; -webkit-mask-image:radial-gradient(ellipse, #000 25%, transparent 70%); mask-image:radial-gradient(ellipse, #000 25%, transparent 70%); }
@keyframes vxAura { 0%,100% { transform:scale(1) rotate(0); } 50% { transform:scale(1.15) rotate(4deg); } }
.vx-drop-grid { position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 60%); mask-image:linear-gradient(180deg,#000,transparent 60%); }
.vx-drop-layout { display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:44px; align-items:start; }
.vx-drop-stage { min-width:0; }
.vx-drop-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:16px 0 18px; animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; }
.vx-drop-cat { display:inline-flex; align-items:center; height:30px; padding:0 14px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:#c9b8e4 !important; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; transition:all .2s ease; }
.vx-drop-cat:hover { color:#fff !important; border-color:rgba(170,120,255,.5); background:rgba(139,92,246,.12); }
.vx-drop-status { display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 14px; border-radius:999px; border:1px solid color-mix(in srgb, var(--st) 40%, transparent); background:color-mix(in srgb, var(--st) 10%, transparent); color:var(--st); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.vx-drop-status i { position:relative; width:7px; height:7px; border-radius:50%; background:var(--st); box-shadow:0 0 10px var(--st); }
.vx-drop-status i::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--st); animation:vxcPing 1.8s ease-out infinite; }
.vx-drop-title { position:relative; margin:0 0 30px; font-size:clamp(38px, 5.4vw, 78px); font-weight:900; line-height:.95; letter-spacing:-.05em; text-transform:uppercase;
  background:linear-gradient(100deg,#fff 0%,#fff 35%,#caa8ff 50%,#fff 65%,#fff 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:vxHeroTitle 1s .05s cubic-bezier(.16,1,.3,1) both, vexBrandShine 7s 1.2s ease-in-out infinite; }
.vx-drop-title::after { content:attr(data-text); position:absolute; left:0; top:0; z-index:-1; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(170,120,255,.3); transform:translate(5px,5px); animation:vxHeroEcho 6s ease-in-out infinite; pointer-events:none; }

.vx-drop-gallery { position:relative; padding:14px; animation:vxpGalleryIn 1s .15s cubic-bezier(.16,1,.3,1) backwards; }
.vx-drop-gallery .sa-product-gallery.splide.main, .vx-drop-gallery .sa-product-gallery--single, .vx-drop-gallery .sa-product-gallery--empty { border-radius:20px !important; overflow:hidden; border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 40px 100px rgba(0,0,0,.55), 0 0 60px rgba(109,40,217,.18) !important; }
.vx-drop-corner { position:absolute; width:26px; height:26px; z-index:2; pointer-events:none; border-color:#b98bff; border-style:solid; filter:drop-shadow(0 0 6px #8b5cf6); animation:vxCorner 3s ease-in-out infinite; }
.vx-drop-corner.c1 { top:0; left:0; border-width:2px 0 0 2px; border-top-left-radius:10px; }
.vx-drop-corner.c2 { top:0; right:0; border-width:2px 2px 0 0; border-top-right-radius:10px; }
.vx-drop-corner.c3 { bottom:0; left:0; border-width:0 0 2px 2px; border-bottom-left-radius:10px; }
.vx-drop-corner.c4 { bottom:0; right:0; border-width:0 2px 2px 0; border-bottom-right-radius:10px; }
@keyframes vxCorner { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.vx-orbit { position:absolute; z-index:0; pointer-events:none; border-radius:50%; border:1px solid rgba(155,92,255,.15); }
.vx-orbit.o1 { width:120%; aspect-ratio:1; left:-10%; top:50%; margin-top:-60%; animation:vexSpinClockwise 40s linear infinite; }
.vx-orbit.o2 { width:90%; aspect-ratio:1; left:5%; top:50%; margin-top:-45%; border-style:dashed; animation:vexSpinCounter 30s linear infinite; }
.vx-orbit b { position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#e6d7ff; box-shadow:0 0 14px #a878ff; }
.vx-drop-gallery > .sa-product-gallery, .vx-drop-gallery > div { position:relative; z-index:1; }

.vx-drop-perks { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin:26px 0 40px; }
.vx-perk { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid rgba(255,255,255,.07); border-radius:16px; background:rgba(255,255,255,.02); color:#cfc5dd; font-size:13px; font-weight:700; transition:all .3s cubic-bezier(.3,1.3,.4,1); animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 90ms + 400ms); }
.vx-perk-icon { width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; border-radius:11px; background:linear-gradient(135deg, rgba(155,92,255,.25), rgba(109,40,217,.1)); color:#d4bdff; box-shadow:inset 0 0 0 1px rgba(170,120,255,.3); }
.vx-perk-icon svg { width:18px; height:18px; transition:transform .4s cubic-bezier(.3,1.5,.4,1); }
.vx-perk:hover { border-color:rgba(170,120,255,.4); transform:translateY(-3px); box-shadow:0 14px 30px rgba(30,8,70,.4); }
.vx-perk:hover .vx-perk-icon svg { transform:scale(1.2) rotate(-10deg); }

.vx-drop-dossier { margin-top:10px; }
.vx-drop-panel { position:sticky; top:96px; display:flex; flex-direction:column; gap:14px; animation:vxpBoxIn .9s .15s cubic-bezier(.16,1,.3,1) both; }
.vx-drop-panel .vxp-buybox { padding:0 22px 22px !important; border-radius:22px !important; animation:none; }
.vx-drop-panel .vxp-buybox::before { animation:vxcSpinA 6s linear infinite; }
.vx-panel > .flex.flex-wrap { margin-bottom:14px; }
.vx-panel-price { padding-bottom:18px; margin-bottom:18px; border-bottom:1px dashed rgba(255,255,255,.08); }
.vx-panel-price .sa-page-product-price { font-size:42px !important; }
.vx-drop-panel .vxp-live { border-radius:18px !important; background:linear-gradient(170deg, rgba(24,18,38,.85), rgba(10,8,16,.95)) !important; border-color:rgba(255,255,255,.07) !important; margin-top:0 !important; }
.vx-drop-reviews { margin-top:60px; }

@media (max-width:1023px) {
  .vx-drop-layout { grid-template-columns:1fr; gap:28px; }
  .vx-drop-panel { position:relative; top:0; }
}
@media (max-width:1023px) {
  .vx-drop-stage { display:contents; }
  .vx-drop-kicker { order:1; } .vx-drop-title { order:2; margin-bottom:10px; } .vx-drop-gallery { order:3; }
  .vx-drop-panel { order:4; } .vx-drop-perks { order:5; margin:0; } .vx-drop-dossier { order:6; }
}

/* =========================================================
   11c. KNOWLEDGE BASE — FAQ
   ========================================================= */
.vx-kb-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start; }
.vx-kb-search { position:relative; display:flex; align-items:center; height:62px; margin-bottom:22px; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(255,255,255,.025); transition:all .25s ease; animation:vxpFadeUp .7s .3s cubic-bezier(.16,1,.3,1) both; }
.vx-kb-search:focus-within { border-color:rgba(170,120,255,.55); background:rgba(139,92,246,.06); box-shadow:0 0 0 4px rgba(139,92,246,.1), 0 0 34px rgba(109,40,217,.2); }
.vx-kb-search svg { width:20px; height:20px; margin-left:22px; color:#8a6dc0; flex-shrink:0; }
.vx-kb-search input { flex:1; height:100%; padding:0 14px; border:0; outline:0; background:transparent; color:#f3eefa; font-size:16px; font-weight:550; }
.vx-kb-search input::placeholder { color:#5d5669; }
.vx-kb-count { margin-right:20px; color:#6f6580; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.vx-kb-count b { color:#d4bdff; font-size:15px; }
.vx-kb-list { display:flex; flex-direction:column; gap:10px; }
.vx-kb-item { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:18px; background:linear-gradient(170deg, rgba(22,17,34,.75), rgba(10,8,16,.9)); transition:border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 60ms + 400ms); }
.vx-kb-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#d0b0ff,#7c3aed); box-shadow:0 0 14px rgba(155,92,255,.9); transform:scaleY(0); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.vx-kb-item:hover { border-color:rgba(170,120,255,.3); transform:translateX(4px); }
.vx-kb-item.is-open { border-color:rgba(170,120,255,.45); box-shadow:0 20px 50px rgba(40,10,90,.4), 0 0 34px rgba(139,92,246,.15); }
.vx-kb-item.is-open::before { transform:scaleY(1); }
.vx-kb-q { display:flex; align-items:center; gap:16px; width:100%; padding:20px 22px; border:0; background:transparent; color:#ece6f5; text-align:left; cursor:pointer; }
.vx-kb-no { flex-shrink:0; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; border:1px solid rgba(155,92,255,.25); background:rgba(139,92,246,.08); color:#a88bd8; font-size:12px; font-weight:900; font-variant-numeric:tabular-nums; transition:all .35s cubic-bezier(.3,1.4,.4,1); }
.vx-kb-item.is-open .vx-kb-no { background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; border-color:transparent; box-shadow:0 0 18px rgba(139,92,246,.6); transform:rotate(-8deg) scale(1.05); }
.vx-kb-text { flex:1; font-size:16px; font-weight:750; line-height:1.4; }
.vx-kb-plus { position:relative; flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); transition:all .4s cubic-bezier(.3,1.4,.4,1); }
.vx-kb-plus i { position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; border-radius:2px; background:#c9a6ff; transition:transform .4s cubic-bezier(.3,1.4,.4,1); }
.vx-kb-plus i + i { transform:rotate(90deg); }
.vx-kb-item.is-open .vx-kb-plus { background:rgba(139,92,246,.25); border-color:rgba(200,160,255,.5); transform:rotate(180deg); }
.vx-kb-item.is-open .vx-kb-plus i + i { transform:rotate(0); }
.vx-kb-a { padding:0 24px 22px 78px; color:#a79db4; font-size:14.5px; line-height:1.75; white-space:pre-line; }
.vx-kb-item.is-open .vx-kb-a { animation:vxpFadeUp .5s cubic-bezier(.16,1,.3,1) both; }
.vx-kb-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:50px 20px; border:1px dashed rgba(155,92,255,.3); border-radius:20px; }
.vx-kb-empty > span { font-size:54px; color:#b98bff; text-shadow:0 0 24px rgba(155,92,255,.8); animation:vxcFloat 3s ease-in-out infinite; }
.vx-kb-empty strong { margin-top:10px; color:#fff; font-size:14px; letter-spacing:.14em; animation:vexNfGlitch 3s steps(1) infinite; }
.vx-kb-empty strong em { color:#d4bdff; font-style:normal; }
.vx-kb-empty p { margin:8px 0 18px; color:#7e768b; font-size:13px; }
.vx-kb-empty button { height:36px; padding:0 16px; border:1px solid rgba(155,92,255,.35); border-radius:999px; background:rgba(139,92,246,.08); color:#d4bdff; font-size:10px; font-weight:800; letter-spacing:.18em; cursor:pointer; transition:all .2s ease; }
.vx-kb-empty button:hover { background:rgba(139,92,246,.2); color:#fff; box-shadow:0 0 18px rgba(139,92,246,.35); }

.vx-kb-dock { position:sticky; top:96px; animation:vxpBoxIn .9s .3s cubic-bezier(.16,1,.3,1) both; }
.vx-dock { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 24px 26px; border-radius:24px; background:linear-gradient(170deg, rgba(30,22,50,.9), rgba(10,8,16,.95)); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.vx-dock::before { content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.12) 0 55%, rgba(226,207,255,.85) 75%, rgba(155,92,255,.12) 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 6s linear infinite; }
.vx-dock-avatar { position:relative; width:86px; height:86px; display:grid; place-items:center; margin-bottom:16px; }
.vx-dock-avatar i { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(155,92,255,.35); animation:vxcPing 2.4s ease-out infinite; }
.vx-dock-avatar i + i { animation-delay:1.2s; }
.vx-dock-avatar span { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:linear-gradient(135deg,#9b5cff,#5b21b6); color:#fff; box-shadow:0 0 30px rgba(139,92,246,.6); animation:vxcFloat 3.4s ease-in-out infinite; }
.vx-dock-avatar svg { width:28px; height:28px; }
.vx-dock-live { display:inline-flex; align-items:center; gap:7px; color:#4ade80; font-size:9.5px; font-weight:800; letter-spacing:.22em; }
.vx-dock-live i { width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:vxnBadge 1.6s ease-in-out infinite; }
.vx-dock h3 { margin:12px 0 6px; color:#fff; font-size:22px; font-weight:900; letter-spacing:-.02em; }
.vx-dock p { margin:0 0 20px; color:#8f879c; font-size:14px; line-height:1.6; }
.vx-dock .vx-btn { width:100%; }
.vx-dock-facts { list-style:none; margin:22px 0 0; padding:18px 0 0; width:100%; border-top:1px dashed rgba(255,255,255,.08); display:flex; flex-direction:column; gap:10px; text-align:left; }
.vx-dock-facts li { display:flex; align-items:center; gap:10px; color:#a59bb3; font-size:12.5px; }
.vx-dock-facts b { width:26px; height:26px; flex-shrink:0; display:grid; place-items:center; border-radius:8px; background:rgba(139,92,246,.12); color:#c9a6ff; font-size:12px; }

@media (max-width:1023px) { .vx-kb-layout { grid-template-columns:1fr; } .vx-kb-dock { position:relative; top:0; } }
@media (max-width:640px) { .vx-kb-a { padding-left:22px; } .vx-kb-q { padding:16px; gap:12px; } .vx-kb-text { font-size:14.5px; } }

/* =========================================================
   11d. WALL OF TRUST — reviews
   ========================================================= */
.vx-trust-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center; }
.vx-trust-top .vx-hero { grid-template-columns:1fr; margin-bottom:0; }
.vx-trust-top .vx-hero::after { display:none; }
.vx-trust-top .vx-hero-decor { display:none; }
.vx-dial { position:relative; width:260px; height:260px; animation:vxDecorIn 1.1s .2s cubic-bezier(.16,1,.3,1) both; }
.vx-dial::before { content:""; position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle, rgba(139,92,246,.3), transparent 70%); filter:blur(20px); }
.vx-dial svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.vx-dial .track { fill:none; stroke:rgba(255,255,255,.06); stroke-width:10; }
.vx-dial .bar { fill:none; stroke:url(#vxDialGrad); stroke-width:10; stroke-linecap:round; stroke-dasharray:0 100; filter:drop-shadow(0 0 10px rgba(155,92,255,.8)); animation:vxDial 2s .5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes vxDial { to { stroke-dasharray:var(--p) 100; } }
@property --p { syntax:'<number>'; initial-value:0; inherits:true; }
.vx-dial .ticks line { stroke:rgba(200,160,255,.25); stroke-width:1.5; }
.vx-dial-core { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.vx-dial-core strong { color:#fff; font-size:58px; font-weight:900; letter-spacing:-.05em; line-height:1; text-shadow:0 0 30px rgba(155,92,255,.6); }
.vx-dial-stars { display:flex; gap:3px; }
.vx-dial-stars i { font-style:normal; font-size:17px; color:rgba(255,255,255,.12); animation:vxStarPop .5s cubic-bezier(.3,1.6,.4,1) both; animation-delay:calc(var(--i) * 120ms + 900ms); }
.vx-dial-stars i.on { color:#fbbf24; text-shadow:0 0 12px rgba(251,191,36,.8); }
@keyframes vxStarPop { from { opacity:0; transform:scale(0) rotate(-90deg); } to { opacity:1; transform:none; } }
.vx-dial-core > span { color:#6f6580; font-size:9.5px; font-weight:800; letter-spacing:.2em; }
.vx-dial-core > span b { color:#d4bdff; }

.vx-seg { display:inline-flex; gap:4px; padding:5px; margin:30px 0 26px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.02); max-width:100%; overflow-x:auto; scrollbar-width:none; }
.vx-seg-item { flex-shrink:0; height:38px; display:inline-flex; align-items:center; padding:0 18px; border-radius:10px; color:#8f86a0 !important; font-size:12px; font-weight:750; transition:all .25s ease; }
.vx-seg-item:hover { color:#fff !important; background:rgba(255,255,255,.04); }
.vx-seg-item.is-active { color:#fff !important; background:linear-gradient(135deg, rgba(155,92,255,.3), rgba(109,40,217,.18)); box-shadow:inset 0 0 0 1px rgba(190,150,255,.45), 0 0 18px rgba(139,92,246,.3); }

.vx-wall { columns:3 320px; column-gap:20px; }
.vx-wall-item { break-inside:avoid; margin-bottom:20px; }
.vx-wall-item:nth-child(3n+1) .sa-feedback-card { transform:rotate(-.6deg); }
.vx-wall-item:nth-child(3n+2) .sa-feedback-card { transform:rotate(.5deg); }
.vx-wall-item .sa-feedback-card { transition:transform .45s cubic-bezier(.3,1.3,.4,1), border-color .3s ease, box-shadow .3s ease !important; }
.vx-wall-item .sa-feedback-card:hover { transform:rotate(0) translateY(-6px) scale(1.02); }
.vx-wall-item .sa-feedback-card.vx-r:not(.vx-in) { transform:translateY(28px) scale(.98); }

@media (max-width:900px) { .vx-trust-top { grid-template-columns:1fr; justify-items:center; text-align:center; } .vx-trust-top .vx-hero-meta { justify-content:center; } .vx-trust-top .vx-hero-sub { margin-inline:auto; } .vx-dial { width:220px; height:220px; } }

/* =========================================================
   11e. SYSTEM MONITOR — status
   ========================================================= */
.vx-mon { position:relative; overflow:hidden; border-radius:24px; background:linear-gradient(170deg, rgba(14,20,18,.6), rgba(8,8,12,.95)); border:1px solid rgba(74,222,128,.14); box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); animation:vxpBoxIn .9s .2s cubic-bezier(.16,1,.3,1) both; }
.vx-mon::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px); }
.vx-mon::after { content:""; position:absolute; left:0; right:0; top:-30%; height:30%; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(74,222,128,.06), transparent); animation:vxScan 6s linear infinite; }
@keyframes vxScan { to { top:110%; } }
.vx-mon-head { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 22px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.015); }
.vx-mon-head > span:first-child { display:inline-flex; align-items:center; gap:9px; color:#4ade80; font-size:10.5px; font-weight:800; letter-spacing:.24em; }
.vx-mon-head > span:first-child i { position:relative; width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; }
.vx-mon-head > span:first-child i::after { content:""; position:absolute; inset:0; border-radius:50%; background:#4ade80; animation:vxcPing 1.6s ease-out infinite; }
.vx-mon-clock { color:#8f879c; font:700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.1em; }
.vx-mon-list { display:flex; flex-direction:column; }
.vx-mon-group { display:flex; align-items:center; gap:12px; padding:18px 22px 8px; color:#8d82a0; font-size:10.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.vx-mon-group i { flex:1; height:1px; background:linear-gradient(90deg, rgba(155,92,255,.3), transparent); }
.vx-mon-group em { font-style:normal; color:#b98bff; }
.vx-mon-row { position:relative; display:grid; grid-template-columns:34px 44px minmax(0,1fr) 170px auto; align-items:center; gap:16px; padding:14px 22px; border-top:1px solid rgba(255,255,255,.04); color:inherit !important; transition:background .25s ease; }
.vx-mon-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--st); box-shadow:0 0 12px var(--st); transform:scaleY(0); transition:transform .3s ease; }
.vx-mon-row:hover { background:linear-gradient(90deg, color-mix(in srgb, var(--st) 8%, transparent), transparent 60%); }
.vx-mon-row:hover::before { transform:scaleY(1); }
.vx-mon-id { color:#5b5268; font:800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.vx-mon-img { width:44px; height:44px; border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,.08); transition:transform .4s cubic-bezier(.3,1.3,.4,1); }
.vx-mon-img--empty { display:grid; place-items:center; background:rgba(139,92,246,.12); color:#c9a6ff; font-weight:900; }
.vx-mon-row:hover .vx-mon-img { transform:scale(1.1) rotate(-4deg); }
.vx-mon-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ece6f5; font-size:15px; font-weight:750; }
.vx-mon-ekg { width:170px; height:34px; overflow:visible; }
.vx-mon-ekg path { fill:none; stroke:var(--st); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:320; stroke-dashoffset:320; filter:drop-shadow(0 0 4px var(--st)); animation:vxEkg 2.6s linear infinite; animation-delay:calc(var(--i) * -.35s); }
@keyframes vxEkg { 0% { stroke-dashoffset:320; opacity:1; } 70% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
.vx-mon-state { display:inline-flex; align-items:center; gap:8px; justify-self:end; height:32px; padding:0 14px; border-radius:999px; border:1px solid color-mix(in srgb, var(--st) 40%, transparent); background:color-mix(in srgb, var(--st) 10%, transparent); color:var(--st); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.vx-mon-state i { position:relative; width:7px; height:7px; border-radius:50%; background:var(--st); box-shadow:0 0 10px var(--st); }
.vx-mon-state i::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--st); animation:vxcPing 1.8s ease-out infinite; }
@media (max-width:760px) {
  .vx-mon-row { grid-template-columns:40px minmax(0,1fr) auto; gap:12px; padding:12px 14px; }
  .vx-mon-id, .vx-mon-ekg { display:none; }
  .vx-mon-name { font-size:14px; }
}

/* =========================================================
   11f. CHECKOUT BAY — cart page
   ========================================================= */
.vx-steps { display:flex; align-items:center; gap:12px; margin-bottom:30px; animation:vxpFadeUp .7s .3s cubic-bezier(.16,1,.3,1) both; }
.vx-step { display:flex; align-items:center; gap:10px; flex-shrink:0; color:#554c62; font-size:10.5px; font-weight:800; letter-spacing:.2em; }
.vx-step b { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; border:1px solid rgba(255,255,255,.08); font-size:11px; }
.vx-step.is-on { color:#e6d7ff; }
.vx-step.is-on b { border-color:transparent; background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; box-shadow:0 0 20px rgba(139,92,246,.6); }
.vx-steps > i { position:relative; flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; }
.vx-steps > i em { position:absolute; top:0; left:-40%; width:40%; height:100%; background:linear-gradient(90deg,transparent,#b98bff,transparent); animation:vxcFlow 2.2s linear infinite; }
.vx-bay-loading { display:flex; flex-direction:column; gap:12px; }
.vx-skel { height:110px; border-radius:20px; background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(155,92,255,.1), rgba(255,255,255,.03)); background-size:200% 100%; animation:vxcShimmer 1.3s linear infinite; }
.vx-bay-layout { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:30px; align-items:start; }
.vx-bay-items { display:flex; flex-direction:column; gap:12px; }
.vx-bay-msgs p { margin:0 0 8px; padding:12px 14px; border:1px solid rgba(217,119,6,.3); border-radius:12px; background:rgba(217,119,6,.07); color:#e7b670; font-size:13px; }
.vx-bay-item { position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:auto 76px minmax(0,1fr) auto; align-items:center; gap:18px; padding:16px 20px 16px 16px; border:1px solid rgba(255,255,255,.07); border-radius:20px; background:linear-gradient(170deg, rgba(22,17,34,.8), rgba(10,8,16,.92)); transition:border-color .3s ease, box-shadow .3s ease; }
.vx-bay-item::after { content:""; position:absolute; top:0; left:0; width:35%; height:1px; background:linear-gradient(90deg,transparent,#e2cfff,transparent); opacity:0; }
.vx-bay-item:hover { border-color:rgba(170,120,255,.35); box-shadow:0 20px 50px rgba(30,8,70,.45); }
.vx-bay-item:hover::after { opacity:1; animation:vexRowEdgeRun 1.4s cubic-bezier(.4,0,.2,1) infinite; }
.vx-bay-no { color:rgba(255,255,255,.12); font-size:26px; font-weight:900; letter-spacing:-.05em; width:36px; }
.vx-bay-thumb { width:76px; height:76px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08); display:grid; place-items:center; background:#0c0a12; color:#b98bff; font-weight:900; }
.vx-bay-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.vx-bay-item:hover .vx-bay-thumb img { transform:scale(1.1); }
.vx-bay-info { min-width:0; display:flex; flex-direction:column; gap:4px; }
.vx-bay-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f2edf8 !important; font-size:16px; font-weight:800; }
.vx-bay-name:hover { color:#d4bdff !important; }
.vx-bay-variant { color:#7e768b; font-size:12.5px; }
.vx-bay-addons { display:flex; flex-wrap:wrap; gap:5px; }
.vx-bay-addons > span { padding:3px 8px; border-radius:999px; background:rgba(139,92,246,.1); color:#b8a2d8; font-size:11px; }
.vx-bay-ctrl { display:flex; align-items:center; gap:10px; margin-top:8px; }
.vx-qty { display:inline-flex; align-items:center; height:34px; border:1px solid rgba(255,255,255,.1); border-radius:10px; overflow:hidden; background:rgba(0,0,0,.25); }
.vx-qty button { width:34px; height:100%; border:0; background:transparent; color:#a68ec8; font-size:16px; cursor:pointer; transition:all .15s ease; }
.vx-qty button:hover { background:rgba(139,92,246,.22); color:#fff; }
.vx-qty span { min-width:30px; text-align:center; color:#fff; font-weight:800; font-size:13px; }
.vx-bay-remove { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:transparent; color:#7e768b; font-size:12px; font-weight:700; cursor:pointer; transition:all .2s ease; }
.vx-bay-remove svg { width:14px; height:14px; }
.vx-bay-remove:hover { color:#ff8fa8; border-color:rgba(255,90,130,.35); background:rgba(255,90,130,.08); }
.vx-bay-price { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.vx-bay-price strong { font-size:20px; font-weight:900; letter-spacing:-.03em; background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vx-bay-price s { color:#5d5669; font-size:12px; }
.vx-bay-price small { color:#7e768b; font-size:11px; }
.vx-bay-price em { font-style:normal; color:#4ade80; font-size:11px; font-weight:800; }
.vx-bay-deals { padding:16px 18px; border:1px dashed rgba(155,92,255,.3); border-radius:16px; color:#b8a2d8; font-size:13px; }
.vx-bay-deals b { display:block; margin-bottom:6px; color:#fff; }
.vx-bay-side { position:sticky; top:96px; }
.vx-sum-row { display:flex; justify-content:space-between; padding:6px 0; color:#8f879c; font-size:13.5px; }
.vx-sum-row span:last-child { color:#d8cfe4; font-weight:700; }
.vx-sum-row.is-save span:last-child { color:#4ade80; }
.vx-sum-total { display:flex; align-items:flex-end; justify-content:space-between; margin-top:10px; padding-top:16px; border-top:1px dashed rgba(255,255,255,.1); color:#a898bb; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.vx-sum-total strong { font-size:34px; font-weight:900; letter-spacing:-.04em; text-transform:none; background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 16px rgba(155,92,255,.35)); }
.vx-sum-note { margin:10px 0 18px; color:#5f5869; font-size:12px; }
.vx-sum-error { margin:12px 0 0; color:#ff8fa8; font-size:13px; }
.vx-sum-clear { display:block; margin:14px auto 0; border:0; background:none; color:#6f6580; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:color .2s ease; }
.vx-sum-clear:hover { color:#ff8fa8; }
@media (max-width:1023px) { .vx-bay-layout { grid-template-columns:1fr; } .vx-bay-side { position:relative; top:0; } }
@media (max-width:640px) {
  .vx-bay-item { grid-template-columns:60px minmax(0,1fr); gap:12px; padding:14px; }
  .vx-bay-no { display:none; }
  .vx-bay-thumb { width:60px; height:60px; }
  .vx-bay-price { grid-column:2; align-items:flex-start; }
  .vx-step span { display:none; }
}

/* =========================================================
   11g. PROTOCOL — legal pages
   ========================================================= */
.vx-legal-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; pointer-events:none; }
.vx-legal-progress span { display:block; height:100%; width:0; background:linear-gradient(90deg,#6d28d9,#b98bff,#fff); box-shadow:0 0 14px rgba(155,92,255,.9); transition:width .1s linear; }
.vx-legal { display:grid; grid-template-columns:260px minmax(0,1fr); gap:40px; align-items:start; }
.vx-legal-toc { position:sticky; top:100px; padding:20px; border:1px solid rgba(255,255,255,.07); border-radius:20px; background:rgba(255,255,255,.02); animation:vxpFadeUp .8s .3s cubic-bezier(.16,1,.3,1) both; }
.vx-legal-toc[hidden] { display:none; }
.vx-legal-toc-label { display:flex; align-items:center; gap:9px; margin-bottom:14px; color:#6f6580; font-size:10px; font-weight:800; letter-spacing:.24em; }
.vx-legal-toc-label i { width:7px; height:7px; border-radius:2px; transform:rotate(45deg); background:#a878ff; box-shadow:0 0 8px #a878ff; }
.vx-legal-toc ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; counter-reset:toc; }
.vx-legal-toc a { position:relative; display:flex; gap:10px; padding:8px 10px; border-radius:10px; color:#8a8196 !important; font-size:13px; font-weight:600; line-height:1.4; transition:all .25s ease; }
.vx-legal-toc a::before { counter-increment:toc; content:counter(toc, decimal-leading-zero); color:#5a4a78; font-size:11px; font-weight:800; padding-top:1px; transition:color .25s ease; }
.vx-legal-toc a:hover { color:#fff !important; background:rgba(255,255,255,.03); }
.vx-legal-toc a.is-active { color:#fff !important; background:linear-gradient(90deg, rgba(139,92,246,.22), rgba(139,92,246,.04)); box-shadow:inset 2px 0 0 #a878ff; }
.vx-legal-toc a.is-active::before { color:#c9a6ff; }
.vx-legal-doc { position:relative; isolation:isolate; overflow:hidden; padding:44px 48px; border-radius:24px; background:linear-gradient(170deg, rgba(22,17,34,.8), rgba(10,8,16,.95)); border:1px solid rgba(255,255,255,.07); box-shadow:0 30px 80px rgba(0,0,0,.45); animation:vxpBoxIn .9s .2s cubic-bezier(.16,1,.3,1) both; grid-column:2; }
.vx-legal-toc[hidden] + .vx-legal-doc { grid-column:1 / -1; max-width:860px; margin:0 auto; width:100%; }
.vx-legal-doc::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(200,160,255,.7),transparent); }
.vx-legal-stamp { position:absolute; top:22px; right:-44px; transform:rotate(35deg); padding:6px 50px; background:linear-gradient(90deg,#7c3aed,#a36bff); color:#fff; font-size:8.5px; font-weight:900; letter-spacing:.2em; box-shadow:0 4px 18px rgba(139,92,246,.5); }
.vx-legal-body h2, .vx-legal-body h3 { scroll-margin-top:110px; }
.vx-legal-body > *:first-child { margin-top:0 !important; }
@media (max-width:1023px) { .vx-legal { grid-template-columns:1fr; } .vx-legal-toc { position:relative; top:0; } .vx-legal-doc { grid-column:1; padding:30px 22px; } .vx-legal-stamp { display:none; } }

@media (prefers-reduced-motion: reduce) {
  .vx-page *, .vx-page *::before, .vx-page *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}


/* =========================================================
   11h. DROP CHECKOUT FLOW — product form
   ========================================================= */
.vxf-step { position:relative; margin-bottom:22px; padding-bottom:22px; border-bottom:1px dashed rgba(255,255,255,.08); animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--s,0) * 120ms + 250ms); }
.vxf-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.vxf-no { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; font-size:10.5px; font-weight:900; box-shadow:0 0 16px rgba(139,92,246,.5); flex-shrink:0; }
.vxf-label { color:#fff !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.2em; text-transform:uppercase; margin:0 !important; }
.vxf-meta { margin-left:auto; color:#6f6580; font-size:9.5px; font-weight:800; letter-spacing:.2em; }
.vxf-meta--live { display:inline-flex; align-items:center; gap:7px; color:#4ade80; }
.vxf-meta--live i { width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:vxnBadge 1.8s ease-in-out infinite; }
.vxf-head--cta { margin-top:4px; }

/* plan tiles */
.vxf-plans { display:flex; flex-direction:column; gap:10px; }
.vxf-plan {
  position:relative; display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px 16px 16px; overflow:hidden; isolation:isolate; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.025); color:#ece6f5;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.3,1.3,.4,1);
  animation:vxpFadeUp .55s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 70ms + 350ms);
}
.vxf-plan::before { content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s ease; background:radial-gradient(260px circle at 0% 50%, rgba(155,92,255,.28), transparent 70%); }
.vxf-plan::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:35%; z-index:-1; background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent); transform:skewX(-20deg); pointer-events:none; }
.vxf-plan:hover:not(:disabled) { border-color:rgba(170,120,255,.4); transform:translateX(4px); }
.vxf-plan:hover:not(:disabled)::before { opacity:.6; }
.vxf-plan.is-active { border-color:rgba(200,160,255,.75); background:linear-gradient(135deg, rgba(155,92,255,.16), rgba(109,40,217,.06)); box-shadow:0 0 0 3px rgba(139,92,246,.14), 0 14px 36px rgba(60,20,130,.35), 0 0 26px rgba(139,92,246,.25); }
.vxf-plan.is-active::before { opacity:1; }
.vxf-plan.is-active::after { animation:vxpShine 1s ease both; }
.vxf-plan:disabled { opacity:.45; cursor:not-allowed; }
.vxf-radio { position:relative; flex-shrink:0; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; border:2px solid rgba(255,255,255,.2); transition:all .35s cubic-bezier(.3,1.5,.4,1); }
.vxf-radio svg { width:13px; height:13px; color:#fff; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .35s ease .1s; }
.vxf-plan.is-active .vxf-radio { border-color:transparent; background:linear-gradient(135deg,#b98bff,#6d28d9); box-shadow:0 0 14px rgba(155,92,255,.8); transform:scale(1.1); }
.vxf-plan.is-active .vxf-radio svg { stroke-dashoffset:0; }
.vxf-plan-img { width:44px; height:44px; border-radius:11px; object-fit:cover; border:1px solid rgba(255,255,255,.1); }
.vxf-plan-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.vxf-plan-name { font-size:15px; font-weight:800; color:#f4effa; letter-spacing:-.01em; }
.vxf-plan-desc { color:#8a8196; font-size:12px; line-height:1.45; white-space:pre-line; }
.vxf-plan-stock b { display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.vxf-plan-stock i { width:6px; height:6px; border-radius:50%; }
.vxf-plan-stock .is-in { color:#4ade80; } .vxf-plan-stock .is-in i { background:#4ade80; box-shadow:0 0 8px #4ade80; animation:vxnBadge 2s ease-in-out infinite; }
.vxf-plan-stock .is-low { color:#fbbf24; } .vxf-plan-stock .is-low i { background:#fbbf24; box-shadow:0 0 8px #fbbf24; animation:vxnBadge 1.2s ease-in-out infinite; }
.vxf-plan-stock .is-out { color:#ff7b9c; }
.vxf-plan-price { display:flex; flex-direction:column; align-items:flex-end; line-height:1.05; }
.vxf-plan-price s { color:#5d5669; font-size:11.5px; }
.vxf-plan-price strong { font-size:19px; font-weight:900; letter-spacing:-.03em; color:#e6dcf3; transition:all .3s ease; }
.vxf-plan.is-active .vxf-plan-price strong { background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; transform:scale(1.08); transform-origin:right; }
.vxf-plan-save { position:absolute; top:0; right:16px; padding:3px 8px 4px; border-radius:0 0 8px 8px; background:linear-gradient(135deg,#22c55e,#15803d); color:#fff; font-size:9px; font-weight:900; letter-spacing:.08em; box-shadow:0 4px 12px rgba(34,197,94,.35); }
.vxf-plan-save ~ .vxf-plan-price, .vxf-plan:has(.vxf-plan-save) .vxf-plan-price { padding-top:8px; }

/* other selector styles (pills / cards / dropdown) inherit the look */
.vxf-step .vxp-variant { border-radius:12px !important; }
.vxf-step > .relative > button.input { height:52px; border-radius:14px !important; font-weight:700; }

/* quantity */
.vxf-qty-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.vxf-qty-hint { display:inline-flex; align-items:center; gap:8px; color:#8a8196; font-size:12.5px; }
.vxf-qty-hint i { width:6px; height:6px; border-radius:50%; background:#a878ff; box-shadow:0 0 8px #a878ff; }
.vxf-stepper { height:48px !important; border-radius:14px !important; overflow:hidden; background:rgba(0,0,0,.25) !important; border:1px solid rgba(255,255,255,.1) !important; }
.vxf-stepper button { width:46px !important; height:100% !important; color:#b89be0 !important; transition:background .15s ease, color .15s ease, transform .15s ease !important; }
.vxf-stepper button:hover:not(:disabled) { background:rgba(139,92,246,.25) !important; color:#fff !important; }
.vxf-stepper button:active:not(:disabled) svg { transform:scale(.7); }
.vxf-stepper button svg { transition:transform .15s ease; }
.vxf-stepper input { width:56px !important; height:100% !important; background:transparent !important; color:#fff !important; font-size:17px !important; font-weight:900 !important; text-align:center; border-color:rgba(255,255,255,.08) !important; }
.vxf-volume { border-radius:14px !important; border-color:rgba(155,92,255,.25) !important; background:linear-gradient(135deg, rgba(139,92,246,.1), rgba(139,92,246,.02)) !important; }
.vxf-volume .bg-accent-500 { background:linear-gradient(90deg,#6d28d9,#b98bff) !important; box-shadow:0 0 10px rgba(155,92,255,.8); }

/* CTAs */
.vxf-ctas { margin-top:0 !important; }
.vxf-ctas .sa-add-to-cart, .vxf-ctas .vxp-buynow { min-height:56px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.sa-product-form [class*="border-b border-theme"] { border-color:rgba(255,255,255,.07) !important; }
.sa-product-form label.block.mb-2 { color:#fff; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }

/* ---- buy form: cashback, add-ons, deals, bundles ---- */
.vxf-cashback { display:flex; align-items:center; gap:12px; margin:0 0 22px; padding:13px 16px; border:1px solid rgba(74,222,128,.25); border-radius:14px; background:linear-gradient(90deg, rgba(74,222,128,.1), rgba(74,222,128,.02)); animation:vxpFadeUp .6s .3s cubic-bezier(.16,1,.3,1) both; }
.vxf-cashback-icon { width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; background:rgba(74,222,128,.15); color:#4ade80; }
.vxf-cashback-icon svg { width:16px; height:16px; animation:vxcFloat 3s ease-in-out infinite; }
.vxf-cashback p { margin:0; color:#bfe9cd; font-size:12.5px; font-weight:600; }

.vxf-addons, .vxf-deals { display:flex; flex-direction:column; gap:9px; }
.vxf-addon { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:11px 13px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.02); transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.3,1.3,.4,1); animation:vxpFadeUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i,0) * 70ms + 300ms); }
.vxf-addon:hover { border-color:rgba(170,120,255,.35); background:rgba(139,92,246,.06); transform:translateX(3px); }
.vxf-addon.is-on { border-color:rgba(74,222,128,.4); background:linear-gradient(90deg, rgba(74,222,128,.08), rgba(255,255,255,.015)); }
.vxf-addon-img { width:42px; height:42px; border-radius:11px; object-fit:cover; border:1px solid rgba(255,255,255,.08); transition:transform .4s cubic-bezier(.3,1.3,.4,1); }
.vxf-addon-img--empty { display:grid; place-items:center; background:rgba(139,92,246,.14); color:#c9a6ff; font-weight:900; }
.vxf-addon:hover .vxf-addon-img { transform:scale(1.08) rotate(-4deg); }
.vxf-addon-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.vxf-addon-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ece6f5; font-size:13.5px; font-weight:700; }
.vxf-addon-desc { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7e768b; font-size:11.5px; }
.vxf-addon-price { color:#e6d7ff; font-size:14px; font-weight:800; white-space:nowrap; }
.vxf-addon-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border:1px solid rgba(170,120,255,.35); border-radius:10px; background:rgba(139,92,246,.1); color:#d4bdff; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .2s ease; }
.vxf-addon-btn svg { width:13px; height:13px; }
.vxf-addon-btn:hover:not(:disabled) { color:#fff; background:rgba(139,92,246,.24); border-color:rgba(200,160,255,.6); box-shadow:0 0 16px rgba(139,92,246,.35); }
.vxf-addon-btn.is-added { border-color:rgba(74,222,128,.4); background:rgba(74,222,128,.1); color:#8ae0a6; }
.vxf-addon-btn.is-added i { font-style:normal; opacity:0; width:0; overflow:hidden; transition:all .25s ease; }
.vxf-addon-btn.is-added:hover:not(:disabled) { color:#ff9db2; border-color:rgba(255,90,130,.45); background:rgba(255,90,130,.1); box-shadow:none; }
.vxf-addon-btn.is-added:hover:not(:disabled) i { opacity:1; width:10px; }
.vxf-addon-btn:disabled { opacity:.7; cursor:default; }

.vxf-deal { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:13px 15px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.02); overflow:hidden; transition:all .25s ease; animation:vxpFadeUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i,0) * 70ms + 300ms); }
.vxf-deal:hover { border-color:rgba(170,120,255,.35); }
.vxf-deal.is-on { border-color:rgba(74,222,128,.45); background:linear-gradient(90deg, rgba(74,222,128,.09), rgba(255,255,255,.015)); }
.vxf-deal-tag { display:grid; place-items:center; min-width:52px; height:34px; padding:0 10px; border-radius:10px; background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; font-size:12px; font-weight:900; letter-spacing:-.02em; box-shadow:0 0 18px rgba(139,92,246,.5); animation:vxnBadge 2.4s ease-in-out infinite; }
.vxf-deal.is-on .vxf-deal-tag { background:linear-gradient(135deg,#4ade80,#15803d); box-shadow:0 0 18px rgba(74,222,128,.5); }
.vxf-deal-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.vxf-deal-name { color:#ece6f5; font-size:13.5px; font-weight:750; }
.vxf-deal-desc { color:#8a8196; font-size:11.5px; line-height:1.45; }
.vxf-deal-desc b { color:#b98bff; font-weight:700; }
.vxf-deal-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; white-space:nowrap; border:1px solid rgba(170,120,255,.35); border-radius:10px; background:rgba(139,92,246,.1); color:#d4bdff; font-size:11px; font-weight:800; cursor:pointer; transition:all .2s ease; }
.vxf-deal-btn svg { width:13px; height:13px; transition:transform .25s cubic-bezier(.3,1.5,.4,1); }
.vxf-deal-btn:hover { color:#fff; background:rgba(139,92,246,.24); border-color:rgba(200,160,255,.6); box-shadow:0 0 16px rgba(139,92,246,.35); }
.vxf-deal-btn:hover svg { transform:translateX(3px); }
.vxf-deal-on { display:inline-flex; align-items:center; gap:6px; color:#4ade80; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.vxf-deal-on svg { width:13px; height:13px; }

.vxf-bundles .vxf-bundle { border:1px solid rgba(255,255,255,.07); border-radius:16px; background:rgba(255,255,255,.02); transition:border-color .25s ease; }
.vxf-bundles .vxf-bundle:hover { border-color:rgba(170,120,255,.3); }
.vxf-bundles .rounded-input { border-radius:10px !important; }

@media (max-width:520px) {
  .vxf-addon { grid-template-columns:auto minmax(0,1fr) auto; row-gap:8px; }
  .vxf-addon-btn { grid-column:3; }
  .vxf-addon-price { grid-column:2; justify-self:end; }
  .vxf-deal { grid-template-columns:auto minmax(0,1fr); }
  .vxf-deal-btn, .vxf-deal-on { grid-column:2; justify-self:start; }
}

/* ---- login: terminal bar, dust, sweep ---- */
.vxl-card { padding-top:0 !important; }
.vxl-bar { display:flex; align-items:center; justify-content:space-between; height:44px; margin:0 -22px 14px; padding:0 20px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.015); }
.vxl-bar-label { color:#6f6580; font-size:9px; font-weight:800; letter-spacing:.22em; }
.vxl-bar-live { display:inline-flex; align-items:center; gap:7px; color:#4ade80; font-size:9px; font-weight:800; letter-spacing:.2em; }
.vxl-bar-live i { position:relative; width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; }
.vxl-bar-live i::after { content:""; position:absolute; inset:0; border-radius:50%; background:#4ade80; animation:vxcPing 1.8s ease-out infinite; }
.vxl-dust { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; border-radius:inherit; }
.vxl-dust i { position:absolute; bottom:-8px; width:2px; height:2px; border-radius:50%; background:#c4a4ff; box-shadow:0 0 6px #a87bff; opacity:0; animation:vxcRise 9s linear infinite; }
.vxl-dust i:nth-child(1) { left:8%; animation-delay:0s; }
.vxl-dust i:nth-child(2) { left:22%; animation-delay:-1.6s; animation-duration:11s; }
.vxl-dust i:nth-child(3) { left:35%; animation-delay:-3.1s; }
.vxl-dust i:nth-child(4) { left:48%; animation-delay:-4.7s; animation-duration:12s; }
.vxl-dust i:nth-child(5) { left:61%; animation-delay:-6.2s; }
.vxl-dust i:nth-child(6) { left:74%; animation-delay:-2.4s; animation-duration:10s; }
.vxl-dust i:nth-child(7) { left:86%; animation-delay:-7.8s; }
.vxl-dust i:nth-child(8) { left:94%; animation-delay:-5.3s; animation-duration:13s; }
.vxl-sweep { position:absolute; left:0; right:0; top:-40%; height:40%; z-index:3; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(155,92,255,.07), transparent); animation:vxlSweep 7s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes vxlSweep { 0% { top:-40%; } 55%,100% { top:110%; } }
.vxl-card .vxl-hero { margin-top:4px; }

/* ---- scroll progress + magnetic buttons ---- */
.vx-scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:2147482000; pointer-events:none; }
.vx-scroll-progress i { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#4c1d95,#9b5cff,#e6d7ff); box-shadow:0 0 12px rgba(155,92,255,.8); }
[data-vx-mag] { transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease, border-color .25s ease; }
[data-vx-mag]:hover { transition-duration:.12s; }
[data-vx-tilt2] { transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
@media (prefers-reduced-motion: reduce) { .vx-scroll-progress { display:none; } }

/* =========================================================
   12. VEXDROP HOME
   ========================================================= */
.vx-home { position:relative; overflow:clip; }

/* ---- hero ---- */
.vx-home-hero { position:relative; min-height:min(92vh, 900px); display:flex; align-items:center; padding:60px 0 90px; }
.vx-home-hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.vxh-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 35%, #000 10%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 60% 35%, #000 10%, transparent 75%); animation:vxcGrid 26s linear infinite; }
.vxh-beam { position:absolute; border-radius:50%; filter:blur(70px); }
.vxh-beam.b1 { top:-180px; right:-80px; width:620px; height:520px; background:radial-gradient(circle, rgba(139,92,246,.35), transparent 65%); animation:vxcAura 14s ease-in-out infinite; }
.vxh-beam.b2 { bottom:-240px; left:-140px; width:560px; height:460px; background:radial-gradient(circle, rgba(76,29,149,.4), transparent 70%); animation:vxcAura 18s -4s ease-in-out infinite; }
.vx-home-hero-inner { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:40px; }
.vx-home-title { font-size:clamp(44px, 6.3vw, 100px) !important; overflow-wrap:normal !important; word-break:keep-all; hyphens:none; }
.vx-home-title em { font-style:normal; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.5px rgba(200,160,255,.75); }
.vx-home-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; animation:vxpFadeUp .8s .3s cubic-bezier(.16,1,.3,1) both; }
.vx-btn-ghost { display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 22px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(255,255,255,.02); color:#d6c8ec !important; font-size:12px; font-weight:800; letter-spacing:.14em; transition:all .25s cubic-bezier(.3,1.3,.4,1); }
.vx-btn-ghost svg { width:15px; height:15px; transition:transform .3s cubic-bezier(.3,1.4,.4,1); }
.vx-btn-ghost:hover { color:#fff !important; border-color:rgba(170,120,255,.5); background:rgba(139,92,246,.12); box-shadow:0 0 24px rgba(139,92,246,.25); }
.vx-btn-ghost:hover svg { transform:translate(3px,-3px); }
.vx-home-hero .vx-hero-stats { margin-top:40px; max-width:600px; }

/* logo stage */
.vx-home-decor { width:min(520px, 100%) !important; height:min(520px, 62vw) !important; }
.vx-home-logo { position:relative; width:100%; height:100%; display:grid; place-items:center; }
.vx-home-logo img { position:relative; z-index:3; width:62%; max-width:320px; height:auto; filter:drop-shadow(0 0 40px rgba(155,92,255,.65)); animation:vxcFloat 6s ease-in-out infinite; }
.vx-home-logo .ring { position:absolute; border-radius:50%; }
.vx-home-logo .r1 { inset:2%; border:1px solid rgba(155,92,255,.18); background:repeating-conic-gradient(from 0deg, rgba(170,120,255,.28) 0 1.5deg, transparent 1.5deg 12deg); -webkit-mask:radial-gradient(circle, transparent 66%, #000 67%, #000 72%, transparent 73%); mask:radial-gradient(circle, transparent 66%, #000 67%, #000 72%, transparent 73%); animation:vexSpinClockwise 40s linear infinite; }
.vx-home-logo .r2 { inset:16%; border:1px dashed rgba(200,160,255,.28); animation:vexSpinCounter 22s linear infinite; }
.vx-home-logo .r3 { inset:28%; border:2px solid transparent; border-top-color:rgba(200,160,255,.85); border-right-color:rgba(155,92,255,.25); filter:drop-shadow(0 0 10px #8b5cf6); animation:vexSpinClockwise 7s cubic-bezier(.6,0,.4,1) infinite; }
.vx-home-logo .orbit { position:absolute; border-radius:50%; }
.vx-home-logo .orbit.o1 { inset:6%; animation:vexSpinClockwise 12s linear infinite; }
.vx-home-logo .orbit.o2 { inset:22%; animation:vexSpinCounter 9s linear infinite; }
.vx-home-logo .orbit b { position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#e6d7ff; box-shadow:0 0 18px #a878ff; }
.vx-home-logo .orbit.o2 b { width:6px; height:6px; margin-left:-3px; background:#8b5cf6; }
.vx-home-logo .glow { position:absolute; inset:24%; border-radius:50%; background:radial-gradient(circle, rgba(139,92,246,.35), transparent 70%); filter:blur(24px); animation:vxCore 5s ease-in-out infinite; }

.vx-home-scroll { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; color:#544c62; font-size:8.5px; font-weight:800; letter-spacing:.34em; animation:vxpFadeUp 1s 1s cubic-bezier(.16,1,.3,1) both; }
.vx-home-scroll i { width:1px; height:40px; background:linear-gradient(180deg, rgba(155,92,255,.8), transparent); animation:vxScrollLine 2.4s ease-in-out infinite; }
@keyframes vxScrollLine { 0%,100% { opacity:.3; transform:scaleY(.6); transform-origin:top; } 50% { opacity:1; transform:scaleY(1); } }

/* ---- ticker ---- */
.vx-ticker { position:relative; padding:18px 0; border-block:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.015); overflow:hidden; }
.vx-ticker-row { display:flex; width:max-content; animation:vxTicker 34s linear infinite; }
.vx-ticker-track { display:flex; align-items:center; gap:26px; padding-right:26px; }
.vx-ticker-track span { color:#8a8196; font-size:15px; font-weight:900; letter-spacing:.12em; white-space:nowrap; }
.vx-ticker-track i { color:#7c3aed; font-style:normal; font-size:11px; }
@keyframes vxTicker { to { transform:translateX(-50%); } }
.vx-ticker:hover .vx-ticker-row { animation-play-state:paused; }

/* ---- sections ---- */
.vx-home-section { position:relative; padding:96px 0; }
.vx-home-head { max-width:720px; margin-bottom:46px; }
.vx-home-head p { margin:18px 0 0; color:#8a8196; font-size:16px; line-height:1.65; }
.vx-home-h2 { position:relative; margin:18px 0 0; font-size:clamp(34px, 4.6vw, 62px); font-weight:900; line-height:1; letter-spacing:-.045em; text-transform:uppercase;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,#caa8ff 50%,#fff 62%,#fff 100%); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:vexBrandShine 7s ease-in-out infinite; }
.vx-home-h2 em { font-style:normal; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.2px rgba(200,160,255,.7); }

/* services */
.vx-serv { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:16px; perspective:1400px; }
.vx-serv-card h3 { font-size:17px !important; }
.vx-serv-card { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:10px; padding:26px 24px 22px; border:1px solid rgba(255,255,255,.07); border-radius:22px; background:linear-gradient(170deg, rgba(24,18,38,.8), rgba(10,8,16,.94)); color:inherit !important; transition:border-color .35s ease, box-shadow .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.vx-serv-frame { position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s ease; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.1) 0 55%, #ecdcff 75%, rgba(155,92,255,.1) 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 3s linear infinite; }
.vx-serv-spot { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(320px circle at var(--mx,50%) var(--my,30%), rgba(160,110,255,.18), transparent 62%); }
.vx-serv-card:hover { border-color:transparent; box-shadow:0 30px 70px rgba(20,6,50,.55), 0 0 40px rgba(139,92,246,.2); }
.vx-serv-card:hover .vx-serv-frame, .vx-serv-card:hover .vx-serv-spot { opacity:1; }
.vx-serv-no { position:absolute; top:18px; right:20px; font-size:34px; font-weight:900; letter-spacing:-.05em; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12); transition:all .4s ease; }
.vx-serv-card:hover .vx-serv-no { -webkit-text-stroke-color:rgba(200,160,255,.65); }
.vx-serv-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(140deg, rgba(155,92,255,.25), rgba(109,40,217,.08)); color:#d4bdff; box-shadow:inset 0 0 0 1px rgba(170,120,255,.28); }
.vx-serv-icon svg { width:24px; height:24px; transition:transform .5s cubic-bezier(.3,1.4,.4,1); }
.vx-serv-card:hover .vx-serv-icon svg { transform:scale(1.15) rotate(-8deg); }
.vx-serv-tag { align-self:flex-start; margin-top:6px; padding:4px 10px; border-radius:999px; background:rgba(139,92,246,.14); color:#c9a6ff; font-size:8.5px; font-weight:800; letter-spacing:.2em; }
.vx-serv-card h3 { margin:2px 0 0; color:#f3eefa; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.vx-serv-card p { margin:0; color:#8a8196; font-size:13.5px; line-height:1.6; }
.vx-serv-go { display:inline-flex; align-items:center; gap:8px; margin-top:8px; color:#7a6d8c; font-size:10px; font-weight:800; letter-spacing:.2em; transition:color .25s ease, gap .25s ease; }
.vx-serv-go b { transition:transform .3s cubic-bezier(.3,1.4,.4,1); }
.vx-serv-card:hover .vx-serv-go { color:#d4bdff; gap:12px; }
.vx-serv-card:hover .vx-serv-go b { transform:translateX(4px); }

/* how it works */
.vx-how { padding-top:40px; }
.vx-how-line { position:relative; height:1px; margin:0 0 -30px; background:rgba(255,255,255,.07); overflow:hidden; }
.vx-how-line i { position:absolute; top:0; left:-30%; width:30%; height:100%; background:linear-gradient(90deg,transparent,#b98bff,transparent); box-shadow:0 0 14px rgba(155,92,255,.8); animation:vxcFlow 3.4s linear infinite; }
.vx-how-steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:26px; padding-top:46px; }
.vx-how-step { position:relative; padding-right:16px; }
.vx-how-step::before { content:""; position:absolute; top:-47px; left:0; width:13px; height:13px; border-radius:50%; background:#0a0810; border:2px solid #a878ff; box-shadow:0 0 16px rgba(155,92,255,.9); animation:vxnBadge 2.4s ease-in-out infinite; animation-delay:calc(var(--i) * .4s); }
.vx-how-no { display:block; font-size:44px; font-weight:900; letter-spacing:-.05em; line-height:1; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(200,160,255,.5); }
.vx-how-step h3 { margin:14px 0 8px; color:#fff; font-size:20px; font-weight:800; }
.vx-how-step p { margin:0; color:#8a8196; font-size:14px; line-height:1.65; }
.vx-how-note { display:flex; align-items:center; gap:16px; margin-top:52px; padding:20px 22px; border:1px solid rgba(74,222,128,.22); border-radius:20px; background:linear-gradient(90deg, rgba(74,222,128,.08), rgba(255,255,255,.015)); }
.vx-how-note-icon { width:46px; height:46px; flex-shrink:0; display:grid; place-items:center; border-radius:14px; background:rgba(74,222,128,.14); color:#4ade80; }
.vx-how-note-icon svg { width:22px; height:22px; animation:vxcFloat 3.4s ease-in-out infinite; }
.vx-how-note p { margin:0; color:#a8c7b4; font-size:14px; line-height:1.6; }
.vx-how-note b { color:#fff; }

/* why */
.vx-why { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:50px; align-items:center; }
.vx-why-copy p { margin:18px 0 26px; color:#8a8196; font-size:16px; line-height:1.7; }
.vx-why-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.vx-why-card { padding:24px 22px; border:1px solid rgba(255,255,255,.07); border-radius:20px; background:rgba(255,255,255,.02); transition:all .35s cubic-bezier(.2,.8,.2,1); }
.vx-why-card > span { display:grid; place-items:center; width:38px; height:38px; margin-bottom:14px; border-radius:12px; background:rgba(139,92,246,.14); color:#c9a6ff; font-size:15px; }
.vx-why-card h3 { margin:0 0 6px; color:#f3eefa; font-size:16px; font-weight:800; }
.vx-why-card p { margin:0; color:#8a8196; font-size:13px; line-height:1.55; }
.vx-why-card:hover { border-color:rgba(170,120,255,.35); background:rgba(139,92,246,.06); transform:translateY(-4px); box-shadow:0 20px 44px rgba(30,8,70,.4); }

/* final */
.vx-home-final { padding:40px 0 110px; }
.vx-final-card { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; padding:70px 30px; border-radius:32px; background:linear-gradient(170deg, rgba(30,22,52,.92), rgba(10,8,16,.96)); box-shadow:0 40px 100px rgba(0,0,0,.55); }
.vx-final-frame { position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.12) 0 55%, rgba(236,220,255,.9) 75%, rgba(155,92,255,.12) 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 7s linear infinite; }
.vx-final-orb { position:absolute; top:-140px; left:50%; width:600px; height:420px; margin-left:-300px; z-index:-1; border-radius:50%; background:radial-gradient(ellipse, rgba(139,92,246,.35), transparent 65%); filter:blur(30px); animation:vxcAura 12s ease-in-out infinite; }
.vx-final-card .vx-home-h2 { margin-top:14px; }
.vx-final-card > p { margin:20px 0 0; max-width:520px; color:#8f879c; font-size:16px; line-height:1.65; }
.vx-final-card .vx-home-ctas { justify-content:center; }

@media (max-width:1023px) {
  .vx-home-hero-inner { grid-template-columns:1fr; gap:20px; }
  .vx-home-decor { order:-1; width:min(360px,80vw) !important; height:min(360px,80vw) !important; justify-self:center !important; margin-inline:auto; }
  .vx-home-hero { min-height:0; padding:30px 0 70px; }
  .vx-home-scroll { display:none; }
  .vx-why { grid-template-columns:1fr; gap:32px; }
  .vx-home-section { padding:68px 0; }
}
@media (max-width:560px) {
  .vx-why-grid { grid-template-columns:1fr; }
  .vx-final-card { padding:48px 20px; border-radius:24px; }
  .vx-home-hero .vx-hero-stats { gap:0; }
  .vx-stat { flex-basis:100px; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-home *, .vx-home *::before, .vx-home *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* =========================================================
   13. 404 — SIGNAL LOST
   ========================================================= */
.vx404 { position:relative !important; isolation:isolate; display:flex !important; flex-direction:column; align-items:center; text-align:center; max-width:640px !important; margin:70px auto !important; padding:56px 30px !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:28px !important; background:linear-gradient(170deg, rgba(24,18,38,.85), rgba(10,8,16,.95)) !important; box-shadow:0 40px 100px rgba(0,0,0,.55) !important; animation:vxpBoxIn .9s cubic-bezier(.16,1,.3,1) both; overflow:hidden; }
.vx404::before { content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.12) 0 55%, rgba(236,220,255,.85) 75%, rgba(155,92,255,.12) 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 6s linear infinite; }
.vx404-art { position:relative; width:170px; height:170px; display:grid; place-items:center; margin-bottom:22px; }
.vx404-art .ring { position:absolute; border-radius:50%; border:1px solid rgba(155,92,255,.25); }
.vx404-art .r1 { inset:0; border-style:dashed; animation:vexSpinClockwise 24s linear infinite; }
.vx404-art .r2 { inset:26px; animation:vexSpinCounter 12s linear infinite; border-color:transparent; border-top-color:rgba(200,160,255,.8); }
.vx404-art .sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(170,120,255,.4), transparent 70deg); animation:vexSpinClockwise 2.6s linear infinite; }
.vx404-art .blip { position:absolute; top:26px; right:36px; width:7px; height:7px; border-radius:50%; background:#ff7a9a; box-shadow:0 0 14px #ff4d7a; animation:vxNfBlip 2.4s ease-out infinite; }
@keyframes vxNfBlip { 0%,40% { opacity:0; transform:scale(.4); } 50% { opacity:1; transform:scale(1.3); } 100% { opacity:0; transform:scale(.8); } }
.vx404-art .glyph { position:relative; z-index:2; font-size:52px; font-weight:900; letter-spacing:-.05em; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.5px rgba(200,160,255,.85); text-shadow:0 0 30px rgba(155,92,255,.5); animation:vexNfGlitch 3.4s steps(1) infinite; }
.vx404-kicker { display:inline-flex; align-items:center; gap:10px; color:#8d82a0; font-size:10px; font-weight:800; letter-spacing:.24em; }
.vx404-kicker i { width:7px; height:7px; border-radius:50%; background:#ff7a9a; box-shadow:0 0 10px #ff4d7a; animation:vxnBadge 1.8s ease-in-out infinite; }
.vx404-title { margin:14px 0 0 !important; font-size:clamp(32px, 5vw, 54px) !important; font-weight:900 !important; letter-spacing:-.04em; text-transform:uppercase; background:linear-gradient(100deg,#fff 0%,#fff 38%,#caa8ff 50%,#fff 62%,#fff 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:vexBrandShine 6s ease-in-out infinite; }
.vx404-text { margin:16px 0 0 !important; max-width:420px; color:#8a8196 !important; font-size:15px !important; line-height:1.65; }
.vx404-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
.vx404-actions .vx-btn-ghost { cursor:pointer; }
.vx404-links { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-top:28px; padding-top:20px; width:100%; border-top:1px solid rgba(255,255,255,.06); }
.vx404-links a { color:#6f6580 !important; font-size:10px; font-weight:800; letter-spacing:.18em; transition:color .2s ease; }
.vx404-links a:hover { color:#d4bdff !important; }
.vx404-links i { color:#3d3648; font-style:normal; }

/* =========================================================
   14. CUSTOMER AREA
   ========================================================= */
body[class*="sa-tpl-customer"] .component { position:relative; }
.sa-customer-header, .sa-page-customer-dashboard, .sa-page-customer-invoices, .sa-page-customer-tickets,
.sa-page-customer-balance, .sa-page-customer-affiliate, .sa-page-customer-subscriptions, .sa-page-customer-reseller { position:relative; }
body[class*="sa-tpl-customer"] .rounded-card { border-radius:20px !important; }
body[class*="sa-tpl-customer"] .rounded-card.border.border-theme {
  border-color:rgba(255,255,255,.07) !important;
  background:linear-gradient(170deg, rgba(24,18,38,.75), rgba(10,8,16,.92)) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
body[class*="sa-tpl-customer"] a.rounded-card:hover, body[class*="sa-tpl-customer"] .rounded-card.hfx-lift:hover {
  border-color:rgba(170,120,255,.35) !important; box-shadow:0 26px 60px rgba(30,8,70,.45), 0 0 30px rgba(139,92,246,.15) !important; transform:translateY(-3px);
}
/* dashboard tiles */
body[class*="sa-tpl-customer"] .grid > a.rounded-card, body[class*="sa-tpl-customer"] .grid > .rounded-card { position:relative; overflow:hidden; isolation:isolate; }
body[class*="sa-tpl-customer"] .grid > a.rounded-card::after {
  content:""; position:absolute; top:0; left:0; width:35%; height:1px; opacity:0;
  background:linear-gradient(90deg,transparent,#e2cfff,transparent);
}
body[class*="sa-tpl-customer"] .grid > a.rounded-card:hover::after { opacity:1; animation:vexRowEdgeRun 1.4s cubic-bezier(.4,0,.2,1) infinite; }
body[class*="sa-tpl-customer"] .size-10, body[class*="sa-tpl-customer"] .size-11, body[class*="sa-tpl-customer"] .size-12 { transition:transform .35s cubic-bezier(.3,1.4,.4,1); }
body[class*="sa-tpl-customer"] a.rounded-card:hover .size-10, body[class*="sa-tpl-customer"] a.rounded-card:hover .size-11 { transform:scale(1.1) rotate(-6deg); }
/* stat numbers */
body[class*="sa-tpl-customer"] .text-h2, body[class*="sa-tpl-customer"] .text-h3 {
  background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* tables and rows */
body[class*="sa-tpl-customer"] table thead th { color:#6f6580 !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.16em; text-transform:uppercase; }
body[class*="sa-tpl-customer"] table tbody tr { transition:background .2s ease; }
body[class*="sa-tpl-customer"] table tbody tr:hover { background:rgba(139,92,246,.06); }
body[class*="sa-tpl-customer"] .border-theme { border-color:rgba(255,255,255,.07) !important; }
/* sidebar / nav links */
.sa-customer-nav a, .sa-customer-header a { transition:all .25s ease; }
.sa-customer-nav a[aria-current], .sa-customer-nav a.bg-accent-500\/10 {
  background:linear-gradient(90deg, rgba(139,92,246,.22), rgba(139,92,246,.04)) !important; color:#fff !important; box-shadow:inset 2px 0 0 #a878ff;
}

/* customer header + tiles */
.vxa-head { position:relative; padding:26px 0 24px; margin-bottom:26px !important; border-bottom:1px solid rgba(255,255,255,.06); animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; }
.vxa-head-glow { position:absolute; top:-70px; left:-60px; width:340px; height:220px; z-index:-1; border-radius:50%; background:radial-gradient(ellipse, rgba(139,92,246,.22), transparent 65%); filter:blur(20px); pointer-events:none; animation:vxcAura 11s ease-in-out infinite; }
.vxa-kicker { display:inline-flex; align-items:center; gap:10px; margin-bottom:12px; color:#8d82a0; font-size:9.5px; font-weight:800; letter-spacing:.24em; }
.vxa-kicker i { width:7px; height:7px; border-radius:50%; background:#a878ff; box-shadow:0 0 10px #a878ff; animation:vxnBadge 2s ease-in-out infinite; }
.sa-customer-header-title { font-size:clamp(28px,3.4vw,44px) !important; font-weight:900 !important; letter-spacing:-.035em !important; text-transform:uppercase;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,#caa8ff 50%,#fff 62%,#fff 100%); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:vexBrandShine 7s ease-in-out infinite; }
.sa-customer-header-subtitle { color:#8a8196 !important; font-size:14px !important; margin-top:8px !important; }
body[class*="sa-tpl-customer"] .sa-page-customer-dashboard-item { position:relative; overflow:hidden; isolation:isolate; padding:20px !important; }
body[class*="sa-tpl-customer"] .sa-page-customer-dashboard-item .text-2xl { font-size:28px !important; font-weight:900 !important; letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body[class*="sa-tpl-customer"] .sa-page-customer-dashboard-item .size-9 { border-radius:12px !important; background:linear-gradient(140deg, rgba(155,92,255,.25), rgba(109,40,217,.08)) !important; color:#d4bdff !important; box-shadow:inset 0 0 0 1px rgba(170,120,255,.28); }
body[class*="sa-tpl-customer"] .sa-page-customer-dashboard-item::before { content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s ease; background:radial-gradient(260px circle at 20% 0%, rgba(160,110,255,.16), transparent 70%); }
body[class*="sa-tpl-customer"] .sa-page-customer-dashboard-item:hover::before { opacity:1; }

/* =========================================================
   15. VEXDROP ACCOUNT — rail, emblems, pods, panels
   ========================================================= */
body[class*="sa-tpl-customer"] .py-section > .wrap > .grid { grid-template-columns:minmax(0,1fr); gap:28px !important; }
@media (min-width:1024px) {
  body[class*="sa-tpl-customer"] .py-section > .wrap > .grid, .vxa-layout { display:grid; grid-template-columns:270px minmax(0,1fr) !important; gap:34px !important; align-items:start; }
}
.vxa-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.sa-customer-header-title { overflow-wrap:anywhere; }

/* ---- rail ---- */
.vxa-rail { position:sticky; top:96px; isolation:isolate; overflow:hidden; padding:18px 14px 14px; border-radius:24px; background:linear-gradient(170deg, rgba(28,20,46,.9), rgba(10,8,16,.96)); box-shadow:0 30px 70px rgba(0,0,0,.5); animation:vxpBoxIn .8s cubic-bezier(.16,1,.3,1) both; }
.vxa-rail-frame { position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.12) 0 55%, rgba(236,220,255,.8) 75%, rgba(155,92,255,.12) 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 7s linear infinite; }
.vxa-rail::after { content:""; position:absolute; top:-90px; left:-60px; width:240px; height:200px; z-index:-1; border-radius:50%; background:radial-gradient(ellipse, rgba(139,92,246,.3), transparent 65%); filter:blur(16px); animation:vxcAura 10s ease-in-out infinite; }
.vxa-id { display:flex; align-items:center; gap:12px; padding:4px 4px 16px; border-bottom:1px dashed rgba(255,255,255,.08); }
.vxa-avatar { position:relative; width:48px; height:48px; flex-shrink:0; display:grid; place-items:center; }
.vxa-avatar i { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(170,120,255,.45); animation:vxcPing 2.6s ease-out infinite; }
.vxa-avatar i + i { animation-delay:1.3s; }
.vxa-avatar span { position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#9b5cff,#5b21b6); color:#fff; font-size:18px; font-weight:900; box-shadow:0 0 22px rgba(139,92,246,.55); }
.vxa-id-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.vxa-id-kicker { display:inline-flex; align-items:center; gap:6px; color:#4ade80; font-size:8.5px; font-weight:800; letter-spacing:.2em; }
.vxa-id-kicker i { width:5px; height:5px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:vxnBadge 1.8s ease-in-out infinite; }
.vxa-id-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ece6f5; font-size:12.5px; font-weight:700; }
.vxa-rail-label { margin:16px 8px 8px; color:#554c62; font-size:9px; font-weight:800; letter-spacing:.26em; }
.vxa-nav { display:flex; flex-direction:column; gap:3px; }
.vxa-link { position:relative; display:flex; align-items:center; gap:11px; height:44px; padding:0 12px; border-radius:12px; color:#9a90a8 !important; font-size:13.5px; font-weight:650; transition:all .25s cubic-bezier(.3,1.3,.4,1); animation:vxpFadeUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 45ms + 200ms); }
.vxa-link-icon { width:30px; height:30px; flex-shrink:0; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.03); color:#8a7aa6; transition:all .25s ease; }
.vxa-link-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vxa-link-meta { color:#b98bff; font-size:11.5px; font-weight:800; }
.vxa-link-arrow { color:#6d5a8a; opacity:0; transform:translateX(-6px); transition:all .25s ease; }
.vxa-link:hover { color:#fff !important; background:rgba(255,255,255,.03); transform:translateX(3px); }
.vxa-link:hover .vxa-link-arrow { opacity:1; transform:none; }
.vxa-link:hover .vxa-link-icon { color:#d4bdff; background:rgba(139,92,246,.14); }
.vxa-link.is-active { color:#fff !important; background:linear-gradient(90deg, rgba(139,92,246,.26), rgba(139,92,246,.04)); box-shadow:inset 0 0 0 1px rgba(170,120,255,.25); }
.vxa-link.is-active::before { content:""; position:absolute; left:-14px; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#d0b0ff,#7c3aed); box-shadow:0 0 12px rgba(155,92,255,.9); }
.vxa-link.is-active .vxa-link-icon { background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; box-shadow:0 0 14px rgba(139,92,246,.55); }
.vxa-logout { display:flex; align-items:center; gap:10px; width:100%; height:42px; margin-top:12px; padding:0 14px; border:1px solid rgba(255,255,255,.06); border-radius:12px; background:transparent; color:#7e768b; font-size:12.5px; font-weight:700; cursor:pointer; transition:all .2s ease; }
.vxa-logout svg { width:16px; height:16px; transition:transform .3s ease; }
.vxa-logout:hover { color:#ff9db2; border-color:rgba(255,90,130,.35); background:rgba(255,90,130,.07); }
.vxa-logout:hover svg { transform:translateX(3px); }
.vxa-mrail { display:flex; align-items:center; gap:8px; }
@media (min-width:1024px) { .vxa-mrail { display:none !important; } }
.vxa-mnav { flex:1; min-width:0; display:flex; gap:6px; overflow-x:auto; padding:4px 2px; }
.vxa-mlink { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.02); color:#a499b4 !important; font-size:12.5px; font-weight:700; white-space:nowrap; }
.vxa-mlink.is-active { color:#fff !important; border-color:rgba(200,160,255,.6); background:linear-gradient(135deg, rgba(155,92,255,.3), rgba(109,40,217,.16)); box-shadow:0 0 18px rgba(139,92,246,.3); }

/* ---- header emblem ---- */
.vxa-head { padding-left:98px !important; min-height:110px; }
.vxa-head-emblem { position:absolute; left:0; top:22px; width:78px; height:78px; display:grid; place-items:center; }
.vxa-head-emblem i { position:absolute; border-radius:50%; }
.vxa-head-emblem .r1 { inset:0; border:1px dashed rgba(170,120,255,.35); animation:vexSpinClockwise 16s linear infinite; }
.vxa-head-emblem .r2 { inset:10px; border:2px solid transparent; border-top-color:rgba(200,160,255,.85); animation:vexSpinCounter 3.4s linear infinite; }
.vxa-head-emblem b { position:absolute; top:-3px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#e6d7ff; box-shadow:0 0 10px #a878ff; transform-origin:3px 42px; animation:vexSpinClockwise 6s linear infinite; }
.vxa-head-emblem span { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(140deg, rgba(155,92,255,.3), rgba(76,29,149,.3)); color:#e6d7ff; box-shadow:inset 0 0 0 1px rgba(200,160,255,.3), 0 0 26px rgba(139,92,246,.35); animation:vxcFloat 3.6s ease-in-out infinite; }
.vxa-head-emblem svg { width:22px; height:22px; }
.vxa-kicker em { font-style:normal; display:inline-grid; place-items:center; height:20px; padding:0 7px; border-radius:6px; background:linear-gradient(135deg,#a36bff,#6d28d9); color:#fff; font-size:9px; letter-spacing:.1em; box-shadow:0 0 14px rgba(139,92,246,.5); }
.sa-customer-header-link { height:44px; padding:0 20px !important; border-radius:12px !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:640px) { .vxa-head { padding-left:0 !important; padding-top:100px !important; } .vxa-head-emblem { top:14px; } }

/* ---- pods ---- */
.vxa-pods { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-bottom:18px; }
.vxa-pod { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:8px; padding:20px !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:20px !important; background:linear-gradient(170deg, rgba(24,18,38,.85), rgba(10,8,16,.94)) !important; color:inherit !important; transition:all .35s cubic-bezier(.2,.8,.2,1); animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 90ms + 250ms); }
.vxa-pod:hover { border-color:rgba(170,120,255,.35) !important; transform:translateY(-4px); box-shadow:0 24px 50px rgba(30,8,70,.45); }
.vxa-pod-orb { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(140deg, rgba(155,92,255,.28), rgba(109,40,217,.08)); color:#d4bdff; box-shadow:inset 0 0 0 1px rgba(170,120,255,.3); }
.vxa-pod-orb svg { width:19px; height:19px; transition:transform .45s cubic-bezier(.3,1.4,.4,1); }
.vxa-pod:hover .vxa-pod-orb svg { transform:scale(1.15) rotate(-8deg); }
.vxa-pod-label { margin-top:6px; color:#6f6580; font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.vxa-pod-value { font-size:30px; font-weight:900; letter-spacing:-.04em; line-height:1; background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vxa-pod-value--sm { font-size:20px; }
.vxa-pod-spark { position:absolute; right:0; bottom:0; width:60%; height:40px; opacity:.55; }
.vxa-pod-spark path { fill:none; stroke:#a878ff; stroke-width:2; stroke-dasharray:220; stroke-dashoffset:220; filter:drop-shadow(0 0 4px #8b5cf6); animation:vxSpark 2s .8s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes vxSpark { to { stroke-dashoffset:0; } }
.vxa-pod-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(74,222,128,.1); color:#4ade80; font-size:9px; font-weight:800; letter-spacing:.18em; }
.vxa-pod-badge i { width:5px; height:5px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; }
.vxa-pod-badge--go { background:rgba(139,92,246,.14); color:#c9a6ff; transition:all .25s ease; }
.vxa-pod--link:hover .vxa-pod-badge--go { background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; box-shadow:0 0 16px rgba(139,92,246,.5); }

/* ---- panel + latest order ---- */
.vxa-panel { margin-top:0; }
.vxa-panel-link { color:#b98bff !important; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; transition:color .2s ease, letter-spacing .3s ease; }
.vxa-panel-link:hover { color:#fff !important; letter-spacing:.2em; }
.vxa-order { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.vxa-order-icon { width:52px; height:52px; flex-shrink:0; display:grid; place-items:center; border-radius:16px; background:rgba(139,92,246,.14); color:#d4bdff; }
.vxa-order-icon svg { width:24px; height:24px; animation:vxcFloat 3.4s ease-in-out infinite; }
.vxa-order-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.vxa-order-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f3eefa; font-size:16px; font-weight:800; }
.vxa-order-main span { color:#6f6580; font-size:10px; font-weight:800; letter-spacing:.18em; }
.vxa-order-main a { color:#b98bff !important; }
.vxa-order-btn { height:42px; padding:0 18px; font-size:11px; }
.vxa-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 10px 10px; }
.vxa-empty .vx-void-ring { width:96px; height:96px; margin-bottom:16px; }
.vxa-empty strong { color:#fff; font-size:15px; font-weight:800; letter-spacing:.06em; }
.vxa-empty p { margin:8px 0 18px; color:#7e768b; font-size:13px; }
.vxa-quick { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-top:18px; }
.vxa-quick-card { display:flex; align-items:center; gap:12px; height:60px; padding:0 18px; border:1px solid rgba(255,255,255,.07); border-radius:16px; background:rgba(255,255,255,.02); color:#cfc5dd !important; font-size:13.5px; font-weight:700; transition:all .3s cubic-bezier(.3,1.3,.4,1); animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 80ms + 500ms); }
.vxa-quick-card b { display:grid; place-items:center; width:38px; height:26px; border-radius:8px; background:rgba(139,92,246,.14); color:#c9a6ff; font-size:9.5px; font-weight:900; letter-spacing:.08em; }
.vxa-quick-card span { flex:1; }
.vxa-quick-card i { font-style:normal; color:#6d5a8a; transition:transform .3s ease, color .2s ease; }
.vxa-quick-card:hover { color:#fff !important; border-color:rgba(170,120,255,.4); background:rgba(139,92,246,.08); transform:translateY(-3px); }
.vxa-quick-card:hover i { color:#d4bdff; transform:translateX(4px); }

/* ---- every other account page: cards become VEXDROP panels ---- */
body[class*="sa-tpl-customer"] .min-w-0 > .rounded-card.border,
body[class*="sa-tpl-customer"] .min-w-0 .space-y-4 > .rounded-card.border,
body[class*="sa-tpl-customer"] .min-w-0 .grid > .rounded-card.border { position:relative; overflow:hidden; isolation:isolate; animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; }
body[class*="sa-tpl-customer"] .min-w-0 > .rounded-card.border::before,
body[class*="sa-tpl-customer"] .min-w-0 .grid > .rounded-card.border::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(200,160,255,.75), transparent); background-size:50% 100%; background-repeat:no-repeat;
  animation:vxPanelLine 5s ease-in-out infinite;
}
@keyframes vxPanelLine { 0% { background-position:-60% 0; } 100% { background-position:160% 0; } }
body[class*="sa-tpl-customer"] .min-w-0 > .rounded-card.border:nth-child(2) { animation-delay:.12s; }
body[class*="sa-tpl-customer"] .min-w-0 > .rounded-card.border:nth-child(3) { animation-delay:.24s; }
body[class*="sa-tpl-customer"] h2.text-sm, body[class*="sa-tpl-customer"] h3.text-sm { color:#b9aed0 !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.2em; text-transform:uppercase; }
body[class*="sa-tpl-customer"] .rounded-badge { border-radius:999px !important; font-weight:800 !important; letter-spacing:.06em; }
body[class*="sa-tpl-customer"] button.bg-accent-500, body[class*="sa-tpl-customer"] a.bg-accent-500 {
  background:linear-gradient(135deg,#a36bff 0%,#7c3aed 50%,#5b21b6 100%) !important; border:1px solid rgba(215,190,255,.3) !important; color:#fff !important; border-radius:12px !important;
  box-shadow:0 10px 26px rgba(109,40,217,.32), inset 0 1px 0 rgba(255,255,255,.2) !important; font-weight:800 !important; transition:transform .25s cubic-bezier(.3,1.4,.4,1), box-shadow .25s ease !important;
}
body[class*="sa-tpl-customer"] button.bg-accent-500:hover:not(:disabled), body[class*="sa-tpl-customer"] a.bg-accent-500:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(109,40,217,.5), 0 0 22px rgba(155,92,255,.35) !important; }
body[class*="sa-tpl-customer"] .input, body[class*="sa-tpl-customer"] input.input, body[class*="sa-tpl-customer"] textarea.input, body[class*="sa-tpl-customer"] select.input {
  background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.09) !important; border-radius:12px !important; transition:border-color .2s ease, box-shadow .25s ease !important;
}
body[class*="sa-tpl-customer"] .input:focus { border-color:rgba(170,120,255,.6) !important; box-shadow:0 0 0 4px rgba(139,92,246,.12), 0 0 20px rgba(109,40,217,.18) !important; }
body[class*="sa-tpl-customer"] table { border-collapse:separate !important; border-spacing:0 6px !important; }
body[class*="sa-tpl-customer"] table tbody tr { background:rgba(255,255,255,.02); }
body[class*="sa-tpl-customer"] table tbody td:first-child { border-radius:12px 0 0 12px; }
body[class*="sa-tpl-customer"] table tbody td:last-child { border-radius:0 12px 12px 0; }
body[class*="sa-tpl-customer"] .divide-y > * { transition:background .2s ease; }
body[class*="sa-tpl-customer"] .divide-y > *:hover { background:rgba(139,92,246,.05); }
body[class*="sa-tpl-customer"] .text-accent-500 { color:#b98bff !important; }
body[class*="sa-tpl-customer"] .sa-page-customer-invoices-title:hover { color:#fff !important; text-shadow:0 0 14px rgba(185,140,255,.6); }

/* =========================================================
   16. HEADER CAPSULE — floating command bar
   ========================================================= */
.vxn-bar { background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding:12px 16px 0; transition:padding .4s cubic-bezier(.2,.8,.2,1) !important; }
.vxn-bar.is-scrolled { padding-top:8px; }
.vxn-bar > .vxn-capsule > .vxn-bar-glow, .vxn-bar-line { display:none !important; }
.vxn-capsule {
  position:relative; isolation:isolate; max-width:1280px; margin:0 auto; border-radius:22px;
  background:linear-gradient(180deg, rgba(18,13,30,.78), rgba(8,6,14,.72));
  -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  transition:max-width .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background .4s ease, border-radius .4s ease;
  animation:vxnCapsuleIn .9s .1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes vxnCapsuleIn { from { opacity:0; transform:translateY(-20px) scale(.97); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
.vxn-bar.is-scrolled .vxn-capsule { max-width:1120px; background:linear-gradient(180deg, rgba(16,11,27,.94), rgba(8,6,14,.9)); box-shadow:0 22px 60px rgba(0,0,0,.6), 0 0 40px rgba(109,40,217,.18), inset 0 1px 0 rgba(255,255,255,.06); }
.vxn-capsule-frame { position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.18) 0 50%, rgba(226,207,255,.9) 70%, rgba(155,92,255,.18) 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 8s linear infinite; }
.vxn-capsule-spot { position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(155,92,255,.16), transparent 70%); }
.vxn-capsule:hover .vxn-capsule-spot { opacity:1; }
.vxn-capsule .vxn-inner { height:68px !important; padding:0 12px 0 16px; max-width:none !important; }
.vxn-bar.is-scrolled .vxn-capsule .vxn-inner { height:60px !important; }

/* brand */
.vxn-brand { display:inline-flex !important; align-items:center; gap:12px; text-decoration:none; }
.vxn-brand-mark { position:relative; width:46px; height:46px; flex-shrink:0; display:grid; place-items:center; }
.vxn-brand-mark img, #navbar .vxn-brand-mark img { width:38px !important; height:38px !important; max-height:none !important; max-width:none !important; object-fit:contain; animation:none !important; filter:drop-shadow(0 0 10px rgba(155,92,255,.6)) !important; transition:transform .5s cubic-bezier(.3,1.4,.4,1) !important; }
.vxn-brand-ring { position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(170,120,255,.45); animation:vexSpinClockwise 14s linear infinite; }
.vxn-brand-dot { position:absolute; inset:0; border-radius:50%; animation:vexSpinCounter 4s linear infinite; }
.vxn-brand-dot::before { content:""; position:absolute; top:-2px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#e6d7ff; box-shadow:0 0 10px #a878ff; }
.vxn-brand:hover .vxn-brand-mark img { transform:rotate(-12deg) scale(1.1) !important; }
.vxn-brand-text { display:flex; flex-direction:column; gap:3px; line-height:1; }
.vxn-brand-text strong { position:relative; font-size:17px; font-weight:900; letter-spacing:.08em; background:linear-gradient(100deg,#fff 0%,#fff 38%,#caa8ff 50%,#fff 62%,#fff 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:vexBrandShine 6s ease-in-out infinite; }
.vxn-brand-text small { color:#6f6580; font-size:7.5px; font-weight:800; letter-spacing:.3em; }
.vxn-bar.is-scrolled .vxn-brand-text small { opacity:0; height:0; overflow:hidden; }

/* links: numbered, glowing indicator */
.vxn-links { counter-reset:vxnav; border-color:rgba(255,255,255,.06) !important; background:rgba(0,0,0,.2) !important; }
.vxn-link { counter-increment:vxnav; gap:6px; }
.vxn-link::before { content:"0" counter(vxnav); font-size:8.5px; font-weight:900; letter-spacing:.06em; color:#5d4a80; transition:color .25s ease, transform .3s cubic-bezier(.3,1.4,.4,1); transform:translateY(-4px); }
.vxn-link:hover::before, .vxn-link.is-active::before { color:#c9a6ff; }
.vxn-link.is-active::after { display:none; }
.vxn-indicator { background:linear-gradient(135deg, rgba(155,92,255,.32), rgba(109,40,217,.2)) !important; }

/* status chip */
.vxn-status { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; margin-right:4px; border:1px solid rgba(74,222,128,.25); border-radius:999px; background:rgba(74,222,128,.07); color:#4ade80; font-size:9px; font-weight:800; letter-spacing:.2em; }
.vxn-status i { position:relative; width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; }
.vxn-status i::after { content:""; position:absolute; inset:0; border-radius:50%; background:#4ade80; animation:vxcPing 1.8s ease-out infinite; }
@media (max-width:1180px) { .vxn-status { display:none; } }
@media (max-width:1023px) {
  .vxn-bar { padding:8px 10px 0; }
  .vxn-capsule { border-radius:18px; }
  .vxn-capsule .vxn-inner { height:60px !important; padding:0 8px 0 10px; }
  .vxn-brand-text small { display:none; }
  .vxn-brand-text strong { font-size:15px; }
  .vxn-brand-mark { width:40px; height:40px; }
  .vxn-brand-mark img, #navbar .vxn-brand-mark img { width:32px !important; height:32px !important; }
}
@media (max-width:380px) { .vxn-brand-text { display:none; } }

/* =========================================================
   17. HOME FX — stars, cursor glow, rotator, chips, reveals
   ========================================================= */
.vxh-stars { position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.vxh-cursor { position:absolute; left:0; top:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; background:radial-gradient(circle, rgba(155,92,255,.18), transparent 60%); opacity:0; transition:opacity .4s ease; pointer-events:none; will-change:transform; }
.vx-home-hero:hover .vxh-cursor { opacity:1; }

.vx-home-rotator { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:22px; min-height:34px; animation:vxpFadeUp .8s .2s cubic-bezier(.16,1,.3,1) both; }
.vx-home-rotator-label { display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:8px; border:1px solid rgba(74,222,128,.3); background:rgba(74,222,128,.08); color:#4ade80; font-size:9px; font-weight:800; letter-spacing:.22em; }
.vx-home-rotator-word { font-size:clamp(18px, 2vw, 26px); font-weight:800; letter-spacing:-.01em; background:linear-gradient(90deg,#e6d7ff,#a878ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vx-home-caret { display:inline-block; width:3px; height:26px; margin-left:-8px; border-radius:2px; background:#b98bff; box-shadow:0 0 10px #a878ff; animation:vexCaret 1s steps(1) infinite; }

.vx-float-chip { position:absolute; z-index:4; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px 0 10px; border:1px solid rgba(200,160,255,.3); border-radius:999px; background:rgba(14,10,24,.75); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#e6d7ff; font-size:10px; font-weight:800; letter-spacing:.16em; box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 20px rgba(139,92,246,.2); white-space:nowrap; }
.vx-float-chip b { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; font-size:9px; }
.vx-float-chip.c1 { top:14%; left:2%; animation:vxChip 6s ease-in-out infinite; }
.vx-float-chip.c2 { top:22%; right:0; animation:vxChip 7s -2s ease-in-out infinite; }
.vx-float-chip.c3 { bottom:20%; left:0; animation:vxChip 6.5s -4s ease-in-out infinite; }
.vx-float-chip.c4 { bottom:12%; right:6%; animation:vxChip 7.5s -1s ease-in-out infinite; }
@keyframes vxChip { 0%,100% { transform:translate(0,0); } 50% { transform:translate(6px,-12px); } }

[data-vx-rv] { opacity:0; transform:translateY(40px); filter:blur(6px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease; }
[data-vx-rv].is-in { opacity:1; transform:none; filter:none; }
[data-vx-rv] > * { transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.vx-serv[data-vx-rv]:not(.is-in) > *, .vx-how-steps[data-vx-rv]:not(.is-in) > *, .vx-why-grid[data-vx-rv]:not(.is-in) > * { opacity:0; transform:translateY(30px) scale(.97); }
.vx-serv[data-vx-rv].is-in > *, .vx-how-steps[data-vx-rv].is-in > *, .vx-why-grid[data-vx-rv].is-in > * { transition-delay:calc(var(--i,0) * 110ms + 150ms); }
html:not(.vx-js) [data-vx-rv] { opacity:1; transform:none; filter:none; }

@media (max-width:1023px) {
  .vx-float-chip { height:28px; font-size:8.5px; padding:0 10px 0 7px; }
  .vx-float-chip b { width:16px; height:16px; }
  .vxh-cursor { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-vx-rv], [data-vx-rv] > * { opacity:1 !important; transform:none !important; filter:none !important; }
  .vxh-stars { display:none; }
}

/* =========================================================
   18. DROP PAGE EXTRAS — watermark, specs, seal, dossier, buy bar
   ========================================================= */
.vx-drop-stage { position:relative; }
.vx-drop-watermark { position:absolute; top:40px; left:-10px; right:-40px; z-index:-1; pointer-events:none; overflow:hidden; white-space:nowrap; font-size:clamp(90px, 14vw, 220px); font-weight:900; line-height:1; letter-spacing:-.06em; text-transform:uppercase; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(170,120,255,.08); animation:vxWater 30s linear infinite; }
@keyframes vxWater { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-6%); } }
.vx-drop-specs { display:flex; flex-wrap:wrap; gap:8px; margin:-12px 0 26px; }
.vx-spec { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 13px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.025); color:#b3a8c4; font-size:10px; font-weight:800; letter-spacing:.18em; animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 80ms + 300ms); transition:all .25s ease; }
.vx-spec b { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:6px; background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; font-size:10px; letter-spacing:0; }
.vx-spec i { width:6px; height:6px; border-radius:50%; background:#a878ff; box-shadow:0 0 8px #a878ff; }
.vx-spec i.ok { background:#4ade80; box-shadow:0 0 8px #4ade80; }
.vx-spec:hover { color:#fff; border-color:rgba(170,120,255,.4); background:rgba(139,92,246,.1); }

.vx-drop-gallery { transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.vx-drop-scan { position:absolute; left:14px; right:14px; top:14px; height:26%; z-index:3; pointer-events:none; border-radius:20px 20px 0 0; background:linear-gradient(180deg, rgba(185,140,255,.16), transparent); mix-blend-mode:screen; animation:vxGalScan 5s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes vxGalScan { 0% { transform:translateY(-10%); opacity:0; } 15% { opacity:1; } 70% { opacity:1; } 100% { transform:translateY(300%); opacity:0; } }
.vx-drop-seal { position:absolute; right:30px; bottom:30px; z-index:4; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 8px; border:1px solid rgba(74,222,128,.4); border-radius:999px; background:rgba(8,14,10,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#8ff0b1; font-size:9.5px; font-weight:800; letter-spacing:.2em; box-shadow:0 12px 30px rgba(0,0,0,.5); animation:vxSeal2 .8s 1s cubic-bezier(.3,1.5,.4,1) both; }
.vx-drop-seal i { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#22c55e; color:#fff; font-style:normal; font-size:12px; box-shadow:0 0 12px rgba(74,222,128,.7); }
@keyframes vxSeal2 { from { opacity:0; transform:scale(.4) rotate(-15deg); } to { opacity:1; transform:none; } }

.vx-dossier-card { position:relative; isolation:isolate; overflow:hidden; padding:22px 24px 26px; border:1px solid rgba(255,255,255,.07); border-radius:22px; background:linear-gradient(170deg, rgba(22,17,34,.8), rgba(10,8,16,.94)); box-shadow:0 24px 60px rgba(0,0,0,.4); }
.vx-dossier-frame { position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(200,160,255,.8), transparent); background-size:50% 100%; background-repeat:no-repeat; animation:vxPanelLine 6s ease-in-out infinite; }
.vx-dossier-card .vxp-tabs { position:relative; border:1px solid rgba(255,255,255,.07) !important; margin-bottom:20px !important; }
.vx-dossier-card .editor { font-size:15px; }

.vx-page.vx-drop { z-index:2; }
.vx-buybar { position:fixed; left:10px; right:10px; bottom:10px; z-index:60; display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; border:1px solid rgba(170,120,255,.35); border-radius:18px; background:rgba(14,10,24,.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(109,40,217,.25); transform:translateY(140%); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.vx-buybar.is-on { transform:none; }
.vx-buybar-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vx-buybar-info span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9a90a8; font-size:11px; font-weight:700; }
.vx-buybar-info strong { font-size:19px; font-weight:900; background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vx-buybar-btn { height:44px; padding:0 18px; flex-shrink:0; }
@media (min-width:1024px) { .vx-buybar { display:none; } }
@media (max-width:1023px) { .vx-drop-watermark { display:none; } .vx-drop-specs { order:2; margin:0 0 6px; } .vx-drop-title { order:2; } .vx-drop-gallery { order:3; } }
@media (max-width:640px) { .vx-drop-seal { right:22px; bottom:22px; height:30px; font-size:8px; } .vx-dossier-card { padding:16px; } }

/* =========================================================
   19. PAYMENT HANDOFF + WELCOME BACK
   ========================================================= */
.vxh-off { position:fixed; inset:0; z-index:2147483400; display:grid; place-items:center; padding:20px; background:rgba(4,3,8,.0); opacity:0; pointer-events:none; transition:opacity .35s ease, background .35s ease; }
.vxh-off.is-on { opacity:1; pointer-events:auto; background:rgba(4,3,8,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.vxh-off-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 60%); mask-image:radial-gradient(circle,#000 10%,transparent 60%); }
.vxh-off-card { position:relative; isolation:isolate; overflow:hidden; width:min(420px,100%); display:flex; flex-direction:column; align-items:center; text-align:center; padding:36px 28px 26px; border-radius:26px; background:linear-gradient(170deg, rgba(30,22,50,.95), rgba(10,8,16,.97)); box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 60px rgba(109,40,217,.25); transform:translateY(20px) scale(.95); transition:transform .5s cubic-bezier(.16,1,.3,1); }
.vxh-off.is-on .vxh-off-card { transform:none; }
.vxh-off-card::before { content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.15) 0 50%, rgba(236,220,255,.95) 70%, rgba(155,92,255,.15) 85%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 2.2s linear infinite; }
.vxh-off-lock { position:relative; width:92px; height:92px; display:grid; place-items:center; margin-bottom:18px; color:#e6d7ff; }
.vxh-off-lock i { position:absolute; border-radius:50%; }
.vxh-off-lock .r1 { inset:0; border:1px dashed rgba(170,120,255,.4); animation:vexSpinClockwise 8s linear infinite; }
.vxh-off-lock .r2 { inset:12px; border:2px solid transparent; border-top-color:#c9a6ff; border-right-color:rgba(155,92,255,.3); animation:vexSpinClockwise 1s linear infinite; }
.vxh-off-lock svg { width:32px; height:32px; filter:drop-shadow(0 0 12px rgba(155,92,255,.8)); }
.vxh-off-lock .shackle { transform-origin:16px 11px; animation:vxShackle 1.2s .2s cubic-bezier(.3,1.5,.4,1) both; }
@keyframes vxShackle { from { transform:translateY(-3px); } to { transform:none; } }
.vxh-off-kicker { display:inline-flex; align-items:center; gap:8px; color:#8d82a0; font-size:9.5px; font-weight:800; letter-spacing:.22em; }
.vxh-off-kicker i { width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:vxnBadge 1.4s ease-in-out infinite; }
.vxh-off-title { margin-top:10px; font-size:22px; font-weight:900; letter-spacing:-.02em; text-transform:uppercase; background:linear-gradient(100deg,#fff 0%,#fff 38%,#caa8ff 50%,#fff 62%,#fff 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:vexBrandShine 2.5s ease-in-out infinite; }
.vxh-off-steps { list-style:none; margin:22px 0 18px; padding:0; width:100%; display:flex; flex-direction:column; gap:8px; text-align:left; }
.vxh-off-steps li { display:flex; align-items:center; gap:12px; height:40px; padding:0 14px; border:1px solid rgba(255,255,255,.06); border-radius:12px; color:#5f5869; font-size:13px; font-weight:700; transition:all .35s ease; }
.vxh-off-steps b { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; border:1px solid rgba(255,255,255,.08); font-size:10px; transition:all .35s cubic-bezier(.3,1.5,.4,1); }
.vxh-off-steps li.is-done { color:#ece6f5; border-color:rgba(170,120,255,.35); background:rgba(139,92,246,.08); }
.vxh-off-steps li.is-done b { background:linear-gradient(135deg,#9b5cff,#6d28d9); border-color:transparent; color:#fff; box-shadow:0 0 14px rgba(139,92,246,.6); transform:scale(1.08); }
.vxh-off-bar { width:100%; height:3px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.vxh-off-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#6d28d9,#b98bff,#fff); box-shadow:0 0 12px #a878ff; }
.vxh-off.is-on .vxh-off-bar i { animation:vxOffBar 1.25s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes vxOffBar { to { width:100%; } }
.vxh-off-note { margin:14px 0 0; color:#5f5869; font-size:11px; }

.vxh-back { position:fixed; left:50%; bottom:20px; z-index:9999980; display:flex; align-items:center; gap:14px; width:min(620px, calc(100vw - 24px)); padding:14px 14px 14px 16px; border:1px solid rgba(74,222,128,.3); border-radius:20px; background:rgba(12,10,20,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 24px 60px rgba(0,0,0,.6); transform:translate(-50%, 140%); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.vxh-back.is-on { transform:translate(-50%, 0); }
.vxh-back-icon { width:40px; height:40px; flex-shrink:0; display:grid; place-items:center; border-radius:12px; background:#22c55e; color:#fff; box-shadow:0 0 18px rgba(74,222,128,.55); }
.vxh-back-icon svg { width:20px; height:20px; stroke-dasharray:30; stroke-dashoffset:30; animation:vxCheck .6s .5s ease forwards; }
@keyframes vxCheck { to { stroke-dashoffset:0; } }
.vxh-back-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.vxh-back-copy strong { color:#fff; font-size:14px; font-weight:800; }
.vxh-back-copy span { color:#8f879c; font-size:12px; line-height:1.4; }
.vxh-back-btn { flex-shrink:0; display:inline-flex; align-items:center; height:38px; padding:0 14px; border-radius:11px; background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff !important; font-size:10.5px; font-weight:800; letter-spacing:.12em; box-shadow:0 0 18px rgba(139,92,246,.45); }
.vxh-back-x { width:30px; height:30px; flex-shrink:0; border:0; border-radius:9px; background:rgba(255,255,255,.05); color:#8f879c; cursor:pointer; }
.vxh-back-x:hover { color:#fff; background:rgba(255,255,255,.1); }
@media (max-width:560px) { .vxh-back { flex-wrap:wrap; } .vxh-back-btn { width:100%; justify-content:center; order:5; } }

/* =========================================================
   20. HOLO PASS — product page (cinema hero, holo card,
       tier plans, checkout dock, dossier)
   ========================================================= */
.vx-pass { padding-top:6px; overflow:clip; }

/* ---- cinema hero ---- */
.vxs-hero { position:relative; isolation:isolate; padding:34px 0 70px; margin-bottom:10px; }
.vxs-hero-aura { position:absolute; top:-120px; bottom:-40px; left:50%; width:100vw; margin-left:-50vw; z-index:-3; background-size:cover; background-position:center; filter:blur(70px) saturate(1.5) brightness(.55); transform:scale(1.15); opacity:.55; animation:vxAura 18s ease-in-out infinite; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 45%,transparent 95%); mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 45%,transparent 95%); pointer-events:none; }
.vxs-hero-grid { position:absolute; top:-100px; bottom:0; left:50%; width:100vw; margin-left:-50vw; z-index:-2; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 45%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 30% 45%,#000 20%,transparent 75%); animation:vxcGrid 26s linear infinite; }
.vxs-hero-horizon { position:absolute; left:50%; width:100vw; margin-left:-50vw; bottom:0; height:1px; z-index:-1; background:rgba(255,255,255,.07); overflow:hidden; }
.vxs-hero-horizon i { position:absolute; top:0; left:-30%; width:30%; height:1px; background:linear-gradient(90deg,transparent,#c9a6ff,transparent); box-shadow:0 0 16px rgba(155,92,255,.9); animation:vxcFlow 5s linear infinite; }
.vxs-hero-inner { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px; align-items:center; }

/* ---- holo pass card ---- */
.vxs-pass-wrap { position:relative; perspective:1400px; animation:vxPassIn 1.1s .1s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes vxPassIn { from { opacity:0; transform:translateY(40px) rotateX(18deg) rotateY(-14deg) scale(.92); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
.vx-holo { position:relative; isolation:isolate; overflow:hidden; padding:16px; border-radius:26px; transform-style:preserve-3d;
  background:linear-gradient(160deg, rgba(40,28,66,.95), rgba(14,10,24,.97) 55%, rgba(24,14,40,.97));
  box-shadow:0 50px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(200,160,255,.22), 0 0 60px rgba(109,40,217,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.vx-holo::before { content:""; position:absolute; inset:0; z-index:6; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.2) 0 45%, rgba(236,220,255,.95) 62%, rgba(80,200,255,.6) 72%, rgba(155,92,255,.2) 85%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 6s linear infinite; }
.vx-holo-foil { position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit; opacity:.35; mix-blend-mode:color-dodge;
  background:linear-gradient(115deg, transparent 18%, rgba(255,70,220,.35) 32%, rgba(70,230,255,.3) 44%, rgba(155,92,255,.4) 56%, rgba(255,210,90,.25) 66%, transparent 80%);
  background-size:260% 260%; background-position:var(--mx,30%) var(--my,30%); transition:opacity .4s ease, background-position .15s linear; }
.vx-holo-glare { position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit; opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(255,255,255,.22), transparent 55%); transition:opacity .3s ease; }
.vx-holo:hover .vx-holo-foil { opacity:.75; }
.vx-holo:hover .vx-holo-glare { opacity:1; }
.vx-holo:not(:hover) .vx-holo-foil { animation:vxFoilIdle 6s ease-in-out infinite; }
@keyframes vxFoilIdle { 0%,100% { background-position:10% 20%; } 50% { background-position:90% 80%; } }
.vx-holo-top { display:flex; align-items:center; justify-content:space-between; margin:2px 4px 14px; }
.vx-holo-brand { display:inline-flex; align-items:center; gap:8px; color:#d9c7ff; font-size:10px; font-weight:900; letter-spacing:.26em; }
.vx-holo-brand i { width:8px; height:8px; border-radius:2px; transform:rotate(45deg); background:#a878ff; box-shadow:0 0 12px #a878ff; }
.vx-holo-no { color:#7d6a9e; font:800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.12em; }
.vx-holo-media { position:relative; overflow:hidden; border-radius:18px; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.5); }
.vx-holo-media .sa-product-gallery.splide.main, .vx-holo-media .sa-product-gallery--single, .vx-holo-media .sa-product-gallery--empty { border:0 !important; border-radius:18px !important; box-shadow:none !important; }
.vx-holo-media .splide.thumbnails { margin-top:12px; }
.vx-holo-empty { aspect-ratio:16/9; display:grid; place-items:center; font-size:90px; font-weight:900; color:#d4bdff; background:radial-gradient(circle, rgba(139,92,246,.35), transparent 70%); }
.vx-holo-media .vx-drop-seal { right:14px; bottom:14px; }
.vx-holo-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:16px 4px 2px; }
.vx-holo-bottom strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:15px; font-weight:900; letter-spacing:.02em; text-transform:uppercase; }
.vx-holo-bottom span { flex-shrink:0; color:#8d7fa8; font-size:9.5px; font-weight:800; letter-spacing:.2em; }
.vx-holo-chip { position:absolute; left:22px; top:48%; width:34px; height:26px; z-index:4; border-radius:6px; background:linear-gradient(135deg,#f5d58a,#b8903a); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); opacity:0; }
.vxs-pass-shadow { position:absolute; left:10%; right:10%; bottom:-34px; height:40px; border-radius:50%; background:radial-gradient(ellipse, rgba(109,40,217,.55), transparent 70%); filter:blur(14px); z-index:-1; animation:vxCore 5s ease-in-out infinite; }

/* ---- hero copy ---- */
.vxs-copy { min-width:0; }
.vxs-title { position:relative; margin:4px 0 22px; font-size:clamp(40px, 5.6vw, 86px); font-weight:900; line-height:.92; letter-spacing:-.05em; text-transform:uppercase; overflow-wrap:break-word;
  background:linear-gradient(100deg,#fff 0%,#fff 35%,#caa8ff 50%,#fff 65%,#fff 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:vxHeroTitle 1s .15s cubic-bezier(.16,1,.3,1) both, vexBrandShine 7s 1.2s ease-in-out infinite; }
.vxs-title::after { content:attr(data-text); position:absolute; left:0; top:0; z-index:-1; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(170,120,255,.3); transform:translate(6px,6px); animation:vxHeroEcho 6s ease-in-out infinite; pointer-events:none; }
.vx-pass .vx-drop-specs { margin:0 0 26px; }
.vxs-price { display:flex; align-items:baseline; gap:14px; margin-bottom:26px; animation:vxpFadeUp .7s .35s cubic-bezier(.16,1,.3,1) both; }
.vxs-price-label { color:#7d6a9e; font-size:11px; font-weight:900; letter-spacing:.26em; }
.vxs-price strong { font-size:clamp(40px, 4.4vw, 60px); font-weight:900; letter-spacing:-.04em; line-height:1; background:linear-gradient(135deg,#fff 15%,#c9a6ff 70%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 24px rgba(155,92,255,.4)); }
.vxs-ctas { display:flex; flex-wrap:wrap; gap:12px; animation:vxpFadeUp .7s .45s cubic-bezier(.16,1,.3,1) both; }
.vxs-ctas .vx-btn { height:54px; padding:0 26px; }
.vxs-ctas .vx-btn-ghost { height:54px; }
.vxs-live { display:flex; flex-wrap:wrap; gap:18px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.07); animation:vxpFadeUp .7s .55s cubic-bezier(.16,1,.3,1) both; }
.vxs-live span { display:inline-flex; align-items:center; gap:8px; color:#8f879c; font-size:13px; }
.vxs-live b { color:#fff; font-weight:900; }
.vxs-live i { position:relative; width:7px; height:7px; border-radius:50%; background:#a878ff; box-shadow:0 0 8px #a878ff; }
.vxs-live i.g { background:#4ade80; box-shadow:0 0 8px #4ade80; }
.vxs-live i::after { content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:vxcPing 1.8s ease-out infinite; }

/* ---- select your drop ---- */
.vxs-buy { position:relative; padding:60px 0 20px; scroll-margin-top:90px; }
.vxs-sec-head { margin-bottom:28px; }
.vxs-sec-head .vx-home-h2 { margin-top:14px; }
.vxs-terminal { position:relative; isolation:isolate; padding:0 26px 26px; border-radius:28px; background:linear-gradient(170deg, rgba(24,18,38,.9), rgba(9,7,14,.96)); box-shadow:0 40px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); animation:none !important; }
.vxs-terminal::before, .vxs-terminal::after { display:none !important; }
.vxs-terminal-frame { position:absolute; inset:0; z-index:5; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--vxc-a,0deg), rgba(155,92,255,.12) 0 55%, rgba(226,207,255,.85) 75%, rgba(155,92,255,.12) 90%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:vxcSpinA 7s linear infinite; }
.vxs-terminal .vx-panel-top { margin:0 -26px 22px; padding:0 26px; }
.vxs-terminal-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
.vxs-terminal-meta > div:first-child { margin-bottom:0 !important; }
.vxs-terminal-meta .vxp-pricebar { border:0 !important; padding:0 !important; margin:0 !important; }
.vxs-terminal-meta .sa-page-product-price { display:none; }

/* plans as tier cards */
.vxs-terminal .vxf-plans { display:grid !important; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.vxs-terminal .vxf-plan { flex-direction:column !important; align-items:flex-start !important; gap:12px !important; min-height:190px; padding:22px 20px 20px !important; border-radius:20px !important; text-align:left; }
.vxs-terminal .vxf-plan:hover:not(:disabled) { transform:translateY(-4px) !important; }
.vxs-terminal .vxf-plan .vxf-radio { position:absolute; top:18px; right:18px; }
.vxs-terminal .vxf-plan-main { width:100%; padding-right:34px; }
.vxs-terminal .vxf-plan-name { font-size:20px; }
.vxs-terminal .vxf-plan-price { margin-top:auto; width:100%; flex-direction:row-reverse !important; justify-content:flex-end; align-items:baseline !important; gap:10px; padding-top:14px !important; border-top:1px dashed rgba(255,255,255,.08); }
.vxs-terminal .vxf-plan-price strong { font-size:30px; }
.vxs-terminal .vxf-plan.is-active .vxf-plan-price strong { transform:none; }
.vxs-terminal .vxf-plan-save { right:auto; left:20px; }
.vxs-terminal .vxf-plan-save ~ .vxf-plan-main, .vxs-terminal .vxf-plan:has(.vxf-plan-save) .vxf-plan-main { padding-top:6px; }

/* checkout dock */
.vxf-dock { position:sticky; bottom:14px; z-index:20; display:flex; align-items:center; gap:22px; margin-top:6px; padding:16px 16px 16px 22px; border:1px solid rgba(170,120,255,.3); border-radius:22px; background:rgba(14,10,24,.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 36px rgba(109,40,217,.22); }
.vxf-dock-sum { display:flex; flex-direction:column; gap:3px; min-width:150px; }
.vxf-dock-label { color:#7d6a9e; font-size:9.5px; font-weight:900; letter-spacing:.24em; }
.vxf-dock-total { font-size:30px; font-weight:900; letter-spacing:-.04em; line-height:1; background:linear-gradient(135deg,#fff 20%,#c9a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vxf-dock-plan { color:#8f879c; font-size:12px; font-weight:600; }
.vxf-dock-main { flex:1; min-width:0; }
.vxf-dock .vxf-head--cta { display:none; }
.vxf-dock .vxf-ctas { flex-direction:row !important; }
.vxf-dock .vxf-ctas > * { flex:1; }

/* ---- dossier ---- */
.vxs-dossier { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:30px; align-items:start; padding:70px 0 0; scroll-margin-top:90px; }
.vxs-dossier-side { position:sticky; top:100px; display:flex; flex-direction:column; gap:14px; }
.vxs-side-card { padding:22px; border:1px solid rgba(255,255,255,.07); border-radius:22px; background:linear-gradient(170deg, rgba(22,17,34,.8), rgba(10,8,16,.94)); }
.vxs-side-card .vx-panel-label { display:block; margin-bottom:14px; }
.vxs-perks { display:flex; flex-direction:column; gap:10px; }
.vxs-perk { display:flex; align-items:center; gap:12px; color:#d8cfe4; font-size:14px; font-weight:650; }
.vxs-perk b { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:10px; background:rgba(139,92,246,.14); color:#c9a6ff; font-size:11px; font-weight:900; }
.vxs-side-support p { margin:0 0 16px; color:#8a8196; font-size:13.5px; line-height:1.6; }
.vxs-side-support .vx-btn-ghost { width:100%; justify-content:center; }

@media (max-width:1023px) {
  .vxs-hero { padding:16px 0 50px; }
  .vxs-hero-inner { grid-template-columns:1fr; gap:34px; }
  .vxs-pass-wrap { max-width:520px; width:100%; margin:0 auto; }
  .vxs-dossier { grid-template-columns:1fr; }
  .vxs-dossier-side { position:relative; top:0; }
  .vxs-terminal { padding:0 16px 16px; border-radius:22px; }
  .vxs-terminal .vx-panel-top { margin:0 -16px 18px; padding:0 16px; }
  .vxf-dock { flex-direction:column; align-items:stretch; gap:12px; padding:14px; bottom:10px; }
  .vxf-dock-sum { flex-direction:row; align-items:baseline; justify-content:space-between; min-width:0; }
  .vxf-dock-label { display:none; }
  .vxf-dock-total { font-size:24px; }
  .vxf-dock .vxf-ctas { flex-direction:column !important; }
}
@media (max-width:560px) {
  .vxs-terminal .vxf-plan { min-height:0; }
  .vxs-terminal .vxf-plan-price strong { font-size:24px; }
}

/* =========================================================
   21. FAQ CATEGORIES
   ========================================================= */
.vx-kb-cats { display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 26px; }
.vx-kb-cat { display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 8px 0 14px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.02); color:#a499b4; font-size:13px; font-weight:700; cursor:pointer; transition:all .25s cubic-bezier(.3,1.3,.4,1); animation:vxpFadeUp .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i) * 50ms + 350ms); }
.vx-kb-cat i { width:6px; height:6px; border-radius:50%; background:#5a4a78; transition:all .25s ease; }
.vx-kb-cat b { display:grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:rgba(255,255,255,.06); color:#8d82a0; font-size:11px; font-weight:800; transition:all .25s ease; }
.vx-kb-cat:hover { color:#fff; border-color:rgba(170,120,255,.45); transform:translateY(-2px); }
.vx-kb-cat:hover i { background:#b98bff; box-shadow:0 0 8px #a878ff; }
.vx-kb-cat.is-active { color:#fff; border-color:rgba(200,160,255,.6); background:linear-gradient(135deg, rgba(155,92,255,.3), rgba(109,40,217,.16)); box-shadow:0 0 22px rgba(139,92,246,.3), inset 0 1px 0 rgba(255,255,255,.1); }
.vx-kb-cat.is-active i { background:#fff; box-shadow:0 0 10px #fff; }
.vx-kb-cat.is-active b { background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; }

.vx-kb-list { counter-reset:vxkb; }
.vx-kb-group { counter-reset:vxkb; display:flex; align-items:center; gap:14px; margin:26px 0 4px; animation:vxpFadeUp .6s cubic-bezier(.16,1,.3,1) both; }
.vx-kb-group:first-child { margin-top:0; }
.vx-kb-group-no { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#9b5cff,#6d28d9); color:#fff; font-size:11px; font-weight:900; box-shadow:0 0 18px rgba(139,92,246,.5); }
.vx-kb-group h2 { margin:0; color:#fff; font-size:15px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.vx-kb-group i { flex:1; height:1px; background:linear-gradient(90deg, rgba(155,92,255,.4), transparent); }
.vx-kb-item { counter-increment:vxkb; }
.vx-kb-no { font-size:0 !important; }
.vx-kb-no::before { content:counter(vxkb, decimal-leading-zero); font-size:12px; }

/* EU withdrawal notice at every purchase point */
.vx-legal-note { display:flex; align-items:flex-start; gap:8px; margin:12px 0 0; color:#6f6580; font-size:11px; line-height:1.5; text-align:left; }
.vx-legal-note svg { width:14px; height:14px; flex-shrink:0; margin-top:1px; color:#8b6fbf; }
.vxf-dock .vx-legal-note { margin-top:10px; }
.vxc-foot .vx-legal-note { margin:12px 0 0; font-size:10.5px; }

/* =========================================================
   22. COOKIE BANNER — VEXDROP consent card
   (positioning stays with SellAuth's consent script; we only
   restyle the look so every position setting keeps working)
   ========================================================= */
.sa-cc { font-family:inherit !important; }
.sa-cc-backdrop { background:rgba(3,2,7,.78) !important; -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important; }
.sa-cc-box {
  position:relative !important; isolation:isolate !important; overflow:hidden !important;
  background:linear-gradient(170deg, rgba(28,20,46,.97), rgba(9,7,14,.98)) !important;
  border:1px solid rgba(170,120,255,.28) !important; border-radius:22px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 44px rgba(109,40,217,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color:#ece6f5 !important;
  -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
}
.sa-cc[data-pos="bar"] .sa-cc-box, .sa-cc[data-pos="bottom_bar"] .sa-cc-box { border-radius:22px 22px 0 0 !important; border-bottom:0 !important; }
.sa-cc-box::before {
  content:"" !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; height:1px !important; z-index:2 !important; pointer-events:none !important;
  background:linear-gradient(90deg, transparent, #e2cfff, transparent) !important; background-size:45% 100% !important; background-repeat:no-repeat !important;
  animation:vxPanelLine 5s ease-in-out infinite !important;
}
.sa-cc-box::after {
  content:"" !important; position:absolute !important; top:-90px !important; right:-60px !important; width:260px !important; height:200px !important; z-index:-1 !important; pointer-events:none !important;
  border-radius:50% !important; background:radial-gradient(ellipse, rgba(139,92,246,.28), transparent 65%) !important; filter:blur(14px) !important;
}
.sa-cc-title { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; color:#fff !important; font-size:14px !important; font-weight:900 !important; letter-spacing:.14em !important; text-transform:uppercase !important; }
.sa-cc-title > span { display:inline-flex !important; align-items:center !important; gap:10px !important; }
.sa-cc-title > span::before {
  content:"" !important; width:30px !important; height:30px !important; flex-shrink:0 !important; border-radius:10px !important;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/><path d='M8.5 8.5v.01M16 15.5v.01M12 12v.01M11 17v.01M7 14v.01'/></svg>") center / 16px no-repeat, linear-gradient(135deg,#9b5cff,#6d28d9) !important;
  box-shadow:0 0 16px rgba(139,92,246,.55) !important;
}
.sa-cc-msg { color:#9a90a8 !important; font-size:13px !important; line-height:1.6 !important; }
.sa-cc-msg a { color:#c9a6ff !important; font-weight:700 !important; text-decoration:none !important; border-bottom:1px solid rgba(201,166,255,.35) !important; }
.sa-cc-msg a:hover { color:#fff !important; border-bottom-color:#fff !important; }
.sa-cc-x { width:32px !important; height:32px !important; display:grid !important; place-items:center !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:10px !important; background:rgba(255,255,255,.03) !important; color:#a499b4 !important; font-size:18px !important; line-height:1 !important; cursor:pointer !important; transition:all .25s ease !important; }
.sa-cc-x:hover { color:#fff !important; border-color:rgba(170,120,255,.5) !important; background:rgba(139,92,246,.15) !important; transform:rotate(90deg) !important; }

.sa-cc-actions { gap:8px !important; }
.sa-cc-btn {
  height:42px !important; padding:0 18px !important; border-radius:12px !important;
  border:1px solid rgba(255,255,255,.12) !important; background:rgba(255,255,255,.03) !important;
  color:#d6c8ec !important; font-size:11.5px !important; font-weight:800 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  cursor:pointer !important; transition:transform .25s cubic-bezier(.3,1.4,.4,1), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease !important;
}
.sa-cc-btn:hover { color:#fff !important; border-color:rgba(170,120,255,.5) !important; background:rgba(139,92,246,.12) !important; transform:translateY(-2px) !important; }
.sa-cc-btn.sa-cc-solid {
  border-color:rgba(215,190,255,.35) !important; color:#fff !important;
  background:linear-gradient(135deg,#a36bff 0%,#7c3aed 50%,#5b21b6 100%) !important; background-size:200% 200% !important;
  box-shadow:0 10px 26px rgba(109,40,217,.4), inset 0 1px 0 rgba(255,255,255,.2) !important; animation:vxcGradient 6s ease infinite !important;
}
.sa-cc-btn.sa-cc-solid:hover { box-shadow:0 14px 34px rgba(109,40,217,.55), 0 0 22px rgba(155,92,255,.4) !important; }
.sa-cc-btn.sa-cc-ghost { border-color:transparent !important; background:transparent !important; color:#8d82a0 !important; }
.sa-cc-btn.sa-cc-ghost:hover { color:#e6d7ff !important; background:rgba(255,255,255,.04) !important; }

.sa-cc-cat { position:relative !important; padding:14px 16px !important; margin-bottom:8px !important; border:1px solid rgba(255,255,255,.07) !important; border-radius:14px !important; background:rgba(255,255,255,.02) !important; transition:border-color .25s ease, background .25s ease !important; }
.sa-cc-cat:hover { border-color:rgba(170,120,255,.3) !important; background:rgba(139,92,246,.05) !important; }
.sa-cc-cat b { color:#f3eefa !important; font-size:13.5px !important; font-weight:800 !important; }
.sa-cc-cat p { color:#8a8196 !important; font-size:12px !important; line-height:1.55 !important; }
.sa-cc-always { padding:3px 9px !important; border-radius:999px !important; background:rgba(74,222,128,.12) !important; color:#4ade80 !important; font-size:9.5px !important; font-weight:800 !important; letter-spacing:.14em !important; text-transform:uppercase !important; }
.sa-cc-switch {
  -webkit-appearance:none !important; appearance:none !important; position:relative !important; width:40px !important; height:22px !important; flex-shrink:0 !important;
  border-radius:999px !important; border:1px solid rgba(255,255,255,.15) !important; background:rgba(255,255,255,.08) !important; cursor:pointer !important;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.sa-cc-switch::after { content:"" !important; position:absolute !important; top:2px !important; left:2px !important; width:16px !important; height:16px !important; border-radius:50% !important; background:#cfc5dd !important; transition:transform .3s cubic-bezier(.3,1.5,.4,1), background .25s ease !important; }
.sa-cc-switch:checked { background:linear-gradient(135deg,#9b5cff,#6d28d9) !important; border-color:transparent !important; box-shadow:0 0 14px rgba(139,92,246,.55) !important; }
.sa-cc-switch:checked::after { transform:translateX(18px) !important; background:#fff !important; }
.sa-cc-switch:focus-visible { outline:2px solid #b98bff !important; outline-offset:2px !important; }

@media (prefers-reduced-motion: reduce) { .sa-cc-box::before, .sa-cc-btn.sa-cc-solid { animation:none !important; } }

.vx-cookie-link { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.02); color:#8a8196; font-size:12px; font-weight:600; cursor:pointer; transition:all .25s ease; }
.vx-cookie-link svg { width:14px; height:14px; color:#a878ff; transition:transform .5s cubic-bezier(.3,1.4,.4,1); }
.vx-cookie-link:hover { color:#fff; border-color:rgba(170,120,255,.45); background:rgba(139,92,246,.1); }
.vx-cookie-link:hover svg { transform:rotate(-30deg) scale(1.1); }

/* legal: keep the corner ribbon clear of the first lines */
.vx-legal-doc { padding-top:58px !important; }
.vx-legal-stamp { top:18px !important; right:-58px !important; padding:5px 60px !important; font-size:7.5px !important; }
.vx-legal-body > *:first-child, .vx-legal-body > *:nth-child(2) { padding-right:90px; }
@media (max-width:1023px) { .vx-legal-doc { padding-top:30px !important; } .vx-legal-body > *:first-child, .vx-legal-body > *:nth-child(2) { padding-right:0; } }

/* Cookie banner layout (positions from SellAuth: card right/left, bar, centered dialog) */
.sa-cc { position:fixed; z-index:2147483600; right:22px; bottom:22px; width:min(400px, calc(100vw - 32px)); }
.sa-cc[data-pos*="left"] { right:auto; left:22px; }
.sa-cc[data-pos*="bar"] { left:0; right:0; bottom:0; width:100%; }
.sa-cc[data-pos*="bar"] .sa-cc-box { padding:18px max(22px, calc((100vw - 1100px) / 2)) !important; }
.sa-cc[data-pos="modal"] { inset:0; width:auto; display:grid; place-items:center; padding:16px; }
.sa-cc[data-pos="modal"] .sa-cc-box { width:min(460px, 100%); }
.sa-cc-backdrop { position:fixed; inset:0; }
.sa-cc-box { padding:20px 20px 18px; max-height:calc(100vh - 44px); overflow:auto; }
.sa-cc-title { margin:0; }
.sa-cc-msg { margin:10px 0 0; }
.sa-cc-actions { display:flex; flex-wrap:wrap; margin-top:14px; }
.sa-cc-prefs .sa-cc-actions { margin-top:12px; }
.sa-cc-cat { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px; }
.sa-cc-cat p { grid-column:1 / -1; margin:0; }
.sa-cc-t { transition:opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.sa-cc-from { opacity:0; transform:translateY(12px); }
.sa-cc-to { opacity:1; transform:none; }
.sa-cc-fade { transition:opacity .2s ease; }
.sa-cc-fade-from { opacity:0; }
.sa-cc-fade-to { opacity:1; }
@media (max-width:560px) {
  .sa-cc:not([data-pos="modal"]) { left:0; right:0; bottom:0; width:100%; }
  .sa-cc:not([data-pos="modal"]) .sa-cc-box { border-radius:20px 20px 0 0 !important; border-bottom:0 !important; }
  .sa-cc-actions .sa-cc-btn { flex:1 1 auto; }
}

/* =========================================================
   Welcome coupon popup — one clean VEXDROP design with motion
   ========================================================= */
@property --vx-cp-angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }

.sa-coupon .rounded-card {
  position:relative; overflow:hidden; isolation:isolate;
  padding:34px 26px 22px !important; border-radius:26px !important; border:0 !important;
  background:radial-gradient(120% 70% at 50% 0%, rgba(124,58,237,.30), transparent 60%), linear-gradient(170deg, #150e24, #0a0812 70%) !important;
  box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 70px rgba(124,58,237,.28) !important;
}
/* rotating light border */
.sa-coupon .rounded-card::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--vx-cp-angle), rgba(167,139,250,.15) 0deg, rgba(167,139,250,.15) 200deg, #c4b5fd 260deg, #7c3aed 300deg, rgba(167,139,250,.15) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:vxCpSpin 5s linear infinite;
}
/* soft glow following the top */
.sa-coupon .rounded-card::after {
  content:""; position:absolute; z-index:-1; left:50%; top:-120px; width:320px; height:220px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(167,139,250,.35), transparent); filter:blur(8px); pointer-events:none;
  animation:vxCpBreathe 4.5s ease-in-out infinite;
}
@keyframes vxCpSpin { to { --vx-cp-angle:360deg; } }
@keyframes vxCpBreathe { 0%,100% { opacity:.55; } 50% { opacity:1; } }

/* close button stays top-right */
.sa-coupon .rounded-card > button.absolute {
  top:14px !important; right:14px !important; width:32px; height:32px; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#b9b0c8 !important; transition:background .2s, color .2s;
}
.sa-coupon .rounded-card > button.absolute:hover { background:rgba(255,255,255,.1); color:#fff !important; }
.sa-coupon .rounded-card > img { display:none; }

/* floating gift with pulse + sparkles */
.vx-coupon-gift {
  position:relative; width:68px; height:68px; margin:2px auto 16px; border-radius:22px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, #b085ff, #7c3aed 55%, #5b21b6);
  box-shadow:0 14px 34px rgba(109,40,217,.55); animation:vxCpFloat 3.4s ease-in-out infinite, vxCpPulse 3.4s ease-in-out infinite;
}
.vx-coupon-gift svg { width:32px; height:32px; }
.vx-coupon-gift::before, .vx-coupon-gift::after {
  content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:#f5f0ff; box-shadow:0 0 10px #c4b5fd;
  animation:vxCpTwinkle 2.4s ease-in-out infinite;
}
.vx-coupon-gift::before { top:-6px; right:-8px; }
.vx-coupon-gift::after { bottom:4px; left:-12px; width:4px; height:4px; animation-delay:1.2s; }
@keyframes vxCpFloat { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-6px) rotate(-5deg); } }
@keyframes vxCpPulse { 0%,100% { box-shadow:0 14px 34px rgba(109,40,217,.55), 0 0 0 0 rgba(139,92,246,.45); } 50% { box-shadow:0 18px 40px rgba(109,40,217,.65), 0 0 0 12px rgba(139,92,246,0); } }
@keyframes vxCpTwinkle { 0%,100% { opacity:0; transform:scale(.4); } 50% { opacity:1; transform:scale(1); } }

.sa-coupon-eyebrow {
  display:inline-block; margin:0 0 10px !important; padding:6px 13px; border-radius:999px;
  font-size:10.5px !important; font-weight:800 !important; letter-spacing:.26em !important; color:#e9d5ff !important;
  background:rgba(139,92,246,.16); border:1px solid rgba(170,120,255,.35);
}
.sa-coupon-title {
  margin:0 !important; font-size:clamp(25px, 4vw, 30px) !important; font-weight:800 !important; line-height:1.15 !important; letter-spacing:.005em;
  background:linear-gradient(100deg, #fff 30%, #d8c4ff 50%, #fff 70%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent !important; animation:vxCpShine 5s ease-in-out infinite;
}
@keyframes vxCpShine { 0%,100% { background-position:100% 0; } 50% { background-position:0 0; } }
.sa-coupon-body { margin-top:10px !important; color:#b3a9c6 !important; font-size:14px !important; line-height:1.55; }

/* code: dashed ticket with a light sweep */
.sa-coupon button.font-mono {
  position:relative; overflow:hidden; margin-top:20px !important; padding:15px !important; border-radius:16px !important;
  border:1.5px dashed rgba(196,164,255,.6) !important; background:rgba(139,92,246,.09) !important;
  font-size:21px !important; font-weight:800 !important; letter-spacing:.32em; color:#fff !important; transition:transform .2s ease, background .2s ease;
}
.sa-coupon button.font-mono::after {
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); animation:vxCpSweep 3.6s ease-in-out infinite;
}
.sa-coupon button.font-mono:hover { transform:translateY(-1px); background:rgba(139,92,246,.16) !important; }
@keyframes vxCpSweep { 0%,55% { transform:translateX(-120%); } 85%,100% { transform:translateX(120%); } }
.sa-coupon button.font-mono + p { margin-top:9px !important; color:#8f879c !important; font-size:12px !important; }

.sa-coupon-actions { margin-top:20px !important; }
.sa-coupon-actions a {
  position:relative; overflow:hidden; padding:14px !important; border-radius:14px !important;
  font-weight:800 !important; letter-spacing:.16em; font-size:12.5px !important;
  background:linear-gradient(135deg, #a36bff, #7c3aed 55%, #5b21b6) !important; box-shadow:0 12px 30px rgba(109,40,217,.45) !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
.sa-coupon-actions a:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(109,40,217,.6) !important; }
.sa-coupon-actions a::after {
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%); transition:transform .6s ease;
}
.sa-coupon-actions a:hover::after { transform:translateX(120%); }
.sa-coupon-actions button { color:#8f879c !important; font-size:13px !important; }
.sa-coupon-actions button:hover { color:#fff !important; }

@media (prefers-reduced-motion: reduce) {
  .sa-coupon .rounded-card::before, .sa-coupon .rounded-card::after, .vx-coupon-gift, .vx-coupon-gift::before, .vx-coupon-gift::after,
  .sa-coupon-title, .sa-coupon button.font-mono::after { animation:none !important; }
}

/* =========================================================
   9. ALPINE GUARD — x-show must always be able to hide
   Any element Alpine hides gets display:none, even if a
   theme rule forces display with !important. Prevents the
   "CART UNAVAILABLE" / header-vanish class of bugs.
   ========================================================= */
[x-show][style*="display: none"],
[x-show][style*="display:none"] { display:none !important; }


/* =========================================================
   VIBRANCE LAYER — more colour, light and life (keeps the VEXDROP look)
   ========================================================= */
:root { --vex-bg: #0c0918; --vx-pink: #f472b6; --vx-cyan: #22d3ee; }
html { background: #0c0918 !important; }
body { background: transparent !important; }
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 12% 8%, rgba(124, 58, 237, .38), transparent 70%),
    radial-gradient(34% 38% at 92% 30%, rgba(219, 39, 119, .22), transparent 70%),
    radial-gradient(40% 44% at 20% 88%, rgba(6, 182, 212, .14), transparent 70%),
    radial-gradient(30% 34% at 78% 92%, rgba(139, 92, 246, .24), transparent 70%),
    linear-gradient(180deg, #120c26 0%, #0c0918 45%, #0e0a20 100%);
  animation: vxAurora 26s ease-in-out infinite alternate;
}
@keyframes vxAurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } 100% { transform: translate3d(2%, -1%, 0) scale(1.02); } }

/* sections that painted solid black let the colour through */
main > section, main > div > section, .vx-home, .vx-serv, .vx-why, .vx-final { background-color: transparent !important; }

/* headings: soft colour gradient with a slow shimmer */
.vx-hero-title, .vx-home-title, .vx-home-h2 {
  background: linear-gradient(100deg, #ffffff 0%, #ede4ff 35%, #f0abfc 55%, #c4b5fd 75%, #ffffff 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: vxHeadShine 9s ease-in-out infinite;
}
@keyframes vxHeadShine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* cards stand out: lighter glass, coloured edge, glow on hover */
.vx-serv-card, .vx-why-card, .vx-card, .vx-final-card, .vx-dossier-card {
  background: linear-gradient(160deg, rgba(64, 40, 118, .5), rgba(24, 16, 46, .78)) !important;
  border: 1px solid rgba(167, 139, 250, .28) !important;
  box-shadow: 0 14px 40px rgba(5, 3, 12, .45), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .35s ease !important;
}
.vx-serv-card:hover, .vx-why-card:hover, .vx-card:hover, .vx-final-card:hover, .vx-dossier-card:hover {
  transform: translateY(-5px);
  border-color: rgba(240, 171, 252, .55) !important;
  box-shadow: 0 22px 50px rgba(88, 28, 135, .45), 0 0 0 1px rgba(240, 171, 252, .2), 0 0 40px rgba(219, 39, 119, .18) !important;
}

/* primary buttons: violet -> magenta with a glow */
.vx-btn {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 45%, #db2777 100%) !important;
  background-size: 160% 160% !important; border: 0 !important;
  box-shadow: 0 12px 34px rgba(168, 85, 247, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset !important;
  transition: transform .25s ease, box-shadow .25s ease, background-position .6s ease !important;
}
.vx-btn:hover { transform: translateY(-2px); background-position: 100% 100% !important; box-shadow: 0 18px 42px rgba(219, 39, 119, .45) !important; }
.vx-btn-ghost { border-color: rgba(196, 164, 255, .45) !important; background: rgba(139, 92, 246, .12) !important; }
.vx-btn-ghost:hover { background: rgba(139, 92, 246, .22) !important; }

/* stats: colourful numbers */
.vx-stat strong { background: linear-gradient(90deg, #fff, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.vx-stat strong em { color: #f472b6 !important; -webkit-text-fill-color: #f472b6; }

/* small accents: section kickers and badges get a touch of pink/cyan */
.vx-kicker, [class*="eyebrow"] { color: #f0abfc !important; }
.vx-card-badges > *:nth-child(2n) { border-color: rgba(34, 211, 238, .45) !important; color: #a5f3fc !important; }

@media (prefers-reduced-motion: reduce) { body::before, .vx-hero-title, .vx-home-title, .vx-home-h2 { animation: none !important; } }