/* NUTREEX landing design system: components.
   Every value is a token from ../tokens/tokens.css; no literal colour is written here.
   Link order: ../fonts/fonts.css, ../tokens/tokens.css, this file.
   Icons animate only when their SVG is inlined (the .nx-ic-* classes live inside the SVG). */

@property --nx-n { syntax: '<integer>'; inherits: true; initial-value: 2027; }

.nx-landing, .nx-landing *, .nx-landing *::before, .nx-landing *::after { box-sizing: border-box; }

/* ---------- page ---------- */
.nx-landing {
  position: relative;
  overflow: hidden;
  background: var(--nx-bg);
  color: var(--nx-ink);
  font-family: var(--nx-font-body);
  font-size: var(--nx-text-body);
  line-height: var(--nx-leading-body);
  border: var(--nx-line-hairline) solid var(--nx-line);
  border-radius: var(--nx-radius-frame);
}
.nx-mono {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-text-label);
  font-weight: 500;
  letter-spacing: var(--nx-tracking-label);
  text-transform: uppercase;
}

/* ---------- icons ---------- */
.nx-icon { display: inline-block; flex: none; vertical-align: middle; }
.nx-ic-trace, .nx-ic-line, .nx-ic-vein { stroke-dasharray: 1 1; }
.nx-ic-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.nx-ic-leaf { transform-origin: 5px 19px; }
.nx-ic-orbit, .nx-ic-core { transform-origin: 12px 12px; }
.nx-ic-spark { transform-box: fill-box; transform-origin: 50% 50%; }

/* ---------- logo (two files, one shown per theme) ---------- */
.nx-wordmark { display: block; height: var(--nx-space-9); width: auto; }
.nx-wordmark--on-light { display: var(--nx-logo-on-light-display); }
.nx-wordmark--on-dark { display: var(--nx-logo-on-dark-display); }

/* ---------- header ---------- */
.nx-header {
  display: flex; align-items: center; gap: var(--nx-space-5);
  padding: var(--nx-space-6) var(--nx-space-9);
  border-bottom: var(--nx-line-hairline) solid var(--nx-line);
}
.nx-header__tagline { margin-inline-start: auto; font-size: 12px; color: var(--nx-muted); }
.nx-header__tools { display: flex; gap: var(--nx-space-2); color: var(--nx-link); }
.nx-icon-btn {
  display: inline-flex; align-items: center; gap: 2px;
  padding: var(--nx-space-2) var(--nx-space-3);
  color: inherit; background: transparent;
  border: var(--nx-line-hairline) solid var(--nx-line);
  border-radius: var(--nx-radius-control);
  transition: border-color var(--nx-dur-base) var(--nx-ease-soft), background var(--nx-dur-base) var(--nx-ease-soft);
}
.nx-icon-btn:hover, .nx-icon-btn:focus-visible { border-color: var(--nx-luminous); background: var(--nx-surface-2); }

/* ---------- the luminous line ---------- */
.nx-glow-line {
  height: var(--nx-line-glow);
  background: linear-gradient(90deg, transparent, var(--nx-luminous), transparent);
  box-shadow: var(--nx-glow-shadow);
}

/* ---------- hero ---------- */
.nx-hero {
  position: relative;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--nx-space-6);
  align-items: center;
  padding: var(--nx-space-10) var(--nx-space-9);
}
.nx-hero::before {
  content: ""; position: absolute; inset: calc(var(--nx-grid-cell) * -1) 0 0 calc(var(--nx-grid-cell) * -1);
  pointer-events: none;
  background-image:
    linear-gradient(var(--nx-grid) var(--nx-line-hairline), transparent var(--nx-line-hairline)),
    linear-gradient(90deg, var(--nx-grid) var(--nx-line-hairline), transparent var(--nx-line-hairline));
  background-size: var(--nx-grid-cell) var(--nx-grid-cell);
  -webkit-mask-image: linear-gradient(to bottom, currentcolor, transparent 90%);
  mask-image: linear-gradient(to bottom, currentcolor, transparent 90%);
  animation: nx-drift var(--nx-dur-drift) var(--nx-ease-linear) infinite;
}
.nx-hero > * { position: relative; }
.nx-eyebrow { display: flex; align-items: center; gap: var(--nx-space-2); margin: 0 0 var(--nx-space-4); color: var(--nx-link); }
.nx-h1 {
  margin: 0 0 var(--nx-space-5);
  font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading);
  font-size: var(--nx-text-h1); line-height: var(--nx-leading-tight);
  color: var(--nx-heading);
}
.nx-h1__sub { display: block; margin-top: var(--nx-space-4); font-size: var(--nx-text-lead); line-height: 1.3; color: var(--nx-link); }
.nx-sub { margin: 0; color: var(--nx-muted); }
.nx-readout { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); margin: var(--nx-space-6) 0 0; }
.nx-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--nx-space-3);
  color: var(--nx-muted);
  border: var(--nx-line-hairline) solid var(--nx-line);
  border-radius: var(--nx-radius-tag);
}
.nx-tag .nx-icon { color: var(--nx-link); }
.nx-tag--stage { color: var(--nx-link); border-color: var(--nx-luminous); }
.nx-count::after { counter-reset: nx-c var(--nx-n); content: counter(nx-c); }
.nx-count--2027 { --nx-n: 2027; }
.nx-count--2028 { --nx-n: 2028; }
.nx-art { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: center; }
.nx-curve { width: 100%; max-width: 240px; color: var(--nx-link); }
.nx-curve__fill { fill: var(--nx-decor-2); opacity: .55; stroke: none; }
.nx-curve__dot { fill: var(--nx-luminous); filter: var(--nx-dot-glow); }

