/* ═══════════════════════════════════════════════════════════════════════════
   /agent — the Lumen Agent page.

   Layered on surface.css (page chrome, .phero, .fgrid, .band, .faq, .final),
   product-system.css (the --tone-* palette) and hub-2026.css (the <use> icon
   sprite rules). Only the blocks unique to this page live here.
   ═══════════════════════════════════════════════════════════════════════════ */

.agent-hero-note { margin: 18px 0 0; max-width: 520px; color: var(--mut); font-size: 13px; line-height: 1.55; }

/* Icons on this page are the shared sprite symbols, stroked in the tool tone. */
.rs-n svg, .rc-ico svg, .mk-ico svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Anatomy of a run ────────────────────────────────────────────────────── */
.run-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (max-width: 1040px) { .run-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .run-steps { grid-template-columns: 1fr; } }

.run-steps li {
  position: relative;
  padding: 22px 20px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: transform .16s ease, box-shadow .2s, border-color .16s;
}
.run-steps li:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--product-tone) 42%, var(--surface));
  box-shadow: 0 22px 46px -30px color-mix(in srgb, var(--product-tone) 80%, transparent);
}
/* A tone-coloured rule across the top edge turns the five cards into a track. */
.run-steps li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: var(--product-tone);
}
.rs-n {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 10px;
  border-radius: 12px;
  color: #fff;
  background: var(--product-tone);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--product-tone) 90%, transparent);
}
.run-steps b { display: block; margin-top: 15px; color: var(--ink); font-size: 14.5px; letter-spacing: -.01em; }
.run-steps li > span:not(.rs-n) { display: block; margin-top: 8px; color: var(--mut); font-size: 13.5px; line-height: 1.55; }

/* ── What it can reach ───────────────────────────────────────────────────── */
.reach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .reach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reach-grid { grid-template-columns: 1fr; } }
.reach {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--product-tone) 4%, var(--surface)));
  transition: transform .16s ease, box-shadow .2s, border-color .16s;
}
.reach:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--product-tone) 40%, var(--surface));
  box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--product-tone) 80%, transparent);
}
.rc-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 11px;
  border-radius: 13px;
  color: var(--product-tone);
  background: var(--product-soft);
}
.reach h3 { margin: 16px 0 0; font-size: 17px; }
.reach p { margin: 8px 0 0; color: var(--mut); font-size: 14px; line-height: 1.6; }

/* ── What it can make ────────────────────────────────────────────────────── */
.makes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1040px) { .makes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .makes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .makes-grid { grid-template-columns: 1fr; } }
.mk {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: transform .14s ease, border-color .16s, box-shadow .2s;
}
.mk:hover {
  transform: translateY(-2px);
  border-color: var(--product-tone);
  box-shadow: 0 18px 38px -28px color-mix(in srgb, var(--product-tone) 85%, transparent);
}
.mk-ico {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 9px;
  border-radius: 11px;
  color: var(--product-tone);
  background: var(--product-soft);
  transition: transform .2s cubic-bezier(.32, 1.5, .5, 1), color .16s, background .16s;
}
.mk:hover .mk-ico { transform: rotate(-8deg) scale(1.07); color: #fff; background: var(--product-tone); }
.mk b { color: var(--ink); font-size: 14px; font-weight: 730; }
.mk > span:not(.mk-ico) { color: var(--mut); font-size: 12px; line-height: 1.4; }

/* ── Control & safety (inside the dark .band) ────────────────────────────── */
.ctrl-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 1040px) { .ctrl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .ctrl-grid { grid-template-columns: 1fr; } }
.ctrl {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  transition: border-color .18s, background .18s, transform .18s;
}
.ctrl:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .09); }
.ctrl b { display: block; color: #fff; font-size: 14.5px; font-weight: 730; }
.ctrl span { display: block; margin-top: 7px; color: #b2bbdd; font-size: 13px; line-height: 1.55; }
.ctrl-links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.ctrl-links .btn.ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #eaeefc; }
.ctrl-links .btn.ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); }

