@import url('/assets/fonts/fonts.css');

:root {
  color-scheme: dark;
  --cnx-bg: #0d0d14;
  --cnx-deep: #0a0a12;
  --cnx-card: #11111c;
  --cnx-card-soft: #151522;
  --cnx-white: #ffffff;
  --cnx-text-soft: #cfcfe4;
  --cnx-muted: #9a9ab5;
  --cnx-lilac: #bfbfff;
  --cnx-purple: #7a3cff;
  --cnx-blue: #3a7dff;
  --cnx-cyan: #00e1ff;
  --cnx-border: rgba(191, 191, 255, .15);
  --cnx-border-strong: rgba(191, 191, 255, .28);
  --cnx-gradient: linear-gradient(100deg, #7a3cff 0%, #3a7dff 55%, #00e1ff 120%);
  --cnx-gradient-text: linear-gradient(100deg, #b9a3ff 0%, #8fb6ff 52%, #7fe8ff 100%);
  --cnx-radius: 1.25rem;
  --cnx-radius-lg: 1.75rem;
  --cnx-shadow: 0 22px 80px -35px rgba(0, 0, 0, .9);
  --cnx-font: 'Raleway', 'Raleway Fallback', ui-sans-serif, system-ui, sans-serif;
  --cnx-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cnx-bg); color: var(--cnx-white); font-family: var(--cnx-font); line-height: 1.5; text-rendering: optimizeLegibility; }
body, button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--cnx-cyan); outline-offset: 4px; }
.landing__container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.landing__mono { color: var(--cnx-lilac); font-family: var(--cnx-mono); font-size: .66rem; letter-spacing: .14em; }
.landing__gradient-text { background: var(--cnx-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing__skip-link { position: fixed; z-index: 100; top: -100px; left: 16px; padding: 12px 16px; background: var(--cnx-white); color: var(--cnx-bg); border-radius: 8px; }
.landing__skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 700px) {
  .landing__container { width: min(100% - 32px, 560px); }
}