);
}
/* ===================== SYFX AI CHAT ===================== */
const THREADS = [
['BTC chop + gold setup', true],
['ETH momentum scan', false],
['Hedge my portfolio', false],
['Weekly macro brief', false],
['Funding flush watch', false],
];
// scripted human <-> AI conversation (casual, real-time) — full flow:
// chop talk -> build strategy -> trigger -> approve -> execute -> result -> why -> small loss
const SCRIPT = [
{ role: 'user', text: "yo what's btc doing rn? feels choppy af 😅" },
{ role: 'ai', text: "honestly it's a mess lol. stuck between 64k and 66k all week, no clean trend. Sentinel's flagging heavy funding on Hyperliquid too. longs are paying just to stay in rn." },
{ role: 'user', text: "so basically everyone's long. smells like a trap" },
{ role: 'ai', text: "yeah pretty much. when funding gets that lopsided it usually flushes. if we lose 65k i'd rather be short than try to catch the knife 🔪" },
{ role: 'user', text: "ok forget btc for now. i actually wanted to play gold this week" },
{ role: 'ai', chip: 'scanned 6 live sources', text: "gold's the cleaner trade tbh. CPI drops thursday so expect a wick, but ETF flows are net positive and the Fed's sounding dovish. RSI tapped 33 at the london open. that's literally your rulebook trigger 👀" },
{ role: 'user', text: "ok let's build it. small size though, i don't trust this market" },
{ role: 'ai', text: "smart. here's what i'm locking in: long gold, 5x, 2% stop, target +5.5%, hard cap $250 risk. compiling it into your ZK-Rulebook now:", card: 'rulebook' },
{ role: 'ai', text: "locked 🔒 the Sentinel watches for the exact trigger and pings you before anything fires. you're always the one who approves." },
{ role: 'user', text: "perfect. ping me when it hits" },
{ role: 'ai', chip: 'trigger detected · 1h', text: "ok we're live 🚨 RSI just printed 33 again at the london open. all three proofs are passing. want me to send it?", card: 'advisory' },
{ role: 'user', text: "send it 🚀" },
{ role: 'ai', text: "executing through your vault 🔐 ... filled at 2,401.0. sit tight, i'll watch it for you." },
{ role: 'ai', text: "boom 💚 just closed at target. here's the receipt:", card: 'win' },
{ role: 'user', text: "LETS GOOO 🔥 ok but why'd you pick gold over the btc short?" },
{ role: 'ai', text: "couple reasons. btc was a coin-flip: pure chop with trap-y funding, no real edge. gold actually had one: a clean RSI reset, macro tailwind from ETF inflows + a dovish fed, and a tight invalidation i could define. higher conviction, smaller risk. i only fire when Source, Inference and Adherence all prove out. btc never gave me that." },
{ role: 'user', text: "makes sense. didn't we take a small L earlier too?" },
{ role: 'ai', text: "yeah, the eth scalp tapped its stop. small by design though, that's the 2% cap doing its job:", card: 'loss' },
{ role: 'ai', text: "net we're still comfortably green for the week 📈 want me to scan for the next setup, or call it here?" },
];
function TypingDots() {
return (
);
}
function ChatView() {
const [msgs, setMsgs] = useState([]);
const [typing, setTyping] = useState(false);
const [draft, setDraft] = useState('');
const [live, setLive] = useState(false);
const convRef = useRef(null);
const inputRef = useRef(null);
const startedRef = useRef(false);
const aliveRef = useRef(false);
// auto-scroll to newest — but only if the user is already near the bottom,
// so they can freely scroll up to re-read earlier messages
useEffect(() => {
const c = convRef.current;
if (!c) return;
const nearBottom = c.scrollHeight - c.scrollTop - c.clientHeight < 160;
if (nearBottom) c.scrollTop = c.scrollHeight;
}, [msgs, typing, draft]);
// play the scripted conversation, then hand control to the user.
// Resilient to React 18's dev double-invoke: the sequence starts exactly once
// (startedRef) and survives the benign unmount/remount because aliveRef is
// restored to true on the second mount before the loop's first check fires.
useEffect(() => {
aliveRef.current = true;
if (startedRef.current) return () => { aliveRef.current = false; };
startedRef.current = true;
const wait = ms => new Promise(r => setTimeout(r, ms));
async function typeInto(text) {
for (let i = 1; i <= text.length; i++) {
if (!aliveRef.current) return false;
setDraft(text.slice(0, i));
await wait(14 + Math.random() * 30);
}
await wait(240);
return true;
}
async function run() {
await wait(550);
for (const step of SCRIPT) {
if (!aliveRef.current) return;
if (step.role === 'user') {
await typeInto(step.text);
if (!aliveRef.current) return;
setDraft('');
setMsgs(m => [...m, { role: 'user', text: step.text }]);
await wait(420);
} else {
setTyping(true);
await wait(850 + Math.random() * 600);
if (!aliveRef.current) return;
setTyping(false);
setMsgs(m => [...m, { role: 'ai', text: step.text, chip: step.chip, card: step.card }]);
await wait(step.card ? 850 : 600);
}
}
if (aliveRef.current) setLive(true);
}
run();
return () => { aliveRef.current = false; };
}, []);
function send() {
const t = draft.trim();
if (!t || !live) return;
setMsgs(m => [...m, { role: 'user', text: t }]);
setDraft('');
setTyping(true);
setTimeout(() => {
setTyping(false);
setMsgs(m => [...m, { role: 'ai', text: "good call. let me pull that from the Sentinel and break it down for you 👇" }]);
}, 1150);
}
function renderCard(c) {
if (c === 'advisory') return ;
if (c === 'rulebook') return ;
if (c === 'win') return ;
if (c === 'loss') return ;
return null;
}
return (
);
}
/* ===== PROBLEM (PRD 6.3) ===== */
const PROBLEMS = [
['01', 'No explanation. No accountability.', 'Existing bots execute trades without ever telling you why. You trust an algorithm you did not write and cannot audit. And when it fails, the only answer you get is silence.'],
['02', 'Your money sits on their servers.', 'Most platforms hold your funds in centralized wallets they control. When they get hacked, go insolvent, or freeze withdrawals, your capital disappears with them.'],
['03', 'Parameters. Not intelligence.', 'Traditional bots force confusing technical settings, then never adapt. They do not learn, and they do not understand the nuance of your risk tolerance or psychology.'],
];
function ProblemSection() {
return (
THE PROBLEM
Most trading bots are black boxes that hold your money hostage.
They can't explain themselves. They make you give up custody. And when they lose your money, there's no record of what they actually did.
{PROBLEMS.map(([n, t, b]) => (
{n}.
{t}
{b}
))}
);
}
/* shared scripted-playback hook (React-18 double-invoke safe) */
function usePlayback(script) {
const [shown, setShown] = useState([]);
const [typing, setTyping] = useState(false);
const aliveRef = useRef(false);
const startedRef = useRef(false);
useEffect(() => {
aliveRef.current = true;
if (startedRef.current) return () => { aliveRef.current = false; };
startedRef.current = true;
const wait = ms => new Promise(r => setTimeout(r, ms));
(async () => {
while (aliveRef.current) {
setShown([]); setTyping(false);
await wait(700);
for (const s of script) {
if (!aliveRef.current) return;
const fromAI = s.role === 'ai' || s.who === 'bot';
if (fromAI) { setTyping(true); await wait(1100 + Math.random() * 700); if (!aliveRef.current) return; setTyping(false); }
else { await wait(650); }
setShown(x => [...x, s]);
// read pause scales with message length so longer messages stay up longer
const len = (s.text ? s.text.length : 40) + (s.card ? 90 : 0);
await wait(Math.min(4200, 1300 + len * 22));
}
await wait(11000);
}
})();
return () => { aliveRef.current = false; };
}, []);
return { shown, typing };
}
/* phone status bar + notch */
function PhoneChrome({ title }) {
return (
9:41
);
}
/* ===== SOLUTION (PRD 6.4) — points + execution flow inside a phone ===== */
const SOL_POINTS = [
[IChat, 'Intelligence you can talk to', 'Consult Syfx like a senior analyst who has read every report, chart and headline before you opened your mouth. You build strategy together, in plain conversation.'],
[IProof, 'Math before money moves', 'Before a single trade executes, Syfx runs a Triple-Layer Zero-Knowledge Proof that the data is real, the AI reasoned correctly, and your exact rules will be followed.'],
[ILock, 'Your funds. Your vault. Always.', 'Syfx is 100% non-custodial. Your capital sits in your personal smart-contract vault. Syfx never holds your money, never touches your keys, and can never drain your funds.'],
];
const FLOW = [
['1', 'You describe your intent', 'Plain English → Syfx AI'],
['2', 'The Sentinel scans', 'Real-time global data'],
['3', 'ZK-Rulebook compiled', 'Your strategy in math'],
['4', 'Triple ZK Proof runs', 'Three verifications'],
['5', 'Vault executes', 'Receipt anchored on 0G'],
];
function SolutionSection() {
return (
THE SOLUTION
Syfx is not a bot. It is a trading operating system.
{SOL_POINTS.map(([I, t, b]) => (
{t}
{b}
))}
Execution flowXAU/USD · $300 long
{FLOW.map(([n, t, s]) => (
{n}
{t}
{s}
))}
All proofs pass → Vault unlocks
Any proof fails → execution refused by code
);
}
/* ===== HOW IT WORKS (PRD 6.5) — animated Syfx-AI dashboard conversation ===== */
const HOW_SCRIPT = [
{ role: 'user', text: "yo what's gold looking like this week? been eyeing a long but the volatility's got me nervous 😅" },
{ role: 'ai', chip: 'scanned 6 live sources', text: "pulled the live read first. RSI tapped 33 at the london open, ETF flows are net-positive and the fed's sounding dovish. there's a clean setup here." },
{ role: 'user', text: "ok i'm in. keep it small tho, i don't trust this tape" },
{ role: 'ai', text: "smart. tight one: small size, 2% stop, +5.5% target. here's the play 👇", setup: true },
{ role: 'user', text: "why long and not just sit it out?" },
{ role: 'ai', text: "your rules only fire on a deep RSI reset and it printed 33. macro's a tailwind, not a headwind. higher conviction, capped risk. if it slips i'm out at −2%, no emotion." },
{ role: 'user', text: "perfect. send it 🚀" },
{ role: 'ai', text: "done: filled at 2,401.0 🎯 i'll babysit it and ping you the second anything changes." },
];
const HOW_THREADS = [
['Gold setup: this week', true],
['ETH momentum scan', false],
['Hedge my portfolio', false],
['BTC chop watch', false],
['Weekly macro brief', false],
];
function HowChat() {
const { shown, typing } = usePlayback(HOW_SCRIPT);
const convRef = useRef(null);
const stageRef = useRef(null);
const fitRef = useRef(null);
const dashRef = useRef(null);
const HOW_W = 920;
useEffect(() => { const c = convRef.current; if (c) c.scrollTop = c.scrollHeight; }, [shown, typing]);
useEffect(() => {
let lastW = -1, raf = 0;
function apply() {
const stage = stageRef.current, fit = fitRef.current, dash = dashRef.current;
if (!stage || !fit || !dash) return;
const avail = stage.clientWidth;
if (!avail || avail === lastW) return;
lastW = avail;
const scale = Math.max(0.2, Math.min(1.15, avail / HOW_W));
dash.style.transformOrigin = 'top left';
dash.style.transform = 'scale(' + scale + ')';
const dh = dash.offsetHeight;
fit.style.width = (HOW_W * scale) + 'px';
fit.style.height = (dh * scale) + 'px';
try { parent.postMessage({ type: 'syfx-h', h: document.body.scrollHeight }, '*'); } catch (e) {}
}
function schedule() { apply(); }
apply();
const timers = [60, 200, 500, 1000].map(ms => setTimeout(apply, ms));
window.addEventListener('resize', apply);
let ro = null;
if (typeof ResizeObserver !== 'undefined' && stageRef.current) {
ro = new ResizeObserver(apply); ro.observe(stageRef.current);
}
return () => {
timers.forEach(clearTimeout);
window.removeEventListener('resize', apply); if (ro) ro.disconnect();
};
}, []);
return (
From conversation to cryptographically verified execution.
Watch a real Syfx session: you talk, the Sentinel scans, your rulebook compiles, three proofs run, and only then does the vault move.
ADVISORY MODE
You stay in control. Always.
Before any trade fires, Syfx pings your Telegram with the full setup and its three passing proofs. Interrogate the AI right there. Ask WHY and get the complete breakdown.
Only after your green light does the vault unlock and execute. No surprise trades. No black box. Just a conversation that ends in math.
);
}
/* ===== FEATURES (PRD 6.6) — six cards ===== */
const FEATURES = [
[IBrain, 'Syfx AI 1.0', 'Conversational intelligence that explains its thesis, cites its sources, and learns your trading psychology permanently through Infinite Memory.'],
[ISentinel, 'The Sentinel', 'A relentless global data engine scanning social media, macro news, central-bank speeches and on-chain liquidity pools simultaneously, 24/7.'],
[IProof, 'Triple-Layer ZK Proof', 'Three independent cryptographic proofs verify every trade before execution. Math, not trust.'],
[ILock, 'Non-Custodial Vault', 'Your funds never leave your personal smart contract. Syfx cannot hold, move, or access your capital without a verified execution proof.'],
[IBolt, 'Sentinel Agents', 'Autonomous background agents deployed per strategy, hunting your exact setups across crypto and forex markets around the clock.'],
[ITrend, 'ZK Performance Card', 'Every trade generates a publicly verifiable performance record on the 0G Network. No fabricated PnL. No cherry-picked results. Only math.'],
];
function FeaturesSection() {
const railRef = useRef(null);
const [active, setActive] = useState(0);
const activeRef = useRef(0);
useEffect(() => {
const rail = railRef.current;
if (!rail) return;
const mq = window.matchMedia('(max-width: 640px)');
let timer = 0, idle = 0, paused = false, raf = 0;
const cards = () => Array.from(rail.children);
// gentle, smooth emphasis — centered card full, neighbors slightly smaller/dimmer.
// NO perspective/rotateY (that caused the page-flip lag).
function emphasize() {
if (!mq.matches) { cards().forEach(c => { c.style.transform = ''; c.style.opacity = ''; }); return; }
const mid = rail.scrollLeft + rail.clientWidth / 2;
let nearest = 0, best = Infinity;
cards().forEach((c, i) => {
const cc = c.offsetLeft + c.offsetWidth / 2;
const ad = Math.min(Math.abs(cc - mid) / rail.clientWidth, 1);
c.style.transform = 'scale(' + (1 - ad * 0.10) + ')';
c.style.opacity = String(1 - ad * 0.4);
if (Math.abs(cc - mid) < best) { best = Math.abs(cc - mid); nearest = i; }
});
if (nearest !== activeRef.current) { activeRef.current = nearest; setActive(nearest); }
}
function onScroll() { cancelAnimationFrame(raf); raf = requestAnimationFrame(emphasize); }
function bumpIdle() { paused = true; clearTimeout(idle); idle = setTimeout(() => { paused = false; }, 3500); }
function slideTo(i) {
const c = cards()[i]; if (!c) return;
rail.scrollTo({ left: c.offsetLeft - (rail.clientWidth - c.offsetWidth) / 2, behavior: 'smooth' });
}
function tick() {
if (!mq.matches || paused) return;
const next = (activeRef.current + 1) % FEATURES.length;
slideTo(next);
}
function startAuto() { clearInterval(timer); if (mq.matches) timer = setInterval(tick, 5000); }
function onMq() { emphasize(); startAuto(); }
rail.addEventListener('scroll', onScroll, { passive: true });
rail.addEventListener('pointerdown', bumpIdle, { passive: true });
rail.addEventListener('touchstart', bumpIdle, { passive: true });
rail.addEventListener('wheel', bumpIdle, { passive: true });
window.addEventListener('resize', emphasize);
if (mq.addEventListener) mq.addEventListener('change', onMq); else if (mq.addListener) mq.addListener(onMq);
emphasize(); startAuto();
const t0 = setTimeout(() => { emphasize(); startAuto(); }, 300);
rail._slideTo = slideTo;
return () => {
rail.removeEventListener('scroll', onScroll);
rail.removeEventListener('pointerdown', bumpIdle);
rail.removeEventListener('touchstart', bumpIdle);
rail.removeEventListener('wheel', bumpIdle);
window.removeEventListener('resize', emphasize);
if (mq.removeEventListener) mq.removeEventListener('change', onMq); else if (mq.removeListener) mq.removeListener(onMq);
clearInterval(timer); clearTimeout(idle); clearTimeout(t0); cancelAnimationFrame(raf);
};
}, []);
return (
FEATURES
Every feature built for one purpose: verified execution.
{FEATURES.map(([I, t, b]) => (
{t}
{b}
))}
{FEATURES.map((_, i) => (
);
}
/* ===== AUTONOMY SPECTRUM (Execution Mode) ===== */
const MODES = [
{
key: 'advisory', tab: 'Advisory · Co-pilot', icon: IBrain,
accent: '#F5A524', tint: 'rgba(245,165,36,0.12)', border: 'rgba(245,165,36,0.35)', glow: 'rgba(245,165,36,0.10)',
title: 'Advisory Mode: The Elite Co-pilot',
body: 'The AI acts as your senior research analyst. It scans the globe 24/7, finds a high-confidence setup, builds a reasoning summary, and pings you. It explains the "why" and waits for your Approve or Reject. You are the pilot; the AI is the radar.',
chips: ['One-tap approve / reject', 'Reasoning summary', 'Telegram pings'],
flow: [
['Sentinel finds a setup', 'Scans global data 24/7'],
['You get a ping', 'Reasoning summary on Telegram'],
['You approve or reject', 'Nothing executes without your call'],
],
},
{
key: 'auto', tab: 'Autonomous · Full auto', icon: IBolt,
accent: '#00E5A0', tint: 'rgba(0,229,160,0.12)', border: 'rgba(0,229,160,0.30)', glow: 'rgba(0,229,160,0.10)',
title: 'Autonomous Mode: The Full-Auto Engine',
body: 'You set the rulebook once; the AI runs it end-to-end. It hunts setups, runs the triple ZK proof, and executes the moment every proof passes. No ping, no wait. You stay in control through your rules and a live, verifiable receipt trail.',
chips: ['Hands-free execution', 'Rulebook-bound', 'ZK receipt per trade'],
flow: [
['Sentinel finds a setup', 'Matched against your rulebook'],
['Triple ZK proof runs', 'Source · Inference · Adherence'],
['Vault executes instantly', 'Permanent receipt anchored on 0G'],
],
},
];
function AutonomySpectrum() {
const [mode, setMode] = useState(0);
const m = MODES[mode];
const Ico = m.icon;
const stageRef = useRef(null);
const fitRef = useRef(null);
const cardRef = useRef(null);
const AUTO_W = 820;
useLayoutEffect(() => {
const stage = stageRef.current, fit = fitRef.current, card = cardRef.current;
if (!stage || !fit || !card) return;
let scale = 1, lastW = -1, lastH = -1;
function applyScale() {
const avail = stage.clientWidth;
if (avail <= 0 || Math.abs(avail - lastW) < 2) { applyHeight(); return; }
lastW = avail;
scale = Math.min(1, avail / AUTO_W);
card.style.transformOrigin = 'top left';
card.style.transform = 'scale(' + scale + ')';
fit.style.width = (AUTO_W * scale) + 'px';
applyHeight();
}
function applyHeight() {
const h = Math.round(card.offsetHeight * scale);
if (Math.abs(h - lastH) < 1) return;
lastH = h;
fit.style.height = h + 'px';
}
applyScale();
let hRaf = 0;
function onResize() { applyScale(); }
window.addEventListener('resize', onResize);
let ro = null, sro = null;
if (typeof ResizeObserver !== 'undefined') {
ro = new ResizeObserver(() => { cancelAnimationFrame(hRaf); hRaf = requestAnimationFrame(applyHeight); });
ro.observe(card);
sro = new ResizeObserver(applyScale); sro.observe(stage);
}
return () => {
window.removeEventListener('resize', onResize);
cancelAnimationFrame(hRaf);
if (ro) ro.disconnect(); if (sro) sro.disconnect();
};
}, [mode]);
return (
THE AUTONOMY SPECTRUM
You're never forced to choose between ease and control.
Meet Execution Mode: one master toggle in your dashboard. Run Syfx as a co-pilot that asks before it acts, or a full-auto engine that executes on its own. Flip it whenever you like; the proofs run either way.
{items.map(([t, n, logo]) => (
{logo ? : t}{n}
))}
);
return (
{label}
{row(false)}
{row(true)}
);
}
function MarketsSection() {
return (
MARKETS & INFRASTRUCTURE
One intelligence. Every market.
Additional markets and chains added continuously.
);
}
/* ===== CREDIBILITY — "don't trust, verify": technology trust signals ===== */
const CREDS = [
[IGithub, 'Open-source & auditable', 'Every smart contract and ZK circuit is public. Read the code, replay the proofs, and confirm the math yourself. No blind trust required.'],
[IGlobe, 'Anchored on 0G Network', 'Every trade leaves a permanent ZK receipt on 0G Network, so the record of what the AI did (and why) can never be edited or erased.'],
[IProof, 'Built on RISC Zero zkVM', 'Proofs run on RISC Zero, the industry-leading zero-knowledge virtual machine trusted by serious ZK infrastructure worldwide.'],
[ILock, 'Non-custodial by architecture', 'Your capital lives in your own smart-contract vault. Syfx can never hold, move, or freeze your funds. It is mathematically prevented from doing so.'],
];
function CredibilitySection() {
return (
VERIFIABLE BY DESIGN
Don't trust. Verify.
Syfx is engineered so you never have to take our word for anything. Every claim on this page is backed by code and cryptography you can inspect.
{CREDS.map(([I, t, b]) => (
{t}
{b}
))}
Every trade comes with mathematical proof that the data was real, the AI reasoned correctly, and your rules were followed. Checkable by anyone, owned by you.
);
}
/* ===== FAQ ===== */
const FAQS = [
['What is Syfx?', "Syfx is a verifiable AI operating system for traders. You build strategy in plain conversation, and every trade is backed by a triple-layer zero-knowledge proof before a single dollar moves, so you can verify the AI's work instead of trusting it blindly."],
['Is Syfx custodial? Can it touch my funds?', 'No. Syfx is 100% non-custodial by architecture. Your capital lives in your own smart-contract vault. Syfx can never hold, move, or freeze your funds without a verified execution proof.'],
['What do early-access members get?', 'Founding members get a permanent badge on their profile, Elite tier free for 30 days, and a direct line to the team. Early access is limited. Joining the waitlist locks in your spot.'],
['Which markets and chains are supported?', 'Crypto spot and perps across Ethereum, Base, Arbitrum, Hyperliquid and Solana, plus forex and RWAs via Ostium and OANDA. Proofs are anchored on the 0G Network, with more markets added continuously.'],
['How do the ZK proofs actually work?', 'Before execution, Syfx runs three independent cryptographic proofs: that the market data was real, the AI reasoned correctly, and your exact rules were followed. If any one fails, the vault physically refuses to execute. Enforced by code, not policy.'],
];
function FAQSection() {
const [open, setOpen] = useState(0);
return (
Join the early-access list for the verifiable AI trading OS.
Product updates, Syfx Points announcements, and rollout news, straight to your inbox. Founding members get Elite tier free for 30 days and a permanent profile badge.
Founding MemberElite: free 30 daysDirect team line
{error &&
{error}
}
Join 4,200+ traders on the waitlist. No spam. Unsubscribe anytime.
) : (
{alreadyJoined ? "You're already on the list." : "You're on the list."}
{alreadyJoined ? "We'll be in touch." : "Welcome to Syfx. We'll email you the moment early access opens."}
)}
);
}
/* ===== FOOTER ===== */
function Footer() {
return (
);
}
function HowItWorksPage() {
return (
Live Product Demo
See Syfx in action.
A full walkthrough of the real workspace: trade execution, the Syfx AI conversation, ZK proofs, and markets, all in one interactive dashboard.
THE CONVERSATION
From plain English to a cryptographically verified trade.
);
}
function Page() {
return (
);
}
function initReveal() {
try {
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var els = document.querySelectorAll('.sec, .strip, .wl');
if (reduce || !('IntersectionObserver' in window)) { els.forEach(function(e){ e.classList.add('in'); }); return; }
// alternate entrance direction/axis per section for a varied, modern feel
var variants = ['rv-up', 'rv-left', 'rv-zoom', 'rv-right', 'rv-tiltL', 'rv-up', 'rv-tiltR', 'rv-left'];
els.forEach(function(e, i){ e.classList.add('reveal', variants[i % variants.length]); });
var io = new IntersectionObserver(function(ents){
ents.forEach(function(en){ if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } });
}, { threshold: 0.1, rootMargin: '0px 0px -8% 0px' });
els.forEach(function(e){ io.observe(e); });
} catch (e) {}
}
function mount() {
const NS = window.SyfxDesignSystem_5de6e8;
if (!NS || !NS.Button) { return requestAnimationFrame(mount); }
Button = NS.Button; Badge = NS.Badge;
const el = document.getElementById('app');
const page = document.body.dataset.page;
if (!window.__syfxRoot) window.__syfxRoot = ReactDOM.createRoot(el);
window.__syfxRoot.render(page === 'how-it-works' ? : );
setTimeout(initReveal, 450);
// dismiss splash first, THEN reveal app — no crossfade/overlap window where both are visible
setTimeout(() => {
const sp = document.getElementById('splash');
if (sp) {
sp.classList.add('hide');
setTimeout(() => {
if (sp.parentNode) sp.parentNode.removeChild(sp);
el.classList.add('ready');
}, 650);
} else {
el.classList.add('ready');
}
}, 1100);
}
mount();