.agents-page {
  --agents-haze: color-mix(in oklab, var(--amber) 18%, transparent);
  --agents-cool: color-mix(in oklab, var(--cyan) 16%, transparent);
  --agents-panel: color-mix(in oklab, var(--ink-2) 82%, transparent);
  --agents-panel-strong: color-mix(in oklab, var(--ink-3) 88%, transparent);
  --agents-line: color-mix(in oklab, var(--line) 86%, transparent);
}

.agents-theme-image-dark {
  display: none;
}

:root[data-theme="dark"] .agents-theme-image-light {
  display: none;
}

:root[data-theme="dark"] .agents-theme-image-dark {
  display: block;
}

.agents-page .hero.small.agents-hero {
  min-height: 82vh;
  padding-bottom: 96px;
  isolation: isolate;
}

.agents-page .agents-hero .grid-bg {
  opacity: 0.34;
}

.agents-hero::before {
  content: "";
  position: absolute;
  inset: 16% -12% auto auto;
  width: min(780px, 72vw);
  height: min(540px, 50vw);
  background:
    radial-gradient(ellipse at 72% 44%, var(--agents-cool), transparent 54%),
    radial-gradient(ellipse at 24% 70%, var(--agents-haze), transparent 58%);
  filter: blur(28px);
  opacity: 0.72;
  pointer-events: none;
}

.agents-hero-art {
  position: absolute;
  z-index: 1;
  inset: 70px -10vw auto auto;
  width: min(1120px, 78vw);
  height: min(720px, 76vh);
  pointer-events: none;
}

.agents-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 72%, transparent) 28%, transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 72%, var(--ink) 100%);
  opacity: 0.76;
  pointer-events: none;
}

.agents-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.8;
  filter: saturate(0.9) contrast(0.96) brightness(1.02);
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at 72% 50%, #000 0%, #000 38%, rgba(0,0,0,0.64) 55%, rgba(0,0,0,0.22) 70%, transparent 86%);
  mask-image: radial-gradient(ellipse at 72% 50%, #000 0%, #000 38%, rgba(0,0,0,0.64) 55%, rgba(0,0,0,0.22) 70%, transparent 86%);
  animation: agents-drift 22s ease-in-out infinite alternate;
}

:root[data-theme="dark"] .agents-hero-image {
  opacity: 0.92;
  filter: saturate(1.06) contrast(1.08) brightness(1);
  mix-blend-mode: screen;
}

.agents-orbit {
  position: absolute;
  left: 10%;
  width: 82%;
  height: 56%;
  border-top: 1px solid color-mix(in oklab, var(--paper) 18%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.agents-orbit-one {
  top: 29%;
  transform: rotate(-7deg);
  animation: agents-orbit 14s ease-in-out infinite alternate;
}

.agents-orbit-two {
  top: 43%;
  opacity: 0.54;
  transform: rotate(4deg);
  animation: agents-orbit 18s ease-in-out infinite alternate-reverse;
}

.agents-signal {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 18px var(--amber-glow);
  pointer-events: none;
  animation: agents-pulse 2.8s ease-in-out infinite;
}

.agents-signal-one {
  right: 21%;
  top: 38%;
}

.agents-signal-two {
  right: 37%;
  top: 57%;
  animation-delay: 1.1s;
  background: var(--cyan);
}

.agents-channel-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: var(--agents-line) !important;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ink-2) 58%, transparent), transparent 74%),
    var(--ink);
}

.agents-channel-section .wrap {
  position: relative;
  z-index: 1;
}

.agents-channel-art {
  position: absolute;
  z-index: 0;
  inset: -120px -14vw auto auto;
  width: min(820px, 66vw);
  height: 420px;
  opacity: 0.54;
  pointer-events: none;
}

.agents-channel-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, transparent 40%, transparent 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 24%, transparent 78%, var(--ink) 100%);
  opacity: 0.72;
}

.agents-channel-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at 62% 48%, #000 0%, #000 42%, rgba(0,0,0,0.36) 68%, transparent 84%);
  mask-image: radial-gradient(ellipse at 62% 48%, #000 0%, #000 42%, rgba(0,0,0,0.36) 68%, transparent 84%);
  animation: agents-float 19s ease-in-out infinite alternate;
}

:root[data-theme="dark"] .agents-channel-image {
  opacity: 0.86;
  mix-blend-mode: screen;
}

.agents-channel-glint {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--amber) 58%, transparent), transparent);
  box-shadow: 0 0 24px var(--amber-glow);
  transform-origin: center;
  animation: agents-glint 8s ease-in-out infinite;
}

