.zr-hero__video{
  position:absolute; inset:0;
  z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
  /* sits under the hero copy, above the card's fallback gradient */
  z-index:0;
}
/* While the first frame is still decoding, the card's own gradient shows
   through — so there is never a black flash on load. */
.zr-hero__card{ background-color:#EAF3FF; }

/* ── legibility scrim ────────────────────────────────────────────────────
   The hero headline is dark ink. Over the canvas beams that was safe — the
   beams paint a near-white top half. Over an arbitrary video it is not, so
   a white wash sits between the footage and the copy, heaviest where the
   text is and clearing by the bottom so the video still reads.

   Dial it with --zr-hero-scrim on .zr-hero:
     .82  very busy or dark footage
     .55  default — safe for most clips
     .30  pale, low-contrast footage
     0    off (only if your video is already near-white behind the copy)   */
.zr-hero{ --zr-hero-scrim:.55; }
.zr-hero__card::after{
  content:"";
  /* Pinned to one viewport from the card top. Tied to the card's own height it
     would stretch with the section and wash the headline area out. */
  position:absolute; inset:0 0 auto 0; height:100svh; min-height:560px; z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(255,255,255,var(--zr-hero-scrim)) 0%,
    rgba(255,255,255,calc(var(--zr-hero-scrim) * .82)) 42%,
    rgba(255,255,255,calc(var(--zr-hero-scrim) * .35)) 74%,
    rgba(255,255,255,0) 100%);
}


.scanner {
  --blue:       #0091ff;
  --blue-deep:  #0064d6;
  --blue-light: #7fd3ff;
  --orange:     #fd9a46;
  --ink:        #2a2a2a;
  --asset-ai-mark:  url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202.2c.78%205.12%203.9%208.24%209.02%209.02-5.12.78-8.24%203.9-9.02%209.02-.78-5.12-3.9-8.24-9.02-9.02C8.1%2010.44%2011.22%207.32%2012%202.2Z%27%20fill%3D%27%25230091FF%27%2F%3E%3C%2Fsvg%3E");
}

.scanner *,
.scanner *::before,
.scanner *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL — `--u` is one Figma pixel (frame is 1200 wide, so 1px = 100/1200 cqw)
   ═══════════════════════════════════════════════════════════════════════════ */
.scanner {
  container-type: inline-size;
  --u: 0.08333cqw;

  position: relative;
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: calc(64 * var(--u)) calc(63.6 * var(--u)) 0;
  border-radius: max(24px, calc(50 * var(--u)));
  background: linear-gradient(180deg, var(--blue) 0%, #ffffff 100%);
  isolation: isolate;
  font-family: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.scanner__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;      /* stands in for Figma's Rectangle 6617 mask */
  z-index: -1;
  pointer-events: none;
}

/* ── faint drifting bloom, the only thing added to the Figma layers ──────── */
.scanner .blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.scanner .blob--a {
  width: 58%; aspect-ratio: 1; top: -22%; left: -6%;
  background: radial-gradient(circle, rgba(160,228,255,.38) 0%, rgba(160,228,255,0) 70%);
  animation: drift-a 64s ease-in-out infinite;
}
.scanner .blob--b {
  width: 74%; aspect-ratio: 1.4; bottom: -34%; left: 14%;
  background: radial-gradient(circle, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 68%);
  animation: drift-b 78s ease-in-out infinite;
}
@keyframes drift-a{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%    { transform: translate3d(4%, 3%, 0) scale(1.07); }
}
@keyframes drift-b{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%    { transform: translate3d(-3%, -2%, 0) scale(1.05); }
}

/* ── light rays / glass slats ────────────────────────────────────────────
   Straight from node 9377:6376. Thirteen contiguous columns, each 95.072px
   wide (7.9227% of the 1200px frame). Every column carries a 1.203px
   rgba(255,255,255,.6) hairline on its LEFT edge and an elliptical glow
   anchored to that same edge — x-radius 83.639px (87.97% of the column),
   y-radius 416.56px or 459.56px depending on the column. Whole layer at 50%.
   Per-column left / glow-centre / glow-radius are set inline from JS.
   ─────────────────────────────────────────────────────────────────────── */
.scanner .rays {
  position: absolute;
  inset: 0;
  /* strongest at the top, thinning through the middle, gone before the
     gradient turns white — keeps the slats off the lower half entirely */
  mask-image: linear-gradient(180deg,
    #000 0%,
    rgba(0,0,0,.62) 34%,
    rgba(0,0,0,.26) 55%,
    rgba(0,0,0,.06) 72%,
    transparent 84%);
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    rgba(0,0,0,.62) 34%,
    rgba(0,0,0,.26) 55%,
    rgba(0,0,0,.06) 72%,
    transparent 84%);
}
.scanner .ray {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7.9227%;
  border-left: max(1px, calc(1.203 * var(--u))) solid rgba(255,255,255,.6);
  opacity: .28;
}
.scanner .ray::before {
  content: "";
  position: absolute;
  inset: 0;
  background-origin: border-box;
  background-image: radial-gradient(
    87.97% var(--ry) at 0% var(--cy),
    rgba(255,255,255,.6) 0%,
    rgba(255,255,255,0) 100%);
  will-change: transform, opacity;
  animation: ray-breathe var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes ray-breathe{
  0%,100%{ opacity: .68; transform: translate3d(0, .7%, 0); }
  50%    { opacity: 1;   transform: translate3d(0, -.7%, 0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTRO
   ═══════════════════════════════════════════════════════════════════════════ */
.scanner .intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.scanner .intro__title {
  margin: 0;
  max-width: 821px;
  font-weight: 500;
  font-size: clamp(30px, 4.66cqw, 56px);
  line-height: 1.2;
  letter-spacing: clamp(-2px, -0.166cqw, -1px);
  background: linear-gradient(180deg, #ffffff 0%, #eaeaea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scanner .intro__lede {
  margin: 0;
  max-width: min(454px, 90%);
  font-size: clamp(15px, 1.5cqw, 18px);
  line-height: 1.34;
  color: #fff;
}
.scanner .intro__cta {
  margin-top: 4px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: "Inter", "Geist", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  box-shadow:
    inset 0 3px 14px rgba(255,255,255,.35),
    0 1px 1px rgba(0,0,0,.10),
    0 6px 22px rgba(0,70,140,.16);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.scanner .intro__cta:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 3px 14px rgba(255,255,255,.35),
    0 1px 1px rgba(0,0,0,.10),
    0 12px 30px rgba(0,70,140,.24);
}
.scanner .intro__cta:active {
  transform: translateY(1px);
  box-shadow: inset 0 4px 9px rgba(3,22,60,.28), inset 0 1px 2px rgba(3,22,60,.28);
}
.scanner .intro__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RADAR — 1072.75 × 589 design units, hub at (536.375, 535)
   ═══════════════════════════════════════════════════════════════════════════ */
.scanner .radar {
  position: relative;
  width: 100%;
  aspect-ratio: 1072.75 / 589;
  margin-top: calc(56 * var(--u));
  margin-bottom: calc(-53 * var(--u));
}
.scanner .radar__svg { display: block; width: 100%; height: 100%; overflow: visible; }

#sweep {
  transform-box: view-box;
  transform-origin: 536.375px 535px;
  transform: rotate(-90deg);
}

.scanner .hub {
  position: absolute;
  left: 50%;
  top: calc(535 / 589 * 100%);
  translate: -50% -50%;
  width: calc(110 * var(--u));
  height: calc(108 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(125% 125% at 50% 10%,
    var(--blue-light) 0%, #23a6ff 33%, #0080f0 62%, var(--blue-deep) 100%);
  box-shadow:
    inset 0 calc(4 * var(--u)) calc(20 * var(--u)) rgba(255,255,255,.25),
    0 0 calc(14 * var(--u)) rgba(0,145,255,.4);
}
.scanner .hub::before {
  content: "";
  position: absolute;
  inset: calc(-10 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,145,255,.4) 40%, rgba(0,145,255,0) 72%);
  opacity: 0;
}
.scanner .hub.is-pulsing::before { animation: hub-pulse 2.4s ease-out; }
@keyframes hub-pulse{
  0%   { opacity: .8; transform: scale(.88); }
  100% { opacity: 0;  transform: scale(1.45); }
}
.scanner .hub__logo {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(40.47 * var(--u));
  height: calc(37 * var(--u));
  color: #fff;
}
.scanner .hub__logo svg { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   NODES — every one starts unknown, the sweep turns it into a prompt
   ═══════════════════════════════════════════════════════════════════════════ */
.scanner .node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  --c: var(--orange);
  --c-soft: rgba(253,154,70,.25);
  opacity: 0;
  transition: opacity .7s ease;
}
.scanner .node.is-live { opacity: 1; }
.scanner .node.is-resolved { --c: var(--blue); --c-soft: rgba(0,145,255,.25); }

.scanner .node__dot {
  position: relative;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(10 * var(--u)) var(--c);
  transition: background-color .6s ease, box-shadow .6s ease;
}
.scanner .node__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--c);
  opacity: 0;
}
.scanner .node.is-resolved .node__dot::after { animation: ping 1.6s cubic-bezier(.12,.7,.25,1); }
@keyframes ping{
  0%   { transform: scale(1);   opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}
.scanner .node:not(.is-resolved) .node__dot { animation: idle 4.2s ease-in-out infinite; }
@keyframes idle{ 0%,100%{ opacity: .55; } 50%{ opacity: 1; } }

.scanner .node__pills {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6 * var(--u));
  translate: -50% 0;
  display: grid;
  perspective: calc(460 * var(--u));
}

.scanner .pill {
  grid-area: 1 / 1;
  justify-self: center;
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--c);
  border-radius: calc(10 * var(--u));
  background: #fff;
  color: var(--c);
  font-size: max(9px, calc(12 * var(--u)));
  line-height: 1.1;
  white-space: nowrap;
  transform-origin: bottom center;
  backface-visibility: hidden;
  box-shadow: inset 0 calc(4 * var(--u)) calc(24 * var(--u)) var(--c-soft);
}
.scanner .pill::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  width: calc(12 * var(--u));
  height: calc(7 * var(--u));
  background: var(--c);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: background-color .6s ease;
}
.scanner .pill__icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; }
.scanner .pill__icon--ai { background: var(--asset-ai-mark) center / contain no-repeat; }
.scanner .pill__icon svg { display: block; width: 100%; height: 100%; }

