/* ===========================================================================
   AI Integrations (Specialisation) — prefix "aix-"
   Visual language: "the integration loom" — thin glowing filaments running
   between glass slabs, on an alternating navy / paper rhythm.

   Theme tokens (same family as the rest of the site):
     navy #080A2B · violet #7B2FF7 · magenta #B217BA · blue #2A7BFF
     · cyan #43D2E0 · gold #F0A400 · Afacad.

   Structure (9 interactive sections):
     1 .aix-hero   hero + live console     6 .aix-guard  switchboard + policy
     2 .aix-stack  five-layer deck         7 .aix-roi    calculator + donut
     3 .aix-flow   wiring playground       8 .aix-road   phase rail
     4 .aix-trace  answer receipt steps    9 .aix-cta    magnetic CTA
     5 .aix-matrix capability tiles

   Every component is self-contained; nothing here reuses the home page's
   parallax / laptop sections or the other specialisation pages' structures.
   =========================================================================== */

:root {
  --aix-navy: #080a2b;
  --aix-navy-2: #0c1136;
  --aix-violet: #7b2ff7;
  --aix-magenta: #b217ba;
  --aix-blue: #2a7bff;
  --aix-cyan: #43d2e0;
  --aix-gold: #f0a400;
  --aix-paper: #f7f6fb;
  --aix-ink: #171a3d;
  --aix-mute: #5b5f83;
  --aix-line: rgba(123, 47, 247, 0.18);
  --aix-button: linear-gradient(100deg, #7b2ff7, #b51bb5);
  --aix-grad: linear-gradient(92deg, var(--aix-violet), var(--aix-magenta) 45%, var(--aix-cyan));
  --aix-shell: min(88%, 1320px);
  --aix-r: 22px;
  --aix-shadow: 0 24px 60px rgba(8, 10, 43, 0.14);
  --aix-shadow-deep: 0 30px 90px rgba(8, 10, 43, 0.45);
}

.aix {
  font-family: "Afacad", sans-serif;
  overflow-x: clip; /* filament decorations bleed sideways, page must not */
}

.aix-shell {
  width: var(--aix-shell);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* ---------- shared type -------------------------------------------------- */

.aix-h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0.45em 0 0;
}

.aix-h1 > span {
  display: block;
}

.aix-h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.35em 0 0;
  color: var(--aix-ink);
}

.aix-grad {
  background: var(--aix-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.aix-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.65;
  max-width: 34em;
  margin: 1.3em 0 0;
  color: rgba(255, 255, 255, 0.82);
}

.aix-sub {
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 38em;
  margin: 0.9em 0 0;
  color: var(--aix-mute);
}

.aix-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aix-violet);
  margin: 0;
}

.aix-kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--aix-grad);
}

.aix-head {
  max-width: 760px;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem);
}

.aix-head--light .aix-h2 {
  color: #fff;
}

.aix-head--light .aix-sub {
  color: rgba(255, 255, 255, 0.72);
}

.aix-head--light .aix-kicker {
  color: var(--aix-cyan);
}

.aix-crumb {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.aix-crumb a {
  color: rgba(255, 255, 255, 0.75);
}

.aix-crumb a:hover {
  color: var(--aix-cyan);
}

.aix-crumb i {
  margin: 0 0.5em;
  font-style: normal;
  opacity: 0.5;
}

.aix-crumb b {
  color: #fff;
  font-weight: 600;
}

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

.aix-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  /* border: 1.5px solid transparent; */
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  will-change: transform;
}

.aix-btn--fill {
  background: var(--aix-button);
  color: #fff;
  box-shadow: 0 14px 34px rgba(123, 47, 247, 0.35);
}

.aix-btn--fill:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(123, 47, 247, 0.5);
}

.aix-btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.aix-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.aix-btn--mini {
  padding: 0.5em 1.15em;
  font-size: 0.88rem;
  background: rgba(123, 47, 247, 0.14);
  border-color: var(--aix-line);
  color: var(--aix-violet);
}

.aix-btn--mini:hover {
  background: var(--aix-violet);
  border-color: var(--aix-violet);
  color: #fff;
  transform: translateY(-1px);
}

.aix-btn--wide {
  width: 100%;
  justify-content: center;
}

.aix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.9rem;
}

.aix-actions--center {
  justify-content: center;
}

/* ---------- filament decorations ---------------------------------------- */

.aix-thread {
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aix-line) 18%, var(--aix-line) 82%, transparent);
  z-index: 3;
}

.aix-thread--hero {
  background: linear-gradient(90deg, transparent, rgba(67, 210, 224, 0.35) 18%, rgba(178, 23, 186, 0.35) 82%, transparent);
}

/* ===========================================================================
   1 · HERO + LIVE CONSOLE
   =========================================================================== */

.aix-hero {
  position: relative;
  background:
    radial-gradient(1100px 560px at 82% -10%, rgba(123, 47, 247, 0.32), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(42, 123, 255, 0.25), transparent 60%),
    linear-gradient(180deg, var(--aix-navy) 0%, var(--aix-navy-2) 100%);
  padding: clamp(7.5rem, 12vh, 10rem) 0 clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
}

