/* NEXUM-CTR-Client landing page.
   Brand tokens come from the Aton assets in frontend/src/assets (logo blue #004f91, orange #f9981d,
   tints #b7d3f0 / #f1f9fe) and the app's status colors in frontend/src/styles.scss. Every color
   below is a token on :root — no raw hex outside this block. */

:root {
  --blue: #004f91;
  --blue-bright: #1a7fd1;
  --blue-tint: #b7d3f0;
  --blue-wash: #f1f9fe;
  --orange: #f9981d;
  --orange-deep: #c2710a;
  --navy: #0b1f33;
  --navy-2: #12304d;
  --slate-900: #1e293b;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --white: #ffffff;
  --good: #16a34a;
  --good-bg: #f0fdf4;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --bad: #b3261e;
  --bad-bg: #fef2f2;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgb(11 31 51 / 6%), 0 8px 24px rgb(11 31 51 / 8%);
  --gutter: clamp(16px, 5vw, 40px);
  --max: 1120px;
  --nav-h: 64px;
  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  hyphens: auto;
  overflow-wrap: break-word;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(64px, 9vw, 112px) 0;
}

.section--tint {
  background: var(--blue-wash);
}

.section--dark {
  background: var(--navy);
  color: var(--white);
}

/* Registered mark after NEXUM: small and raised without pushing the line box apart. */
.reg {
  font-size: 0.55em;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 0.04em;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}

.section--dark .eyebrow {
  color: var(--orange);
}

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.section-lead {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 19px;
  color: var(--slate-600);
}

.section--dark .section-lead {
  color: var(--blue-tint);
}

.section-head {
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible,
.nav a:focus-visible {
  outline: 3px solid var(--blue-tint);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--orange);
  color: var(--navy);
}

.btn--primary:hover {
  background: var(--white);
}

.btn--ghost {
  border-color: rgb(255 255 255 / 40%);
  color: var(--white);
}

.btn--ghost:hover {
  border-color: var(--white);
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-h);
  background: rgb(11 31 51 / 92%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  color: var(--white);
}

.nav .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand img {
  height: 30px;
  width: auto;
}

.brand span {
  white-space: nowrap;
}

.brand em {
  font-style: normal;
  font-weight: 400;
  color: var(--blue-tint);
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
}

.nav ul a {
  white-space: nowrap;
  text-decoration: none;
  color: var(--blue-tint);
  transition: color 0.15s ease;
}

.nav ul a:hover {
  color: var(--white);
}

/* Language switcher: lives in the nav (desktop) and the footer (every width). */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lang a {
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--blue-tint);
}

.lang a:hover {
  color: var(--white);
}

.lang a[aria-current='true'] {
  background: rgb(255 255 255 / 14%);
  color: var(--white);
}

.nav ul .lang a {
  color: var(--blue-tint);
}

.nav ul .lang a[aria-current='true'] {
  color: var(--white);
}

.footer-side {
  display: grid;
  gap: 12px;
  justify-items: start;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy) url('assets/aton-mexico-gradient-background.svg') center / cover no-repeat;
  color: var(--white);
  padding: clamp(56px, 9vw, 120px) 0 clamp(64px, 9vw, 120px);
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.hero h1 mark {
  background: none;
  color: var(--orange);
}

/* Keep a hyphenated product name from wrapping mid-hyphen (a hyphen is a natural break point
   otherwise, which reads as a stray trailing "-" at the line's end). Not scoped to the hero --
   reused anywhere a NEXUM product name appears in running text. */
.brand-name {
  white-space: nowrap;
}

.hero-lead {
  margin-top: 22px;
  max-width: 52ch;
  font-size: 19px;
  color: var(--blue-tint);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--blue-tint);
}

/* generic "app window" used by every mockup */

.window {
  background: var(--white);
  color: var(--slate-900);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--slate-200);
}

.hero .window {
  box-shadow: 0 24px 60px rgb(0 0 0 / 40%);
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--slate-900);
  color: var(--slate-200);
  font-size: 13px;
  font-weight: 600;
}

.window-bar .dots {
  display: flex;
  gap: 5px;
  margin-right: 6px;
}

.window-bar .dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--slate-500);
}

.window-bar .live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--good-bg);
}