.scanner .pill--unknown { border-radius: 999px; padding: calc(5 * var(--u)); }

.scanner .pill--unknown {
  opacity: 1; transform: rotateX(0deg);
  transition: opacity .5s ease, transform .7s cubic-bezier(.4,0,.2,1);
}
.scanner .pill--prompt {
  opacity: 0; transform: rotateX(80deg);
  transition: opacity .5s ease, transform .7s cubic-bezier(.4,0,.2,1);
}
.scanner .node.is-resolved .pill--unknown { opacity: 0; transform: rotateX(-80deg); }
.scanner .node.is-resolved .pill--prompt {
  opacity: 1; transform: rotateX(0deg);
  transition: opacity .5s ease .18s, transform .8s cubic-bezier(.2,.9,.3,1.08) .18s;
}

.scanner .radar.is-clearing .node { opacity: 0; }
.scanner .radar.is-instant .node,
.scanner .radar.is-instant .pill,
.scanner .radar.is-instant .node__dot,
.scanner .radar.is-instant .pill::after { transition: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE + REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .scanner { padding: 44px 20px 0; }
  .scanner .intro { gap: 10px; }
}

@media (prefers-reduced-motion: reduce){
  .scanner .blob,
.scanner .ray::before,
.scanner .hub.is-pulsing::before,
.scanner .node:not(.is-resolved) .node__dot,
.scanner .node.is-resolved .node__dot::after { animation: none !important; }
  .scanner .node,
.scanner .pill,
.scanner .node__dot { transition: none !important; }
  #sweep { transform: rotate(-24deg); }
}


.ll-bento {
  /* ---- geometry (from Figma) ---------------------------------------- */
  --ll-col: 384px;
  --ll-gap: 24px;
  --ll-pad: 32px;
  --ll-radius: 20px;
  --ll-row-a: 402px;      /* chart / team row */
  --ll-row-b: 384px;      /* volume row       */

  /* ---- motion knobs -------------------------------------------------- */
  --ll-breathe: 7.4s;     /* idle card pulse — period                     */
  --ll-breathe-amt: 1.0055;  /* peak scale. 0.55%. Felt, not seen.        */
  --ll-chart-loop: 7.4s;
  --ll-gauge-loop: 5.8s;
  --ll-count-loop: 6.6s;
  --ll-rail-loop: 17s;    /* citation pills — full travel up the card     */
  --ll-team-loop: 6.8s;
  --ll-ease: cubic-bezier(.22, .61, .36, 1);

  /* ---- palette (from Figma) ------------------------------------------ */
  --ll-ink: #fff;
  --ll-green: #42cc77;
  --ll-chip: rgba(0, 0, 0, .3);
  --ll-stars: url("/assets/ll-stars.png");

  /* ---- exported assets ------------------------------------------------
     These eight point at Figma's MCP asset host, which expires ~7 days
     after export — swap for permanent URLs when you wire it up.
     ------------------------------------------------------------------- */
  --ll-ico-g2:      url("data:image/svg+xml,%3Csvg%20fill%3D%22%23FF492C%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%200a12%2012%200%201%200%200%2024%2012%2012%200%200%200%200-24Zm.122%205.143c.45%200%20.9.044%201.342.132l-1.342%202.806C9.962%208.08%208.203%209.84%208.203%2012s1.76%203.92%203.92%203.92c.937%200%201.844-.338%202.553-.951l1.483%202.572A6.856%206.856%200%200%201%205.266%2012a6.856%206.856%200%200%201%206.856-6.856Zm3.498.49a1.262%201.262%200%200%201%20.026%200c.427%200%20.792.113%201.101.34.31.229.466.546.466.946%200%20.639-.36%201.03-1.035%201.376l-.377.191c-.403.204-.602.385-.657.706h2.05v.85h-3.101v-.144c0-.526.103-.96.314-1.306.211-.345.576-.65%201.102-.917l.242-.117c.427-.216.538-.401.538-.625%200-.266-.228-.458-.6-.458-.44%200-.773.228-1.004.694l-.592-.595c.13-.279.338-.502.619-.675a1.7%201.7%200%200%201%20.908-.266Zm-2.094%205.388h3.394l1.697%202.937-1.697%202.94-1.697-2.94H11.83l1.696-2.937Z%22%2F%3E%3C%2Fsvg%3E");
  --ll-ico-pplx:    url("data:image/svg+xml,%3Csvg%20fill%3D%22%231FB8CD%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M22.3977%207.0896h-2.3106V.0676l-7.5094%206.3542V.1577h-1.1554v6.1966L4.4904%200v7.0896H1.6023v10.3976h2.8882V24l6.932-6.3591v6.2005h1.1554v-6.0469l6.9318%206.1807v-6.4879h2.8882V7.0896zm-3.4657-4.531v4.531h-5.355l5.355-4.531zm-13.2862.0676%204.8691%204.4634H5.6458V2.6262zM2.7576%2016.332V8.245h7.8476l-6.1149%206.1147v1.9723H2.7576zm2.8882%205.0404v-3.8852h.0001v-2.6488l5.7763-5.7764v7.0111l-5.7764%205.2993zm12.7086.0248-5.7766-5.1509V9.0618l5.7766%205.7766v6.5588zm2.8882-5.0652h-1.733v-1.9723L13.3948%208.245h7.8478v8.087z%22%2F%3E%3C%2Fsvg%3E");
  --ll-ico-reddit:  url("data:image/svg+xml,%3Csvg%20fill%3D%22%23FF4500%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%200C5.373%200%200%205.373%200%2012c0%203.314%201.343%206.314%203.515%208.485l-2.286%202.286C.775%2023.225%201.097%2024%201.738%2024H12c6.627%200%2012-5.373%2012-12S18.627%200%2012%200Zm4.388%203.199c1.104%200%201.999.895%201.999%201.999%200%201.105-.895%202-1.999%202-.946%200-1.739-.657-1.947-1.539v.002c-1.147.162-2.032%201.15-2.032%202.341v.007c1.776.067%203.4.567%204.686%201.363.473-.363%201.064-.58%201.707-.58%201.547%200%202.802%201.254%202.802%202.802%200%201.117-.655%202.081-1.601%202.531-.088%203.256-3.637%205.876-7.997%205.876-4.361%200-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538%200-1.548%201.255-2.802%202.803-2.802.645%200%201.239.218%201.712.585%201.275-.79%202.881-1.291%204.64-1.365v-.01c0-1.663%201.263-3.034%202.88-3.207.188-.911.993-1.595%201.959-1.595Zm-8.085%208.376c-.784%200-1.459.78-1.506%201.797-.047%201.016.64%201.429%201.426%201.429.786%200%201.371-.369%201.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406%200c-.786%200-1.385.824-1.338%201.841.047%201.017.634%201.385%201.418%201.385.785%200%201.473-.413%201.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703%204.013c-.974%200-1.907.048-2.77.135-.147.015-.241.168-.183.305.483%201.154%201.622%201.964%202.953%201.964%201.33%200%202.47-.81%202.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z%22%2F%3E%3C%2Fsvg%3E");
  --ll-ico-youtube: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23FF0000%22%20role%3D%22img%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M23.498%206.186a3.016%203.016%200%200%200-2.122-2.136C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.377.505A3.017%203.017%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a3.016%203.016%200%200%200%202.122%202.136c1.871.505%209.376.505%209.376.505s7.505%200%209.377-.505a3.015%203.015%200%200%200%202.122-2.136C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.545%2015.568V8.432L15.818%2012l-6.273%203.568z%22%2F%3E%3C%2Fsvg%3E");
  --ll-av-1: url("/assets/ll-av-1.svg");
  --ll-av-2: url("/assets/ll-av-2.svg");
  --ll-av-3: url("/assets/ll-av-3.svg");
  --ll-av-4: url("/assets/ll-av-4.svg");

  font-family: 'Geist', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ll-ink);
  display: flex;
  justify-content: center;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

