:root {
  --canvas: #040c07;
  --panel: rgba(8, 20, 12, 0.74);
  --panel-glass: rgba(8, 20, 12, 0.60);
  --panel-raised: rgba(12, 28, 16, 0.82);
  --panel-pressed: rgba(18, 38, 22, 0.90);
  --text: #e8f4ff;
  --text-soft: #7a9bbf;
  --text-faint: #445e7a;
  --line: rgba(80, 180, 255, 0.11);
  --line-strong: rgba(52, 232, 255, 0.26);
  --brand: #34e8ff;
  --brand-dim: #0ea5c5;
  --brand-ink: #021014;
  --brand-glow: rgba(52, 232, 255, 0.32);
  --brand-glow-sm: rgba(52, 232, 255, 0.18);
  --positive: #3dffa0;
  --positive-soft: rgba(61, 255, 160, 0.10);
  --positive-glow: rgba(61, 255, 160, 0.26);
  --danger: #ff4d76;
  --danger-soft: rgba(255, 77, 118, 0.11);
  --danger-glow: rgba(255, 77, 118, 0.24);
  --warning: #ffc857;
  --accent2: #7c6cff;
  --accent2-glow: rgba(124, 108, 255, 0.22);
  --brand-gold: #c9a440;
  --brand-gold-glow: rgba(201, 164, 64, 0.22);
  --radius-xs: 5px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --font-display: "SF Pro Display", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-body: "SF Pro Text", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", "Roboto Mono", "DIN Alternate", ui-monospace, monospace;
  --blur-panel: blur(20px) saturate(150%);
  --blur-topbar: blur(28px) saturate(180%);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  color-scheme: dark;
  background: #040c07;
}

body {
  background-color: #040c07;
  color: var(--text);
}

/* Deep space + grid */
body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: #040c07;
  background-image:
    radial-gradient(ellipse 100% 50% at 50% -10%, rgba(52, 232, 255, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(61, 255, 160, 0.04) 0%, transparent 55%),
    linear-gradient(rgba(52, 232, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 232, 255, 0.018) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  content: "";
  pointer-events: none;
}

/* CRT scanline */
body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  content: "";
  opacity: 0.5;
  pointer-events: none;
}

body[data-ui="axis-cyber"] ::selection {
  background: var(--brand);
  color: var(--brand-ink);
}

body[data-ui="axis-cyber"] .app-shell {
  width: 100%;
  max-width: none;
  overflow: clip;
  background: rgba(3, 5, 11, 0.88);
  box-shadow: none;
}

body[data-ui="axis-cyber"] .app-main {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

body[data-ui="axis-cyber"] .desktop-rail {
  display: none;
}

body[data-ui="axis-cyber"] .topbar {
  min-height: 64px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: rgba(3, 6, 14, 0.82);
  border-color: rgba(52, 232, 255, 0.12);
  backdrop-filter: var(--blur-topbar);
  -webkit-backdrop-filter: var(--blur-topbar);
}

/* Animated gradient accent line */
body[data-ui="axis-cyber"] .topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(124, 108, 255, 0.6) 40%, transparent 70%);
  box-shadow: 0 0 16px rgba(52, 232, 255, 0.5);
  content: "";
  pointer-events: none;
}