/* ---------- section and cards ---------- */
.nx-section { padding: var(--nx-space-2) var(--nx-space-9) var(--nx-space-10); }
.nx-lead { max-width: 60ch; margin: 0 0 var(--nx-space-7); color: var(--nx-muted); }
.nx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nx-space-4); }
.nx-card {
  position: relative; overflow: hidden;
  padding: var(--nx-space-7) var(--nx-space-6);
  background: var(--nx-surface);
  border: var(--nx-line-hairline) solid var(--nx-line);
  border-radius: var(--nx-radius-card);
  transition: border-color var(--nx-dur-base) var(--nx-ease-soft);
}
.nx-card:hover, .nx-card:focus-within, .nx-card.is-active { border-color: color-mix(in srgb, var(--nx-luminous) 55%, var(--nx-line)); }
.nx-card__top { display: flex; align-items: center; justify-content: space-between; color: var(--nx-link); }
.nx-card__no { color: var(--nx-muted); }
.nx-card__title { margin: var(--nx-space-4) 0 4px; font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading); font-size: var(--nx-text-h3); color: var(--nx-heading); }
.nx-card__text { margin: 0; font-size: var(--nx-text-small); color: var(--nx-muted); }

/* HUD brackets: two corners, one line wide */
.nx-card::before, .nx-card::after, .nx-stage::before, .nx-stage::after {
  content: ""; position: absolute; pointer-events: none;
  width: var(--nx-bracket); height: var(--nx-bracket);
  border: 0 solid var(--nx-luminous); opacity: .7;
  transition: width var(--nx-dur-base) var(--nx-ease-out), height var(--nx-dur-base) var(--nx-ease-out), opacity var(--nx-dur-base) var(--nx-ease-soft);
}
.nx-card::before, .nx-stage::before { top: var(--nx-space-3); inset-inline-start: var(--nx-space-3); border-top-width: var(--nx-line-bracket); border-inline-start-width: var(--nx-line-bracket); }
.nx-card::after, .nx-stage::after { bottom: var(--nx-space-3); inset-inline-end: var(--nx-space-3); border-bottom-width: var(--nx-line-bracket); border-inline-end-width: var(--nx-line-bracket); }
.nx-card:hover::before, .nx-card:hover::after, .nx-card:focus-within::before, .nx-card:focus-within::after,
.nx-card.is-active::before, .nx-card.is-active::after { width: var(--nx-bracket-hover); height: var(--nx-bracket-hover); opacity: 1; }
.nx-sweep { position: absolute; left: 0; right: 0; top: 0; height: var(--nx-line-glow); pointer-events: none; transform: translateX(-101%); background: linear-gradient(90deg, transparent, var(--nx-luminous), transparent); }
.nx-card:hover .nx-sweep, .nx-card.is-active .nx-sweep { animation: nx-sweep-x var(--nx-dur-sweep) var(--nx-ease-out) 1 both; }

/* ---------- stage block ---------- */
.nx-stage {
  position: relative; overflow: hidden;
  margin: 0 var(--nx-space-9) var(--nx-space-9); padding: var(--nx-space-8);
  border: var(--nx-line-hairline) solid var(--nx-line); border-radius: var(--nx-radius-card);
}
.nx-stage__mission { margin: 0 0 var(--nx-space-3); font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading); font-size: var(--nx-text-stage); line-height: 1.4; color: var(--nx-heading); }
.nx-stage__line { margin: 0; font-size: var(--nx-text-small); color: var(--nx-muted); }

/* ---------- AIVIS block ---------- */
.nx-aivis {
  margin: 0 var(--nx-space-9) var(--nx-space-9); padding: var(--nx-space-7) var(--nx-space-8);
  background: var(--nx-surface-2);
  border: var(--nx-line-hairline) dashed var(--nx-link); border-radius: var(--nx-radius-card);
}
.nx-aivis p { margin: 0 0 var(--nx-space-4); }
.nx-aivis__tag { display: inline-block; margin-bottom: var(--nx-space-2); color: var(--nx-warm); }

/* ---------- buttons ---------- */
.nx-btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--nx-space-3);
  padding: var(--nx-space-4) var(--nx-space-9);
  font-family: var(--nx-font-body); font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer;
  transition: background var(--nx-dur-base) var(--nx-ease-soft), border-color var(--nx-dur-base) var(--nx-ease-soft);
}
.nx-btn .nx-icon { transition: transform var(--nx-dur-base) var(--nx-ease-out); }
.nx-btn:hover .nx-icon, .nx-btn:focus-visible .nx-icon, .nx-btn.is-active .nx-icon { transform: translate(2px, -2px); }
/* every primary button carries the chamfer: two opposite corners cut */
.nx-btn--primary {
  overflow: hidden; border: 0;
  background: var(--nx-accent); color: var(--nx-on-accent);
  clip-path: polygon(var(--nx-chamfer) 0, 100% 0, 100% calc(100% - var(--nx-chamfer)), calc(100% - var(--nx-chamfer)) 100%, 0 100%, 0 var(--nx-chamfer));
}
.nx-btn--primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%); background: linear-gradient(100deg, transparent 30%, var(--nx-sweep-highlight) 50%, transparent 70%); }
.nx-btn--primary:hover::after, .nx-btn--primary:focus-visible::after, .nx-btn--primary.is-active::after { animation: nx-sweep-b var(--nx-dur-sweep) var(--nx-ease-out) 1 both; }
.nx-btn--secondary { background: transparent; color: var(--nx-link); border: var(--nx-line-hairline) solid var(--nx-line); border-radius: var(--nx-radius-button); }
.nx-btn--secondary:hover, .nx-btn--secondary:focus-visible, .nx-btn--secondary.is-active { border-color: var(--nx-luminous); background: var(--nx-surface-2); }
.nx-btn:focus-visible, .nx-icon-btn:focus-visible { outline: 2px solid var(--nx-luminous); outline-offset: 2px; }

/* ---------- footer ---------- */
.nx-footer { display: flex; flex-wrap: wrap; gap: var(--nx-space-2) var(--nx-space-8); padding: var(--nx-space-6) var(--nx-space-9); font-size: 12px; color: var(--nx-muted); border-top: var(--nx-line-hairline) solid var(--nx-line); }
.nx-footer__item { display: inline-flex; align-items: center; gap: var(--nx-space-2); color: inherit; text-decoration: none; }
.nx-footer__item .nx-icon { color: var(--nx-link); }
.nx-to-come { margin-inline-start: var(--nx-space-1); color: var(--nx-warm); font-style: normal; }