.ll-bento *, .ll-bento *::before, .ll-bento *::after { box-sizing: border-box; }

.ll-bento__grid {
  display: grid;
  width: 100%;
  max-width: calc(var(--ll-col) * 3 + var(--ll-gap) * 2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: var(--ll-row-a) var(--ll-row-b) var(--ll-row-a);
  gap: var(--ll-gap);
}

/* ---------- card shell ---------------------------------------------------
   `scale` drives the idle breathe and `translate` drives the hover lift, so
   the two never fight over the transform property.
   ---------------------------------------------------------------------- */

.ll-bento__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ll-radius);
  padding: var(--ll-pad);
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  isolation: isolate;
  transition: translate .5s var(--ll-ease), box-shadow .5s var(--ll-ease);
  will-change: scale;
}

.ll-bento.is-live .ll-bento__card {
  animation: ll-breathe var(--ll-breathe) ease-in-out infinite;
  animation-delay: var(--ph, 0s);
}

/* Deliberately tiny, and deliberately out of phase per card — if they all
   pulsed together the grid would read as a page zoom rather than as alive. */
@keyframes ll-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: var(--ll-breathe-amt); }
}

/* No hover state: the cards play their own loop and a lift on top of that
   reads as two things happening at once. */

.ll-bento__card::after {           /* Sparkles overlay — mix-blend-screen */
  content: "";
  position: absolute;
  inset: -1px;
  background-image: var(--ll-stars);
  background-size: 420px 420px;
  background-position: var(--sp, 0 0);
  opacity: .10;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}

/* ---------- shared copy block ------------------------------------------- */

.ll-bento__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  word-break: break-word;
}

.ll-bento__title {
  margin: 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -1px;
}

.ll-bento__body {
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: rgba(255, 255, 255, .92);
}

.ll-bento__card--chart .ll-bento__body,
.ll-bento__card--team  .ll-bento__body { max-width: 515px; }

/* soft diagonal light beams (Figma: Rectangle 6845 / 6846, rotated -24.01deg) */
.ll-beam {
  position: absolute;
  width: 152px;
  rotate: -24.01deg;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .13) 34%,
              rgba(255, 255, 255, .16) 58%,
              rgba(255, 255, 255, 0) 100%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

/* ========================= CARD 1 — chart ========================= */