.window-bar .live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgb(22 163 74 / 60%);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 8px rgb(22 163 74 / 0%);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(22 163 74 / 0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .window-bar .live::before {
    animation: none;
  }
}

.rows {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  font-size: 15px;
  border-bottom: 1px solid var(--slate-100);
}

.rows li:last-child {
  border-bottom: 0;
}

.rows .id {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--slate-600);
}

.rows .kind {
  font-weight: 600;
  min-width: 68px;
}

.rows .chip {
  margin-left: auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--slate-100);
  color: var(--slate-600);
}

.chip--good {
  background: var(--good-bg);
  color: var(--good);
}

.chip--warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.chip--bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.chip--info {
  background: var(--blue-wash);
  color: var(--blue);
}

.window-foot {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--slate-500);
  background: var(--slate-100);
}

/* ---------- problem ---------- */

.problem {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.pain-list {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.pain {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}

.pain .badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bad-bg);
  color: var(--bad);
}

.pain h3 {
  font-size: 18px;
  margin-bottom: 2px;
}

.pain p {
  color: var(--slate-600);
  font-size: 16px;
}

.tree {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
}

.tree-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 20px;
}

.node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-200);
  background: var(--white);
  font-weight: 600;
}

.node .step {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-wash);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.node--parent {
  border-color: var(--blue);
}

.tree-level {
  margin-left: 22px;
  padding-left: 22px;
  border-left: 2px solid var(--blue-tint);
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.tree-note {
  margin-top: 20px;
  font-size: 15px;
  color: var(--slate-600);
}

/* ---------- where it sits ---------- */

/* Follows #problem, which is also white, so the section's own top padding would double the gap.
   Without that padding a nav jump would land the eyebrow flush under the header, so the anchor
   scroll stops a little short of it instead. */
#where {
  padding-top: 0;
  scroll-margin-top: clamp(24px, 6vw, 64px);
}

/* Always visible: animation plays by default for everyone (see sysmap-motion.js), and this is the
   deliberate way to pause it, not a fallback reserved for a reduced-motion browser. */
.sys-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 16px;
  border: 1px solid var(--blue-tint);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.sys-motion-toggle:hover {
  border-color: var(--blue);
}

.sys-motion-toggle[aria-pressed='true'] {
  background: var(--blue-wash);
}

.sys-motion-toggle .icon {
  width: 16px;
  height: 16px;
}

.sys-motion-toggle[hidden] {
  display: none;
}

/* Hub-and-spoke map: three line cards fan in to the client, one arrow out to VW. The two connector
   SVGs are drawn in a 100 x 344 box, and 344 = 3 rows + 2 gaps below, so keep --row/--gap in sync
   with the viewBox height. On desktop the hub and VW cards sit at the vertical middle (--mid) so
   the arrowheads line up with the middle line's row; under 1020px everything stacks. */
.sysmap {
  --row: 104px;
  --gap: 16px;
  --stack: calc(var(--row) * 3 + var(--gap) * 2);
  --mid: calc(var(--stack) / 2);
  --client-h: 96px;
  --browser-h: 68px;
  --web-h: calc(var(--mid) - var(--client-h) / 2 - var(--browser-h));
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(64px, 0.55fr) minmax(190px, 1fr) minmax(96px, 0.6fr) minmax(130px, 0.8fr);
  align-items: stretch;
  padding: clamp(20px, 3vw, 32px);
  background: var(--blue-wash);
  border: 1px solid var(--blue-tint);
  border-radius: var(--radius);
}

.sys-lines {
  display: grid;
  grid-template-rows: repeat(3, var(--row));
  gap: var(--gap);
}

.sys-line {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.sys-line:nth-child(2) {
  --d: 0.8s;
}

.sys-line:nth-child(3) {
  --d: 1.6s;
}

.sys-line-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.sys-line-flow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sys-scan {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
}

.sys-scan .icon {
  width: 19px;
  height: 19px;
}

.sys-scan::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--orange);
  opacity: 0;
  animation: sys-pulse 2.4s ease-out infinite;
  animation-delay: var(--d, 0s);
}

/* Staggers the second scanner's pulse in a two-scanner line. The two .sys-scan elements are no
   longer direct siblings of each other (each is wrapped in its own .sys-scan-wrap for the P-Key
   label below it), so this targets the wrapper's adjacency instead. */
