:root {
  --bg: #080714;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-strong: rgba(255, 255, 255, 0.14);
  --text: #f9f7ff;
  --muted: rgba(249, 247, 255, 0.68);
  --accent: #b6ff00;
  --accent-2: #00e7ff;
  --accent-3: #ff2bd6;
  --accent-4: #ff9f1c;
  --radius: 24px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  --surface-border: 1px solid rgba(255, 255, 255, 0.14);
  --surface-bg: rgba(255, 255, 255, 0.08);
  --control-bg: rgba(255, 255, 255, 0.08);
  --control-border: 1px solid rgba(255, 255, 255, 0.16);
  --control-focus: rgba(0, 231, 255, 0.7);
  --control-focus-ring: rgba(0, 231, 255, 0.12);
  --control-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
  --select-bg: rgba(8, 7, 20, 0.86);
  --select-text: var(--text);
  --scrollbar-track: rgba(8, 7, 20, 0.92);
  --scrollbar-thumb: rgba(0, 231, 255, 0.62);
  --scrollbar-thumb-hover: rgba(255, 43, 214, 0.76);
  --kicker-bg: rgba(182, 255, 0, 0.1);
  --kicker-border: rgba(182, 255, 0, 0.5);
  --kicker-color: var(--accent);
  --kicker-dot: var(--accent);
  --kicker-dot-shadow: 0 0 18px var(--accent);
  --kicker-spacing: 0.12em;
  --kicker-transform: uppercase;
  --hero-title-width: 920px;
  --hero-title-spacing: -0.08em;
  --hero-title-transform: uppercase;
  --hero-bg:
    linear-gradient(135deg, rgba(255, 43, 214, 0.18), transparent 42%),
    linear-gradient(315deg, rgba(0, 231, 255, 0.17), transparent 48%),
    rgba(255, 255, 255, 0.07);
  --card-bg:
    radial-gradient(circle at var(--x, 30%) var(--y, 20%), rgba(255, 255, 255, 0.18), transparent 12rem),
    var(--panel);
  --card-hover-border: rgba(255, 255, 255, 0.38);
  --badge-bg: rgba(0, 0, 0, 0.22);
  --badge-spacing: 0.08em;
  --badge-transform: uppercase;
  --badge-dot: currentColor;
  --badge-dot-shadow: 0 0 14px currentColor;
  --card-title-spacing: -0.06em;
  --card-title-transform: uppercase;
  --launch-color: var(--text);
  --launch-bubble: var(--text);
  --launch-bubble-text: var(--bg);
  --launch-transform: uppercase;
  --launch-spacing: 0.04em;
  --state-border: 1px dashed rgba(255, 255, 255, 0.22);
  --state-bg: rgba(255, 255, 255, 0.06);
  --footer-color: rgba(249, 247, 255, 0.46);
  --search-icon-size: 15px;
}

html {
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 43, 214, 0.24), transparent 32rem),
    radial-gradient(circle at 82% 4%, rgba(0, 231, 255, 0.22), transparent 28rem),
    radial-gradient(circle at 50% 85%, rgba(182, 255, 0, 0.13), transparent 30rem),
    var(--bg);
}

body::after {
  opacity: 0.12;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(255, 255, 255, 0.08) 3px,
      transparent 4px
    );
  mix-blend-mode: screen;
}

.hero::before,
.home-panel::before {
  position: absolute;
  inset: -40%;
  content: "";
  background:
    conic-gradient(from 90deg, transparent, rgba(255, 255, 255, 0.12), transparent, rgba(182, 255, 0, 0.18), transparent);
  animation: spin 18s linear infinite;
  opacity: 0.7;
  z-index: -1;
}

.hero::after {
  position: absolute;
  inset: 1px;
  content: "";
  border-radius: inherit;
  background: rgba(8, 7, 20, 0.68);
  z-index: -1;
}

.glitch {
  text-shadow:
    0.035em 0 0 rgba(255, 43, 214, 0.8),
    -0.025em -0.025em 0 rgba(0, 231, 255, 0.75),
    0.025em 0.035em 0 rgba(182, 255, 0, 0.7);
  animation: jitter 3.4s infinite steps(1);
}

.card::before {
  position: absolute;
  inset: auto -20% -38% -20%;
  height: 120px;
  content: "";
  background: linear-gradient(90deg, var(--accent-3), var(--accent-2), var(--accent), var(--accent-4));
  filter: blur(38px);
  opacity: 0.23;
  z-index: -1;
}

.card::after {
  position: absolute;
  right: 14px;
  bottom: 10px;
  content: attr(data-index);
  color: rgba(255, 255, 255, 0.08);
  font-size: 80px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -0.1em;
  z-index: -1;
}

@keyframes spin {
  to { transform: rotate(1turn); }
}

@keyframes jitter {
  0%, 92%, 100% { transform: translate(0, 0) skew(0deg); }
  93% { transform: translate(2px, -1px) skew(-5deg); }
  94% { transform: translate(-2px, 1px) skew(4deg); }
  95% { transform: translate(1px, 2px) skew(-2deg); }
  96% { transform: translate(0, 0) skew(0deg); }
}