/* VaultX depth layer: "vault glass". Loaded last on every page so it refines the shared look.
   One idea, applied consistently: every surface is a slab of tinted glass with a lit top edge,
   a gradient rim, stacked shadows that lift it off the 3D background, and a soft light that follows
   the pointer (set by hooks.js through --mx/--my). Motion is skipped for reduced-motion users. */
:root{
  --bg:#070b14; --ink:#eaf1ff;
  --rim1:rgba(111,182,255,.42); --rim2:rgba(139,108,255,.30); --rim0:rgba(255,255,255,.05);
  --slab:linear-gradient(180deg,rgba(24,34,54,.78) 0%,rgba(13,19,32,.80) 100%);
  --lift:0 1px 0 rgba(255,255,255,.07) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 2px 4px rgba(0,0,0,.35),0 14px 28px -10px rgba(0,0,0,.6),0 40px 80px -30px rgba(10,30,80,.55);
  --head:'Space Grotesk',Inter,system-ui,sans-serif;
}
body{background:radial-gradient(1100px 650px at 78% -8%,#13285a 0%,transparent 62%),radial-gradient(900px 600px at -8% 108%,#24154d 0%,transparent 58%),radial-gradient(600px 400px at 50% 50%,rgba(20,40,90,.25),transparent 70%),var(--bg)}
h1,h2,h3,.hero h1,.ch h2{font-family:var(--head);letter-spacing:-.015em}
.hero h1{font-weight:700;font-size:clamp(30px,4.6vw,52px);line-height:1.04;text-shadow:0 2px 0 rgba(0,0,0,.35),0 18px 40px rgba(30,70,180,.35)}

/* ---- header: glass bar with a lit bottom edge ---- */
header{background:linear-gradient(180deg,rgba(10,16,30,.82),rgba(7,11,20,.66));border-bottom:1px solid transparent;
  box-shadow:0 1px 0 rgba(111,182,255,.18),0 10px 30px -12px rgba(0,0,0,.7)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(111,182,255,.65) 30%,rgba(139,108,255,.65) 70%,transparent)}
.logo{display:inline-flex;align-items:center;gap:9px;font:700 18px/1 var(--head);letter-spacing:-.01em;color:var(--ink)}
.logo img{width:30px;height:30px;flex:none;filter:drop-shadow(0 4px 10px rgba(78,125,255,.55));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.logo:hover img{transform:rotate(-12deg) scale(1.06)}
.logo span{background:linear-gradient(135deg,#6fb6ff,#8b6cff);-webkit-background-clip:text;background-clip:text;color:transparent}
nav a{border-radius:8px;transition:background .2s,color .2s}
nav a:hover,nav a.on{background:linear-gradient(180deg,rgba(78,125,255,.20),rgba(78,125,255,.08));box-shadow:0 1px 0 rgba(255,255,255,.08) inset}

/* ---- slabs ---- */
.card,section.card,.kpi,.mk,.vxh,.box,.wcard,.cardx{
  position:relative;z-index:0;
  background:var(--slab) padding-box,linear-gradient(160deg,var(--rim1),var(--rim0) 38%,var(--rim0) 62%,var(--rim2)) border-box!important;
  border:1px solid transparent!important;box-shadow:var(--lift)!important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card,section.card{border-radius:16px!important}
.kpi,.mk,.box{border-radius:14px!important}
/* top sheen + pointer light */
.card::before,section.card::before,.kpi::before,.mk::before,.vxh::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(120,170,255,.13),transparent 60%),
             linear-gradient(180deg,rgba(255,255,255,.055),transparent 32%)}
.ch{border-bottom:1px solid rgba(120,150,210,.12)!important;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.kpi b,.kpi .v{text-shadow:0 0 22px rgba(111,182,255,.25)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .kpi:hover,.mk:hover{transform:translateY(-3px);box-shadow:var(--lift),0 24px 50px -20px rgba(78,125,255,.45)!important}
}

/* inner wells (inputs, nested boxes) are pressed into the slab */
.vxh-box,.vxc-card,.filters select,.filters input,input[type=text],input[type=email],input[type=number],select{
  box-shadow:0 2px 6px rgba(0,0,0,.45) inset,0 1px 0 rgba(255,255,255,.04)!important}

/* ---- buttons: tactile, lit from above ---- */
.vxh-btn,.btn,.go,.wbtn{background:linear-gradient(180deg,#7dbdff 0%,#4e86ff 55%,#4a6cf0 100%)!important;color:#061128!important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 0 rgba(10,30,90,.45) inset,0 6px 16px -4px rgba(78,125,255,.6)!important;
  border:0!important;transition:transform .15s,box-shadow .15s,filter .15s}
.vxh-btn:hover,.btn:hover,.go:hover,.wbtn:hover{filter:brightness(1.07)}
.vxh-btn:active,.btn:active,.go:active,.wbtn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 6px -2px rgba(78,125,255,.5)!important}
.vxh-btn.alt{background:linear-gradient(180deg,rgba(40,54,84,.9),rgba(22,30,48,.9))!important;color:var(--ink)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 4px 12px -4px rgba(0,0,0,.6)!important}
:focus-visible{outline:2px solid #6fb6ff;outline-offset:2px}

/* ---- hero mark: the logo as a floating 3D object ---- */
.vx-mark{width:clamp(64px,9vw,96px);height:auto;float:right;margin:0 0 10px 18px;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(78,125,255,.35));
  transform:perspective(600px) rotateX(var(--rx,10deg)) rotateY(var(--ry,-16deg));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:no-preference){.vx-mark{animation:vxfloat 7s ease-in-out infinite}}
@keyframes vxfloat{50%{translate:0 -8px}}
@media(max-width:600px){.vx-mark{width:56px;margin-left:10px}}

footer{border-top:1px solid rgba(120,150,210,.14)!important;background:linear-gradient(180deg,rgba(10,16,30,.4),transparent)}
.vx-foot{display:flex;align-items:center;gap:8px;font:600 14px var(--head);color:var(--ink);margin-bottom:6px}.vx-foot img{width:22px;height:22px}

/* tables read as engraved rows */
tbody tr{transition:background .15s}tbody tr:hover{background:linear-gradient(90deg,rgba(78,125,255,.10),transparent)!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* generated article pages (briefs, translations) use a simple header inside the column */
.w>header{position:relative;background:none;box-shadow:none;padding:16px 0;border:0}.w>header::after{display:none}
.logo b{font-weight:700}
nav a{padding:6px 8px}
@media(max-width:1560px){header nav{display:none}.mnav{display:flex!important}}
/* the header row shares the .bar name with progress bars on some pages; keep the header row intact */
header .bar{height:56px!important;overflow:visible!important;background:none!important;border-radius:0!important}

.vx-feat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--dim)}.vx-feat img{height:40px;width:auto;opacity:.9}

/* ---- signature glow: a slowly turning neon rim on the most important tool ---- */
@property --vxa{syntax:'<angle>';initial-value:0deg;inherits:false}
.card.glow{background:var(--slab) padding-box,conic-gradient(from var(--vxa),#6fb6ff,#8b6cff,#22c38e,#ff6fd8,#6fb6ff) border-box!important;
  box-shadow:var(--lift),0 0 40px -12px rgba(111,182,255,.55),0 0 70px -30px rgba(139,108,255,.6)!important}
@media (prefers-reduced-motion:no-preference){.card.glow{animation:vxspin 8s linear infinite}}
@keyframes vxspin{to{--vxa:360deg}}
#vx-check{scroll-margin-top:140px}

/* ---- live ticker tape under the header ---- */
.vx-tape{position:relative;overflow:hidden;border-bottom:1px solid rgba(120,150,210,.12);background:linear-gradient(90deg,rgba(10,16,30,.9),rgba(16,24,44,.75),rgba(10,16,30,.9));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vx-tape .tr{display:flex;width:max-content;gap:28px;padding:7px 0;animation:vxtape 60s linear infinite;font:500 12.5px var(--mono,ui-monospace,monospace)}
.vx-tape:hover .tr{animation-play-state:paused}
.vx-tape a{display:inline-flex;gap:8px;align-items:center;color:#cfdaf0;text-decoration:none;white-space:nowrap}
.vx-tape img{width:16px;height:16px;border-radius:50%}
.vx-tape b{font-family:'Space Grotesk',Inter,sans-serif;color:#fff}.vx-tape .u{color:#3ee6a8}.vx-tape .d{color:#ff7a77}
@keyframes vxtape{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.vx-tape .tr{animation:none}}

/* ---- trust strip: data sources and integrations on a turning 3D ring ---- */
.vx-trust{margin:34px 0 8px;padding:26px 18px 22px;border-radius:20px;position:relative;overflow:hidden;
  background:radial-gradient(600px 220px at 50% 0%,rgba(78,134,255,.18),transparent 70%),linear-gradient(180deg,rgba(18,26,46,.85),rgba(10,15,28,.85)) padding-box,linear-gradient(160deg,rgba(111,182,255,.45),rgba(255,255,255,.04) 40%,rgba(139,108,255,.4)) border-box;
  border:1px solid transparent;box-shadow:var(--lift)}
.vx-trust h2{font:700 clamp(18px,2.2vw,24px)/1.2 'Space Grotesk',Inter,sans-serif;text-align:center;margin:0}
.vx-trust>p{text-align:center;color:#93a1b8;font-size:13.5px;margin:6px auto 0;max-width:620px}
.vx-stage{height:150px;perspective:1100px;display:flex;align-items:center;justify-content:center;margin:12px 0 4px}
.vx-ring{position:relative;width:170px;height:62px;transform-style:preserve-3d;animation:vxring 36s linear infinite}
.vx-stage:hover .vx-ring{animation-play-state:paused}
.vx-ring span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;backface-visibility:hidden;
  font:700 16px 'Space Grotesk',Inter,sans-serif;color:#fff;letter-spacing:-.01em;
  background:linear-gradient(180deg,rgba(40,58,98,.95),rgba(16,24,44,.95)) padding-box,linear-gradient(140deg,rgba(111,182,255,.8),rgba(139,108,255,.35),rgba(34,195,142,.7)) border-box;border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 14px 30px -12px rgba(0,0,0,.8),0 0 24px -8px rgba(111,182,255,.5)}
.vx-ring span small{font:500 10.5px Inter,sans-serif;color:#9fb2d6;margin-top:3px}
@keyframes vxring{to{transform:rotateY(-360deg)}}
@media (prefers-reduced-motion:reduce){.vx-ring{animation:none}}
.vx-feat2{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:#93a1b8}
.vx-feat2 img{height:40px;width:auto}
.vx-legal{text-align:center;font-size:11px;color:#5b6678;margin-top:10px}
@media(max-width:560px){.vx-ring{width:130px;height:54px}.vx-ring span{font-size:14px}.vx-stage{height:120px}}

/* ---- page objects: one 3D piece per page ---- */
.obj3d{float:right;width:clamp(150px,19vw,250px);height:clamp(150px,19vw,250px);margin:-14px 0 6px 18px;position:relative;shape-outside:circle(50%)}
.obj3d::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(78,134,255,.32),rgba(139,108,255,.12) 45%,transparent 70%);filter:blur(10px)}
.obj3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.obj3d:not(.on)::after{content:"";position:absolute;inset:22%;background:url(/logo.svg) center/contain no-repeat;opacity:.9}
@media(max-width:600px){.obj3d{width:120px;height:120px;margin:-6px -6px 4px 10px}}
.w{position:relative}.obj3d.art{float:none;position:absolute;top:96px;right:-300px;width:270px;height:270px;margin:0}
@media(max-width:1419px){.obj3d.art{position:relative;top:auto;right:auto;width:100%;height:190px;margin:6px 0 -14px}}

/* ---- HUD frame: thin corner brackets that make every panel read as an instrument ---- */
.card::after,section.card::after,.kpi::after,.mk::after,.vxh::after{content:"";position:absolute;inset:7px;border-radius:calc(var(--r,16px) - 7px);pointer-events:none;z-index:1;opacity:.55;transition:opacity .3s,inset .3s;
  background:
   linear-gradient(90deg,#8fd0ff,transparent) top left/18px 1.5px no-repeat,
   linear-gradient(180deg,#8fd0ff,transparent) top left/1.5px 18px no-repeat,
   linear-gradient(270deg,#a68bff,transparent) top right/18px 1.5px no-repeat,
   linear-gradient(180deg,#a68bff,transparent) top right/1.5px 18px no-repeat,
   linear-gradient(90deg,#3ee6a8,transparent) bottom left/18px 1.5px no-repeat,
   linear-gradient(0deg,#3ee6a8,transparent) bottom left/1.5px 18px no-repeat,
   linear-gradient(270deg,#8fd0ff,transparent) bottom right/18px 1.5px no-repeat,
   linear-gradient(0deg,#8fd0ff,transparent) bottom right/1.5px 18px no-repeat}
@media (hover:hover){.card:hover::after,section.card:hover::after,.kpi:hover::after,.mk:hover::after{opacity:1;inset:4px}}
/* section titles get a short lit underline */
.ch h2{position:relative}.ch h2::after{content:"";position:absolute;left:0;bottom:-8px;width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,#6fb6ff,#8b6cff);box-shadow:0 0 10px rgba(111,182,255,.7)}
.w.wide .obj3d.art{position:relative;right:auto;top:auto;width:100%;height:170px;margin:6px 0 -14px}
html,body{overflow-x:clip}

/* ===================================================================================================
   Graphite & Gold (Oct 28). Blue was everywhere, so nothing stood out and long reading tired the eyes.
   Now: a calm near-black graphite base; blue only for things you click or that move; warm gold as the
   "vault" accent for key numbers, trust and partners; green/red/amber keep their data meaning;
   glow only on hover; one accent colour per page for orientation. The 3D stays.
   =================================================================================================== */
:root{
  --bg:#0b0d11; --ink:#eef1f6; --text:#e9edf3; --muted:#9aa3b2; --dim:#6b7484;
  --gold:#e3b866; --gold2:#f0cd85; --blue:#6fb2ff; --acc:var(--blue);
  --rim1:rgba(255,255,255,.10); --rim2:rgba(227,184,102,.16); --rim0:rgba(255,255,255,.035);
  --slab:linear-gradient(180deg,rgba(26,29,36,.86) 0%,rgba(17,19,24,.90) 100%);
  --lift:0 1px 0 rgba(255,255,255,.06) inset,0 2px 4px rgba(0,0,0,.35),0 16px 34px -18px rgba(0,0,0,.8);
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.12);
}
html[data-page=live],html[data-page=whales]{--acc:#2dd4bf}
html[data-page=scanner]{--acc:#f2b33d}
html[data-page=predictions]{--acc:#a78bfa}
html[data-page=traders]{--acc:#38bdf8}
html[data-page=stocks],html[data-page=earn]{--acc:#34d399}
html[data-page=reviews],html[data-page=insights]{--acc:#f0a35e}
html[data-page=blog],html[data-page=learn],html[data-page=brief]{--acc:#93c5fd}
body{background:radial-gradient(1100px 600px at 80% -10%,rgba(60,80,120,.22) 0%,transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(120,90,40,.14) 0%,transparent 60%),var(--bg)!important;color:var(--text)}
.hero h1{text-shadow:0 2px 0 rgba(0,0,0,.35)}
.hero h1 span{background:linear-gradient(90deg,var(--gold2),var(--gold) 45%,var(--acc))!important;-webkit-background-clip:text!important;background-clip:text!important}
.hero p,.meta,.kpi .l,.kpi .s{color:var(--muted)!important}
header{background:linear-gradient(180deg,rgba(14,16,21,.9),rgba(11,13,17,.78))!important;box-shadow:0 10px 30px -14px rgba(0,0,0,.8)!important}
header::after{background:linear-gradient(90deg,transparent,rgba(227,184,102,.55) 35%,rgba(111,178,255,.5) 65%,transparent)!important;opacity:.7}
nav a:hover,nav a.on{background:rgba(255,255,255,.06)!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--acc)!important}
.mnav a.on{border-color:var(--acc)!important}
/* calmer slabs: no permanent glow; light appears on hover only */
.card::before,section.card::before,.kpi::before,.mk::before,.vxh::before{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 30%)!important}
@media (hover:hover){.card:hover::before,section.card:hover::before,.kpi:hover::before,.mk:hover::before,.vxh:hover::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(227,184,102,.08),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.04),transparent 30%)!important}}
.kpi b,.kpi .v{text-shadow:none!important;color:var(--ink)}
.kpi .v{font-variant-numeric:tabular-nums}
.ch{border-bottom:1px solid var(--line)!important;background:none!important}
.ch h2{color:var(--ink)}
.ch h2::after{background:var(--acc)!important}
/* the token-check card: a still, gold-and-blue rim (no animation) */
.card.glow{animation:none!important;background:var(--slab) padding-box,linear-gradient(135deg,rgba(227,184,102,.55),rgba(255,255,255,.06) 45%,rgba(111,178,255,.45)) border-box!important}
/* links and buttons: blue = clickable */
a.lnk,.lnk,main a:not([class]){color:var(--blue)}
.vxh-btn.alt,.hbtn.ghost{background:rgba(255,255,255,.05)!important;color:var(--ink)!important;border:1px solid var(--line2)!important;box-shadow:none!important}
/* trust and score badges in gold */
.vxh h2,.vx-trust h2{color:var(--ink)}
.vx-pc .cta,.rvh b.sc,.score,.ts{color:var(--gold)}
table th{color:var(--muted)!important;font-weight:600}
table td{border-color:var(--line)!important}
input,select,textarea{background:rgba(0,0,0,.28)!important;border-color:var(--line2)!important;color:var(--ink)!important}
input::placeholder,textarea::placeholder{color:var(--dim)!important}
/* the 3D background stays, just quieter behind text */
#bg3d{opacity:.55}
@media(max-width:700px){#bg3d{opacity:.38}}
/* wide screens: the empty side gutters show a faint live stream of real big-money moves */
.vx-side{position:fixed;top:120px;bottom:30px;width:calc((100vw - 1320px)/2 - 24px);max-width:260px;pointer-events:none;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 80%,transparent);opacity:.55}
.vx-side.l{left:12px}.vx-side.r{right:12px}
.vx-side .col{display:flex;flex-direction:column;gap:10px;animation:vxdrift 90s linear infinite}
.vx-side .ev{padding:9px 11px;border-radius:12px;border:1px solid var(--line);background:rgba(20,23,29,.55);font:12px/1.35 Inter,sans-serif;color:var(--muted)}
.vx-side .ev b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}.vx-side .ev .usd{color:var(--gold)}
@keyframes vxdrift{to{transform:translateY(-50%)}}
@media(max-width:1699px){.vx-side{display:none}}
@media(prefers-reduced-motion:reduce){.vx-side .col{animation:none}}
/* phones: the price pills duplicate the ticker tape, so they sit in one swipeable row; smaller 3D vault so the headline shows sooner */
@media(max-width:700px){#pulse{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}#pulse::-webkit-scrollbar{display:none}#pulse>*{flex:none}.hero3d{height:190px!important}}
/* side streams are links now: clickable cards, a small title, paused on hover */
.vx-side{pointer-events:auto;opacity:.7;transition:opacity .25s}.vx-side:hover{opacity:1}
.vx-side .hd{font:600 11px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 10px 4px}
.vx-side a.ev{display:block;text-decoration:none;transition:border-color .2s,background .2s}.vx-side a.ev:hover{border-color:rgba(227,184,102,.45);background:rgba(30,33,40,.9)}
.vx-side:hover .col{animation-play-state:paused}
/* modern scrollbars everywhere (no grey Windows-95 bars): thin, dark, rounded */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(227,184,102,.45);background-clip:padding-box}::-webkit-scrollbar-corner{background:transparent}
/* site footer: about, partners, contact, donate on every page */
.vx-sitefoot{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;padding:22px 4px 8px;font-size:13.5px}
.vx-sitefoot h4{margin:0 0 8px;font:600 12px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.vx-sitefoot a{display:block;color:var(--muted);text-decoration:none;padding:3px 0}.vx-sitefoot a:hover{color:var(--ink)}
.vx-sitefoot .note{grid-column:1/-1;color:var(--dim);font-size:12px;border-top:1px solid var(--line);padding-top:12px}

/* ===== grouped navigation: four menus instead of fourteen tabs ===== */
nav.vxn{display:flex!important;align-items:center;gap:4px;overflow:visible!important;position:relative;flex:1;justify-content:center;font:500 14px Inter,sans-serif}
.vxn-list{display:flex;align-items:center;gap:2px}
.vxn-top{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:10px;border:0;background:none;color:var(--muted)!important;font:500 14px Inter,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap;letter-spacing:.01em;transition:color .2s,background .2s}
button.vxn-top::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .25s}
.vxn-top:hover,.vxn-g.open>.vxn-top,.vxn-top.on{color:var(--ink)!important;background:rgba(255,255,255,.05)}
.vxn-top.on{box-shadow:inset 0 -2px 0 var(--gold)}
.vxn-g{position:relative}
.vxn-m{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,6px);min-width:340px;display:grid;gap:2px;padding:10px;border-radius:16px;
  background:linear-gradient(180deg,rgba(24,27,34,.97),rgba(14,16,20,.98));border:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(227,184,102,.35) inset,0 30px 70px -20px rgba(0,0,0,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1),visibility .18s;z-index:50}
.vxn-m::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
@media(hover:hover) and (pointer:fine){.vxn-g:hover>.vxn-m{opacity:1;visibility:visible;transform:translate(-50%,0)}}
.vxn-g:has(:focus-visible)>.vxn-m,.vxn-g.open>.vxn-m{opacity:1;visibility:visible;transform:translate(-50%,0)}
.vxn-g:hover>button.vxn-top::after,.vxn-g.open>button.vxn-top::after{transform:rotate(225deg) translateY(-1px)}
.vxn-m a{display:grid;gap:2px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--ink)!important;transition:background .15s}
.vxn-m a b{font-weight:600;font-size:14px}.vxn-m a small{color:var(--muted);font-size:12.5px;line-height:1.3}
.vxn-m a:hover,.vxn-m a:focus-visible,.vxn-m a.on{background:linear-gradient(90deg,rgba(227,184,102,.12),rgba(255,255,255,.03))}
.vxn-m a.on b{color:var(--gold)}
.vxn-burger{display:none;width:42px;height:38px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.03);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.vxn-burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.mnav{display:none!important}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media(max-width:1120px){
  nav.vxn{flex:none;margin-left:auto;order:3}
  .vxn-burger{display:inline-flex}
  .vxn-list{position:fixed;left:0;right:0;top:0;bottom:0;z-index:80;flex-direction:column;align-items:stretch;gap:6px;padding:72px 16px 30px;overflow-y:auto;
    background:rgba(10,11,14,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  nav.vxn.open .vxn-list{opacity:1;visibility:visible}
  nav.vxn.open .vxn-burger{position:fixed;top:12px;right:14px;z-index:90}
  nav.vxn.open .vxn-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}nav.vxn.open .vxn-burger i:nth-child(2){opacity:0}nav.vxn.open .vxn-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .vxn-top{font-size:16px;padding:12px 6px}button.vxn-top{pointer-events:none;color:var(--gold)!important;font-size:12px;text-transform:uppercase;letter-spacing:.1em;padding:16px 6px 4px}button.vxn-top::after{display:none}
  .vxn-m{position:static;transform:none!important;opacity:1;visibility:visible;min-width:0;box-shadow:none;border:0;background:none;padding:0;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .vxn-m a{border:1px solid var(--line)}
}
body.vxn-lock{overflow:hidden}
body.vxn-lock header,body.vxn-lock .top,body.vxn-lock .bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;filter:none!important}
.vxn-search{display:flex;align-items:center;margin-left:8px;border:1px solid var(--line2);border-radius:10px;background:rgba(255,255,255,.03);transition:border-color .2s,box-shadow .2s}
.vxn-search:focus-within{border-color:rgba(227,184,102,.55);box-shadow:0 0 0 3px rgba(227,184,102,.12)}
.vxn-search input{width:190px;background:none!important;border:0!important;box-shadow:none!important;padding:7px 4px 7px 11px;font:500 13px Inter,sans-serif;color:var(--ink)!important;outline:none}
.vxn-search button{border:0;background:none;color:var(--muted);font-size:17px;padding:0 10px;cursor:pointer}
@media(max-width:1380px){.vxn-search input{width:130px}}
@media(max-width:1120px){.vxn-search{order:-1;margin:0 0 6px}.vxn-search input{width:100%;font-size:15px;padding:12px}}

/* services row under the header: the main services always visible, like the big crypto sites */
.vx-sbar{border-top:1px solid rgba(255,255,255,.05);background:rgba(10,11,14,.55)}
.vx-sbar .in{max-width:1280px;margin:0 auto;padding:0 16px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.vx-sbar .in::-webkit-scrollbar{display:none}
.vx-sbar a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:9px 12px;font:500 13px Inter,sans-serif;color:var(--muted)!important;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.vx-sbar a:hover{color:var(--ink)!important}.vx-sbar a.on{color:var(--ink)!important;border-bottom-color:var(--gold)}
.vx-sbar a .ic{font-size:14px;filter:saturate(.8)}
.vx-sbar a .new{font:700 9.5px Inter,sans-serif;letter-spacing:.05em;color:#1d1404;background:var(--gold);border-radius:5px;padding:2px 5px}
/* header: logo left, menus centred in the content width, search and wallet right */
header .bar,header .wrap.bar{max-width:1280px;margin:0 auto}
nav.vxn{justify-content:flex-start;margin-left:18px}