/* ── Engines ─────────────────────────────────────────────────────────────── */
.eng-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .eng-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .eng-row { grid-template-columns: 1fr; } }
.eng { padding: 19px 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.eng b { display: block; color: var(--ink); font-size: 15px; }
.eng span { display: block; margin-top: 6px; color: var(--mut); font-size: 13px; line-height: 1.55; }
.eng i { display: block; margin-top: 5px; color: var(--acc-d); font-style: normal; font-weight: 700; font-size: 12px; }
.eng-more { margin: 18px 0 0; text-align: center; }
.eng-more a { color: var(--acc-d); font-size: 14px; font-weight: 750; }
.eng-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── The full capability list ────────────────────────────────────────────── */
.agent-all {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--product-tone) 5%, var(--surface)));
}
.agent-all .bp-chips { justify-content: center; }
.agent-all .bp-chips span { animation: none; font-size: 12px; padding: 7px 11px; }

@media (prefers-reduced-motion: reduce) {
  .run-steps li:hover, .reach:hover, .mk:hover, .mk:hover .mk-ico, .ctrl:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE AGENT ORBIT — the page's centrepiece.

   The argument this page has to make is "Agent is the middle of everything you
   already use", and a diagram of that argument beats a paragraph of it: the
   Lumen mark spins at the centre while every tool circles it in its own colour,
   inner ring one way, outer ring the other.

   Three nested transforms make it work, and all three are load-bearing:
     .orb-tool      places the mark at its angle on its radius
     .orb-tool-fix  cancels that placement rotation
     .orb-tool-in   counter-spins against its ring
   Without the last two the icons would tumble as the ring turned.

   The marks are real links, so the prettiest thing on the page is also the
   fastest way to reach any tool.
   ═══════════════════════════════════════════════════════════════════════════ */
.orbit-stage {
  --orb: clamp(300px, 34vw, 470px);
  --r1: calc(var(--orb) * .255);
  --r2: calc(var(--orb) * .418);
  position: relative;
  width: var(--orb);
  height: var(--orb);
  margin: 0 auto;
  isolation: isolate;
}

/* Dashed guide rings, plus one comet riding the outer edge. */
.orb-ring {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px dashed rgba(120, 213, 206, .3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.orb-r1 { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); }
.orb-r2 { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); border-color: rgba(89, 101, 216, .28); }
.orb-r3 {
  width: calc(var(--orb) * .97); height: calc(var(--orb) * .97);
  border-style: solid;
  border-color: rgba(89, 101, 216, .12);
  animation: orb-spin 26s linear infinite;
}
.orb-r3::after {
  content: "";
  position: absolute;
  top: -3px; left: calc(50% - 3px);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #78d5ce;
  box-shadow: 0 0 9px #78d5ce, 0 0 18px rgba(89, 101, 216, .7);
}

/* Soft glow behind everything so the rings read on either theme. */
.orbit-stage::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 101, 216, .18), rgba(120, 213, 206, .08) 55%, transparent 72%);
  filter: blur(6px);
  animation: orb-breathe 7s ease-in-out infinite;
}
@keyframes orb-breathe { 0%, 100% { opacity: .75; transform: scale(1) } 50% { opacity: 1; transform: scale(1.05) } }

/* ── The core: the Lumen mark, spinning ─────────────────────────────────── */
.orb-core {
  position: absolute;
  top: 50%; left: 50%;
  display: grid;
  place-items: center;
  width: calc(var(--orb) * .225);
  height: calc(var(--orb) * .225);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 244, 255, .22), rgba(89, 101, 216, .18) 52%, transparent 74%);
  box-shadow: 0 0 22px rgba(120, 213, 206, .45), 0 0 44px rgba(89, 101, 216, .35);
}
.orb-core svg {
  width: 72%; height: 72%;
  animation: lumen-logo-spin 3.6s linear infinite;   /* the same mark as the hero strip */
  will-change: transform;
}
.orb-core-label {
  position: absolute;
  bottom: -30px;
  color: var(--acc-d);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── The rings of tools ─────────────────────────────────────────────────── */
.orb-shell { position: absolute; inset: 0; }
.orb-shell-1 { animation: orb-spin 34s linear infinite; }
.orb-shell-2 { animation: orb-spin 46s linear infinite reverse; }

.orb-tool {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r)));
}
.orb-tool-fix { display: block; transform: rotate(calc(-1 * var(--a))); }
.orb-shell-1 .orb-tool-in { animation: orb-spin 34s linear infinite reverse; }
.orb-shell-2 .orb-tool-in { animation: orb-spin 46s linear infinite; }