.aix-hero__glow {
  position: absolute;
  top: -220px;
  right: -180px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 210, 224, 0.22), transparent 65%);
  filter: blur(6px);
  animation: aix-drift 14s ease-in-out infinite alternate;
}

.aix-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 78%);
}

@keyframes aix-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-60px, 50px, 0) scale(1.12); }
}

.aix-hero__in {
  /* Match the shared hero grid without widening the lower sections. */
  width: var(--site-width, 88%);
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Keep long labels inside the shared gutters when text is enlarged. */
.aix-hero__in > * { min-width: 0; }
.aix-hero__copy .aix-eyebrow,
.aix-hero__copy .aix-btn { max-width: 100%; overflow-wrap: anywhere; }

.aix-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 1.4rem 0 0;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  border: 1px solid rgba(67, 210, 224, 0.35);
  background: rgba(67, 210, 224, 0.08);
  color: var(--aix-cyan);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aix-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aix-cyan);
  box-shadow: 0 0 12px var(--aix-cyan);
  animation: aix-blink 2.2s ease-in-out infinite;
}

@keyframes aix-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* headline words rise in sequence */
.aix-rise {
  opacity: 0;
  transform: translateY(0.55em);
  animation: aix-rise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.aix-rise:nth-child(2) { animation-delay: 0.12s; }
.aix-rise:nth-child(3) { animation-delay: 0.24s; }

@keyframes aix-rise {
  to { opacity: 1; transform: none; }
}

/* hero stats */
.aix-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  margin: 2.4rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.aix-stat dt {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 700;
  background: var(--aix-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.aix-stat dd {
  margin: 0.15em 0 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- console ---- */

.aix-console {
  position: relative;
  border-radius: var(--aix-r);
  background: rgba(10, 14, 48, 0.72);
  border: 1px solid rgba(123, 47, 247, 0.35);
  box-shadow: var(--aix-shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  overflow: hidden;
}

.aix-console__bar {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.8em 1.15em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.aix-console__dots {
  display: inline-flex;
  gap: 6px;
}

.aix-console__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.aix-console__dots i:first-child { background: var(--aix-magenta); }
.aix-console__dots i:nth-child(2) { background: var(--aix-gold); }
.aix-console__dots i:nth-child(3) { background: var(--aix-cyan); }

.aix-console__title { flex: 1; letter-spacing: 0.04em; }

.aix-console__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--aix-cyan);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

.aix-console__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aix-cyan);
  box-shadow: 0 0 10px var(--aix-cyan);
  animation: aix-blink 1.6s ease-in-out infinite;
}

.aix-console__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 1.1rem 1.15rem 0.35rem;
}

.aix-chip {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  padding: 0.5em 1.05em;
  border-radius: 999px;
  border: 0px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.25s ease;
}

.aix-chip:hover {
  border-color: rgba(67, 210, 224, 0.6);
  transform: translateY(-1px);
}

.aix-chip.is-on {
  background: var(--aix-button);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px rgba(123, 47, 247, 0.4);
}

.aix-console__screen {
  padding: 1.15rem 1.35rem 1.5rem;
  min-height: 260px;
}

.aix-console__q {
  margin: 0;
  font-size: 1.02rem;
  color: var(--aix-cyan);
  font-weight: 600;
  min-height: 1.5em;
}

.aix-caret {
  opacity: 0.55;
  margin-right: 0.15em;
}

.aix-caret-blink {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  vertical-align: -0.18em;
  background: var(--aix-cyan);
  margin-left: 3px;
  animation: aix-blink 1s steps(1) infinite;
}

.aix-console__a {
  margin: 0.85rem 0 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  min-height: 5.1em;
  white-space: pre-wrap;
}

.aix-console__chain {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
}

.aix-console__chain li {
  position: relative;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.45em 0.95em 0.45em 2em;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  opacity: 0.35;
  transform: translateY(4px);
  transition: all 0.4s ease;
}

.aix-console__chain li::before {
  content: "";
  position: absolute;
  left: 0.8em;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.4s ease;
}

.aix-console__chain li.is-lit {
  opacity: 1;
  transform: none;
  color: var(--aix-cyan);
  border: 1px solid rgba(67, 210, 224, 0.45);
  background: rgba(67, 210, 224, 0.1);
}

.aix-console__chain li.is-lit::before {
  background: var(--aix-cyan);
  box-shadow: 0 0 10px var(--aix-cyan);
}

/* ===========================================================================
   2 · INTEGRATION STACK DECK
   =========================================================================== */

.aix-stack {
  background: var(--aix-paper);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.aix-deck {
  display: grid;
  gap: 0.85rem;
}

.aix-layer {
  border-radius: var(--aix-r);
  background: #fff;
  border: 1px solid rgba(8, 10, 43, 0.08);
  box-shadow: 0 10px 30px rgba(8, 10, 43, 0.05);
  overflow: hidden;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.aix-layer:hover {
  transform: translateY(-2px);
  box-shadow: var(--aix-shadow);
}

.aix-layer.is-open {
  border-color: rgba(123, 47, 247, 0.4);
  box-shadow: var(--aix-shadow);
}

.aix-layer__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  width: 100%;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.6vw, 2rem);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.aix-layer__num {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--aix-violet);
}

.aix-layer__name {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--aix-ink);
}

.aix-layer__tag {
  font-size: 0.88rem;
  color: var(--aix-mute);
  white-space: nowrap;
}

.aix-layer__cue {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--aix-line);
  transition: all 0.35s ease;
}

