/* ==========================================================================
   PRISM — Custom AI Agent Development service page (page-specific).
   Signature moments: (1) an orchestration node-graph in the hero — a central
   "Your Agent" node with data pulses flowing out to the tools it connects
   to, and (2) a live-updating "Always Working" activity log further down
   the page, proving the agent keeps acting on its own. Shared lead-funnel
   sections live in service-shared.css.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Hero                                                                     */
/* ---------------------------------------------------------------------- */
.agent-hero {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--space-section);
  position: relative;
  overflow: clip;
}
.agent-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.agent-hero__badge { margin-bottom: var(--space-5); }
.agent-hero__title { margin-bottom: var(--space-5); }
.agent-hero__title em {
  font-style: normal;
  font-weight: inherit;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.agent-hero__sub { font-size: var(--fs-lead); color: var(--ink-500); max-width: 46ch; margin-bottom: var(--space-6); }

.agent-hero .bg-mesh__blob--1 { width: 480px; height: 480px; top: -140px; right: -100px; background: var(--brand-violet); }
.agent-hero .bg-mesh__blob--2 { width: 420px; height: 420px; bottom: -160px; left: -120px; background: var(--brand-aqua); animation-delay: 4s; }

/* ---- Signature visual: orchestration node-graph ---- */
.agent-hero__visual { position: relative; height: clamp(420px, 42vw, 520px); display: flex; align-items: center; justify-content: center; }
.agent-graph { position: relative; width: min(460px, 100%); aspect-ratio: 1 / 1; }
.agent-graph__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.agent-graph__line { fill: none; stroke: var(--border-strong); stroke-width: 0.6; }
.agent-graph__pulse { fill: var(--brand-aqua); filter: drop-shadow(0 0 4px var(--brand-aqua)); }
[data-theme="dark"] .agent-graph__pulse { fill: var(--brand-violet); filter: drop-shadow(0 0 5px var(--brand-violet)); }
@media (prefers-reduced-motion: reduce) { .agent-graph__pulse { display: none; } }

.agent-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transition: transform var(--dur-base) var(--ease-spring);
}
.agent-node:hover { transform: translate(-50%, -50%) translateY(-3px); }
.agent-node__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
  color: var(--brand-indigo);
}
[data-theme="dark"] .agent-node__icon { color: var(--brand-aqua); }
.agent-node__icon svg { width: 22px; height: 22px; }
.agent-node__label { font-size: 0.75rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; }

.agent-node--center { z-index: 1; }
.agent-node--center .agent-node__icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), rgba(255,255,255,0) 45%), var(--brand-gradient);
  color: #fff;
  border: none;
  box-shadow: 0 20px 44px -14px rgba(79,70,229,0.55);
  animation: agentBreathe 3.6s var(--ease-smooth) infinite;
}
.agent-node--center .agent-node__icon svg { width: 38px; height: 38px; }
.agent-node--center .agent-node__label { font-size: 0.8125rem; font-weight: 700; color: var(--ink-900); }
@keyframes agentBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .agent-node--center .agent-node__icon { animation: none; } }

@media (max-width: 1024px) {
  .agent-hero__grid { grid-template-columns: 1fr; }
  .agent-hero__visual { height: clamp(380px, 78vw, 460px); margin-top: var(--space-6); }
}
@media (max-width: 480px) {
  .agent-node__label { display: none; }
  .agent-node__icon { width: 42px; height: 42px; }
  .agent-node__icon svg { width: 18px; height: 18px; }
  .agent-node--center .agent-node__icon { width: 76px; height: 76px; }
  .agent-node--center .agent-node__icon svg { width: 32px; height: 32px; }
}

/* ---------------------------------------------------------------------- */
/* "Always Working" activity log band — dark glass spotlight, same family  */
/* as the voice page's demo-band, proving the agent keeps acting on its    */
/* own instead of linking to an external demo.                             */
/* ---------------------------------------------------------------------- */
.agent-log-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3rem);
  background:
    radial-gradient(130% 100% at 12% -10%, rgba(139, 92, 246, 0.42), transparent 55%),
    radial-gradient(130% 100% at 88% 110%, rgba(6, 182, 212, 0.36), transparent 55%),
    linear-gradient(180deg, #15122A 0%, #0A0912 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.09) inset, 0 50px 90px -30px rgba(79,70,229,0.35), 0 12px 28px -14px rgba(0,0,0,0.5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.agent-log-band__inner { position: relative; z-index: 1; }
.agent-log-band__eyebrow { color: #F1EAD8!important; margin-bottom: var(--space-4); }
.agent-log-band__eyebrow::before { background: var(--brand-gradient); }
.agent-log-band__title { color: #F1EAD8!important; margin-bottom: var(--space-4); }
.agent-log-band__sub { color: #F1EAD8!important; }

.agent-log {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  min-height: 220px;
  max-height: 220px;
  overflow: hidden;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.agent-log__line {
  display: flex;
  gap: var(--space-3);
  color: rgba(255,255,255,0.75);
  animation: fadeIn var(--dur-slow) var(--ease-out);
}
.agent-log__time { color: var(--brand-aqua); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.agent-log__dot { color: #34D399; flex-shrink: 0; }

@media (max-width: 900px) {
  .agent-log-band { grid-template-columns: 1fr; text-align: center; }
  .agent-log-band__eyebrow { justify-content: center; }
}