.agents-channel-glint-one {
  left: 20%;
  right: 10%;
  top: 48%;
  transform: rotate(-6deg);
}

.agents-channel-glint-two {
  left: 32%;
  right: 18%;
  top: 62%;
  opacity: 0.62;
  transform: rotate(7deg);
  animation-delay: 2s;
}

.agents-channel-grid {
  position: relative;
  z-index: 1;
}

.agents-channel-section .wrap > div:first-child .eyebrow {
  color: var(--amber) !important;
  letter-spacing: 0 !important;
}

.agents-channel-section .wrap > div:first-child p,
.agents-build-team p {
  color: var(--paper-dim) !important;
}

.agents-channel-grid > div {
  position: relative;
  overflow: hidden;
  min-height: 128px;
  background: var(--agents-panel) !important;
  border: 1px solid var(--agents-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 60px -54px color-mix(in oklab, var(--paper) 34%, #000);
  backdrop-filter: blur(12px);
  transition: transform 0.26s ease, border-color 0.26s ease, background 0.26s ease;
}

.agents-channel-grid > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--amber) 70%, transparent), transparent);
  opacity: 0.46;
}

.agents-channel-grid > div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--amber) 46%, var(--line)) !important;
  background: var(--agents-panel-strong) !important;
}

.agents-channel-grid > div > div:last-child {
  color: var(--paper-dim) !important;
}

.agents-roster-section {
  position: relative;
  overflow: hidden;
  padding-top: 86px;
  isolation: isolate;
}

.agents-roster-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 34px -18vw auto auto;
  width: min(980px, 76vw);
  height: 520px;
  background-image: url("agents-routing-light.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.32;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 0%, rgba(0,0,0,0.58) 42%, rgba(0,0,0,0.18) 66%, transparent 84%);
  mask-image: radial-gradient(ellipse at 60% 50%, #000 0%, rgba(0,0,0,0.58) 42%, rgba(0,0,0,0.18) 66%, transparent 84%);
  pointer-events: none;
}

:root[data-theme="dark"] .agents-roster-section::before {
  background-image: url("agents-routing-dark.webp");
  opacity: 0.42;
  mix-blend-mode: screen;
}

.agents-roster-section .wrap {
  position: relative;
  z-index: 1;
}

.agents-page .agent-profile {
  position: relative;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding: 44px 0;
  border-top: 1px solid var(--agents-line);
  isolation: isolate;
}

.agents-page .agent-profile:first-of-type {
  border-top: 1px solid var(--agents-line);
}

.agents-page .agent-profile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px -28px;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--amber) 12%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in oklab, var(--ink-2) 62%, transparent), transparent);
  opacity: 0;
  transform: scaleX(0.98);
  transform-origin: left center;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.agents-page .agent-profile:hover::before {
  opacity: 0.72;
  transform: scaleX(1);
}

.agents-page .agent-avatar {
  position: relative;
  overflow: visible;
  min-height: 188px;
  padding: 22px 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  align-items: flex-start;
}

.agents-page .agent-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(186px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 46% 42%, color-mix(in oklab, var(--amber) 28%, transparent), transparent 34%),
    radial-gradient(circle, color-mix(in oklab, var(--paper) 8%, transparent), transparent 66%);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--paper) 12%, transparent),
    0 0 70px color-mix(in oklab, var(--amber) 16%, transparent);
  opacity: 0.9;
  transform: translate(-50%, -50%);
  animation: agents-breathe 8s ease-in-out infinite;
}

.agents-page .agent-avatar::after {
  content: "";
  position: absolute;
  right: -34px;
  top: 50%;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--amber) 50%, transparent), transparent);
  opacity: 0.72;
}

.agents-page .agent-avatar .emoji,
.agents-page .agent-avatar .a-name,
.agents-page .agent-avatar .agent-meta {
  position: relative;
  z-index: 1;
}

.agents-page .agent-avatar .emoji {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 12px 30px color-mix(in oklab, var(--amber) 26%, transparent));
}

.agents-page .agent-avatar .a-name {
  color: var(--paper);
}

.agents-page .agent-meta {
  color: var(--mute);
  letter-spacing: 0;
}

.agents-page .agent-body h3 {
  color: var(--paper);
}

.agents-page .agent-body .role-line {
  color: var(--amber);
  letter-spacing: 0;
}

.agents-page .agent-body p {
  color: var(--paper-dim);
}

