:root {
  --color-primary: #70e8ff;
  --color-primary-contrast: #07121c;
  --color-bg: #070b14;
  --color-surface: rgba(17, 27, 43, 0.88);
  --color-surface-strong: rgba(10, 16, 28, 0.96);
  --color-text: #edf7ff;
  --color-muted: #9aaabe;
  --color-line: rgba(132, 174, 210, 0.2);
  --color-success: #66efbd;
  --color-discord: #7284ff;
  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--color-text);
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(65, 130, 190, 0.13), transparent 34rem),
    radial-gradient(ellipse at 100% 42%, rgba(90, 83, 200, 0.08), transparent 28rem),
    var(--color-bg);
}

/* Static atmosphere: no continuously animated full-screen blur layers. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  background-image: linear-gradient(rgba(174, 210, 239, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(174, 210, 239, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

body::after {
  content: none;
}

/* Polished static neon edge; avoids spinning gradients on every card. */
.spark-border,
.neon-card,
article,
section>div>.rounded-\[30px\],
section>div>.rounded-\[27px\] {
  position: relative;
  isolation: isolate;
  border-color: rgba(112, 232, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 34px rgba(0, 0, 0, 0.2);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.spark-border::before,
.neon-card::before,
article::before,
section>div>.rounded-\[30px\]::before,
section>div>.rounded-\[27px\]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(112, 232, 255, 0.72), rgba(112, 132, 255, 0.16) 45%, rgba(112, 232, 255, 0.34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.68;
}

.spark-border:hover,
.neon-card:hover,
article:hover {
  transform: translateY(-2px);
  border-color: rgba(112, 232, 255, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 14px 36px rgba(39, 163, 210, 0.12);
}

a,
button,
[role="button"],
input,
select,
textarea {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

a:active,
button:active,
[role="button"]:active,
.spark-border:active,
.neon-card:active,
article:active {
  transform: scale(0.98);
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px rgba(112, 232, 255, 0.36), 0 0 18px rgba(112, 232, 255, 0.22);
}

a:hover,
button:hover {
  filter: brightness(1.1);
}

/* Disable the homepage's heavier decorative motion while keeping its visual hierarchy. */
.aurora,
.neon-scene,
.energy-orb,
.scene-particle {
  animation: none !important;
  filter: none !important;
}
.aurora,
.neon-scene {
  display: none !important;
}
.neon-card::before {
  background: none !important;
  transform: none !important;
  transition: none !important;
}

.reveal,
.reveal.show {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.spark-border::after {
  display: none !important;
  animation: none !important;
}

.zap-logo {
  animation: none !important;
  text-shadow: 0 0 10px rgba(112, 232, 255, 0.28), 0 0 30px rgba(112, 132, 255, 0.22) !important;
}

.zap-logo::after {
  display: none !important;
  animation: none !important;
}

::selection {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}