/* ---------- motion ---------- */
@keyframes nx-drift { to { background-position: var(--nx-grid-cell) var(--nx-grid-cell); } }
@keyframes nx-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nx-sweep-x { from { transform: translateX(-101%); } to { transform: translateX(101%); } }
@keyframes nx-sweep-b { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes nx-count-2027 { from { --nx-n: 2000; } to { --nx-n: 2027; } }
@keyframes nx-count-2028 { from { --nx-n: 2001; } to { --nx-n: 2028; } }
@keyframes nx-ic-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nx-ic-draw-b { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nx-ic-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-ic-fade-b { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-ic-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes nx-ic-pop-b { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes nx-ic-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nx-ic-rise-b { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nx-ic-float { from { opacity: 0; transform: translate(-2px, 3px); } to { opacity: 1; transform: none; } }
@keyframes nx-ic-float-b { from { opacity: 0; transform: translate(-2px, 3px); } to { opacity: 1; transform: none; } }
@keyframes nx-ic-unfurl { from { opacity: 0; transform: scale(.25) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes nx-ic-unfurl-b { from { opacity: 0; transform: scale(.25) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes nx-ic-orbit { from { transform: rotate(-180deg); } to { transform: rotate(0); } }
@keyframes nx-ic-orbit-b { from { transform: rotate(-180deg); } to { transform: rotate(0); } }

/* entry reveal: scroll-driven where supported, otherwise on load with a stagger (--nx-i = item index) */
.nx-reveal { animation: nx-reveal var(--nx-dur-reveal) var(--nx-ease-out) both; animation-delay: calc(var(--nx-i, 0) * var(--nx-stagger)); }
@supports (animation-timeline: view()) {
  .nx-reveal { animation-timeline: view(); animation-range: entry 0% entry 45%; animation-delay: 0s; }
}

/* readout count-in */
.nx-landing .nx-count--2027 { animation: nx-count-2027 var(--nx-dur-count) var(--nx-ease-out) both; }
.nx-landing .nx-count--2028 { animation: nx-count-2028 var(--nx-dur-count) var(--nx-ease-out) both; animation-delay: var(--nx-dur-fast); }

/* icon micro-animations: on entry */
.nx-landing .nx-ic-trace, .nx-landing .nx-ic-line { animation: nx-ic-draw var(--nx-dur-draw) var(--nx-ease-in-out) both; animation-delay: var(--nx-dur-reveal); }
.nx-landing .nx-ic-ext { animation: nx-ic-fade var(--nx-dur-base) var(--nx-ease-soft) both; animation-delay: calc(var(--nx-dur-reveal) + var(--nx-dur-draw)); }
.nx-landing .nx-ic-spark { animation: nx-ic-pop var(--nx-dur-base) var(--nx-ease-out) both; animation-delay: calc(var(--nx-dur-reveal) + var(--nx-dur-draw)); }
.nx-landing .nx-ic-bar { animation: nx-ic-rise var(--nx-dur-base) var(--nx-ease-out) both; animation-delay: var(--nx-dur-reveal); }
.nx-landing .nx-ic-bar.b2 { animation-delay: calc(var(--nx-dur-reveal) + 80ms); }
.nx-landing .nx-ic-bar.b3 { animation-delay: calc(var(--nx-dur-reveal) + 160ms); }
.nx-landing .nx-ic-z { animation: nx-ic-float var(--nx-dur-reveal) var(--nx-ease-out) both; animation-delay: var(--nx-dur-reveal); }
.nx-landing .nx-ic-leaf { animation: nx-ic-unfurl var(--nx-dur-reveal) var(--nx-ease-out) both; animation-delay: var(--nx-dur-reveal); }
.nx-landing .nx-ic-vein { animation: nx-ic-draw var(--nx-dur-draw) var(--nx-ease-in-out) both; animation-delay: calc(var(--nx-dur-reveal) + 200ms); }
.nx-landing .nx-ic-orbit { animation: nx-ic-orbit var(--nx-dur-draw) var(--nx-ease-in-out) both; animation-delay: var(--nx-dur-reveal); }
.nx-landing .nx-ic-core { animation: nx-ic-pop var(--nx-dur-base) var(--nx-ease-out) both; animation-delay: var(--nx-dur-reveal); }

/* icon micro-animations: again on hover or focus of the card or the tile (the -b copies restart them) */
.nx-card:hover .nx-ic-trace, .nx-card:hover .nx-ic-line, .nx-card.is-active .nx-ic-trace, .nx-card.is-active .nx-ic-line,
.nx-icon-tile:hover .nx-ic-trace, .nx-icon-tile:hover .nx-ic-line, .nx-icon-tile.is-active .nx-ic-trace, .nx-icon-tile.is-active .nx-ic-line { animation: nx-ic-draw-b var(--nx-dur-draw) var(--nx-ease-in-out) both; animation-delay: 0s; }
.nx-card:hover .nx-ic-vein, .nx-card.is-active .nx-ic-vein, .nx-icon-tile:hover .nx-ic-vein, .nx-icon-tile.is-active .nx-ic-vein { animation: nx-ic-draw-b var(--nx-dur-draw) var(--nx-ease-in-out) both; animation-delay: 200ms; }
.nx-card:hover .nx-ic-ext, .nx-card.is-active .nx-ic-ext, .nx-icon-tile:hover .nx-ic-ext, .nx-icon-tile.is-active .nx-ic-ext { animation: nx-ic-fade-b var(--nx-dur-base) var(--nx-ease-soft) both; animation-delay: var(--nx-dur-draw); }
.nx-card:hover .nx-ic-spark, .nx-card.is-active .nx-ic-spark, .nx-icon-tile:hover .nx-ic-spark, .nx-icon-tile.is-active .nx-ic-spark { animation: nx-ic-pop-b var(--nx-dur-base) var(--nx-ease-out) both; animation-delay: var(--nx-dur-draw); }
.nx-card:hover .nx-ic-bar, .nx-card.is-active .nx-ic-bar, .nx-icon-tile:hover .nx-ic-bar, .nx-icon-tile.is-active .nx-ic-bar { animation: nx-ic-rise-b var(--nx-dur-base) var(--nx-ease-out) both; animation-delay: 0s; }
.nx-card:hover .nx-ic-bar.b2, .nx-card.is-active .nx-ic-bar.b2, .nx-icon-tile:hover .nx-ic-bar.b2, .nx-icon-tile.is-active .nx-ic-bar.b2 { animation-delay: 80ms; }
.nx-card:hover .nx-ic-bar.b3, .nx-card.is-active .nx-ic-bar.b3, .nx-icon-tile:hover .nx-ic-bar.b3, .nx-icon-tile.is-active .nx-ic-bar.b3 { animation-delay: 160ms; }
.nx-card:hover .nx-ic-z, .nx-card.is-active .nx-ic-z, .nx-icon-tile:hover .nx-ic-z, .nx-icon-tile.is-active .nx-ic-z { animation: nx-ic-float-b var(--nx-dur-reveal) var(--nx-ease-out) both; animation-delay: 0s; }
.nx-card:hover .nx-ic-leaf, .nx-card.is-active .nx-ic-leaf, .nx-icon-tile:hover .nx-ic-leaf, .nx-icon-tile.is-active .nx-ic-leaf { animation: nx-ic-unfurl-b var(--nx-dur-reveal) var(--nx-ease-out) both; animation-delay: 0s; }
.nx-card:hover .nx-ic-orbit, .nx-card.is-active .nx-ic-orbit, .nx-icon-tile:hover .nx-ic-orbit, .nx-icon-tile.is-active .nx-ic-orbit { animation: nx-ic-orbit-b var(--nx-dur-draw) var(--nx-ease-in-out) both; animation-delay: 0s; }
.nx-card:hover .nx-ic-core, .nx-card.is-active .nx-ic-core, .nx-icon-tile:hover .nx-ic-core, .nx-icon-tile.is-active .nx-ic-core { animation: nx-ic-pop-b var(--nx-dur-base) var(--nx-ease-out) both; animation-delay: 0s; }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .nx-hero { grid-template-columns: 1fr; }
  .nx-cards { grid-template-columns: 1fr; }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .nx-landing, .nx-landing *, .nx-landing *::before, .nx-landing *::after,
  .nx-icon-tile, .nx-icon-tile * { animation: none !important; transition: none !important; }
}

/* =====================================================================================
   PAGE PIECES: a full-width live page (sticky header, anchor navigation, language switch,
   block layouts, five-card steps, roadmap timeline, FAQ accordion, page footer).
   All of it is tokens only; the framed specimen above stays as it is.
   ===================================================================================== */

/* ---------- page shell ---------- */
.nx-landing--page { overflow: visible; overflow-x: clip; border: 0; border-radius: 0; min-height: 100vh; }
.nx-wrap { width: 100%; max-width: var(--nx-wrap); margin-inline: auto; padding-inline: var(--nx-space-9); }
.nx-skip {
  position: absolute; inset-inline-start: var(--nx-space-5); top: calc(var(--nx-header-h) * -2); z-index: var(--nx-z-modal);
  padding: var(--nx-space-4) var(--nx-space-7); border-radius: var(--nx-radius-control);
  background: var(--nx-accent); color: var(--nx-on-accent); font-weight: 600; text-decoration: none;
}
.nx-skip:focus { top: var(--nx-space-5); }
.nx-landing--page a:not([class]) { color: var(--nx-link); }
.nx-landing--page a:focus-visible, .nx-faq__q:focus-visible { outline: 2px solid var(--nx-luminous); outline-offset: 2px; }

/* ---------- sticky header with anchor navigation and language switch ---------- */
.nx-header--page {
  position: sticky; top: 0; z-index: var(--nx-z-sticky);
  display: block; padding: 0; border-bottom: 0; background: var(--nx-bg);
}
.nx-header__bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-space-5) var(--nx-space-7); min-height: var(--nx-header-h); }
.nx-header__bar .nx-wordmark { flex: none; }
.nx-header--page .nx-header__tagline { display: none; margin-inline-start: 0; }
.nx-header--page .nx-header__tools { align-items: center; margin-inline-start: auto; }
.nx-nav { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); order: 3; flex-basis: 100%; padding-bottom: var(--nx-space-5); }
.nx-nav__link {
  padding: var(--nx-space-2) var(--nx-space-4); color: var(--nx-muted); text-decoration: none;
  border: var(--nx-line-hairline) solid transparent; border-radius: var(--nx-radius-control);
  transition: color var(--nx-dur-base) var(--nx-ease-soft), border-color var(--nx-dur-base) var(--nx-ease-soft);
}
.nx-nav__link:hover, .nx-nav__link:focus-visible, .nx-nav__link[aria-current="true"] { color: var(--nx-link); border-color: var(--nx-line); }
.nx-nav__link[aria-current="true"] { border-color: var(--nx-luminous); }
.nx-lang { display: inline-flex; border: var(--nx-line-hairline) solid var(--nx-line); border-radius: var(--nx-radius-control); overflow: hidden; }
.nx-lang__link { padding: var(--nx-space-2) var(--nx-space-4); color: var(--nx-muted); text-decoration: none; transition: background var(--nx-dur-base) var(--nx-ease-soft), color var(--nx-dur-base) var(--nx-ease-soft); }

.nx-lang__link:hover, .nx-lang__link:focus-visible { background: var(--nx-surface-2); }
.nx-lang__link[aria-current="true"] { background: var(--nx-surface-2); color: var(--nx-link); }
.nx-menu-btn { display: none; cursor: pointer; font: inherit; color: var(--nx-link); }
/* with the script: the menu button opens the navigation as a panel under the bar */
.nx-js .nx-menu-btn { display: inline-flex; }
.nx-js .nx-nav { display: none; }
.nx-js .nx-header--page[data-open="true"] .nx-nav { display: flex; flex-direction: column; }
@media (min-width: 960px) {
  .nx-js .nx-menu-btn { display: none; }
  .nx-js .nx-nav, .nx-js .nx-header--page[data-open="true"] .nx-nav { display: flex; flex-direction: row; }
  .nx-nav { order: 0; flex-basis: auto; flex-wrap: nowrap; padding-bottom: 0; margin-inline-start: auto; }
  .nx-header--page .nx-header__tools { margin-inline-start: 0; }
}
@media (min-width: 1160px) {
  .nx-header--page .nx-header__tagline { display: block; padding-inline-start: var(--nx-space-7); border-inline-start: var(--nx-line-hairline) solid var(--nx-line); }
}

/* ---------- page hero ---------- */
.nx-hero--page { display: block; padding: 0; }
.nx-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--nx-space-11); align-items: center; padding-block: var(--nx-space-13); }
.nx-h1--display { font-size: var(--nx-text-display); }
.nx-hero--page .nx-h1__sub { font-size: var(--nx-text-lead); }
.nx-hero--page .nx-sub { max-width: 60ch; font-size: var(--nx-text-stage); }
.nx-hero--page .nx-art { min-height: 0; }
.nx-hero--page .nx-curve { max-width: 420px; }
.nx-stageline {
  max-width: 60ch; margin: var(--nx-space-7) 0 0; padding: var(--nx-space-3) var(--nx-space-7);
  border-inline-start: var(--nx-line-glow) solid var(--nx-luminous);
  font-size: var(--nx-text-small); color: var(--nx-muted);
}
@media (min-width: 880px) { .nx-hero__inner { grid-template-columns: 1.15fr .85fr; } }

/* ---------- blocks and headings ---------- */
.nx-block { padding-block: var(--nx-space-13); scroll-margin-top: var(--nx-header-h); }
.nx-block--tint { background: color-mix(in srgb, var(--nx-surface-2) 55%, var(--nx-bg)); border-block: var(--nx-line-hairline) solid var(--nx-line); }
.nx-block__head { max-width: var(--nx-wrap-narrow); margin-bottom: var(--nx-space-11); }
.nx-h2 {
  margin: 0 0 var(--nx-space-5);
  font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading);
  font-size: var(--nx-text-h2); line-height: var(--nx-leading-tight); color: var(--nx-heading);
}
.nx-h3 { margin: 0 0 var(--nx-space-3); font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading); font-size: var(--nx-text-h3); color: var(--nx-heading); }
.nx-lead--lg { max-width: 64ch; font-size: var(--nx-text-lead); color: var(--nx-ink); margin-bottom: var(--nx-space-7); }
.nx-text { max-width: 64ch; margin: 0 0 var(--nx-space-5); font-size: var(--nx-text-stage); color: var(--nx-ink); }
.nx-note {
  margin: 0; padding: var(--nx-space-7) var(--nx-space-8);
  background: var(--nx-surface-2); border-radius: var(--nx-radius-card);
  font-size: var(--nx-text-body); color: var(--nx-ink);
}
.nx-note + .nx-note { margin-top: var(--nx-space-4); }
.nx-note--line { margin-top: var(--nx-space-9); }
.nx-split { display: grid; grid-template-columns: 1fr; gap: var(--nx-space-11); align-items: start; }
.nx-split > * { min-width: 0; }
@media (min-width: 880px) {
  .nx-split { grid-template-columns: 1.1fr .9fr; }
  .nx-split--even { grid-template-columns: 1fr 1fr; }
  .nx-split--faq { grid-template-columns: .55fr 1.45fr; }
  .nx-split--roadmap { grid-template-columns: .8fr 1.2fr; }
}
.nx-figure { margin: 0; overflow: hidden; border: var(--nx-line-hairline) solid var(--nx-line); border-radius: var(--nx-radius-card); }
.nx-figure img { display: block; width: 100%; height: auto; }

/* ---------- five cards: a numbered row of steps ---------- */
.nx-cards--five { grid-template-columns: 1fr; margin-top: var(--nx-space-11); }
.nx-cards--five .nx-card__text { font-size: var(--nx-text-small); }
@media (min-width: 640px) {
  .nx-cards--five { grid-template-columns: repeat(6, 1fr); }
  .nx-cards--five > .nx-card { grid-column: span 2; }
  .nx-cards--five > .nx-card:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1000px) {
  .nx-cards--five { grid-template-columns: repeat(5, 1fr); }
  .nx-cards--five > .nx-card, .nx-cards--five > .nx-card:nth-child(n+4) { grid-column: auto; }
}
.nx-cards--three { grid-template-columns: 1fr; }
@media (min-width: 880px) { .nx-cards--three { grid-template-columns: repeat(3, 1fr); } }
.nx-card--wide { display: grid; grid-template-columns: 1fr; gap: var(--nx-space-7); align-items: start; }
@media (min-width: 640px) { .nx-card--wide { grid-template-columns: auto 1fr; gap: var(--nx-space-11); } }
.nx-card--wide > .nx-icon { color: var(--nx-link); }

/* ---------- stage block, the mission variant ---------- */
.nx-stage--page { margin: 0 0 var(--nx-space-9); padding: var(--nx-space-11); }
.nx-stage--page .nx-stage__mission { max-width: 70ch; font-size: var(--nx-text-lead); line-height: var(--nx-leading-body); }

/* ---------- facts: a figure with its source, on a card ---------- */
.nx-fact__stat { margin: var(--nx-space-4) 0 0; font-size: var(--nx-text-body); color: var(--nx-ink); }
.nx-fact__num { font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading); color: var(--nx-heading); }
.nx-fact__link { margin: var(--nx-space-5) 0 0; font-size: var(--nx-text-small); color: var(--nx-muted); }

