/* ==========================================================================
   Bot Trading — futuristic layer for the public website
   --------------------------------------------------------------------------
   Loaded after site.css (see inc/site/head.php). It gives the public pages their sci-fi "trading terminal" look: cut
   corners, HUD brackets, glowing outlines that follow the pointer, a moving grid floor, light sweeps and the canvas
   charts drawn by assets/js/site-fx.js. The colours, gradient, fonts and corner style still come from the Styling
   variables, and every motion rule hangs on body.fe-fx-motion so Styling → Futuristic effects can switch it off.
   Everything is scoped to body.fe-site: the member area, the sign-in pages and the admin portal are not touched.
   ========================================================================== */

/* Registered so that outlines, brackets and light can animate smoothly (older browsers simply snap). */
@property --fe-b    { syntax: '<length>'; inherits: false; initial-value: 14px; }
@property --fe-spot { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --fe-ring { syntax: '<number>'; inherits: false; initial-value: 0.3; }
@property --fe-ang  { syntax: '<angle>';  inherits: false; initial-value: 0deg; }

body.fe-site {
	/* a rectangle with two opposite corners cut (and a smaller cut for small controls) */
	--fe-clip: polygon(var(--fe-cut) 0, 100% 0, 100% calc(100% - var(--fe-cut)), calc(100% - var(--fe-cut)) 100%, 0 100%, 0 var(--fe-cut));
	--fe-clip-s: polygon(calc(var(--fe-cut) * .6) 0, 100% 0, 100% calc(100% - var(--fe-cut) * .6), calc(100% - var(--fe-cut) * .6) 100%, 0 100%, 0 calc(var(--fe-cut) * .6));
	--fe-cut-s: calc(var(--fe-cut) * .6);
}

/* ---------- small things ---------- */
.fe-site ::selection { background: rgba(var(--fe-accent-rgb), .38); color: #fff; }
html:has(body.fe-site)::-webkit-scrollbar { width: 11px; }
html:has(body.fe-site)::-webkit-scrollbar-track { background: var(--fe-bg); }
html:has(body.fe-site)::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--fe-from-rgb), .9), rgba(var(--fe-to-rgb), .9)); border: 2px solid var(--fe-bg); }

.fe-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 1500; height: 2px; background: rgba(var(--fe-text-rgb), .06); pointer-events: none; }
body.admin-bar .fe-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .fe-progress { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .fe-progress { top: 0; } }
.fe-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--fe-grad); box-shadow: 0 0 14px rgba(var(--fe-accent-rgb), .8); }

/* ---------- canvases ---------- */
.fe-fxcanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.fe-fxcanvas.is-live { opacity: 1; }
.fe-fxcanvas--hero { inset: auto 0 0 0; width: 100%; height: 64%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36%), linear-gradient(90deg, transparent 0, #000 9%, #000 97%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 36%), linear-gradient(90deg, transparent 0, #000 9%, #000 97%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.fe-fxcanvas--page { z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 80%); mask-image: linear-gradient(90deg, transparent 30%, #000 80%); }
.fe-fxcanvas--page.is-live { opacity: .8; }
.fe-fxcanvas--cta { z-index: -2; -webkit-mask-image: radial-gradient(ellipse 48% 56% at 50% 46%, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, .16) 56%, #000 100%); mask-image: radial-gradient(ellipse 48% 56% at 50% 46%, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, .16) 56%, #000 100%); }
.fe-fxcanvas--cta.is-live { opacity: .85; }
@media (max-width: 992px) { .fe-fxcanvas--cta.is-live { opacity: .5; } }
.fe-fxcanvas--band { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fe-fxcanvas--spark { inset: auto 0 0 0; height: 56px; z-index: 0; }
.fe-fxcanvas--spark.is-live { opacity: .85; }
.fe-fxcanvas--plan { inset: 1px 1px auto auto; width: 62%; height: 96px; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent); mask-image: linear-gradient(180deg, #000 52%, transparent); }
.fe-fxcanvas--plan.is-live { opacity: .55; }

/* a quiet strip between two sections */
.fe-band { position: relative; height: clamp(120px, 13vw, 180px); overflow: hidden; border-block: 1px solid rgba(var(--fe-accent-rgb), .1); background: linear-gradient(180deg, transparent, rgba(var(--fe-surface-rgb), .55) 50%, transparent); }
.fe-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--fe-accent-rgb), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fe-accent-rgb), .05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 75%); }

