/* ============================================================
   FARBOD EXPERIMENT — "Spend lines transform across two layers"
   A single continuous left→right text stream. Each data line
   MORPHS as it crosses two vertical transformation lines:
     messy spend  ──(line 1: clean & classify)──>  governed data
                  ──(line 2: find opportunities)──>  ranked savings
   Same straight movement; the content/colour transforms at each
   membrane. Blue = intelligence, green = value captured.
   Scoped under .fe-* so nothing here touches shared site styles.
   ============================================================ */

:root {
  --fe-intel: #0F62FE;
  --fe-intel-soft: rgba(15,98,254,.10);
  --fe-value: #1E8E4F;
  --fe-value-soft: rgba(30,142,79,.10);
  --fe-flag: #C8472F;
  --fe-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Section shell ---------- */
.fe-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 120% at 50% -10%, #FFFFFF 0%, var(--page) 46%, var(--off-white) 100%);
  padding: clamp(40px, 6vw, 76px) 0 clamp(48px, 6vw, 84px);
}
.fe-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 180px; opacity: .05;
}
.fe-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--soft-border);
}
.fe-hero .container { position: relative; z-index: 2; }

/* ---------- Headline block ---------- */
.fe-head { max-width: 860px; margin: 0 auto; text-align: center; }
.fe-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
  padding: 7px 15px 7px 13px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--soft-border);
}
.fe-eyebrow .fe-eb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fe-value); box-shadow: 0 0 0 4px var(--fe-value-soft); }
.fe-head h1 { font-size: clamp(38px, 5.6vw, 74px); line-height: 1.04; letter-spacing: -.04em; font-weight: 600; margin-top: 24px; color: var(--ink); }
.fe-head h1 .fe-grad {
  background: linear-gradient(96deg, var(--fe-intel) 0%, var(--fe-value) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.fe-lede { margin: 22px auto 0; max-width: 660px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--slate); text-wrap: pretty; }
.fe-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
/* hero CTAs ride slimmer than the default btn-lg */
.fe-cta .btn-lg { padding-top: 12px; padding-bottom: 12px; }

/* ============================================================
   THE FLOW STAGE
   ============================================================ */
.fe-stage {
  position: relative; width: 100%;
  margin: clamp(38px, 4.8vw, 64px) auto 0;
  height: clamp(380px, 43vw, 540px);
  border: 1px solid var(--soft-border); border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(120% 150% at 0% 50%, rgba(200,71,47,.045), transparent 38%),
    radial-gradient(110% 150% at 53% 50%, var(--fe-intel-soft), transparent 40%),
    radial-gradient(120% 150% at 100% 50%, rgba(30,142,79,.06), transparent 42%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFBFE 100%);
}

/* the single streaming layer */
.fe-stream { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* a streaming row of text */
.fe-row {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: var(--fe-mono); font-size: 12.5px; line-height: 1;
  will-change: transform, opacity; transform: translate(-9999px, 0);
}
.fe-row.morph { animation: feMorph .46s ease; }
@keyframes feMorph {
  0%   { filter: none; }
  26%  { filter: blur(2.6px) brightness(1.7); }
  100% { filter: none; }
}

/* stage 0 — messy spend */
.fe-row.stage-m .r-supp { color: var(--slate); font-weight: 600; }
.fe-row.stage-m .r-amt  { color: var(--ink); margin-left: 12px; }
.fe-row.stage-m .r-desc { color: var(--slate-light); margin-left: 12px; }
.fe-row.stage-m .r-flag { color: var(--fe-flag); margin-left: 12px; font-weight: 600; }
.fe-row.stage-m .r-flag.mute { color: var(--slate-light); font-weight: 400; }

/* stage 1 — clean & classified (intelligence blue) */
.fe-row.stage-c .r-tick { color: var(--fe-intel); margin-right: 8px; vertical-align: -2px; }
.fe-row.stage-c .r-supp { color: var(--ink); font-weight: 600; }
.fe-row.stage-c .r-cat  { color: var(--fe-intel); margin-left: 11px; font-weight: 600; }
.fe-row.stage-c .r-conf { color: var(--slate); margin-left: 11px; }

/* stage 2 — savings opportunity (value green) */
.fe-row.stage-o { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; }
.fe-row.stage-o .r-check { color: var(--fe-value); margin-right: 9px; vertical-align: -2px; }
.fe-row.stage-o .r-val   { font-family: var(--font-head); font-weight: 700; color: var(--fe-value); letter-spacing: -.01em; }
.fe-row.stage-o .r-opp   { color: var(--ink); margin-left: 11px; }

/* ---------- Transformation lines (vertical membranes) ---------- */
.fe-line {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 3;
  transform: translateX(-50%); pointer-events: none;
}
.fe-line.one { --c: var(--fe-intel); --c-soft: var(--fe-intel-soft); }
.fe-line.two { --c: var(--fe-value); --c-soft: var(--fe-value-soft); }

.fe-line-core {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--c) 14%, var(--c) 86%, transparent 100%);
  opacity: .5;
}
.fe-line-halo {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 52px; transform: translateX(-50%);
  background: radial-gradient(46% 42% at 50% 50%, var(--c-soft), transparent 72%);
  filter: blur(7px); opacity: .65; transition: opacity .25s ease;
}
.fe-line.zap .fe-line-halo { opacity: 1; }
/* a glow that continuously travels DOWN the line — the "transformation" motion */
.fe-line-flow {
  position: absolute; left: -2px; right: -2px; top: 0; height: 34%;
  background: linear-gradient(180deg, transparent, var(--c), transparent);
  filter: blur(2px); opacity: .9;
  animation: feFlowDown 2.8s linear infinite;
}
.fe-line.two .fe-line-flow { animation-delay: 1.1s; }
@keyframes feFlowDown {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(330%); }
}
.fe-line-label {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: .02em;
  color: var(--ink); background: #fff; border: 1px solid var(--soft-border);
  border-radius: var(--radius-pill); padding: 5px 11px 5px 9px;
  box-shadow: var(--shadow-xs);
}
.fe-line-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }

/* ---------- Phase labels along the bottom ---------- */
.fe-phases {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 clamp(16px, 3.4vw, 30px); pointer-events: none;
}
.fe-phase {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--slate);
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid var(--soft-border-2); padding: 5px 11px; border-radius: var(--radius-pill);
}
.fe-phase i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.fe-phase.messy i { background: var(--fe-flag); animation: fePip 2.4s ease-in-out infinite; }
.fe-phase.clean i { background: var(--fe-intel); }
.fe-phase.value i { background: var(--fe-value); }
@keyframes fePip { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* edge fade masks so rows dissolve at the stage edges */
.fe-stage > .fe-edge { position: absolute; top: 0; bottom: 0; width: 86px; z-index: 5; pointer-events: none; }
.fe-stage > .fe-edge.l { left: 0; background: linear-gradient(90deg, #FCFCFE, transparent); }
.fe-stage > .fe-edge.r { right: 0; background: linear-gradient(270deg, #FBFBFE, transparent); }

/* ---------- Metric strip ---------- */
.fe-metrics {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 30px; margin-top: clamp(30px, 3.6vw, 48px); padding-top: 26px; border-top: 1px solid var(--soft-border);
}
.fe-metric { display: inline-flex; align-items: baseline; gap: 9px; }
.fe-metric b { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px,1.9vw,26px); letter-spacing: -.02em; color: var(--ink); }
.fe-metric span { font-size: 13px; color: var(--slate); }
.fe-metric + .fe-metric { padding-left: 30px; border-left: 1px solid var(--soft-border); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .fe-stage { height: clamp(330px, 72vw, 430px); border-radius: 18px; }
  .fe-row { font-size: 11px; }
  .fe-row.stage-o { font-size: 12px; }
  .fe-phase.clean { display: none; }
  .fe-phase { font-size: 10.5px; padding: 4px 9px; }
  .fe-line-label { font-size: 10px; padding: 4px 9px 4px 8px; }
}

/* ---------- Reduced motion / frozen-preview safety net ---------- */
@media (prefers-reduced-motion: reduce) {
  .fe-line-flow, .fe-phase.messy i, .fe-row.morph { animation: none !important; }
}
html.anim-off .fe-line-flow, html.anim-off .fe-phase.messy i, html.anim-off .fe-row.morph { animation: none !important; }