.sys-scan-wrap + .sys-scan-wrap .sys-scan::after {
  animation-delay: calc(var(--d, 0s) + 1.2s);
}

.sys-scan-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sys-pkey {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--orange-deep);
  white-space: nowrap;
}

@keyframes sys-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  60%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Scanner -> line database: a short dashed run that moves toward the database. */
.sys-hop {
  flex: 1 1 16px;
  min-width: 14px;
  height: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 4px, transparent 4px 12px);
  background-size: 12px 4px;
  animation: sys-hop 0.9s linear infinite;
}

@keyframes sys-hop {
  to {
    background-position-x: 12px;
  }
}

@keyframes sys-drop {
  to {
    background-position-y: 12px;
  }
}

.sys-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--blue-wash);
  color: var(--blue);
}

.sys-node {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
}

.sys-node small,
.sys-text small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--slate-500);
}

.sys-conn {
  position: relative;
}

.sys-conn > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sys-track {
  fill: none;
  stroke: var(--blue-tint);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.sys-flow {
  fill: none;
  stroke: var(--orange);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0.1 16;
  vector-effect: non-scaling-stroke;
  animation: sys-flow 1s linear infinite;
}

@keyframes sys-flow {
  to {
    stroke-dashoffset: -16.1;
  }
}

.sys-conn::after {
  content: '';
  position: absolute;
  right: -1px;
  top: calc(var(--mid) - 7px);
  border-left: 10px solid var(--blue);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.sys-cap {
  position: absolute;
  left: 50%;
  top: var(--mid);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--blue-tint);
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.sys-cap .icon {
  width: 14px;
  height: 14px;
}

.sys-sub {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mid) + 18px);
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: center;
  color: var(--slate-500);
}

.sys-hub,
.sys-vw {
  align-self: start;
}

/* The VW card and the client card share the middle row; the client's own stack starts at the top of
   the map and reaches that row through the browser card and its link (--web-h fills the difference). */
.sys-vw {
  margin-top: calc(var(--mid) - var(--client-h) / 2);
}

.sys-hub {
  display: flex;
  flex-direction: column;
}

.sys-client,
.sys-vw {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--client-h);
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  line-height: 1.25;
  box-shadow: var(--shadow);
}

.sys-client {
  background: var(--blue);
  color: var(--white);
}

.sys-client .sys-ico {
  background: var(--white);
}

.sys-vw {
  background: var(--white);
  border: 2px solid var(--orange);
}

.sys-vw .sys-ico {
  background: var(--orange);
  color: var(--navy);
}

.sys-link {
  align-self: center;
  width: 2px;
  height: 24px;
  background: var(--blue);
}

/* The management UI: a mini browser window on top of the client, linked both ways (requests down,
   answers up). --web-h = middle row - half the client card - the browser card, so the client stays
   level with the arrow into it. */
.sys-browser {
  height: var(--browser-h);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.sys-browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 10px;
  background: var(--slate-900);
  color: var(--slate-200);
  font-size: 12px;
  font-weight: 600;
}

.sys-browser-bar i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: -3px;
  border-radius: 50%;
  background: var(--slate-500);
}

.sys-browser-bar i:last-of-type {
  margin-right: 3px;
}

.sys-browser-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sys-browser-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 22px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--slate-100);
}

.sys-browser-rows li:last-child {
  border-bottom: 0;
}

.sys-browser-rows .chip {
  padding: 1px 8px;
  font-size: 11px;
}

.sys-web {
  position: relative;
  height: var(--web-h);
}

.sys-web::before,
.sys-web::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-size: 2px 12px;
  animation: sys-drop 0.9s linear infinite;
}

.sys-web::before {
  left: calc(50% - 4px);
  background-image: repeating-linear-gradient(180deg, var(--orange) 0 4px, transparent 4px 12px);
}

.sys-web::after {
  left: calc(50% + 2px);
  background-image: repeating-linear-gradient(180deg, var(--blue) 0 4px, transparent 4px 12px);
  animation-direction: reverse;
}