/* ---------- announcement bar & header ---------- */
.fe-topbar { position: relative; background: linear-gradient(90deg, rgba(var(--fe-bg-rgb), .98), rgba(var(--fe-from-rgb), .16) 50%, rgba(var(--fe-bg-rgb), .98)); border-bottom: 1px solid rgba(var(--fe-accent-rgb), .16); font-family: var(--fe-mono); font-size: 12.5px; letter-spacing: .02em; }
.fe-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--fe-accent), transparent) -50% 0 / 36% 100% no-repeat; opacity: .8; }
body.fe-site .fe-header { background: rgba(var(--fe-bg-rgb), .5); border-bottom: 1px solid rgba(var(--fe-accent-rgb), .1); }
body.fe-site .fe-header.is-scrolled { background: rgba(var(--fe-bg-rgb), .86); border-color: rgba(var(--fe-accent-rgb), .14); }
.fe-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 0, rgba(var(--fe-from-rgb), .95) 30%, rgba(var(--fe-to-rgb), .95) 70%, transparent 100%); background-size: 100% 100%; opacity: .55; pointer-events: none; }
.fe-logo { filter: drop-shadow(0 0 14px rgba(var(--fe-from-rgb), .38)); }
.fe-logo__mark { position: relative; overflow: hidden; clip-path: var(--fe-clip-s); box-shadow: none; }
.fe-logo__mark::after { content: ""; position: absolute; inset: -30% -70%; background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .6) 50%, transparent 58%); transform: translateX(-110%); }
.fe-logo__word { letter-spacing: .12em; }
.fe-site a.fe-nav__link { font-family: var(--fe-font-heading); font-size: 14.5px; letter-spacing: .05em; }
.fe-site a.fe-nav__link::after { bottom: 4px; box-shadow: 0 0 10px rgba(var(--fe-accent-rgb), .9); }
.fe-site a.fe-nav__link:hover, .fe-site a.fe-nav__link.is-current { text-shadow: 0 0 18px rgba(var(--fe-accent-rgb), .6); }
.fe-site a.fe-nav__link.is-current::before { content: ""; position: absolute; left: 50%; top: 3px; width: 5px; height: 5px; margin-left: -2.5px; transform: rotate(45deg); background: var(--fe-accent); box-shadow: 0 0 10px var(--fe-accent); }

/* ---------- buttons: cut corners, light sweep, glow ---------- */
html body.fe-site a.fe-btn, html body.fe-site button.fe-btn { position: relative; overflow: hidden; isolation: isolate; clip-path: var(--fe-clip-s); border-radius: 0; padding: 15px 30px; font-family: var(--fe-font-heading); font-size: 13.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; box-shadow: none; }
html body.fe-site .fe-btn--sm { padding: 11px 20px; font-size: 12.5px; }
html body.fe-site .fe-btn--lg { padding: 18px 36px; font-size: 14px; }
html body.fe-site a.fe-btn::before, html body.fe-site button.fe-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 32%; z-index: -1; transform: skewX(-24deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent); transition: left .7s ease; pointer-events: none; }
html body.fe-site a.fe-btn:hover::before, html body.fe-site button.fe-btn:hover::before { left: 125%; }
html body.fe-site .fe-btn:focus-visible { outline: 2px solid var(--fe-accent); outline-offset: -5px; }
html body.fe-site a.fe-btn--primary, html body.fe-site button.fe-btn--primary { border-color: transparent; }
html body.fe-site a.fe-btn--outline, html body.fe-site button.fe-btn--outline {
	--edge: var(--fe-btn2-border);
	background-color: rgba(var(--fe-bg-rgb), .4);
	background-image:
		linear-gradient(135deg, transparent calc(var(--fe-cut-s) * .7071), var(--edge) calc(var(--fe-cut-s) * .7071), var(--edge) calc(var(--fe-cut-s) * .7071 + var(--fe-cut-line)), transparent calc(var(--fe-cut-s) * .7071 + var(--fe-cut-line))),
		linear-gradient(315deg, transparent calc(var(--fe-cut-s) * .7071), var(--edge) calc(var(--fe-cut-s) * .7071), var(--edge) calc(var(--fe-cut-s) * .7071 + var(--fe-cut-line)), transparent calc(var(--fe-cut-s) * .7071 + var(--fe-cut-line)));
	border: 1px solid var(--edge);
}
html body.fe-site a.fe-btn--outline:hover, html body.fe-site button.fe-btn--outline:hover { --edge: var(--fe-btn2-hover-border); background-image: none; }
/* a soft glow around groups of buttons (the buttons themselves are clipped, so the glow lives on the group) */
.fe-actions, .fe-header__cta, .fe-drawer__cta { filter: drop-shadow(0 8px 18px rgba(var(--fe-from-rgb), .26)); }

