/* ABM Section 04/05 — FEEDBACK · ORB SET. Builds on aa-dark + feedback-dark
   tokens (.bd, .bd-kick, .bd-h, .bd-lede, .bd-chip, .bd-replay reused).
   Orb = the living self-improving database. Prefix: .fo-* */

.fo { box-sizing: border-box; width: 100%; height: 100%; position: relative;
  background: #04080d; color: var(--ad-ink); font-family: var(--abm-sans);
  -webkit-font-smoothing: antialiased; overflow: hidden; }
.fo *, .fo *::before, .fo *::after { box-sizing: border-box; }
.fo .bd-h .cy { color: var(--c-cyan); }

/* glow seated under every orb */
.fo-orbwrap { position: relative; }
.fo-aperwrap { position: relative; }

/* ---- data-point markers: little glowing circles (shared by FO5/FO6) ---- */
.fo-circ { border-radius: 50%; background: rgba(216,248,248,0.92); flex: 0 0 auto; display: inline-block;
  box-shadow: 0 0 6px rgba(55,214,214,0.75), 0 0 2px rgba(216,248,248,0.9); }
.fo-starlabel { font-family: var(--ad-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(244,241,234,0.5); white-space: nowrap; }

/* FO5 constellation: anchored to the circle, twinkling. Glyph sits at the
   marker point (radius > rim); label extends outward so nothing reaches the ring. */
.fo5 .fo-aperwrap { overflow: visible; }
.fo5 .fo-star { position: absolute; z-index: 6; display: flex; align-items: center; gap: 8px;
  animation: fo-tw 5.5s ease-in-out infinite; }
.fo5 .fo-star.r { transform: translate(0, -50%); }
.fo5 .fo-star.l { transform: translate(-100%, -50%); flex-direction: row-reverse; }
@keyframes fo-tw { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.fo5 .fo-circ { animation: fo-twscale 5.5s ease-in-out infinite; }
@keyframes fo-twscale { 0%, 100% { transform: scale(0.82); } 50% { transform: scale(1.08); } }
.fo-dust { position: absolute; z-index: 5; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: rgba(216,248,248,0.7); transform: translate(-50%,-50%);
  box-shadow: 0 0 5px rgba(55,214,214,0.6); animation: fo-tw 4.2s ease-in-out infinite; }

/* FO6 annotated ring: callouts + leaders pulling signal inward */
.fo-callsvg { position: absolute; inset: 0; z-index: 3; overflow: visible; pointer-events: none; }
.fo-leader { stroke: rgba(255,255,255,0.16); stroke-width: 1; }
.fo-leadflow { stroke: var(--c-cyan); stroke-width: 1.4; stroke-dasharray: 2 7; opacity: 0.8;
  animation: fo-flow 1.1s linear infinite; }
.fo-calldot { fill: var(--c-cyan); filter: drop-shadow(0 0 5px rgba(55,214,214,0.8)); }
.fo6 .fo-call { position: absolute; z-index: 6; display: flex; align-items: center; gap: 7px;
  transform: translateY(-50%); }
.fo6 .fo-call.r { transform: translate(8px, -50%); }
.fo6 .fo-call.l { transform: translate(-100%, -50%); margin-left: -8px; flex-direction: row-reverse; }

/* shared text backing behind the centred headline */
.fo-textbg { position: absolute; width: 520px; height: 320px; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center, rgba(4,8,13,0.96) 34%, rgba(4,8,13,0.5) 60%, transparent 76%); z-index: -1; }
.fo-orbwrap::before { content: ""; position: absolute; left: 50%; top: 50%;
  width: 86%; height: 86%; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(55,214,214,0.10), rgba(224,55,158,0.05) 45%, transparent 70%);
  filter: blur(20px); pointer-events: none; }
.fo-orb { position: relative; z-index: 1; }

/* core label pinned at orb centre */
.fo-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 4; text-align: center; pointer-events: none; }
.fo-core .ring { width: 132px; height: 132px; border-radius: 50%; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: radial-gradient(circle, rgba(4,8,13,0.92) 38%, rgba(4,8,13,0.55) 66%, transparent 78%); }
.fo-core .lbl { font-family: var(--ad-mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-cyan); }
.fo-core .t { font-family: var(--ad-display); font-size: 19px; letter-spacing: -0.01em; line-height: 1; }
.fo-core .s { font-family: var(--ad-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ad-faint); }

/* feedback input chip + connector */
.fo-in { position: absolute; z-index: 5; transform: translate(-50%,-50%); display: flex;
  align-items: center; gap: 9px; padding: 9px 13px; background: rgba(7,15,22,0.92);
  border: 1px solid var(--ad-line2); white-space: nowrap; box-shadow: 0 12px 30px -14px rgba(0,0,0,0.8); }
