// Swivy marketing home

const { useState: useStateM, useEffect: useEffectM } = React;

const Nav = () => {
  const [scrolled, setScrolled] = useStateM(false);
  useEffectM(() => {
    const on = () => setScrolled(window.scrollY > 4);
    window.addEventListener("scroll", on);
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={`mk-nav ${scrolled ? "scrolled" : ""}`}>
      <div className="mk-shell" style={{ display: "flex", alignItems: "center", gap: 32, width: "100%", height: "100%" }}>
        <a href="Swivy Marketing Home.html"><SwivyWordmark size={18}/></a>
        <div className="mk-links">
          <a>Product</a>
          <a>Developers</a>
          <a>Security</a>
          <a>Pricing</a>
          <a>Customers</a>
          <a>Docs</a>
        </div>
        <a className="btn btn-ghost btn-sm" href="Swivy Console.html">Sign in</a>
        <a className="btn btn-primary btn-sm mk-cta" href="Swivy Console.html">Start building →</a>
      </div>
    </nav>
  );
};

const Hero = () => (
  <section className="hero">
    <div className="mk-shell">
      <div className="hero-eyebrow">
        <span className="dot"/>
        <span>Now: policy-gated signing on 12 chains</span>
        <span className="meta">v 2026.04</span>
      </div>
      <h1 className="hero-title">
        Identity and wallets, <em>without</em> the 3am page.
      </h1>
      <p className="hero-sub">
        Swivy is the infrastructure layer for teams shipping wallet-backed products. Passkey-grade auth, policy-gated signing, and a complete audit trail — behind one SDK. You stop rolling your own KMS. Your security team stops getting paged.
      </p>
      <div className="hero-ctas">
        <a className="btn btn-primary btn-lg" href="Swivy Console.html">Start for free</a>
        <a className="btn btn-secondary btn-lg">Book a demo</a>
        <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)", marginLeft: 8 }}>no credit card · SOC 2 Type II</span>
      </div>
      <div className="hero-proof">
        <div className="item"><span className="v">4.2B</span><span>signatures brokered</span></div>
        <div className="item"><span className="v">&lt; 120ms</span><span>p50 signing latency</span></div>
        <div className="item"><span className="v">SOC 2</span><span>Type II</span></div>
        <div className="item"><span className="v">99.99%</span><span>SLA, all regions</span></div>
      </div>
      <HeroConsole/>
    </div>
  </section>
);

