/* Fund X trading scenes. All illustrations are native vector/CSS, not video. */
.apex-page .fx-edge { padding: 6rem 1.5rem 5rem; overflow: hidden; scroll-margin-top: var(--header-offset,120px); }
.fx-edge__wrap { width: min(1200px,100%); margin: 0 auto; }
.fx-edge__heading { text-align: center; margin: 0 auto 2.8rem; }
.fx-edge__eyebrow { display: inline-flex; align-items: center; gap: .65rem; color: #c1a6e5; font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.fx-edge__eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: #d7b4ff; box-shadow: 0 0 12px #aa67ef80; }
.fx-edge__heading h2 { margin: 1.1rem 0 .9rem; font-size: clamp(2rem,3.7vw,3.1rem); line-height: 1.16; letter-spacing: -.045em; font-weight: 500; color: #f5f0fc; }
.fx-edge__heading h2 > span { background: linear-gradient(105deg,#e9d6ff,#aa8af8 60%,#efbef1); background-clip: text; -webkit-text-fill-color: transparent; }
.fx-edge__heading > p { margin: 0 auto; color: #a99bbd; font-size: .98rem; }
.fx-edge__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 .15rem .85rem; min-height: 25px; }
.fx-edge__toolbar > span { color: #80718f; font-size: .58rem; letter-spacing: .14em; }
.fx-edge__motion { display: inline-flex; align-items: center; gap: .4rem; color: #a995bf; font-size: .64rem; padding: .2rem .3rem; }
.fx-edge__motion[hidden] { display: none; }
.fx-edge__motion svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.3; fill: none; }
.fx-edge__motion .fx-edge__play { display: none; }
.fx-edge__motion[aria-pressed="true"] .fx-edge__play { display: block; }
.fx-edge__motion[aria-pressed="true"] .fx-edge__pause { display: none; }
.fx-edge__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.fx-edge-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #a88ad126; border-radius: 18px; background: linear-gradient(160deg,#191025 0%,#0b0713 62%); box-shadow: 0 18px 45px -30px #000; transition: border-color .4s,transform .6s,opacity .6s; }
.fx-edge-card::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg,transparent,#c09aef66,transparent); }
.fx-edge-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(300px circle at var(--edge-x,50%) var(--edge-y,30%),#b480ef0b,transparent 70%); transition: opacity .3s; }
.fx-edge-card:hover { border-color: #b795e959; }
.fx-edge-card:hover::after { opacity: 1; }
.fx-edge-card--platform { border-color: #aa85e143; background: linear-gradient(160deg,#201333,#0e081a 72%); }
.fx-edge-card__top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 1.15rem 1.25rem 0; color: #7f6b97; font-size: .51rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.fx-edge-card__top > span:first-child { display: flex; align-items: center; gap: .45rem; color: #b09ac8; }
.fx-edge-card__dot { width: 3px; height: 3px; border-radius: 50%; background: #c8a2f7; box-shadow: 0 0 8px #ad71ff66; }
.fx-edge-scene { height: 278px; position: relative; isolation: isolate; overflow: hidden; user-select: none; }
.fx-edge-card__copy { position: relative; z-index: 1; padding: 1.6rem 1.55rem 1.5rem; background: linear-gradient(180deg,#b18af405,transparent); border-top: 1px solid #b9a0d410; }
.fx-edge-card__copy h3 { color: #f0e7fb; font-size: 1.21rem; font-weight: 500; letter-spacing: -.035em; line-height: 1.3; margin: 0 0 .65rem; }
.fx-edge-card__copy p { margin: 0; font-size: .82rem; line-height: 1.85; color: #a497b5; min-height: 4.55em; }
.fx-edge-card__note { display: block; margin-top: 1.3rem; padding-top: .85rem; border-top: 1px solid #b9a0d412; font-size: .58rem; color: #7e6e90; line-height: 1.6; }
/* 01 / Market selection travels through a fixed, layered instrument rail. */
.fx-market { perspective: 800px; }
.fx-market__grid { position: absolute; inset: 25px 6% 20px; opacity: .25; background-image: radial-gradient(#b19aca70 .75px,transparent .75px); background-size: 11px 11px; mask-image: radial-gradient(ellipse,#000,transparent 68%); }
.fx-market__axis { position: absolute; left: 0; right: 0; top: 126px; height: 1px; background: linear-gradient(90deg,transparent,#bb99e330,transparent); }
.fx-market__orbit { position: absolute; width: 164px; height: 164px; left: calc(50% - 82px); top: 45px; border: 1px solid #b79be51c; border-radius: 50%; }
.fx-market__orbit--one { border-left-color: #c5a0f080; border-right-color: #9e74e745; animation: fx-edge-orbit 15s linear infinite; }
.fx-market__orbit--two { width: 194px; height: 194px; left: calc(50% - 97px); top: 30px; border-style: dashed; opacity: .45; animation: fx-edge-orbit 40s linear reverse infinite; }
.fx-market__assets { display: flex; gap: 22px; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; top: 90px; }
.fx-asset { position: relative; flex: 0 0 64px; width: 64px; height: 74px; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 1px; border: 1px solid #a18ab733; border-radius: 13px; color: #887499; background: linear-gradient(145deg,#271d31,#16101f); box-shadow: inset 0 1px 0 #ffffff08,0 8px 15px #0005; transform: translateY(0) scale(.9) rotateY(-8deg); transition: color .7s,border-color .7s,box-shadow .7s,transform .7s,background .7s; }
.fx-asset svg { width: 37px; height: 37px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.fx-asset > span { font-size: .46rem; letter-spacing: .16em; }
.fx-asset.is-active { color: #f1ddff; transform: translateY(-8px) scale(1.13) rotateY(0); border-color: #d1a8ff88; background: linear-gradient(145deg,#725090,#38214f 72%); box-shadow: inset 0 1px 0 #f5ddff55,0 15px 25px #0007,0 0 35px #9f59e51f; z-index: 2; }
.fx-market__selection { position: absolute; display: flex; align-items: center; justify-content: center; gap: 12px; top: 211px; left: 0; right: 0; color: #d3b6f1; font-size: .71rem; font-weight: 500; }
.fx-market__line { width: 27px; height: 1px; background: linear-gradient(90deg,transparent,#b58edc66); }
.fx-market__line:last-child { transform: rotate(180deg); }
.fx-market__symbol { position: absolute; top: 236px; left: 0; right: 0; text-align: center; color: #756383; font-size: .48rem; letter-spacing: .18em; }
.fx-market__progress { position: absolute; top: 263px; display: flex; gap: 5px; justify-content: center; left: 0; right: 0; }
.fx-market__progress span { width: 14px; height: 2px; background: #463452; border-radius: 2px; transition: background .5s,width .5s; }
.fx-market__progress .is-active { width: 24px; background: #cc9ff3; }
/* 02 / One MT5 workspace, with a drawing chart and a floating platform tile. */
.fx-terminal__halo { position: absolute; width: 245px; height: 245px; border-radius: 50%; border: 1px solid #bda0ef12; top: 10px; left: calc(50% - 122px); background: radial-gradient(circle,#a261e71c,transparent 65%); }
.fx-terminal__halo--outer { width: 300px; height: 300px; left: calc(50% - 150px); top: -17px; background: none; border-style: dashed; animation: fx-edge-orbit 90s linear infinite; }
.fx-terminal__window { position: absolute; width: 268px; height: 179px; left: calc(50% - 134px); top: 40px; border: 1px solid #ab89d95c; border-radius: 10px; background: linear-gradient(130deg,#2b1e3b,#130d1d 75%); box-shadow: 7px 15px 0 -6px #08050e,9px 18px 0 -7px #9d78c130,0 20px 30px #0006; transform: perspective(800px) rotateY(-9deg) rotateX(8deg) rotateZ(-3deg); animation: fx-edge-terminal 8s ease-in-out infinite; overflow: hidden; }
.fx-terminal__bar { height: 24px; border-bottom: 1px solid #ad89d122; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; color: #a58abb; font-size: 5px; letter-spacing: 1px; }
.fx-terminal__dots { display: flex; gap: 3px; }
.fx-terminal__dots i { width: 3px; height: 3px; border-radius: 50%; background: #937aa2; }
.fx-terminal__dots i:nth-child(2) { opacity: .6; }.fx-terminal__dots i:nth-child(3) { opacity: .3; }
.fx-terminal__signal { display: flex; gap: 2px; align-items: flex-end; }
.fx-terminal__signal i { width: 2px; height: 3px; background: #ba9cdf; }.fx-terminal__signal i:nth-child(2) { height: 5px; }.fx-terminal__signal i:nth-child(3) { height: 7px; }
.fx-terminal__pair { display: flex; justify-content: space-between; margin: 8px 10px 0; font-size: 6px; letter-spacing: .4px; color: #c6b3db; }.fx-terminal__pair small { color: #7e668f; margin-left: 5px; font-size: 5px; }.fx-terminal__pair > span:last-child { color: #79628a; font-size: 5px; }
.fx-terminal__chart { width: calc(100% - 18px); height: 116px; margin: 0 9px; }
.fx-chart-grid { stroke: #ad89d115; stroke-width: .6; }
.fx-candle { stroke: #ba96ed; fill: #b593e0; stroke-width: 1; transform-box: fill-box; transform-origin: center bottom; animation: fx-edge-candle 7s ease-in-out infinite; }
.fx-candle--down { stroke: #745582; fill: #553c63; }
.fx-candle--2 { animation-delay: .16s; }.fx-candle--3 { animation-delay: .32s; }.fx-candle--4 { animation-delay: .48s; }.fx-candle--5 { animation-delay: .64s; }.fx-candle--6 { animation-delay: .8s; }.fx-candle--7 { animation-delay: .96s; }.fx-candle--8 { animation-delay: 1.12s; }.fx-candle--9 { animation-delay: 1.28s; }.fx-candle--10 { animation-delay: 1.44s; }
.fx-chart-price { stroke: #dbb7f2; stroke-width: .5; stroke-dasharray: 2 4; opacity: .45; animation: fx-edge-price 7s ease-in-out infinite; }
.fx-chart-point { fill: #eedaff; animation: fx-edge-signal 3s ease-in-out infinite; }
.fx-terminal__bottom { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: #7e658e; font-size: 4px; letter-spacing: 1px; }
.fx-terminal__mini-bars { display: flex; align-items: flex-end; gap: 3px; }.fx-terminal__mini-bars i { width: 8px; height: 3px; background: #9474b8; }.fx-terminal__mini-bars i:nth-child(even) { opacity: .5; }.fx-terminal__mini-bars i:nth-child(3) { height: 5px; }.fx-terminal__mini-bars i:nth-child(5) { height: 7px; }
.fx-terminal__badge { position: absolute; right: 25px; bottom: 37px; width: 63px; height: 63px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 2px; color: #f5e9ff; background: linear-gradient(140deg,#765294,#352044); border: 1px solid #d5b2ef77; box-shadow: inset 0 0 0 4px #986dbd18,0 12px 30px #0007,0 0 25px #a269f020; animation: fx-edge-float 6s ease-in-out infinite; }
.fx-terminal__badge span { font-size: 15px; font-weight: 400; letter-spacing: -1px; }.fx-terminal__badge b { font-size: 30px; font-weight: 500; letter-spacing: -2px; }
.fx-terminal__caption { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; color: #876d9c; font-size: .46rem; letter-spacing: .12em; }
/* 03 / Independent light packets converge on the reward wallet. */
.fx-reward__routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-route { stroke: #aa84cf29; stroke-width: .8; }
.fx-route-packet { stroke: #d5a7f4; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 14 300; stroke-dashoffset: 314; animation: fx-edge-route 5s linear infinite; }
.fx-route-packet--two { animation-delay: -2s; stroke: #a591ef; }.fx-route-packet--three { animation-delay: -3.5s; opacity: .65; }
.fx-route-dot { fill: #9674b2; opacity: .65; }
.fx-reward__source { position: absolute; color: #7c648e; font-size: .42rem; letter-spacing: .12em; padding: 5px 6px; background: #130c1d; border: 1px solid #a97bc522; border-radius: 4px; }
.fx-reward__source--one { top: 39px; left: 18px; }.fx-reward__source--two { top: 203px; right: 11px; }
.fx-reward__core { position: absolute; left: calc(50% - 39px); top: 94px; width: 78px; height: 78px; border: 1px solid #c09ce37a; border-radius: 21px; display: grid; place-items: center; color: #efd9ff; background: linear-gradient(140deg,#725185,#36203f 75%); box-shadow: inset 0 0 0 5px #cc9de80d,0 0 0 7px #b984e60a,0 0 0 8px #b984e61c,0 10px 30px #0007,0 0 45px #ae58ef17; animation: fx-edge-wallet 5s ease-in-out infinite; }
.fx-reward__core > svg { width: 35px; height: 35px; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.fx-reward__check { position: absolute; width: 23px; height: 23px; right: -7px; bottom: -5px; display: grid; place-items: center; border: 1px solid #b59acc; border-radius: 50%; color: #f1e6ff; background: #5a3a6a; animation: fx-edge-confirm 5s ease-in-out infinite; }.fx-reward__check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.fx-reward__sequence { position: absolute; left: 0; right: 0; top: 187px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.fx-reward__sequence span { font-size: .46rem; color: #a88abb; animation: fx-edge-stage 6s ease-in-out infinite; }.fx-reward__sequence span:nth-of-type(2) { animation-delay: 2s; }.fx-reward__sequence span:nth-of-type(3) { animation-delay: 4s; }.fx-reward__sequence i { width: 11px; height: 1px; background: #8e6b9d4d; }
.fx-reward__share { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: .52rem; color: #a990bd; }.fx-reward__share strong { font-size: 23px; color: #e5c6f9; font-weight: 500; margin-left: 3px; letter-spacing: -1px; }.fx-reward__share small { font-size: 13px; }.fx-reward__share > span { display: block; font-size: .4rem; letter-spacing: .14em; color: #7e638d; margin-top: 1px; }
.fx-edge__footer { margin-top: 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #8d7c9d; font-size: .68rem; }
.fx-edge__footer > span { display: flex; align-items: center; gap: .5rem; }.fx-edge__footer svg { width: 14px; height: 14px; stroke: #ae8bcb; stroke-width: .9; flex: none; }.fx-edge__footer a { color: #b99bda; display: flex; gap: 1rem; align-items: center; }.fx-edge__footer a:hover { color: #e4cbfa; }
.fx-edge button:focus-visible,.fx-edge a:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 5px; border-radius: 4px; }
.fx-edge * { animation-play-state: paused; }
.fx-edge.is-running * { animation-play-state: running; }
.fx-edge.is-ready .fx-edge-card { opacity: 0; transform: translateY(22px); }
.fx-edge.is-seen .fx-edge-card { opacity: 1; transform: translateY(0); }
.fx-edge.is-ready .fx-edge-card:nth-child(2) { transition-delay: .1s; }.fx-edge.is-ready .fx-edge-card:nth-child(3) { transition-delay: .2s; }
@keyframes fx-edge-orbit { to { transform: rotate(360deg); } }
@keyframes fx-edge-terminal { 0%,100% { transform: perspective(800px) rotateY(-9deg) rotateX(8deg) rotateZ(-3deg) translateY(0); } 50% { transform: perspective(800px) rotateY(-4deg) rotateX(5deg) rotateZ(-2deg) translateY(-6px); } }
@keyframes fx-edge-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes fx-edge-candle { 0%,12% { transform: scaleY(.4); opacity: .3; } 30%,85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.4); opacity: .3; } }
@keyframes fx-edge-price { 0%,100% { transform: translateY(30px); } 50% { transform: translateY(0); } }
@keyframes fx-edge-signal { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fx-edge-route { to { stroke-dashoffset: 0; } }
@keyframes fx-edge-wallet { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes fx-edge-confirm { 0%,25% { opacity: .4; transform: scale(.8); } 40%,90% { opacity: 1; transform: scale(1); } 100% { opacity: .4; transform: scale(.8); } }
@keyframes fx-edge-stage { 0%,32%,100% { color: #dcb9f5; } 33%,99% { color: #775f88; } }
@media(max-width:1050px) and (min-width:901px) { .fx-edge__grid { gap: 12px; }.fx-edge-card__copy { padding: 1.35rem 1.15rem; }.fx-edge-card__copy h3 { font-size: 1.05rem; }.fx-edge-card__copy p { font-size: .77rem; min-height: 6em; }.fx-terminal__window { width: 230px; left: calc(50% - 115px); }.fx-terminal__badge { right: 12px; }.fx-market__assets { gap: 12px; }.fx-asset { flex-basis: 58px; width: 58px; }.fx-edge-card__top { padding: 1rem .85rem 0; font-size: .43rem; }.fx-reward__source { font-size: .36rem; }.fx-reward__source--one { left: 4px; }.fx-reward__source--two { right: 4px; } }
@media(max-width:900px) { .apex-page .fx-edge { padding: 4rem 1rem; }.fx-edge__heading { margin-bottom: 2rem; }.fx-edge__heading h2 { font-size: 2.1rem; max-width: 450px; margin: 1rem auto .9rem; }.fx-edge__heading > p { font-size: .85rem; }.fx-edge__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 18px; }.fx-edge__toolbar { max-width: 440px; margin: 0 auto .8rem; }.fx-edge-card__copy p { min-height: 0; }.fx-edge__footer { max-width: 440px; margin: 1.3rem auto 0; flex-direction: column; align-items: flex-start; gap: .9rem; font-size: .65rem; }.fx-edge__toolbar > span { font-size: .48rem; }.fx-edge__motion { font-size: .58rem; }.fx-edge-scene { height: 268px; }.fx-reward__source--two { top: 197px; }.fx-reward__share { bottom: -1px; }.fx-market__progress { top: 258px; }.fx-market__symbol { top: 234px; } }
@media(prefers-reduced-motion:reduce) { .fx-edge *, .fx-edge *::before, .fx-edge *::after { animation: none !important; transition: none !important; }.fx-edge.is-ready .fx-edge-card { opacity: 1; transform: none; } }