/* ---------- roadmap timeline ---------- */
.nx-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.nx-timeline::before { content: ""; position: absolute; inset-block: var(--nx-space-3); inset-inline-start: var(--nx-space-2); width: var(--nx-line-hairline); background: var(--nx-line); }
.nx-timeline__item { position: relative; padding: 0 0 var(--nx-space-9) var(--nx-space-12); }
.nx-timeline__item:last-child { padding-bottom: 0; }
.nx-timeline__item::before {
  content: ""; position: absolute; top: var(--nx-space-2); inset-inline-start: 0;
  width: var(--nx-space-5); height: var(--nx-space-5); box-sizing: border-box;
  background: var(--nx-bg); border: var(--nx-line-bracket) solid var(--nx-luminous); border-radius: var(--nx-radius-pill);
}
[dir="rtl"] .nx-timeline__item { padding: 0 var(--nx-space-12) var(--nx-space-9) 0; }
.nx-timeline__text { margin: 0; font-size: var(--nx-text-stage); color: var(--nx-ink); }
.nx-timeline__more { margin: var(--nx-space-3) 0 0; font-size: var(--nx-text-small); color: var(--nx-muted); }

/* ---------- FAQ accordion: native details, the only motion is its open and close ---------- */
.nx-faq { display: grid; gap: var(--nx-space-3); }
.nx-faq__item {
  background: var(--nx-surface); border: var(--nx-line-hairline) solid var(--nx-line); border-radius: var(--nx-radius-card);
  transition: border-color var(--nx-dur-base) var(--nx-ease-soft);
  interpolate-size: allow-keywords;
}
.nx-faq__item:hover, .nx-faq__item[open] { border-color: color-mix(in srgb, var(--nx-luminous) 55%, var(--nx-line)); }
.nx-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-7);
  padding: var(--nx-space-7) var(--nx-space-8); cursor: pointer; list-style: none; border-radius: var(--nx-radius-card);
  font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading); font-size: var(--nx-text-h3); color: var(--nx-heading);
}
.nx-faq__q::-webkit-details-marker { display: none; }
.nx-faq__icon { color: var(--nx-link); transition: transform var(--nx-dur-base) var(--nx-ease-out); }
.nx-faq__item[open] .nx-faq__icon { transform: rotate(180deg); }
.nx-faq__a { padding: 0 var(--nx-space-8) var(--nx-space-7); color: var(--nx-muted); }
.nx-faq__a p { margin: 0 0 var(--nx-space-3); max-width: 64ch; }
.nx-faq__a p:last-child { margin-bottom: 0; }
@supports selector(::details-content) {
  .nx-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--nx-dur-base) var(--nx-ease-out), content-visibility var(--nx-dur-base) allow-discrete; }
  .nx-faq__item[open]::details-content { block-size: auto; }
  @media (prefers-reduced-motion: reduce) { .nx-faq__item::details-content { transition: none; } }
}

