/* AgentMotion landing page. Design language: precision machinery. Graphite panels, blueprint grid lines,
   bracketed frames, status lights, one signal yellow and the blue "spine" of light that joins every node.
   Everything is scoped under .amx, so the page can live inside the AgentMotion app without clashing. */

@font-face { font-family: "AMX Inter"; src: url("../fonts/Inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "AMX Inter"; src: url("../fonts/Inter-latin-ext-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

body.amx-page { margin: 0; background: #060812; }
/* inside the AgentMotion app, whose #landingPage rules set a colour, overflow and background decorations */
#landingPage.amx { color: var(--text-2); overflow-x: clip; overflow-y: visible; }
#landingPage.amx::before, #landingPage.amx::after { content: none; }
/* legal links appear once their pages exist (EDIT in site/page.html) */
.amx [data-todo] { display: none; }

.amx {
  --bg: #060812;
  --bg-2: #090d1b;
  --panel: #0e1426;
  --panel-2: #141b31;
  --edge: #1b2440;
  --edge-2: #29345a;
  --text: #f1f5f8;
  --text-2: #c3cdd6;
  --muted: #8d9aa6;
  --dim: #647280;
  --paper: #f2f3f0;
  --ink: #11161c;
  --accent: #4d7cff;
  --accent-2: #7d9bff;
  --accent-rgb: 77, 124, 255;
  --violet: #aa57f9;
  --violet-rgb: 170, 87, 249;
  --ice: #b0f6fc;
  --brand-grad: linear-gradient(100deg, #aa57f9 0%, #6a4cff 32%, #3d6bff 60%, #59b6ff 82%, #b0f6fc 100%);
  --blue: #3443fd;
  --blue-2: #4d7cff;
  --cyan: #7fdcff;
  --green: #40d27a;
  --red: #d84a3f;
  --amber: #ffb547;
  --font: "AMX Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --spring: cubic-bezier(.2, .9, .25, 1);
  --wrap: 1200px;
  --nav-h: 64px;
  --r: 14px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 30px 60px -34px rgba(0, 0, 0, .85);
  --grid: rgba(120, 140, 255, .075);
  position: relative;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
/* a critically damped spring (no bounce): quick start, long soft landing */
@supports (transition-timing-function: linear(0, 1)) {
  .amx { --spring: linear(0, .031 3%, .103 6%, .228 10%, .359 14%, .510 19%, .657 25%, .782 32%, .874 40%, .939 50%, .975 62%, .993 78%, 1); }
}
.amx *, .amx *::before, .amx *::after { box-sizing: border-box; }
/* resets at class weight (:where), so every component rule below wins over them */
.amx :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.amx :where(ul, ol) { padding: 0; list-style: none; }
.amx :where(img, video) { max-width: 100%; display: block; }
.amx :where(a) { color: inherit; text-decoration: none; }
.amx :where(button) { font: inherit; color: inherit; }
.amx :where(h1, h2, h3) { color: var(--text); font-weight: 720; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; }
.amx :where(h2) { font-size: clamp(2rem, 1.25rem + 2.3vw, 3.2rem); }
.amx :where(h3) { font-size: 1.14rem; letter-spacing: -0.015em; line-height: 1.3; }
.amx .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.amx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.amx :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.amx-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: var(--ink); font-weight: 700; }
.amx-skip:focus { top: 12px; }
.amx-wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }
.amx-wrap--stage { --wrap: 1300px; }

/* ------------------------------------------------------------------ shared pieces */
.amx-mono, .amx-eyebrow, .amx-kicker, .amx-num { font-family: var(--mono); }
.amx-mono { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.amx-eyebrow--pill { padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid var(--edge-2); background: rgba(14, 20, 38, .7); color: var(--text-2); }
.amx-num { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(var(--accent-rgb), .45); color: var(--accent); font-size: .72rem; letter-spacing: .06em; }
.amx-led { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16), 0 0 12px rgba(var(--violet-rgb), .6) }
.amx-led--ok { background: var(--green); box-shadow: 0 0 0 3px rgba(64, 210, 122, .14), 0 0 12px rgba(64, 210, 122, .7); }
.amx-tile { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; border: 1px solid var(--edge-2); background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: var(--cyan); }
.amx-tile--yellow { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
.amx-sub { margin-top: 16px; font-size: 1.08rem; line-height: 1.65; color: var(--text-2); max-width: 680px; }
.amx-p { margin-top: 16px; font-size: 1.04rem; line-height: 1.7; color: var(--text-2); }
.amx-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 60px); }
.amx-head h2 { margin-top: 14px; }
.amx-head--center { margin-inline: auto; text-align: center; }
.amx-head--center .amx-sub { margin-inline: auto; }
.amx-gridbg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); }
.amx-gridbg--soft { -webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 50%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 75% 50%, #000 10%, transparent 70%); }

/* buttons */
.amx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent; font-weight: 650; font-size: .96rem; letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.amx-btn .ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.amx-btn:hover .ic { transform: translateX(3px); }
.amx-btn--primary { background: var(--brand-grad); background-size: 160% 100%; background-position: 100% 0; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset, 0 12px 34px -12px rgba(var(--violet-rgb), .6), 0 8px 24px -12px rgba(var(--accent-rgb), .7); transition: filter .25s, box-shadow .3s, transform .2s }
.amx-btn--primary:hover { background: var(--brand-grad); background-size: 160% 100%; background-position: 100% 0; filter: brightness(1.08) saturate(1.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 14px 40px -12px rgba(var(--violet-rgb), .75), 0 10px 30px -12px rgba(var(--accent-rgb), .85) }
.amx-btn--ghost { background: rgba(255, 255, 255, .02); border-color: var(--edge-2); color: var(--text); }
.amx-btn--ghost:hover { border-color: #3c4b58; background: rgba(255, 255, 255, .05); }
.amx-btn--lg { height: 52px; padding: 0 24px; font-size: 1rem; }
.amx-btn--sm { height: 38px; padding: 0 14px; font-size: .88rem; border-radius: 9px; }

/* bracketed frame: a panel with yellow corner marks, like a viewfinder */
.amx-frame { position: relative; border-radius: 12px; border: 1px solid var(--edge-2); background: #0b1022; box-shadow: var(--shadow); }
.amx-frame::after { content: ""; position: absolute; inset: -5px; pointer-events: none; border-radius: 14px; --c: rgba(var(--accent-rgb), .9);
  background: linear-gradient(var(--c), var(--c)) top left / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 16px no-repeat; }
.amx-frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 11px; background: #0e141a; }
.amx-card { position: relative; padding: 24px; border-radius: var(--r); border: 1px solid var(--edge); background: linear-gradient(180deg, rgba(21, 30, 40, .72), rgba(14, 20, 38, .72)); box-shadow: var(--shadow); }
.amx-card h3 { margin-top: 14px; }
.amx-card p { margin-top: 8px; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.amx-ticks { display: grid; gap: 10px; margin-top: 18px; }
.amx-ticks li { position: relative; padding-left: 28px; font-size: .97rem; color: var(--text-2); }
.amx-ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 5px; background: rgba(64, 210, 122, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340d27a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; border: 1px solid rgba(64, 210, 122, .3); }

/* ------------------------------------------------------------------ navigation */
.amx-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: 10px; pointer-events: none; }
.amx-nav__bar { pointer-events: auto; width: min(1240px, calc(100% - 20px)); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; gap: 18px; padding: 0 12px 0 14px; border-radius: 14px; border: 1px solid var(--edge-2); background: rgba(10, 14, 19, .94); box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .9); }
.amx-brand { display: inline-flex; align-items: center; gap: 10px; }
.amx-brand img { width: 34px; height: 34px }
.amx-brand span { display: grid; line-height: 1.1; }
.amx-brand b { color: var(--text); font-weight: 750; font-size: .98rem; letter-spacing: -0.01em; }
.amx-brand small { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.amx-nav__links { display: flex; gap: 2px; margin-left: 14px; }
.amx-nav__links a { padding: 8px 12px; border-radius: 8px; font-size: .9rem; font-weight: 550; color: var(--text-2); transition: background .2s, color .2s; }
.amx-nav__links a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.amx-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.amx-nav__signin { height: 38px; padding: 0 12px; border: 0; background: none; font-weight: 600; font-size: .9rem; color: var(--text-2); cursor: pointer; border-radius: 8px; }
.amx-nav__signin:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.amx-nav__toggle { display: none; position: relative; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--edge-2); background: none; cursor: pointer; }
.amx-nav__toggle span { position: absolute; left: 12px; right: 12px; height: 1.6px; background: var(--text); transition: transform .3s var(--ease), top .3s var(--ease); }
.amx-nav__toggle span:first-child { top: 16px; }
.amx-nav__toggle span:last-child { top: 24px; }
.amx-nav__toggle[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
.amx-nav__toggle[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }
.amx-nav__menu { pointer-events: auto; width: calc(100% - 20px); margin: 8px auto 0; padding: 12px; border-radius: 14px; border: 1px solid var(--edge-2); background: #0b1022; display: grid; gap: 2px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); }
.amx-nav__menu[hidden] { display: none; }
.amx-nav__menu a { padding: 12px 14px; border-radius: 9px; font-weight: 600; color: var(--text); }
.amx-nav__menu a:hover { background: rgba(255, 255, 255, .05); }
.amx-nav__menu .amx-btn { margin-top: 8px; }

/* ------------------------------------------------------------------ reveal + first-screen appear */
/* reveal: when reached, a block rises into place on a soft spring (site.js sets rv; blocks already on screen at
   load stay as painted) */
.amx.rv .reveal:not(.is-in) { opacity: 0; translate: 0 72px; scale: .96; filter: blur(8px); }
.amx.rv .reveal.is-in { transition: opacity .9s var(--spring), translate 1.15s var(--spring), scale 1.15s var(--spring), filter .8s var(--ease); }

/* appear: the first screen builds itself from the first paint (pure CSS, it never waits for the script) */
.amx .appear { animation: amxAppear 1s var(--spring) both; animation-delay: var(--d, 0s); }
@keyframes amxAppear { from { opacity: 0; translate: 0 var(--rise, 24px); } }
.amx .w { display: inline-block; animation: amxWord .9s var(--spring) both; animation-delay: calc(var(--w0, 0s) + var(--i, 0) * var(--ws, 60ms)); }
@keyframes amxWord { from { opacity: 0; filter: blur(var(--blur, 12px)); translate: 0 .3em; } }

/* ------------------------------------------------------------------ hero */
.amx-hero { position: relative; padding: calc(var(--nav-h) + 56px) 0 64px; text-align: center; overflow: hidden; }
.amx-hero::before { content: ""; position: absolute; left: 50%; top: -20%; width: 1100px; height: 700px; margin-left: -550px; pointer-events: none; background: radial-gradient(closest-side, rgba(21, 87, 214, .22), transparent 70%); }
.amx-hero__text { position: relative; max-width: 1100px; }
.amx-hero h1 { margin-top: 20px; font-size: clamp(2.6rem, 1.3rem + 4.1vw, 4.7rem); line-height: 1.03; letter-spacing: -0.045em; font-weight: 760; --w0: .08s; --ws: 70ms; }
.amx-hero h1 > span { display: block; }
.amx .mark { position: relative; display: inline-block; color: var(--accent); white-space: nowrap }
.amx .mark__line { position: absolute; left: 0; right: 0; bottom: -.06em; width: 100%; height: .16em; overflow: visible; }
.amx .mark__line path { fill: none; stroke: var(--cyan); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 310; stroke-dashoffset: 310; filter: drop-shadow(0 0 6px rgba(127, 220, 255, .7)); animation: amxDraw 1s var(--ease) both; animation-delay: calc(var(--w0, 0s) + var(--i, 0) * var(--ws, 60ms) + .45s); }
@keyframes amxDraw { to { stroke-dashoffset: 0; } }
.amx-hero__lead { max-width: 790px; margin: 22px auto 0; font-size: clamp(1.04rem, .98rem + .3vw, 1.18rem); line-height: 1.66; color: var(--text-2); --w0: .5s; --ws: 11ms; --blur: 7px; }
.amx-hero__lead .w { animation-duration: .7s; }
.amx-hero__ctas { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; --d: .85s; }
.amx-proof { margin: 64px auto 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); --d: 1s; }
.amx-proof > div { padding: 16px 18px; text-align: left; }
.amx-proof > div + div { border-left: 1px solid var(--edge); }
.amx-proof dt { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.amx-proof dd { margin-top: 2px; font-size: .84rem; line-height: 1.45; color: var(--muted); }

/* the centrepiece: a big bracketed screen on the spine, with status tags pinned around it */
.amx-stage { position: relative; margin: 44px auto 0; padding: 0 56px; --d: .6s; --rise: 110px; animation-name: amxMachine; animation-duration: 1.2s; }
@keyframes amxMachine { from { opacity: 0; translate: 0 var(--rise); scale: .97; } }
.amx-stage::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--blue-2) 15%, var(--cyan) 50%, var(--blue-2) 85%, transparent); box-shadow: 0 0 18px rgba(47, 124, 246, .8), 0 0 40px rgba(127, 220, 255, .35); transform-origin: 50% 50%; animation: amxSpine 1.4s var(--ease) 1.5s both; }
@keyframes amxSpine { from { transform: scaleX(0); opacity: 0; } }
.amx-frame--hero { padding: 8px; background: linear-gradient(180deg, #121a22, #0b1022); }
.amx-frame--hero video { border-radius: 8px; }
.amx-tag { position: absolute; z-index: 4; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 10px; min-width: 236px; padding: 12px 16px 12px 14px; text-align: left; border-radius: 10px; border: 1px solid var(--edge-2); background: rgba(11, 16, 21, .92); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .9); animation: amxTag .7s var(--pop) both; }
.amx-tag .amx-led { grid-row: span 2; }
.amx-tag b { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.amx-tag small { font-size: .84rem; color: var(--muted); }
.amx-tag--1 { left: 0; top: 12%; --td: .5s; }
.amx-tag--2 { right: 0; top: 40%; --td: .9s; }
.amx-tag--3 { left: 5%; bottom: 8%; --td: 1.3s; }
/* the screen and its tags come alive when scrolled into view (site.js: data-inview adds is-in) */
.amx.js [data-inview] .amx-tag { animation: none; opacity: 0; }
.amx.js [data-inview].is-in .amx-tag { opacity: 1; animation: amxTag .7s var(--pop) both; animation-delay: var(--td, 0s); }
.amx.js [data-inview]::after { animation: none; transform: scaleX(0); opacity: 0; }
.amx.js [data-inview].is-in::after { animation: amxSpine 1.4s var(--ease) .2s both; transform: none; opacity: 1; }
/* scroll-linked: the screen starts tilted back and a little smaller, and straightens as it scrolls into place
   (site.js sets --p from 0 to 1) */
.amx [data-scrollfx] .amx-frame--hero { transform: perspective(1600px) rotateX(calc((1 - var(--p, 1)) * 22deg)) scale(calc(.88 + var(--p, 1) * .12)); transform-origin: 50% 0; will-change: transform; }
@keyframes amxTag { from { opacity: 0; translate: 0 -14px; scale: 1.05; } }
.amx-caption { margin-top: 26px; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); --d: 1.3s; }

/* ------------------------------------------------------------------ sections */
.amx-s { position: relative; --pad: clamp(88px, 9vw, 132px); padding: var(--pad) 0; }
.amx-s--deep { background: var(--bg-2); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
/* the light sections (blueprint paper): the same components switch to ink on paper */
.amx-s--light { --text: #11161c; --text-2: #34404b; --muted: #5b6670; --dim: #7c8791; --edge: #d9dedb; --edge-2: #c7cfcb; --panel: #ffffff; --panel-2: #f7f8f6; --grid: rgba(21, 87, 214, .07); --shadow: 0 1px 0 #fff inset, 0 24px 50px -32px rgba(17, 22, 28, .35); background: var(--paper); color: var(--text-2); }
.amx-s--light .amx-card { background: #fff; }
.amx-s--light .amx-num { color: #9a7a06; border-color: rgba(154, 122, 6, .4); }
.amx-s--light .amx-tile { background: #fff; color: var(--blue); }
.amx-s--light .amx-frame { background: #e9ece9; }
/* sections away from the screen are neither laid out nor painted until they come near; estimates are each
   section's content height without padding; in-page links render everything first (cv-all) */
.amx .amx-main > .amx-s { content-visibility: auto; contain-intrinsic-size: auto var(--est, 800px); }
.amx.cv-all .amx-main > .amx-s { content-visibility: visible; }
.amx #am-what { --est: 1580px; } .amx #am-how { --est: 980px; } .amx #am-nodes { --est: 1430px; } .amx #am-security { --est: 1110px; }
.amx #am-scale { --est: 770px; } .amx #am-partners { --est: 580px; } .amx #am-case { --est: 630px; } .amx #am-faq { --est: 580px; } .amx #am-start { --est: 400px; }
@media (max-width: 1100px) { .amx #am-what { --est: 1430px; } .amx #am-how { --est: 1100px; } .amx #am-nodes { --est: 1330px; } }
@media (max-width: 900px) {
  .amx #am-what { --est: 3070px; } .amx #am-how { --est: 1810px; } .amx #am-nodes { --est: 2140px; } .amx #am-security { --est: 1750px; }
  .amx #am-scale { --est: 1560px; } .amx #am-partners { --est: 780px; } .amx #am-case { --est: 900px; } .amx #am-faq { --est: 780px; } .amx #am-start { --est: 370px; }
}
@media (max-width: 640px) {
  .amx #am-what { --est: 2590px; } .amx #am-how { --est: 1920px; } .amx #am-nodes { --est: 2900px; } .amx #am-security { --est: 2200px; }
  .amx #am-scale { --est: 1370px; } .amx #am-partners { --est: 1020px; } .amx #am-case { --est: 1460px; } .amx #am-faq { --est: 880px; } .amx #am-start { --est: 530px; }
}

/* two jobs, one system */
.amx-two { display: grid; grid-template-columns: 1fr 88px 1fr; align-items: stretch; }
.amx-two__card { padding: 30px; }
.amx-two__card h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.amx-kicker { display: flex; align-items: center; gap: 12px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amx-two__link { position: relative; align-self: center; height: 2px; margin: 0 -1px; background: var(--edge-2); overflow: hidden; }
.amx-two__link span { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.amx-two.is-in .amx-two__link span { animation: amxPulse 2.2s linear infinite; }
@keyframes amxPulse { to { left: 100%; } }
.amx-two__label { margin-top: 26px; text-align: center; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.amx-mini { position: relative; margin-top: 26px; height: 54px; border-radius: 10px; border: 1px dashed var(--edge-2); overflow: hidden; }
.amx-mini--line i { position: absolute; top: 15px; width: 26px; height: 24px; border-radius: 5px; background: #d9dee2; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset; left: calc(10% + var(--k) * 20%); }
.amx-mini--line i:nth-child(1) { --k: 0; } .amx-mini--line i:nth-child(2) { --k: 1; } .amx-mini--line i:nth-child(3) { --k: 2; } .amx-mini--line i:nth-child(4) { --k: 3; }
.amx-mini--line i::after { content: ""; position: absolute; right: 4px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.amx-mini--line b { position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--edge-2); }
.amx-two.is-in .amx-mini--line i { animation: amxBelt 3.2s var(--ease) infinite; animation-delay: calc(var(--k) * .12s); }
.amx-two.is-in .amx-mini--line i::after { animation: amxLedOk 3.2s steps(1) infinite; animation-delay: calc(var(--k) * .12s); }
@keyframes amxBelt { 0% { translate: 0 0; } 60%, 100% { translate: 60px 0; } }
@keyframes amxLedOk { 0%, 45% { background: var(--amber); } 46%, 100% { background: var(--green); box-shadow: 0 0 8px var(--green); } }
.amx-mini--spine::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, var(--blue-2), var(--cyan)); box-shadow: 0 0 10px rgba(47, 124, 246, .7); }
.amx-mini--spine i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--edge-2); left: calc(12% + var(--k) * 19%); }
.amx-mini--spine i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--dim); }
.amx-mini--spine i:nth-child(1) { --k: 0; } .amx-mini--spine i:nth-child(2) { --k: 1; } .amx-mini--spine i:nth-child(3) { --k: 2; } .amx-mini--spine i:nth-child(4) { --k: 3; } .amx-mini--spine i:nth-child(5) { --k: 4; }
.amx-two.is-in .amx-mini--spine i::after { animation: amxNodeOn .5s var(--ease) forwards; animation-delay: calc(.6s + var(--k) * .25s); }
@keyframes amxNodeOn { to { background: var(--green); box-shadow: 0 0 8px var(--green); } }

/* feature rows (clip + text) */
.amx-feature { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(48px, 6vw, 88px); align-items: center; }
.amx-feature--flip .amx-feature__media { order: 2; }
.amx-feature__text h2 { margin-top: 14px; }
.amx-media { position: relative; }
.amx-steps { margin-top: 26px; display: grid; gap: 2px; counter-reset: s; }
.amx-steps li { position: relative; display: grid; gap: 2px; padding: 12px 0 12px 54px; counter-increment: s; border-top: 1px solid var(--edge); }
.amx-steps li:last-child { border-bottom: 1px solid var(--edge); }
.amx-steps li::before { content: "0" counter(s); position: absolute; left: 0; top: 13px; width: 38px; height: 24px; display: grid; place-items: center; border-radius: 6px; font-family: var(--mono); font-size: .72rem; color: var(--text); border: 1px solid var(--edge-2); background: var(--panel-2); }
.amx-steps b { color: var(--text); font-weight: 650; font-size: 1rem; }
.amx-steps span { font-size: .93rem; color: var(--muted); }

/* overlay slip on a clip (the pilot package) */
.amx-slip { position: absolute; z-index: 4; right: -36px; bottom: -44px; width: min(58%, 300px); padding: 14px; border-radius: 12px; border: 1px solid #29345a; background: rgba(11, 16, 21, .95); color: #c3cdd6; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); opacity: 0; translate: 0 14px; transition: opacity .45s var(--ease), translate .55s var(--pop); }
.amx-slip.is-on { opacity: 1; translate: 0 0; }
.amx-slip__head { display: flex; align-items: center; gap: 10px; }
.amx-slip__head b { color: #f1f5f8; font-size: .95rem; }
.amx-chip { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .35); color: var(--accent); }
.amx-slip dl { margin-top: 10px; display: grid; gap: 5px; }
.amx-slip dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border-radius: 7px; background: rgba(255, 255, 255, .04); font-size: .8rem; }
.amx-slip dt { color: #f1f5f8; font-weight: 600; }
.amx-slip dd { font-family: var(--mono); font-size: .72rem; color: #8d9aa6; text-align: right; }
.amx-slip [data-t] { opacity: 0; translate: 0 6px; transition: opacity .35s var(--ease), translate .4s var(--pop); }
.amx-slip [data-t].is-on { opacity: 1; translate: 0 0; }
.amx-stamp { position: absolute; right: 12px; top: -14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; background: var(--green); color: #05150b; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 20px rgba(64, 210, 122, .55); }
.amx-stamp .ic { width: 14px; height: 14px; stroke-width: 3; }
.amx-slip .amx-stamp[data-t] { translate: 0 0; scale: 1.6; transition: opacity .15s linear, scale .3s var(--pop); }
.amx-slip .amx-stamp[data-t].is-on { scale: 1; }

/* HUD labels on the node clip */
.amx-hud__tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; border: 1px solid rgba(127, 220, 255, .35); background: rgba(8, 11, 15, .82); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #f1f5f8; opacity: 0; translate: 0 8px; transition: opacity .35s var(--ease), translate .45s var(--pop); }
.amx-hud__tag .amx-led { width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.amx-hud__tag.is-on { opacity: 1; translate: 0 0; }
.amx-hud__tag--1 { left: -18px; top: 14%; }
.amx-hud__tag--2 { right: -18px; top: 30%; }
.amx-hud__tag--3 { left: -18px; top: 56%; }
.amx-hud__tag--4 { right: -18px; bottom: 12%; }

/* backbone: text + the live sequence */
.amx-split { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(48px, 6vw, 88px); align-items: center; }
.amx-split__text h2 { margin-top: 14px; }
.amx-points { margin-top: 26px; display: grid; gap: 12px; }
.amx-points li { display: flex; align-items: center; gap: 14px; font-size: .98rem; color: var(--text-2); }
.amx-seq { padding: 24px; display: grid; gap: 14px; background: linear-gradient(180deg, #0f151c, #090d1b); }
.amx-seq__tag { position: absolute; right: 16px; top: -11px; padding: 2px 8px; border-radius: 5px; background: var(--bg); border: 1px solid var(--edge-2); font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amx-seq small { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amx-seq b { display: block; color: var(--text); font-weight: 650; font-size: .98rem; }
.amx-seq__req, .amx-seq__cc, .amx-seq__node, .amx-seq__done { position: relative; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--edge-2); background: rgba(255, 255, 255, .02); }
.amx-seq__req b { font-size: 1.06rem; }
.amx-seq__cc { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .05); }
.amx-seq__cc span { font-size: .84rem; color: var(--muted); }
.amx-seq__cc::before, .amx-seq__nodes::before { content: ""; position: absolute; left: 50%; top: -15px; width: 2px; height: 14px; background: var(--edge-2); }
.amx-seq__nodes { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.amx-seq__node b { font-size: .88rem; line-height: 1.35; }
.amx-seq__node em { margin-top: 8px; display: flex; align-items: center; gap: 7px; font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--green); }
.amx-seq__node em .amx-led { width: 6px; height: 6px; }
.amx-seq__done { border-color: rgba(64, 210, 122, .45); background: rgba(64, 210, 122, .06); }
.amx-seq__ok { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--green); }
.amx-seq__ok .ic { width: 14px; height: 14px; stroke-width: 3; }
.amx-lamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.amx-lamps li { position: relative; padding: 8px 6px 7px 20px; border-radius: 7px; border: 1px solid var(--edge); font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); transition: color .3s, border-color .3s; }
.amx-lamps li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--edge-2); transition: background .3s, box-shadow .3s; }
.amx-lamps li.is-on { color: var(--text); border-color: var(--edge-2); }
.amx-lamps li.is-on::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.amx-lamps li:last-child.is-on::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
/* before the sequence runs (script on), its parts wait; without the script everything shows */
.amx.js [data-seq] [data-t]:not(.is-on):not(li) { opacity: .16; }
.amx [data-seq] [data-t] { transition: opacity .45s var(--ease), border-color .45s, box-shadow .45s; }
.amx.js [data-seq] em[data-t]:not(.is-on), .amx.js [data-seq] .amx-seq__ok[data-t]:not(.is-on) { opacity: 0; }
.amx [data-seq] .amx-seq__node.is-on { border-color: rgba(127, 220, 255, .45); box-shadow: 0 0 0 1px rgba(127, 220, 255, .12) inset; }

/* nodes */
.amx-parts { margin-top: 26px; display: grid; gap: 14px; }
.amx-parts li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: start; }
.amx-parts .amx-tile { grid-row: span 2; }
.amx-parts b { color: var(--text); font-weight: 650; font-size: 1rem; }
.amx-parts b small { display: inline-block; margin-right: 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.amx-parts span { font-size: .92rem; color: var(--muted); }
.amx-principles { margin-top: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.amx-principles h3 { font-size: 1.02rem; }
.amx-models { margin-top: 16px; display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r); border: 1px solid rgba(var(--accent-rgb), .3); background: linear-gradient(90deg, rgba(var(--accent-rgb), .07), rgba(var(--accent-rgb), .01)); }
.amx-models b { color: var(--text); font-weight: 650; }
.amx-models p { margin-top: 4px; font-size: .95rem; color: var(--text-2); }

/* system library */
.amx-lib__tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--edge-2); background: var(--panel); }
.amx-lib__tabs button { height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: none; font-weight: 600; font-size: .9rem; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.amx-lib__tabs button:hover { color: var(--text); }
.amx-lib__tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.amx-lib__pane { margin-top: 22px; display: grid; grid-template-columns: .95fr 1.05fr; gap: 22px; align-items: stretch; }
.amx-lib__pane[hidden] { display: none; }
.amx-map { position: relative; min-height: 420px; border-radius: var(--r); border: 1px solid var(--edge); background: radial-gradient(circle at 50% 50%, rgba(21, 87, 214, .16), transparent 60%), var(--panel); overflow: hidden; }
.amx-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; }
.amx-map__center { position: absolute; z-index: 2; left: 50%; top: 50%; width: 46%; translate: -50% -50%; padding: 14px 16px; text-align: center; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), .55); background: #121a2e; box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .06), 0 20px 40px -20px #000; }
.amx-map__center small { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.amx-map__center b { display: block; margin-top: 4px; color: var(--text); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; }
.amx-map__center span { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.amx-map__nodes li { display: grid; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--edge-2); background: rgba(12, 17, 22, .95); line-height: 1.25; }
.amx-map__nodes b { color: var(--text); font-size: .82rem; font-weight: 650; }
.amx-map__nodes span { font-size: .7rem; color: var(--muted); }
/* without the script: the nodes simply sit in a grid under the centre card */
.amx-map:not(.is-laid) { display: grid; gap: 14px; padding: 18px; }
.amx-map:not(.is-laid) .amx-map__center { position: relative; left: auto; top: auto; width: auto; translate: none; }
.amx-map:not(.is-laid) .amx-map__nodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.amx-map.is-laid .amx-map__nodes li { position: absolute; z-index: 2; width: 30%; translate: -50% -50%; opacity: 0; scale: .9; transition: opacity .5s var(--ease), scale .5s var(--pop); transition-delay: calc(.1s + var(--k) * .08s); }
.amx-map.is-laid.is-in .amx-map__nodes li { opacity: 1; scale: 1; }
.amx-map__wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.amx-map__wires line { stroke: rgba(120, 165, 228, .38); stroke-width: 1.2; stroke-dasharray: 3 5; }
.amx-map.is-in .amx-map__wires line { animation: amxDash 1.2s linear infinite; }
.amx-map__wires circle { fill: var(--cyan); opacity: 0; }
.amx-map.is-in .amx-map__wires circle { opacity: 1; filter: drop-shadow(0 0 4px var(--cyan)); }
@keyframes amxDash { to { stroke-dashoffset: -16; } }
.amx-lib__shot { overflow: hidden; background: #0b1022; }
.amx-lib__shot img { width: 100%; height: auto; object-fit: cover; object-position: top left; border-radius: 11px 11px 0 0; aspect-ratio: 16 / 10; }
.amx-lib__shot figcaption { padding: 12px 16px; font-size: .84rem; color: var(--muted); border-top: 1px solid var(--edge); }

/* growth path */
.amx-path { position: relative; margin-top: clamp(56px, 7vw, 80px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.amx-path::before { content: ""; position: absolute; left: 10%; right: 10%; top: 11px; height: 2px; background: var(--edge-2); }
.amx-path::after { content: ""; position: absolute; left: 10%; right: 10%; top: 11px; height: 2px; background: linear-gradient(90deg, var(--blue-2), var(--cyan)); box-shadow: 0 0 10px rgba(47, 124, 246, .6); transform-origin: left; transform: scaleX(0); transition: transform 2s var(--ease) .2s; }
.amx-path.is-in::after { transform: scaleX(1); }
.amx-path li { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; }
.amx-path .amx-led { width: 24px; height: 24px; border: 2px solid var(--edge-2); background: var(--bg-2); box-shadow: none; transition: background .4s, box-shadow .4s, border-color .4s; transition-delay: calc(.35s + var(--i) * .38s); }
.amx-path.is-in .amx-led { border-color: var(--cyan); background: radial-gradient(circle, var(--cyan) 30%, #090d1b 36%); box-shadow: 0 0 14px rgba(127, 220, 255, .6); }
.amx-path li:last-child .amx-led { transition-delay: calc(.35s + var(--i) * .38s); }
.amx-path small { margin-top: 10px; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amx-path b { color: var(--text); font-size: 1.05rem; }
.amx-path span { font-size: .86rem; color: var(--muted); max-width: 180px; }

/* business case */
.amx-case { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
.amx-case__text h2 { margin-top: 14px; }
.amx-case__panel { padding: 28px; }
.amx-case__big { display: grid; gap: 2px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--edge); }
.amx-case__big b { font-size: clamp(3rem, 2rem + 3vw, 4.4rem); line-height: 1; font-weight: 780; letter-spacing: -0.05em; color: var(--text); }
.amx-case__big span { font-weight: 600; color: var(--text); }
.amx-case__big small { font-size: .88rem; color: var(--muted); }
.amx-bar { margin-top: 14px; display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 14px; font-size: .9rem; }
.amx-bar span { font-weight: 600; color: var(--text); }
.amx-bar i { position: relative; height: 14px; border-radius: 4px; background: var(--edge); overflow: hidden; }
.amx-bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #9aa6b1; transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease) .2s; }
.amx-bar--am i::after { background: linear-gradient(90deg, var(--blue), var(--blue-2)); transition-delay: .5s; }
.amx-case__panel.is-in .amx-bar i::after { transform: scaleX(var(--v)); }
.amx-bar b { font-family: var(--mono); font-size: .8rem; color: var(--text); min-width: 88px; text-align: right; }
.amx-note { margin-top: 16px; font-size: .82rem; color: var(--muted); }
.amx-trio { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* partners */
.amx-who__label { margin-top: clamp(56px, 7vw, 80px); }
.amx-who { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: w; }
.amx-who li { display: grid; gap: 6px; padding: 22px 20px; counter-increment: w; }
.amx-who li::after { content: "0" counter(w); position: absolute; right: 16px; top: 18px; font-family: var(--mono); font-size: .72rem; color: var(--dim); }
.amx-role { justify-self: start; padding: 3px 8px; border-radius: 5px; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.amx-role--agency { color: #ff8f86; background: rgba(216, 74, 63, .12); border: 1px solid rgba(216, 74, 63, .4); }
.amx-role--both { color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .35); }
.amx-role--am { color: var(--cyan); background: rgba(127, 220, 255, .1); border: 1px solid rgba(127, 220, 255, .35); }
.amx-who b { margin-top: 8px; color: var(--text); font-size: 1.05rem; }
.amx-who span { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.amx-keeps { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 20px; border-radius: var(--r); border: 1px solid var(--edge); background: rgba(255, 255, 255, .02); }
.amx-keeps > span { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.amx-keeps ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.amx-keeps li { position: relative; padding-left: 22px; font-weight: 600; color: var(--text); font-size: .94rem; }
.amx-keeps li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 4px; background: rgba(64, 210, 122, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340d27a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* where it runs + software */
.amx-runs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.amx-runs .amx-card { padding: 28px; }
.amx-runs small { display: block; margin-top: 18px; }
.amx-runs h3 { margin-top: 6px; font-size: 1.3rem; }
.amx-software { margin-top: 36px; text-align: center; }
.amx-software ul { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.amx-software li { padding: 8px 14px; border-radius: 9px; border: 1px solid var(--edge-2); background: var(--panel); font-family: var(--mono); font-size: .8rem; color: var(--text-2); }

/* faq */
.amx-faqwrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
.amx-faq { display: grid; gap: 8px; }
.amx-faq details { border-radius: 12px; border: 1px solid var(--edge); background: var(--panel); transition: border-color .2s; }
.amx-faq details[open] { border-color: var(--edge-2); }
.amx-faq summary { position: relative; list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; font-weight: 650; color: var(--text); }
.amx-faq summary::-webkit-details-marker { display: none; }
.amx-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--edge-2); font-family: var(--mono); color: var(--accent); transition: rotate .3s var(--ease); }
.amx-faq details[open] summary::after { rotate: 45deg; }
.amx-faq details p { padding: 0 20px 20px; color: var(--text-2); font-size: .97rem; }

/* closing call */
.amx-end { overflow: hidden; text-align: center; border-top: 1px solid var(--edge); }
.amx-end__inner { position: relative; max-width: 900px; }
.amx-end h2 { margin-top: 20px; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem); }
.amx-end .amx-sub { margin-inline: auto; }
.amx-end__spine { position: relative; margin: 72px auto 0; width: min(900px, 86%); height: 2px; background: linear-gradient(90deg, transparent, var(--blue-2) 15%, var(--cyan) 50%, var(--blue-2) 85%, transparent); box-shadow: 0 0 18px rgba(47, 124, 246, .8); }

/* footer */
.amx-foot { padding: 56px 0 40px; border-top: 1px solid var(--edge); background: var(--bg); }
.amx-foot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.amx-foot__brand p { margin-top: 12px; max-width: 360px; font-size: .92rem; color: var(--muted); }
.amx-foot__nav { display: flex; gap: 56px; }
.amx-foot__nav div { display: grid; gap: 8px; align-content: start; }
.amx-foot__nav b { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.amx-foot__nav a { font-size: .92rem; color: var(--text-2); }
.amx-foot__nav a:hover { color: var(--text); }
.amx-foot__fine { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--dim); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .amx-nav__links { display: none; }
  .amx-principles { grid-template-columns: repeat(2, 1fr); }
  .amx-who { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .amx-nav__signin, .amx-nav__actions > .amx-btn { display: none; }
  .amx-nav__toggle { display: block; }
  .amx-two { grid-template-columns: 1fr; gap: 0; }
  .amx-two__link { width: 2px; height: 48px; margin: 0 auto; }
  .amx-two__link span { left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--cyan), transparent); }
  @keyframes amxPulseV { to { top: 100%; } }
  .amx-two.is-in .amx-two__link span { animation-name: amxPulseV; }
  .amx-feature, .amx-split, .amx-case, .amx-faqwrap { grid-template-columns: 1fr; }
  .amx-feature--flip .amx-feature__media { order: 0; }
  .amx-lib__pane { grid-template-columns: 1fr; }
  .amx-path { grid-template-columns: 1fr; gap: 22px; justify-items: start; }
  .amx-path::before, .amx-path::after { left: 11px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
  .amx-path::after { transform: scaleY(0); transform-origin: top; }
  .amx-path.is-in::after { transform: scaleY(1); }
  .amx-path li { grid-template-columns: 24px 1fr; justify-items: start; text-align: left; column-gap: 16px; }
  .amx-path li .amx-led { grid-row: span 3; }
  .amx-path small { margin-top: 2px; }
  .amx-runs { grid-template-columns: 1fr; }
  .amx-stage { padding: 0 20px; }
  .amx-tag--1 { left: -6px; } .amx-tag--2 { right: -6px; }
}
@media (max-width: 640px) {
  .amx { font-size: 16px; }
  .amx-wrap { width: calc(100% - 32px); }
  .amx-hero { padding-top: calc(var(--nav-h) + 48px); }
  .amx-hero h1 { font-size: clamp(2.2rem, 1rem + 6.5vw, 3rem); }
  .amx-hero__ctas .amx-btn { flex: 1 1 100%; }
  .amx-proof { grid-template-columns: 1fr; }
  .amx-proof > div + div { border-left: 0; border-top: 1px solid var(--edge); }
  .amx-stage { padding: 0; margin-top: 40px; }
  .amx-tag { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin-top: 12px; min-width: 0; }
  .amx-tag--2 { margin-left: 14%; } .amx-tag--1, .amx-tag--3 { margin-right: 14%; }
  .amx-stage::after { bottom: -18px; }
  .amx-caption { margin-top: 36px; }
  .amx-slip { position: relative; right: auto; bottom: auto; width: auto; margin: -24px 12px 0; }
  .amx-hud__tag--1, .amx-hud__tag--3 { left: 8px; } .amx-hud__tag--2, .amx-hud__tag--4 { right: 8px; }
  .amx-seq__nodes { grid-template-columns: 1fr; }
  .amx-seq__nodes::before { display: none; }
  .amx-lamps { grid-template-columns: repeat(3, 1fr); }
  .amx-principles, .amx-trio, .amx-who { grid-template-columns: 1fr; }
  .amx-map { min-height: 520px; }
  .amx-map.is-laid .amx-map__nodes li { width: 42%; }
  .amx-map__center { width: 64%; }
  .amx-bar { grid-template-columns: 1fr auto; row-gap: 6px; }
  .amx-bar span { grid-column: 1 / -1; }
  .amx-foot__nav { gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .amx *, .amx *::before, .amx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .amx [data-scrollfx] .amx-frame--hero { transform: none !important; }
  .amx.rv .reveal, .amx .appear, .amx .w, .amx-tag, .amx-slip, .amx-slip [data-t], .amx-hud__tag, .amx [data-seq] [data-t] { opacity: 1 !important; translate: none !important; }
}

/* ================================================================== v2: concrete product + node concept */
.amx-led--warn { background: #ff9f43; box-shadow: 0 0 0 3px rgba(255, 159, 67, .16), 0 0 12px rgba(255, 159, 67, .75); }

/* a real screen in a browser frame, with pulsing incidents and numbered pins placed in % of the screenshot */
.amx-browser { padding: 0; overflow: hidden; background: #0b1022; }
.amx-browser__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--edge-2); background: #0f151c; font-size: .74rem; }
.amx-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3642; }
.amx-browser__bar i:first-child { background: #3a2a2a; }
.amx-browser__bar b { margin-left: 8px; font-family: var(--mono); font-weight: 600; letter-spacing: .06em; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amx-browser__bar em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.amx-shot { position: relative; background: #eef2ef; }
.amx-shot img { width: 100%; height: auto; }
.amx-frame--hero.amx-browser { padding: 0; }
.amx-ping { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(216, 74, 63, .9); box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); pointer-events: none; animation: amxAppear .4s var(--ease) 1.6s both; }
.amx-ping::before, .amx-ping::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(216, 74, 63, .75); animation: amxPing 2s var(--ease) 1.8s infinite both; }
.amx-ping::after { animation-delay: 2.8s; }
.amx-ping--2 { background: rgba(255, 159, 67, .95); animation-delay: 2s; }
.amx-ping--2::before, .amx-ping--2::after { border-color: rgba(255, 159, 67, .8); animation-delay: 2.2s; }
.amx-ping--2::after { animation-delay: 3.2s; }
@keyframes amxPing { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.amx-pin { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--mono); font-size: .76rem; font-weight: 800; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .28), 0 6px 14px -4px rgba(0, 0, 0, .6); }
.amx-tour__pane:not([hidden]) .amx-pin { animation: amxPinIn .5s var(--pop) both; }
.amx-tour__pane .amx-pin:nth-of-type(2) { animation-delay: .12s; } .amx-tour__pane .amx-pin:nth-of-type(3) { animation-delay: .24s; } .amx-tour__pane .amx-pin:nth-of-type(4) { animation-delay: .36s; }
@keyframes amxPinIn { from { scale: 0; opacity: 0; } }

/* product tour */
.amx-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--edge-2); background: var(--panel); }
.amx-tabs button { height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: none; font-weight: 600; font-size: .9rem; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.amx-tabs button:hover { color: var(--text); }
.amx-tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.amx-tour__pane { margin-top: 22px; display: grid; grid-template-columns: 1.45fr .55fr; gap: 28px; align-items: center; }
.amx-tour__pane[hidden] { display: none; }
.amx-tour__lead { font-size: 1.12rem; line-height: 1.55; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
.amx-legend { margin-top: 18px; display: grid; gap: 12px; counter-reset: lg; }
.amx-legend li { position: relative; padding-left: 38px; counter-increment: lg; font-size: .96rem; color: var(--text-2); line-height: 1.45; }
.amx-legend li::before { content: counter(lg); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--mono); font-size: .76rem; font-weight: 800; }
.amx-facts { margin-top: 44px; padding: 24px 26px; border-radius: var(--r); border: 1px solid var(--edge); background: rgba(255, 255, 255, .02); }
.amx-ticks--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; margin-top: 14px; }
.amx-facts .amx-note { margin-top: 16px; }

/* customise console (library system -> client system) */
.amx-custom { padding: 22px; border-radius: 16px; border: 1px solid var(--edge-2); background: #fff; box-shadow: var(--shadow); }
.amx-custom__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--edge); }
.amx-custom__head small { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amx-custom__head b { color: var(--text); font-size: 1.02rem; }
.amx-custom__head .ic { color: var(--blue); }
.amx-custom__rows { margin-top: 12px; display: grid; gap: 8px; }
.amx-custom__rows li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--edge); background: #f7f8f6; }
.amx-custom__name { font-weight: 650; color: var(--text); font-size: .95rem; }
.amx-custom__rows em { font-style: normal; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; justify-self: end; }
.amx-custom__rows .is-kept em { color: #2b6d44; background: rgba(64, 210, 122, .14); }
.amx-custom__rows .is-changed { grid-template-areas: "name tag" "from from" "to to"; }
.amx-custom__rows .is-changed .amx-custom__name { grid-area: name; }
.amx-custom__rows .is-changed em { grid-area: tag; color: #7a5a00; background: rgba(var(--accent-rgb), .22); }
.amx-custom__from { grid-area: from; font-size: .84rem; color: var(--muted); }
.amx-custom__to { grid-area: to; font-size: .88rem; font-weight: 600; color: var(--blue); }
.amx-custom__rows .is-changed { border-color: rgba(var(--accent-rgb), .55); background: #fffbea; }
/* animation: rows arrive one by one, then the customised ones switch from the library value to the client value */
.amx.js .amx-custom__rows li { opacity: 0; translate: 0 8px; transition: opacity .45s var(--ease), translate .5s var(--spring); transition-delay: calc(.15s + var(--k) * .12s); }
.amx.js .amx-custom.is-in .amx-custom__rows li { opacity: 1; translate: 0 0; }
.amx.js .amx-custom__to { opacity: 0; transition: opacity .4s var(--ease); transition-delay: calc(1.2s + var(--k) * .35s); }
.amx.js .amx-custom__from { transition: color .4s, text-decoration-color .4s; transition-delay: calc(1.2s + var(--k) * .35s); }
.amx.js .amx-custom.is-in .amx-custom__to { opacity: 1; }
.amx-custom.is-in .amx-custom__from { text-decoration: line-through; text-decoration-color: rgba(91, 102, 112, .6); }
.amx.js .amx-custom__rows .is-changed em { opacity: 0; transition: opacity .3s; transition-delay: calc(1.3s + var(--k) * .35s); }
.amx.js .amx-custom.is-in .amx-custom__rows .is-changed em { opacity: 1; }

/* the node concept: anatomy + the logistics suite as a node graph */
.amx-nodes { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: stretch; }
.amx-anatomy, .amx-graph { padding: 24px; border-radius: var(--r); border: 1px solid var(--edge); background: linear-gradient(180deg, rgba(21, 30, 40, .6), rgba(14, 20, 38, .6)); }
.amx-anatomy__box { position: relative; margin-top: 16px; padding: 30px 16px 16px; border-radius: 14px; border: 1.5px dashed rgba(127, 220, 255, .5); background: rgba(127, 220, 255, .03); display: grid; gap: 10px; }
.amx-anatomy__label { position: absolute; left: 14px; top: -12px; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 6px; background: var(--bg); border: 1px solid rgba(127, 220, 255, .5); font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.amx-anatomy__label .ic { width: 14px; height: 14px; }
.amx-anatomy__layer { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--edge-2); background: rgba(12, 17, 22, .9); }
.amx-anatomy__layer .amx-tile { grid-row: span 2; width: 34px; height: 34px; }
.amx-anatomy__layer b { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.amx-anatomy__layer span:last-child { font-size: .9rem; color: var(--text-2); line-height: 1.4; }
.amx.js .amx-anatomy__layer { opacity: .25; transition: opacity .5s var(--ease), border-color .5s; transition-delay: calc(.2s + var(--k) * .3s); }
.amx.js .amx-anatomy.is-in .amx-anatomy__layer { opacity: 1; border-color: rgba(127, 220, 255, .35); }
.amx-anatomy__io { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.amx-anatomy__io .ic { width: 16px; height: 16px; }
.amx-graph__hint { text-transform: none; letter-spacing: 0; font-family: var(--font); color: var(--dim); }
.amx-graph__stage { position: relative; margin-top: 16px; aspect-ratio: 600 / 440; border-radius: 12px; border: 1px solid var(--edge); background: radial-gradient(circle at 50% 50%, rgba(21, 87, 214, .18), transparent 62%), var(--bg); }
.amx-graph__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.amx-graph__wires path { fill: none; stroke: rgba(120, 165, 228, .45); stroke-width: 1.4; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.amx-graph.is-in .amx-graph__wires path { animation: amxDash 1.2s linear infinite; }
.amx-graph__cc { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; justify-items: center; gap: 2px; width: 30%; padding: 12px 10px; text-align: center; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), .6); background: #121a2e; box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .07); }
.amx-graph__cc .ic { color: var(--accent); }
.amx-graph__cc b { color: var(--text); font-size: .92rem; }
.amx-graph__cc small { font-size: .72rem; color: var(--muted); }
.amx-gnode { position: absolute; z-index: 3; left: var(--x); top: var(--y); translate: -50% -50%; width: 28%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; padding: 9px 11px; text-align: left; border-radius: 10px; border: 1px solid var(--edge-2); background: rgba(12, 17, 22, .96); color: var(--text); cursor: pointer; transition: border-color .2s, box-shadow .2s, scale .25s var(--pop); }
.amx-gnode .amx-led { width: 7px; height: 7px; }
.amx-gnode b { font-size: .84rem; font-weight: 650; }
.amx-gnode span { grid-column: 1 / -1; max-height: 0; overflow: hidden; font-size: .74rem; line-height: 1.4; color: var(--text-2); transition: max-height .3s var(--ease); }
.amx-gnode:hover, .amx-gnode:focus-visible, .amx-gnode.is-open { z-index: 5; border-color: rgba(127, 220, 255, .6); box-shadow: 0 0 0 4px rgba(127, 220, 255, .1), 0 20px 40px -18px #000; scale: 1.06; }
.amx-gnode:hover span, .amx-gnode:focus-visible span, .amx-gnode.is-open span { max-height: 90px; }
.amx.js .amx-graph .amx-gnode { opacity: 0; transition: opacity .5s var(--ease), border-color .2s, box-shadow .2s, scale .25s var(--pop); transition-delay: calc(.2s + var(--k) * .1s), 0s, 0s, 0s; }
.amx.js .amx-graph.is-in .amx-gnode { opacity: 1; }

/* why nodes are the backbone */
.amx-split--top { align-items: start; }
.amx-reasons { display: grid; gap: 16px; }
.amx-reasons li, .amx-pts li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: start; }
.amx-reasons .amx-tile, .amx-pts .amx-tile { grid-row: span 2; }
.amx-reasons b, .amx-pts b { color: var(--text); font-weight: 650; font-size: 1.02rem; }
.amx-reasons span:last-child, .amx-pts span:last-child { font-size: .93rem; color: var(--muted); line-height: 1.5; }

/* private & safe: the client's infrastructure as a boundary */
.amx-private { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: start; }
.amx-deploy { display: grid; grid-template-columns: 1fr 200px; gap: 16px; align-items: center; }
.amx-deploy__zone { position: relative; padding: 34px 18px 18px; border-radius: 16px; border: 1.5px dashed rgba(64, 210, 122, .55); background: rgba(64, 210, 122, .03); }
.amx-deploy__label { position: absolute; left: 16px; top: -13px; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 6px; background: var(--bg); border: 1px solid rgba(64, 210, 122, .55); font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.amx-deploy__label small { text-transform: none; letter-spacing: 0; color: var(--muted); font-family: var(--font); }
.amx-deploy__label .ic { width: 14px; height: 14px; }
.amx-deploy__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.amx-deploy__cc { grid-column: 1 / -1; padding: 10px; text-align: center; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), .55); background: #121a2e; color: var(--text); font-size: .9rem; }
.amx-deploy__node { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px; border-radius: 10px; border: 1px solid var(--edge-2); background: rgba(12, 17, 22, .95); font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--text); }
.amx-deploy__node .ic { width: 14px; height: 14px; color: var(--green); }
.amx-deploy__sys, .amx-deploy__log { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 10px; border: 1px dashed var(--edge-2); font-size: .82rem; color: var(--text-2); }
.amx-deploy__sys { grid-column: span 2; }
.amx-deploy__sys .ic, .amx-deploy__log .ic { width: 16px; height: 16px; color: var(--cyan); }
.amx-deploy__outside { display: grid; gap: 14px; }
.amx-deploy__ext { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--edge-2); background: var(--panel); }
.amx-deploy__ext::before { content: ""; position: absolute; right: 100%; top: 50%; width: 16px; height: 2px; background: repeating-linear-gradient(90deg, var(--dim) 0 4px, transparent 4px 7px); }
.amx-deploy__ext .ic { color: var(--muted); }
.amx-deploy__ext b { color: var(--text); font-size: .9rem; }
.amx-deploy__ext small { font-size: .78rem; color: var(--muted); }
.amx-deploy__ext em { margin-top: 4px; font-style: normal; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.amx.js .amx-deploy__node { opacity: .2; transition: opacity .45s var(--ease); transition-delay: calc(.3s + var(--k) * .12s); }
.amx.js .amx-deploy.is-in .amx-deploy__node { opacity: 1; }
.amx-pts { display: grid; gap: 16px; }
.amx-why { margin-top: 36px; display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r); border: 1px solid rgba(var(--accent-rgb), .3); background: linear-gradient(90deg, rgba(var(--accent-rgb), .07), rgba(var(--accent-rgb), .01)); }
.amx-why b { color: var(--text); font-weight: 650; }
.amx-why ul { margin-top: 8px; display: grid; gap: 6px; }
.amx-why li { position: relative; padding-left: 18px; font-size: .95rem; color: var(--text-2); }
.amx-why li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.amx-path__label { margin-top: clamp(48px, 6vw, 72px); }
.amx-path__label + .amx-path { margin-top: 22px; }

@media (max-width: 1100px) {
  .amx-ticks--grid { grid-template-columns: repeat(2, 1fr); }
  .amx-tour__pane { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .amx-nodes, .amx-private { grid-template-columns: 1fr; }
  .amx-deploy { grid-template-columns: 1fr; }
  .amx-deploy__outside { grid-template-columns: 1fr 1fr; }
  .amx-deploy__ext::before { display: none; }
}
@media (max-width: 640px) {
  .amx-browser__bar em { display: none; }
  .amx-ticks--grid { grid-template-columns: 1fr; }
  .amx-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: .68rem; }
  .amx-graph__stage { aspect-ratio: auto; display: grid; gap: 8px; padding: 12px; }
  .amx-graph__wires { display: none; }
  .amx-graph__cc, .amx-gnode { position: relative; left: auto; top: auto; translate: none; width: auto; }
  .amx-gnode span { max-height: none; }
  .amx-gnode:hover, .amx-gnode.is-open { scale: 1; }
  .amx-deploy__grid { grid-template-columns: repeat(2, 1fr); }
  .amx-deploy__sys { grid-column: 1 / -1; }
  .amx-deploy__outside { grid-template-columns: 1fr; }
  .amx-custom__head { grid-template-columns: 1fr; }
  .amx-custom__head .ic { rotate: 90deg; }
}
@media (prefers-reduced-motion: reduce) {
  .amx .amx-custom__rows li, .amx .amx-custom__to, .amx .amx-anatomy__layer, .amx .amx-gnode, .amx .amx-deploy__node, .amx .amx-custom__rows em { opacity: 1 !important; translate: none !important; }
}

/* ================================================================== v3: four services, security layers, scale stages */
.amx-four { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.amx-four__card { padding: 16px 16px 24px; }
.amx-four__card .amx-kicker, .amx-four__card h3, .amx-four__card > p, .amx-four__card .amx-ticks { margin-left: 8px; margin-right: 8px; }
.amx-four__media { margin-bottom: 20px; }
.amx-four__card .amx-kicker { margin-top: 4px; }
.amx-four__card h3 { margin-top: 12px; font-size: 1.36rem; letter-spacing: -0.025em; }
.amx-four__card > p { margin-top: 8px; font-size: .97rem; color: var(--text-2); }
.amx-four__card .amx-frame::after { inset: -4px; }

.amx-path--six { margin-top: 8px; grid-template-columns: repeat(6, 1fr); }
.amx-path--six small { margin-top: 10px; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; color: var(--muted); }
.amx-s--light .amx-path .amx-led { background: #fff; border-color: #c7cfcb; }
.amx-s--light .amx-path.is-in .amx-led { border-color: var(--blue-2); background: radial-gradient(circle, var(--blue-2) 30%, #fff 36%); box-shadow: 0 0 12px rgba(47, 124, 246, .45); }
.amx-custom--wide { margin-top: clamp(48px, 6vw, 72px); }
.amx-custom--wide .amx-custom__rows { grid-template-columns: repeat(2, 1fr); }
.amx-custom--wide .amx-mono { margin-bottom: 14px; }

.amx-gnode--new { border-style: dashed; }
.amx-nodes__why { margin-top: clamp(48px, 6vw, 72px); }
.amx-nodes__why .amx-mono { margin-bottom: 18px; }
.amx-reasons--tight { margin-top: 24px; gap: 14px; }

.amx-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.amx-options .amx-card small { display: block; margin-top: 16px; }
.amx-options .amx-card h3 { margin-top: 4px; font-size: 1.2rem; }
.amx-secgrid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
.amx-layers .amx-mono { margin-bottom: 14px; }
.amx-layer { position: relative; padding: 36px 18px 18px; border-radius: 16px; border: 1.5px solid var(--edge-2); background: rgba(255, 255, 255, .015); }
.amx-layer > span { position: absolute; left: 16px; top: 10px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.amx-layer > span b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .62rem; color: #fff; background: var(--layer-c, var(--dim)); }
.amx-layer--1 { --layer-c: var(--green); border-color: rgba(64, 210, 122, .5); border-style: dashed; }
.amx-layer--2 { --layer-c: var(--cyan); border-color: rgba(127, 220, 255, .45); }
.amx-layer--3 { --layer-c: var(--accent); border-color: rgba(var(--accent-rgb), .45); }
.amx-layer--4 { --layer-c: #9db8ff; border-color: rgba(157, 184, 255, .45); }
.amx-layer--5 { --layer-c: #ff9f43; border-color: rgba(255, 159, 67, .45); min-height: 64px; background: rgba(255, 159, 67, .05); }
.amx.js .amx-layers .amx-layer { transition: border-color .5s var(--ease), box-shadow .5s var(--ease), opacity .5s var(--ease); }
.amx.js .amx-layers:not(.is-in) .amx-layer { opacity: .35; }
.amx-layers.is-in .amx-layer--1 { transition-delay: .1s; } .amx-layers.is-in .amx-layer--2 { transition-delay: .35s; } .amx-layers.is-in .amx-layer--3 { transition-delay: .6s; }
.amx-layers.is-in .amx-layer--4 { transition-delay: .85s; } .amx-layers.is-in .amx-layer--5 { transition-delay: 1.1s; }
.amx-seclist { display: grid; gap: 14px; counter-reset: sl; }
.amx-seclist li { position: relative; display: grid; gap: 2px; padding-left: 38px; counter-increment: sl; }
.amx-seclist li::before { content: counter(sl); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--mono); font-size: .72rem; font-weight: 800; color: #fff; background: var(--c, var(--dim)); }
.amx-seclist li:nth-child(1) { --c: var(--green); } .amx-seclist li:nth-child(2) { --c: var(--cyan); } .amx-seclist li:nth-child(3) { --c: var(--accent); }
.amx-seclist li:nth-child(4) { --c: #9db8ff; } .amx-seclist li:nth-child(5) { --c: #ff9f43; }
.amx-seclist b { color: var(--text); font-weight: 650; }
.amx-seclist span { font-size: .93rem; color: var(--muted); }

.amx-stages { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.amx-stage-card { display: grid; gap: 4px; padding: 20px; border-radius: var(--r); border: 1px solid var(--edge); background: linear-gradient(180deg, rgba(21, 30, 40, .6), rgba(14, 20, 38, .6)); }
.amx-stage-card b { margin-top: 14px; color: var(--text); font-size: 1.05rem; }
.amx-stage-card small { font-size: .88rem; color: var(--muted); }
.amx-dots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; min-height: 58px; align-content: start; }
.amx-dots i { aspect-ratio: 1; border-radius: 4px; border: 1px solid rgba(127, 220, 255, .45); background: rgba(127, 220, 255, .12); }
.amx.js .amx-stages .amx-dots i { opacity: 0; scale: .6; transition: opacity .35s var(--ease), scale .4s var(--pop); }
.amx.js .amx-stages.is-in .amx-dots i { opacity: 1; scale: 1; }
.amx-stages.is-in .amx-stage-card:nth-child(1) .amx-dots i { transition-delay: .2s; }
.amx-stages.is-in .amx-stage-card:nth-child(2) .amx-dots i { transition-delay: .7s; }
.amx-stages.is-in .amx-stage-card:nth-child(3) .amx-dots i { transition-delay: 1.2s; }
.amx-stages .amx-dots i:nth-child(n+4) { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .12); }
.amx-stages .amx-dots i:nth-child(n+8) { border-color: rgba(64, 210, 122, .45); background: rgba(64, 210, 122, .12); }

.amx-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.amx-duo .amx-card { padding: 30px; }
.amx-duo h3 { margin-top: 14px; font-size: 1.4rem; letter-spacing: -0.025em; }
.amx-keeps--inline { margin-top: 22px; padding: 14px 16px; }

@media (max-width: 1100px) {
  .amx-path--six { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .amx-path--six::before, .amx-path--six::after { display: none; }
}
@media (max-width: 900px) {
  .amx-four, .amx-options, .amx-secgrid, .amx-duo, .amx-stages { grid-template-columns: 1fr; }
  .amx-custom--wide .amx-custom__rows { grid-template-columns: 1fr; }
  .amx-path--six { grid-template-columns: 1fr; }
  .amx-path--six::before, .amx-path--six::after { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .amx .amx-layers .amx-layer, .amx .amx-stages .amx-dots i { opacity: 1 !important; scale: 1 !important; }
}

/* ================================================================== for agencies (2026-10-02)
   The section an agency lands on from the hero link: the effort chart (a custom build against starting from a
   library system), what that means, who does what, what the agency keeps, and the way from a demo to a long-term
   client system. Coded visuals in the page's instrument language; [data-anim] blocks replay when they come back. */

/* the way down from the hero */
.amx-hero__agency { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 22px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid var(--edge-2); background: rgba(14, 20, 38, .72); color: var(--text); text-decoration: none; font-size: .95rem; font-weight: 600; text-align: left; transition: border-color .25s, background .25s, translate .25s var(--ease); --d: 1.05s; }
.amx-hero__agency:hover, .amx-hero__agency:focus-visible { border-color: rgba(var(--accent-rgb), .65); background: rgba(var(--accent-rgb), .07); translate: 0 -1px; }
.amx-hero__agency-tag { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .38); background: rgba(var(--accent-rgb), .12); color: var(--accent); font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.amx-hero__agency .ic { width: 18px; height: 18px; flex: none; rotate: 90deg; color: var(--accent); animation: amxAgNudge 2.4s var(--ease) 2.4s infinite; }
@keyframes amxAgNudge { 0%, 55%, 100% { translate: 0 0; } 25% { translate: 0 4px; } }

/* the section */
.amx-ag { position: relative; overflow: hidden; }
.amx-ag::before { content: ""; position: absolute; left: 50%; top: 260px; width: min(1200px, 120%); height: 760px; translate: -50% 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), .085), transparent 62%); }
.amx-ag .amx-wrap { position: relative; }
.amx-ag__h { margin: clamp(60px, 7vw, 92px) 0 24px; text-align: center; font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* the effort chart */
.amx-ag__chart { position: relative; padding: clamp(22px, 3vw, 36px); border-radius: 18px; border: 1px solid var(--edge-2); background: linear-gradient(180deg, rgba(21, 30, 40, .9), rgba(12, 18, 24, .94)); box-shadow: var(--shadow); }
.amx-ag__chart::after { content: ""; position: absolute; inset: -6px; pointer-events: none; border-radius: 20px; --c: rgba(var(--accent-rgb), .9);
  background: linear-gradient(var(--c), var(--c)) top left / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 18px no-repeat; }
.amx-ag__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.amx-ag__label { max-width: 440px; font-size: .74rem; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amx-ag__big { display: grid; justify-items: end; text-align: right; }
.amx-ag__big b { font-size: clamp(3.2rem, 2rem + 4.2vw, 5.4rem); line-height: .86; font-weight: 800; letter-spacing: -0.055em; color: var(--accent); text-shadow: 0 0 36px rgba(var(--accent-rgb), .35); }
.amx-ag__big span { margin-top: 8px; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.amx-ag__plot { --lab: 158px; --val: 118px; margin-top: 28px; }
.amx-ag__ticks { position: relative; height: 18px; margin: 0 var(--val) 4px var(--lab); }
.amx-ag__ticks span { position: absolute; left: calc(var(--x) * 1%); translate: -50% 0; font-family: var(--mono); font-size: .64rem; color: var(--dim); }
.amx-ag__ticks span:first-child { translate: 0 0; } .amx-ag__ticks span:last-child { translate: -100% 0; }
.amx-ag__row { display: grid; grid-template-columns: var(--lab) 1fr var(--val); align-items: center; padding: 12px 0; }
.amx-ag__who { font-weight: 650; font-size: .98rem; color: var(--text); }
.amx-ag__row--am .amx-ag__who { color: var(--accent); }
.amx-ag__track { position: relative; height: 48px; border-radius: 10px; border-right: 1px dashed rgba(255, 255, 255, .08);
  background: linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 25% 100%; }
.amx-ag__bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 1%); display: flex; border-radius: 10px; overflow: hidden; transform-origin: left center; scale: 0 1; }
.amx-ag__bar--custom { background: linear-gradient(180deg, #34414d, #29343e); }
.amx-ag__bar--am { background: linear-gradient(90deg, #dcae17, var(--accent) 55%, var(--accent-2)); box-shadow: 0 0 26px rgba(var(--accent-rgb), .32); }
.amx-ag__bar i { flex: 1; min-width: 0; display: grid; place-items: center; padding: 0 6px; font-style: normal; font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid rgba(8, 11, 15, .55); opacity: 0; }
.amx-ag__bar i:last-child { border-right: 0; }
.amx-ag__bar--custom i { color: #aeb9c3; }
.amx-ag__bar--am i { color: #1c1603; border-right-color: rgba(17, 22, 28, .22); }
.amx-ag__saved { position: absolute; top: -5px; bottom: -5px; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); display: grid; place-items: center; padding: 0 8px; border: 1.5px dashed rgba(var(--accent-rgb), .75); border-radius: 11px; text-align: center; color: var(--accent); font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; opacity: 0;
  background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), .08) 0 8px, transparent 8px 16px); }
.amx-ag__val { text-align: right; font-family: var(--mono); font-size: .86rem; color: var(--text); }
.amx-ag__row--am .amx-ag__val { color: var(--accent); }
.amx-ag__legend { display: none; }
.amx-ag__chart.is-in .amx-ag__bar { animation: amxAgGrowX 1.25s var(--ease) .15s forwards; }
.amx-ag__chart.is-in .amx-ag__bar--am { animation-delay: .75s; }
.amx-ag__chart.is-in .amx-ag__bar--custom i { animation: amxAgFade .4s ease forwards; animation-delay: calc(.8s + var(--i) * .1s); }
.amx-ag__chart.is-in .amx-ag__bar--am i { animation: amxAgFade .4s ease forwards; animation-delay: calc(1.45s + var(--i) * .12s); }
.amx-ag__chart.is-in .amx-ag__saved { animation: amxAgFade .6s ease 1.95s forwards; }
.amx-ag__ready { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.amx-ag__ready > span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amx-ag__ready ul { display: flex; flex-wrap: wrap; gap: 8px; }
.amx-ag__ready li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 9px; border: 1px solid rgba(64, 210, 122, .32); background: rgba(64, 210, 122, .08); color: var(--text); font-size: .87rem; font-weight: 550; opacity: 0; }
.amx-ag__ready li::before { content: ""; width: 15px; height: 15px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340d27a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.amx-ag__chart.is-in .amx-ag__ready li { animation: amxAgPop .45s var(--pop) forwards; animation-delay: calc(2.25s + var(--i) * .12s); }
.amx-ag__chart .amx-note { margin-top: 14px; }
@keyframes amxAgGrowX { to { scale: 1 1; } }
@keyframes amxAgGrowY { to { scale: 1 1; } }
@keyframes amxAgFade { to { opacity: 1; } }
@keyframes amxAgPop { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }

/* what it means for an agency */
.amx-ag__wins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.amx-ag__wins .amx-card h3 { font-size: 1.08rem; }

/* who does what */
.amx-ag__flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.amx-ag__flow::before, .amx-ag__flow::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 43px; height: 2px; border-radius: 2px; }
.amx-ag__flow::before { background: var(--edge-2); }
.amx-ag__flow::after { background: linear-gradient(90deg, var(--accent), var(--cyan) 38%, var(--blue-2) 66%, var(--accent)); box-shadow: 0 0 12px rgba(var(--accent-rgb), .35); transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease) .2s; }
.amx-ag__flow.is-in::after { transform: scaleX(1); }
.amx-ag__flow li { position: relative; display: grid; justify-items: center; align-content: start; gap: 9px; text-align: center; padding: 0 6px; }
.amx-ag__role { padding: 4px 11px; border-radius: 999px; border: 1px solid; font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.amx-ag__flow .is-agency { --c: var(--accent); --cb: rgba(var(--accent-rgb), .45); --cg: rgba(var(--accent-rgb), .08); }
.amx-ag__flow .is-both { --c: var(--cyan); --cb: rgba(127, 220, 255, .42); --cg: rgba(127, 220, 255, .07); }
.amx-ag__flow .is-am { --c: #8db4ff; --cb: rgba(47, 124, 246, .55); --cg: rgba(47, 124, 246, .1); }
.amx-ag__role { color: var(--c); border-color: var(--cb); background: var(--cg); }
.amx-ag__dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--edge-2); background: var(--bg-2); transition: border-color .4s, background .4s, box-shadow .4s; transition-delay: calc(.35s + var(--i) * .42s); }
.amx-ag__flow.is-in .amx-ag__dot { border-color: var(--c); background: radial-gradient(circle, var(--c) 34%, var(--bg-2) 40%); box-shadow: 0 0 14px var(--cb); }
.amx-ag__flow b { font-size: 1.06rem; font-weight: 650; color: var(--text); }
.amx-ag__flow small { font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; color: var(--muted); }

/* what the agency keeps */
.amx-ag__keep { margin: 34px auto 0; max-width: 900px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; padding: 16px 22px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb), .32); background: rgba(var(--accent-rgb), .05); }
.amx-ag__keep > span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.amx-ag__keep ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.amx-ag__keep li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--edge-2); background: var(--panel-2); color: var(--text); font-size: .9rem; font-weight: 600; }
.amx-ag__keep li .ic { width: 15px; height: 15px; color: var(--accent); }
.amx-ag__keep.is-in li { animation: amxAgPop .45s var(--pop) both; animation-delay: calc(.15s + var(--i) * .09s); }

/* from a demo to a long-term client system */
.amx-ag__grow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: start; }
.amx-ag__grow li { display: grid; grid-template-rows: 136px auto auto; gap: 6px; }
.amx-ag__grow i { position: relative; display: block; align-self: end; height: calc(var(--h) * 1.3px); min-height: 38px; overflow: hidden; border-radius: 10px 10px 4px 4px; border: 1px solid var(--edge-2); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.amx-ag__grow i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .3)); transform-origin: center bottom; scale: 1 0; }
.amx-ag__grow.is-in i::after { animation: amxAgGrowY .75s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * .26s); }
.amx-ag__grow b { margin-top: 6px; font-size: 1.06rem; font-weight: 650; color: var(--text); }
.amx-ag__grow small { font-size: .88rem; line-height: 1.45; color: var(--muted); }
.amx-ag__lib { margin: 28px auto 0; max-width: 760px; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: 1rem; color: var(--text-2); }
.amx-ag__lib .ic { flex: none; color: var(--cyan); }
.amx-ag__cta { margin-top: 44px; display: flex; justify-content: center; }

.amx #am-agencies { --est: 3070px; }
@media (max-width: 1100px) {
  .amx-ag__wins { grid-template-columns: repeat(2, 1fr); }
  .amx #am-agencies { --est: 3090px; }
}
@media (max-width: 900px) {
  .amx-ag__flow { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .amx-ag__flow::before, .amx-ag__flow::after { display: none; }
  .amx-ag__plot { --lab: 132px; --val: 96px; }
  .amx #am-agencies { --est: 3800px; }
}
@media (max-width: 640px) {
  .amx-hero__agency { gap: 10px; padding-right: 12px; font-size: .88rem; }
  .amx-ag__plot { --lab: 0px; --val: 0px; }
  .amx-ag__ticks { margin: 0 0 4px; }
  .amx-ag__row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .amx-ag__track { grid-column: 1 / -1; grid-row: 2; height: 40px; }
  .amx-ag__bar--custom i { color: transparent; }
  .amx-ag__legend { display: block; grid-column: 1 / -1; font-family: var(--mono); font-size: .66rem; line-height: 1.5; letter-spacing: .04em; color: var(--muted); }
  .amx-ag__saved { font-size: .6rem; letter-spacing: .06em; }
  .amx-ag__big { justify-items: start; text-align: left; }
  .amx-ag__wins { grid-template-columns: 1fr; }
  .amx-ag__flow { grid-template-columns: 1fr; }
  .amx-ag__grow { grid-template-columns: 1fr; gap: 12px; }
  .amx-ag__grow li { grid-template-columns: 92px 1fr; grid-template-rows: none; align-items: center; column-gap: 14px; row-gap: 2px; }
  .amx-ag__grow i { grid-row: span 2; align-self: center; width: calc(var(--h) * 1%); height: 14px; min-height: 0; border-radius: 4px; }
  .amx-ag__grow i::after { transform-origin: left center; scale: 0 1; }
  .amx-ag__grow b { margin-top: 0; }
  .amx #am-agencies { --est: 4920px; }
}
@media (prefers-reduced-motion: reduce) {
  .amx-ag__bar, .amx-ag__grow i::after { scale: 1 1 !important; }
  .amx-ag__bar i, .amx-ag__saved, .amx-ag__ready li { opacity: 1 !important; }
  .amx-ag__flow::after { transform: none !important; }
  .amx-hero__agency .ic { animation: none; }
}

/* ================================================================== the first deep template (2026-10-02)
   AgentMotion Logistik in its own paper look (its colours, Jakarta headings, a taped print with pinned notes), so
   the library system reads as a real product one can open. Scoped to .lgx; the font only loads when the card shows. */
@font-face { font-family: "AMX Jakarta"; src: url("../fonts/Jakarta-latin-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.amx .lgx { --lp: #f6f2e9; --lp2: #efe8da; --ls: #fffdf8; --li: #17241f; --li2: #33443d; --lm: #5d6b64; --ll: rgba(74, 60, 34, .12);
  --lg: #0b5e4b; --lg2: #1c7760; --lg3: #2e9a6f; --ltape: rgba(236, 224, 190, .82); --lfont: "AMX Jakarta", var(--font);
  --lshadow: 0 1px 1px rgba(74, 60, 34, .08), 0 4px 10px -4px rgba(74, 60, 34, .14), 0 22px 40px -26px rgba(74, 60, 34, .32);
  --lgrain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: center;
  padding: clamp(26px, 4vw, 50px); border-radius: 22px; background: var(--lgrain) var(--lp); color: var(--li2); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 34px 70px -36px rgba(0, 0, 0, .95); transition: translate .35s var(--ease), box-shadow .35s; }
.amx .lgx:hover, .amx .lgx:focus-visible { translate: 0 -3px; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5), 0 44px 80px -36px rgba(0, 0, 0, 1); }
.amx .lgx__text { display: grid; justify-items: start; }
.amx .lgx__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--lfont); font-weight: 800; font-size: 1rem; line-height: 1.04; letter-spacing: -0.02em; color: var(--li); }
.amx .lgx__brand img { width: 34px; height: 34px; }
.amx .lgx__pill { margin-top: 20px; padding: 6px 14px; border-radius: 999px; background: var(--lp2); border: 1px solid var(--ll); font-size: .85rem; font-weight: 600; color: var(--li2); }
.amx .lgx__h { margin: 14px 0 0; font-family: var(--lfont); font-weight: 800; font-size: clamp(1.9rem, 1.15rem + 1.9vw, 2.75rem); line-height: 1.04; letter-spacing: -0.045em; color: var(--li); }
.amx .lgx__h > span { display: block; }
.amx .lgx__h .pn { margin-left: -0.1em; }
.amx .lgx__mark { position: relative; display: inline-block; color: var(--lg); white-space: nowrap; }
.amx .lgx__mark svg { position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .32em; overflow: visible; }
.amx .lgx__mark path { fill: none; stroke: var(--lg3); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.amx .lgx-wrap.is-in .lgx__mark path { animation: lgxDraw 1s var(--ease) .45s forwards; }
.amx .lgx__p { margin: 14px 0 0; font-size: 1rem; line-height: 1.65; color: var(--li2); }
.amx .lgx__chips { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.amx .lgx__chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--ls); border: 1px solid var(--ll); font-size: .84rem; font-weight: 600; color: var(--li2); }
.amx .lgx__chips .ic { width: 15px; height: 15px; color: var(--lg2); }
.amx .lgx__cta { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.amx .lgx__btn { display: inline-flex; align-items: center; gap: .55em; height: 48px; padding: 0 22px; border-radius: 999px; background: var(--lg); color: #fff; font-weight: 650; font-size: .97rem; box-shadow: 0 3px 0 #073f33, 0 10px 22px -12px rgba(11, 94, 75, .8); transition: translate .2s var(--ease), box-shadow .2s; }
.amx .lgx:hover .lgx__btn { translate: 0 -1px; box-shadow: 0 4px 0 #073f33, 0 14px 26px -12px rgba(11, 94, 75, .85); }
.amx .lgx__btn .ic { width: 18px; height: 18px; color: #fff; transition: translate .25s var(--ease); }
.amx .lgx:hover .lgx__btn .ic { translate: 3px 0; }
.amx .lgx__url { font-family: var(--mono); font-size: .76rem; color: var(--lm); }
.amx .lgx__stage { position: relative; padding: 20px 14px 30px; }
.amx .lgx__print { position: relative; margin: 0; padding: 10px 10px 12px; border-radius: 8px; background: var(--lgrain) var(--ls); rotate: -1.2deg;
  box-shadow: 0 1px 1px rgba(74, 60, 34, .08), 0 10px 22px -10px rgba(74, 60, 34, .2), 0 40px 70px -40px rgba(74, 60, 34, .42); }
.amx .lgx__print img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #e7decb; }
.amx .lgx__tape { position: absolute; z-index: 2; width: 108px; height: 28px; background: var(--ltape); box-shadow: 0 1px 2px rgba(74, 60, 34, .12);
  clip-path: polygon(0 12%, 5% 0, 11% 14%, 17% 2%, 24% 12%, 31% 0, 38% 10%, 45% 2%, 52% 12%, 60% 0, 67% 12%, 74% 2%, 81% 12%, 88% 0, 95% 10%, 100% 4%, 100% 88%, 95% 100%, 88% 86%, 81% 100%, 74% 88%, 67% 100%, 60% 88%, 52% 100%, 45% 90%, 38% 100%, 31% 88%, 24% 100%, 17% 88%, 11% 100%, 5% 88%, 0 96%); }
.amx .lgx__tape--l { top: -12px; left: 28px; rotate: -5deg; }
.amx .lgx__tape--r { top: -11px; right: 32px; rotate: 4deg; }
.amx .lgx__note { position: absolute; z-index: 3; display: grid; gap: 1px; min-width: 178px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ll); background: var(--ls); box-shadow: var(--lshadow); text-align: left; opacity: 0; }
.amx .lgx__note b { font-family: var(--lfont); font-size: .9rem; font-weight: 800; color: var(--li); }
.amx .lgx__note small { font-size: .76rem; color: var(--lm); }
.amx .lgx__pin { position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .18), 0 2px 3px rgba(0, 0, 0, .25); }
.amx .lgx__note--1 { left: -8px; top: 4%; rotate: -3deg; } .amx .lgx__note--1 .lgx__pin { background: #d9534a; }
.amx .lgx__note--2 { right: -12px; top: 42%; rotate: 2.5deg; } .amx .lgx__note--2 .lgx__pin { background: #3a7fd0; }
.amx .lgx__note--3 { left: 8%; bottom: 0; rotate: 1.5deg; } .amx .lgx__note--3 .lgx__pin { background: var(--lg3); }
.amx .lgx__note--3::after { content: "✓"; position: absolute; right: -11px; top: -11px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lg); color: #fff; font-size: .8rem; font-weight: 800; box-shadow: 0 2px 0 #073f33; }
.amx .lgx-wrap.is-in .lgx__note { animation: lgxDrop .6s var(--pop) forwards; animation-delay: calc(.35s + var(--i) * .28s); }
@keyframes lgxDraw { to { stroke-dashoffset: 0; } }
@keyframes lgxDrop { from { opacity: 0; translate: 0 -14px; scale: 1.05; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (max-width: 900px) {
  .amx .lgx { grid-template-columns: 1fr; }
  .amx .lgx__stage { order: -1; }
}
@media (max-width: 640px) {
  .amx .lgx__stage { padding: 16px 4px 34px; }
  .amx .lgx__note { min-width: 0; padding: 8px 11px; }
  .amx .lgx__note small { font-size: .7rem; }
  .amx .lgx__note--1 { left: -4px; top: -2%; } .amx .lgx__note--2 { right: -6px; top: 38%; } .amx .lgx__note--3 { left: 4%; bottom: 2px; }
  .amx .lgx__btn { height: 46px; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .amx .lgx__note { opacity: 1 !important; }
  .amx .lgx__mark path { stroke-dashoffset: 0 !important; }
}

/* ============================================================ BRAND (owner 2026-10-09: the company logo and its colours)
   The logo: its mark (the A in motion) and the wordmark, cut from the logo as sent, light on a clear ground. */
.amx .mark .w { background: var(--brand-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.amx .mark .w + .w { background-position: 100% 0; }
.amx-brand img.amx-brand__mark { width: auto; height: 34px; }
.amx-brand .amx-brand__text { display: grid; gap: 5px; line-height: 1; }
.amx-brand img.amx-brand__word { display: block; width: auto; height: 15px; }
.amx-foot .amx-brand img.amx-brand__mark { height: 44px; }
.amx-foot .amx-brand img.amx-brand__word { height: 19px; }
.amx-hero__logo { display: block; width: min(400px, 68vw); margin: 0 auto 10px; mix-blend-mode: screen; animation: amxLogoIn 1.15s var(--ease) both; }   /* light on the page: the grid shows through its glow */
.amx-hero__logo img { display: block; width: 100%; height: auto; }
.amx-brand img.amx-brand__mark, .amx-brand img.amx-brand__word { mix-blend-mode: screen; }
@keyframes amxLogoIn { from { opacity: 0; transform: translateX(-48px); clip-path: inset(0 100% 0 0); } 60% { opacity: 1; } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@media (max-width: 720px) { .amx-brand img.amx-brand__mark { height: 28px; } .amx-brand img.amx-brand__word { height: 13px; } .amx-hero__logo { width: min(300px, 76vw); } }
@media (prefers-reduced-motion: reduce) { .amx-hero__logo { animation: none; } }

/* ============================================================ CONTACT FORM AND LEGAL WINDOWS (2026-10-09) */
.amx-dlg { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--edge-2); border-radius: 18px; background: var(--panel); color: var(--text-2); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(var(--accent-rgb), .12), 0 0 80px -20px rgba(var(--violet-rgb), .35); font-family: var(--font); }
.amx-dlg::backdrop { background: rgba(4, 6, 14, .72); backdrop-filter: blur(6px); }
.amx-dlg__box { position: relative; padding: 30px 30px 26px; }
.amx-dlg h2 { margin: 0 0 6px; color: var(--text); font-size: 1.6rem; letter-spacing: -0.02em; }
.amx-dlg h3 { margin: 18px 0 4px; color: var(--text); font-size: 1rem; }
.amx-dlg p { margin: 0 0 8px; font-size: .95rem; line-height: 1.6; }
.amx-dlg a { color: var(--accent-2); }
.amx-dlg__lead { color: var(--muted); }
.amx-dlg__x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--edge); border-radius: 50%; background: transparent; color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer; }
.amx-dlg__x:hover { border-color: var(--edge-2); color: var(--text); }
.amx-dlg__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 10px; }
.amx-dlg__fields label { display: grid; gap: 6px; font-size: .82rem; color: var(--muted); }
.amx-dlg__wide { grid-column: 1 / -1; }
.amx-dlg input, .amx-dlg textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--edge-2); border-radius: 10px; background: var(--bg-2); color: var(--text); font: inherit; font-size: .98rem; }
.amx-dlg textarea { resize: vertical; min-height: 110px; }
.amx-dlg input:focus, .amx-dlg textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.amx-dlg__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.amx-dlg__fine { font-size: .82rem !important; color: var(--dim); }
.amx-dlg__msg { min-height: 1.2em; font-size: .9rem !important; color: var(--text-2); }
.amx-dlg__msg.is-bad { color: #ff8f86; }
.amx-dlg__acts { display: flex; justify-content: flex-end; }
.amx-dlg form.is-done .amx-dlg__fields, .amx-dlg form.is-done .amx-dlg__fine, .amx-dlg form.is-done .amx-dlg__acts, .amx-dlg form.is-done .amx-dlg__lead { display: none; }
.amx-dlg__done p { margin: 18px 0 18px; color: var(--text); font-size: 1.05rem; }
.amx-dlg--legal { width: min(760px, calc(100vw - 24px)); }
.amx-dlg--legal .amx-dlg__box { max-height: calc(100dvh - 34px); overflow: auto; }
@media (max-width: 560px) { .amx-dlg__fields { grid-template-columns: 1fr; } .amx-dlg__box { padding: 24px 18px 20px; } }