.sys-tip {
  position: absolute;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.sys-tip--down {
  bottom: 0;
  left: calc(50% - 7px);
  border-top: 6px solid var(--orange);
}

.sys-tip--up {
  top: 0;
  left: calc(50% - 1px);
  border-bottom: 6px solid var(--blue);
}

/* The caption and the tech label flank the two-way line instead of covering it. */
.sys-web .sys-cap {
  left: auto;
  right: calc(50% + 12px);
  top: 50%;
  transform: translateY(-50%);
}

.sys-web .sys-sub {
  left: calc(50% + 12px);
  right: auto;
  top: 50%;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  transform: translateY(-50%);
}

.sys-db {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.25;
}

.sys-db small {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--slate-500);
}

.sys-note {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  color: var(--slate-600);
}

.sys-note .icon {
  width: 26px;
  height: 26px;
  color: var(--blue);
}

/* .motion-diagram marks every animated diagram on the page -- .sysmap (the hub) and each
   acquisition-section .chain-line -- so one Play/Pause control (sysmap-motion.js) covers all of
   them together. Animation plays by default for everyone, including a visitor whose browser asks
   for reduced motion -- .motion-off (added only by that control, a deliberate user choice, not a
   silent default) is the one thing that stops it. */
.motion-diagram.motion-off .sys-scan::after,
.motion-diagram.motion-off .sys-hop,
.motion-diagram.motion-off .sys-flow,
.motion-diagram.motion-off .sys-web::before,
.motion-diagram.motion-off .sys-web::after {
  animation: none;
}

/* ---------- data acquisition (Direct / MasterPLC / MasterPC tabs) ---------- */

/* Visually hidden, but present and focusable -- for the fieldset's own legend, screen-reader-only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Follows #where, also white -- same doubled-gap reasoning as #where's own comment above. */
#acquisition {
  padding-top: 0;
}

/* A plain HTML radiogroup, not a scripted ARIA tablist: three real radio inputs (visually hidden
   but focusable/keyboard-navigable as a native group), their labels styled as pill tabs, and one
   panel per option shown via a ":checked ~ sibling" selector. No JavaScript, unlike the motion
   toggle above -- this matches how the rest of the page (zero script until that button) works. */
.acq-tabs {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
  min-width: 0;
}

.acq-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.acq-tab-list {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--slate-100);
  border-radius: 999px;
}

.acq-tab-label {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-600);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.acq-tab-label:hover {
  color: var(--blue);
}

#acqTabA:checked ~ .acq-tab-list label[for='acqTabA'],
#acqTabB:checked ~ .acq-tab-list label[for='acqTabB'],
#acqTabC:checked ~ .acq-tab-list label[for='acqTabC'] {
  background: var(--white);
  color: var(--blue);
  box-shadow: var(--shadow);
}

#acqTabA:focus-visible ~ .acq-tab-list label[for='acqTabA'],
#acqTabB:focus-visible ~ .acq-tab-list label[for='acqTabB'],
#acqTabC:focus-visible ~ .acq-tab-list label[for='acqTabC'] {
  outline: 3px solid var(--blue-tint);
  outline-offset: 2px;
}

.acq-panel {
  display: none;
}

#acqTabA:checked ~ .acq-panel-a,
#acqTabB:checked ~ .acq-panel-b,
#acqTabC:checked ~ .acq-panel-c {
  display: block;
}

.acq-subtitle {
  margin-bottom: 14px;
  font-weight: 700;
  color: var(--slate-900);
}

.acq-caption {
  margin-top: 16px;
  font-size: 15px;
  color: var(--slate-600);
}

/* ---- chain diagram: a simple left-to-right flow, drawn as the same "Line 1" card from the
   .sysmap diagram above (same colors, same .sys-scan/.sys-hop/.sys-node/.sys-ico, same animation)
   so it reads as that card's own detail, zoomed in -- not a new, unrelated diagram type. Only the
   outer card and the two "this node is different" variants below are new; everything else is
   reused verbatim. ---- */

.chain-line {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.chain-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Tab (a)'s "Your integration" node: deliberately NOT styled like the real, known nodes (PLC,
   Executer, a database) -- dashed and muted says "unspecified / could be anything," same visual
   grammar as .chain-node--side below for the same reason. */
.sys-ico--unknown {
  background: var(--slate-100);
  color: var(--slate-500);
  border: 1.5px dashed var(--slate-400);
}

.sys-node--unknown {
  color: var(--slate-600);
  font-style: italic;
}