.ll-bento__card--chart {
  grid-column: 1 / 3;
  grid-row: 1;
  gap: 16px;
  background-image: linear-gradient(175.78deg, #0c0046 6.35%, #000 65.35%);
}

.ll-chart { position: relative; z-index: 1; width: 100%; }
.ll-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.ll-chart__glow {                  /* Figma "Vector" wash under the line */
  position: absolute;
  left: 0; right: 0;
  top: 148px; height: 82px;
  background: radial-gradient(60% 100% at 62% 40%, rgba(123, 92, 255, .30), transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}

.ll-chart__grid line { stroke: rgba(255, 255, 255, .10); stroke-width: .7; }
.ll-chart__label     { fill: rgba(255, 255, 255, .42); font-size: 8.4px; font-weight: 400; }
.ll-chart__rival     { stroke: rgba(255, 255, 255, .30); stroke-width: 1.4;
                       stroke-dasharray: 7 6; stroke-linecap: round; stroke-linejoin: round; }
.ll-chart__line      { stroke: url(#llChartStroke); stroke-width: 2.6;
                       stroke-linecap: round; stroke-linejoin: round;
                       filter: drop-shadow(0 0 7px rgba(123, 92, 255, .55)); }

/* draw-on: the line and the travelling head are both driven by arc length,
   so the dot sits exactly on the leading edge the whole way across. */
.ll-chart__line { stroke-dasharray: 817; stroke-dashoffset: 817; }

.ll-bento.is-live .ll-bento__card--chart.is-playing .ll-chart__line   { animation: ll-chart-draw   var(--ll-chart-loop) ease-in-out infinite; }
.ll-bento.is-live .ll-bento__card--chart.is-playing .ll-chart__head   { animation: ll-chart-travel var(--ll-chart-loop) ease-in-out infinite; }
.ll-bento.is-live .ll-bento__card--chart.is-playing .ll-chart__rival  { animation: ll-chart-rival  var(--ll-chart-loop) ease-in-out infinite; }
.ll-bento.is-live .ll-bento__card--chart.is-playing .ll-chart__grid   { animation: ll-chart-grid   var(--ll-chart-loop) ease-out     infinite; }

@keyframes ll-chart-draw {
  0%, 3%     { stroke-dashoffset: 817; opacity: 0; }
  10%        { opacity: 1; }
  62%, 84%   { stroke-dashoffset: 0;   opacity: 1; }
  95%, 100%  { stroke-dashoffset: 0;   opacity: 0; }
}

@keyframes ll-chart-travel {
  0%, 3%     { offset-distance: 0%;   opacity: 0; }
  12%        { opacity: 1; }
  62%        { offset-distance: 100%; opacity: 1; }
  74%, 100%  { offset-distance: 100%; opacity: 0; }
}

/* the competitor lags the whole way — that lag is the point of the card */
@keyframes ll-chart-rival {
  0%, 6%     { clip-path: inset(0 100% 0 0); opacity: 0; }
  16%        { opacity: 1; }
  70%, 84%   { clip-path: inset(0 0 0 0);    opacity: 1; }
  95%, 100%  { clip-path: inset(0 0 0 0);    opacity: 0; }
}

@keyframes ll-chart-grid {
  0%        { opacity: 0; }
  14%, 86%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* head of the line: dot + the light shaft below it */
.ll-chart__head { offset-path: path("M 44.0,198.0 C 49.4,198.0 71.6,198.2 80.0,198.0 C 88.4,197.8 94.9,199.7 100.0,197.0 C 105.1,194.3 106.2,182.8 114.0,180.0 C 121.8,177.2 141.8,178.4 152.0,178.0 C 162.2,177.6 174.8,179.8 182.0,177.0 C 189.2,174.2 192.5,162.0 200.0,159.0 C 207.5,156.0 223.6,158.1 232.0,157.0 C 240.4,155.9 248.8,155.2 256.0,152.0 C 263.2,148.8 273.4,141.1 280.0,136.0 C 286.6,130.9 294.3,123.4 300.0,118.0 C 305.7,112.6 313.2,100.9 318.0,100.0 C 322.8,99.1 327.8,113.2 332.0,112.0 C 336.2,110.8 342.1,93.3 346.0,92.0 C 349.9,90.7 354.1,103.9 358.0,103.0 C 361.9,102.1 367.8,85.8 372.0,86.0 C 376.2,86.2 381.8,104.6 386.0,104.0 C 390.2,103.4 395.5,83.0 400.0,82.0 C 404.5,81.0 411.5,95.8 416.0,97.0 C 420.5,98.2 425.5,90.3 430.0,90.0 C 434.5,89.7 440.9,96.7 446.0,95.0 C 451.1,93.3 458.6,80.0 464.0,79.0 C 469.4,78.0 476.6,89.3 482.0,88.0 C 487.4,86.7 493.7,73.8 500.0,70.0 C 506.3,66.2 516.8,63.6 524.0,63.0 C 531.2,62.4 541.1,68.4 548.0,66.0 C 554.9,63.6 563.1,50.8 570.0,47.0 C 576.9,43.2 587.1,44.0 594.0,41.0 C 600.9,38.0 608.8,30.4 616.0,27.0 C 623.2,23.6 633.6,20.1 642.0,18.0 C 650.4,15.9 663.0,15.1 672.0,13.0 C 681.0,10.9 693.6,5.8 702.0,4.0 C 710.4,2.2 724.1,1.4 728.0,1.0"); offset-rotate: 0deg; }
.ll-chart__head-beam { fill: url(#llChartBeam); }
.ll-chart__head-blob { fill: url(#llChartBlob); }
.ll-chart__head-dot  { fill: #fff; filter: drop-shadow(0 0 6px rgba(167, 139, 255, .95)); }

/* ========================= CARD 2 — gauge ========================= */

.ll-bento__card--gauge {
  grid-column: 3;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: space-between;
  background-image: linear-gradient(197.16deg, #0c2c23 1.68%, #000 74.46%);
}

.ll-bento__card--gauge .ll-beam { height: 713px; top: -88px; right: 42px; }

.ll-gauge {
  position: relative;
  z-index: 1;
  flex: 1 0 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ll-gauge__dial { display: block; width: min(285px, 88cqw); height: auto; }

.ll-gauge__ticks line { stroke: rgba(255, 255, 255, .34); stroke-width: 1; }
.ll-gauge__arc-bg     { fill: none; stroke: url(#llGaugeArc); stroke-width: 2.4;
                        stroke-linecap: round; opacity: .34; }
.ll-gauge__arc {
  fill: none;
  stroke: url(#llGaugeArc);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 597;
  /* --p is written by JS, 0 -> .8 */
  stroke-dashoffset: calc(597 - 597 * var(--p, 0));
  filter: drop-shadow(0 0 5px rgba(66, 204, 119, .5));
}

.ll-gauge__needle {
  transform-box: view-box;
  transform-origin: 142.5px 142.5px;
  rotate: calc(-150deg + 300deg * var(--p, 0));
}

.ll-gauge__readout {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.36px;
  text-align: center;
  white-space: nowrap;
}
.ll-gauge__pct { color: var(--ll-green); font-variant-numeric: tabular-nums; }

/* ========================= CARD 3 — counter ========================= */

.ll-bento__card--volume {
  grid-column: 2;
  grid-row: 2;
  justify-content: flex-end;
  background-image: linear-gradient(219.25deg, #00806b 1.37%, #003340 54.81%, #000 83.71%);
}

.ll-bento__card--volume .ll-beam { height: 421px; top: -88px; }
.ll-bento__card--volume .ll-beam--a { right: 161px; }
.ll-bento__card--volume .ll-beam--b { right: -118px; }

.ll-vol__num {
  position: absolute;
  left: 69px;
  top: 96px;
  z-index: 1;
  /* the node sets this far larger than the port had it, and it is the card's
     whole subject — it should read as the headline, not as a caption */
  font-size: 30cqw;
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.ll-vol__val,
.ll-vol__glow {
  display: block;
  background: linear-gradient(178deg, rgba(255, 255, 255, .62) 8%, rgba(255, 255, 255, .17) 92%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.ll-vol__glow {
  position: absolute;
  inset: 0;
  filter: blur(17px);
  opacity: .75;
}

/* ==================== CARD 4 — citation stream ==================== */

.ll-bento__card--citations {
  grid-column: 1;
  grid-row: 2 / 4;
  justify-content: flex-end;
  background-image: linear-gradient(199.81deg, #312600 7.29%, #000 63.52%);
}

.ll-cit {
  --ll-rail-h: 830px;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* the Figma mask — soft top and bottom, which is also what makes the
     rising loop read as a stream rather than as items popping in */
  /* Two masks, intersected: the vertical one now clears out well above the
     card's copy instead of dropping pills on top of the heading, and the
     horizontal one keeps them off the left and right edges. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 12%, #000 44%, rgba(0,0,0,.28) 62%, transparent 74%),
    linear-gradient(to right,  transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 12%, #000 44%, rgba(0,0,0,.28) 62%, transparent 74%),
    linear-gradient(to right,  transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.ll-cit__rail {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(255, 255, 255, .13);
}

.ll-cit__pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(calc(-50% + var(--ox, 0px)));
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 15px;
  border-radius: 200px;
  background: var(--ll-chip);
  white-space: nowrap;
  translate: 0 var(--ll-rail-h, 830px);
}

.ll-bento.is-live .ll-bento__card--citations.is-playing .ll-cit__pill {
  animation: ll-cit-rise var(--ll-rail-loop) linear infinite;
  animation-delay: calc(var(--i) * var(--ll-rail-loop) / -8);
}

@keyframes ll-cit-rise {
  from { translate: 0 var(--ll-rail-h, 830px); }
  to   { translate: 0 -70px; }
}

.ll-cit__ico {
  flex: none;
  width: 32px;
  height: 32px;
  background: var(--ico) center / contain no-repeat;
}
.ll-cit__ico--yt { width: 34.284px; height: 24px; }

.ll-cit__txt {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.36px;
  line-height: normal;
}

/* ========================= CARD 5 — team ========================= */

.ll-bento__card--team {
  grid-column: 2 / 4;
  grid-row: 3;
  justify-content: flex-end;
  gap: 16px;
  background-image: linear-gradient(175.78deg, #2e002c 6.35%, #000 65.35%);
}

.ll-team {
  position: absolute;
  left: 18.94%;             /* 150 / 792 */
  top: 50px;
  width: 57.95%;            /* 459 / 792 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 68%, rgba(0,0,0,.42) 86%, rgba(0,0,0,.14) 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 68%, rgba(0,0,0,.42) 86%, rgba(0,0,0,.14) 100%);
}

.ll-team__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 51px);
  gap: 16px;
}

.ll-team__chip,
.ll-team__join {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-radius: 15px;
  background: var(--ll-chip);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.36px;
  white-space: nowrap;
  overflow: hidden;
}

.ll-team__join {
  height: 43px;
  justify-content: center;
  font-weight: 600;
  background: rgba(164, 164, 164, .3);
}

.ll-team__av {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
/* Figma clips a 32 x 41.5 illustration into a 32px circle, top-aligned */
.ll-team__av::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 32px;
  height: 41.5px;
  background: var(--av) top center / 32px 41.5px no-repeat;
}

.ll-bento.is-live .ll-bento__card--team.is-playing .ll-team__chip,
.ll-bento.is-live .ll-bento__card--team.is-playing .ll-team__join {
  animation: ll-team-in var(--ll-team-loop) var(--ll-ease) infinite;
  animation-delay: calc(var(--i) * .12s);
}

@keyframes ll-team-in {
  0%        { opacity: 0; translate: 0 16px; scale: .96; }
  11%, 72%  { opacity: 1; translate: 0 0;    scale: 1; }
  86%, 100% { opacity: 0; translate: 0 -7px; scale: .99; }
}

/* ---------- play-once mode ---------- */

.ll-bento[data-loop="false"].is-live .ll-bento__card,
.ll-bento[data-loop="false"].is-live .is-playing .ll-cit__pill { animation-iteration-count: infinite; }

.ll-bento[data-loop="false"].is-live .is-playing .ll-chart__line,
.ll-bento[data-loop="false"].is-live .is-playing .ll-chart__head,
.ll-bento[data-loop="false"].is-live .is-playing .ll-chart__rival,
.ll-bento[data-loop="false"].is-live .is-playing .ll-chart__grid,
.ll-bento[data-loop="false"].is-live .is-playing .ll-team__chip,
.ll-bento[data-loop="false"].is-live .is-playing .ll-team__join {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: var(--ll-ease);
}

/* ---------- responsive ---------- */

@container (max-width: 360px) {
  .ll-vol__num { font-size: 30cqw; left: 14%; }
}

@media (max-width: 1180px) {
  .ll-bento__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: var(--ll-row-a) 620px var(--ll-row-b) var(--ll-row-a);
  }
  .ll-bento__card--chart     { grid-column: 1 / 3; grid-row: 1; }
  .ll-bento__card--gauge     { grid-column: 1;     grid-row: 2; }
  .ll-bento__card--citations { grid-column: 2;     grid-row: 2 / 4; }
  .ll-bento__card--volume    { grid-column: 1;     grid-row: 3; }
  .ll-bento__card--team      { grid-column: 1 / 3; grid-row: 4; }
  .ll-cit { --ll-rail-h: 1040px; }
}

@media (max-width: 760px) {
  .ll-bento__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 380px 560px 360px 560px 400px;
    gap: 16px;
  }
  .ll-bento__card--chart     { grid-column: 1; grid-row: 1; }
  .ll-bento__card--gauge     { grid-column: 1; grid-row: 2; }
  .ll-bento__card--volume    { grid-column: 1; grid-row: 3; }
  .ll-bento__card--citations { grid-column: 1; grid-row: 4; }
  .ll-bento__card--team      { grid-column: 1; grid-row: 5; }
  .ll-bento__card { padding: 24px; }
  .ll-bento__title { font-size: 21px; letter-spacing: -.7px; }
  .ll-bento__body  { font-size: 16px; line-height: 22px; }
  .ll-cit { --ll-rail-h: 580px; }
  .ll-team { left: 5%; width: 90%; top: 34px; }
  .ll-vol__num { left: 24px; top: 68px; font-size: 92px; letter-spacing: -.055em; }
}

/* ---------- reduced motion — everything jumps to the finished state ---------- */

@media (prefers-reduced-motion: reduce) {
  .ll-bento *, .ll-bento *::before, .ll-bento *::after {
    animation: none !important;
    transition: none !important;
  }
  .ll-bento__card { scale: 1 !important; }
  .ll-chart__line { stroke-dashoffset: 0; opacity: 1; }
  .ll-chart__head { opacity: 0; }
  .ll-chart__rival, .ll-chart__grid { opacity: 1; clip-path: none; }
  .ll-team__chip, .ll-team__join { opacity: 1; translate: none; scale: 1; }
  .ll-cit__pill { translate: 0 var(--rest, 0); }
  .ll-cit__pill--dup { display: none; }
}


.wf {
  /* hero panel surface — Figma 9585:16253 */
  --panel-glow:#d3ecff;     /* the radial rim of the hero panel */
  --panel-ring:#e9ebed;     /* its 1px hairline                 */
  --panel-dot:#afafaf;      /* the dot grid over it             */

  --card-ring:#edeff3;
  --card-bg:#ffffff;
  --title:#1c1d1f;
  /* was #8f99a8 (2.9:1 on the card): the step descriptions now meet WCAG AA at 4.7:1 */
  --muted:#6b7280;

  --green:#0fc27b;          /* connector progress */
  --green-text:#0b935d;
  --green-bg:#ddf9e4;
  --green-br:#c7f4d3;

  --grey-line:#d1d3d6;      /* connector base */
  --grey-text:#505967;
  --grey-bg:#f3f4f6;
  --grey-br:#e4e7ec;

  --blue:#266df0;
  --blue-bg:#e5eeff;
  --blue-br:#d6e5ff;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Geist','Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  /* flow geometry, 1:1 with Figma */
  --flow-w:550.314px;
  --flow-h:474.686px;
  --card-w:226.312px;
  --card-h:64.364px;

  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-inline:clamp(12px,3vw,24px);
}

.wf *,
.wf *::before,
.wf *::after {box-sizing:border-box}

/* ---- hero frame (Figma 9585:16253) ----
   A white panel that warms to --panel-glow at the rim, under a dot grid.
   Figma draws the glow as a radial gradient centred on the frame, its
   ellipse exactly half the frame wide and 98.63% of it tall, holding white
   out to 67.785%; the grid is 1.266px dots on a 26.592px pitch. The glow is
   written in percentages so it follows the panel, but the dots and the
   hairline keep their Figma pixel sizes — the panel reflows narrower than
   the 1880px artboard, and scaling a 1.266px dot down with it would erase
   it. The old peach wash and its light streaks are what this replaces. */
.wf .hero {
  position:relative;
  max-width:1200px;
  height:621px;
  margin:0 auto;
  padding:64px;
  border:1px solid var(--panel-ring);
  border-radius:30px;
  overflow:hidden;
  background-image:
    radial-gradient(circle at center,var(--panel-dot) .633px,transparent .634px),
    radial-gradient(ellipse 50% 98.63% at 50% 50%,#fff 67.785%,var(--panel-glow) 100%);
  background-size:26.592px 26.592px,100% 100%;
}

/* ---- copy column ---- */
.wf .copy {position:relative;width:382px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}

.wf .copy h2 {
  margin:0;
  width:462px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:1.2;
  letter-spacing:-2px;
  background:linear-gradient(180deg,#000 0%,#6e7c8e 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.wf .copy p {
  margin:0;
  width:100%;
  font-family:var(--display);
  font-weight:400;
  font-size:18px;
  line-height:24px;
  color:#525252;
}

.wf .btn {
  appearance:none;
  display:inline-flex;
  align-items:center;
  height:48px;
  padding:0 24px;
  border:0;
  border-radius:8px;
  background:#fff;
  font-family:var(--sans);
  font-weight:500;
  font-size:16px;
  line-height:20px;
  color:#2a2a2a;
  cursor:pointer;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.1));
  box-shadow:inset 0 3px 14px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, filter .18s ease;
}
.wf .btn:hover {filter:brightness(.96)}
.wf .btn:active {transform:translateY(0)}
.wf .btn:focus-visible {outline:2px solid var(--blue);outline-offset:3px}

/* ---- flow diagram ---- */
.wf .flow-stage {
  position:absolute;
  top:67px;
  right:75.69px;          /* = 1200 - 574 - 550.314 */
  width:var(--flow-w);
  height:var(--flow-h);
}
.wf .flow {
  position:relative;
  width:var(--flow-w);
  height:var(--flow-h);
  transform:scale(var(--fs,1));
  transform-origin:top left;
}

/* ---- trigger tab,
.wf tucked behind the first card ---- */
.wf .trigger {
  position:absolute;
  left:162px;
  top:-17.7px;
  z-index:0;
  display:flex;
  align-items:center;
  gap:2.414px;
  padding:2.414px 6.436px 20.918px 4.827px;
  border:.805px solid var(--blue-br);
  border-radius:8.046px;
  background:var(--blue-bg);
  font-weight:500;
  font-size:9.655px;
  line-height:14.482px;
  /* a shade under --blue: 9.6px text on --blue-bg needs 4.5:1, and #266df0 gave 3.97 */
  color:#1d5fd6;
  white-space:nowrap;
}

/* ---- connectors ---- */
.wf .conn {position:absolute;z-index:1;overflow:visible}
.wf .conn__line {
  stroke-dasharray:1 2;
  stroke-dashoffset:1;
  transition:stroke-dashoffset var(--draw,750ms) cubic-bezier(.37,.03,.28,1);
}
.wf .conn__tip {opacity:0;transition:opacity 200ms ease var(--tip-delay,600ms)}
.wf .conn.is-on .conn__line {stroke-dashoffset:0}
.wf .conn.is-on .conn__tip {opacity:1}

/* used for one frame on loop reset so nothing animates backwards */
.wf .flow.is-resetting .node[data-state="running"] {animation:none}
.wf .flow.is-resetting .conn__line,
.wf .flow.is-resetting .conn__tip,
.wf .flow.is-resetting .node,
.wf .flow.is-resetting .status,
.wf .flow.is-resetting .port {transition:none !important}

#c1 {left:270.33px;top:63.56px;--draw:750ms;--tip-delay:600ms}
#c2 {left:270.33px;top:184.24px;--draw:750ms;--tip-delay:600ms}
#c3 {left:274.36px;top:304.93px}                                  /* SMB branch — not taken */
#c4 {left:115.55px;top:304.93px;--draw:950ms;--tip-delay:790ms}

/* ---- node card ---- */
.wf .node {
  position:absolute;
  z-index:2;
  left:var(--x);
  top:var(--y);
  width:var(--card-w);
  height:var(--card-h);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9.655px;
  background:var(--card-ring);
  filter:drop-shadow(0 .805px .805px rgba(0,0,0,.05));
  transition:background-color .45s ease, box-shadow .45s ease,
             transform .45s cubic-bezier(.2,.8,.25,1),
             opacity .45s ease, filter .45s ease;
}
.wf .node__inner {
  width:224.703px;
  height:62.755px;
  padding:10.459px 10.459px 8.85px;
  border-radius:8.85px;
  background:var(--card-bg);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.wf .node__head {
  display:flex;
  align-items:center;
  gap:6.436px;
  width:203.784px;
  padding-bottom:5.632px;
}
.wf .node__ico {
  flex:0 0 auto;
  width:19.309px;
  height:19.309px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5.632px;
  border:.805px solid;
}
.wf .node__ico--blue {background:var(--blue-bg);border-color:var(--blue-br)}
.wf .node__ico--amber {background:#fff3cc;border-color:#ffe59e}
.wf .node__ico--pink {background:#feecf3;border-color:#fdddea}
.wf .node__ico--cyan {background:#ddf7ff;border-color:#d0eff7}

.wf .node__title {
  font-weight:500;
  font-size:11.264px;
  line-height:16.091px;
  letter-spacing:-.1126px;
  color:var(--title);
  white-space:nowrap;
  overflow:hidden;
}
.wf .node__desc {
  margin:0;
  width:100%;
  height:17.7px;
  font-weight:500;
  font-size:10.459px;
  line-height:17.7px;
  letter-spacing:-.1287px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
}

/* output port */
.wf .port {position:absolute;left:108.33px;top:59.13px;width:9.654634px;height:9.654634px;color:var(--blue);transition:color .3s ease}
.wf .node[data-fired="true"] .port {color:var(--green)}

/* ---- status badges ---- */
.wf .status {
  position:absolute;
  top:-22.53px;
  right:7.9px;
  display:flex;
  align-items:center;
  gap:3.218px;
  padding:.805px 4.023px;
  border-radius:6.436px;
  border:.805px solid;
  font-weight:500;
  font-size:9.655px;
  line-height:14.482px;
  white-space:nowrap;
  opacity:0;
  transform:translateY(3px) scale(.94);
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.25,1);
  pointer-events:none;
}
.wf .status--running {background:#fff;border-color:var(--green-br);color:var(--green-text)}
.wf .status--done {background:var(--green-bg);border-color:var(--green-br);color:var(--green-text)}

.wf .node[data-state="running"] .status--running,
.wf .node[data-state="done"]    .status--done {opacity:1;transform:none}

/* ---- live states: this is the green travelling ---- */
/* ── dormant → live ───────────────────────────────────────────────────
   A step that has not run yet reads as switched off: desaturated, dimmed,
   sitting flat. Reaching it restores colour and lifts it off the board.
   The SMB card never runs — the branch is not taken — so it stays dormant,
   which is exactly the point the diagram is making. */
.wf .node[data-state="idle"] {
  filter:grayscale(.9);
}
/* Dormant, but legible. The whole card used to drop to opacity .4, which took its text to 2.5:1 (titles)
   and 1.4:1 (descriptions) — the homepage's only accessibility failures. The fade now falls on the parts
   that carry no reading — the icon and the ports (the status badges are already hidden until a card runs) — and the text greys to a colour that still meets AA,
   so the card reads as not-yet-run without being unreadable. */
.wf .node[data-state="idle"] .node__ico,
.wf .node[data-state="idle"] .port {opacity:.4}
.wf .node[data-state="idle"] .node__title {color:#5f6672}
.wf .node[data-state="idle"] .node__inner {background:#fbfcfd}

/* the running step: a solid green ring rather than the old pale wash, with
   a slow breathing halo so the eye lands on it immediately */
.wf .node[data-state="running"] {
  background:var(--green);
  transform:translateY(-2px);
  animation:wfActive 1.7s ease-in-out infinite;
}
@keyframes wfActive {
  0%,100% {box-shadow:0 0 0 3px rgba(15,194,123,.30), 0 6px 20px rgba(15,194,123,.24)}
  50%     {box-shadow:0 0 0 7px rgba(15,194,123,.16), 0 10px 28px rgba(15,194,123,.34)}
}

.wf .node[data-state="done"] {
  background:var(--green-br);
  box-shadow:0 1px 4px rgba(15,194,123,.22);
}

/* terminal card has no badge — it lands with a lift instead */
.wf .node--terminal[data-state="running"] {transform:translateY(-1.5px)}
.wf .node--terminal[data-state="done"] {
  background:var(--green);
  box-shadow:0 0 0 3px rgba(15,194,123,.22), 0 8px 22px rgba(15,194,123,.28);
  transform:translateY(-2px);
}

/* 9.655 slot,
.wf 12.751 glyph overflowing it — as drawn in Figma */
.wf .spin-slot {position:relative;width:9.654634px;height:9.654634px;flex:0 0 auto}
.wf .spin {
  position:absolute;
  left:-1.548px;
  top:-1.548px;
  width:12.751px;
  height:12.751px;
  animation:wfSpin .9s linear infinite;
  transform-origin:50% 50%;
}
@keyframes wfSpin{to{transform:rotate(360deg)}}

/* ---- stacked layout ---- */
@media (max-width:1179px) {
  .wf .hero {height:auto;padding:clamp(28px,5vw,56px);border-radius:24px}
  .wf .copy {width:100%;max-width:560px}
  .wf .copy h2 {width:100%;font-size:clamp(34px,6.4vw,56px);letter-spacing:-1.4px}
  .wf .copy p {font-size:clamp(16px,2.2vw,18px);line-height:1.45}
  .wf .flow-stage {
    position:relative;
    top:auto;right:auto;
    width:100%;
    max-width:var(--flow-w);
    margin:44px auto 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .wf .conn__line,
.wf .conn__tip,
.wf .node,
.wf .status,
.wf .port,
.wf .btn {transition:none !important}
  .wf .node[data-state="running"] {animation:none}
  .wf .spin {animation:none}
}


@property --ll-p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.ll-growth {
  /* ---- design tokens (from Figma) ---- */
  --ll-green:        #00B259;   /* curve stroke + bars + area wash      */
  --ll-accent:       #0091FF;   /* 3px stat rule                        */
  --ll-hairline:     #CECECE;   /* section top/bottom border            */
  --ll-ink:          #000000;   /* numbers + heading gradient start     */
  --ll-ink-fade:     #6E7C8E;   /* heading gradient end                 */
  --ll-muted:        #525252;   /* stat labels                          */

  /* fluid type — scales continuously, no breakpoint tiers */
  --ll-title-size:   clamp(30px, 3.9vw, 56px);
  --ll-value-size:   clamp(34px, 3.9vw, 56px);
  --ll-label-size:   clamp(15px, 1.25vw, 18px);
  --ll-emoji-size:   clamp(36px, 4.6vw, 67px);
  --ll-track:        clamp(-1px, -.14vw, -2px);

  /* ---- bar visibility ---- */
  --ll-bar-top:      .34;       /* alpha at the tip, where it meets the curve */
  --ll-bar-mid:      .11;       /* alpha at 55% down                          */
  --ll-bar-pitch:    10;        /* px between bars, in viewBox units          */

  /* ---- animation ---- */
  --ll-p:            0;
  --ll-dur:          3200ms;    /* whole timeline. bars each take ~1/3 of it  */
  --ll-ease:         cubic-bezier(.22, .55, .25, 1);

  --ll-lead:         .68;       /* progress at which the curve finishes       */
  --ll-lead-inv:     1.4706;    /* 1 / --ll-lead                              */
  --ll-bar-k:        3.125;     /* 1 / (1 − --ll-lead) — bar rise speed       */

  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;

  height: 100vh;
  height: 100svh;
  min-height: 560px;

  display: flex;
  align-items: center;

  background: #fff;
  border-top: 1px solid var(--ll-hairline);
  border-bottom: 1px solid var(--ll-hairline);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ll-growth *,
.ll-growth *::before,
.ll-growth *::after { box-sizing: border-box; }

.ll-growth[data-ll-growth="enter"] {
  transition: --ll-p var(--ll-dur) var(--ll-ease);
}

.ll-growth.is-revealed { --ll-p: 1; }

/* ---------- the chart ---------- */

.ll-growth__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.ll-growth__reveal {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: scaleX(clamp(0, var(--ll-p) * var(--ll-lead-inv), 1));
}

.ll-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(clamp(0, (var(--ll-p) - var(--ll-d)) * var(--ll-bar-k), 1));
}

#llBarGrad .ll-stop-0 { stop-color: var(--ll-green); stop-opacity: var(--ll-bar-top); }
#llBarGrad .ll-stop-1 { stop-color: var(--ll-green); stop-opacity: var(--ll-bar-mid); }
#llBarGrad .ll-stop-2 { stop-color: var(--ll-green); stop-opacity: 0; }

/* ---------- copy column ---------- */

.ll-growth__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 24px);
}

.ll-growth__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vh, 48px);
  align-items: flex-start;
  max-width: 698px;
}

.ll-growth__title {
  margin: 0;
  font-weight: 500;
  font-size: var(--ll-title-size);
  line-height: 1.2;
  letter-spacing: var(--ll-track);
  background: linear-gradient(180deg, var(--ll-ink) 0%, var(--ll-ink-fade) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ll-growth__emoji {
  display: inline-block;
  vertical-align: middle;
  width: var(--ll-emoji-size);
  height: var(--ll-emoji-size);
  margin-left: .18em;
  object-fit: cover;
}

/* ---------- stats ---------- */

.ll-growth__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 2.6vh, 32px) 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ll-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 1 309px;
  padding-left: 20px;
  border-left: 3px solid var(--ll-accent);
}

.ll-stat__value {
  font-weight: 500;
  font-size: var(--ll-value-size);
  line-height: 1.2;
  letter-spacing: var(--ll-track);
  color: var(--ll-ink);
  white-space: nowrap;
}

.ll-stat__label {
  font-weight: 400;
  font-size: var(--ll-label-size);
  line-height: 1.35;
  color: var(--ll-muted);
  max-width: 160px;
}

/* ---------- copy reveal ---------- */

.ll-growth__title,
.ll-stat {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}

.ll-growth.is-revealed .ll-growth__title,
.ll-growth.is-revealed .ll-stat {
  opacity: 1;
  transform: none;
}

.ll-growth.is-revealed .ll-stat:nth-child(1) { transition-delay: .12s; }
.ll-growth.is-revealed .ll-stat:nth-child(2) { transition-delay: .22s; }
.ll-growth.is-revealed .ll-stat:nth-child(3) { transition-delay: .32s; }
.ll-growth.is-revealed .ll-stat:nth-child(4) { transition-delay: .42s; }

/* ---------- the one breakpoint ---------- */

@media (max-width: 680px) {
  .ll-growth {
    --ll-bar-pitch: 16;
    --ll-dur: 2600ms;
  }
  .ll-stat { flex: 1 1 100%; }
  .ll-stat__label { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-growth,
  .ll-growth * { transition: none !important; }
  .ll-growth { --ll-p: 1; }
  .ll-growth__title,
  .ll-stat { opacity: 1; transform: none; }
}


.ll-mcp {
  /* ---- palette (from Figma) ---- */
  --mcp-bg-top:      #001043;   /* card gradient start                  */
  --mcp-bg-bot:      #000000;   /* card gradient end                    */
  --mcp-glow-a:      #A791FF;   /* violet bloom, right                  */
  --mcp-glow-b:      #A92BC8;   /* magenta bloom, left                  */
  --mcp-glow-c:      #C61616;   /* warm bloom, below the fold           */
  --mcp-beam-cool:   #0091FF;   /* beam head                            */
  --mcp-beam-warm:   #FA24CE;   /* beam tail                            */
  --mcp-orb-halo:    rgba(0,145,255,.40);

  /* ---- type ---- */
  --mcp-title:       clamp(30px, 4.7vw, 56px);
  --mcp-body:        clamp(15px, 1.5vw, 18px);

  /* ---- motion knobs · tune these ---- */
  --mcp-loop:        2600ms;    /* one ZeroRank → agents transmission   */
  --mcp-ack-stagger: .08;       /* cycle fraction between circle nods   */
  --mcp-star-alpha:  .62;       /* starfield master brightness (0–1)    */
  --mcp-star-scale:  1;         /* star size multiplier                 */
  --mcp-glow-blur:   206px;     /* matches Figma σ205.964               */
  --vs:              1;         /* viz stage scale (responsive)         */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  min-height: 546px;
  margin-inline: auto;
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: linear-gradient(180deg, var(--mcp-bg-top) 0%, var(--mcp-bg-bot) 100%);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ll-mcp *, .ll-mcp *::before, .ll-mcp *::after { box-sizing: border-box; }

/* ---- LAYER 1 — the bloom (Figma 9377:6862) ---- */
.ll-mcp__bloom { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* blur is per-ellipse, not on the group — Figma blurs each layer then
   composites, and blurring the composite loses the colour mixing */
.ll-mcp__bloom i {
  position: absolute;
  display: block;
  width: 36.24%;          /* 434.91 / 1200 */
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(var(--mcp-glow-blur));
}
.ll-mcp__bloom i:nth-child(1) { left: 59.91%; top: 95.3%;  background: var(--mcp-glow-a); }
.ll-mcp__bloom i:nth-child(2) { left: 40.09%; top: 95.3%;  background: var(--mcp-glow-b); }
.ll-mcp__bloom i:nth-child(3) { left: 51.15%; top: 134.9%; background: var(--mcp-glow-c); }

/* ---- LAYER 2 — the starfield ---- */
.ll-mcp__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(110% 90% at 50% 112%, rgba(0,0,0,.22), rgba(0,0,0,.68) 45%, #000 78%);
          mask-image: radial-gradient(110% 90% at 50% 112%, rgba(0,0,0,.22), rgba(0,0,0,.68) 45%, #000 78%);
}

.ll-mcp__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  /* opacity-only — keeps ~180 nodes on the compositor's cheap path */
  animation: mcp-twinkle var(--d) ease-in-out infinite var(--delay);
}

@keyframes mcp-twinkle {
  0%, 100% { opacity: calc(var(--a) * .12); }
  50%      { opacity: var(--a); }
}

.ll-mcp__star--glint { background: none; animation-name: mcp-glint; }
.ll-mcp__star--glint::before,
.ll-mcp__star--glint::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.ll-mcp__star--glint::before {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
}
.ll-mcp__star--glint::after {
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, #fff 50%, transparent);
}

@keyframes mcp-glint {
  0%, 100% { opacity: 0;                  scale: .4; }
  46%      { opacity: 0;                  scale: .4; }
  62%      { opacity: var(--a);           scale: 1;  }
  82%      { opacity: calc(var(--a) * .2); scale: .7; }
}

/* ---- LAYER 3 — content ---- */
.ll-mcp__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 613px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.ll-mcp__title {
  margin: 0;
  font-weight: 500;
  font-size: var(--mcp-title);
  line-height: 1.2;
  letter-spacing: -.0357em;      /* −2px at 56px */
  background: linear-gradient(180deg, #fff 0%, #EAEAEA 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-wrap: balance;
}

.ll-mcp__body {
  margin: 0;
  font-weight: 400;
  font-size: var(--mcp-body);
  line-height: 1.34;
  color: #fff;
  text-wrap: pretty;
}

.ll-mcp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 24px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #2A2A2A;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 3px 14px rgba(255,255,255,.35);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
}
.ll-mcp__cta:hover  { box-shadow: inset 0 3px 14px rgba(255,255,255,.35); }
.ll-mcp__cta:active { transform: translateY(0); }
.ll-mcp__cta:focus-visible { outline: 2px solid #7FD0FF; outline-offset: 3px; }

/* ---- THE VIZ STAGE — 387×108, exact Figma coordinates ----
     logos x0 y14 180×80 · track x170 y54 125×2 · orb x277 y0 110×108 */
.ll-mcp__viz-wrap { height: calc(108px * var(--vs)); display: flex; justify-content: center; width: 100%; }
.ll-mcp__viz {
  position: relative;
  width: 387px;
  height: 108px;
  flex: none;
  scale: var(--vs);
  transform-origin: top center;
}

.ll-mcp__agents { position: absolute; left: 0; top: 14px; width: 180px; height: 80px; z-index: 3; }
.ll-mcp__agent  { position: absolute; top: 0; width: 80px; height: 80px; border-radius: 50%; }
/* ack order runs right → left, following the beam: circle 3 is nearest
   the orb so it nods first */
.ll-mcp__agent:nth-child(1) { left: 0;     z-index: 1; --ack-delay: calc(var(--mcp-loop) * var(--mcp-ack-stagger) * 2); }
.ll-mcp__agent:nth-child(2) { left: 50px;  z-index: 2; --ack-delay: calc(var(--mcp-loop) * var(--mcp-ack-stagger)); }
.ll-mcp__agent:nth-child(3) { left: 100px; z-index: 3; --ack-delay: 0s; }

.ll-mcp__agent::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(160,215,255,.9);
  opacity: 0;
  pointer-events: none;
}

.ll-mcp__agent--disc {
  background: #fff;
  border: 1px solid rgba(195,195,195,.3);
  box-shadow: inset 0 4px 34px rgba(255,255,255,.35);
}
/* absolute children resolve against the padding box, so subtract the 1px
   border to land on Figma's 22,21 from the circle's outer edge */
.ll-mcp__agent--disc svg { position: absolute; left: 21px; top: 20px; }
.ll-mcp__agent svg { display: block; }

/* the emission flash, pinned to where the beam leaves the orb (277,54) */
.ll-mcp__launch {
  position: absolute;
  left: 264px; top: 41px;
  width: 26px; height: 26px;
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160,215,255,.95) 0%, rgba(0,145,255,.45) 38%, rgba(0,145,255,0) 70%);
  opacity: 0;
  pointer-events: none;
}

.ll-mcp__track {
  position: absolute;
  left: 170px; top: 54px;
  width: 125px; height: 2px;
  z-index: 1;
  border-radius: 20px;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
}

/* stage z-order: track/beam 1 · orb 2 · agents 3 · launch flash 4.
   The beam sits below the orb so it is hidden at launch, and below
   the stack so it is swallowed on arrival. */
.ll-mcp__beam {
  position: absolute;
  left: 285px; top: 54px;      /* start fully tucked behind the orb */
  width: 21px; height: 2px;
  z-index: 1;
  opacity: 0;
  will-change: transform;
}

.ll-mcp__beam-core,
.ll-mcp__beam-bloom { position: absolute; inset: 0; border-radius: 20px; }
.ll-mcp__beam-core  { background: linear-gradient(90deg, var(--mcp-beam-cool) 0%, #fff 50%, var(--mcp-beam-warm) 100%); }
.ll-mcp__beam-bloom { background: linear-gradient(90deg, var(--mcp-beam-cool) 0%, var(--mcp-beam-warm) 100%); filter: blur(2px); }

/* the streak dragged behind the head — beam runs right→left, so the
   trail extends to the right and is brightest where it meets the beam */
.ll-mcp__beam-trail {
  position: absolute;
  left: 4px; top: 0;
  width: 62px; height: 2px;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(190,225,255,.72) 0%, rgba(125,195,255,.30) 45%, rgba(0,145,255,0) 100%);
  filter: blur(1px);
  transform: scaleX(0);
  transform-origin: left center;
}

.ll-mcp__orb {
  position: absolute;
  left: 277px; top: 0;
  width: 110px; height: 108px;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(78% 74% at 32% 20%,  rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(70% 66% at 52% 100%, rgba(96,214,255,.55)  0%, rgba(96,214,255,0)  58%),
    radial-gradient(128% 122% at 50% 4%, #3FB9FF 0%, #0A84F5 40%, #0B45D0 70%, #062A8C 100%);
  background-color: #0A5CE0;
  /* first shadow is Figma's; the second is the soft bloom the sphere sits
     in. Both are box-shadows so they paint *behind* the orb's background. */
  box-shadow:
    0 0 14px var(--mcp-orb-halo),
    0 0 48px 6px rgba(0,145,255,.26),
    inset 0 4px 20px rgba(255,255,255,.25);
}

.ll-mcp__orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(150,215,255,.9);
  opacity: 0;
  pointer-events: none;
}

.ll-mcp__orb-mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }

/* ---- TRANSMISSION — all tracks share --mcp-loop ---- */
.ll-mcp.is-live .ll-mcp__beam        { animation: mcp-beam-travel var(--mcp-loop) cubic-bezier(.4,0,.6,1) infinite,
                                                  mcp-beam-fade   var(--mcp-loop) linear infinite; }
.ll-mcp.is-live .ll-mcp__beam-trail  { animation: mcp-beam-trail  var(--mcp-loop) ease-out infinite; }
.ll-mcp.is-live .ll-mcp__launch      { animation: mcp-launch      var(--mcp-loop) ease-out infinite; }
.ll-mcp.is-live .ll-mcp__orb-ring    { animation: mcp-orb-ring    var(--mcp-loop) ease-out infinite; }
.ll-mcp.is-live .ll-mcp__orb         { animation: mcp-orb-send    var(--mcp-loop) ease-out infinite; }

/* same keyframes on all three circles — only --ack-delay differs, which
   is what produces the one-by-one nod */
.ll-mcp.is-live .ll-mcp__agent        { animation: mcp-agent-ack  var(--mcp-loop) ease-out var(--ack-delay) infinite; }
.ll-mcp.is-live .ll-mcp__agent::after { animation: mcp-agent-ring var(--mcp-loop) ease-out var(--ack-delay) infinite; }

/* travel: 285 → 156px, i.e. out from behind the orb and into the stack */
@keyframes mcp-beam-travel {
  0%        { transform: translateX(0); }
  52%, 100% { transform: translateX(-129px); }
}

/* visible only across the open corridor between orb and stack */
@keyframes mcp-beam-fade {
  0%, 4%    { opacity: 0; }
  12%, 46%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes mcp-beam-trail {
  0%, 3%    { transform: scaleX(0); }
  15%, 42%  { transform: scaleX(1); }
  51%, 100% { transform: scaleX(0); }
}

@keyframes mcp-launch {
  0%        { opacity: 0;   scale: .55; }
  7%        { opacity: .95; scale: 1;   }
  20%, 100% { opacity: 0;   scale: 1.25; }
}

@keyframes mcp-orb-ring {
  0%        { opacity: 0;   scale: .92; }
  6%        { opacity: .75; scale: 1.02; }
  26%, 100% { opacity: 0;   scale: 1.34; }
}

@keyframes mcp-orb-send {
  0% {
    box-shadow: 0 0 14px var(--mcp-orb-halo),
                0 0 48px 6px rgba(0,145,255,.26),
                inset 0 4px 20px rgba(255,255,255,.25);
    scale: 1;
  }
  6% {
    box-shadow: 0 0 30px rgba(0,145,255,.80),
                0 0 74px 14px rgba(0,145,255,.50),
                inset 0 4px 26px rgba(255,255,255,.50);
    scale: 1.045;
  }
  30%, 100% {
    box-shadow: 0 0 14px var(--mcp-orb-halo),
                0 0 48px 6px rgba(0,145,255,.26),
                inset 0 4px 20px rgba(255,255,255,.25);
    scale: 1;
  }
}

/* the nod. Deliberately small — 6% is enough to read as a gesture
   without the circles bouncing. */
@keyframes mcp-agent-ack {
  0%, 46%   { scale: 1; }
  54%       { scale: 1.06; }
  70%, 100% { scale: 1; }
}

@keyframes mcp-agent-ring {
  0%, 46%   { opacity: 0;   scale: .94; }
  55%       { opacity: .55; scale: 1.04; }
  72%, 100% { opacity: 0;   scale: 1.16; }
}

@media (max-width: 900px) { .ll-mcp { padding: 64px 40px; --mcp-glow-blur: 150px; } }
@media (max-width: 620px) { .ll-mcp { padding: 56px 24px; min-height: 0; --vs: .78; --mcp-glow-blur: 110px; } }
@media (max-width: 420px) { .ll-mcp { --vs: .62; } }

@media (prefers-reduced-motion: reduce) {
  .ll-mcp__star  { animation: none; opacity: calc(var(--a) * .8); }
  .ll-mcp__star--glint { opacity: var(--a); scale: 1; }
  .ll-mcp.is-live .ll-mcp__beam,
  .ll-mcp.is-live .ll-mcp__beam-trail,
  .ll-mcp.is-live .ll-mcp__launch,
  .ll-mcp.is-live .ll-mcp__orb-ring,
  .ll-mcp.is-live .ll-mcp__orb,
  .ll-mcp.is-live .ll-mcp__agent,
  .ll-mcp.is-live .ll-mcp__agent::after { animation: none; }
  .ll-mcp__beam { opacity: 1; transform: translateX(-60px); }
  .ll-mcp__beam-trail { transform: scaleX(1); }
  .ll-mcp__agent::after { opacity: 0; }
  .ll-mcp__cta { transition: none; }
}