.fo-in .ic { color: var(--c-cyan); display: inline-flex; }
.fo-in .nm { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.fo-in .nn { font-family: var(--ad-mono); font-size: 9px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ad-faint); margin-top: 1px; }
.fo-wires { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.fo-wire { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 1; }
.fo-flow { fill: none; stroke: var(--c-cyan); stroke-width: 1.5; stroke-dasharray: 3 8;
  opacity: 0.85; animation: fo-flow 1s linear infinite; }
@keyframes fo-flow { to { stroke-dashoffset: -22; } }

/* eyebrow row reused look */
.fo-kick { display: flex; align-items: center; gap: 12px; }
.fo-kick .bar { width: 26px; height: 1px; background: var(--c-grn); }
.fo-kick .num { font-family: var(--ad-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--ad-faint); }
.fo-kick .tag { font-family: var(--ad-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-grn); }

.fo-stat { display: inline-flex; flex-direction: column; gap: 3px; }
.fo-stat .big { font-family: var(--ad-display); font-size: 56px; line-height: 0.9;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fo-stat .big .pct { font-size: 26px; color: var(--c-cyan); }
.fo-stat .lbl { font-family: var(--ad-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ad-faint); }
.fo-stat .up { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ad-mono);
  font-size: 11.5px; color: var(--c-grn); margin-top: 4px; }

.fo2-foot .fo-stat .lbl { white-space: nowrap; margin-top: 7px; }
.fo2-foot .fo-stat .big { line-height: 1; }
.fo-replay { position: absolute; right: 14px; bottom: 12px; z-index: 40; display: inline-flex;
  align-items: center; gap: 8px; cursor: pointer; font-family: var(--ad-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ad-dim);
  background: rgba(255,255,255,0.05); border: 1px solid var(--ad-line2); padding: 7px 11px; }
.fo-replay:hover { background: rgba(255,255,255,0.1); color: var(--ad-ink); }
.fo-replay svg { width: 13px; height: 13px; }

/* ---------- G1 : the database, alive ---------- */
.fo1 { display: grid; grid-template-columns: 468px 1fr; align-items: center; padding: 0 0 0 56px; }
.fo1-text { position: relative; z-index: 6; }
.fo1-h { font-family: var(--ad-display); font-weight: 400; font-size: 50px; line-height: 0.98;
  letter-spacing: -0.02em; margin: 16px 0 0; max-width: 13ch; }
.fo1-h .cy { color: var(--c-cyan); }
.fo1-lede { font-size: 16px; line-height: 1.5; color: var(--ad-dim); margin: 18px 0 28px; max-width: 42ch; text-wrap: pretty; }
.fo1-stage { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }

/* ---------- G2 : feedback orb hero ---------- */
.fo2 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px; text-align: center; }
.fo2-top { position: absolute; left: 56px; top: 46px; z-index: 6; }
.fo2-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.fo2-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: none; width: 560px; }
.fo2-h { font-family: var(--ad-display); font-weight: 400; font-size: 46px; line-height: 1.0;
  letter-spacing: -0.02em; margin: 0; text-shadow: 0 2px 30px rgba(4,8,13,0.9), 0 0 14px rgba(4,8,13,0.8); }
.fo2-h .cy { color: var(--c-cyan); }
.fo2-cap { font-size: 15px; line-height: 1.5; color: var(--ad-dim); margin: 16px auto 0; max-width: 40ch;
  text-wrap: pretty; }
.fo2-foot { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 6; display: flex;
  align-items: center; justify-content: center; gap: 14px; }

/* ---------- G3 : inputs → core → lift ---------- */
.fo3 { display: grid; grid-template-columns: 280px 1fr 280px; align-items: center; gap: 12px; padding: 50px 56px; }
.fo3-col .hd { font-family: var(--ad-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ad-faint); margin-bottom: 18px; display: flex; align-items: center; gap: 9px; }
.fo3-col .hd .bar { width: 18px; height: 1px; background: var(--c-grn); }
.fo3-feed { display: flex; flex-direction: column; gap: 12px; }
.fo3-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: rgba(8,16,23,0.7);
  border: 1px solid var(--ad-line); }
.fo3-item .ic { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--ad-line2); color: var(--c-cyan); }
.fo3-item .ic svg { width: 17px; height: 17px; }
.fo3-item .nm { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.fo3-item > div { min-width: 0; flex: 1 1 auto; }
.fo3-item .nn { font-family: var(--ad-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ad-faint); margin-top: 2px; white-space: nowrap; }
.fo3-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.fo3-right { display: flex; flex-direction: column; align-items: flex-start; }
.fo3-h { font-family: var(--ad-display); font-weight: 400; font-size: 26px; line-height: 1.0;
  letter-spacing: -0.02em; margin: 0 0 22px; }
.fo3-out { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; width: 100%; }
.fo3-outchip { display: flex; align-items: center; gap: 9px; font-family: var(--ad-mono); font-size: 11.5px;
  letter-spacing: 0.03em; color: var(--ad-ink); padding: 9px 12px; border: 1px solid var(--ad-line2);
  background: rgba(255,255,255,0.03); }
.fo3-outchip .pt { width: 7px; height: 7px; flex: 0 0 auto; }