:root {
  --agent-night: #04111d;
  --agent-night-deep: #020a12;
  --agent-blue: #0d2939;
  --agent-paper: #f7f2e8;
  --agent-ink: #17242a;
  --agent-salmon: #e96653;
  --agent-salmon-light: #ff8c72;
  --agent-salmon-deep: #b9453e;
  --agent-salmon-rgb: 233, 102, 83;
  --agent-salmon-light-rgb: 255, 140, 114;
  --agent-salmon-deep-rgb: 185, 69, 62;
  --agent-orange: #ef7f2f;
  --agent-orange-rgb: 239, 127, 47;
  --agent-yellow: #f4ab0b;
  --agent-warm-gradient: linear-gradient(145deg, var(--agent-salmon) 0%, var(--agent-salmon) 58%, var(--agent-orange) 82%, var(--agent-yellow) 100%);
  --agent-cyan: #75dfeb;
  --agent-line: rgba(222, 242, 242, 0.24);
  --agent-cut: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.agent-page {
  background: var(--agent-night-deep);
}

.agent-page main {
  display: block;
  overflow: clip;
}

.agent-page .skip-link {
  position: fixed;
  z-index: 999;
  top: 10px;
  left: 10px;
  padding: 12px 18px;
  color: var(--agent-night-deep);
  background: var(--agent-paper);
  transform: translateY(-150%);
}

.agent-page .skip-link:focus {
  transform: translateY(0);
}

.agent-page h1,
.agent-page h2,
.agent-page h3,
.agent-page p {
  text-wrap: pretty;
}

.agent-page button,
.agent-page a {
  -webkit-tap-highlight-color: transparent;
}

.agent-sp-break { display: none; }
.agent-nowrap { white-space: nowrap; }

.agent-page .header {
  position: absolute;
}

.agent-arrival {
  position: relative;
  isolation: isolate;
  min-height: max(760px, 100svh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--agent-night);
}

.agent-arrival__scene,
.agent-arrival__scene img,
.agent-arrival__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.agent-arrival__scene {
  z-index: -4;
  overflow: hidden;
  background: #061725;
}

.agent-arrival__scene img {
  display: block;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  animation: agent-scene-arrive 2.4s cubic-bezier(.16, 1, .3, 1) both;
}

.agent-arrival__veil {
  z-index: -3;
  background:
    radial-gradient(ellipse at 68% 29%, rgba(var(--agent-salmon-rgb), 0.14), transparent 36%),
    linear-gradient(90deg, rgba(2, 10, 18, 0.94) 0%, rgba(2, 10, 18, 0.82) 28%, rgba(2, 10, 18, 0.34) 50%, rgba(2, 10, 18, 0.04) 78%),
    linear-gradient(180deg, rgba(1, 9, 16, 0.28), transparent 52%, rgba(1, 8, 14, 0.76));
}

.agent-arrival::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(2, 10, 18, 0.72));
}

.agent-arrival__signal {
  position: absolute;
  z-index: 1;
  top: 23%;
  right: clamp(34px, 5vw, 86px);
  width: 58px;
  height: 44px;
  border-top: 1px solid rgba(117, 223, 235, 0.52);
  border-right: 1px solid rgba(117, 223, 235, 0.52);
}

.agent-arrival__signal::before {
  content: "ARRIVAL";
  position: absolute;
  top: -17px;
  right: 0;
  color: rgba(220, 242, 241, 0.62);
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
}

.agent-arrival__signal i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4px;
  height: 4px;
  background: var(--agent-cyan);
  box-shadow: 0 0 14px rgba(117, 223, 235, 0.9);
  animation: agent-signal-trace 4s steps(5, end) infinite;
}

.agent-arrival__signal i:nth-child(2) { animation-delay: -1.3s; }
.agent-arrival__signal i:nth-child(3) { animation-delay: -2.6s; }

.agent-arrival__inner {
  width: min(calc(100% - 64px), 1280px);
  min-height: 640px;
  margin: 80px auto 0;
  padding: clamp(68px, 9vh, 110px) 0 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.agent-arrival__copy {
  width: min(610px, 52vw);
}

.agent-arrival__copy h1 {
  max-width: 9.6em;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: 0.025em;
  text-shadow: 0 3px 28px rgba(0, 3, 7, 0.48);
}

.agent-arrival__copy h1 em,
.agent-section-heading h2 em,
.agent-skills__opening h2 em,
.agent-craft__copy h2 em,
.agent-contact h2 em {
  color: var(--agent-salmon);
  font-style: normal;
}

.agent-arrival__copy h1 em {
  text-shadow: 0 5px 34px rgba(var(--agent-salmon-rgb), 0.22);
}

.agent-arrival__copy > p {
  max-width: 40em;
  margin-top: 30px;
  color: rgba(241, 245, 238, 0.88);
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: 0.035em;
}

.agent-primary {
  position: relative;
  min-width: 260px;
  min-height: 54px;
  margin-top: 36px;
  padding: 0 24px 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  color: #1d1517;
  background: var(--agent-warm-gradient);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: 0 20px 48px rgba(var(--agent-salmon-deep-rgb), 0.24), inset 0 1px rgba(255, 255, 255, 0.18);
}

.agent-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.5) 48%, transparent 70%);
  transform: translateX(-120%);
}

