@font-face {
  font-family: "Switzer Variable";
  src: url("/assets/switzer-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #000;
  font-family: "Switzer Variable", -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body,
#app {
  margin: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

html,
body {
  min-height: 100dvh;
  background: #000;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

#app {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  background: transparent;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

.codex-reveal-bg {
  position: fixed;
  inset: -4vh -4vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: .86;
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 48%,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, .9) 56%,
    rgba(0, 0, 0, .46) 74%,
    rgba(0, 0, 0, .12) 90%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse at 50% 48%,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, .9) 56%,
    rgba(0, 0, 0, .46) 74%,
    rgba(0, 0, 0, .12) 90%,
    transparent 100%
  );
}

#codexRevealCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .92;
}

.crypto-label {
  position: absolute;
  z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: clamp(11px, 2.6vw, 17px);
  font-weight: 500;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .055);
  text-transform: uppercase;
  filter: blur(.15px);
  animation: crypto-drift 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.crypto-label--btc {
  left: 12%;
  top: 28%;
}

.crypto-label--eth {
  right: 12%;
  top: 34%;
  animation-delay: -4.5s;
}

.crypto-label--sol {
  left: 20%;
  bottom: 22%;
  animation-delay: -8.5s;
}

@keyframes crypto-drift {
  0% {
    transform: translate3d(-5px, 3px, 0);
    opacity: .52;
  }

  100% {
    transform: translate3d(7px, -5px, 0);
    opacity: 1;
  }
}

.site-header {
  position: fixed;
  z-index: 100;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: min(525px, calc(100vw - 16px));
}

.pill-nav {
  position: relative;
  width: 100%;
  height: 53px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 33px;
  align-items: center;
  column-gap: 4px;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.header-brand {
  min-width: 0;
  height: 37px;
  padding: 1px 2px 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: nowrap;
  user-select: none;
  opacity: .92;
}

.header-brand__title {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  color: rgba(255, 255, 255, .88);
  font-size: 9.2px;
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
}

.header-brand__markets {
  display: block;
  margin-top: 2.5px;
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, .34);
  font-size: 5.4px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .10em;
}

.nav-links {
  min-width: 0;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.nav-link {
  min-width: 0;
  height: 37px;
  padding: 11px 18px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.56);
  font-family: "Switzer Variable", sans-serif;
  font-size: 15px;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1em;
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
  transition: color .15s ease, background-color .15s ease, transform .1s ease-out;
}

.nav-link:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  transform: scale(.98);
}

.account-toggle {
  width: 33px;
  height: 33px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  color: rgba(255, 255, 255, .80);
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .12s ease, color .16s ease;
}

.account-toggle__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-toggle:active,
.account-toggle[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .14);
  transform: scale(.96);
}

.account-menu {
  position: absolute;
  top: 59px;
  right: 0;
  width: 148px;
  padding: 6px;
  display: grid;
  gap: 5px;
  background: rgba(17, 17, 17, .94);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  box-shadow: 0 18px 42px -16px rgba(0, 0, 0, .68);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transform-origin: top right;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}

.account-menu[hidden] {
  display: grid;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-5px) scale(.96);
}

.account-menu__action {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Switzer Variable", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .1s ease, opacity .15s ease, background-color .15s ease;
}

.account-menu__action:active {
  transform: scale(.98);
}

.account-menu__action--dark {
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .085);
}

.account-menu__action--light {
  color: #111;
  background: #fff;
}