/* MasterPC's PLC note: related to the flow above but deliberately not part of it -- the dashed
   divider and the dashed, muted node say "secondary, off the main data path," while the short
   vertical tick (.chain-branch-link) keeps it from reading as fully detached, per the ask to make
   the relationship implicit. It's centered on the card rather than aimed at Executer's exact
   pixel position (flex-sized content makes that fragile), which lands close enough since Executer
   is reliably the widest, most central item in this row. Gray/static, not the orange animated
   .sys-hop -- this is a readiness signal, not scan data, and should read as a different kind of
   connection. */
.chain-branch {
  position: relative;
  margin-top: 4px;
  padding-top: 22px;
  display: flex;
  justify-content: center;
  border-top: 1px dashed var(--blue-tint);
}

.chain-branch-link {
  position: absolute;
  top: -1px;
  left: 50%;
  width: 2px;
  height: 22px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--slate-400) 0 3px, transparent 3px 6px);
}

.chain-node--side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-600);
  background: var(--white);
  border: 1px dashed var(--slate-200);
}

.sys-ico--side {
  width: 24px;
  height: 24px;
  background: var(--slate-100);
  color: var(--slate-500);
}

.chain-node--side small {
  display: block;
  font-weight: 400;
  color: var(--slate-500);
  font-size: 11.5px;
}

/* "what"/"where" in the MasterPLC/MasterPC subtitles, and the real NEXUM term behind each
   (P-Key, F-Key). First tried as a title-tooltip on .term alone -- dropped it: invisible on touch
   (no hover at all), easy to miss even on desktop (a dotted underline is a weak "there's more
   here" signal), and inconsistently exposed to screen readers. Always-visible text has none of
   those problems, so the term now just sits in the sentence instead of hiding behind a hover. */
.term {
  font-style: italic;
}

/* Just the parens and their spacing -- the term itself is a <code> pill now (page-wide convention,
   see that rule), sized normally against .acq-subtitle's own text instead of a second, smaller
   mono size fighting it. */
.term-note {
  color: var(--slate-500);
}

/* Same icon-badge + text DNA as .pain/.guarantee (Challenge/Safety sections) -- a rounded-square
   badge, not a chip/pill -- just single-line and unheaded, scaled down for a compact tab panel
   rather than those sections' own icon+h3+p cards. */
.verify-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.verify-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
}

.verify-list .badge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--good-bg);
  color: var(--good);
}

.verify-list li span:last-child {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--slate-900);
}

/* Page-wide: literal application/VW-CTR terms (VW01064, Modulo 43, part type, P-Key, ...) get a
   code-style pill within running text, same convention a markdown renderer uses for inline code --
   sets them apart as identifiers, not just emphasized words. Not used inside headings, where a
   font-family switch reads as a mistake rather than a deliberate term callout. */
code {
  font-family: var(--mono);
  font-size: 0.93em;
  font-weight: 700;
  color: var(--slate-900);
  background: var(--slate-100);
  padding: 1px 5px;
  border-radius: 4px;
}

.acq-note {
  margin-top: 22px;
  padding: 16px 20px;
  background: var(--blue-wash);
  border: 1px solid var(--blue-tint);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  color: var(--slate-600);
}

.acq-note .icon {
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: 2px;
  color: var(--blue);
}

/* Plain inline, not flex -- this sits inside a sentence and has to reflow like normal text.
   inline-flex was tried first and wrapped wrong: its "Learn more about " text ran onto its own
   line while the brand name and arrow held together on the next, instead of the whole thing
   flowing word by word like the rest of the paragraph. */
.acq-learn {
  display: inline;
  margin-left: 6px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.acq-learn:hover {
  text-decoration: underline;
}

.acq-learn .icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
}

@media (max-width: 640px) {
  .chain-main {
    flex-direction: column;
    align-items: flex-start;
  }

  /* .sys-hop is built horizontal (a short dashed bar between two row items) -- in the stacked
     column layout it has to turn into a short vertical drop instead, same reorientation .sysmap's
     own mobile fallback already does for .sys-conn (reusing that same sys-drop keyframe). 17px
     centers it under a .sys-scan/.sys-ico icon -- both are 34px wide. */
  .chain-main .sys-hop {
    width: 4px;
    height: 20px;
    margin-left: 17px;
    background: repeating-linear-gradient(180deg, var(--orange) 0 4px, transparent 4px 12px);
    background-size: 4px 12px;
    animation: sys-drop 0.9s linear infinite;
  }
}