/* ---------- AIVIS block, the page variant: no marker, a solid line ---------- */
.nx-aivis--page {
  display: grid; grid-template-columns: 1fr; gap: var(--nx-space-9); align-items: center;
  margin: 0; padding: var(--nx-space-11); border-style: solid; border-color: var(--nx-line);
}
.nx-aivis--page p { margin: 0; font-size: var(--nx-text-stage); }
.nx-aivis--page .nx-h2 { margin-bottom: var(--nx-space-4); }
@media (min-width: 880px) { .nx-aivis--page { grid-template-columns: 1fr auto; gap: var(--nx-space-12); } }

/* ---------- page footer: brand, links, company line ---------- */
.nx-footer--page { display: block; padding: var(--nx-space-11) 0 var(--nx-space-10); }
.nx-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-7) var(--nx-space-11); }
.nx-footer__links { display: flex; flex-wrap: wrap; gap: var(--nx-space-3) var(--nx-space-9); }
.nx-footer--page .nx-footer__item { color: var(--nx-muted); }
.nx-footer--page .nx-footer__item:hover, .nx-footer--page .nx-footer__item:focus-visible { color: var(--nx-link); }
.nx-footer__company { margin: var(--nx-space-9) 0 0; }
.nx-footer__copy { margin: var(--nx-space-1) 0 0; }