/* ---------- section headings ---------- */
.fe-eyebrow { font-family: var(--fe-mono); font-size: 12px; font-weight: 600; letter-spacing: .26em; }
.fe-eyebrow::before, .fe-head--center .fe-eyebrow::after { width: 46px; height: 7px; background: linear-gradient(90deg, transparent, var(--fe-accent)) 0 50% / calc(100% - 7px) 1px no-repeat, linear-gradient(var(--fe-accent), var(--fe-accent)) 100% 50% / 6px 6px no-repeat; }
.fe-head--center .fe-eyebrow::after { transform: scaleX(-1); }
.fe-title { filter: drop-shadow(0 0 28px rgba(var(--fe-from-rgb), .16)); }
html body.fe-site .fe-hl { background-image: linear-gradient(100deg, var(--fe-grad-from), var(--fe-grad-via), var(--fe-grad-to), var(--fe-grad-via), var(--fe-grad-from)); background-size: 230% 100%; }

/* ---------- hero ---------- */
.fe-hero { padding: clamp(40px, 6vw, 86px) 0 clamp(70px, 9vw, 120px); }
.fe-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(var(--fe-accent-rgb), .75), transparent); pointer-events: none; }
.fe-hero__bg { background: radial-gradient(900px 520px at 78% 16%, rgba(var(--fe-from-rgb), .36), transparent 62%), radial-gradient(720px 480px at 6% 92%, rgba(var(--fe-to-rgb), .2), transparent 60%), radial-gradient(620px 260px at 50% 100%, rgba(var(--fe-primary-rgb), .26), transparent 72%), var(--fe-page-bg); }
.fe-hero__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--fe-bg-rgb), .93) 0%, rgba(var(--fe-bg-rgb), .74) 34%, rgba(var(--fe-bg-rgb), .26) 55%, transparent 74%); }
.fe-hero__bg::after { z-index: 1; background-size: 48px 48px; }
.fe-hero__floor { position: absolute; left: -28%; right: -28%; bottom: 0; z-index: 0; height: 36%; overflow: hidden; perspective: 420px; perspective-origin: 50% 0; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 90%); mask-image: linear-gradient(to top, #000 8%, transparent 90%); }
.fe-hero__floor i { position: absolute; left: 0; right: 0; bottom: 0; height: 220%; transform-origin: 50% 100%; transform: rotateX(66deg); background-image: linear-gradient(rgba(var(--fe-accent-rgb), .5) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(var(--fe-accent-rgb), .5) 1.5px, transparent 1.5px); background-size: 72px 72px; }
.fe-hero__bg .fe-fxcanvas { z-index: 0; }
.fe-slide__art::before, .fe-slide__art::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.fe-slide__art::before { inset: -9% -7%; border: 1px dashed rgba(var(--fe-accent-rgb), .26); }
.fe-slide__art::after { inset: -3% -2%; background: conic-gradient(from var(--fe-ang), transparent 0deg, transparent 292deg, rgba(var(--fe-accent-rgb), .26) 358deg, transparent 360deg); -webkit-mask-image: radial-gradient(circle closest-side, transparent 56%, #000 84%, transparent 100%); mask-image: radial-gradient(circle closest-side, transparent 56%, #000 84%, transparent 100%); }
.fe-slide--noart .fe-slide__art::before, .fe-slide--noart .fe-slide__art::after { display: none; }
.fe-chip { clip-path: var(--fe-clip-s); border: 0; font-family: var(--fe-mono); letter-spacing: .18em; background: linear-gradient(90deg, rgba(var(--fe-accent-rgb), .2), rgba(var(--fe-accent-rgb), .04)); box-shadow: inset 2px 0 0 var(--fe-accent); }
.fe-slide__title { filter: drop-shadow(0 0 26px rgba(var(--fe-from-rgb), .28)); }
.fe-slide__note { font-family: var(--fe-mono); font-size: 13px; }
.fe-hero__arrow { clip-path: var(--fe-clip-s); background: rgba(var(--fe-bg-rgb), .5); border-color: rgba(var(--fe-accent-rgb), .3); }
.fe-hero__arrow:hover { background: rgba(var(--fe-accent-rgb), .16); border-color: var(--fe-accent); box-shadow: inset 0 0 14px rgba(var(--fe-accent-rgb), .25); }
.fe-hero__dot::before { height: 3px; top: 4.5px; }
.fe-hero__dot.is-active::before { box-shadow: 0 0 12px rgba(var(--fe-accent-rgb), .9); }

/* ---------- news ticker ---------- */
.fe-ticker { background: linear-gradient(180deg, rgba(var(--fe-surface-rgb), .92), rgba(var(--fe-bg-rgb), .96)); border-block: 1px solid rgba(var(--fe-accent-rgb), .16); }
.fe-ticker::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, rgba(var(--fe-accent-rgb), .9), transparent) -40% 0 / 30% 100% no-repeat; }
.fe-ticker__label { font-family: var(--fe-font-heading); }
.fe-ticker__list li { font-family: var(--fe-mono); font-size: 13px; letter-spacing: .01em; }
.fe-ticker__list li::after { width: 5px; height: 5px; background: rgba(var(--fe-accent-rgb), .55); }
.fe-ticker__tag { clip-path: var(--fe-clip-s); border-radius: 0; background: rgba(var(--fe-accent-rgb), .14); box-shadow: inset 2px 0 0 var(--fe-accent); }

/* ---------- the top bar: scrolling prices, edge to edge — made-up numbers drawn by site-fx.js (the same strip as at the bottom of the sign-in pages) ---------- */
/* The strip stands in place of the announcement message; the message stays only for visitors without JavaScript. */
.fe-topbar--prices { text-align: left; }
.fe-js .fe-topbar--prices { display: flex; align-items: center; width: 100%; height: 36px; overflow: hidden; font: 500 12px/1 var(--fe-mono); letter-spacing: .01em; color: #aab9d8; }   /* the room is kept from the first paint, so nothing jumps when the numbers arrive */
.fe-js .fe-topbar--prices > .fe-topbar__inner { display: none; }
html:not(.fe-js) .fe-topbar--prices:not(.has-text) { display: none; }
.fe-topbar--prices > .ct-tape__view { opacity: 0; transition: opacity 1.1s ease; }
.fe-topbar--prices.is-on > .ct-tape__view { opacity: 1; }
.ct-tape__view { flex: 1; min-width: 0; width: 100%; overflow: hidden; display: flex; align-items: center; }
.ct-tape__track { display: flex; flex: none; gap: 34px; padding-right: 34px; white-space: nowrap; will-change: transform; }
.fe-topbar--prices:hover .ct-tape__track { animation-play-state: paused; }
.ct-tape__track b { margin-right: 8px; color: #fff; font-weight: 600; }
.ct-tape__track em { margin-right: 8px; font-style: normal; font-variant-numeric: tabular-nums; }
.ct-tape__track i { font-style: normal; font-variant-numeric: tabular-nums; }
.ct-tape .up { color: var(--fe-up); }
.ct-tape .down { color: var(--fe-down); }

/* ---------- HUD panels: glass, light outline, corner brackets, pointer spotlight ---------- */
body.fe-site :is(.fe-card, .fe-quote, .fe-step__card, .fe-info, .fe-acc, .fe-contact__form, .fe-toc, .fe-legal__help, .fe-plan, .fe-stats__grid li, .fe-frame, .fe-compare) {
	--fe-b: var(--fe-brk);
	--fe-ring: .3;
	--fe-spot: 0;
	--hud-ring: linear-gradient(135deg, rgba(var(--fe-accent-rgb), var(--fe-ring)), rgba(var(--fe-primary-rgb), .1) 42%, rgba(var(--fe-accent-rgb), calc(var(--fe-ring) * .7)));
	border: 1px solid transparent;
	border-radius: var(--fe-radius);
	box-shadow: none;
	background:
		linear-gradient(var(--fe-accent), var(--fe-accent)) 0 0 / var(--fe-b) 2px no-repeat border-box,
		linear-gradient(var(--fe-accent), var(--fe-accent)) 0 0 / 2px var(--fe-b) no-repeat border-box,
		linear-gradient(var(--fe-accent), var(--fe-accent)) 100% 100% / var(--fe-b) 2px no-repeat border-box,
		linear-gradient(var(--fe-accent), var(--fe-accent)) 100% 100% / 2px var(--fe-b) no-repeat border-box,
		radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--fe-accent-rgb), var(--fe-spot)), transparent 70%) padding-box,
		linear-gradient(180deg, var(--fe-surface-2), var(--fe-surface)) padding-box,
		radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--fe-accent-rgb), calc(var(--fe-spot) * 5)), transparent 62%) border-box,
		var(--hud-ring) border-box;
	transition: opacity .75s ease, transform .75s cubic-bezier(.22, .8, .3, 1), translate .3s ease, --fe-b .35s ease, --fe-ring .35s ease, --fe-spot .35s ease;
}
body.fe-site :is(.fe-card, .fe-quote, .fe-step__card, .fe-info, .fe-acc, .fe-contact__form, .fe-toc, .fe-legal__help, .fe-plan, .fe-stats__grid li, .fe-frame, .fe-compare):hover { --fe-b: calc(var(--fe-brk) * 2.2); --fe-ring: .9; --fe-spot: .14; translate: 0 -4px; border-color: transparent; box-shadow: none; transform: none; }
body.fe-site :is(.fe-acc, .fe-contact__form, .fe-toc, .fe-compare, .fe-frame):hover { translate: none; }
body.fe-site :is(.fe-info, .fe-acc, .fe-contact__form, .fe-legal__help, .fe-stats__grid li, .fe-frame, .fe-compare) { position: relative; }
body.fe-site .fe-card::before { display: none; }