const HeroConsole = () => (
  <div className="hero-visual">
    <div className="chrome">
      <span className="dots"><span/><span/><span/></span>
      <span className="url">app.swivy.dev / northbridge / ledger-payments / <span style={{ color: "var(--accent-ink)" }}>prod</span></span>
      <span className="env-pill" style={{ fontSize: 11 }}>
        <span className="env-dot" style={{ background: "var(--env-prod)" }}/>
        PRODUCTION
      </span>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 0, background: "var(--bg)" }}>
      <div style={{ padding: 28, borderRight: "1px solid var(--line)" }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-3)", textTransform: "uppercase", marginBottom: 12 }}>Signing approval · sig_01K2Q4</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em", marginBottom: 4 }}>Sign transfer · 1.20 ETH</div>
        <div style={{ fontSize: 13, color: "var(--ink-3)", marginBottom: 18 }}>Policy <span className="mono">payments_v3</span> passed · 1 approver required</div>
        <div style={{ padding: 12, background: "var(--bg-sunken)", border: "1px solid var(--line)", borderRadius: 8, fontSize: 12.5, lineHeight: 1.8 }}>
          <div style={{ display: "grid", gridTemplateColumns: "80px 1fr", rowGap: 2 }}>
            <span style={{ color: "var(--ink-3)" }}>From</span>
            <span className="mono">0x9a4c…e21f</span>
            <span style={{ color: "var(--ink-3)" }}>To</span>
            <span className="mono">0xf2c3…9a11</span>
            <span style={{ color: "var(--ink-3)" }}>Chain</span>
            <span>Ethereum</span>
            <span style={{ color: "var(--ink-3)" }}>Gas</span>
            <span className="mono">0.00042 ETH</span>
          </div>
        </div>
        <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
          <button className="btn btn-danger-ghost btn-sm">Reject</button>
          <div style={{ flex: 1 }}/>
          <button className="btn btn-primary btn-sm">
            <IFingerprint size={12}/>
            <span>Sign with passkey</span>
          </button>
        </div>
      </div>
      <div style={{ background: "var(--bg-code)", padding: "20px 24px", fontFamily: "var(--font-mono)", fontSize: 12.5, lineHeight: 1.7, color: "var(--ink-2)" }}>
        <div style={{ color: "var(--ink-4)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 10 }}>Your app · auth.ts</div>
        <div><span className="tok-k">import</span> <span className="tok-p">{"{ "}</span>createSwivy<span className="tok-p">{" }"}</span> <span className="tok-k">from</span> <span className="tok-s">"@swivy/sdk"</span></div>
        <div>&nbsp;</div>
        <div><span className="tok-k">const</span> swivy <span className="tok-p">=</span> <span className="tok-f">createSwivy</span><span className="tok-p">(</span><span className="tok-p">{"{"}</span></div>
        <div>&nbsp;&nbsp;projectId<span className="tok-p">:</span> <span className="tok-s">"prj_7QkA2vN"</span><span className="tok-p">,</span></div>
        <div>&nbsp;&nbsp;authMethods<span className="tok-p">:</span> <span className="tok-p">[</span><span className="tok-s">"email"</span><span className="tok-p">,</span> <span className="tok-s">"passkey"</span><span className="tok-p">],</span></div>
        <div>&nbsp;&nbsp;defaultChain<span className="tok-p">:</span> <span className="tok-s">"ETH"</span><span className="tok-p">,</span></div>
        <div><span className="tok-p">{"});"}</span></div>
        <div>&nbsp;</div>
        <div><span className="tok-c">// identity first, wallet second, chain third</span></div>
        <div><span className="tok-k">const</span> wallet <span className="tok-p">=</span> <span className="tok-k">await</span> swivy<span className="tok-p">.</span><span className="tok-f">wallets</span><span className="tok-p">.</span><span className="tok-f">getOrCreate</span><span className="tok-p">(</span><span className="tok-p">{"{"}</span></div>
        <div>&nbsp;&nbsp;chain<span className="tok-p">:</span> <span className="tok-s">"ETH"</span></div>
        <div><span className="tok-p">{"});"}</span></div>
      </div>
    </div>
  </div>
);

const ProblemSolution = () => (
  <section className="section" style={{ paddingTop: 48 }}>
    <div className="mk-shell">
      <div className="section-label">Why Swivy</div>
      <h2 className="section-title">Shipping a wallet-backed product <em>shouldn't</em> take three teams.</h2>
      <p className="section-sub">Most teams end up stitching together four vendors and hoping nothing catches fire. Swivy is the single layer underneath your product.</p>
      <div className="problem-grid">
        <div className="problem-col before">
          <h3>Without Swivy</h3>
          {[
            "Auth0 or Cognito for login. Doesn't know what a wallet is.",
            "A KMS for keys. Doesn't know what a signature policy is.",
            "A homegrown signer service. The one that woke you up last quarter.",
            "Chain-specific SDKs duplicated across clients. Drift.",
            "Audit cobbled from four systems. Compliance dreads the quarterly review.",
          ].map((t, i) => (
            <div key={i} className="item">
              <span className="mark"><IX size={10}/></span>
              <span>{t}</span>
            </div>
          ))}
        </div>
        <div className="problem-col after">
          <h3>With Swivy</h3>
          {[
            "Hosted auth with passkey, email, SSO, and external wallets.",
            "Policy-gated signing across every chain you support.",
            "A managed signer with MPC, HSM, or hardware — your call.",
            "One SDK. Chain-specific payloads when you need them, abstracted when you don't.",
            "One audit log. Streamable to your SIEM. Immutable by default.",
          ].map((t, i) => (
            <div key={i} className="item">
              <span className="mark"><ICheck size={10}/></span>
              <span>{t}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Pillars = () => (
  <section className="section">
    <div className="mk-shell">
      <div className="section-label">Three principles</div>
      <h2 className="section-title">Identity first. Policy everywhere. <em>Auditable</em> by default.</h2>
      <div className="pillars">
        <div className="pillar">
          <span className="num">01</span>
          <h3>Identity first, wallet second, chain third.</h3>
          <p>A Swivy user is a person, not a hex string. Wallets are created lazily, per chain, under the identity your app already knows. No seed phrase UX.</p>
          <div className="pillar-visual">
            <PillarIdentity/>
          </div>
        </div>
        <div className="pillar">
          <span className="num">02</span>
          <h3>Every signature passes through policy.</h3>
          <p>Write rules in plain YAML: daily caps, allowlists, approver requirements. Swivy enforces them at the signer — not in your app code, not after the fact.</p>
          <div className="pillar-visual">
            <PillarPolicy/>
          </div>
        </div>
        <div className="pillar">
          <span className="num">03</span>
          <h3>Audit is the product, not an add-on.</h3>
          <p>Every action — from a key reveal to a policy change to a signed transfer — lands in one immutable stream. Stream to your SIEM or export for SOC 2 in a click.</p>
          <div className="pillar-visual">
            <PillarAudit/>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const PillarIdentity = () => (
  <svg viewBox="0 0 280 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <g fill="none" stroke="var(--line-strong)" strokeWidth="1">
      <rect x="20" y="44" width="80" height="32" rx="6" fill="var(--panel)"/>
      <rect x="150" y="20" width="110" height="24" rx="5" fill="var(--panel)"/>
      <rect x="150" y="50" width="110" height="24" rx="5" fill="var(--panel)"/>
      <rect x="150" y="80" width="110" height="24" rx="5" fill="var(--panel)"/>
      <path d="M100 60 L150 32" strokeDasharray="3 3"/>
      <path d="M100 60 L150 62" strokeDasharray="3 3"/>
      <path d="M100 60 L150 92" strokeDasharray="3 3"/>
    </g>
    <circle cx="60" cy="60" r="3" fill="var(--accent)"/>
    <text x="60" y="63.5" fontFamily="var(--font-mono)" fontSize="9" textAnchor="middle" fill="var(--ink)">identity</text>
    <text x="205" y="35" fontFamily="var(--font-mono)" fontSize="9" textAnchor="middle" fill="var(--ink-2)">wallet · ETH</text>
    <text x="205" y="65" fontFamily="var(--font-mono)" fontSize="9" textAnchor="middle" fill="var(--ink-2)">wallet · SOL</text>
    <text x="205" y="95" fontFamily="var(--font-mono)" fontSize="9" textAnchor="middle" fill="var(--ink-2)">wallet · BASE</text>
  </svg>
);

const PillarPolicy = () => (
  <div style={{ padding: 14, fontFamily: "var(--font-mono)", fontSize: 10.5, lineHeight: 1.7, color: "var(--ink-2)", height: "100%", boxSizing: "border-box" }}>
    <div><span className="tok-k">rules</span>:</div>
    <div>&nbsp;&nbsp;- daily_cap: <span className="tok-n">250 ETH</span></div>
    <div>&nbsp;&nbsp;- require_approver_when: value {">"} <span className="tok-n">1 ETH</span></div>
    <div>&nbsp;&nbsp;- chains: [ETH, BASE, ARB]</div>
    <div>&nbsp;&nbsp;- on_violation: <span className="tok-s">block</span></div>
  </div>
);

const PillarAudit = () => (
  <div style={{ padding: 10, height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", gap: 4, fontFamily: "var(--font-mono)", fontSize: 10 }}>
    {[
      { t: "11:42:08", a: "Rotated API key", s: "high" },
      { t: "11:18:54", a: "Webhook retry", s: "med" },
      { t: "10:47:20", a: "Updated policy", s: "high" },
      { t: "09:12:02", a: "Signed transaction", s: "low" },
      { t: "08:55:33", a: "Passkey enrolled", s: "med" },
    ].map((e, i) => (
      <div key={i} style={{ display: "flex", gap: 8, color: "var(--ink-2)" }}>
        <span style={{ color: "var(--ink-4)" }}>{e.t}</span>
        <span style={{ flex: 1 }}>{e.a}</span>
        <span style={{ width: 5, height: 5, borderRadius: "50%", background: e.s === "high" ? "var(--danger)" : e.s === "med" ? "var(--warn)" : "var(--ok)", alignSelf: "center" }}/>
      </div>
    ))}
  </div>
);

const Showcase1 = () => (
  <section className="section">
    <div className="mk-shell">
      <div className="section-label">Developer experience</div>
      <h2 className="section-title">From fresh project to first signed transaction <em>in under 10 minutes.</em></h2>
      <div className="showcase">
        <div className="showcase-copy">
          <h3>Five steps, one SDK.</h3>
          <p>The Swivy integration handoff walks you through project creation, environment setup, credential issuance, OIDC registration, and SDK install — with copy-paste snippets at every step.</p>
          <ul>
            <li><span className="mk"><ICheck size={11}/></span><span>Passkey step-up guards every production key reveal.</span></li>
            <li><span className="mk"><ICheck size={11}/></span><span>Environments are real security boundaries — not just tags.</span></li>
            <li><span className="mk"><ICheck size={11}/></span><span>Export the whole integration as a runbook for your team.</span></li>
            <li><span className="mk"><ICheck size={11}/></span><span>Starter repos for Next.js, Expo, and Rails.</span></li>
          </ul>
          <div style={{ marginTop: 24 }}>
            <a className="btn btn-secondary" href="Swivy Console.html">See the handoff flow →</a>
          </div>
        </div>
        <div className="showcase-visual">
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.08em", color: "var(--ink-4)", textTransform: "uppercase", marginBottom: 14 }}>INTEGRATION PROGRESS · 4 / 5</div>
          {[
            { n: 1, t: "Create project", d: "Ledger Payments · prj_7QkA2vN", done: true },
            { n: 2, t: "Configure environments", d: "dev · staging · prod", done: true },
            { n: 3, t: "Issue API credentials", d: "Server key + webhook secret", done: true },
            { n: 4, t: "Register OIDC client", d: "Sign in with Swop — Web", done: true },
            { n: 5, t: "Ship SDK snippet", d: "Your first signed user", done: false },
          ].map(s => (
            <div key={s.n} style={{ display: "flex", gap: 12, padding: "10px 0", borderTop: s.n === 1 ? "none" : "1px dashed var(--line)" }}>
              <div style={{
                width: 22, height: 22, borderRadius: "50%",
                background: s.done ? "var(--ok-soft)" : "var(--bg-sunken)",
                color: s.done ? "var(--ok)" : "var(--ink-4)",
                border: s.done ? "1px solid color-mix(in oklch, var(--ok) 30%, var(--line))" : "1px dashed var(--line-strong)",
                display: "grid", placeItems: "center",
                fontSize: 11, fontFamily: "var(--font-mono)",
              }}>
                {s.done ? <ICheck size={11}/> : s.n}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{s.t}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Showcase2 = () => (
  <section className="section">
    <div className="mk-shell">
      <div className="section-label">Security posture</div>
      <h2 className="section-title">Dangerous actions, <em>deliberately</em> so.</h2>
      <div className="showcase showcase-swap">
        <div className="showcase-visual" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ padding: "14px 18px", background: "var(--danger-soft)", borderBottom: "1px solid color-mix(in oklch, var(--danger) 30%, var(--line))", display: "flex", gap: 10, alignItems: "center" }}>
            <IWarn size={14} style={{ color: "var(--danger)" }}/>
            <span style={{ fontSize: 13, fontWeight: 500, color: "oklch(from var(--danger) calc(l - 0.1) c h)" }}>Rotate production API key?</span>
          </div>
          <div style={{ padding: 18 }}>
            <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 14 }}>
              The old secret stops working in <b className="mono">10 minutes</b>. Any deploy still using it will start failing with <span className="mono">401 invalid_key</span>.
            </div>
            <div style={{ padding: "10px 12px", background: "var(--bg-sunken)", border: "1px solid var(--line)", borderRadius: 8, fontSize: 12, color: "var(--ink-2)", lineHeight: 1.6 }}>
              Type <span className="mono" style={{ padding: "1px 5px", background: "var(--panel)", borderRadius: 3, border: "1px solid var(--line)" }}>rotate sk_live_a94f</span> to confirm
            </div>
            <div style={{ marginTop: 14, padding: "8px 10px", background: "var(--panel)", border: "1px solid var(--line)", borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-4)" }}>
              &nbsp;
            </div>
            <div style={{ display: "flex", gap: 8, marginTop: 14, justifyContent: "flex-end" }}>
              <button className="btn btn-ghost btn-sm">Cancel</button>
              <button className="btn btn-danger btn-sm" disabled style={{ opacity: 0.5 }}>Rotate key</button>
            </div>
          </div>
        </div>
        <div className="showcase-copy">
          <h3>Type to confirm. Passkey to commit. Undo within 10.</h3>
          <p>Destructive actions always include the consequence, a way to back out, and a reversibility window. Rotations, revokes, policy changes — each picks the right pattern for the risk.</p>
          <ul>
            <li><span className="mk"><ICheck size={11}/></span><span>Type-to-confirm for low-risk irreversibles.</span></li>
            <li><span className="mk"><ICheck size={11}/></span><span>Passkey step-up for any production secret operation.</span></li>
            <li><span className="mk"><ICheck size={11}/></span><span>Armed-commit with a 5s undo toast for batch operations.</span></li>
            <li><span className="mk"><ICheck size={11}/></span><span>All confirmations are captured in the audit stream with the method used.</span></li>
          </ul>
        </div>
      </div>
    </div>
  </section>
);

const BrandSection = () => (
  <section className="section">
    <div className="mk-shell">
      <div className="section-label">Identity</div>
      <h2 className="section-title">A brand that reads as <em>infrastructure</em>, not an ICO.</h2>
      <p className="section-sub">The Swivy mark is a swivel — two opposing arcs meeting at a pivot. It's a signature loop, a key bow, and a rotation symbol all at once. Calm. Deliberate. Engineered.</p>
      <div className="brand-board" style={{ marginTop: 48 }}>
        <div className="brand-cell">
          <div className="cell-label">Primary wordmark</div>
          <SwivyWordmark size={36}/>
        </div>
        <div className="brand-cell dark">
          <div className="cell-label">Inverse</div>
          <SwivyWordmark size={32} inverse/>
        </div>
        <div className="brand-cell accent">
          <div className="cell-label">Glyph · accent</div>
          <div style={{ color: "var(--accent-ink)" }}><SwivyGlyph size={64}/></div>
        </div>
        <div className="brand-cell">
          <div className="cell-label">Mark · rounded</div>
          <SwivyMark size={56}/>
        </div>
        <div className="brand-cell">
          <div className="cell-label">Glyph sizes</div>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 16, color: "var(--ink)" }}>
            <SwivyGlyph size={18}/><SwivyGlyph size={28}/><SwivyGlyph size={40}/><SwivyGlyph size={56}/>
          </div>
        </div>
        <div className="brand-cell">
          <div className="cell-label">Typography</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.03em" }}>Inter Tight · Display</span>
            <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, color: "var(--accent-ink)" }}>Instrument Serif · emphasis</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)" }}>JetBrains Mono · technical</span>
          </div>
        </div>
      </div>
      <div style={{ marginTop: 24, display: "flex", gap: 8 }}>
        {["oklch(20% 0.015 60)", "oklch(98.5% 0.006 85)", "oklch(55% 0.13 55)", "oklch(55% 0.13 155)", "oklch(62% 0.13 80)", "oklch(54% 0.16 25)", "oklch(52% 0.12 240)"].map((c, i) => (
          <div key={i} style={{ flex: 1, height: 72, background: c, borderRadius: 10, border: "1px solid var(--line)", display: "flex", alignItems: "flex-end", padding: 10 }}>
            <span className="mono" style={{ fontSize: 10, color: i === 1 ? "var(--ink-3)" : "oklch(98% 0 0 / 0.8)" }}>
              {["ink", "paper", "accent", "ok", "warn", "danger", "info"][i]}
            </span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Pricing = () => (
  <section className="section">
    <div className="mk-shell">
      <div className="section-label">Pricing</div>
      <h2 className="section-title">Start free. <em>Scale</em> to production when you're ready.</h2>
      <div className="pricing">
        <div className="price-card">
          <div className="price-name">Developer</div>
          <div className="price-amt">Free<small>/ forever</small></div>
          <p style={{ margin: 0, fontSize: 13.5, color: "var(--ink-3)" }}>Everything you need to ship a real integration.</p>
          {["1,000 MAU included", "Passkey + email + SSO", "Dev + staging environments", "Community support"].map(f => (
            <div key={f} className="price-feat"><span className="mk"><ICheck size={11}/></span><span>{f}</span></div>
          ))}
          <a className="btn btn-secondary" style={{ marginTop: "auto" }} href="Swivy Console.html">Start free</a>
        </div>
        <div className="price-card featured">
          <div className="price-name">Growth</div>
          <div className="price-amt">$0.08<small>/ MAU</small></div>
          <p style={{ margin: 0, fontSize: 13.5, color: "oklch(100% 0 0 / 0.65)" }}>Production-ready with policy, audit, and SOC 2.</p>
          {["Unlimited MAU (usage-based)", "Production environment", "Policy engine + signing SLA", "SOC 2 Type II report", "Email + chat support"].map(f => (
            <div key={f} className="price-feat" style={{ borderColor: "oklch(100% 0 0 / 0.12)" }}><span className="mk" style={{ color: "var(--accent)" }}><ICheck size={11}/></span><span>{f}</span></div>
          ))}
          <button className="btn btn-primary" style={{ marginTop: "auto", background: "var(--bg)", color: "var(--ink)" }}>Start 30-day trial</button>
        </div>
        <div className="price-card">
          <div className="price-name">Enterprise</div>
          <div className="price-amt">Custom<small>/ talk to us</small></div>
          <p style={{ margin: 0, fontSize: 13.5, color: "var(--ink-3)" }}>Dedicated infrastructure, custom HSMs, and audit support.</p>
          {["Single-tenant deployment", "HSM / MPC / bring-your-own-key", "SIEM streaming + custom retention", "Named security reviewer", "24/7 on-call support"].map(f => (
            <div key={f} className="price-feat"><span className="mk"><ICheck size={11}/></span><span>{f}</span></div>
          ))}
          <a className="btn btn-secondary" style={{ marginTop: "auto" }}>Book a demo</a>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="mk-footer">
    <div className="mk-shell">
      <div className="mk-footer-grid">
        <div>
          <SwivyWordmark size={18}/>
          <p style={{ marginTop: 14, fontSize: 13, color: "var(--ink-3)", maxWidth: "28ch", lineHeight: 1.5 }}>
            Identity and wallet infrastructure for teams who ship.
          </p>
        </div>
        <div>
          <h4>Product</h4>
          <ul><li><a>Overview</a></li><li><a>Auth</a></li><li><a>Wallets</a></li><li><a>Policies</a></li><li><a>Audit</a></li></ul>
        </div>
        <div>
          <h4>Developers</h4>
          <ul><li><a>Docs</a></li><li><a>API reference</a></li><li><a>SDKs</a></li><li><a>Changelog</a></li></ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul><li><a>About</a></li><li><a>Customers</a></li><li><a>Security</a></li><li><a>Careers</a></li></ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul><li><a>Privacy</a></li><li><a>Terms</a></li><li><a>Trust center</a></li><li><a>SOC 2</a></li></ul>
        </div>
      </div>
      <div className="mk-footer-bottom">
        <span>© 2026 Swivy Labs, Inc.</span>
        <span>Built on warm paper.</span>
      </div>
    </div>
  </footer>
);

const MK = () => (
  <>
    <Nav/>
    <Hero/>
    <ProblemSolution/>
    <Pillars/>
    <Showcase1/>
    <Showcase2/>
    <BrandSection/>
    <Pricing/>
    <Footer/>
  </>
);

ReactDOM.createRoot(document.getElementById("root")).render(<MK/>);