/* ============================================================
   Homepage features: scroll-driven tour of the platform.
   Dark band; chapters on the left, a sticky app window on the right
   whose scene follows the chapter in view. Below 1000px each scene
   is cloned under its own chapter instead.
   ============================================================ */

.site-v2 .fx-section {
  --fx-bg: #061331;
  --fx-ink: #ffffff;
  --fx-ink-2: rgba(255,255,255,.72);
  --fx-muted: rgba(255,255,255,.5);
  --fx-line: rgba(255,255,255,.12);
  --fx-accent: #93b4ff;
  position: relative;
  isolation: isolate;
  padding: 140px var(--gutter) 120px;
  background: var(--fx-bg);
  color: var(--fx-ink-2);
  overflow: clip;
}
.site-v2 .fx-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 40% at 78% 18%, rgba(29,78,216,.35), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(29,78,216,.18), transparent 70%),
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 72px 72px;
}

/* Header on the dark band */
.site-v2 .fx-section .section-header { margin-bottom: 40px; }
.site-v2 .fx-section .section-tag { color: var(--fx-accent); background: none; }
.site-v2 .fx-section .section-tag::before { color: #fff; }
.site-v2 .fx-section .section-header h2 { color: #fff; background: none; }
.site-v2 .fx-section .section-header h2 em { color: var(--fx-accent); }
.site-v2 .fx-section .section-header p { color: var(--fx-ink-2); }

/* Layout */
.fx {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 72px;
  align-items: start;
}

/* Chapters */
.fx-ch {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
  opacity: .28;
  transition: opacity .5s;
}
.fx-ch:first-child { min-height: 60vh; }
.fx-ch.is-on { opacity: 1; }
.fx-ch-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fx-accent);
  margin-bottom: 20px;
}
.fx-ch-tag span {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(147,180,255,.35);
  color: #fff;
  letter-spacing: 0;
}
.site-v2 .fx-ch h3 {
  color: #fff;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 18px;
}
.fx-ch > p { font-size: 16.5px; line-height: 1.7; margin: 0 0 24px; max-width: 46ch; }
.fx-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fx-points li { position: relative; padding-left: 26px; font-size: 14.5px; color: #fff; }
.fx-points li::before {
  content: '';
  position: absolute; left: 0; top: .32em;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(147,180,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393b4ff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.fx-inline { display: none; }

/* Sticky stage */
.fx-stage {
  position: sticky;
  top: max(88px, calc(50vh - 300px));
  display: grid;
  gap: 16px;
}
.fx-centres { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-centres span {
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--fx-muted);
  border: 1px solid var(--fx-line);
  transition: color .3s, background .3s, border-color .3s;
}
.fx-centres span.is-on { color: #061331; background: var(--fx-accent); border-color: var(--fx-accent); }

.fx-screen {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 120px -30px rgba(0,0,0,.65), 0 0 120px -40px rgba(29,78,216,.6);
  color: var(--h-ink-2);
}
.fx-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--h-line);
  background: #fafbfd;
  font-size: 12px; color: var(--h-muted);
}
.fx-url { font-family: var(--mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-url b { font-weight: 500; color: var(--h-ink); }
.fx-count { margin-left: auto; font-family: var(--mono); white-space: nowrap; }
.fx-count b { color: var(--h-ink); font-weight: 600; }

.fx-scenes { position: relative; height: 470px; }
.fx-scene {
  position: absolute;
  inset: 0;
  padding: 26px 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.985);
  transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s .45s;
}
.fx-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .08s, transform .6s .08s cubic-bezier(.2,.7,.2,1), visibility 0s; }

.fx-progress { height: 2px; background: var(--fx-line); border-radius: 2px; overflow: hidden; }
.fx-progress i { display: block; height: 100%; width: 11%; background: var(--fx-accent); transition: width .5s cubic-bezier(.2,.7,.2,1); }

/* ---- Scene building blocks (light app UI) ---- */
.fx-scene h4 { font: 600 16px/1.2 var(--display); color: var(--h-ink); letter-spacing: -.015em; margin: 0; }
.fx-scene small { display: block; font-size: 12px; color: var(--h-muted); margin-top: 3px; }
.fx-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.fx-big { font-size: 13px; color: var(--h-muted); white-space: nowrap; }
.fx-big b { font: 600 22px/1 var(--display); color: var(--h-ink); margin-right: 2px; }

.fx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  justify-self: start;
}
.fx-chip.g { color: var(--h-green); background: #e6f6ef; }
.fx-chip.a { color: #a16207; background: #fdf3dc; }
.fx-chip.b { color: var(--h-blue); background: var(--h-blue-soft); }
.fx-chip.r { color: var(--h-red); background: #fdecec; }
.fx-chip.n { color: var(--h-muted); background: #eef1f5; }
.fx-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: fxPulse 1.8s infinite; }

.fx-btns { display: flex; gap: 8px; margin-top: 16px; }
.fx-btn {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 600;
  padding: 9px 14px; border-radius: 9px;
  border: 1px solid var(--h-line-strong); color: var(--h-ink); background: #fff;
}
.fx-btn-pri { background: var(--h-navy); border-color: var(--h-navy); color: #fff; }
.fx-btn-sm { padding: 7px 11px; font-size: 12px; }
.fx-note { margin-top: 14px; font-size: 13px; padding: 11px 14px; border-radius: 10px; background: var(--h-blue-soft); color: var(--h-navy); }
.fx-note-g { background: #e6f6ef; color: var(--h-green); }
.fx-label { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--h-muted); margin: 18px 0 10px; }

/* Floating card */
.fx-pop {
  position: absolute;
  width: 270px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--h-line);
  border-radius: 14px;
  box-shadow: 0 24px 50px -18px rgba(11,37,89,.4);
  font-size: 12.5px;
}
.fx-pop-br { right: 22px; bottom: 20px; }
.fx-pop-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; color: var(--h-ink); margin-bottom: 10px; font-size: 12px; }
.fx-pop-line { margin: 0 0 12px; line-height: 1.5; color: var(--h-muted); }
.fx-pop-line b { color: var(--h-ink); }
.fx-msg { margin: 0 0 6px; padding: 8px 10px; border-radius: 10px 10px 10px 3px; background: #f1f4f9; color: var(--h-ink); line-height: 1.45; max-width: 88%; }
.fx-msg-me { margin-left: auto; border-radius: 10px 10px 3px 10px; background: var(--h-blue-soft); color: var(--h-navy); }

/* 01 readiness */
.fx-rows { display: grid; gap: 8px; }
.fx-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 110px 92px;
  align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--h-line); border-radius: 11px;
  font-size: 13px; color: var(--h-ink);
}
.fx-jur { font: 600 11px/1 var(--mono); color: var(--h-navy); background: var(--h-blue-soft); border-radius: 6px; padding: 6px 0; text-align: center; }
.fx-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-bar { height: 6px; border-radius: 6px; background: #eef1f5; overflow: hidden; }
.fx-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--h-blue); transform-origin: left; }

/* 02 safe harbours */
.fx-sh { display: grid; gap: 4px; }
.fx-sh-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .9fr)) 96px;
  align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 13px; color: var(--h-ink);
}
.fx-sh-row:not(.fx-sh-head) { border: 1px solid var(--h-line); }
.fx-sh-head { font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--h-muted); padding-block: 4px; }
.fx-sh-row b { font-family: var(--mono); font-size: 11px; color: var(--h-navy); margin-right: 6px; }
.fx-sh-row i { width: 20px; height: 20px; border-radius: 50%; display: inline-block; background: center / 11px no-repeat; }
.fx-sh-row i.yes { background-color: #e6f6ef; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.fx-sh-row i.no { background-color: #f4f5f8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3adbd' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.fx-sh-row i.na { background: none; position: relative; }
.fx-sh-row i.na::after { content: ''; position: absolute; left: 5px; right: 5px; top: 9.5px; height: 1px; background: var(--h-line-strong); }
.fx-sh-fail { background: #fff8f8; border-color: #f5d5d5 !important; }

/* 03 GloBE engine */
.fx-etr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px 18px; border-radius: 14px; background: #f6f8fc; margin-bottom: 14px; }
.fx-etr-val { font: 600 40px/1 var(--display); color: var(--h-red); letter-spacing: -.03em; }
.fx-etr-val small { font: 500 12px var(--sans, inherit); letter-spacing: 0; color: var(--h-muted); }
.fx-gauge { position: relative; height: 10px; border-radius: 10px; background: #e3e8f0; margin-top: 10px; }
.fx-gauge-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #f87171, var(--h-red)); transform-origin: left; }
.fx-gauge-min { position: absolute; top: -8px; bottom: -8px; width: 2px; background: var(--h-ink); }
.fx-gauge-min em { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font: 600 10.5px/1 var(--mono); font-style: normal; color: var(--h-ink); white-space: nowrap; }
.fx-calc { margin: 0; display: grid; }
.fx-calc div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px dashed var(--h-line); font-size: 13px; }
.fx-calc dt { color: var(--h-ink-2); }
.fx-calc dd { margin: 0; font-family: var(--mono); color: var(--h-ink); font-variant-numeric: tabular-nums; }
.fx-calc .fx-calc-total { border-bottom: 0; padding-top: 12px; }
.fx-calc .fx-calc-total dt { font-weight: 600; color: var(--h-ink); }
.fx-calc .fx-calc-total dd { font-weight: 600; font-size: 15px; color: var(--h-blue); }
.fx-alloc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fx-alloc span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--h-line); color: var(--h-muted); }
.fx-alloc b { color: var(--h-ink); font-family: var(--mono); font-weight: 500; }
.fx-alloc i { width: 8px; height: 8px; border-radius: 50%; background: #d3d9e3; }
.fx-alloc i.q { background: var(--h-blue); }

/* 04 provenance */
.fx-trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.fx-trace::before { content: ''; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--h-blue), #c7d5f6); transform-origin: top; }
.fx-trace li {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 2px 0;
}
.fx-trace li > div { padding: 9px 14px; border: 1px solid var(--h-line); border-radius: 12px; background: #fff; }
.fx-trace li:first-child > div { border-color: #bcd0fb; box-shadow: 0 0 0 4px rgba(29,78,216,.08); }
.fx-trace b { font-size: 13.5px; color: var(--h-ink); font-weight: 600; }
.fx-trace b em { font-style: normal; font-family: var(--mono); color: var(--h-blue); margin-left: 6px; }
.fx-node { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 600 11px/1 var(--mono); color: #fff; background: var(--h-navy); }
.fx-trace-src .fx-node { background: var(--h-green); }
.fx-art { font-family: var(--mono); color: var(--h-navy); background: var(--h-blue-soft); padding: 1px 6px; border-radius: 5px; }
.fx-trace code, .fx-chain code { font: 500 11px/1 var(--mono); color: var(--h-muted); }

/* 05 GIR */
.fx-gir { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
.fx-code {
  margin: 0; padding: 16px 18px;
  border-radius: 12px;
  background: #0b1733;
  color: #e6edff;
  font: 11.5px/1.75 var(--mono);
  white-space: pre;
  overflow: hidden;
}
.fx-code .t { color: #8fb1ff; }
.fx-code .v { color: #6ee7b7; }
.fx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.fx-checks li {
  font-size: 12.5px; color: var(--h-ink); padding: 11px 12px 11px 36px; border-radius: 10px; border: 1px solid var(--h-line); position: relative;
}
.fx-checks li::before { content: ''; position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; border-radius: 50%; background: #e6f6ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* 06 Command Centre */
.fx-filings { display: grid; gap: 8px; }
.fx-filing { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--h-line); border-radius: 12px; }
.fx-filing b { font-size: 13.5px; color: var(--h-ink); font-weight: 600; }
.fx-date { display: grid; place-items: center; height: 48px; border-radius: 10px; background: var(--h-blue-soft); color: var(--h-navy); font: 500 10px/1.1 var(--mono); text-transform: uppercase; }
.fx-date b { font: 600 18px/1 var(--display) !important; color: var(--h-navy) !important; }

/* 07 audit */
.fx-share { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--h-line-strong); border-radius: 12px; }
.fx-link { flex: 1; min-width: 0; font: 12.5px/1 var(--mono); color: var(--h-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-link b { color: var(--h-ink); font-weight: 500; }
.fx-share-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 12.5px; color: var(--h-muted); }
.fx-share-meta b { color: var(--h-ink); font-weight: 600; }
.fx-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fx-chain li { position: relative; display: grid; gap: 6px; padding: 12px; border-radius: 11px; border: 1px solid var(--h-line); background: #f8fafd; }
.fx-chain li span { font-size: 12px; color: var(--h-ink); font-weight: 500; }
.fx-chain li + li::before { content: '→'; position: absolute; left: -10px; top: 50%; translate: -50% -50%; color: var(--h-line-strong); font-size: 12px; }

/* 08 intelligence */
.fx-feed { display: grid; gap: 8px; }
.fx-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--h-line); border-radius: 12px; }
.fx-item b { font-size: 13.5px; color: var(--h-ink); font-weight: 600; }
.fx-src { display: grid; place-items: center; height: 30px; border-radius: 8px; font: 600 10.5px/1 var(--mono); color: #fff; background: var(--h-navy); }

/* 09 adviser access */
.fx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; padding: 10px; border: 1px solid var(--h-line); border-radius: 11px; background: #f8fafd; }
.fx-step i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--display); font-style: normal; color: var(--h-muted); background: #fff; border: 1px solid var(--h-line); }
.fx-step b { font-size: 12.5px; color: var(--h-ink); font-weight: 600; }
.fx-step small { margin-top: 2px !important; font-size: 11px !important; line-height: 1.35; }
.fx-step.is-done { background: #e6f6ef; border-color: #bfe5d3; }
.fx-step.is-done i { color: #fff; background: var(--h-green); border-color: var(--h-green); }
.fx-clients { display: grid; gap: 8px; }
.fx-client { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--h-line); border-radius: 12px; }
.fx-client b { font-size: 13.5px; color: var(--h-ink); font-weight: 600; }
.fx-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--h-blue-soft); color: var(--h-navy); font: 600 12px/1 var(--display); }
.fx-open { font-size: 12px; font-weight: 600; color: var(--h-blue); }

/* Footer CTA */
.fx-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--fx-line);
}
.fx-foot p { margin: 0; font: 600 clamp(20px, 2vw, 26px)/1.25 var(--display); letter-spacing: -.02em; color: #fff; max-width: 34ch; }
.fx-foot-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.site-v2 .fx-cta-pri { background: #fff; color: var(--h-navy); border-color: #fff; }
.site-v2 .fx-cta-pri:hover { background: #e9efff; border-color: #e9efff; }
.site-v2 .fx-cta-demo { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); cursor: pointer; }
.site-v2 .fx-cta-demo:hover { background: rgba(255,255,255,.06); border-color: #fff; }

/* ---- Motion: plays each time a scene becomes active ---- */
.fx-scene.is-on .fx-a,
.fx-scene.is-on .fx-pop { animation: fxIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * 110ms + 120ms); }
.fx-scene.is-on .fx-pop { animation-name: fxPop; animation-duration: .6s; }
.fx-scene.is-on .fx-bar i { animation: fxGrow .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * 110ms + 300ms); }
.fx-scene.is-on .fx-row:nth-child(1) .fx-bar i { --d: 1; }
.fx-scene.is-on .fx-row:nth-child(2) .fx-bar i { --d: 2; }
.fx-scene.is-on .fx-row:nth-child(3) .fx-bar i { --d: 3; }
.fx-scene.is-on .fx-row:nth-child(4) .fx-bar i { --d: 4; }
.fx-scene.is-on .fx-row:nth-child(5) .fx-bar i { --d: 5; }
.fx-scene.is-on .fx-row:nth-child(6) .fx-bar i { --d: 6; }
.fx-scene.is-on .fx-gauge-fill { animation: fxGrow 1.1s .35s cubic-bezier(.2,.7,.2,1) both; }
.fx-scene.is-on .fx-trace::before { animation: fxDraw 1.1s .2s ease-out both; }
.fx-scene.is-on .fx-sh-row i.yes { animation: fxTick .35s both; animation-delay: calc(var(--d, 0) * 110ms + 380ms); }
.fx-scene.is-on .fx-sh-row:nth-child(2) i.yes { --d: 1; }
.fx-scene.is-on .fx-sh-row:nth-child(3) i.yes { --d: 2; }
.fx-scene.is-on .fx-sh-row:nth-child(5) i.yes { --d: 4; }
.fx-scene.is-on .fx-sh-row:nth-child(6) i.yes { --d: 5; }
.fx-scene.is-on .fx-sh-row:nth-child(7) i.yes { --d: 6; }
.fx-scene.is-on .fx-late { animation: fxTick .4s 1.9s both; }

@keyframes fxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fxPop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fxGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fxDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fxTick { from { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes fxPulse { 50% { opacity: .35; } }

/* ---- Tablet and phone: scenes sit under their chapter ---- */
@media (max-width: 1000px) {
  .fx { grid-template-columns: 1fr; gap: 0; }
  .fx-stage { display: none; }
  .fx-ch, .fx-ch:first-child { min-height: 0; opacity: 1; padding: 40px 0; }
  .fx-ch + .fx-ch { border-top: 1px solid var(--fx-line); }
  .fx-inline { display: block; margin-top: 28px; }
  .fx-inline .fx-screen { border-radius: 16px; }
  .fx-inline .fx-scene { position: relative; inset: auto; }
  .fx-inline .fx-pop { position: relative; right: auto; bottom: auto; width: auto; margin-top: 14px; }
}
@media (max-width: 640px) {
  .site-v2 .fx-section { padding: 80px 16px; }
  .fx-scene { padding: 18px 16px; }
  .fx-row { grid-template-columns: 30px minmax(0, 1fr) 84px; }
  .fx-row .fx-bar { display: none; }
  .fx-sh-row { grid-template-columns: minmax(0, 1.3fr) repeat(3, 22px) 82px; gap: 6px; padding-inline: 10px; }
  .fx-sh-head span:nth-child(n+2):nth-child(-n+4) { font-size: 0; }
  .fx-sh-head span:nth-child(2)::after { content: 'DM'; font-size: 10px; }
  .fx-sh-head span:nth-child(3)::after { content: 'ETR'; font-size: 10px; }
  .fx-sh-head span:nth-child(4)::after { content: 'RP'; font-size: 10px; }
  .fx-etr { grid-template-columns: 1fr; gap: 18px; }
  .fx-gir { grid-template-columns: 1fr; }
  .fx-code { font-size: 10.5px; }
  .fx-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-chain li + li::before { display: none; }
  .fx-filing, .fx-item { grid-template-columns: 46px minmax(0, 1fr); }
  .fx-filing > .fx-chip, .fx-item > .fx-chip { grid-column: 2; }
  .fx-steps { grid-template-columns: 1fr; }
  .fx-client { grid-template-columns: 38px minmax(0, 1fr); }
  .fx-client > .fx-chip { grid-column: 2; }
  .fx-client > .fx-open { display: none; }
  .fx-hd { flex-wrap: wrap; }
  .fx-foot { flex-direction: column; align-items: stretch; }
  .fx-foot-cta > * { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-scene, .fx-ch, .fx-progress i { transition: none; }
  .fx-scene.is-on *, .fx-scene.is-on .fx-trace::before { animation: none !important; }
  .fx-dot { animation: none; }
}

/* ============================================================
   Carousel mode (set by JS): one feature at a time, swipe or tab
   between them, so the section stays about one screen tall.
   ============================================================ */
.fx-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 40px; }
.fx-tabs {
  flex: 1; min-width: 0;
  display: flex; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  padding-inline: 8px;
}
.fx-tabs::-webkit-scrollbar { display: none; }
.fx-tab {
  flex: 1 0 auto;
  position: relative;
  padding: 12px 14px 16px;
  border: 0; background: none; cursor: pointer;
  font: 500 13.5px/1 var(--sans, inherit);
  color: var(--fx-muted);
  white-space: nowrap; text-align: left;
  transition: color .2s;
}
.fx-tab span { font: 500 11px/1 var(--mono); color: rgba(147,180,255,.6); margin-right: 8px; }
.fx-tab:hover { color: #fff; }
.fx-tab::after, .fx-tab i {
  content: ''; position: absolute; left: 14px; bottom: 4px; height: 2px; border-radius: 2px;
}
.fx-tab::after { right: 14px; background: var(--fx-line); }
.fx-tab i { z-index: 1; width: 0; background: var(--fx-accent); }
.fx-tab.is-on { color: #fff; }
.fx-tab.is-on span { color: var(--fx-accent); }
.fx-tab.is-on i { width: calc(100% - 28px); }

.fx-nav.is-playing .fx-tab.is-on i { width: 0; animation: fxTab var(--fx-dur, 8s) linear forwards; }
.fx-tab:focus-visible, .fx-arrow:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 2px; border-radius: 8px; }
@keyframes fxTab { to { width: calc(100% - 28px); } }

.fx-arrow {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--fx-line); background: rgba(255,255,255,.04); color: #fff;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.fx-arrow:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }

.fx.is-carousel { align-items: start; touch-action: pan-y; user-select: none; }
.fx.is-carousel .fx-chapters { display: grid; padding-top: 72px; }
.fx.is-carousel .fx-ch { justify-content: flex-start; }
.fx.is-carousel .fx-ch,
.fx.is-carousel .fx-ch:first-child {
  grid-area: 1 / 1;
  min-height: 0; padding: 0;
  opacity: 0; visibility: hidden;
  transform: translateX(var(--fx-shift, 28px));
  transition: opacity .4s, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s .4s;
}
.fx.is-carousel[data-dir="back"] .fx-ch { --fx-shift: -28px; }
.fx.is-carousel .fx-ch.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s .05s, transform .55s .05s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.fx.is-carousel .fx-ch + .fx-ch { border-top: 0; }
.fx.is-carousel .fx-stage { position: relative; top: auto; }
.fx.is-carousel .fx-stage .fx-progress { display: none; }
.site-v2 .fx-section .fx-foot { margin-top: 56px; }

@media (max-width: 1000px) {
  .fx.is-carousel .fx-chapters { padding-top: 0; }
  .fx-nav { margin-bottom: 28px; }
  .fx-tab { padding-inline: 12px; font-size: 13px; }
}
@media (max-width: 640px) {
  .fx-arrow { width: 36px; height: 36px; }
  .fx-nav { gap: 4px; margin-inline: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx.is-carousel .fx-ch { transition: none; transform: none; }
}