/* ---------- highlight tiles ---------- */
.fe-stats__grid { gap: 16px; background: none; border: 0; box-shadow: none; }
.fe-stats__grid li { overflow: hidden; min-height: 150px; padding: 26px 26px 70px; justify-content: flex-start; }
.fe-stats__grid li > :not(canvas) { position: relative; z-index: 1; }
.fe-stat__value { font-size: clamp(30px, 3.2vw, 44px); filter: drop-shadow(0 0 18px rgba(var(--fe-from-rgb), .5)); }
.fe-stat__label { font-family: var(--fe-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fe-muted); }

/* ---------- picture frames ---------- */
.fe-frame { padding: 12px; }
.fe-frame img { background: transparent; }
.fe-float-badge { clip-path: var(--fe-clip-s); border-radius: 0; box-shadow: none; }
.fe-checklist i { clip-path: var(--fe-clip-s); border: 0; background: rgba(var(--fe-accent-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--fe-accent-rgb), .45); }

/* ---------- the flow ---------- */
.fe-flow::before { width: 2px; background: linear-gradient(180deg, rgba(var(--fe-from-rgb), .25), rgba(var(--fe-to-rgb), .25)); opacity: 1; }
.fe-flow::after { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: 2px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(180deg, transparent, var(--fe-accent), transparent) 0 -140px / 100% 140px no-repeat; filter: drop-shadow(0 0 6px var(--fe-accent)); }
.fe-step__node { rotate: 45deg; width: 44px; height: 44px; background: var(--fe-bg); border: 2px solid var(--fe-primary); box-shadow: 0 0 0 6px rgba(var(--fe-primary-rgb), .14), 0 0 30px var(--fe-glow); }
.fe-step__node b { rotate: -45deg; font-family: var(--fe-mono); }
.fe-step:hover .fe-step__node { transform: scale(1.12); }
.fe-step__card::before { height: 1px; background: linear-gradient(90deg, rgba(var(--fe-accent-rgb), .7), rgba(var(--fe-accent-rgb), .1)); }
.fe-step:nth-child(odd) .fe-step__card::before { background: linear-gradient(270deg, rgba(var(--fe-accent-rgb), .7), rgba(var(--fe-accent-rgb), .1)); }
.fe-step__icon, .fe-card__icon, .fe-info__icon, .fe-help__icon { clip-path: var(--fe-clip-s); border-radius: 0; box-shadow: none; position: relative; overflow: hidden; }
.fe-step__icon::after, .fe-card__icon::after, .fe-info__icon::after { content: ""; position: absolute; inset: -30% -70%; background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%); transform: translateX(-110%); }
.fe-card:hover .fe-card__icon::after, .fe-step:hover .fe-step__icon::after, .fe-info:hover .fe-info__icon::after { transform: translateX(110%); transition: transform .8s ease; }
.fe-step.is-optional .fe-step__card { background-image: none; background-color: transparent; border-style: dashed; border-color: rgba(var(--fe-accent-rgb), .3); }
.fe-step.is-optional .fe-step__node { border-style: dashed; box-shadow: 0 0 0 6px rgba(var(--fe-primary-rgb), .08); }
.fe-badge--dashed { font-family: var(--fe-mono); }