/* ---------- legal prose (for the three legal pages, built when their text is agreed) ---------- */
.nx-prose { max-width: var(--nx-wrap-narrow); margin-inline: auto; padding-block: var(--nx-space-13); }
.nx-prose h1 { margin: 0 0 var(--nx-space-7); font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading); font-size: var(--nx-text-h1); line-height: var(--nx-leading-tight); color: var(--nx-heading); }
.nx-prose h2 { margin: var(--nx-space-11) 0 var(--nx-space-4); font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading); font-size: var(--nx-text-h3); color: var(--nx-heading); }
.nx-prose p, .nx-prose li { margin: 0 0 var(--nx-space-5); font-size: var(--nx-text-stage); color: var(--nx-ink); }
.nx-prose ul, .nx-prose ol { margin: 0 0 var(--nx-space-5); padding-inline-start: var(--nx-space-10); }
.nx-prose__date { color: var(--nx-muted); }
.nx-prose__back { display: inline-block; margin-top: var(--nx-space-9); }

/* ---------- 404 ---------- */
.nx-notfound { display: grid; justify-items: start; gap: var(--nx-space-7); padding-block: var(--nx-space-13); }

/* ---------- small page helpers ---------- */
.nx-brand { display: inline-flex; flex: none; text-decoration: none; }
.nx-note p { margin: 0 0 var(--nx-space-3); }
.nx-note p:last-child { margin: 0; }
.nx-block--flush { padding-top: 0; }
.nx-block__head--next { margin-top: var(--nx-space-13); }
.nx-block__head .nx-lead { margin: 0; }
.nx-card--wide .nx-text { margin: 0; }

/* =====================================================================================
   PAGE PIECES 1.2.0: theme button, language menu, site footer, legal prose, livelier motion.
   Tokens only. The motion bound they keep is rules.md section 1 (the widened list).
   ===================================================================================== */