body[data-ui="axis-cyber"] .topbar-title {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

body[data-ui="axis-cyber"] .brand-mark,
body[data-ui="axis-cyber"] .icon-button,
body[data-ui="axis-cyber"] .back-button {
  border-color: rgba(52, 232, 255, 0.20);
  border-radius: 5px;
  background: rgba(8, 15, 28, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-ui="axis-cyber"] .brand-mark {
  color: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(52, 232, 255, 0.12),
    0 0 16px rgba(52, 232, 255, 0.14);
}

body[data-ui="axis-cyber"] .brand-mark::after {
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 8px var(--positive-glow);
}

body[data-ui="axis-cyber"] .icon-button,
body[data-ui="axis-cyber"] .back-button {
  width: 40px;
  height: 40px;
}

body[data-ui="axis-cyber"] .icon-button:hover,
body[data-ui="axis-cyber"] .back-button:hover {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 18px var(--brand-glow-sm), inset 0 1px 0 rgba(52,232,255,0.10);
}

.telemetry-bar {
  position: relative;
  z-index: 16;
  display: grid;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(52, 232, 255, 0.10);
  background: rgba(4, 8, 18, 0.82);
  backdrop-filter: blur(14px);
  font-family: var(--font-mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.telemetry-bar::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 24%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), rgba(124, 108, 255, 0.7), transparent);
  box-shadow: 0 0 12px rgba(52, 232, 255, 0.5);
  content: "";
  animation: telemetry-sweep 5.2s linear infinite;
}

.telemetry-route,
.telemetry-ticker,
.telemetry-clock {
  min-width: 0;
  padding: 7px 14px;
}

.telemetry-route span,
.telemetry-clock span,
.telemetry-ticker span {
  display: block;
  color: var(--text-faint);
  font-size: 8px;
}

.telemetry-route strong,
.telemetry-clock time,
.telemetry-ticker strong,
.telemetry-ticker em {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telemetry-ticker {
  display: none;
}

.telemetry-clock {
  border-left: 1px solid var(--line);
  text-align: right;
}

body[data-ui="axis-cyber"] .app-main {
  padding: 0 16px calc(94px + env(safe-area-inset-bottom));
}

body[data-ui="axis-cyber"] .app-main.flush {
  padding-inline: 0;
}

body[data-ui="axis-cyber"] .section {
  padding-top: 24px;
}

body[data-ui="axis-cyber"] .section-head {
  margin-bottom: 12px;
}

body[data-ui="axis-cyber"] .section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 700;
}

body[data-ui="axis-cyber"] .section-title::before {
  width: 3px;
  height: 14px;
  flex: 0 0 auto;
  background: var(--brand);
  box-shadow: 0 0 10px rgb(52 232 255 / 0.5);
  content: "";
}

body[data-ui="axis-cyber"] .section-note,
body[data-ui="axis-cyber"] .caption,
body[data-ui="axis-cyber"] .helper {
  color: var(--text-soft);
}

body[data-ui="axis-cyber"] .positive {
  color: var(--positive);
}

body[data-ui="axis-cyber"] .negative {
  color: var(--danger);
}

body[data-ui="axis-cyber"] .primary-button,
body[data-ui="axis-cyber"] .secondary-button,
body[data-ui="axis-cyber"] .danger-button {
  position: relative;
  min-height: 48px;
  border-radius: 10px;
  overflow: hidden;
}

body[data-ui="axis-cyber"] .primary-button {
  border-color: var(--brand-dim);
  background: linear-gradient(160deg, rgba(52, 232, 255, 0.20) 0%, rgba(14, 165, 197, 0.12) 100%);
  color: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(52, 232, 255, 0.16),
    0 0 28px rgba(52, 232, 255, 0.14);
  text-shadow: 0 0 16px rgba(52, 232, 255, 0.5);
}

body[data-ui="axis-cyber"] .primary-button::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(52, 232, 255, 0.4);
  border-right: 1px solid rgba(52, 232, 255, 0.4);
  content: "";
}

body[data-ui="axis-cyber"] .primary-button:hover {
  background: linear-gradient(160deg, rgba(52, 232, 255, 0.28) 0%, rgba(14, 165, 197, 0.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(52, 232, 255, 0.22),
    0 0 36px rgba(52, 232, 255, 0.26);
  transform: translateY(-1px);
}

body[data-ui="axis-cyber"] .secondary-button {
  border-color: var(--line-strong);
  background: rgba(10, 18, 32, 0.72);
  backdrop-filter: blur(12px);
}

body[data-ui="axis-cyber"] .danger-button {
  border-color: rgba(255, 77, 118, 0.4);
  background: linear-gradient(160deg, rgba(255, 77, 118, 0.18) 0%, rgba(255, 77, 118, 0.10) 100%);
  color: var(--danger);
  box-shadow: inset 0 1px 0 rgba(255, 77, 118, 0.12), 0 0 22px rgba(255, 77, 118, 0.12);
}

body[data-ui="axis-cyber"] .segment,
body[data-ui="axis-cyber"] .side-switch {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(4, 8, 16, 0.72);
}

body[data-ui="axis-cyber"] .segment-button,
body[data-ui="axis-cyber"] .side-button {
  border-radius: 10px;
}

body[data-ui="axis-cyber"] .segment-button.is-active {
  background: var(--panel-raised);
  color: var(--brand);
  box-shadow: inset 0 -1px 0 var(--brand), 0 0 8px rgba(52, 232, 255, 0.10);
}

body[data-ui="axis-cyber"] .filter-chip,
body[data-ui="axis-cyber"] .time-chip,
body[data-ui="axis-cyber"] .network-chip,
body[data-ui="axis-cyber"] .leverage-chip,
body[data-ui="axis-cyber"] .transfer-ratio {
  border-color: var(--line);
  border-radius: 10px;
  background: rgba(8, 15, 26, 0.72);
  backdrop-filter: blur(10px);
}

body[data-ui="axis-cyber"] .filter-chip.is-active,
body[data-ui="axis-cyber"] .time-chip.is-active,
body[data-ui="axis-cyber"] .network-chip.is-active,
body[data-ui="axis-cyber"] .leverage-chip.is-active,
body[data-ui="axis-cyber"] .transfer-ratio.is-active {
  border-color: var(--brand-dim);
  background: rgba(52, 232, 255, 0.10);
  color: var(--brand);
  box-shadow: 0 0 10px rgba(52, 232, 255, 0.12);
}

body[data-ui="axis-cyber"] .field-input,
body[data-ui="axis-cyber"] .field-select,
body[data-ui="axis-cyber"] .search-input {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(4, 8, 18, 0.82);
  color: var(--text);
  backdrop-filter: blur(8px);
}

body[data-ui="axis-cyber"] .field-input:focus,
body[data-ui="axis-cyber"] .field-select:focus,
body[data-ui="axis-cyber"] .search-input:focus {
  border-color: var(--brand-dim);
  box-shadow: 0 0 0 3px rgba(52, 232, 255, 0.10), 0 0 14px rgba(52, 232, 255, 0.08);
  outline: none;
}

body[data-ui="axis-cyber"] .bottom-nav {
  width: 100%;
  max-width: none;
  border-color: rgba(52, 232, 255, 0.10);
  background: rgba(3, 5, 12, 0.90);
  backdrop-filter: var(--blur-topbar);
  -webkit-backdrop-filter: var(--blur-topbar);
}

body[data-ui="axis-cyber"] .nav-item {
  color: var(--text-faint);
}

body[data-ui="axis-cyber"] .nav-item.is-active {
  color: var(--brand);
}

body[data-ui="axis-cyber"] .nav-item.is-active::before {
  height: 2px;
  background: var(--brand);
  box-shadow: 0 0 14px rgba(52, 232, 255, 0.72);
}

body[data-page="home"] .balance-block {
  position: relative;
  margin-top: 18px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(52, 232, 255, 0.20);
  border-radius: 14px;
  background: rgba(6, 12, 24, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(52, 232, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.5);
}

body[data-page="home"] .balance-block::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
  box-shadow: 0 0 18px rgba(52, 232, 255, 0.6);
  content: "";
}

body[data-page="home"] .balance-value {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px rgba(52, 232, 255, 0.15);
}

body[data-page="home"] .eyebrow-row {
  color: var(--text-soft);
}

body[data-page="home"] .quick-actions {
  gap: 8px;
  margin-top: 22px;
}

body[data-page="home"] .quick-action {
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(10, 18, 32, 0.72);
  backdrop-filter: blur(12px);
  color: var(--text-soft);
}

body[data-page="home"] .quick-action.primary {
  border-color: var(--brand-dim);
  background: linear-gradient(160deg, rgba(52, 232, 255, 0.16) 0%, rgba(14, 165, 197, 0.08) 100%);
  color: var(--brand);
  box-shadow: inset 0 1px 0 rgba(52,232,255,0.12), 0 4px 18px rgba(52,232,255,0.12);
}

body[data-page="home"] .quick-action:not(.primary):hover {
  border-color: var(--line-strong);
  color: var(--text);
}

body[data-page="home"] .market-visual {
  position: relative;
  height: 220px;
  margin-top: 16px;
  border: 1px solid rgba(52, 232, 255, 0.16);
  border-radius: 10px;
  background: rgba(6, 12, 22, 0.72);
  overflow: hidden;
}

body[data-page="home"] .market-visual::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(52,232,255,0.7), transparent);
  box-shadow: 0 0 16px rgba(52,232,255,0.5);
  content: "";
  animation: market-scan 5.4s var(--ease-out) infinite;
  pointer-events: none;
}