/* ---------- how it works ---------- */

.pipeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  counter-reset: stage;
}

.stage {
  position: relative;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 20px 16px 20px;
  box-shadow: var(--shadow);
}

.stage:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 38px;
  right: -14px;
  width: 14px;
  height: 2px;
  background: var(--blue-tint);
}

.stage .ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue);
  color: var(--white);
  margin-bottom: 14px;
}

.stage--vw .ico {
  background: var(--orange);
  color: var(--navy);
}

.stage .num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.stage h3 {
  font-size: 17px;
  margin: 2px 0 6px;
}

.stage p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--slate-600);
}

/* ---------- features ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card .mock {
  padding: 18px;
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
  min-height: 196px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.card .body {
  padding: 22px 22px 26px;
}

.card h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.card p {
  font-size: 15.5px;
  color: var(--slate-600);
}

.mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}

.mini .id {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--slate-600);
}

.mini .chip {
  margin-left: auto;
}

.mini .arrow {
  color: var(--blue);
}

.mini b {
  font-weight: 600;
}

.mini--ok .icon {
  color: var(--good);
  width: 18px;
  height: 18px;
}

.mini--fail .icon {
  color: var(--bad);
  width: 18px;
  height: 18px;
}

.meter {
  height: 8px;
  border-radius: 999px;
  background: var(--slate-200);
  overflow: hidden;
  flex: 1;
}

.meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
}

.toggle {
  margin-left: auto;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--good);
  position: relative;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
}

.toggle--off {
  background: var(--slate-500);
}

.toggle--off::after {
  right: auto;
  left: 2px;
}

/* ---------- safety ---------- */

.gate {
  list-style: none;
  margin: 0 0 clamp(36px, 5vw, 56px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.gate li {
  position: relative;
  padding: 18px 14px;
  border-radius: var(--radius);
  background: var(--navy-2);
  border: 1px solid rgb(255 255 255 / 10%);
  text-align: center;
}

.gate li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  height: 2px;
  background: var(--blue-bright);
}

.gate .icon {
  margin: 0 auto 8px;
  color: var(--orange);
  width: 26px;
  height: 26px;
}

.gate b {
  display: block;
  font-size: 16px;
}

.gate span {
  font-size: 13.5px;
  color: var(--blue-tint);
}

.gate li.is-final {
  border-color: var(--good);
  background: rgb(22 163 74 / 12%);
}

.guarantees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
}

.guarantee {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}

.guarantee .badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgb(249 152 29 / 14%);
  color: var(--orange);
}

.guarantee h3 {
  font-size: 17px;
  margin-bottom: 4px;
}

.guarantee p {
  font-size: 15px;
  color: var(--blue-tint);
  line-height: 1.55;
}

/* ---------- operations ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tile {
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow);
}

.tile .icon {
  width: 30px;
  height: 30px;
  color: var(--blue);
  margin-bottom: 14px;
}

.tile h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.tile p {
  font-size: 15px;
  color: var(--slate-600);
}

/* ---------- revisions ---------- */

.revisions {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.actions-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.actions-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--slate-600);
  font-size: 16px;
}

.actions-list .icon {
  color: var(--good);
  margin-top: 3px;
  width: 20px;
  height: 20px;
}

.actions-list b {
  color: var(--slate-900);
}

.timeline {
  position: relative;
  padding: 26px 24px 26px 34px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 43px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: var(--blue-tint);
}

.rev {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 34px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.rev::before {
  content: '';
  position: absolute;
  left: -6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue-tint);
}

.rev b {
  font-size: 16px;
}

.rev small {
  color: var(--slate-500);
  font-size: 13.5px;
}

.rev .chip {
  margin-left: auto;
}

.rev--active {
  border-color: var(--good);
  background: var(--good-bg);
}

.rev--active::before {
  border-color: var(--good);
  background: var(--good);
}

/* ---------- contact ---------- */

.contact {
  text-align: center;
  background: var(--navy) url('assets/aton-mexico-gradient-background.svg') center / cover no-repeat;
  color: var(--white);
}

.contact .section-title,
.contact .section-lead {
  margin-left: auto;
  margin-right: auto;
}

