#nav a[href="#ai-agent"] {
  background: #ede9fe;
  color: #4c1d95;
  font-weight: 800;
}
#nav a[href="#ai-agent"].active {
  background: #5b21b6;
  color: #fff;
}
.agent-hero {
  background: linear-gradient(125deg, #201345, #4c1d95 65%, #334a9f);
  color: #fff;
  border-radius: 20px;
  padding: clamp(1.25rem, 4vw, 3rem);
  margin-bottom: 1.25rem;
}
.agent-hero h1 { color: #fff; margin: .65rem 0; }
.agent-hero p, .agent-hero small { color: #ede9fe; }
.agent-hero small { display: block; margin-top: .9rem; }
.agent-badge {
  display: inline-block;
  background: #c4b5fd;
  color: #29114f;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.agent-inbox { display: inline-block; color: #fff; text-decoration: underline; font-weight: 700; }
.agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.agent-card label { display: block; margin: .6rem 0; }
.agent-card textarea, .agent-card input { width: 100%; }
.agent-examples { display: flex; flex-wrap: wrap; gap: .4rem; }
.agent-examples button { background: #f5f3ff; color: #4c1d95; }
.agent-reply { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: .8rem; margin: .75rem 0; border-radius: .6rem; background: #f5f3ff; color: #271344; }
.agent-menu-results { max-height: 28rem; overflow: auto; margin-top: .75rem; }
.agent-menu-results details { padding: .5rem; border-bottom: 1px solid #ddd6fe; }
.agent-menu-results summary { cursor: pointer; font-weight: 700; }
.agent-menu-results li { margin-bottom: .45rem; }
.agent-menu-results li span { color: #5b21b6; }
.agent-menu-results li small { display: block; }
@media (max-width: 760px) { .agent-grid { grid-template-columns: 1fr; } }