.agent-primary:hover::before,
.agent-primary:focus-visible::before {
  animation: agent-button-pass 620ms cubic-bezier(.16, 1, .3, 1);
}

.agent-primary:hover .arrow,
.agent-primary:focus-visible .arrow { transform: translateX(5px); }
.agent-primary .arrow { transition: transform 260ms ease; }
.agent-primary:focus-visible { outline: 2px solid var(--agent-paper); outline-offset: 5px; }
.agent-primary:active { transform: translateY(1px); }

.agent-arrival__facts {
  margin-top: 72px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  color: rgba(231, 241, 238, 0.7);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.agent-arrival__facts span {
  min-height: 34px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-left: 1px solid rgba(var(--agent-salmon-rgb), 0.5);
  background: rgba(3, 15, 25, 0.34);
}

.agent-arrival__facts span:first-child { padding-left: 0; border-left: 0; }

.agent-arrival__next {
  position: absolute;
  z-index: 2;
  right: clamp(32px, 5vw, 76px);
  bottom: 30px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: rgba(236, 242, 237, 0.72);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.agent-arrival__next i {
  position: relative;
  width: 1px;
  height: 30px;
  overflow: hidden;
  background: rgba(247, 242, 232, 0.3);
}

.agent-arrival__next i::after {
  content: "";
  position: absolute;
  inset: -50% 0 auto;
  height: 45%;
  background: var(--agent-salmon);
  animation: agent-next-fall 2s ease-in-out infinite;
}

.agent-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.6fr);
  align-items: end;
  gap: 72px;
}

.agent-section-heading h2,
.agent-craft__copy h2,
.agent-contact h2 {
  font-size: clamp(38px, 4vw, 60px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.025em;
}

.agent-section-heading > p {
  max-width: 37em;
  padding-bottom: 8px;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.03em;
}

.agent-section-heading--light { color: var(--agent-paper); }
.agent-section-heading--light > p,
.agent-section-heading--dark > p { color: rgba(232, 242, 238, 0.74); }
.agent-section-heading--paper { color: var(--agent-ink); }
.agent-section-heading--paper h2 em { color: var(--agent-salmon-deep); }
.agent-section-heading--paper > p { color: rgba(23, 36, 42, 0.68); }
.agent-section-heading--dark { color: var(--agent-paper); }

.agent-pixel-core {
  position: relative;
  width: 56px;
  height: 56px;
  display: block;
  transform: rotate(45deg);
  border: 8px solid var(--agent-salmon-light);
  background: rgba(var(--agent-salmon-rgb), 0.15);
  box-shadow: 0 0 28px rgba(var(--agent-salmon-rgb), 0.5), inset 0 0 16px rgba(var(--agent-salmon-light-rgb), 0.5);
}

.agent-pixel-core::before,
.agent-pixel-core::after,
.agent-pixel-core i,
.agent-pixel-core b {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: currentColor;
  color: var(--agent-salmon);
}

.agent-pixel-core::before { top: -16px; left: -16px; }
.agent-pixel-core::after { right: -16px; bottom: -16px; }
.agent-pixel-core i { top: -16px; right: -16px; background: var(--agent-cyan); }
.agent-pixel-core b { bottom: -16px; left: -16px; background: var(--agent-cyan); }

/* Skill map */
.agent-skills {
  position: relative;
  min-height: max(800px, 100svh);
  padding: clamp(100px, 12vh, 140px) 32px;
  color: var(--agent-ink);
  background:
    radial-gradient(ellipse at 50% 78%, rgba(var(--agent-salmon-rgb), 0.085), transparent 46%),
    linear-gradient(180deg, #faf5ec 0%, var(--agent-paper) 66%, #f6ecdf 100%);
}

.agent-skills::before {
  content: "";
  position: absolute;
  top: 0;
  right: 6%;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--agent-salmon) 28%, var(--agent-orange) 58%, var(--agent-yellow) 76%, transparent);
}

.agent-skills__inner,
.agent-onboarding__inner {
  width: min(100%, 1280px);
  margin: 0 auto;
}