/* ---------- plans ---------- */
.fe-plans { perspective: 1200px; }
body.fe-site .fe-plan { rotate: var(--tax, 1) var(--tay, 0) 0 var(--tilt, 0deg); transform-style: preserve-3d; transition: opacity .75s ease, transform .75s cubic-bezier(.22, .8, .3, 1), translate .3s ease, rotate .25s ease-out, --fe-b .35s ease, --fe-ring .35s ease, --fe-spot .35s ease; }
.fe-plan > :not(canvas):not(.fe-plan__badge) { position: relative; z-index: 1; }
body.fe-site .fe-plan.is-featured { --fe-ring: 1; --hud-ring: conic-gradient(from var(--fe-ang), rgba(var(--fe-accent-rgb), .95), rgba(var(--fe-from-rgb), .25) 25%, rgba(var(--fe-to-rgb), .95) 50%, rgba(var(--fe-from-rgb), .25) 75%, rgba(var(--fe-accent-rgb), .95)); box-shadow: 0 50px 90px -50px var(--fe-glow); }
body.fe-site .fe-plan.is-featured:hover { box-shadow: 0 60px 100px -50px var(--fe-glow); }
.fe-plan__badge { z-index: 2; clip-path: var(--fe-clip-s); border-radius: 0; box-shadow: none; font-family: var(--fe-mono); letter-spacing: .14em; }
.fe-plan__name { font-family: var(--fe-mono); font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--fe-accent); }
.fe-plan__price strong { filter: drop-shadow(0 0 22px rgba(var(--fe-from-rgb), .55)); }
.fe-plan__price span { font-family: var(--fe-mono); font-size: 12.5px; }
.fe-plan__features i { clip-path: var(--fe-clip-s); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(var(--fe-accent-rgb), .4); }
.fe-compare thead th { font-family: var(--fe-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; background: rgba(var(--fe-accent-rgb), .07); }
.fe-compare tbody th { background: var(--fe-surface); }

/* ---------- testimonials ---------- */
.fe-quote__mark { color: var(--fe-accent); opacity: .3; }
.fe-quote footer img { clip-path: var(--fe-clip-s); border-radius: 0; box-shadow: 0 0 0 1px rgba(var(--fe-accent-rgb), .45); }
.fe-quote footer strong { letter-spacing: .02em; }

/* ---------- FAQ ---------- */
.fe-faq__list { counter-reset: fe-q; }
.fe-acc summary::before { counter-increment: fe-q; content: counter(fe-q, decimal-leading-zero); flex: none; margin-right: -6px; color: var(--fe-accent); font: 600 12px/1 var(--fe-mono); letter-spacing: .12em; }
.fe-acc summary { justify-content: flex-start; }
.fe-acc summary span { flex: 1; }
.fe-acc summary i { clip-path: var(--fe-clip-s); border-radius: 0; }
body.fe-site .fe-acc[open] { --fe-ring: .85; }
.fe-chipbtn { clip-path: var(--fe-clip-s); border-radius: 0; font-family: var(--fe-mono); font-size: 12.5px; letter-spacing: .08em; background: rgba(var(--fe-bg-rgb), .5); }
.fe-chipbtn.is-active { box-shadow: inset 0 0 16px rgba(255, 255, 255, .2); }
.fe-search input { background: rgba(var(--fe-bg-rgb), .6); border-radius: 0; font-family: var(--fe-mono); font-size: 14.5px; }
.fe-search input:focus { box-shadow: 0 0 0 1px var(--fe-accent), 0 0 26px rgba(var(--fe-accent-rgb), .25); border-color: var(--fe-accent); }

/* ---------- call to action ---------- */
.fe-cta { --fe-b: calc(var(--fe-brk) * 2); --fe-ring: 1; --hud-ring: conic-gradient(from var(--fe-ang), rgba(var(--fe-accent-rgb), .95), rgba(var(--fe-from-rgb), .2) 25%, rgba(var(--fe-to-rgb), .95) 50%, rgba(var(--fe-from-rgb), .2) 75%, rgba(var(--fe-accent-rgb), .95)); border: 1px solid transparent; background: linear-gradient(var(--fe-accent), var(--fe-accent)) 0 0 / var(--fe-b) 2px no-repeat border-box, linear-gradient(var(--fe-accent), var(--fe-accent)) 0 0 / 2px var(--fe-b) no-repeat border-box, linear-gradient(var(--fe-accent), var(--fe-accent)) 100% 100% / var(--fe-b) 2px no-repeat border-box, linear-gradient(var(--fe-accent), var(--fe-accent)) 100% 100% / 2px var(--fe-b) no-repeat border-box, linear-gradient(135deg, rgba(var(--fe-from-rgb), .4), rgba(var(--fe-to-rgb), .16)) padding-box, var(--fe-cta-image, none) center / cover no-repeat padding-box, linear-gradient(var(--fe-surface), var(--fe-surface)) padding-box, var(--hud-ring) border-box; }
.fe-cta__chips { font-family: var(--fe-mono); font-size: 13px; }

/* ---------- inner page banners ---------- */
.fe-pagehero { border-bottom: 1px solid rgba(var(--fe-accent-rgb), .14); }
.fe-pagehero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--fe-accent-rgb), .8), transparent); }
.fe-crumbs { font-family: var(--fe-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.fe-pagehero__title { filter: drop-shadow(0 0 28px rgba(var(--fe-from-rgb), .25)); }
.fe-pagehero__meta { clip-path: var(--fe-clip-s); font-family: var(--fe-mono); box-shadow: inset 2px 0 0 var(--fe-accent); border: 0; }

/* ---------- legal documents ---------- */
.fe-toc__title { font-family: var(--fe-mono); color: var(--fe-accent); }
.fe-toc a span, .fe-legal__sec h2 span { font-family: var(--fe-mono); }
.fe-site .fe-toc a.is-active { box-shadow: inset 0 0 22px rgba(var(--fe-accent-rgb), .12); }

/* ---------- forms ---------- */
.fe-field label { font-family: var(--fe-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fe-accent); }
.fe-field input, .fe-field select, .fe-field textarea { background-color: rgba(var(--fe-bg-rgb), .75); border-radius: 0; border-color: rgba(var(--fe-accent-rgb), .22); }
.fe-field input:focus, .fe-field select:focus, .fe-field textarea:focus { border-color: var(--fe-accent); box-shadow: 0 0 0 1px var(--fe-accent), 0 0 26px rgba(var(--fe-accent-rgb), .22); }
.fe-form__status { clip-path: var(--fe-clip-s); }
.fe-map iframe { border-color: rgba(var(--fe-accent-rgb), .3); }

/* ---------- footer ---------- */
.fe-footer { background: radial-gradient(900px 300px at 50% 0, rgba(var(--fe-from-rgb), .16), transparent 70%), linear-gradient(180deg, rgba(var(--fe-bg-rgb), 0), rgba(var(--fe-bg-rgb), .97) 14%), var(--fe-bg); border-top-color: rgba(var(--fe-accent-rgb), .12); }
.fe-footer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--fe-accent-rgb), .045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fe-accent-rgb), .045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.fe-footer > .fe-container { position: relative; z-index: 1; }
.fe-footer__title { font-family: var(--fe-mono); color: var(--fe-accent); letter-spacing: .22em; }
.fe-footer__risk { clip-path: var(--fe-clip-s); }
.fe-site .fe-social a { clip-path: var(--fe-clip-s); border-radius: 0; background: rgba(var(--fe-bg-rgb), .5); border-color: rgba(var(--fe-accent-rgb), .3); }
.fe-footer__copy { font-family: var(--fe-mono); font-size: 12.5px; letter-spacing: .04em; }
.fe-totop { clip-path: var(--fe-clip-s); border-radius: 0; box-shadow: none; }