.aix-layer__cue::before,
.aix-layer__cue::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--aix-violet);
  border-radius: 2px;
  transition: transform 0.35s ease;
}

.aix-layer__cue::before {
  width: 13px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.aix-layer__cue::after {
  width: 2px;
  height: 13px;
  transform: translate(-50%, -50%);
}

.aix-layer.is-open .aix-layer__cue {
  background: var(--aix-violet);
  border-color: var(--aix-violet);
}

.aix-layer.is-open .aix-layer__cue::before,
.aix-layer.is-open .aix-layer__cue::after {
  background: #fff;
}

.aix-layer.is-open .aix-layer__cue::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.aix-layer__drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.aix-layer.is-open .aix-layer__drawer {
  grid-template-rows: 1fr;
}

.aix-layer__drawer-in {
  overflow: hidden;
}

.aix-layer__drawer p {
  margin: 0;
  padding: 0 clamp(1.2rem, 2.6vw, 2rem) 0.4rem;
  max-width: 62em;
  line-height: 1.65;
  color: var(--aix-mute);
}

.aix-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0 clamp(1.2rem, 2.6vw, 2rem) clamp(1.3rem, 2.4vw, 1.8rem);
  list-style: none;
}

.aix-tags li {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.42em 1em;
  border-radius: 999px;
  color: var(--aix-violet);
  background: rgba(123, 47, 247, 0.09);
  border: 1px solid rgba(123, 47, 247, 0.18);
}

/* ===========================================================================
   3 · FLOW WIRING PLAYGROUND (navy)
   =========================================================================== */

.aix-flow {
  position: relative;
  background:
    radial-gradient(900px 480px at 88% 0%, rgba(178, 23, 186, 0.22), transparent 60%),
    radial-gradient(800px 460px at 4% 100%, rgba(42, 123, 255, 0.22), transparent 60%),
    linear-gradient(180deg, var(--aix-navy), var(--aix-navy-2));
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem);
  overflow: hidden;
}

/* Keep the scene symmetrical. The meter occupies its own row, so it cannot
   shift the hub away from the middle of the source/output cards. */
.aix-wire {
  position: relative;
  width: 100%;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--aix-r);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #121632;
  box-shadow: 0 24px 60px rgba(3, 5, 24, 0.14);
  isolation: isolate;
}

.aix-wire__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(13rem, 21vw, 16rem) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(2.25rem, 6vw, 6rem);
  min-width: 0;
  min-height: 18.5rem;
}

.aix-wire__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.aix-wire__track,
.aix-wire__path {
  fill: none;
  stroke: rgba(176, 185, 218, 0.22);
  stroke-width: 1.5;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.3s ease;
}

/* A faint unbroken track keeps every line visibly attached, even when the
   moving dash happens to be between the card and the next dash. */
.aix-wire__track { stroke-opacity: 0.55; }
.aix-wire__path { stroke-dasharray: 6 9; }
.aix-connection.is-live .aix-wire__track {
  stroke: var(--aix-cyan);
  stroke-opacity: 0.24;
}
.aix-wire__path.is-live {
  stroke: var(--aix-cyan);
  stroke-width: 2;
  animation: aix-flowdash 1.7s linear infinite;
}
.aix-connection.is-live[data-connection^="out"] .aix-wire__track,
.aix-wire__path.is-live[data-wire^="out"] { stroke: var(--aix-gold); }

@keyframes aix-flowdash {
  to { stroke-dashoffset: -30; }
}

.aix-wire__column {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(3, minmax(4.75rem, 1fr));
  align-self: stretch;
  gap: 2rem;
  width: 100%;
  max-width: 15rem;
  min-width: 0;
}
.aix-wire__column--sources { justify-self: start; }
.aix-wire__column--outputs { justify-self: end; }
.aix-node { min-width: 0; display: flex; }