.agent-skills__opening {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.agent-skills__opening h2 {
  max-width: 820px;
  margin: 0 auto;
  font-size: clamp(48px, 4.1vw, 60px);
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: 0.055em;
}

.agent-skills__opening h2 em {
  color: var(--agent-salmon-deep);
  font-style: normal;
}

.agent-skills__copy {
  max-width: 720px;
  margin: 52px auto 0;
  color: rgba(23, 36, 42, 0.68);
  font-size: 16px;
  line-height: 2.25;
  letter-spacing: 0.035em;
}

.agent-skills__copy p { text-wrap: pretty; }
.agent-skills__copy p + p { margin-top: 34px; }
.agent-skills__lead { color: rgba(23, 36, 42, 0.84); font-size: 17px; }
.agent-skill-definition { display: block; margin-bottom: 13px; color: var(--agent-salmon-deep); font-size: 17px; font-weight: 500; line-height: 1.8; }

.skill-map {
  min-height: 430px;
  margin-top: 58px;
  padding: 34px clamp(24px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(270px, 0.85fr) 100px minmax(190px, max-content) minmax(240px, 0.65fr);
  align-items: center;
  color: var(--agent-ink);
  background:
    radial-gradient(ellipse at 86% 50%, rgba(var(--agent-salmon-rgb), 0.12), transparent 34%),
    linear-gradient(90deg, rgba(117, 223, 235, 0.055), transparent 34%, transparent 66%, rgba(var(--agent-salmon-rgb), 0.07)),
    #f3eadf;
  clip-path: var(--agent-cut);
  box-shadow: 0 28px 70px rgba(var(--agent-salmon-deep-rgb), 0.095);
}

.skill-map__sources { display: grid; gap: 12px; }
.skill-source {
  position: relative;
  min-height: 88px;
  padding: 16px 18px;
  display: grid;
  align-content: center;
  gap: 7px;
  border-top: 1px solid rgba(23, 36, 42, 0.2);
  background: rgba(255, 255, 255, 0.34);
}
.skill-source::after { content: ""; position: absolute; top: 50%; right: -15px; width: 15px; height: 1px; background: rgba(23, 36, 42, 0.28); }
.skill-source span { color: var(--agent-salmon-deep); font-size: 14px; }
.skill-source strong { font-size: 14px; font-weight: 500; line-height: 1.6; }

.skill-map__transfer { position: relative; height: 72%; }
.skill-map__transfer::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(23, 36, 42, 0.25); }
.skill-map__transfer i { position: absolute; top: calc(50% - 4px); left: 0; width: 8px; height: 8px; background: var(--agent-salmon); transform: rotate(45deg); animation: skill-transfer 3.6s linear infinite; }
.skill-map__transfer i:nth-child(2) { animation-delay: -1.2s; }
.skill-map__transfer i:nth-child(3) { animation-delay: -2.4s; }

/*
  justify-content:center shrank the column to the text's own width, so the
  label wrapped one character per line however wide the card was. A single
  full-width column plus padding keeps it on one line, and keeps the
  diamond clear of the clipped corners.
*/
.skill-map__core {
  min-height: 220px;
  padding: 30px 20px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  gap: 28px;
  border: 1px solid rgba(var(--agent-salmon-deep-rgb), 0.28);
  background: rgba(255, 255, 255, 0.48);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
/* Fill the cell so an enlarged font wraps inside the card instead of
   collapsing to one character per line. */
.skill-map__core p { width: 100%; font-size: 14px; line-height: 1.75; text-align: center; text-wrap: balance; }
.skill-map__core strong { color: var(--agent-salmon-deep); font-size: 21px; font-weight: 500; }

.skill-map__result {
  position: relative;
  min-height: 210px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid rgba(var(--agent-salmon-deep-rgb), 0.45);
  border-bottom: 1px solid rgba(var(--agent-salmon-deep-rgb), 0.2);
}
.skill-map__result::before { content: ""; position: absolute; top: 50%; left: -70px; width: 70px; height: 1px; background: linear-gradient(90deg, rgba(var(--agent-salmon-deep-rgb), 0.55), rgba(23, 36, 42, 0.24)); }
.skill-map__result span { color: rgba(23, 36, 42, 0.6); font-size: 14px; }
.skill-map__result > strong { margin-top: 8px; color: var(--agent-salmon-deep); font-size: 32px; font-weight: 500; }
.skill-map__result p { margin-top: 22px; font-size: 16px; line-height: 1.9; }

/* Craft */
.agent-craft {
  position: relative;
  isolation: isolate;
  min-height: max(800px, 100svh);
  padding: clamp(100px, 12vh, 140px) 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--agent-paper);
  background: var(--agent-night);
}

.agent-craft__scene,
.agent-craft__scene img,
.agent-craft__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.agent-craft__scene { z-index: -3; }
.agent-craft__scene img { display: block; object-fit: cover; object-position: center; image-rendering: pixelated; filter: saturate(0.72) brightness(0.56); }
.agent-craft__veil { z-index: -2; background: radial-gradient(ellipse at 75% 50%, rgba(var(--agent-salmon-rgb), 0.16), transparent 31%), linear-gradient(90deg, rgba(2, 10, 17, 0.94), rgba(2, 10, 17, 0.72) 53%, rgba(2, 10, 17, 0.5)), linear-gradient(180deg, rgba(2, 10, 17, 0.36), rgba(2, 10, 17, 0.76)); }

.agent-craft__inner {
  width: min(100%, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.75fr);
  align-items: center;
  gap: clamp(70px, 9vw, 130px);
}

.agent-craft__copy h2 { font-size: clamp(38px, 3.5vw, 52px); }
.agent-craft__copy p { max-width: 41em; margin-top: 26px; color: rgba(230, 241, 237, 0.8); font-size: 15px; line-height: 2.05; letter-spacing: 0.03em; }
.agent-craft__copy p + p { margin-top: 18px; }

.agent-craft__forge {
  position: relative;
  min-height: 450px;
}

.agent-craft__forge::before,
.agent-craft__forge::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(var(--agent-salmon-rgb), 0.24);
  transform: rotate(45deg);
}
.agent-craft__forge::before { top: calc(50% - 140px); left: calc(50% - 140px); width: 280px; height: 280px; }
.agent-craft__forge::after { top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; height: 200px; border-color: rgba(117, 223, 235, 0.2); }
.agent-craft__forge::before { box-shadow: 18px 24px 72px rgba(var(--agent-salmon-rgb), 0.12); }

