/* Angainor Marketing landing (UI kit). Composes the design-system primitives from window.AngainorDesignSystem_56fc16 over warm, editorial layout. Exposed as window.AngainorMarketing.Landing */ const NS = window.AngainorDesignSystem_56fc16 || {}; const { Button, Badge, Tag, Toast, Card, LedgerRow, ProvenanceChip, KeyValue, Avatar } = NS; /* one-time keyframes for ambient float + entrance (upsert so hot-reloads pick up new CSS) */ (function injectMk(){ if (typeof document === 'undefined') return; let s = document.getElementById('mk-css'); if (!s) { s = document.createElement('style'); s.id = 'mk-css'; document.head.appendChild(s); } s.textContent = ` .mk{ --nav-h:72px; } .mk a.nlink{ color:var(--text-secondary); font-size:var(--text-sm); font-weight:var(--fw-medium); letter-spacing:var(--ls-snug); text-decoration:none; transition:color var(--dur-fast) var(--ease-standard); } .mk a.nlink:hover{ color:var(--text-primary); } .mk-floats{ position:relative; } .mk-float{ position:absolute; will-change:transform; } @keyframes mk-bob-a{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-22px) rotate(-1.4deg) } } @keyframes mk-bob-b{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(18px) rotate(1deg) } } @keyframes mk-bob-c{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-14px) rotate(1.6deg) } } .mk-bob-a{ animation:mk-bob-a 8s var(--ease-in-out) infinite; } .mk-bob-b{ animation:mk-bob-b 10s var(--ease-in-out) infinite; } .mk-bob-c{ animation:mk-bob-c 7s var(--ease-in-out) infinite; } @keyframes mk-rise{ from{ transform:translateY(44px) } to{ transform:translateY(0) } } .mk-rise{ animation:mk-rise 0.9s var(--ease-out) both; } /* scroll reveals — hidden state only exists under .mk-anim (added by JS), so no-JS/print/export always show content */ @media (prefers-reduced-motion: no-preference){ .mk-anim .mk-reveal{ opacity:0; transform:translateY(56px); transition:opacity .95s var(--ease-out), transform .95s var(--ease-out); transition-delay:var(--rv-delay,0ms); will-change:opacity,transform; } .mk-anim .mk-reveal--left{ transform:translateX(-72px); } .mk-anim .mk-reveal--right{ transform:translateX(72px); } .mk-anim .mk-reveal--scale{ transform:scale(.9) translateY(28px); } .mk-anim .mk-reveal.is-in{ opacity:1; transform:none; } } @media print{ .mk-reveal{ opacity:1 !important; transform:none !important; } .mk-word{ opacity:1 !important; } } @media (max-width:1100px){ .mk-float.mk-bob-c{ display:none; } } .mk-static .mk-bob-a,.mk-static .mk-bob-b,.mk-static .mk-bob-c{ animation:none !important; } @media (prefers-reduced-motion: reduce){ .mk-bob-a,.mk-bob-b,.mk-bob-c,.mk-rise{ animation:none !important; } } .mk-nav--scrolled{ background:rgba(248,243,234,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle); } /* ========================================================== Masthead motion (Floema-style): staggered load reveals with long expo-out easing, wordmark rises out of a clip mask, the mark rises from the fold, tagline fades up last. On scroll the mark lags the page (parallax) via the independent CSS translate property so it composes with the animations. ========================================================== */ html{ scroll-behavior:smooth; } #how-it-works{ scroll-margin-top: calc(var(--nav-h) + 8px); } .mk-mast{ height: min(calc(100vh - var(--nav-h)), 920px); } @keyframes mk-mast-reveal{ from{ transform:translateY(105%) } to{ transform:none } } @keyframes mk-mast-rise{ from{ transform:translateY(14vh) } to{ transform:none } } @keyframes mk-fade-up{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } } @keyframes mk-arrow-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } } .mk-mast-logo{ display:block; width:100%; animation: mk-mast-reveal 1.2s cubic-bezier(0.19,1,0.22,1) .1s both; } .mk-mast-mark{ animation: mk-mast-rise 1.35s cubic-bezier(0.19,1,0.22,1) .22s both; } .mk-mast-mark-svg{ display:block; width:100%; height:auto; } .mk-mast-tag{ animation: mk-fade-up .9s var(--ease-out) .62s both; } .mk-mast-tag .ph-arrow-down{ display:inline-block; animation: mk-arrow-bob 2.4s var(--ease-in-out) 2s infinite; } @media (prefers-reduced-motion: reduce){ .mk-mast-logo, .mk-mast-mark, .mk-mast-tag, .mk-mast-tag .ph-arrow-down{ animation:none !important; } } .mk-split > *, .mk-grid-3 > * { min-width: 0; } .mk img { max-width: 100%; } /* --- tablet: 3-up becomes 2-up --- */ @media (max-width: 1024px){ .mk-grid-3{ grid-template-columns: repeat(2, 1fr) !important; } } /* --- narrower desktops: bias the mark right so it clears the tagline --- */ @media (max-width: 1200px) and (min-width: 901px){ .mk-mast-mark{ left: 24% !important; width: 52vw !important; } } /* --- narrow: stack everything --- */ @media (max-width: 900px){ .mk-split{ grid-template-columns: 1fr !important; gap: 36px !important; } /* the masthead is the whole story on mobile: no hero, no CTAs */ .mk-hero{ display:none !important; } .mk-mast{ height:auto; min-height:calc(100vh - var(--nav-h)); min-height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; /* one seamless wash on mobile: the desktop glow's ellipse edges read as smudges on narrow screens */ background: linear-gradient(180deg, #F8F3EA 0%, #F8F3EA 40%, #F4E3CC 74%, #ECD2AC 100%) !important; } /* iOS compositing: the grain's multiply overlay and the mark's filter shadow each force layers that break blending over the gradient, leaving pale rectangles. Strip both on mobile. */ .mk-mast.ang-grain::after{ display:none !important; } .mk-mast-mark{ filter:none !important; } /* Floema mobile composition: wordmark up top with clear side margins, the mark's tip just crossing the middle 'a', tagline pinned to the bottom left. The mark is static on mobile. */ .mk-mast-logo-wrap{ position:static !important; width:74vw !important; margin:8vh auto 0 !important; } .mk-mast-mark{ position:static !important; width:min(82vw, 560px) !important; margin:calc(-5vw - 9px) auto 56px !important; animation:none !important; } .mk-mast-tag{ position:static !important; margin:auto var(--gutter) 40px !important; } /* horizontal reveal offsets would push past the viewport edge */ .mk-anim .mk-reveal--left, .mk-anim .mk-reveal--right{ transform: translateY(44px); } } /* --- short phone viewports (browser bars): compact the masthead so the tagline always lands inside the first screen --- */ @media (max-width: 900px) and (max-height: 700px){ .mk-mast-logo-wrap{ margin-top: 5vh !important; } .mk-mast-mark{ width: min(72vw, 400px) !important; margin-bottom: 44px !important; } } /* --- phone: single column, roomier editorial rhythm --- */ @media (max-width: 640px){ .mk{ --gutter: 24px; --section-y: 96px; } .mk-grid-3{ grid-template-columns: 1fr !important; gap: 34px !important; } /* dark status-quo items read as a ruled list */ .mk-grid-sq > * + *{ border-top: 1px solid var(--border-on-dark); padding-top: 30px; } } @media (max-width: 430px){ .mk-kv2{ grid-template-columns: 1fr !important; } /* stacked full-width buttons */ .mk-hero-btns, .mk-cta-btns{ flex-direction: column; align-items: stretch; } .mk-hero-btns .ang-btn, .mk-cta-btns .ang-btn{ width: 100%; } } `; })(); const GUTTER = { paddingLeft: 'var(--gutter)', paddingRight: 'var(--gutter)' }; const CONTAIN = { maxWidth: 'var(--maxw)', marginLeft: 'auto', marginRight: 'auto', ...GUTTER }; function Eyebrow({ children, onDark }) { return
{children}
; } /* ---------------- Masthead (giant wordmark + stone logomark) ---------------- */ function Masthead() { return (
Angainor

Eliminating data reconstruction in private funds

Here's how we do it
); } /* ---------------- Nav ---------------- */ function Nav() { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const root = document.querySelector('.mk-scroll') || window; const el = document.querySelector('.mk-scroll'); const onScroll = () => setScrolled((el ? el.scrollTop : window.scrollY) > 12); root.addEventListener('scroll', onScroll); onScroll(); return () => root.removeEventListener('scroll', onScroll); }, []); return (
); } /* ---------------- Hero ---------------- */ function Hero() { return (

Purpose-built infrastructure for private fund operations.

Angainor is redefining fund accounting and administration using a blockchain-based system of record.

); } /* ---------------- Scroll word-reveal headline (adapted from TextRevealByWord; native scroll math, no framer-motion) ---------------- */ function RevealHeadline({ segments, style }) { const ref = React.useRef(null); const [p, setP] = React.useState(0); React.useEffect(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setP(1); return; } let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight; setP(Math.min(1, Math.max(0, (vh * 0.92 - r.top) / (vh * 0.5)))); }); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); const words = []; segments.forEach((seg, si) => seg.text.split(' ').forEach((w) => words.push({ w, si }))); const N = words.length; return (

{words.map((item, i) => { const o = Math.min(1, Math.max(0, p * N - i)); return {item.w}; })}

); } /* ---------------- Status quo (dark) ---------------- */ function StatusQuo() { return (
The status quo
{[ ['envelope-simple', 'Email-driven approvals', 'Decisions live in inboxes. Determining the fund\u2019s current state with confidence is slow; tracing how it changed is harder still.'], ['table', 'Spreadsheet reconciliation', 'Each party keeps separate records and reconciles them later. Routine processes become tedious data-reconstruction exercises.'], ['copy-simple', 'Shadow systems', 'Outsource to an administrator and still run a parallel system to verify the work, or build a large in-house team amid a talent shortage.'], ].map(([icon, t, d], i) => (

{t}

{d}

))}
); } /* ---------------- How it works ---------------- */ function HowItWorks() { const steps = [ ['01', 'scroll', 'Encode', 'Governing documents and their provisions, including side letters and negotiated exceptions, become executable logic in a permissioned ledger.'], ['02', 'lightning', 'Execute', 'Every downstream event is processed against that logic at the moment of execution. One verified state, shared by GP, LPs, counsel, and auditors.'], ['03', 'seal-check', 'Verify', 'Proof-of-control records not just what happened, but how: which provision applied, what data was used, who had permission, and what approvals occurred.'], ]; return (
How it works
{steps.map(([n, icon, t, d], i) => (
{n}

{t}

{d}

 ))}
); } /* ---------------- Proof of control (dark, cinematic) ---------------- */ function ProofOfControl() { return (
Proof of control

Angainor supplies independent, verifiable evidence of what a system actually did: on what authority, against which rule. That verified ground truth is what lets AI and automation operate on fund data without the reconciliation gaps that stall most pilots today.

LE-2026-008142
); } /* ---------------- CTA ---------------- */ function CTA() { return (

Modernize the layer beneath your fund.

Without forcing you to abandon existing systems, change fund economics, or alter capital movement.

); } /* ---------------- Footer ---------------- */ function Footer() { return (
Angainor

The governed operating substrate beneath the fund: a single verified state every party can rely on.

© 2026 Angainor, Inc. All rights reserved.
); } function Landing() { React.useEffect(() => { const root = document.querySelector('.mk'); if (!root || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; root.classList.add('mk-anim'); const io = new IntersectionObserver((es) => { es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } }); }, { threshold: 0.16, rootMargin: '0px 0px -6% 0px' }); root.querySelectorAll('.mk-reveal').forEach((el) => io.observe(el)); // hero parallax — uses the independent `translate` property so it composes with the bob animation's transform const layers = [[root.querySelector('.mk-mast-mark'), 0.24], [root.querySelector('.mk-mast-logo-wrap'), 0.10]].filter((l) => l[0]); let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; if (root.closest('.mk-static') || window.innerWidth <= 900) { layers.forEach((l) => { l[0].style.translate = ''; }); return; } const y = window.scrollY; layers.forEach((l) => { l[0].style.translate = '0 ' + (y * l[1]).toFixed(1) + 'px'; }); }); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener('scroll', onScroll); io.disconnect(); if (raf) cancelAnimationFrame(raf); }; }, []); return (
); } window.AngainorMarketing = { Landing };