> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fyatu.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Fyatu Developer Docs

> API references, integration guides, and webhook documentation. Select the platform you're building on.

<style>
  {`
    :root { --fyatu-title-color: #000000; }
    html.dark { --fyatu-title-color: #ffffff; }
    html.dark  .fyatu-home { color: #ffffff; }
    html:not(.dark) .fyatu-home { color: #000000; }
    html.dark  .fyatu-card { border-color: rgba(255,255,255,0.25) !important; }
    html:not(.dark) .fyatu-card { border-color: rgba(0,0,0,0.25) !important; }
    `}
</style>

<div className="fyatu-home">
  <div style={{ padding: '64px 32px 80px', maxWidth: 1100, margin: '0 auto' }}>
    <div style={{ textAlign: 'center', marginBottom: 48 }}>
      <h1 style={{ fontSize: 42, fontWeight: 900, marginBottom: 12, letterSpacing: '-0.02em', lineHeight: 1.15, color: 'var(--fyatu-title-color)' }}>
        Fyatu Developer Docs
      </h1>

      <p style={{ fontSize: 17, lineHeight: 1.65, margin: 0 }}>
        API references, integration guides, and webhook documentation.<br />
        Select the platform you're building on.
      </p>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
      <a href="/v3/documentation/introduction" style={{ textDecoration: 'none', color: 'inherit' }}>
        <div className="fyatu-card" style={{ border: '1px solid', borderRadius: 16, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column', transition: 'border-color 0.15s, box-shadow 0.15s', boxSizing: 'border-box' }} onMouseEnter={e => { e.currentTarget.style.borderColor = '#721D5D'; e.currentTarget.style.boxShadow = '0 0 0 1px #721D5D'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = ''; e.currentTarget.style.boxShadow = 'none'; }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
            <div style={{ width: 48, height: 48, borderRadius: 12, flexShrink: 0, background: 'linear-gradient(135deg, #721D5D 0%, #3d0c2e 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />

                <polyline points="9 22 9 12 15 12 15 22" />
              </svg>
            </div>

            <div>
              <div style={{ fontWeight: 700, fontSize: 18, lineHeight: 1.2 }}>Fyatu Business</div>

              <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
                <span style={{ fontSize: 11, fontWeight: 600, color: '#16a34a', background: 'rgba(22,163,74,0.12)', padding: '2px 8px', borderRadius: 20, display: 'inline-block' }}>V3 · Stable</span>
                <span style={{ fontSize: 11, fontWeight: 600, color: '#16a34a', background: 'rgba(22,163,74,0.12)', padding: '2px 8px', borderRadius: 20, display: 'inline-block' }}>Basic</span>
              </div>
            </div>
          </div>

          <p style={{ fontSize: 14, lineHeight: 1.65, margin: '0 0 20px' }}>
            For early-stage startups getting started with card issuing. Issue virtual prepaid Visa and Mastercard cards, accept payments from Fyatu users, and send payouts — all through a single REST API.
          </p>

          <img src="https://mintcdn.com/fyatu/JLzio7OEjUi5QogV/images/caas/business-dashboard.png?fit=max&auto=format&n=JLzio7OEjUi5QogV&q=85&s=611f860742ee4ab9fc35c77c6a3fe2e1" alt="Fyatu Business dashboard" style={{ width: '100%', borderRadius: 10, marginBottom: 20, display: 'block' }} width="1904" height="955" data-path="images/caas/business-dashboard.png" />

          <div style={{ fontSize: 13, display: 'flex', alignItems: 'flex-start', gap: 8 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginTop: 1, flexShrink: 0, color: '#16a34a' }}>
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />

              <polyline points="22 4 12 14.01 9 11.01" />
            </svg>

            <span>Self-service — upgrade your Fyatu Individual account to Business from the dashboard. No approval required.</span>
          </div>
        </div>
      </a>

      <a href="/v3.20/documentation/introduction" style={{ textDecoration: 'none', color: 'inherit' }}>
        <div className="fyatu-card" style={{ border: '1px solid', borderRadius: 16, padding: '36px 32px', height: '100%', display: 'flex', flexDirection: 'column', transition: 'border-color 0.15s, box-shadow 0.15s', boxSizing: 'border-box' }} onMouseEnter={e => { e.currentTarget.style.borderColor = '#721D5D'; e.currentTarget.style.boxShadow = '0 0 0 1px #721D5D'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = ''; e.currentTarget.style.boxShadow = 'none'; }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
            <div style={{ width: 48, height: 48, borderRadius: 12, flexShrink: 0, background: 'linear-gradient(135deg, #721D5D 0%, #3d0c2e 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polygon points="12 2 2 7 12 12 22 7 12 2" />

                <polyline points="2 17 12 22 22 17" />

                <polyline points="2 12 12 17 22 12" />
              </svg>
            </div>

            <div>
              <div style={{ fontWeight: 700, fontSize: 18, lineHeight: 1.2 }}>Fyatu CaaS</div>

              <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
                <span style={{ fontSize: 11, fontWeight: 600, color: '#a855f7', background: 'rgba(168,85,247,0.12)', padding: '2px 8px', borderRadius: 20, display: 'inline-block' }}>V3.20 · CaaS</span>
                <span style={{ fontSize: 11, fontWeight: 600, color: '#a855f7', background: 'rgba(168,85,247,0.12)', padding: '2px 8px', borderRadius: 20, display: 'inline-block' }}>Advanced</span>
              </div>
            </div>
          </div>

          <p style={{ fontSize: 14, lineHeight: 1.65, margin: '0 0 20px' }}>
            For companies managing card programs at scale. Run your own branded card program — create products, manage cardholders, issue cards, and monitor spending in real time.
          </p>

          <img src="https://mintcdn.com/fyatu/JLzio7OEjUi5QogV/images/caas/caas-dashboard.png?fit=max&auto=format&n=JLzio7OEjUi5QogV&q=85&s=9b74f428cbf0ca95f644dccaae4bf36b" alt="Fyatu CaaS portal dashboard" style={{ width: '100%', borderRadius: 10, marginBottom: 20, display: 'block' }} width="1919" height="956" data-path="images/caas/caas-dashboard.png" />

          <div style={{ fontSize: 13, display: 'flex', alignItems: 'flex-start', gap: 8 }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginTop: 1, flexShrink: 0, color: '#a855f7' }}>
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />

              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
            </svg>

            <span>By invitation — contact the Fyatu sales team, sign an agreement, and pay the program setup fee to get access.</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>