.ncubes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11%;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}
.ncubes--hero {
  height: auto;
  gap: 12%;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}
.ncubes--hero .ncube {
  animation-duration: 7.5s;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.ncubes--hero .ncube--0 { animation-name: nxh-0; }
.ncubes--hero .ncube--1 { animation-name: nxh-1; }
.ncubes--hero .ncube--2 { animation-name: nxh-2; }
.ncubes--hero .ncube--3 { animation-name: nxh-3; }
@keyframes nxh-0 {
  0%, 10% { transform: none; opacity: 1; background: #8B939C; }
  22% { transform: translate(-92%, -78%) rotate(-28deg) scale(1.14); }
  34% { opacity: 0; transform: translate(-110%, -96%) scale(0.08) rotate(-36deg); }
  48% { opacity: 1; transform: scale(1.22); background: #E4A133; box-shadow: 0 0 36px rgba(228, 161, 51, 0.55); }
  70%, 100% { transform: none; opacity: 1; background: #8B939C; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
}
@keyframes nxh-1 {
  0%, 14% { transform: none; opacity: 1; background: #E4A133; }
  26% { transform: translate(88%, -74%) rotate(24deg) scale(1.12); }
  38% { opacity: 0; transform: translate(108%, -94%) scale(0.08) rotate(34deg); }
  52% { opacity: 1; transform: scale(1.24); background: #5589CA; box-shadow: 0 0 36px rgba(85, 137, 202, 0.55); }
  74%, 100% { transform: none; opacity: 1; background: #E4A133; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
}
@keyframes nxh-2 {
  0%, 18% { transform: none; opacity: 1; background: #5589CA; }
  30% { transform: translate(-86%, 80%) rotate(18deg) scale(1.1); }
  42% { opacity: 0; transform: translate(-104%, 100%) scale(0.08); }
  56% { opacity: 1; transform: scale(1.2); background: #58C97A; box-shadow: 0 0 36px rgba(88, 201, 122, 0.5); }
  78%, 100% { transform: none; opacity: 1; background: #5589CA; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
}
@keyframes nxh-3 {
  0%, 22% { transform: none; opacity: 1; background: #58C97A; }
  34% { transform: translate(84%, 76%) rotate(-22deg) scale(1.12); }
  46% { opacity: 0; transform: translate(102%, 96%) scale(0.08); }
  60% { opacity: 1; transform: scale(1.22); background: #8B939C; box-shadow: 0 0 36px rgba(139, 147, 156, 0.45); }
  82%, 100% { transform: none; opacity: 1; background: #58C97A; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
}
.ncube {
  display: block;
  border-radius: 22%;
  transform-origin: center;
  will-change: transform, opacity, box-shadow;
}
.ncube--0 { background: #8B939C; animation: ncube-0 9s ease-in-out infinite; }
.ncube--1 { background: #E4A133; animation: ncube-1 9s ease-in-out infinite; }
.ncube--2 { background: #5589CA; animation: ncube-2 9s ease-in-out infinite; }
.ncube--3 { background: #58C97A; animation: ncube-3 9s ease-in-out infinite; }

@keyframes ncube-0 {
  0%, 8% { transform: none; opacity: 1; background: #8B939C; }
  24% { transform: translate(-55%, -42%) rotate(-16deg) scale(0.86); }
  38% { opacity: 0; transform: translate(-55%, -42%) scale(0.28) rotate(-16deg); }
  54% { opacity: 1; transform: translate(6%, 4%) scale(1.06); background: #E4A133; }
  76%, 100% { transform: none; opacity: 1; background: #8B939C; }
}
@keyframes ncube-1 {
  0%, 12% { transform: none; opacity: 1; background: #E4A133; }
  30% { transform: translate(48%, -36%) rotate(14deg) scale(0.84); }
  44% { opacity: 0; transform: translate(48%, -36%) scale(0.22) rotate(14deg); }
  60% { opacity: 1; transform: translate(-4%, 8%) scale(1.08); background: #5589CA; }
  82%, 100% { transform: none; opacity: 1; background: #E4A133; }
}
@keyframes ncube-2 {
  0%, 16% { transform: none; opacity: 1; background: #5589CA; }
  34% { transform: translate(-42%, 46%) rotate(10deg) scale(0.8); }
  48% { opacity: 0; transform: translate(-42%, 46%) scale(0.24); }
  64% { opacity: 1; transform: scale(1.05); background: #58C97A; }
  86%, 100% { transform: none; opacity: 1; background: #5589CA; }
}
@keyframes ncube-3 {
  0%, 20% { transform: none; opacity: 1; background: #58C97A; }
  38% { transform: translate(44%, 40%) rotate(-12deg) scale(0.82); }
  52% { opacity: 0; transform: translate(44%, 40%) scale(0.2); }
  68% { opacity: 1; transform: translate(-6%, -4%) scale(1.07); background: #8B939C; }
  90%, 100% { transform: none; opacity: 1; background: #58C97A; }
}

.page-hero__goldline {
  background: linear-gradient(90deg, transparent, #8B939C, #E4A133, #5589CA, #58C97A, transparent);
}
.page-hero__wash-glow {
  background: radial-gradient(circle, rgba(85, 137, 202, 0.28), transparent 66%);
}
.page-hero__wash {
  display: block;
  position: relative;
  width: 9.5rem;
  height: 9.5rem;
  margin-top: 2.25rem;
}
.page-hero__dial { display: none; }
@media (min-width: 1024px) {
  .page-hero__wash {
    position: absolute;
    top: 9rem;
    right: 1.5rem;
    width: min(34rem, calc(100vw - 46rem));
    height: min(34rem, calc(100vw - 46rem));
    margin: 0;
  }
}

.nx {
  --nx-cycle: 7.5s;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  justify-items: stretch;
  padding: 1.5rem 1.25rem;
  min-height: clamp(24rem, 88vw, 32rem);
  width: 100%;
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at 52% 48%, rgba(85, 137, 202, 0.22), transparent 36%),
    radial-gradient(circle at 18% 72%, rgba(228, 161, 51, 0.12), transparent 34%),
    #1B2430;
  color: #F4F5F7;
  overflow: hidden;
  box-shadow:
    0 28px 70px rgba(27, 36, 48, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (min-width: 700px) {
  .nx {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.8fr) minmax(9rem, 1fr);
    gap: 1rem;
    padding: 1.75rem 1.35rem;
    min-height: 32rem;
  }
}
@media (min-width: 1024px) {
  .nx {
    flex: 1;
    align-self: stretch;
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(11rem, 1fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: 1.25rem;
    row-gap: 0;
    height: auto;
    min-height: min(44rem, calc(100dvh - 6rem));
    padding: 2.25rem 2rem 2.5rem;
    border-radius: 2rem;
  }
  .nx__file { grid-column: 1; grid-row: 1; align-self: start; max-width: 15rem; z-index: 4; }
  .nx__espo { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; max-width: 16rem; z-index: 4; }
  .nx__engine {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
    z-index: 2;
  }
}
@media (min-width: 1280px) {
  .nx {
    min-height: min(50rem, calc(100dvh - 5rem));
    padding: 2.5rem 2.25rem 2.75rem;
  }
  .nx__file { max-width: 16rem; }
  .nx__espo { max-width: 17rem; }
}
@media (min-width: 1536px) {
  .nx {
    min-height: min(54rem, calc(100dvh - 4.5rem));
    padding: 2.75rem 2.5rem 3rem;
  }
}

.nx__glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(85, 137, 202, 0.5), transparent 42%),
    radial-gradient(circle at 62% 42%, rgba(228, 161, 51, 0.28), transparent 36%);
  filter: blur(10px);
  animation: nx-glow var(--nx-cycle) ease-in-out infinite;
  pointer-events: none;
}
.nx__path {
  position: absolute;
  z-index: 1;
  left: 10%;
  right: 11%;
  top: 48%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(228, 161, 51, 0.35), #E4A133, #5589CA, #58C97A, transparent);
  box-shadow: 0 0 18px rgba(228, 161, 51, 0.35);
  transform: scaleX(0);
  transform-origin: left center;
  animation: nx-path var(--nx-cycle) ease-in-out infinite;
  pointer-events: none;
}
.nx__spark {
  position: absolute;
  z-index: 2;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #F0C36A;
  box-shadow: 0 0 12px rgba(228, 161, 51, 0.9);
  opacity: 0;
  pointer-events: none;
}
.nx__spark--1 { animation: nx-spark-1 var(--nx-cycle) ease-in-out infinite; }
.nx__spark--2 { animation: nx-spark-2 var(--nx-cycle) ease-in-out infinite; background: #5589CA; box-shadow: 0 0 12px rgba(85, 137, 202, 0.9); }
.nx__spark--3 { animation: nx-spark-3 var(--nx-cycle) ease-in-out infinite; background: #58C97A; box-shadow: 0 0 12px rgba(88, 201, 122, 0.9); }

.nx__file,
.nx__espo,
.nx__engine { position: relative; z-index: 3; }
.nx__kicker {
  margin: 0 0 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 245, 247, 0.55);
}
.nx__sheet {
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(244, 245, 247, 0.05);
  border: 1px solid rgba(244, 245, 247, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.nx__sheet strong {
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(244, 245, 247, 0.78);
}
.nx__rows { display: grid; gap: 0.45rem; }
.nx__rows span {
  display: block;
  height: 0.6rem;
  border-radius: 999px;
  background: rgba(244, 245, 247, 0.14);
}
.nx__rows span:nth-child(1) { width: 92%; }
.nx__rows span:nth-child(2) { width: 78%; }
.nx__rows span:nth-child(3) { width: 86%; }
.nx__rows span:nth-child(4) { width: 64%; }
.nx__rows span.is-live {
  background: #E4A133;
  animation: nx-row var(--nx-cycle) ease-in-out infinite;
}

.nx__engine {
  width: min(78vw, 20rem);
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .nx__engine {
    width: min(84%, 38rem) !important;
  }
}
@media (min-width: 1280px) {
  .nx__engine {
    width: min(88%, 46rem) !important;
  }
}
@media (min-width: 1536px) {
  .nx__engine {
    width: min(90%, 52rem) !important;
  }
}
.nx__ring {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1px solid rgba(244, 245, 247, 0.12);
  box-shadow:
    0 0 0 12px rgba(85, 137, 202, 0.05),
    inset 0 0 40px rgba(85, 137, 202, 0.12);
  animation: nx-ring var(--nx-cycle) ease-in-out infinite;
  pointer-events: none;
}

.nx__card {
  display: grid;
  gap: 0.28rem;
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  background: rgba(244, 245, 247, 0.06);
  border: 1px solid rgba(244, 245, 247, 0.12);
  animation: nx-card var(--nx-cycle) ease-in-out infinite;
}
.nx__card strong { font-size: 1.05rem; letter-spacing: -0.02em; }
.nx__card em { font-style: normal; font-size: 0.78rem; color: #8B939C; overflow-wrap: anywhere; }
.nx__card span { font-size: 0.78rem; color: #58C97A; font-weight: 600; }

.nx__token {
  position: absolute;
  left: 12%;
  top: 48%;
  z-index: 4;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #E4A133;
  color: #1B2430;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 0 0 0 rgba(228, 161, 51, 0.45);
  animation: nx-token var(--nx-cycle) ease-in-out infinite;
}

@media (min-width: 700px) and (max-width: 1023px) {
  .nx__engine { width: min(100%, 24rem); }
  .nx__kicker { font-size: 0.76rem; }
}
@media (min-width: 1024px) {
  .nx__kicker { font-size: 0.82rem; margin-bottom: 0.9rem; }
  .nx__sheet {
    padding: 1.15rem 1.2rem;
    backdrop-filter: blur(8px);
    background: rgba(27, 36, 48, 0.72);
  }
  .nx__sheet strong { font-size: 0.88rem; }
  .nx__rows { gap: 0.55rem; }
  .nx__rows span { height: 0.78rem; }
  .nx__card {
    padding: 1.25rem 1.3rem;
    gap: 0.35rem;
    backdrop-filter: blur(8px);
    background: rgba(27, 36, 48, 0.72);
  }
  .nx__card strong { font-size: 1.45rem; }
  .nx__card em, .nx__card span { font-size: 0.92rem; }
  .nx__token { font-size: 1.05rem; padding: 0.5rem 1rem; }
  .nx__path { height: 5px; top: 58%; }
  .nx__spark { width: 0.75rem; height: 0.75rem; }
  .nx__glow { width: 78%; height: 78%; top: 56%; }
  .nx__ring { inset: -10%; }
}

@keyframes nx-row {
  0%, 16% { transform: none; opacity: 1; box-shadow: none; }
  28% { transform: translateX(12%); opacity: 0.85; box-shadow: 0 0 16px rgba(228, 161, 51, 0.55); }
  42% { transform: translateX(28%); opacity: 0.15; }
  68%, 100% { transform: none; opacity: 1; box-shadow: none; }
}
@keyframes nx-token {
  0%, 5% { left: 10%; top: 22%; opacity: 0; transform: scale(0.7); box-shadow: 0 0 0 0 rgba(228, 161, 51, 0.4); }
  12% { opacity: 1; transform: scale(1); }
  34% { left: 46%; top: 56%; opacity: 1; transform: scale(1.14); box-shadow: 0 0 32px rgba(228, 161, 51, 0.8); }
  54% { left: 78%; top: 22%; opacity: 1; transform: scale(1); }
  68% { left: 84%; top: 18%; opacity: 0; transform: scale(0.85); }
  100% { left: 84%; top: 18%; opacity: 0; transform: scale(0.85); }
}
@keyframes nx-card {
  0%, 48% { opacity: 0; transform: translateX(24px) scale(0.88); box-shadow: none; border-color: rgba(244, 245, 247, 0.12); }
  60% { opacity: 1; transform: none; box-shadow: 0 0 0 2px rgba(88, 201, 122, 0.7), 0 22px 48px rgba(0, 0, 0, 0.28); border-color: rgba(88, 201, 122, 0.55); }
  82% { opacity: 1; transform: none; box-shadow: 0 0 0 1px rgba(88, 201, 122, 0.35), 0 18px 40px rgba(0, 0, 0, 0.2); }
  100% { opacity: 0.35; transform: translateY(10px) scale(0.97); box-shadow: none; border-color: rgba(244, 245, 247, 0.12); }
}
@keyframes nx-path {
  0%, 8% { transform: scaleX(0); opacity: 0; }
  18% { opacity: 1; }
  46% { transform: scaleX(1); opacity: 1; }
  70% { transform: scaleX(1); opacity: 0.35; }
  100% { opacity: 0; }
}
@keyframes nx-glow {
  0%, 35% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.82); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes nx-ring {
  0%, 30% { opacity: 0.25; transform: scale(0.92); }
  48% { opacity: 1; transform: scale(1.04); border-color: rgba(228, 161, 51, 0.45); }
  70% { opacity: 0.55; transform: scale(1); border-color: rgba(88, 201, 122, 0.35); }
  100% { opacity: 0.25; transform: scale(0.94); }
}
@keyframes nx-spark-1 {
  0%, 12% { left: 14%; top: 26%; opacity: 0; }
  20% { opacity: 1; }
  42% { left: 46%; top: 54%; opacity: 1; }
  58% { left: 76%; top: 24%; opacity: 0; }
  100% { opacity: 0; }
}
@keyframes nx-spark-2 {
  0%, 18% { left: 18%; top: 30%; opacity: 0; }
  28% { opacity: 1; }
  48% { left: 50%; top: 58%; opacity: 1; }
  64% { left: 80%; top: 26%; opacity: 0; }
  100% { opacity: 0; }
}
@keyframes nx-spark-3 {
  0%, 24% { left: 22%; top: 24%; opacity: 0; }
  34% { opacity: 1; }
  54% { left: 54%; top: 52%; opacity: 1; }
  70% { left: 84%; top: 22%; opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ncube,
  .nx__rows span.is-live,
  .nx__card,
  .nx__token,
  .nx__path,
  .nx__glow,
  .nx__ring,
  .nx__spark,
  .page-hero__wash-glow,
  .page-hero__goldline {
    animation: none !important;
  }
  .nx__token,
  .nx__path,
  .nx__spark { opacity: 0; }
  .nx__glow { opacity: 0.65; transform: translate(-50%, -50%); }
  .nx__ring { opacity: 0.45; }
  .nx__card { opacity: 1; transform: none; }
}