/* ---------- theme button: shows only with the script; both icons stacked, the right one in view ---------- */
.nx-theme-btn { display: none; place-items: center; cursor: pointer; font: inherit; color: var(--nx-link); }
.nx-js .nx-theme-btn { display: inline-grid; }
.nx-theme-btn__ic { grid-area: 1 / 1; transition: transform var(--nx-dur-base) var(--nx-ease-out), opacity var(--nx-dur-base) var(--nx-ease-soft); }
:root:not([data-theme="dark"]) .nx-theme-btn__sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .nx-theme-btn__moon { opacity: 0; transform: rotate(90deg) scale(.5); }

/* ---------- language menu: a globe button opening the choice (native details, works without the script) ---------- */
.nx-langmenu { position: relative; }
.nx-langmenu > summary { list-style: none; cursor: pointer; color: var(--nx-link); }
.nx-langmenu > summary::-webkit-details-marker { display: none; }
.nx-langmenu__code { padding-inline: var(--nx-space-1); }
.nx-langmenu__list {
  position: absolute; inset-inline-end: 0; top: calc(100% + var(--nx-space-2)); z-index: var(--nx-z-overlay);
  display: grid; gap: var(--nx-space-1); min-width: 11em; padding: var(--nx-space-2);
  background: var(--nx-surface); border: var(--nx-line-hairline) solid var(--nx-line); border-radius: var(--nx-radius-card);
  transform-origin: top right; animation: nx-pop var(--nx-dur-base) var(--nx-ease-out) both;
}
.nx-langmenu__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-5);
  padding: var(--nx-space-3) var(--nx-space-5); border-radius: var(--nx-radius-control);
  color: var(--nx-ink); text-decoration: none; font-size: var(--nx-text-body);
  transition: background var(--nx-dur-base) var(--nx-ease-soft), color var(--nx-dur-base) var(--nx-ease-soft);
}
.nx-langmenu__item:hover, .nx-langmenu__item:focus-visible { background: var(--nx-surface-2); color: var(--nx-link); }
.nx-langmenu__item[aria-current="true"] { color: var(--nx-link); background: var(--nx-surface-2); }
.nx-langmenu__item:focus-visible, .nx-langmenu > summary:focus-visible { outline: 2px solid var(--nx-luminous); outline-offset: 2px; }
.nx-header__tools { gap: var(--nx-space-3); }

/* ---------- site footer: brand, navigation, legal links, social networks, company mark ---------- */
.nx-footer--site { padding: var(--nx-space-12) 0 var(--nx-space-11); font-size: var(--nx-text-small); }
.nx-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--nx-space-11); }
@media (min-width: 880px) { .nx-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.nx-footer__tag { max-width: 36ch; margin: var(--nx-space-5) 0 0; color: var(--nx-muted); }
.nx-footer__h { margin: 0 0 var(--nx-space-5); font-weight: 500; color: var(--nx-link); }
.nx-footer__list { display: grid; gap: var(--nx-space-3); margin: 0; padding: 0; list-style: none; }
.nx-footer--site .nx-footer__link { display: inline-flex; align-items: baseline; gap: var(--nx-space-3); color: var(--nx-muted); text-decoration: none; transition: color var(--nx-dur-base) var(--nx-ease-soft), translate var(--nx-dur-base) var(--nx-ease-out); }
.nx-footer--site .nx-footer__link:hover, .nx-footer--site .nx-footer__link:focus-visible { color: var(--nx-link); translate: 2px 0; }
.nx-footer__hint { color: var(--nx-muted); opacity: .8; }
.nx-footer__contacts { display: flex; flex-wrap: wrap; gap: var(--nx-space-9) var(--nx-space-12); margin-top: var(--nx-space-11); }
.nx-footer__socials { display: flex; flex-wrap: wrap; gap: var(--nx-space-3); margin: 0; padding: 0; list-style: none; }
.nx-footer__soc {
  display: inline-flex; padding: var(--nx-space-3); color: var(--nx-link); text-decoration: none;
  border: var(--nx-line-hairline) solid var(--nx-line); border-radius: var(--nx-radius-control);
  transition: border-color var(--nx-dur-base) var(--nx-ease-soft), background var(--nx-dur-base) var(--nx-ease-soft), translate var(--nx-dur-base) var(--nx-ease-out);
}
.nx-footer__soc:hover, .nx-footer__soc:focus-visible { border-color: var(--nx-luminous); background: var(--nx-surface-2); translate: 0 -2px; }
.nx-footer__soc:focus-visible, .nx-footer--site a:focus-visible { outline: 2px solid var(--nx-luminous); outline-offset: 2px; }
.nx-footer__who { margin: var(--nx-space-4) 0 0; color: var(--nx-muted); }
.nx-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-5) var(--nx-space-11);
  margin-top: var(--nx-space-11); padding-top: var(--nx-space-9); border-top: var(--nx-line-hairline) solid var(--nx-line); color: var(--nx-muted);
}
.nx-footer__co { display: flex; align-items: center; gap: var(--nx-space-5); }
.nx-footer__co a { color: var(--nx-link); }
.nx-footer__bottom p { margin: 0; }
.nx-flag { flex: none; width: var(--nx-space-10); height: var(--nx-space-10); border-radius: var(--nx-radius-pill); box-shadow: 0 0 0 var(--nx-line-hairline) var(--nx-line); }
.nx-footer__lang { margin: var(--nx-space-7) 0 0; max-width: 80ch; color: var(--nx-muted); }

/* ---------- legal prose: more of the page for the four documents ---------- */
.nx-prose h3 { margin: var(--nx-space-9) 0 var(--nx-space-3); font-family: var(--nx-font-heading); font-weight: var(--nx-weight-heading); font-size: var(--nx-text-stage); color: var(--nx-heading); }
.nx-prose a { color: var(--nx-link); text-underline-offset: var(--nx-space-1); }
.nx-prose a:focus-visible { outline: 2px solid var(--nx-luminous); outline-offset: 2px; }
.nx-prose strong { font-weight: 600; color: var(--nx-heading); }
.nx-prose li { margin-bottom: var(--nx-space-3); }
.nx-prose p, .nx-prose li { max-width: 70ch; line-height: var(--nx-leading-body); }
.nx-prose h2 { padding-top: var(--nx-space-5); border-top: var(--nx-line-hairline) solid var(--nx-line); }
.nx-prose__date { margin-bottom: var(--nx-space-9); font-size: var(--nx-text-small); }