.aix-node__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico name" "ico sub";
  align-content: center;
  align-items: center;
  column-gap: 0.7em;
  row-gap: 0.2rem;
  width: 100%;
  min-width: 0;
  min-height: 4.75rem;
  padding: 0.85rem 1rem;
  border-radius: 15px;
  border: 1px solid #41465f;
  background: #1d223e;
  color: #b9c0d5;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Never translate a node on hover: its measured connector must stay put. */
  transition: border-color 0.25s ease, background-color 0.25s ease,
              color 0.25s ease, box-shadow 0.25s ease;
}
.aix-node--out .aix-node__btn { grid-template-areas: "ico name"; }
.aix-node__btn small {
  grid-area: sub;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  color: #c0c9de;
  overflow-wrap: anywhere;
}
.aix-node__btn > span { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
.aix-node__ico {
  grid-area: ico;
  width: 25px;
  height: 25px;
  color: #9ba7c6;
  transition: color 0.25s ease;
}
.aix-node__btn:hover { border-color: #7583a6; color: #fff; }
.aix-node__btn:focus-visible,
.aix-wire #aix-wire-all:focus-visible {
  outline: 3px solid #bca4ff;
  outline-offset: 5px;
}
.aix-node__btn.is-on {
  border-color: #308fa5;
  background: #183246;
  color: #fff;
  box-shadow: 0 8px 26px rgba(67, 210, 224, 0.07);
}
.aix-node--out .aix-node__btn.is-on {
  border-color: #a17b2c;
  background: #302b32;
  box-shadow: 0 8px 26px rgba(240, 164, 0, 0.06);
}
.aix-node__btn.is-on .aix-node__ico { color: var(--aix-cyan); }
.aix-node--out .aix-node__btn.is-on .aix-node__ico { color: var(--aix-gold); }

.aix-hub {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  justify-self: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  min-height: 10.5rem;
  padding: 1.35rem 0.9rem;
  border-radius: 22px;
  border: 1px solid #8061b3;
  /* Both gradient stops and the fallback are fully opaque. */
  background-color: #2d1d4c;
  background-image: linear-gradient(145deg, #3c265f, #271a43);
  box-shadow: 0 16px 44px rgba(4, 5, 25, 0.3),
              0 0 44px rgba(123, 47, 247, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  color: #fff;
}
.aix-hub__icon-wrap {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: 13px;
  border: 1px solid #73519c;
  background: #4a326c;
}
.aix-hub strong { font-size: 1.1rem; line-height: 1.3; letter-spacing: 0.01em; }
.aix-hub small { font-size: 0.72rem; line-height: 1.6; color: #d6caec; }
.aix-hub__ico { width: 26px; height: 26px; color: #f6c15a; }

.aix-meter {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  width: fit-content;
  max-width: 100%;
  margin: 2rem auto 0;
  padding: 0.65rem 0.85rem 0.65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #2c4963;
  background: #0d122b;
  color: #c3c9dc;
  font-size: 0.85rem;
  line-height: 1.4;
}
.aix-meter__ico { width: 20px; height: 20px; color: var(--aix-cyan); flex-shrink: 0; }
.aix-meter__num {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--aix-cyan);
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.aix-meter__label { white-space: nowrap; }
.aix-wire #aix-wire-all {
  margin-left: 0.15rem;
  min-height: 2.5rem;
  color: #e5d9ff;
  border-color: #644293;
  background: #2c1c4c;
}
.aix-wire #aix-wire-all:hover { background: #3b2860; }
.aix-wire__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The page-wide reduced-motion rule assigns a duration to every element.
   Explicitly opt geometry/text out: a default `all` transition would tween
   the layout at breakpoints and temporarily separate paths from their nodes. */
.aix-flow,
.aix-flow > .aix-shell,
.aix-wire,
.aix-wire__stage,
.aix-wire__svg,
.aix-wire__column,
.aix-node,
.aix-hub,
.aix-hub strong,
.aix-hub small,
.aix-node__btn > span,
.aix-node__btn small,
.aix-meter { transition-property: none; }

/* On narrow screens the same live diagram flows top to bottom. Connectors
   attach to top/bottom border centres instead of being hidden or squeezed. */
@media (max-width: 760px) {
  .aix-wire { padding: 1.25rem; }
  .aix-wire__stage { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; min-height: 0; }
  .aix-wire__column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 0.65rem;
    max-width: none;
  }
  .aix-node__btn,
  .aix-node--out .aix-node__btn {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ico" "name" "sub";
    align-content: center;
    justify-items: center;
    row-gap: 0.4rem;
    padding: 0.8rem 0.4rem;
    min-height: 7.75rem;
    text-align: center;
    font-size: 0.85rem;
  }
  .aix-node--out .aix-node__btn { grid-template-areas: "ico" "name"; min-height: 7.75rem; }
  .aix-node__btn small { font-size: 0.64rem; line-height: 1.45; }
  .aix-hub { width: min(100%, 16rem); min-height: 9.5rem; }
  .aix-meter { margin-top: 1.5rem; border-radius: 20px; padding: 0.85rem; }
}

@media (max-width: 420px) {
  .aix-wire { padding: 1rem 0.65rem; }
  .aix-wire__column { gap: 0.4rem; }
  .aix-node__btn,
  .aix-node--out .aix-node__btn { font-size: 0.76rem; padding-inline: 0.25rem; border-radius: 12px; }
  .aix-node__btn small { font-size: 0.6rem; }
  .aix-node__ico { width: 22px; height: 22px; }
  .aix-meter { gap: 0.5rem; }
  .aix-meter__ico { display: none; }
  .aix-wire #aix-wire-all { margin-left: 0; }
}

/* ===========================================================================
   4 · ANSWER TRACE TIMELINE
   =========================================================================== */

/* Transparency: one centre line and one accent; no shifting active marker. */
.aix-trace {
  background: var(--aix-paper);
  padding: clamp(4rem, 8vw, 7rem) 0;
  --aix-trace-accent: #6d37cf;
}
.aix-trace__workspace {
  min-width: 0;
  padding: clamp(1rem, 3vw, 2.25rem);
  border: 1px solid #e7e3ef;
  border-radius: 24px;
  background: #fff;
}
.aix-trace__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.aix-trace__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--aix-mute);
}
.aix-trace__eyebrow svg, .aix-steps__receipt svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}
.aix-trace__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.5rem 0.85rem;
  border: 1px solid #e8e0f5;
  border-radius: 999px;
  background: #f7f3fd;
  color: var(--aix-trace-accent);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.aix-trace__play[hidden] { display: none; }