.orb-tool-in {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--product-tone) 34%, var(--surface));
  border-radius: 14px;
  color: var(--product-tone);
  background: var(--surface);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--product-tone) 85%, transparent);
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), background .2s, color .2s, box-shadow .2s;
}
@media (max-width: 560px) { .orb-tool-in { width: 38px; height: 38px; padding: 9px; border-radius: 12px; } }
.orb-tool-in svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Hovering one mark stops the whole system so it can actually be clicked. */
.orbit-stage:hover .orb-shell,
.orbit-stage:hover .orb-shell .orb-tool-in,
.orbit-stage:focus-within .orb-shell,
.orbit-stage:focus-within .orb-shell .orb-tool-in { animation-play-state: paused; }
.orb-tool:hover .orb-tool-in,
.orb-tool:focus-visible .orb-tool-in {
  transform: scale(1.22);
  color: #fff;
  background: var(--product-tone);
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--product-tone) 90%, transparent);
}
.orb-tool:focus-visible .orb-tool-in { outline: 2px solid var(--product-tone); outline-offset: 3px; }

@keyframes orb-spin { to { transform: rotate(360deg); } }

/* The name of whatever is hovered, announced under the stage. */
.orb-caption {
  min-height: 22px;
  margin-top: 16px;
  color: var(--mut);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
  transition: color .18s;
}
.orb-caption b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .orb-shell, .orb-shell .orb-tool-in, .orb-r3, .orb-core svg, .orbit-stage::before { animation: none !important; }
  .orb-tool:hover .orb-tool-in { transform: none; }
}


/* ── "Give it a goal" — the interactive router ───────────────────────────
   Pick a goal, watch which tools it routes through. This is the interactive
   proof of "works with everything": the chain is different every time and the
   nodes light up in order. */
.router { display: grid; gap: 18px; }
.router-goals { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.rg {
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: transform .15s, border-color .15s, color .15s, box-shadow .2s;
}
.rg:hover { transform: translateY(-2px); border-color: var(--acc); color: var(--ink); }
.rg:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rg[aria-selected="true"] {
  color: #fff;
  border-color: transparent;
  background: var(--grad);
  box-shadow: 0 14px 30px -14px rgba(89, 101, 216, .8);
}

.router-stage {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(155deg, var(--surface), var(--surface2));
  box-shadow: 0 30px 70px -50px var(--shadow-tint);
}
.router-prompt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 20px;
  color: var(--ink);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.35;
}
.router-prompt .rp-ico {
  display: grid; place-items: center;
  flex: none;
  width: 32px; height: 32px;
  border-radius: 10px;
  color: #fff;
  background: var(--grad);
}
.router-prompt .rp-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* The chain. Nodes deal in left-to-right every time the goal changes. */
.router-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.router-chain .rn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 9px;
  border: 1px solid color-mix(in srgb, var(--product-tone) 30%, var(--surface));
  border-radius: 999px;
  color: color-mix(in srgb, var(--product-tone) 76%, var(--ink));
  background: var(--product-soft);
  font-size: 13px;
  font-weight: 730;
  white-space: nowrap;
  animation: rn-in .5s cubic-bezier(.2, .9, .3, 1) both;
  animation-delay: calc(var(--i) * .13s);
}
.router-chain .rn svg { width: 16px; height: 16px; color: var(--product-tone); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.router-chain .rn-line {
  width: 16px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), var(--acc2));
  transform-origin: left center;
  animation: rn-line .45s ease both;
  animation-delay: calc((var(--i) + .55) * .13s);
}
@keyframes rn-in { from { opacity: 0; transform: translateY(8px) scale(.9) } to { opacity: 1; transform: none } }
@keyframes rn-line { from { opacity: 0; transform: scaleX(.1) } to { opacity: 1; transform: none } }

.router-out { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.router-out span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(43, 158, 122, .28);
  border-radius: 999px;
  color: var(--good);
  background: rgba(43, 158, 122, .1);
  font-size: 12.5px;
  font-weight: 700;
  animation: rn-in .5s ease both;
  animation-delay: calc((var(--i) + 1.4) * .13s);
}
.router-out svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; }

@media (prefers-reduced-motion: reduce) {
  .router-chain .rn, .router-chain .rn-line, .router-out span { animation: none !important; }
  .rg:hover { transform: none; }
}

/* ── Scroll reveal ───────────────────────────────────────────────────────
   Cards lift in as they enter the viewport. `.reveal` is the resting state and
   JS adds `.in`; without JS nothing is hidden, so the page never depends on it. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }