:root {
  --qx-mint: #52f6b8;
  --qx-cyan: #38d9ff;
  --qx-blue: #438cff;
  --qx-purple: #9a72ff;
  --qx-gold: #ffd470;
  --qx-spot-x: 50vw;
  --qx-spot-y: 28vh;
  --qx-parallax-x: 0px;
  --qx-parallax-y: 0px;
  --qx-motion: 1;
}

html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

body {
  isolation: isolate;
}

body.qx-cinematic-ready::before {
  content: "";
  position: fixed;
  inset: -22vmax;
  z-index: -5;
  pointer-events: none;
  opacity: .72;
  background:
    conic-gradient(from 210deg at 30% 35%, transparent 0deg, rgba(44, 255, 174, .15) 38deg, transparent 92deg),
    conic-gradient(from 28deg at 72% 60%, transparent 0deg, rgba(40, 204, 255, .15) 48deg, transparent 108deg),
    radial-gradient(circle at 62% 18%, rgba(57, 118, 255, .13), transparent 34%),
    radial-gradient(circle at 28% 82%, rgba(82, 246, 184, .12), transparent 36%);
  filter: blur(34px) saturate(128%);
  transform: translate3d(var(--qx-parallax-x), var(--qx-parallax-y), 0) rotate(0deg) scale(1.04);
  animation: qx-aurora-drift 26s ease-in-out infinite alternate;
}

.qx-visual-layer {
  position: fixed;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.qx-smoke-layer,
.qx-grain-layer,
.qx-spotlight-layer,
.qx-glyph-field,
.qx-particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.qx-smoke-layer {
  inset: -12%;
  opacity: .2;
  background:
    url("/static/overview-smoke.png") 16% 52% / 64% auto no-repeat,
    url("/static/visual-smoke.png") 88% 24% / 72% auto no-repeat;
  mix-blend-mode: screen;
  filter: hue-rotate(15deg) saturate(120%);
  animation: qx-smoke-drift 30s ease-in-out infinite alternate;
}

.qx-grain-layer {
  opacity: .055;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0, rgba(255,255,255,.13) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at center, transparent 38%, rgba(0,0,0,.5) 110%);
  mix-blend-mode: soft-light;
}

.qx-spotlight-layer {
  background: radial-gradient(520px circle at var(--qx-spot-x) var(--qx-spot-y), rgba(61, 255, 185, .075), transparent 68%);
  transition: opacity .35s ease;
}

.qx-particle {
  position: absolute;
  width: var(--qx-size, 2px);
  height: var(--qx-size, 2px);
  left: var(--qx-left, 50%);
  top: 108%;
  border-radius: 50%;
  background: rgba(93, 255, 198, var(--qx-alpha, .3));
  box-shadow: 0 0 8px rgba(75, 240, 255, .75);
  animation: qx-particle-rise var(--qx-duration, 22s) linear var(--qx-delay, 0s) infinite;
}

.qx-glyph {
  position: absolute;
  left: var(--qx-left, 50%);
  top: var(--qx-top, 50%);
  color: var(--qx-color, var(--qx-mint));
  font: 800 clamp(34px, 4.4vw, 78px)/1 ui-sans-serif, system-ui, sans-serif;
  opacity: .045;
  text-shadow: 0 0 24px currentColor;
  transform: translate3d(0, 0, 0) rotate(var(--qx-rotate, 0deg));
  animation: qx-glyph-float var(--qx-duration, 24s) ease-in-out var(--qx-delay, 0s) infinite alternate;
}

.wow-app {
  transition: opacity .5s ease, filter .32s ease, transform .5s cubic-bezier(.2,.78,.2,1);
  transform-origin: 50% 12%;
}

body.qx-entering .wow-app {
  opacity: 0;
  transform: scale(1.028) translateY(8px);
  filter: blur(9px);
}

body.qx-view-leaving .wow-app {
  opacity: .84;
  transform: scale(.993);
  filter: blur(2.5px) saturate(.86);
}

.content h1,
.content h2,
.hero-copy h2,
.section-head h2,
.page-head h1,
.page-head h2 {
  color: transparent;
  background: linear-gradient(102deg, #effff8 0%, var(--qx-mint) 36%, var(--qx-cyan) 68%, #8cb5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-wrap: balance;
}

.core-center strong,
.hero-copy .metric-grid strong,
.period-metrics strong,
.asset-card > strong,
.asset-card h3 + * strong,
[data-count] {
  text-shadow: 0 0 12px rgba(82, 246, 184, .2), 0 0 28px rgba(56, 217, 255, .08);
}

.panel,
.asset-card,
.metric-grid article,
.period-metrics article,
.report-card,
.bot-card {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --qx-card-x: 50%;
  --qx-card-y: 50%;
  --qx-tilt-x: 0deg;
  --qx-tilt-y: 0deg;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}

.panel::after,
.metric-grid article::after,
.period-metrics article::after,
.report-card::after,
.bot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(360px circle at var(--qx-card-x) var(--qx-card-y), rgba(82, 246, 184, .13), transparent 66%),
    linear-gradient(112deg, transparent 16%, rgba(255,255,255,.075) 44%, transparent 68%);
  background-size: auto, 220% 100%;
  background-position: center, 150% 0;
  transition: opacity .25s ease;
}

.panel:hover::after,
.metric-grid article:hover::after,
.period-metrics article:hover::after,
.report-card:hover::after,
.bot-card:hover::after {
  opacity: 1;
  animation: qx-glass-sheen 1.1s ease-out both;
}

.qx-tilt-card:hover {
  transform: perspective(1100px) rotateX(var(--qx-tilt-x)) rotateY(var(--qx-tilt-y)) translateY(-2px);
  border-color: color-mix(in srgb, var(--asset-solid, var(--qx-mint)) 55%, rgba(255,255,255,.2));
  box-shadow: 0 18px 46px rgba(0,0,0,.3), 0 0 28px color-mix(in srgb, var(--asset-solid, var(--qx-mint)) 16%, transparent);
}

.core-panel,
.hero-copy,
.snapshot-seal,
.period-metrics article {
  background-image:
    linear-gradient(var(--panel-bg, rgba(3, 28, 23, .92)), var(--panel-bg, rgba(3, 28, 23, .92))),
    conic-gradient(from var(--qx-border-angle), var(--qx-mint), var(--qx-cyan), var(--qx-blue), var(--qx-purple), var(--qx-mint));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: qx-border-turn 12s linear infinite;
}

@property --qx-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.snapshot-seal {
  box-shadow: 0 0 0 1px rgba(82,246,184,.08), 0 0 34px rgba(82,246,184,.06);
}

.snapshot-seal::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  border: 2px solid rgba(82,246,184,.88);
  box-shadow: 0 0 0 0 rgba(82,246,184,.3);
  animation: qx-trust-heartbeat 2.8s ease-out infinite;
}

.badge.live,
.badge.active,
.status-live {
  position: relative;
  box-shadow: 0 0 16px rgba(82,246,184,.14);
  animation: qx-live-flicker 5.8s linear infinite;
}

.badge.live::after,
.status-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(82,246,184,.25);
  border-radius: inherit;
  opacity: 0;
  animation: qx-radar-ring 2.6s ease-out infinite;
  pointer-events: none;
}

.qx-hud {
  outline: 1px solid rgba(82, 246, 184, .035);
}

.qx-hud .qx-corner {
  position: absolute;
  z-index: 5;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: .56;
  border-color: var(--asset-solid, var(--qx-mint));
}

.qx-corner-tl { inset: 8px auto auto 8px; border-top: 1px solid; border-left: 1px solid; }
.qx-corner-tr { inset: 8px 8px auto auto; border-top: 1px solid; border-right: 1px solid; }
.qx-corner-bl { inset: auto auto 8px 8px; border-bottom: 1px solid; border-left: 1px solid; }
.qx-corner-br { inset: auto 8px 8px auto; border-bottom: 1px solid; border-right: 1px solid; }

.qx-number-pulse {
  animation: qx-number-arrive .72s cubic-bezier(.2,.82,.2,1) both;
}

.qx-reveal {
  opacity: 0;
  animation: qx-card-reveal .58s cubic-bezier(.2,.78,.2,1) var(--qx-reveal-delay, 0ms) forwards;
}

button,
.button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

.qx-ripple-host {
  position: relative;
  overflow: hidden;
}

.qx-ripple {
  position: absolute;
  z-index: 10;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(205,255,238,.72), rgba(82,246,184,.24) 42%, transparent 68%);
  transform: scale(0);
  animation: qx-ripple .62s ease-out forwards;
}

button:focus-visible,
.button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--qx-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(56,217,255,.09);
}

@keyframes qx-aurora-drift {
  0% { transform: translate3d(var(--qx-parallax-x), var(--qx-parallax-y), 0) rotate(-5deg) scale(1.02); }
  50% { transform: translate3d(calc(var(--qx-parallax-x) + 3vw), calc(var(--qx-parallax-y) - 2vh), 0) rotate(7deg) scale(1.1); }
  100% { transform: translate3d(calc(var(--qx-parallax-x) - 2vw), calc(var(--qx-parallax-y) + 2vh), 0) rotate(-2deg) scale(1.05); }
}

@keyframes qx-smoke-drift {
  from { transform: translate3d(-2%, 1%, 0) scale(1.02); opacity: .13; }
  to { transform: translate3d(3%, -2%, 0) scale(1.09); opacity: .24; }
}

@keyframes qx-particle-rise {
  0% { transform: translate3d(0, 0, 0) scale(.55); opacity: 0; }
  10% { opacity: var(--qx-alpha, .3); }
  78% { opacity: .18; }
  100% { transform: translate3d(var(--qx-drift, 30px), -118vh, 0) scale(1.25); opacity: 0; }
}

@keyframes qx-glyph-float {
  from { transform: translate3d(-10px, 8px, 0) rotate(var(--qx-rotate, 0deg)); }
  to { transform: translate3d(22px, -30px, 0) rotate(calc(var(--qx-rotate, 0deg) + 8deg)); }
}

@keyframes qx-glass-sheen {
  from { background-position: center, 150% 0; }
  to { background-position: center, -70% 0; }
}

@keyframes qx-border-turn { to { --qx-border-angle: 360deg; } }

@keyframes qx-live-flicker {
  0%, 8%, 11%, 68%, 72%, 100% { opacity: 1; }
  9%, 70% { opacity: .82; }
}

@keyframes qx-radar-ring {
  0% { opacity: .55; transform: scale(.9); }
  70%, 100% { opacity: 0; transform: scale(1.28); }
}

@keyframes qx-trust-heartbeat {
  0%, 55% { box-shadow: 0 0 0 0 rgba(82,246,184,.3); }
  75% { box-shadow: 0 0 0 10px rgba(82,246,184,0); }
  100% { box-shadow: 0 0 0 0 rgba(82,246,184,0); }
}

@keyframes qx-number-arrive {
  0% { opacity: .55; filter: blur(2px); transform: translateY(7px) scale(.98); text-shadow: 0 0 0 transparent; }
  55% { opacity: 1; filter: blur(0); transform: translateY(-1px) scale(1.015); text-shadow: 0 0 24px rgba(82,246,184,.42); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes qx-card-reveal {
  from { opacity: 0; transform: translateY(12px) scale(.988); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes qx-ripple { to { transform: scale(22); opacity: 0; } }

@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .qx-spotlight-layer { display: none; }
  .qx-tilt-card:hover { transform: none; }
  .qx-smoke-layer { opacity: .11; }
  .qx-glyph:nth-child(n+5),
  .qx-particle:nth-child(n+19) { display: none; }
  body.qx-cinematic-ready::before { filter: blur(46px); opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --qx-motion: 0; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .qx-particle-field,
  .qx-glyph-field,
  .qx-smoke-layer { display: none; }
}

@media (prefers-contrast: more) {
  .qx-grain-layer,
  .qx-smoke-layer,
  .qx-glyph-field,
  .qx-particle-field { display: none; }
  .content h1,
  .content h2,
  .hero-copy h2,
  .section-head h2,
  .page-head h1,
  .page-head h2 { color: #fff; background: none; }
}