@media (max-width: 524px) {
  .pill-nav {
    padding-left: 8px;
    padding-right: 8px;
    grid-template-columns: minmax(64px, 72px) minmax(0, 1fr) 31px;
    column-gap: 4px;
  }

  .header-brand__title {
    font-size: 8px;
  }

  .header-brand__markets {
    font-size: 4.8px;
    letter-spacing: .075em;
  }

  .nav-link {
    padding-left: clamp(5px, 1.9vw, 9px);
    padding-right: clamp(5px, 1.9vw, 9px);
    font-size: clamp(11px, 2.85vw, 12.5px);
  }

  .account-toggle {
    width: 31px;
    height: 31px;
  }

  .account-toggle__icon {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 380px) {
  .site-header {
    width: calc(100vw - 10px);
  }

  .pill-nav {
    padding-left: 6px;
    padding-right: 6px;
    grid-template-columns: 60px minmax(0, 1fr) 29px;
    column-gap: 2px;
  }

  .header-brand {
    padding-left: 8px;
    padding-right: 0;
  }

  .header-brand__title {
    font-size: 7.5px;
  }

  .header-brand__markets {
    margin-top: 2px;
    font-size: 4.5px;
    letter-spacing: .045em;
  }

  .nav-link {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 11px;
    letter-spacing: -.015em;
  }

  .account-toggle {
    width: 29px;
    height: 29px;
  }

  .account-toggle__icon {
    width: 14px;
    height: 14px;
  }

  .account-menu {
    top: 58px;
    right: 0;
    width: 142px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .pill-nav,
  .account-menu {
    background: rgb(17, 17, 17);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .pill-nav,
  .account-menu {
    background: rgba(17, 17, 17, 0.99);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .nav-link {
    color: rgba(255, 255, 255, 0.78);
  }
}

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

  .account-menu {
    transition: none;
  }
}


/* Home page intelligence layer */
.home-stage {
  min-height: 100dvh;
}

.intelligence-section {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 12px 14px 38px;
}

.intelligence-shell {
  width: min(860px, calc(100vw - 28px));
  margin: 0 auto;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, .075);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.intelligence-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 20px 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.intelligence-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(255, 255, 255, .34);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
}

.intelligence-heading h2 {
  margin: 0;
  color: rgba(255, 255, 255, .93);
  font-family: "Switzer Variable", sans-serif;
  font-size: clamp(25px, 4.7vw, 38px);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  line-height: 1;
  letter-spacing: -.04em;
}

.intelligence-heading p {
  max-width: 560px;
  margin: 1px 0 0;
  color: rgba(255, 255, 255, .38);
  font-family: "Switzer Variable", sans-serif;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: -.01em;
}

.intelligence-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.intel-feature {
  min-width: 0;
  min-height: 150px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  background: transparent;
}

.intel-feature + .intel-feature {
  border-left: 1px solid rgba(255, 255, 255, .055);
}

.intel-feature__icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #8A8F98;
}

.micro-icon {
  width: 20px;
  height: 20px;
  overflow: visible;
}

.micro-icon path,
.micro-icon circle,
.micro-icon rect {
  shape-rendering: geometricPrecision;
}

.micro-icon__ghost,
.micro-icon__base,
.micro-icon__cpu-inner,
.micro-icon__layer,
.micro-icon__cpu-pins path {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.micro-icon__ghost {
  opacity: .12;
}

.micro-icon__base {
  opacity: .28;
}

.micro-icon__draw {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: micro-draw 4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.micro-icon__draw--chart {
  animation-delay: .18s;
}

.micro-icon__pop,
.micro-icon__target-dot,
.micro-icon__cpu-core {
  fill: currentColor;
}

.micro-icon__pop {
  transform-origin: 18.5px 7.5px;
  opacity: 0;
  animation: micro-pop 4s cubic-bezier(.16, 1, .3, 1) .32s infinite;
}

.micro-icon__target-ring {
  stroke: currentColor;
  stroke-width: 2.4;
  transform-origin: 12px 12px;
  opacity: 0;
  animation: micro-target 4s cubic-bezier(.16, 1, .3, 1) .28s infinite;
}

.micro-icon__target-dot {
  transform-origin: 12px 12px;
  opacity: 0;
  animation: micro-dot 4s cubic-bezier(.16, 1, .3, 1) .44s infinite;
}

.micro-icon__cpu-pins path {
  opacity: .18;
  animation: micro-pin 4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.micro-icon__cpu-pins path:nth-child(2n) {
  animation-delay: .08s;
}

.micro-icon__cpu-inner {
  opacity: .45;
}

.micro-icon__cpu-core {
  transform-origin: 12px 12px;
  opacity: .26;
  animation: micro-core 4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.micro-icon__layer {
  transition: opacity .2s ease;
}

.micro-icon__layer--top {
  animation: micro-layer-top 4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.micro-icon__layer--mid {
  opacity: .62;
}

.micro-icon__layer--bottom {
  opacity: .38;
  animation: micro-layer-bottom 4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.intel-feature:nth-child(2) .micro-icon {
  animation-delay: -.7s;
}

.intel-feature:nth-child(3) .micro-icon {
  animation-delay: -1.3s;
}

.intel-feature:nth-child(4) .micro-icon {
  animation-delay: -2s;
}

.intel-feature__copy {
  min-width: 0;
}

.intel-feature__index {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, .22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
}

.intel-feature h3 {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-family: "Switzer Variable", sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.intel-feature p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, .30);
  font-family: "Switzer Variable", sans-serif;
  font-size: 10.5px;
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -.005em;
}

.future-footer-space {
  min-height: 120px;
}

@keyframes micro-draw {
  0%, 12% { stroke-dashoffset: 44; opacity: 0; }
  34%, 68% { stroke-dashoffset: 0; opacity: 1; }
  88%, 100% { stroke-dashoffset: 44; opacity: 0; }
}

@keyframes micro-pop {
  0%, 24% { transform: scale(.55); opacity: 0; }
  39%, 68% { transform: scale(1); opacity: .9; }
  88%, 100% { transform: scale(.55); opacity: 0; }
}

@keyframes micro-target {
  0%, 20% { transform: scale(.2); opacity: 0; }
  40%, 68% { transform: scale(1); opacity: .85; }
  88%, 100% { transform: scale(.2); opacity: 0; }
}

@keyframes micro-dot {
  0%, 30% { transform: scale(0); opacity: 0; }
  45%, 68% { transform: scale(1); opacity: .95; }
  88%, 100% { transform: scale(0); opacity: 0; }
}

@keyframes micro-pin {
  0%, 16% { opacity: .16; }
  38%, 68% { opacity: .82; }
  88%, 100% { opacity: .16; }
}

@keyframes micro-core {
  0%, 18% { transform: scale(1); opacity: .22; }
  40%, 68% { transform: scale(1.22); opacity: .82; }
  88%, 100% { transform: scale(1); opacity: .22; }
}

@keyframes micro-layer-top {
  0%, 18%, 88%, 100% { transform: translateY(0); }
  40%, 68% { transform: translateY(-1.4px); }
}

@keyframes micro-layer-bottom {
  0%, 18%, 88%, 100% { transform: translateY(0); }
  40%, 68% { transform: translateY(1.4px); }
}

@media (max-width: 680px) {
  .intelligence-section {
    padding-left: 10px;
    padding-right: 10px;
  }

  .intelligence-shell {
    width: min(100%, 560px);
  }

  .intelligence-heading {
    padding: 18px 2px 19px;
  }

  .intelligence-heading h2 {
    font-size: clamp(24px, 8vw, 34px);
  }

  .intelligence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intel-feature {
    min-height: 148px;
    padding: 15px 14px 14px;
  }

  .intel-feature:nth-child(3) {
    border-left: 0;
  }

  .intel-feature:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .055);
  }
}

@media (max-width: 360px) {
  .intelligence-section {
    padding-left: 8px;
    padding-right: 8px;
  }

  .intel-feature {
    padding-left: 11px;
    padding-right: 11px;
  }

  .intel-feature h3 {
    font-size: 12px;
  }

  .intel-feature p {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .micro-icon__draw,
  .micro-icon__pop,
  .micro-icon__target-ring,
  .micro-icon__target-dot,
  .micro-icon__cpu-pins path,
  .micro-icon__cpu-core,
  .micro-icon__layer--top,
  .micro-icon__layer--bottom {
    animation: none;
  }

  .micro-icon__draw {
    stroke-dashoffset: 0;
    opacity: .72;
  }

  .micro-icon__pop,
  .micro-icon__target-ring,
  .micro-icon__target-dot {
    opacity: .72;
    transform: none;
  }
}