.fx { position: relative; z-index: 2; background: var(--yvo-black); }
.fx-track { position: relative; height: 480vh; }
.fx-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 5vw, 90px);
  padding: calc(var(--header-h) + 24px) var(--copy-x) 40px; }
.fx-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 70% at 76% 52%, rgba(154, 218, 33, .22) 0%, rgba(0, 77, 67, .34) 38%, transparent 72%),
              radial-gradient(40% 50% at 8% 90%, rgba(0, 77, 67, .35) 0%, transparent 70%); }

.fx-copy { position: relative; z-index: 2; display: grid; gap: 28px; align-content: center; }

.fx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 580px; }
@media (max-width: 1280px) { .fx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; } }
.fx-steps li { display: flex; align-items: center; justify-content: flex-start; min-width: 0; white-space: nowrap; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--ant-50); border: 1px solid var(--ant-16); transition: color .4s, background .4s, border-color .4s; }
.fx-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--ant-10); color: var(--yvo-goldenrod); transition: background .4s, color .4s; }
.fx-steps li.done { color: var(--yvo-key-lime); border-color: rgba(212, 231, 126, .3); }
.fx-steps li.done span { background: rgba(154, 218, 33, .25); }
.fx-steps li.on { color: var(--yvo-black); background: var(--yvo-yellow-green); border-color: var(--yvo-yellow-green); }
.fx-steps li.on span { background: var(--yvo-black); color: var(--yvo-yellow-green); }
.fx-text { min-height: 2.9em; }
.fx-title { font-size: clamp(52px, 6.6vw, 104px); line-height: .95; letter-spacing: -.035em; font-weight: 800; color: var(--yvo-white); }
.fx-phrase { margin-top: 18px; max-width: 34ch; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.3; font-weight: 300; color: var(--yvo-goldenrod); }
.fx-phrase .g { display: block; font-weight: 700; color: var(--yvo-yellow-green); }
.fx-cta { justify-self: start; }

.fx-visual { position: relative; z-index: 1; justify-self: center; width: min(100%, 60svh, 560px); aspect-ratio: 4 / 5; }
.fx-cards { position: absolute; inset: 0; }
.fx-card { position: absolute; inset: 0; margin: 0; border-radius: 28px; overflow: hidden; background: #0b0b0b;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(240, 254, 220, .08); transform-origin: 50% 100%; will-change: transform; }
.fx-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .45) 100%); }

.fx-el { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.fx-el > * { opacity: 0; }
.fx-el svg { width: 20px; height: 20px; flex: none; }

.fx-chip { position: absolute; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 11px 16px 11px 12px;
  border-radius: 16px; background: rgba(12, 14, 12, .82); border: 1px solid var(--ant-22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--yvo-goldenrod); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6); white-space: nowrap; }
.fx-chip svg { grid-row: 1 / 3; color: var(--yvo-yellow-green); width: 26px; height: 26px; }
.fx-chip b { font-size: 13px; font-weight: 700; color: var(--yvo-white); }
.fx-chip small { font-size: 12px; font-weight: 300; }
.c-wa { left: -18%; top: 12%; }
.c-ig { right: -16%; top: 30%; }
.c-ml { left: -12%; top: 52%; }
.fx-inbox { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 12px 18px 12px 12px; border-radius: 999px; background: var(--yvo-yellow-green); color: var(--yvo-black); font-size: 15px; font-weight: 700;
  box-shadow: 0 0 0 6px rgba(154, 218, 33, .18), 0 24px 50px -14px rgba(0, 0, 0, .7); }
.fx-inbox i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yvo-black); color: var(--yvo-yellow-green); }
.fx-inbox em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, .12); }

.fx-rail { position: absolute; left: -10%; right: -10%; bottom: 13%; display: flex; justify-content: space-between; padding: 12px 16px; border-radius: 18px;
  background: rgba(12, 14, 12, .82); border: 1px solid var(--ant-22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; }
.fx-rail span { position: relative; z-index: 1; font-size: 12.5px; font-weight: 600; color: var(--yvo-goldenrod); }
.fx-rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(0, 77, 67, .9), rgba(154, 218, 33, .55)); }
.fx-deal { position: absolute; left: -6%; bottom: 26%; display: grid; gap: 2px; padding: 14px 18px; border-radius: 18px; min-width: 190px;
  background: var(--yvo-goldenrod); color: var(--yvo-brunswick); box-shadow: 0 24px 50px -14px rgba(0, 0, 0, .75); }
