/* Content-layer styles. The dashboard component carries its own inline styles;
   these cover the server-rendered HTML pages (landing, guides) so they match
   the crypto-native look and stay readable for crawlers. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --bg: #0a0a16;
  --panel: rgba(28, 26, 54, 0.55);
  --line: rgba(255, 255, 255, 0.08);
  --ink: #edebff;
  --ink-dim: #9b96c9;
  --ink-faint: #615c8c;
  --cyan: #22e0d4;
  --magenta: #ff5ce1;
  --violet: #b57bff;
  --sky: #6ad0ff;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
  scroll-behavior: smooth;
}

body { margin: 0; min-height: 100vh; position: relative; overflow-x: hidden; }

/* ambient glows, same language as the dashboard */
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  top: -15%; left: -10%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(181, 123, 255, 0.18) 0%, transparent 70%);
}
body::after {
  bottom: -20%; right: -10%; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(34, 224, 212, 0.12) 0%, transparent 70%);
}

main, header, footer, section { position: relative; z-index: 1; }

h1, h2, h3 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.5px; }

a { color: var(--sky); text-decoration: none; }
a:hover { color: var(--cyan); }

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

.gradient-text {
  background: linear-gradient(120deg, var(--ink) 30%, var(--cyan) 70%, var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glass {
  background: var(--panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.pulse-bar {
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--violet));
  animation: pulse 3.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pulse-bar { animation: none; } }