/* ---------- phone menu ---------- */
.fe-burger, .fe-drawer__close { border-color: rgba(var(--fe-accent-rgb), .35); background: rgba(var(--fe-bg-rgb), .55); }
.fe-drawer { background: radial-gradient(420px 260px at 100% 0, rgba(var(--fe-from-rgb), .25), transparent 70%), linear-gradient(180deg, var(--fe-surface-2) 0%, var(--fe-surface) 60%, var(--fe-bg) 100%); border-left-color: rgba(var(--fe-accent-rgb), .3); }
.fe-site .fe-drawer__nav a { letter-spacing: .04em; }

/* ---------- 404 ---------- */
.fe-notfound { position: relative; isolation: isolate; overflow: hidden; }
.fe-notfound::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(var(--fe-accent-rgb), .06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fe-accent-rgb), .06) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 8%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000 8%, transparent 70%); }
.fe-notfound__code { position: relative; filter: drop-shadow(0 0 40px rgba(var(--fe-from-rgb), .5)); }

/* ==========================================================================
   Motion — everything below only runs when Styling → "Glow & motion effects" is on
   ========================================================================== */
@keyframes fe-tape { to { transform: translateX(-25%); } }
@keyframes fe-sweep-x { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes fe-flow-x { from { background-position: 0 0; } to { background-position: 220% 0; } }
@keyframes fe-sheen { 0%, 62% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
@keyframes fe-btn-sheen { 0%, 68% { left: -45%; } 100% { left: 130%; } }
@keyframes fe-shimmer { from { background-position: 0 0; } to { background-position: 230% 0; } }
@keyframes fe-floor { from { transform: rotateX(66deg) translateY(0); } to { transform: rotateX(66deg) translateY(72px); } }
@keyframes fe-grid-drift { from { transform: translateY(0); } to { transform: translateY(48px); } }
@keyframes fe-ang { to { --fe-ang: 360deg; } }
@keyframes fe-rot { to { rotate: 360deg; } }
@keyframes fe-bus { from { background-position: 0 -140px; } to { background-position: 0 calc(100% + 140px); } }
@keyframes fe-node { 0%, 100% { box-shadow: 0 0 0 6px rgba(var(--fe-primary-rgb), .14), 0 0 26px var(--fe-glow); } 50% { box-shadow: 0 0 0 10px rgba(var(--fe-primary-rgb), .05), 0 0 44px var(--fe-glow); } }
@keyframes fe-glitch-a { 0%, 100% { clip-path: inset(0 0 0 0); translate: 0; } 10% { clip-path: inset(12% 0 70% 0); translate: -6px 0; } 20% { clip-path: inset(60% 0 8% 0); translate: 5px 0; } 30% { clip-path: inset(30% 0 40% 0); translate: -4px 0; } 40%, 90% { clip-path: inset(0 0 0 0); translate: 0; } }

body.fe-fx-motion .fe-topbar::after { animation: fe-sweep-x 5.5s linear infinite; }
body.fe-fx-motion .fe-header::after { background-size: 220% 100%; animation: fe-flow-x 9s linear infinite; }
body.fe-fx-motion .fe-logo__mark::after { animation: fe-sheen 5.5s ease-in-out infinite; }
body.fe-fx-motion a.fe-btn--primary::before, body.fe-fx-motion button.fe-btn--primary::before { animation: fe-btn-sheen 5.5s ease-in-out infinite; }
body.fe-fx-motion .fe-hl { animation: fe-shimmer 8s linear infinite; }
body.fe-fx-motion .fe-hero__floor i { animation: fe-floor 5.5s linear infinite; }
body.fe-fx-motion .fe-hero__bg::after { inset: -48px 0 0 0; animation: fe-grid-drift 14s linear infinite; }
body.fe-fx-motion .fe-slide.is-active .fe-slide__art::after { animation: fe-ang 7s linear infinite; }
body.fe-fx-motion .fe-slide.is-active .fe-slide__art::before { animation: fe-rot 80s linear infinite; }
body.fe-fx-motion .fe-hero { --px: 0; --py: 0; }
body.fe-fx-motion .fe-slide__art { translate: calc(var(--px) * -12px) calc(var(--py) * -9px); transition: translate .35s ease-out; }
body.fe-fx-motion .fe-fxcanvas--hero { translate: calc(var(--px) * 14px) calc(var(--py) * 9px); transition: opacity 1.4s ease, translate .5s ease-out; }
body.fe-fx-motion .ct-tape__track { animation: fe-tape 80s linear infinite; }
body.fe-fx-motion .fe-ticker::before { animation: fe-sweep-x 6.5s linear infinite; }
body.fe-fx-motion .fe-flow::after { animation: fe-bus 4.6s linear infinite; }
body.fe-fx-motion .fe-step__node { animation: fe-node 3.4s ease-in-out infinite; }
body.fe-fx-motion .fe-step:nth-child(2) .fe-step__node { animation-delay: .4s; }
body.fe-fx-motion .fe-step:nth-child(3) .fe-step__node { animation-delay: .8s; }
body.fe-fx-motion .fe-step:nth-child(4) .fe-step__node { animation-delay: 1.2s; }
body.fe-fx-motion .fe-step:nth-child(5) .fe-step__node { animation-delay: 1.6s; }
body.fe-fx-motion .fe-step:nth-child(6) .fe-step__node { animation-delay: 2s; }
body.fe-fx-motion .fe-step:nth-child(7) .fe-step__node { animation-delay: 2.4s; }
body.fe-fx-motion .fe-plan.is-featured, body.fe-fx-motion .fe-cta { animation: fe-ang 7s linear infinite; }
body.fe-fx-motion .fe-footer::before { background-size: 220% 100%; animation: fe-flow-x 10s linear infinite; }
body.fe-fx-motion .fe-pagehero::after { background-size: 220% 100%; animation: fe-flow-x 9s linear infinite; }
body.fe-fx-motion .fe-notfound__code { animation: fe-glitch-a 4.2s steps(1) infinite; }

/* ---------- reduced motion, small screens ---------- */
@media (prefers-reduced-motion: reduce) {
	.fe-hero__floor i, .fe-hero__bg::after, .fe-flow::after { animation: none !important; }
	.fe-slide__art { translate: none !important; }
	.ct-tape__track { animation: none !important; }
	.fe-topbar--prices .ct-tape__view { overflow-x: auto; }
	.fe-topbar--prices > * { transition: none; }
}
@media (max-width: 992px) {
	.fe-slide__art::before, .fe-slide__art::after { display: none; }
	.fe-hero__bg::before { background: linear-gradient(180deg, rgba(var(--fe-bg-rgb), .7), rgba(var(--fe-bg-rgb), .35) 60%, transparent); }
	.fe-fxcanvas--hero { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .8) 22%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .8) 22%, #000 80%, transparent 100%); opacity: .75; }
}
@media (max-width: 860px) {
	.fe-flow::after { left: 27px; transform: none; }
	.fe-step__node { margin: 4px 0 0 5px; }
}
@media (max-width: 640px) {
	.fe-js .fe-topbar--prices { height: 34px; }
	body.fe-site { --fe-brk: 10px; }
	.fe-hero__floor { height: 34%; }
	.fe-stats__grid li { min-height: 132px; padding: 22px 20px 62px; }
	html body.fe-site a.fe-btn, html body.fe-site button.fe-btn { padding: 15px 22px; }
}

/* ---------- the live chart inside the default banner picture ---------- */
/* It sits exactly over the chart window of hero-1.svg and moves with the picture (same float, same entrance). */
.fe-livepanel { position: absolute; left: 10.5%; top: 32%; width: 58.33%; height: 42.22%; clip-path: polygon(0 0, 100% 0, 100% 100%, 42% 100%, 42% 84.7%, 0 84.7%); z-index: 1; pointer-events: none; transform: scale(.94); opacity: 0; transition: transform 1s cubic-bezier(.22, .8, .3, 1) .15s, opacity .8s ease .15s; }
.fe-slide.is-active .fe-livepanel { transform: none; opacity: 1; animation: fe-float 7s ease-in-out 1.2s infinite; }
.fe-livepanel .fe-fxcanvas { transition: opacity .8s ease; }