.contact .hero-actions {
  justify-content: center;
}

.footer {
  background: var(--navy);
  color: var(--blue-tint);
  font-size: 14px;
  padding: 36px 0;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.footer-logo {
  display: inline-block;
  border-radius: 6px;
  transition: opacity 0.15s ease;
}

.footer-logo:hover {
  opacity: 0.8;
}

.footer-logo:focus-visible {
  outline: 3px solid var(--blue-tint);
  outline-offset: 4px;
}

.footer img {
  height: 84px;
  width: auto;
}

.footer p {
  max-width: 62ch;
}

/* Legal/contact block (Impressum-style: registered name, address, Geschäftsführer, tax IDs) --
   its own row below the logo/disclaimer row, separated by a divider. Two columns wide enough to
   sit side by side; stacks on narrow screens via .wrap's own flex-wrap. */
.footer-legal {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 10%);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  font-size: 13px;
  line-height: 1.7;
}

.footer-legal-name {
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.footer-legal-label {
  color: var(--white);
  font-weight: 600;
}

.footer-legal address {
  font-style: normal;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
}

.footer-legal a:hover {
  text-decoration: underline;
}

/* ---------- responsive ---------- */

/* Seven section links plus the language switcher only fit beside the full brand name on a wide
   viewport (Spanish and German are the longest), so the nav goes compact earlier than the layout does. */
@media (max-width: 1140px) {
  .nav ul {
    gap: 16px;
    font-size: 14px;
  }

  .brand em {
    display: none;
  }
}

@media (max-width: 1020px) {
  .pipeline {
    grid-template-columns: repeat(3, 1fr);
  }

  .stage:nth-child(3n)::after {
    display: none;
  }

  .cards,
  .guarantees {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* The section links no longer fit beside the brand and the language switcher (German labels are the
   longest), so they collapse; the page is one scroll anyway. */
@media (max-width: 960px) {
  .nav ul li:not(.lang) {
    display: none;
  }
}

/* The five-column map no longer fits: stack lines -> client -> VW, with vertical connectors. */
@media (max-width: 1020px) {
  .sysmap {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .sys-lines,
  .sys-hub,
  .sys-vw {
    width: min(100%, 380px);
  }

  .sys-lines {
    grid-template-rows: none;
  }

  .sys-line {
    padding: 14px 16px;
  }

  .sys-hub,
  .sys-vw {
    margin-top: 0;
  }

  .sys-conn {
    --mid: 44px;
    width: 100%;
    height: 96px;
  }

  .sys-conn > svg {
    display: none;
  }

  /* The vertical connector runs behind the caption, so it needs its own backdrop here. */
  .sys-sub {
    left: 50%;
    right: auto;
    padding: 0 8px;
    background: var(--blue-wash);
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .sys-conn::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 8px;
    width: 2px;
    margin-left: -1px;
    background: repeating-linear-gradient(180deg, var(--orange) 0 4px, transparent 4px 12px);
    background-size: 2px 12px;
    animation: sys-drop 0.9s linear infinite;
  }

  .sys-conn::after {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 0;
    margin-left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--blue);
    border-bottom: 0;
  }

  .motion-diagram.motion-off .sys-conn::before {
    animation: none;
  }
}

@media (max-width: 820px) {
  .hero .wrap,
  .problem,
  .revisions {
    grid-template-columns: minmax(0, 1fr);
  }

  .gate {
    grid-template-columns: 1fr;
  }

  .gate li:not(:last-child)::after {
    top: auto;
    bottom: -12px;
    right: 50%;
    width: 2px;
    height: 12px;
  }

}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .pipeline,
  .cards,
  .guarantees,
  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .timeline {
    padding: 20px 14px 20px 22px;
  }

  .timeline::before {
    left: 31px;
  }

  .rev {
    padding: 10px 10px 10px 26px;
    gap: 8px;
  }

  .rev small {
    display: none;
  }

  .rows li {
    gap: 8px;
    padding: 11px 12px;
  }

  .rows .kind {
    min-width: 56px;
  }

  .stage::after {
    display: none;
  }

  .nav ul .lang {
    display: none;
  }

  .nav .wrap {
    gap: 12px;
  }

  .brand {
    gap: 8px;
    font-size: 15px;
  }
}