.fx-deal b { font-size: 16px; }
.fx-deal small { font-size: 13px; font-weight: 600; }
.fx-deal em { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--yvo-brunswick);
  background: var(--yvo-key-lime); padding: 4px 9px 4px 5px; border-radius: 999px; width: fit-content; }
.fx-deal em svg { width: 14px; height: 14px; }

.fx-cal { position: absolute; right: -14%; top: 14%; display: flex; gap: 12px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 18px;
  background: var(--yvo-goldenrod); color: var(--yvo-brunswick); box-shadow: 0 24px 50px -14px rgba(0, 0, 0, .75); }
.fx-cal-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--yvo-brunswick); color: var(--yvo-key-lime); }
.fx-cal-ic svg { width: 24px; height: 24px; }
.fx-cal small { display: block; font-size: 12px; font-weight: 600; opacity: .75; }
.fx-cal b { font-size: 16px; }
.fx-remind { position: absolute; left: -12%; bottom: 14%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px 16px 16px 4px;
  background: rgba(12, 14, 12, .85); border: 1px solid var(--ant-22); color: var(--yvo-goldenrod); font-size: 13.5px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fx-remind > svg { color: var(--yvo-yellow-green); }
.fx-remind i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--yvo-yellow-green); color: var(--yvo-black); }
.fx-remind i svg { width: 14px; height: 14px; }

.fx-kpi { position: absolute; padding: 14px 16px; border-radius: 18px; background: rgba(12, 14, 12, .84); border: 1px solid var(--ant-22);
  color: var(--yvo-goldenrod); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 50px -14px rgba(0, 0, 0, .7); }
.fx-kpi small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yvo-key-lime); margin-bottom: 8px; }
.fx-kpi b { font-size: 18px; color: var(--yvo-white); }
.fx-kpi em { display: block; font-style: normal; font-size: 12px; font-weight: 300; margin-top: 2px; }
.k-funil { left: -16%; top: 12%; width: 200px; }
.fx-bars { display: grid; gap: 6px; }
.fx-bars i { display: block; height: 9px; border-radius: 99px; width: calc(var(--w) * 100%); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--yvo-brunswick), var(--yvo-yellow-green)); }
.k-orig { right: -14%; top: 40%; }
.k-team { left: -8%; bottom: 10%; }
.fx-faces { display: flex; }
.fx-faces i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #0c0e0c; margin-left: -8px; background: var(--yvo-brunswick); }
.fx-faces i:first-child { margin-left: 0; background: var(--yvo-yellow-green); }
.fx-faces i:nth-child(2) { background: var(--yvo-key-lime); }
.fx-faces i:nth-child(3) { background: var(--yvo-cerulean); }

.fx-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ant-10); z-index: 4; }
.fx-progress span { display: block; height: 100%; width: 0; background: var(--yvo-yellow-green); }

@media (max-width: 900px) {
  .fx-track { height: 440vh; }
  .fx-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 20px; padding: calc(var(--header-h) + 16px) 20px 26px; }
  .fx-copy { gap: 14px; }
  .fx-steps li { padding: 5px 10px 5px 5px; font-size: 11.5px; }
  .fx-steps li span { width: 20px; height: 20px; font-size: 10px; }
  .fx-text { min-height: 0; }
  .fx-title { font-size: 44px; }
  .fx-phrase { margin-top: 8px; font-size: 17px; max-width: none; }
  .fx-cta { padding: 12px 20px; font-size: 14px; }
  .fx-visual { width: auto; height: 100%; max-height: 50svh; align-self: center; }
  .fx-chip, .fx-remind, .fx-kpi, .fx-cal, .fx-deal { scale: .78; }

  .fx-chip, .fx-remind, .fx-kpi, .fx-cal, .fx-deal { transform-origin: 0 50%; }
  .c-ig, .k-orig, .fx-cal { transform-origin: 100% 50%; }
  .c-wa, .k-funil, .c-ml, .fx-remind, .k-team, .fx-deal { left: -3%; } .c-ig, .k-orig, .fx-cal { right: -3%; }
  .fx-rail { left: -3%; right: -3%; }
}

html.rm .fx-track { height: auto; }
html.rm .fx-stage { position: relative; height: auto; }
html.rm .fx-el { display: none; }
html.rm .fx-card:not(:first-child) { display: none; }