body[data-page="home"] .market-visual img {
  opacity: 0.75;
}

body[data-page="home"] .market-visual-scrim {
  background: linear-gradient(90deg, rgba(3, 6, 14, 0.96) 0%, rgba(3, 6, 14, 0.22) 70%);
}

body[data-page="home"] .market-visual-copy strong {
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.18;
}

body[data-page="home"] .market-visual-kicker,
body[data-page="home"] .market-visual-action {
  color: var(--brand);
}

body[data-page="home"] .market-session-strip {
  border-color: var(--line);
}

body[data-page="home"] .product-tile {
  min-height: 154px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(8, 14, 26, 0.72);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

body[data-page="home"] .product-tile:hover {
  border-color: rgba(52, 232, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(52,232,255,0.06),
    0 0 0 1px rgba(52,232,255,0.10),
    0 8px 30px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

body[data-ui="axis-cyber"] .asset-logo,
body[data-ui="axis-cyber"] .quote-logo,
body[data-ui="axis-cyber"] .network-logo {
  border: 1px solid rgba(52, 232, 255, 0.12);
  border-radius: 5px;
  background: rgba(14, 24, 40, 0.8);
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

body[data-ui="axis-cyber"] .asset-logo.round,
body[data-ui="axis-cyber"] .quote-logo.round,
body[data-ui="axis-cyber"] .network-logo.round {
  border-radius: 50%;
}

body[data-ui="axis-cyber"] .market-table-head {
  border-color: var(--line);
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

body[data-ui="axis-cyber"] .market-row,
body[data-ui="axis-cyber"] .holding-row,
body[data-ui="axis-cyber"] .activity-row,
body[data-ui="axis-cyber"] .setting-row {
  position: relative;
  border-color: rgba(52, 232, 255, 0.07);
  transition: background 140ms var(--ease-out);
}

body[data-ui="axis-cyber"] .market-row:hover,
body[data-ui="axis-cyber"] .holding-row:hover {
  background: rgba(52, 232, 255, 0.04);
}

body[data-ui="axis-cyber"] .market-row::before,
body[data-ui="axis-cyber"] .holding-row::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: -1px;
  width: 2px;
  background: var(--brand);
  content: "";
  opacity: 0;
  transform: scaleY(0.2);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

body[data-ui="axis-cyber"] .market-row:hover,
body[data-ui="axis-cyber"] .holding-row:hover {
  background: rgb(52 232 255 / 0.035);
}

body[data-ui="axis-cyber"] .market-row:hover::before,
body[data-ui="axis-cyber"] .holding-row:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

body[data-page="markets"] .search-wrap {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(5, 10, 20, 0.80);
  backdrop-filter: blur(12px);
}

body[data-page="markets"] .filter-tabs {
  scrollbar-width: none;
}

body[data-page="markets"] .market-mode-badge {
  border-color: rgba(52, 232, 255, 0.22);
  border-radius: 10px;
  background: rgba(52, 232, 255, 0.08);
  color: var(--brand);
  box-shadow: 0 0 10px rgba(52, 232, 255, 0.08);
}

body[data-page="markets"] .market-result-status {
  color: var(--brand);
}

body[data-ui="axis-cyber"] .quote-symbol,
body[data-ui="axis-cyber"] .quote-price,
body[data-ui="axis-cyber"] .asset-total,
body[data-ui="axis-cyber"] .instrument-price-row .quote-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

body[data-ui="axis-cyber"] .quote-price {
  color: var(--text);
  font-size: 34px;
  font-weight: 650;
  text-shadow: 0 0 24px rgba(52, 232, 255, 0.12);
}

body[data-ui="axis-cyber"] .ticker-badge,
body[data-ui="axis-cyber"] .contract-label,
body[data-ui="axis-cyber"] .demo-badge,
body[data-ui="axis-cyber"] .market-mode-badge,
body[data-ui="axis-cyber"] .tag {
  border: 1px solid rgba(52, 232, 255, 0.20);
  border-radius: 10px;
  background: rgba(52, 232, 255, 0.07);
  color: var(--brand);
}

body[data-ui="axis-cyber"] .time-tabs,
body[data-ui="axis-cyber"] .workspace-tabs {
  border-color: var(--line);
}

body[data-ui="axis-cyber"] .workspace-tab.is-active {
  color: var(--brand);
}

body[data-ui="axis-cyber"] .workspace-tab.is-active::after {
  background: var(--brand);
  box-shadow: 0 0 12px rgba(52, 232, 255, 0.5);
}

body[data-ui="axis-cyber"] .trade-chart {
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: rgba(4, 8, 18, 0.75);
  background-image:
    linear-gradient(rgba(52, 232, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 232, 255, 0.035) 1px, transparent 1px);
  background-size: 52px 42px;
  overflow: hidden;
}

body[data-ui="axis-cyber"] .trade-chart figcaption {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(4, 7, 14, 0.90);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
}

body[data-ui="axis-cyber"] .chart-line-positive {
  stroke: var(--positive);
  filter: drop-shadow(0 0 5px rgba(61, 255, 160, 0.40));
}

body[data-ui="axis-cyber"] .chart-line-danger {
  stroke: var(--danger);
  filter: drop-shadow(0 0 5px rgba(255, 77, 118, 0.40));
}

body[data-ui="axis-cyber"] .order-panel {
  border: 1px solid rgba(52, 232, 255, 0.16);
  border-radius: 14px;
  background: rgba(6, 12, 24, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(52,232,255,0.05),
    0 18px 48px rgba(0,0,0,0.40);
}

body[data-ui="axis-cyber"] .trade-ticket {
  padding: 20px;
  border: 1px solid rgba(52, 232, 255, 0.16);
  border-radius: 14px;
  background: rgba(6, 12, 24, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body[data-ui="axis-cyber"] .side-button[data-side="buy"].is-active {
  background: rgba(61, 255, 160, 0.12);
  color: var(--positive);
  box-shadow: inset 0 -1px 0 var(--positive), 0 0 10px rgba(61,255,160,0.12);
}

body[data-ui="axis-cyber"] .side-button[data-side="sell"].is-active {
  background: rgba(255, 77, 118, 0.12);
  color: var(--danger);
  box-shadow: inset 0 -1px 0 var(--danger), 0 0 10px rgba(255,77,118,0.12);
}

body[data-ui="axis-cyber"] .range-input {
  border-radius: 8px;
  background: linear-gradient(to right, var(--positive) 0 var(--range-progress, 25%), rgba(20, 34, 58, 0.9) var(--range-progress, 25%) 100%);
}

body[data-ui="axis-cyber"] .range-input::-webkit-slider-thumb {
  border: 2px solid rgba(61, 255, 160, 0.3);
  border-radius: 10px;
  background: var(--positive);
  box-shadow: 0 0 0 1px var(--positive), 0 0 14px rgba(61, 255, 160, 0.45);
}

body[data-ui="axis-cyber"] .position-dock {
  border-color: rgba(52, 232, 255, 0.12);
  background: rgba(52, 232, 255, 0.025);
}

body[data-ui="axis-cyber"] .depth-row::before,
body[data-ui="axis-cyber"] .book-fill {
  opacity: 0.80;
}

body[data-page="assets"] .asset-hero {
  position: relative;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid rgba(52, 232, 255, 0.18);
  border-radius: 10px;
  background: rgba(6, 12, 24, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 48px rgba(0,0,0,0.45);
}

body[data-page="assets"] .asset-hero::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
  box-shadow: 0 0 16px rgba(52, 232, 255, 0.5);
  content: "";
}

body[data-page="assets"] .allocation-bar {
  height: 6px;
  border-radius: var(--radius-pill);
}

body[data-ui="axis-cyber"] .network-card,
body[data-ui="axis-cyber"] .verification-summary,
body[data-ui="axis-cyber"] .transfer-summary,
body[data-ui="axis-cyber"] .completion-banner {
  border: 1px solid rgba(52, 232, 255, 0.14);
  border-radius: 14px;
  background: rgba(6, 12, 22, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

body[data-ui="axis-cyber"] .qr-placeholder {
  border: 8px solid var(--text);
  border-radius: 10px;
  background: var(--text);
}

body[data-ui="axis-cyber"] .address-box {
  border-color: rgba(52, 232, 255, 0.16);
  border-radius: 5px;
  background: rgba(4, 8, 18, 0.75);
}

body[data-ui="axis-cyber"] .flow-progress {
  margin-top: 18px;
}

body[data-ui="axis-cyber"] .flow-step i,
body[data-ui="axis-cyber"] .requirement-index {
  border-radius: 10px;
}

body[data-ui="axis-cyber"] .flow-step.is-active i {
  background: rgba(52, 232, 255, 0.14);
  color: var(--brand);
  border: 1px solid var(--brand-dim);
  box-shadow: 0 0 14px rgba(52, 232, 255, 0.38);
}

body[data-ui="axis-cyber"] .flow-line.is-complete {
  background: var(--brand);
  box-shadow: 0 0 6px rgba(52, 232, 255, 0.3);
}

body[data-ui="axis-cyber"] .account-intro h2 {
  font-family: var(--font-display);
  font-size: 28px;
}

body[data-ui="axis-cyber"] .account-kicker {
  color: var(--brand);
}

body[data-ui="axis-cyber"] .account-form {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(52, 232, 255, 0.14);
  border-radius: 14px;
  background: rgba(6, 12, 22, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body[data-ui="axis-cyber"] .asset-choice-list,
body[data-ui="axis-cyber"] .requirement-list,
body[data-ui="axis-cyber"] .capture-guidance,
body[data-ui="axis-cyber"] .identity-benefits {
  border-color: var(--line);
  background: transparent;
}

body[data-ui="axis-cyber"] .asset-choice-row,
body[data-ui="axis-cyber"] .requirement-row,
body[data-ui="axis-cyber"] .identity-benefit,
body[data-ui="axis-cyber"] .capture-check {
  border-color: var(--line);
}

body[data-ui="axis-cyber"] .asset-choice-row:hover {
  background: rgba(52, 232, 255, 0.04);
}

body[data-ui="axis-cyber"] .document-upload {
  border-color: rgba(52, 232, 255, 0.18);
  border-radius: 12px;
  background: rgba(4, 8, 18, 0.72);
}

body[data-ui="axis-cyber"] .document-upload:focus-within {
  border-color: var(--brand-dim);
  box-shadow: 0 0 0 3px rgba(52, 232, 255, 0.10), 0 0 18px rgba(52, 232, 255, 0.08);
}

body[data-ui="axis-cyber"] .liveness-frame {
  border: 1px solid rgba(52, 232, 255, 0.18);
  border-radius: 14px;
  background: rgba(4, 8, 18, 0.72);
}

body[data-ui="axis-cyber"] .liveness-corner {
  border-color: var(--brand);
  filter: drop-shadow(0 0 6px rgba(52, 232, 255, 0.6));
}

body[data-ui="axis-cyber"] .sheet-backdrop {
  background: rgba(1, 2, 6, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-ui="axis-cyber"] .sheet {
  border: 1px solid rgba(52, 232, 255, 0.14);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(8, 14, 28, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

body[data-ui="axis-cyber"] .toast {
  border-color: rgba(52, 232, 255, 0.22);
  border-radius: 12px;
  background: rgba(6, 12, 24, 0.92);
  backdrop-filter: blur(18px);
  box-shadow:
    0 10px 36px rgba(0,0,0,0.5),
    0 0 0 1px rgba(52, 232, 255, 0.06),
    0 0 24px rgba(52, 232, 255, 0.08);
}

body[data-page="404"] .not-found-shell {
  display: grid;
  min-height: 100dvh;
  padding: 28px 20px;
  place-items: center;
}

body[data-page="404"] .not-found-content {
  width: min(100%, 520px);
  padding: 26px;
  border: 1px solid rgba(52, 232, 255, 0.16);
  border-radius: 10px;
  background: rgba(6, 12, 22, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 48px rgba(0,0,0,0.5);
}

body[data-page="404"] .not-found-content .quote-price {
  margin: 26px 0 0;
  color: var(--brand);
  font-size: 56px;
  line-height: 1;
}

body[data-page="404"] .not-found-content h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.25;
}

body[data-page="404"] .not-found-content > p:not(.quote-price) {
  margin: 12px 0 22px;
  color: var(--text-soft);
}

body[data-page="404"] .not-found-content .primary-button {
  width: auto;
  min-width: 142px;
}

body[data-page="404"] .not-found-content .legal-links {
  margin: 12px 0 0;
}

@media (min-width: 680px) {
  body[data-ui="axis-cyber"] .app-main {
    padding-inline: 24px;
  }

  .telemetry-bar {
    grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(150px, 0.8fr)) auto;
  }

  .telemetry-ticker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 10px;
    border-left: 1px solid var(--line);
  }

  .telemetry-ticker span {
    grid-column: 1 / -1;
  }

  .telemetry-ticker em {
    text-align: right;
  }

  .telemetry-ticker:nth-of-type(4) {
    display: none;
  }
}

@media (min-width: 1024px) {
  body[data-ui="axis-cyber"] .app-shell {
    min-height: 100dvh;
    padding-left: 224px;
    overflow: visible;
    background: transparent;
  }

  body[data-ui="axis-cyber"] .desktop-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    width: 224px;
    padding: 18px 14px;
    flex-direction: column;
    border-right: 1px solid var(--line-strong);
    background: #06090e;
  }

  body[data-ui="axis-cyber"] .desktop-rail::after {
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 25%;
    background: var(--brand);
    box-shadow: 0 0 14px rgb(52 232 255 / 0.72);
    content: "";
    animation: rail-scan 8s var(--ease-out) infinite;
  }

  .rail-brand {
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--line);
  }

  .rail-brand-mark {
    display: grid;
    width: 38px;
    height: 38px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--brand);
    background: rgb(52 232 255 / 0.07);
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    box-shadow: 0 0 22px rgb(52 232 255 / 0.08);
  }

  .rail-brand-mark i {
    display: grid;
    height: 100%;
    place-items: center;
    font-style: normal;
  }

  .rail-brand-mark i + i {
    border-left: 1px solid var(--line-strong);
  }

  .rail-brand strong,
  .rail-brand small {
    display: block;
  }

  .rail-brand strong {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.1;
  }

  .rail-brand small {
    margin-top: 3px;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 8px;
  }

  .rail-coordinate {
    position: relative;
    margin-top: 18px;
    padding: 14px 12px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: #091019;
  }

  .rail-coordinate::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    content: "";
  }

  .rail-coordinate span,
  .rail-coordinate small {
    display: block;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 8px;
  }

  .rail-coordinate strong {
    display: block;
    margin: 6px 0 3px;
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: 16px;
  }

  .rail-nav {
    display: grid;
    gap: 2px;
    margin-top: 18px;
  }

  .rail-nav-item {
    position: relative;
    display: grid;
    min-height: 44px;
    padding: 0 10px;
    grid-template-columns: 24px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 8px;
    border-left: 2px solid transparent;
    color: var(--text-soft);
    font-size: 12px;
  }

  .rail-nav-code {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 9px;
  }

  .rail-nav-item i {
    width: 5px;
    height: 5px;
    justify-self: end;
    border: 1px solid currentColor;
    transform: rotate(45deg);
  }

  .rail-nav-item:hover {
    background: var(--panel);
    color: var(--text);
  }

  .rail-nav-item.is-active {
    border-left-color: var(--brand);
    background: rgb(52 232 255 / 0.075);
    color: var(--brand);
  }

  .rail-nav-item.is-active .rail-nav-code {
    color: var(--brand);
  }

  .rail-status {
    display: grid;
    gap: 9px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
  }

  .rail-status > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    color: var(--text-faint);
    font-size: 8px;
  }

  .rail-status > div:first-child {
    grid-template-columns: 8px minmax(0, 1fr) auto;
  }

  .rail-status strong {
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 500;
  }

  .rail-status em {
    color: var(--positive);
    font-size: 8px;
    font-style: normal;
  }

  .signal-light {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 8px var(--positive);
  }

  body[data-ui="axis-cyber"] .topbar {
    min-height: 64px;
    padding: 10px 28px;
  }

  .telemetry-bar {
    position: sticky;
    top: 64px;
    grid-template-columns: minmax(180px, 1.1fr) repeat(3, minmax(150px, 0.8fr)) auto;
  }

  .telemetry-ticker,
  .telemetry-ticker:nth-of-type(4) {
    display: grid;
  }

  body[data-ui="axis-cyber"] .bottom-nav {
    display: none;
  }

  body[data-ui="axis-cyber"] .app-main,
  body[data-ui="axis-cyber"] .app-main.flush {
    max-width: 1560px;
    padding: 28px 32px 56px;
  }

  body[data-page="home"] .app-main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  body[data-page="home"] .balance-block {
    grid-column: 1 / 5;
    min-height: 286px;
    margin-top: 0;
  }

  body[data-page="home"] .market-visual {
    height: 286px;
    grid-column: 5 / 13;
    margin-top: 0;
  }

  body[data-page="home"] .market-overview {
    grid-column: 1 / 9;
    padding-top: 8px;
  }

  body[data-page="home"] .app-main > .section:last-child {
    grid-column: 9 / 13;
    padding-top: 8px;
  }

  body[data-page="home"] .product-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .product-tile {
    min-height: 156px;
  }

  body[data-page="markets"] .app-main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  body[data-page="markets"] .search-wrap {
    grid-column: 1 / 5;
    margin-top: 0;
  }

  body[data-page="markets"] .filter-tabs {
    grid-column: 5 / 13;
    align-self: center;
    margin-top: 0;
  }

  body[data-page="markets"] .app-main > .section {
    grid-column: 1 / 13;
    padding-top: 8px;
  }

  body[data-page="markets"] .market-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
  }

  body[data-page="markets"] .market-table-head {
    grid-template-columns: minmax(0, 1fr) 130px 90px;
  }

  body[data-page="markets"] .market-list-pro .market-row {
    grid-template-columns: minmax(0, 1fr) 112px 76px;
  }

  body[data-page="spot"] .app-main,
  body[data-page="stocks"] .app-main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  body[data-page="spot"] .quote-head,
  body[data-page="stocks"] .quote-head {
    grid-column: 1 / 9;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
  }

  body[data-page="spot"] .time-tabs,
  body[data-page="stocks"] .time-tabs {
    grid-column: 1 / 9;
    margin-top: 0;
  }

  body[data-page="spot"] .trade-chart,
  body[data-page="stocks"] .trade-chart {
    height: 350px;
    grid-column: 1 / 9;
    margin-top: 0;
  }

  body[data-page="spot"] .app-main > .section,
  body[data-page="stocks"] .app-main > .section {
    grid-column: 1 / 9;
    padding-top: 6px;
  }

  body[data-page="spot"] .order-panel,
  body[data-page="stocks"] .order-panel {
    position: sticky;
    top: 126px;
    grid-column: 9 / 13;
    grid-row: 1 / span 4;
    margin-top: 0;
  }

  body[data-page="futures"] .trading-main,
  body[data-page="futures-v2"] .trading-main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  body[data-page="futures"] .instrument-head,
  body[data-page="futures-v2"] .instrument-head {
    grid-column: 1 / 9;
    padding-top: 0;
  }

  body[data-page="futures"] .market-data-grid,
  body[data-page="futures-v2"] .market-data-grid {
    grid-column: 1 / 9;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
  }

  body[data-page="futures"] .market-data-grid > div,
  body[data-page="futures-v2"] .market-data-grid > div {
    padding: 12px 16px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  body[data-page="futures"] .market-data-grid > div:first-child,
  body[data-page="futures-v2"] .market-data-grid > div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  body[data-page="futures"] .trade-workspace,
  body[data-page="futures-v2"] .trade-workspace {
    grid-column: 1 / 9;
    margin-top: 0;
  }

  body[data-page="futures"] .candlestick-chart,
  body[data-page="futures-v2"] .candlestick-chart {
    height: 390px;
  }

  body[data-page="futures"] .position-dock,
  body[data-page="futures-v2"] .position-dock {
    grid-column: 1 / 9;
    margin-top: 0;
    padding: 16px;
  }

  body[data-page="futures"] .leverage-section,
  body[data-page="futures-v2"] .leverage-section {
    grid-column: 9 / 13;
    grid-row: 1;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
  }

  body[data-page="futures"] .trade-ticket,
  body[data-page="futures-v2"] .trade-ticket {
    position: sticky;
    top: 126px;
    grid-column: 9 / 13;
    grid-row: 2 / span 2;
    margin-top: 0;
  }

  body[data-page="assets"] .app-main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  body[data-page="assets"] .asset-hero {
    grid-column: 1 / 13;
    margin-top: 0;
  }

  body[data-page="assets"] .app-main > .section:nth-of-type(2) {
    grid-column: 1 / 8;
  }

  body[data-page="assets"] .app-main > .section:nth-of-type(3) {
    grid-column: 8 / 13;
  }

  body[data-page="deposit"],
  body[data-page="deposit-select"],
  body[data-page="kyc"],
  body[data-page="kyc-document"],
  body[data-page="kyc-verify"],
  body[data-page="transfer"],
  body[data-page="404"] {
    --flow-width: 940px;
  }

  body[data-page="deposit"] .app-main,
  body[data-page="deposit-select"] .app-main,
  body[data-page="kyc"] .app-main,
  body[data-page="kyc-document"] .app-main,
  body[data-page="kyc-verify"] .app-main,
  body[data-page="transfer"] .app-main,
  body[data-page="404"] .app-main {
    max-width: var(--flow-width);
  }

  body[data-page="404"] .not-found-shell {
    padding: 32px 32px 32px 256px;
  }

  body[data-page="deposit"] .network-card {
    padding: 24px;
  }

  body[data-page="kyc-document"] .document-grid {
    grid-template-columns: 1fr 1fr;
  }

  body[data-ui="axis-cyber"] .sheet {
    width: min(520px, calc(100% - 32px));
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 14px;
  }

  body[data-ui="axis-cyber"] .toast {
    right: 28px;
    bottom: 28px;
    left: auto;
    width: min(380px, calc(100% - 56px));
    transform: translateY(12px);
  }

  body[data-ui="axis-cyber"] .toast.is-visible {
    transform: translateY(0);
  }
}

@media (min-width: 1320px) {
  body[data-page="home"] .balance-value {
    font-size: 46px;
  }

  body[data-page="home"] .market-visual-copy strong {
    font-size: 30px;
  }

  body[data-page="markets"] .market-list {
    column-gap: 34px;
  }
}

@media (max-width: 370px) {
  body[data-ui="axis-cyber"] .telemetry-bar {
    min-height: 40px;
  }

  body[data-ui="axis-cyber"] .telemetry-route,
  body[data-ui="axis-cyber"] .telemetry-clock {
    padding-inline: 10px;
  }

  body[data-page="home"] .balance-block {
    padding: 16px;
  }

  body[data-page="home"] .balance-value {
    font-size: 34px;
  }

  body[data-page="home"] .market-visual-copy strong {
    font-size: 21px;
  }

  body[data-ui="axis-cyber"] .account-form {
    padding: 16px;
  }
}

@keyframes telemetry-sweep {
  0% {
    transform: translateX(-110%);
  }
  60%,
  100% {
    transform: translateX(470%);
  }
}

@keyframes market-scan {
  0%,
  12% {
    left: 18%;
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  75% {
    opacity: 0.68;
  }
  88%,
  100% {
    left: 88%;
    opacity: 0;
  }
}

@keyframes rail-scan {
  0%,
  10% {
    transform: translateY(-100%);
  }
  72%,
  100% {
    transform: translateY(500%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .telemetry-bar::before,
  body[data-page="home"] .market-visual::after,
  body[data-ui="axis-cyber"] .desktop-rail::after {
    animation: none;
  }
}

/* ── Change 4: Typography improvements ── */
body[data-ui="axis-cyber"] .balance-value,
body[data-ui="axis-cyber"] .asset-total { font-weight: 800; letter-spacing: -0.02em; }
body[data-ui="axis-cyber"] .asset-code { font-weight: 700; }
body[data-ui="axis-cyber"] .price-stack strong { font-size: 14px; font-weight: 700; }

/* ── Change 1: Prominent center trade button ── */
body[data-ui="axis-cyber"] .nav-item--trade {
  margin-top: -16px;
  padding: 8px 14px 6px;
  background: linear-gradient(160deg, rgba(52,232,255,0.20) 0%, rgba(14,165,197,0.12) 100%);
  border: 1px solid rgba(52,232,255,0.36);
  border-radius: 18px;
  box-shadow: 0 -8px 28px rgba(52,232,255,0.22);
  color: var(--brand);
  min-height: 60px;
  font-size: 11px;
  font-weight: 600;
}
body[data-ui="axis-cyber"] .nav-item--trade .icon {
  width: 22px;
  height: 22px;
}

/* ── Change 2: Home hero section ── */
.home-hero {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  margin-bottom: 24px;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.22; filter: blur(2px) saturate(1.2);
}
.home-hero::before {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,10,8,0.75) 0%, rgba(4,10,8,0.55) 50%, rgba(4,10,8,0.95) 100%);
  content: "";
}
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35;
  animation: orb-float 6s ease-in-out infinite;
}
.hero-orb--1 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(52,232,255,0.6), transparent 70%); top: -40px; right: -40px; animation-delay: 0s; }
.hero-orb--2 { width: 160px; height: 160px; background: radial-gradient(circle, rgba(61,255,160,0.4), transparent 70%); top: 60px; left: -30px; animation-delay: 2s; }
.hero-orb--3 { width: 120px; height: 120px; background: radial-gradient(circle, rgba(201,164,64,0.35), transparent 70%); bottom: 80px; right: 20px; animation-delay: 4s; }
@keyframes orb-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.08); }
}
.hero-content {
  position: relative; z-index: 2;
  padding: 32px 20px 0;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid rgba(52,232,255,0.22);
  border-radius: 999px; background: rgba(52,232,255,0.08);
  color: var(--brand); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; margin-bottom: 14px;
}
.hero-title {
  margin: 0; font-size: clamp(32px, 9vw, 44px); font-weight: 800;
  line-height: 1.15; letter-spacing: -0.02em;
  font-family: var(--font-display), "PingFang SC", sans-serif;
}
.hero-title span {
  display: block;
  background: linear-gradient(135deg, var(--brand) 0%, rgba(201,164,64,1) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-desc {
  margin: 10px 0 0; color: var(--text-soft); font-size: 13px; line-height: 1.7;
}
.hero-balance {
  position: relative; z-index: 2;
  padding: 20px 20px 0;
}
.hero-balance .balance-value {
  font-size: clamp(28px, 8vw, 36px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
}