.forge-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 34px;
  transform: translate(-50%, -50%);
}
.forge-core p { color: rgba(241, 245, 238, 0.82); font-size: 16px; line-height: 1.8; text-align: center; }

.forge-line {
  position: absolute;
  z-index: 2;
  width: 150px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(231, 241, 238, 0.64);
}
.forge-line i { font-size: 14px; font-style: normal; }
.forge-line b { position: relative; flex: 1; height: 1px; background: rgba(117, 223, 235, 0.3); }
.forge-line b::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: var(--agent-salmon); transform: rotate(45deg); animation: forge-arrive 3s linear infinite; }
.forge-line--one { top: 15%; left: 0; }
.forge-line--two { top: 15%; right: 0; flex-direction: row-reverse; }
.forge-line--three { bottom: 15%; left: 0; }
.forge-line--four { right: 0; bottom: 15%; flex-direction: row-reverse; }
.forge-line--two b::after { animation-delay: -0.75s; }
.forge-line--three b::after { animation-delay: -1.5s; }
.forge-line--four b::after { animation-delay: -2.25s; }

/* Onboarding route */
/* Cream panel, matching the skills chapter. */
.agent-onboarding {
  min-height: max(860px, 100svh);
  padding: clamp(100px, 12vh, 140px) 32px;
  display: flex;
  align-items: center;
  color: var(--agent-ink);
  background:
    radial-gradient(ellipse at 78% 30%, rgba(var(--agent-salmon-rgb), 0.09), transparent 42%),
    linear-gradient(180deg, #faf5ec 0%, var(--agent-paper) 62%, #f6ecdf 100%);
}

.onboarding-route {
  position: relative;
  margin-top: 68px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
}

.onboarding-route::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--agent-salmon-rgb), 0.28), var(--agent-salmon) 38%, var(--agent-orange) 72%, var(--agent-yellow));
}

.onboarding-route li {
  position: relative;
  min-height: 230px;
  padding: 62px 22px 24px;
  border-right: 1px solid rgba(23, 36, 42, 0.14);
}
.onboarding-route li:last-child { border-right: 0; }
.onboarding-route li::before { content: ""; position: absolute; z-index: 2; top: 19px; left: calc(50% - 7px); width: 14px; height: 14px; background: var(--agent-salmon); transform: rotate(45deg); box-shadow: 0 0 15px rgba(var(--agent-salmon-rgb), 0.35); }
.onboarding-route li:last-child::before { background: #2b7f8c; box-shadow: 0 0 15px rgba(43, 127, 140, 0.35); }
.onboarding-route span { color: var(--agent-salmon-deep); font-size: 17px; }
.onboarding-route p { margin-top: 16px; color: rgba(23, 36, 42, 0.7); font-size: 16px; line-height: 1.9; }

.onboarding-finish {
  width: min(100%, 720px);
  margin: 12px auto 0;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  border-top: 1px solid rgba(var(--agent-salmon-deep-rgb), 0.34);
  border-bottom: 1px solid rgba(43, 127, 140, 0.22);
  background: linear-gradient(110deg, rgba(var(--agent-salmon-rgb), 0.1), rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.42));
}
.onboarding-finish .agent-pixel-core { width: 42px; height: 42px; border-width: 6px; flex: 0 0 auto; }
.onboarding-finish p { font-size: 16px; line-height: 1.9; }
.onboarding-finish strong { color: var(--agent-salmon-deep); font-size: 20px; font-weight: 500; }

/* Contact */
.agent-contact {
  position: relative;
  isolation: isolate;
  min-height: min(760px, 92svh);
  padding: 120px 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--agent-paper);
  background:
    radial-gradient(ellipse at 18% 68%, rgba(var(--agent-salmon-rgb), 0.15), transparent 38%),
    radial-gradient(ellipse at 82% 38%, rgba(var(--agent-salmon-rgb), 0.08), transparent 31%),
    linear-gradient(180deg, #071820, #020a12);
}

.agent-contact__inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1180px);
  margin: 0 auto;
}