.agents-page .agent-body .examples {
  background: color-mix(in oklab, var(--ink-2) 80%, transparent);
  border: 1px solid var(--agents-line);
  border-radius: 8px;
}

.agents-page .agent-body .examples h5 {
  color: var(--mute);
  letter-spacing: 0;
}

.agents-page .agent-body .examples ul {
  color: var(--paper-dim);
}

.agents-page .agent-body .quote {
  color: var(--amber);
  border-left-color: color-mix(in oklab, var(--amber) 74%, var(--line));
}

.agents-page .agent-body .stat-row .stat {
  background: color-mix(in oklab, var(--ink-3) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--line) 76%, transparent);
  border-radius: 999px;
  color: var(--paper-dim);
}

.agents-page .agent-body .stat-row .stat strong {
  color: color-mix(in oklab, var(--cyan) 74%, var(--paper));
}

.agents-build-team {
  position: relative;
  overflow: hidden;
  background: color-mix(in oklab, var(--ink-2) 84%, transparent) !important;
  border: 1px solid var(--agents-line) !important;
  border-radius: 8px !important;
}

.agents-build-team::before {
  content: "";
  position: absolute;
  inset: -150% -20% -120% auto;
  width: 70%;
  background-image: url("agents-routing-light.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse, #000 0%, rgba(0,0,0,0.3) 54%, transparent 74%);
  mask-image: radial-gradient(ellipse, #000 0%, rgba(0,0,0,0.3) 54%, transparent 74%);
  pointer-events: none;
  animation: agents-float 21s ease-in-out infinite alternate;
}

:root[data-theme="dark"] .agents-build-team::before {
  background-image: url("agents-routing-dark.webp");
  opacity: 0.34;
  mix-blend-mode: screen;
}

.agents-build-team > * {
  position: relative;
  z-index: 1;
}

@keyframes agents-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-16px, 10px, 0) scale(1.025); }
}

@keyframes agents-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(12px, -8px, 0) scale(1.018); }
}

@keyframes agents-orbit {
  from { opacity: 0.46; }
  to { opacity: 0.82; }
}

@keyframes agents-pulse {
  0%, 100% { transform: scale(0.82); opacity: 0.54; }
  50% { transform: scale(1.12); opacity: 1; }
}

@keyframes agents-glint {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.82; }
}

@keyframes agents-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.78; }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: 0.96; }
}

@media (max-width: 860px) {
  .agents-page .hero.small.agents-hero {
    min-height: auto;
    padding-bottom: 72px;
  }

  .agents-hero-art {
    inset: 78px -58vw auto auto;
    width: 142vw;
    height: 480px;
    opacity: 0.68;
  }

  .agents-hero-art::after {
    background:
      linear-gradient(90deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 72%, transparent) 46%, transparent 100%),
      linear-gradient(180deg, var(--ink) 0%, transparent 26%, transparent 70%, var(--ink) 100%);
  }

  .agents-channel-art {
    inset: -88px -52vw auto auto;
    width: 138vw;
    height: 340px;
    opacity: 0.42;
  }

  .agents-roster-section {
    padding-top: 48px;
  }

  .agents-roster-section::before {
    inset: 0 -58vw auto auto;
    width: 140vw;
    height: 420px;
    opacity: 0.2;
  }

  .agents-page .agent-profile {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 38px 0;
  }

  .agents-page .agent-profile::before {
    inset: 10px -18px;
  }

  .agents-page .agent-avatar {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-areas:
      "emoji name"
      "emoji meta";
    column-gap: 14px;
    min-height: 94px;
    padding: 0 0 12px;
    align-items: center;
    justify-content: start;
  }

  .agents-page .agent-avatar::before {
    left: 34px;
    width: 96px;
  }

  .agents-page .agent-avatar::after {
    left: 72px;
    right: auto;
    top: auto;
    bottom: 0;
    width: calc(100% - 72px);
  }

  .agents-page .agent-avatar .emoji {
    grid-area: emoji;
    font-size: 42px;
  }

  .agents-page .agent-avatar .a-name {
    grid-area: name;
  }

  .agents-page .agent-avatar .agent-meta {
    grid-area: meta;
  }
}

@media (max-width: 560px) {
  .agents-hero-art {
    inset: 96px -92vw auto auto;
    width: 184vw;
    height: 420px;
    opacity: 0.5;
  }

  .agents-channel-grid > div {
    min-height: 118px;
  }

  .agents-build-team {
    padding: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agents-page *,
  .agents-page *::before,
  .agents-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}