.aix-trace__play-icon {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
}
.aix-trace__play[aria-pressed="true"] .aix-trace__play-icon {
  width: 8px;
  height: 10px;
  border: 0;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.aix-steps {
  --aix-dot-size: 48px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-block: clamp(1.5rem, 3vw, 2.25rem) 1.75rem;
  padding: 0;
}
.aix-steps__rail {
  position: absolute;
  top: calc(var(--aix-dot-size) / 2 - 1px);
  left: 10%;
  right: 10%;
  height: 2px;
  background: #e7e1ee;
  border-radius: 2px;
  overflow: hidden;
}
.aix-steps__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--aix-trace-accent);
  transition: width 320ms ease;
}
.aix-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--aix-dot-size) auto;
  justify-items: center;
  align-content: start;
  gap: 0.65rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.aix-step__dot {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--aix-dot-size);
  height: var(--aix-dot-size);
  border: 1px solid #ddd5eb;
  border-radius: 50%;
  background: #fff;
  color: #6c6380;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.aix-step__label { color: var(--aix-mute); font-size: 0.94rem; font-weight: 600; line-height: 1.35; }
.aix-step.is-complete .aix-step__dot { background: #f0e8fa; color: var(--aix-trace-accent); border-color: #e2d5f4; }
.aix-step:hover .aix-step__dot { border-color: var(--aix-trace-accent); }
.aix-step.is-on .aix-step__dot { background: var(--aix-trace-accent); color: #fff; border-color: var(--aix-trace-accent); }
.aix-step.is-on .aix-step__label { color: var(--aix-trace-accent); }
.aix-step:focus-visible { outline: none; }
.aix-step:focus-visible .aix-step__dot { outline: 3px solid #a78bd5; outline-offset: 4px; }
.aix-steps__panels { display: grid; min-width: 0; }
.aix-steps__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(100px, 150px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  min-width: 0;
  padding: clamp(1.25rem, 2.8vw, 2rem);
  border: 1px solid #ece6f3;
  border-radius: 18px;
  background: #faf8fd;
  visibility: hidden;
  pointer-events: none;
}
.aix-steps__panel.is-on { visibility: visible; pointer-events: auto; }
.aix-steps__panel.is-swap .aix-steps__copy { animation: aix-trace-in 240ms ease both; }
@keyframes aix-trace-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.aix-steps__stat { text-align: center; padding: 0.65rem 0.25rem; }
.aix-steps__metric { margin: 0; color: var(--aix-trace-accent); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.aix-steps__unit { margin: 0.45rem 0 0; color: var(--aix-mute); font-size: 0.95rem; line-height: 1.4; }
.aix-steps__copy { min-width: 0; }
.aix-steps__overline { color: var(--aix-trace-accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 0.45rem; }
.aix-steps__title { color: var(--aix-ink); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; margin: 0; }
.aix-steps__body { margin: 0.7rem 0 0; line-height: 1.65; color: var(--aix-mute); font-size: 1.02rem; max-width: 54em; }
.aix-steps__receipt { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; color: var(--aix-trace-accent); font-size: 0.83rem; font-weight: 600; }
.aix-trace__play:focus-visible, .aix-steps__panel:focus-visible { outline: 3px solid #a78bd5; outline-offset: 4px; }

/* Catalogue: perspective on the button, rotation on the rotor, two real faces. */
.aix-matrix {
  background:
    radial-gradient(1000px 520px at 90% 0%, rgba(67, 210, 224, 0.1), transparent 55%),
    #fff;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.aix-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}

.aix-pill {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.55em 1.35em;
  border-radius: 999px;
  border: 1.5px solid rgba(8, 10, 43, 0.12);
  background: #fff;
  color: var(--aix-mute);
  cursor: pointer;
  transition: all 0.25s ease;
}

.aix-pill:hover {
  border-color: var(--aix-violet);
  color: var(--aix-violet);
  transform: translateY(-1px);
}

.aix-pill.is-on {
  background: var(--aix-navy);
  border-color: var(--aix-navy);
  color: #fff;
  box-shadow: none;
}

.aix-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}
.aix-tile {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--aix-r);
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--aix-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  perspective: 1400px;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.aix-tile__rotor {
  display: grid;
  min-width: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* Do not add overflow:hidden, opacity or filters here: these flatten 3D. */
  overflow: visible;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 600ms cubic-bezier(0.22, 0.68, 0.18, 1);
}
.aix-tile__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  min-height: 246px;
  height: 100%;
  padding: clamp(1.25rem, 2vw, 1.65rem);
  border-radius: inherit;
  border: 1px solid #e6e2ee;
  background: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow-wrap: anywhere;
  box-shadow: none;
  transition: border-color 200ms ease;
}
.aix-tile__face--front { transform: rotateY(0deg) translateZ(1px); }
.aix-tile__face--back {
  background: #101032;
  color: #fff;
  border-color: #101032;
  transform: rotateY(180deg) translateZ(1px);
}
.aix-tile.is-flipped .aix-tile__rotor { transform: rotateY(180deg); }
.aix-tile:hover .aix-tile__face--front { border-color: #bba1e4; }
.aix-tile:focus-visible { outline: 3px solid #9362df; outline-offset: 4px; }
.aix-tile__ico { width: 42px; height: 42px; padding: 9px; flex-shrink: 0; border-radius: 12px; color: var(--aix-violet); background: #f1e9fe; }
.aix-tile__h { display: block; margin: 0.1rem 0 0; color: var(--aix-ink); font-size: 1.22rem; font-weight: 600; line-height: 1.3; }
.aix-tile__p { display: block; margin: 0; color: var(--aix-mute); font-size: 1rem; line-height: 1.6; }
.aix-tile__hint { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin-top: auto; padding-top: 0.65rem; color: #7041ba; font-size: 0.85rem; font-weight: 600; line-height: 1.4; }
.aix-tile__eyebrow { font-size: 1rem; line-height: 1.4; color: #cfc7df; }
.aix-tile__metric { font-size: clamp(2.25rem, 3.8vw, 3.3rem); font-weight: 700; line-height: 1.1; color: #64d9e2; margin-top: 0.3rem; }
.aix-tile__metric-label { font-size: 1.12rem; line-height: 1.4; color: #fff; }
.aix-tile__face--back .aix-tile__hint { color: #d9c3ff; }
.aix-tile[hidden], .aix-tile.is-hidden { display: none; }

/* Guardrail switchboard (unchanged). */
.aix-guard {
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(123, 47, 247, 0.28), transparent 60%),
    linear-gradient(180deg, var(--aix-navy), var(--aix-navy-2));
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.aix-guard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.aix-switches {
  display: grid;
  gap: 0.9rem;
}

.aix-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1em;
  align-items: center;
  padding: 1.15rem 1.35rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.aix-switch:hover {
  transform: translateY(-2px);
  border-color: rgba(67, 210, 224, 0.4);
}

.aix-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.aix-switch__track {
  position: relative;
  width: 52px;
  height: 29px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background-color 0.3s ease;
  flex: none;
}

.aix-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}

.aix-switch input:checked + .aix-switch__track {
  background: var(--aix-grad);
}

.aix-switch input:checked + .aix-switch__track .aix-switch__knob {
  transform: translateX(23px);
  box-shadow: 0 6px 18px rgba(123, 47, 247, 0.5);
}

.aix-switch input:focus-visible + .aix-switch__track {
  outline: 2px solid var(--aix-cyan);
  outline-offset: 3px;
}

.aix-switch__text b {
  display: block;
  font-size: 1.05rem;
  color: #fff;
}

.aix-switch__text small {
  display: block;
  margin-top: 0.2em;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.aix-policy {
  position: sticky;
  top: 100px;
  border-radius: var(--aix-r);
  border: 1px solid rgba(123, 47, 247, 0.4);
  background: rgba(6, 8, 32, 0.88);
  box-shadow: var(--aix-shadow-deep);
  overflow: hidden;
}

.aix-policy__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85em 1.25em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.aix-policy__badge {
  padding: 0.32em 1em;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: rgba(67, 210, 224, 0.16);
  color: var(--aix-cyan);
  transition: all 0.35s ease;
}

.aix-policy__badge[data-level="essential"] {
  background: rgba(240, 164, 0, 0.18);
  color: var(--aix-gold);
}

.aix-policy__badge[data-level="strict"] {
  background: rgba(178, 23, 186, 0.2);
  color: #e08ae6;
}

.aix-policy__code {
  margin: 0;
  padding: 1.35rem 1.5rem;
  min-height: 230px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.84rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.8);
  white-space: pre-wrap;
}

.aix-policy__code .on {
  color: var(--aix-cyan);
}

.aix-policy__code .off {
  color: rgba(255, 255, 255, 0.28);
  text-decoration: line-through;
}

.aix-policy__meter {
  height: 6px;
  margin: 0 1.5rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.aix-policy__meter span {
  display: block;
  height: 100%;
  width: 75%;
  border-radius: 4px;
  background: var(--aix-grad);
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.aix-policy__note {
  margin: 1rem 1.5rem 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.aix-policy__note b {
  color: var(--aix-cyan);
}

/* ===========================================================================
   7 · ROI CALCULATOR
   =========================================================================== */

/* Business case: no panel halo, arc glow or rotated SVG text. */
.aix-roi { background: var(--aix-paper); padding: clamp(4rem, 8vw, 7rem) 0; }
.aix-roi__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.aix-sliders { display: grid; gap: 1.65rem; align-content: center; min-width: 0; padding: clamp(1.25rem, 3vw, 2.2rem); border-radius: var(--aix-r); background: #fff; border: 1px solid #e9e5ef; box-shadow: none; }
.aix-range { display: block; min-width: 0; }
.aix-range__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem; align-items: baseline; margin-bottom: 0.75rem; }
.aix-range__top b { color: var(--aix-ink); font-size: 1.02rem; line-height: 1.4; }
.aix-range__top output { color: var(--aix-violet); font-size: 1.45rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.aix-range input[type="range"] { display: block; -webkit-appearance: none; appearance: none; width: 100%; margin: 0.8rem 0; height: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--aix-violet) var(--fill, 50%), #e4e1e9 var(--fill, 50%)); cursor: pointer; }
.aix-range input[type="range"]:focus-visible { outline: 3px solid #b498e6; outline-offset: 7px; }
.aix-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border: 3px solid var(--aix-violet); border-radius: 50%; background: #fff; box-shadow: none; cursor: grab; }
.aix-range input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--aix-violet); border-radius: 50%; background: #fff; box-shadow: none; cursor: grab; }
.aix-roi__assume { margin: 0.2rem 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--aix-mute); }
.aix-roi__panel { display: grid; justify-items: center; align-content: center; gap: 1.35rem; min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem); border: 0; border-radius: var(--aix-r); background: #0d1030; box-shadow: none; filter: none; }
.aix-roi__visual { display: grid; justify-items: center; gap: 0.65rem; width: 100%; min-width: 0; }
.aix-gauge { position: relative; width: min(13.5rem, 100%); aspect-ratio: 1; flex-shrink: 0; border: 0; box-shadow: none; filter: none; }
.aix-donut { display: block; width: 100%; height: 100%; overflow: visible; transform: none; filter: none; box-shadow: none; }
.aix-donut__bg { fill: none; stroke: #292d4a; stroke-width: 10; }
.aix-donut__arc { fill: none; stroke: var(--aix-cyan); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.725635973; stroke-dashoffset: 124.15574167; filter: none; }
.aix-donut__label { position: absolute; inset: 19%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; }
.aix-donut__pct { display: block; color: #fff; font-size: 2.65rem; line-height: 1; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.aix-donut__cap { display: block; margin: 0; color: #c4c6d6; font-size: 0.88rem; line-height: 1.4; letter-spacing: 0.015em; text-align: center; text-transform: none; }
.aix-roi__nums { display: grid; gap: 0.8rem; width: 100%; min-width: 0; margin: 0; }
.aix-roi__nums > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; min-width: 0; padding: 0.9rem 1rem; border-radius: 12px; border: 0; background: #1b1e3c; }
.aix-roi__nums dt { min-width: 0; color: #c4c6d6; font-size: 0.95rem; line-height: 1.45; }
.aix-roi__nums dd { margin: 0; color: var(--aix-cyan); font-size: 1.45rem; font-weight: 700; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aix-roi__panel .aix-btn { min-width: 0; width: 100%; padding: 0.9em 1.1em; font-size: 0.96rem; line-height: 1.45; text-align: center; white-space: normal; box-shadow: none; }
.aix-roi__panel .aix-btn:hover { box-shadow: none; transform: none; }
.aix-roi__panel .aix-btn span { flex-shrink: 0; }

/* Delivery: flat surfaces in every state, including pointer hover. */
.aix-road { position: relative; background: #fff; padding: clamp(4rem, 8vw, 7rem) 0 clamp(4.5rem, 8vw, 7.5rem); }
.aix-road__wrap { position: relative; background: transparent; border: 0; box-shadow: none; }
.aix-road__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px; margin: -6px; scrollbar-width: none; background: transparent; border: 0; box-shadow: none; }
.aix-road__rail::-webkit-scrollbar { display: none; }
.aix-phase { scroll-snap-align: start; display: grid; align-content: start; min-width: 0; padding: clamp(1.25rem, 2.2vw, 1.7rem); border-radius: var(--aix-r); border: 0; background: #f5f3f9; box-shadow: none; cursor: pointer; transition: background-color 220ms ease, color 220ms ease; }
.aix-phase:hover { background: #eee9f7; transform: none; box-shadow: none; }
.aix-phase.is-open { background: #0d1030; border: 0; box-shadow: none; }
.aix-phase__heading { margin: 0; font: inherit; }
.aix-phase__toggle { position: relative; display: grid; gap: 0.65rem; width: 100%; min-width: 0; padding: 0 1.4rem 0 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aix-phase__toggle:focus-visible { outline: 3px solid #9d79df; outline-offset: 6px; border-radius: 3px; }
.aix-phase__idx { color: var(--aix-violet); font-size: 0.76rem; line-height: 1.4; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.aix-phase.is-open .aix-phase__idx { color: var(--aix-cyan); }
.aix-phase__title { color: var(--aix-ink); font-size: 1.45rem; line-height: 1.25; font-weight: 700; }
.aix-phase.is-open .aix-phase__title { color: #fff; }
.aix-phase__when { color: var(--aix-mute); font-size: 0.94rem; line-height: 1.4; font-weight: 600; }
.aix-phase.is-open .aix-phase__when { color: #c6c0dd; }
.aix-phase__indicator { position: absolute; top: 0.2rem; right: 0; width: 12px; height: 12px; color: #8164a7; }
.aix-phase__indicator::before, .aix-phase__indicator::after { content: ""; position: absolute; top: 5px; left: 0; width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.aix-phase__indicator::after { transform: rotate(90deg); transition: transform 220ms ease; }
.aix-phase.is-open .aix-phase__indicator { color: var(--aix-cyan); }
.aix-phase.is-open .aix-phase__indicator::after { transform: none; }
.aix-phase__body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 300ms ease, visibility 0s 300ms; }
.aix-phase.is-open .aix-phase__body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 300ms ease, visibility 0s; }
.aix-phase__body-in { min-height: 0; overflow: hidden; }
.aix-phase__body p { margin: 1rem 0 0; color: var(--aix-mute); font-size: 1rem; line-height: 1.65; }
.aix-phase.is-open .aix-phase__body p { color: #c6c7d6; }
.aix-phase .aix-tags { margin-top: 1.1rem; padding: 0; gap: 0.45rem; }
.aix-phase .aix-tags li { max-width: 100%; white-space: normal; line-height: 1.4; border: 0; }
.aix-phase.is-open .aix-tags li { color: #83dbe3; background: #182c44; border: 0; }
.aix-road__nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.aix-road__status { color: var(--aix-mute); font-size: 0.87rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aix-road__progress { flex: 1; height: 3px; border-radius: 4px; background: #e9e4f1; overflow: hidden; }
.aix-road__progress span { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--aix-violet); transition: width 300ms ease; }
.aix-road__nav .aix-btn { min-width: 42px; min-height: 42px; padding: 0; justify-content: center; border: 0; background: #f0e9fc; box-shadow: none; transform: none; }
.aix-road__nav .aix-btn:hover { background: #e7dafb; color: var(--aix-violet); box-shadow: none; transform: none; }
.aix-road__nav .aix-btn:disabled { opacity: 0.4; cursor: default; }
.aix-road__nav .aix-btn:focus-visible { outline: 3px solid #9d79df; outline-offset: 3px; }

/* Magnetic CTA (unchanged). */
.aix-cta {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(4.5rem, 9vw, 8rem);
  background: #fff;
}

.aix-cta__card {
  position: relative;
  width: var(--aix-shell);
  margin-inline: auto;
  padding: clamp(2.8rem, 6vw, 5rem) clamp(1.6rem, 5vw, 4.5rem);
  border-radius: clamp(26px, 3vw, 40px);
  background:
    radial-gradient(700px 380px at 15% -20%, rgba(123, 47, 247, 0.35), transparent 60%),
    radial-gradient(700px 380px at 90% 120%, rgba(178, 23, 186, 0.3), transparent 60%),
    linear-gradient(160deg, var(--aix-navy), var(--aix-navy-2));
  border: 1px solid rgba(123, 47, 247, 0.35);
  box-shadow: var(--aix-shadow-deep);
  overflow: hidden;
  text-align: center;
  display: grid;
  justify-items: center;
}

.aix-cta__card .aix-h2 {
  color: #fff;
  max-width: 16em;
}

.aix-cta__card .aix-sub {
  color: rgba(255, 255, 255, 0.72);
  max-width: 42em;
}

.aix-cta__card .aix-kicker {
  color: var(--aix-cyan);
}

.aix-cta__glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, rgba(67, 210, 224, 0.16), transparent);
  animation: aix-pulse 7s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes aix-pulse {
  from { transform: scale(0.85) rotate(0deg); opacity: 0.65; }
  to { transform: scale(1.15) rotate(18deg); opacity: 1; }
}

.aix-cta__note {
  margin: 1.6rem 0 0;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

@media (max-width: 1100px) {
  .aix-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 900px) {
  :root {
    --aix-shell: min(92%, 1320px);
  }

  .aix-hero__in {
    /* Same tablet/phone gutters as hero-unified.css. */
    width: calc(100% - 2 * var(--gutter, 1rem));
    grid-template-columns: 1fr;
  }

  .aix-console {
    max-width: 640px;
  }

  .aix-guard__grid,
  .aix-roi__grid {
    grid-template-columns: 1fr;
  }

  .aix-policy {
    position: static;
  }

  .aix-layer__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .aix-layer__tag {
    display: none;
  }


}

@media (max-width: 640px) {
  .aix-h1 {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .aix-stats {
    gap: 1.2rem;
  }

  .aix-tiles {
    grid-template-columns: 1fr;
  }

  .aix-steps { --aix-dot-size: 40px; margin-bottom: 1.25rem; }
  .aix-step__label { font-size: 0.75rem; }
  .aix-step__dot { font-size: 0.76rem; }
  .aix-steps__panel { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; padding: 1.15rem; }
  .aix-steps__stat { display: flex; align-items: baseline; justify-content: flex-start; gap: 0.5rem; padding: 0; text-align: left; }
  .aix-steps__metric { font-size: 2.5rem; }
  .aix-steps__unit { margin: 0; }
  .aix-trace__eyebrow { font-size: 0.85rem; }
  .aix-trace__play { font-size: 0.8rem; }
  .aix-roi__nums > div { padding: 0.9rem 0.8rem; }
  .aix-roi__nums dd { font-size: 1.3rem; }
  .aix-road__nav { gap: 0.75rem; }

  .aix-console__screen {
    min-height: 300px;
  }

  .aix-cta__card {
    width: var(--aix-shell);
    text-align: left;
    justify-items: start;
  }

  .aix-actions--center {
    justify-content: flex-start;
  }
}

/* ---------- motion & contrast preferences -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aix *,
  .aix *::before,
  .aix *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
  }

  .aix-rise {
    opacity: 1;
    transform: none;
  }

  .aix-wire__path.is-live {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* Narrow layouts: allow the result label and value their own rows. */
@media (max-width: 380px) {
  .aix-trace__toolbar { align-items: flex-start; }
  .aix-trace__play { min-height: 36px; }
  .aix-roi__nums > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .aix-tile__rotor { transition: none !important; }
  .aix-steps__panel.is-swap .aix-steps__copy { animation: none !important; }
}