.agent-contact h2 { max-width: 15em; font-size: clamp(38px, 3.7vw, 56px); }
.agent-contact p { max-width: 43em; margin-top: 30px; color: rgba(228, 240, 236, 0.75); font-size: 15px; line-height: 2; }

.agent-contact__orbit {
  position: absolute;
  top: 50%;
  right: -7vw;
  width: min(44vw, 620px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid rgba(var(--agent-salmon-rgb), 0.22);
}
.agent-contact__orbit::before,
.agent-contact__orbit::after { content: ""; position: absolute; border: 1px solid rgba(117, 223, 235, 0.16); }
.agent-contact__orbit::before { inset: 14%; }
.agent-contact__orbit::after { inset: 31%; border-color: rgba(var(--agent-salmon-rgb), 0.35); }
.agent-contact__orbit i,
.agent-contact__orbit b { position: absolute; width: 12px; height: 12px; background: var(--agent-salmon); box-shadow: 0 0 18px rgba(var(--agent-salmon-rgb), 0.58); }
.agent-contact__orbit i:first-child { top: -6px; left: 48%; }
.agent-contact__orbit i:nth-child(2) { right: -6px; top: 48%; background: var(--agent-cyan); }
.agent-contact__orbit i:nth-child(3) { bottom: -6px; left: 48%; }
.agent-contact__orbit b { top: 48%; left: 48%; width: 22px; height: 22px; background: var(--agent-salmon-light); }

/* Motion */
@keyframes agent-scene-arrive {
  from { opacity: 0.74; transform: scale(1.045); filter: brightness(0.72) saturate(0.84); }
  to { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
}
@keyframes agent-signal-trace { 0%, 100% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 50% { transform: translate(-54px, 0); opacity: 0.9; } 51% { transform: translate(-54px, 40px); } 90% { transform: translate(0, 40px); opacity: 0.7; } }
@keyframes agent-button-pass { to { transform: translateX(120%); } }
@keyframes agent-next-fall { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(340%); opacity: 0; } }
@keyframes skill-transfer { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes forge-arrive { 0% { left: 0; opacity: 0; } 16%, 82% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }

@media (max-width: 1050px) {
  .agent-arrival__copy { width: min(590px, 60vw); }
  .skill-map { grid-template-columns: minmax(240px, 0.85fr) 70px minmax(170px, max-content) minmax(220px, 0.65fr); padding-inline: 28px; }
  .agent-craft__inner { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr); gap: 56px; }
  .onboarding-route li { padding-inline: 15px; }
}

@media (max-width: 900px) {
  .agent-section-heading { grid-template-columns: 1fr; gap: 22px; }
  .agent-section-heading > p { max-width: 46em; }
  .agent-skills__opening h2 { font-size: 44px; }
  .agent-skills__copy { max-width: 660px; }
  .skill-map { grid-template-columns: minmax(240px, 1fr) 60px minmax(170px, max-content); grid-template-rows: auto auto; }
  .skill-map__result { grid-column: 1 / -1; min-height: auto; margin-top: 20px; text-align: center; }
  .skill-map__result::before { display: none; }
  .skill-map > .skill-map__transfer + .skill-map__core + .skill-map__result::before { display: none; }
  .agent-craft__inner { grid-template-columns: 1fr; }
  .agent-craft__copy { max-width: 760px; }
  .agent-craft__forge { width: min(100%, 560px); margin: 0 auto; }
  .onboarding-route { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .onboarding-route li { scroll-snap-align: start; }
}

@media (max-width: 767px) {
  .agent-page .header { min-height: 68px; padding: 0 18px; }
  .agent-arrival { min-height: max(720px, 100svh); }
  .agent-arrival__scene img { object-position: 64% center; }
  .agent-arrival__veil {
    background:
      radial-gradient(ellipse at 68% 24%, rgba(var(--agent-salmon-rgb), 0.13), transparent 38%),
      linear-gradient(180deg, rgba(2, 10, 18, 0.55) 0%, rgba(2, 10, 18, 0.22) 25%, rgba(2, 10, 18, 0.72) 58%, rgba(2, 10, 18, 0.96) 100%),
      linear-gradient(90deg, rgba(2, 10, 18, 0.3), rgba(2, 10, 18, 0.08));
  }
  .agent-arrival__signal { top: 18%; right: 18px; transform: scale(0.78); transform-origin: top right; }
  .agent-arrival__inner { width: calc(100% - 36px); min-height: 700px; margin-top: 68px; padding: 260px 0 82px; justify-content: flex-end; }
  .agent-arrival__copy { width: 100%; }
  .agent-arrival__copy h1 { max-width: none; font-size: clamp(35px, 10.2vw, 44px); line-height: 1.38; text-shadow: 0 3px 22px rgba(0, 3, 7, 0.75); }
  .agent-arrival__copy > p { margin-top: 20px; font-size: 14.5px; line-height: 1.95; }
  .agent-primary { width: 100%; min-width: 0; min-height: 52px; margin-top: 28px; }
  .agent-arrival__facts { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .agent-arrival__facts span { min-height: 42px; padding: 0 7px; justify-content: center; font-size: 9px; letter-spacing: 0.04em; text-align: center; }
  .agent-arrival__facts span:first-child { padding-left: 7px; }
  .agent-arrival__next { display: none; }

  .agent-section-heading h2,
  .agent-skills__opening h2,
  .agent-craft__copy h2,
  .agent-contact h2 { font-size: clamp(30px, 8.5vw, 38px); line-height: 1.48; }
  .agent-section-heading > p { padding-bottom: 0; font-size: 14px; line-height: 1.9; }
  .agent-skills__opening h2 { line-height: 1.62; letter-spacing: 0.04em; }
  .agent-skills__copy { margin-top: 42px; font-size: 14px; line-height: 2.2; letter-spacing: 0.025em; }
  .agent-skills__copy p + p { margin-top: 28px; }
  .agent-skills__lead { font-size: 15px; }
  .agent-skill-definition { margin-bottom: 10px; font-size: 15.5px; line-height: 1.85; }

  .agent-connect,
  .agent-skills,
  .agent-craft,
  .agent-onboarding { min-height: auto; padding: 86px 18px; }

  .skill-map { min-height: auto; margin-top: 42px; padding: 26px 18px 30px; grid-template-columns: 1fr; grid-template-rows: auto 72px auto 52px auto; }
  .skill-map__sources { grid-row: 1; }
  .skill-source { min-height: 76px; }
  .skill-source::after { display: none; }
  .skill-map__transfer { grid-row: 2; height: 72px; width: 1px; margin: 0 auto; background: rgba(23, 36, 42, 0.24); }
  .skill-map__transfer::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .skill-map__transfer i { top: 0; left: -3px; animation-name: skill-transfer-mobile; }
  .skill-map__core { grid-row: 3; min-height: 200px; }
  .skill-map__result { grid-row: 5; grid-column: 1; margin-top: 0; padding: 24px 12px; text-align: center; }
  .skill-map::after { content: ""; grid-row: 4; width: 1px; height: 52px; margin: 0 auto; background: linear-gradient(180deg, var(--agent-salmon), rgba(117, 223, 235, 0.55)); }

  .agent-craft { padding-block: 94px; }
  .agent-craft__scene img { object-position: 57% center; }
  .agent-craft__veil { background: radial-gradient(ellipse at 50% 66%, rgba(var(--agent-salmon-rgb), 0.14), transparent 36%), linear-gradient(180deg, rgba(2, 10, 17, 0.88), rgba(2, 10, 17, 0.68) 47%, rgba(2, 10, 17, 0.9)); }
  .agent-craft__inner { gap: 58px; }
  .agent-craft__copy p { margin-top: 20px; font-size: 14px; line-height: 1.95; }
  .agent-craft__copy h2 { font-size: 31px; }
  .agent-craft__forge { min-height: 360px; }
  .agent-craft__forge::before { top: calc(50% - 105px); left: calc(50% - 105px); width: 210px; height: 210px; }
  .agent-craft__forge::after { top: calc(50% - 74px); left: calc(50% - 74px); width: 148px; height: 148px; }
  .forge-line { width: 112px; }
  .forge-line--one,
  .forge-line--three { left: -2px; }
  .forge-line--two,
  .forge-line--four { right: -2px; }
  .forge-line i { font-size: 12px; }
  .forge-core p { font-size: 13px; }

  .onboarding-route { margin-top: 46px; display: grid; grid-template-columns: 1fr; overflow: visible; padding-left: 34px; }
  .onboarding-route::before { top: 0; bottom: 0; left: 8px; right: auto; width: 1px; height: auto; }
  .onboarding-route li { min-height: 136px; padding: 3px 0 32px 10px; border-right: 0; }
  .onboarding-route li::before { top: 4px; left: -26px; }
  .onboarding-route span { font-size: 18px; }
  .onboarding-route p { margin-top: 9px; font-size: 16px; }
  .onboarding-finish { margin-top: 12px; padding: 28px 18px; display: grid; justify-items: center; gap: 32px; text-align: center; }
  .onboarding-finish p { font-size: 14px; }
  .onboarding-finish strong { font-size: 18px; }

  .agent-contact { min-height: 660px; padding: 100px 18px; }
  .agent-sp-break { display: block; }
  .agent-contact h2 { max-width: 11em; }
  .agent-contact p { margin-top: 24px; font-size: 14px; }
  .agent-contact__orbit { top: 28%; right: -260px; width: 470px; opacity: 0.62; }
}

@media (max-width: 370px) {
  .agent-arrival__copy h1 { font-size: 33px; }
  .agent-arrival__facts span { font-size: 8px; }
}

@keyframes skill-transfer-mobile { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .agent-page *,
  .agent-page *::before,
  .agent-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .agent-arrival__scene img { opacity: 1; transform: none; filter: none; }
}

/* ------------------------------------------------------------------
   Connection chapter: what the agent may reach, and what it returns.
   Sits between the arrival and the demo, so the reader knows the
   mechanism before being asked to hand over a task.
   ------------------------------------------------------------------ */
.agent-connect {
  position: relative;
  padding: clamp(76px, 9vh, 108px) 32px clamp(84px, 10vh, 116px);
  color: var(--agent-paper);
  background:
    radial-gradient(ellipse at 50% 8%, rgba(var(--agent-salmon-rgb), 0.09), transparent 34%),
    linear-gradient(170deg, #041320, #03111c 60%, #051622);
}

.agent-connect__inner {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.agent-connect .agent-section-heading {
  display: block;
  max-width: 860px;
}

.agent-connect .agent-section-heading > p {
  max-width: 66ch;
  margin-top: 22px;
}

/* The map: sources on the left, the agent in the middle, results on the right. */
.connect-map {
  margin-top: clamp(46px, 6vh, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(190px, 240px) 48px minmax(0, 0.62fr);
  align-items: center;
  gap: 0;
}

.connect-map__sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.connect-node {
  min-height: 96px;
  padding: 16px 14px 14px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  background: rgba(9, 27, 41, 0.82);
  border: 1px solid rgba(222, 242, 242, 0.14);
  text-align: center;
}

.connect-node img {
  width: auto;
  height: 34px;
  object-fit: contain;
}

.connect-node b {
  color: rgba(238, 245, 240, 0.86);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Limbs reaching from the agent out to each source. */
.connect-map__limbs {
  position: relative;
  height: 100%;
  min-height: 260px;
}

.connect-map__limbs i {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--agent-salmon-rgb), 0.15), rgba(var(--agent-salmon-rgb), 0.75));
}

.connect-map__limbs i::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  background: var(--agent-salmon);
  box-shadow: 0 0 10px rgba(var(--agent-salmon-rgb), 0.8);
  animation: connect-pull 3.2s ease-in-out infinite;
}

.connect-map__limbs i:nth-child(1) { top: 12%; }
.connect-map__limbs i:nth-child(2) { top: 27%; }
.connect-map__limbs i:nth-child(3) { top: 42%; }
.connect-map__limbs i:nth-child(4) { top: 58%; }
.connect-map__limbs i:nth-child(5) { top: 73%; }
.connect-map__limbs i:nth-child(6) { top: 88%; }

.connect-map__limbs i:nth-child(2)::after { animation-delay: -0.5s; }
.connect-map__limbs i:nth-child(3)::after { animation-delay: -1s; }
.connect-map__limbs i:nth-child(4)::after { animation-delay: -1.5s; }
.connect-map__limbs i:nth-child(5)::after { animation-delay: -2s; }
.connect-map__limbs i:nth-child(6)::after { animation-delay: -2.5s; }

/* The pull travels from the source toward the agent: it fetches, you don't push. */
@keyframes connect-pull {
  0% { right: 100%; opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { right: 0; opacity: 0; }
}

.connect-map__core {
  padding: 34px 22px 28px;
  display: grid;
  justify-items: center;
  gap: 16px;
  clip-path: var(--agent-cut);
  background: rgba(6, 22, 34, 0.92);
  border: 1px solid rgba(var(--agent-salmon-rgb), 0.36);
  box-shadow: 0 0 54px rgba(var(--agent-salmon-rgb), 0.16), inset 0 0 34px rgba(var(--agent-salmon-rgb), 0.06);
  text-align: center;
}

.connect-map__core strong {
  margin-top: 12px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.connect-map__core small {
  color: rgba(var(--agent-salmon-rgb), 0.9);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.connect-map__out {
  position: relative;
  height: 1px;
}

.connect-map__out i {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--agent-salmon-rgb), 0.7), rgba(var(--agent-yellow), 0.2));
  background: linear-gradient(90deg, rgba(var(--agent-salmon-rgb), 0.7), rgba(244, 171, 11, 0.55));
}

.connect-map__out i::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--agent-yellow);
  border-right: 1px solid var(--agent-yellow);
  transform: rotate(45deg);
}

.connect-map__result {
  display: grid;
  gap: 14px;
}

.connect-node--result {
  border-color: rgba(244, 171, 11, 0.3);
  background: rgba(24, 22, 12, 0.72);
}

/* Three things we actually run here. */
.connect-cases {
  margin-top: clamp(52px, 6.5vh, 76px);
  padding-top: clamp(34px, 4vh, 46px);
  border-top: 1px solid rgba(222, 242, 242, 0.14);
}

.connect-cases__lead {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(238, 245, 240, 0.9);
  font-size: 17px;
  letter-spacing: 0.04em;
}

.connect-cases__lead i {
  width: 8px;
  height: 8px;
  background: var(--agent-salmon);
  box-shadow: 0 0 12px rgba(var(--agent-salmon-rgb), 0.7);
  transform: rotate(45deg);
}

.connect-case-list {
  margin-top: 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  counter-reset: connect-case;
}

.connect-case-list li {
  position: relative;
  padding: 26px 24px 26px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  background: rgba(9, 27, 41, 0.7);
  border: 1px solid rgba(222, 242, 242, 0.12);
  counter-increment: connect-case;
}

.connect-case-list li::before {
  content: counter(connect-case, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  color: rgba(var(--agent-salmon-rgb), 0.85);
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
}

.connect-case__flow {
  display: block;
  color: var(--agent-paper);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}

.connect-case-list p {
  margin-top: 14px;
  color: rgba(232, 240, 236, 0.8);
  font-size: 15px;
  line-height: 1.95;
}

@media (max-width: 980px) {
  .connect-map {
    grid-template-columns: minmax(0, 1fr) 40px minmax(170px, 210px);
    grid-template-areas:
      "sources limbs core"
      "out out out"
      "result result result";
    row-gap: 26px;
  }

  .connect-map__sources { grid-area: sources; }
  .connect-map__limbs { grid-area: limbs; }
  .connect-map__core { grid-area: core; }
  .connect-map__out { grid-area: out; height: auto; }
  .connect-map__result { grid-area: result; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .connect-map__out i {
    position: static;
    display: block;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--agent-salmon-rgb), 0.6), rgba(244, 171, 11, 0.5));
  }

  .connect-map__out i::after { display: none; }

  .connect-case-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .agent-connect { padding: 62px 18px 74px; }

  .connect-map {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sources"
      "limbs"
      "core"
      "out"
      "result";
    row-gap: 18px;
  }

  .connect-map__sources { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

  .connect-node { min-height: 84px; padding: 13px 8px 11px; gap: 8px; }
  .connect-node img { height: 28px; }
  .connect-node b { font-size: 11.5px; }

  /* Vertical at this width: the pull runs downward into the agent. */
  .connect-map__limbs { min-height: 42px; }
  .connect-map__limbs i {
    top: 0;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(var(--agent-salmon-rgb), 0.15), rgba(var(--agent-salmon-rgb), 0.75));
  }

  .connect-map__limbs i:nth-child(n) { top: 0; }
  .connect-map__limbs i:nth-child(2),
  .connect-map__limbs i:nth-child(3),
  .connect-map__limbs i:nth-child(4),
  .connect-map__limbs i:nth-child(5),
  .connect-map__limbs i:nth-child(6) { display: none; }

  .connect-map__limbs i::after {
    top: auto;
    right: -2px;
    bottom: 0;
    animation: connect-pull-down 3.2s ease-in-out infinite;
  }

  @keyframes connect-pull-down {
    0% { bottom: 100%; opacity: 0; }
    18% { opacity: 1; }
    82% { opacity: 1; }
    100% { bottom: 0; opacity: 0; }
  }

  .connect-map__core { padding: 26px 18px 22px; }
  .connect-map__result { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .connect-cases__lead { font-size: 15px; }
  .connect-case__flow { font-size: 15px; }
  .connect-case-list p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .connect-map__limbs i::after { animation: none; right: 0; opacity: 1; }
}

/* ------------------------------------------------------------------
   Monthly support, at the end of the onboarding chapter.
   One block on the cream panel: what the monthly fee actually covers.
   ------------------------------------------------------------------ */
.onboarding-support {
  width: min(100%, 720px);
  margin: clamp(44px, 5vh, 62px) auto 0;
  padding: clamp(28px, 3.4vh, 38px) clamp(26px, 3.4vw, 44px) clamp(26px, 3.2vh, 34px);
  clip-path: var(--agent-cut);
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(var(--agent-salmon-deep-rgb), 0.26);
}

.onboarding-support__lead {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--agent-salmon-deep);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.onboarding-support__lead::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--agent-salmon);
  transform: rotate(45deg);
}

.support-list {
  margin-top: 22px;
  padding: 0;
  display: grid;
  gap: 14px;
  list-style: none;
}

.support-list li {
  position: relative;
  padding-left: 26px;
  color: var(--agent-ink);
  font-size: 17px;
  line-height: 1.85;
}

.support-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 2px;
  width: 7px;
  height: 7px;
  background: var(--agent-salmon-deep);
  transform: translateY(-50%) rotate(45deg);
}

.onboarding-support__price {
  margin-top: 24px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #2b7f8c;
  font-size: 15px;
  text-underline-offset: 5px;
}

.onboarding-support__price .arrow { width: 20px; }
.onboarding-support__price .arrow::before { width: 20px; }
.onboarding-support__price:hover,
.onboarding-support__price:focus-visible { color: var(--agent-salmon-deep); }

@media (max-width: 760px) {
  .onboarding-support { margin-top: 38px; padding: 24px 20px 22px; }
  .onboarding-support__lead { font-size: 16px; }
  .support-list { margin-top: 18px; gap: 12px; }
  .support-list li { padding-left: 22px; font-size: 15px; }
}