/* ---------- livelier motion (the widened list of rules.md section 1) ---------- */
@keyframes nx-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nx-line-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes nx-line-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes nx-ring { 0% { opacity: .7; transform: scale(1); } 37% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes nx-beat { 0%, 37%, 100% { scale: 1; } 14% { scale: 1.3; } }
@keyframes nx-reveal-side { from { opacity: 0; transform: translateX(var(--nx-from, -28px)); filter: brightness(.6); } to { opacity: 1; transform: none; filter: none; } }

/* the luminous line under the header draws once from the middle */
.nx-header--page .nx-glow-line { transform-origin: center; animation: nx-line-grow var(--nx-dur-draw) var(--nx-ease-out) both; }

/* the forecast curve draws itself, the fill fades in, the dot pops, then beats and sends a ring in a slow loop (the one looping motion besides the grid drift) */
.nx-curve__line { stroke-dasharray: 1 1; }
.nx-landing .nx-curve__line { animation: nx-ic-draw var(--nx-dur-draw) var(--nx-ease-in-out) both; animation-delay: var(--nx-dur-reveal); }
.nx-landing .nx-curve__fill { animation: nx-ic-fade var(--nx-dur-draw) var(--nx-ease-soft) both; animation-delay: calc(var(--nx-dur-reveal) + var(--nx-dur-base)); }
.nx-curve__dot, .nx-curve__ring { transform-box: fill-box; transform-origin: center; }
.nx-landing .nx-curve__dot { animation: nx-ic-pop var(--nx-dur-base) var(--nx-ease-out) both; animation-delay: calc(var(--nx-dur-reveal) + var(--nx-dur-draw) / 2); }
.nx-curve__ring { fill: none; stroke: var(--nx-luminous); stroke-width: var(--nx-line-bracket); opacity: 0; }
.nx-landing .nx-curve__ring { animation: nx-ring var(--nx-dur-pulse) var(--nx-ease-out) infinite; animation-delay: calc(var(--nx-dur-reveal) + var(--nx-dur-draw)); }
.nx-landing .nx-curve__dot { animation: nx-ic-pop var(--nx-dur-base) var(--nx-ease-out) both, nx-beat var(--nx-dur-pulse) var(--nx-ease-in-out) infinite; animation-delay: calc(var(--nx-dur-reveal) + var(--nx-dur-draw) / 2), calc(var(--nx-dur-reveal) + var(--nx-dur-draw)); }

/* cards rise by 2 px on hover (the individual translate property, so the entry reveal is not disturbed) and carry a soft pointer light */
.nx-card { transition: border-color var(--nx-dur-base) var(--nx-ease-soft), translate var(--nx-dur-base) var(--nx-ease-out); }
.nx-card:hover { translate: 0 -2px; background-image: radial-gradient(calc(var(--nx-space-12) * 5) circle at var(--nx-px, -999px) var(--nx-py, -999px), color-mix(in srgb, var(--nx-luminous) 9%, transparent), transparent 70%); }

/* a short luminous line under each section heading grows once as the heading enters */
.nx-h2::after { content: ""; display: block; width: var(--nx-space-12); height: var(--nx-line-glow); margin-top: var(--nx-space-4); background: var(--nx-luminous); transform-origin: left center; animation: nx-line-grow var(--nx-dur-reveal) var(--nx-ease-out) both; animation-delay: var(--nx-dur-base); }
@supports (animation-timeline: view()) {
  .nx-h2::after { animation-timeline: view(); animation-range: entry 20% entry 70%; animation-delay: 0s; }
  .nx-timeline::before { transform-origin: top; animation: nx-line-grow-y var(--nx-dur-draw) var(--nx-ease-linear) both; animation-timeline: view(); animation-range: entry 10% cover 60%; }
  .nx-timeline__item { animation: nx-reveal var(--nx-dur-reveal) var(--nx-ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .nx-timeline__item::before { animation: nx-ic-pop var(--nx-dur-base) var(--nx-ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}

/* entrances from a side: cards, timeline steps and questions fly in 28 px from alternating sides, fade up from a darker tone, staggered by their index within the block */
.nx-cards > .nx-card, .nx-timeline__item, .nx-faq__item { --nx-from: -28px; animation: nx-reveal-side var(--nx-dur-reveal) var(--nx-ease-out) both; animation-delay: calc(var(--nx-i, 0) * var(--nx-stagger)); }
.nx-cards > .nx-card:nth-child(even), .nx-timeline__item:nth-child(even), .nx-faq__item:nth-child(even) { --nx-from: 28px; }
@supports (animation-timeline: view()) {
  .nx-cards > .nx-card, .nx-timeline__item, .nx-faq__item { animation-timeline: view(); animation-delay: 0s; animation-range: entry calc(var(--nx-i, 0) * 6%) entry calc(55% + var(--nx-i, 0) * 6%); }
}

/* smooth anchor jumps, only when motion is welcome */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* motion off: the new pieces too, each in its final form (::details-content has its own switch above) */
@media (prefers-reduced-motion: reduce) {
  .nx-header--page .nx-glow-line, .nx-curve__line, .nx-curve__ring, .nx-curve__dot, .nx-cards > .nx-card, .nx-faq__item, .nx-h2::after, .nx-timeline::before, .nx-timeline__item, .nx-timeline__item::before,
  .nx-langmenu__list, .nx-theme-btn__ic, .nx-card, .nx-footer__soc, .nx-footer__link { animation: none !important; transition: none !important; }
  .nx-card:hover, .nx-footer__soc:hover, .nx-footer--site .nx-footer__link:hover { translate: none; }
  .nx-card:hover { background-image: none; }
  .nx-faq__item::details-content { transition: none; }
}