Footer 01

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="footer_component">
  <div class="footer_inner">
    <div class="footer_top">
      <div class="footer_brand">
        <h3 class="footer_brandmark">Optimaflow</h3>
        <p class="footer_tagline">Cash-flow infrastructure for modern finance teams. Move money, close books, and forecast runway from one clean workspace.</p>
        <div class="footer_contact">
          <a class="footer_contactlink" href="mailto:hello@optimaflow.io">hello@optimaflow.io</a>
          <p class="footer_address">128 Market Street, Suite 900 — San Francisco, CA 94105</p>
        </div>
        <a class="footer_cta" href="#">Book a demo</a>
      </div>
      <nav class="footer_columns">
        <div class="footer_col">
          <h3 class="footer_coltitle">Product</h3>
          <ul class="footer_list">
            <li class="footer_item">
              <a class="footer_link" href="#">Payments</a>
            </li>
            <li class="footer_item">
              <a class="footer_link" href="#">Forecasting</a>
            </li>
            <li class="footer_item">
              <a class="footer_link" href="#">Reconciliation</a>
            </li>
            <li class="footer_item">
              <a class="footer_link" href="#">Integrations</a>
            </li>
          </ul>
        </div>
        <div class="footer_col">
          <h3 class="footer_coltitle">Company</h3>
          <ul class="footer_list">
            <li class="footer_item">
              <a class="footer_link" href="#">About</a>
            </li>
            <li class="footer_item">
              <a class="footer_link" href="#">Careers</a>
            </li>
            <li class="footer_item">
              <a class="footer_link" href="#">Customers</a>
            </li>
            <li class="footer_item">
              <a class="footer_link" href="#">Press kit</a>
            </li>
          </ul>
        </div>
        <div class="footer_col">
          <h3 class="footer_coltitle">Resources</h3>
          <ul class="footer_list">
            <li class="footer_item">
              <a class="footer_link" href="#">Documentation</a>
            </li>
            <li class="footer_item">
              <a class="footer_link" href="#">API reference</a>
            </li>
            <li class="footer_item">
              <a class="footer_link" href="#">Changelog</a>
            </li>
            <li class="footer_item">
              <a class="footer_link" href="#">Security</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="footer_bottom">
      <p class="footer_legal">© 2026 Optimaflow, Inc. All rights reserved.</p>
      <nav class="footer_meta">
        <a class="footer_metalink" href="#">Privacy</a>
        <a class="footer_metalink" href="#">Terms</a>
        <a class="footer_metalink" href="#">Status</a>
      </nav>
    </div>
  </div>
  <div class="footer_ghost">
    <h2 class="footer_ghostword">Optimaflow</h2>
  </div>
</section>

<style>
.footer_component {
  position:relative;
  overflow:hidden;
  background:#f7f8fa;
  padding:96px 6vw 0;
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  color:#0f172a;
}

.footer_inner {
  position:relative;
  z-index:2;
  margin:0 auto;
  max-width:1240px;
  padding-bottom:220px;
}

.footer_top {
  display:grid;
  grid-template-columns:1.4fr 2fr;
  gap:64px;
  padding-bottom:64px;
  border-bottom:1px solid #e4e7ec;
}

.footer_brand {
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:340px;
}

.footer_brandmark {
  margin:0;
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:#0f172a;
}

.footer_tagline {
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:#475467;
}

.footer_contact {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

.footer_contactlink {
  font-size:15px;
  font-weight:500;
  color:#0f4c3a;
  text-decoration:none;
}

.footer_address {
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#667085;
}

.footer_cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  margin-top:12px;
  padding:12px 22px;
  border-radius:999px;
  background:#0f4c3a;
  color:#ffffff;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}

.footer_columns {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.footer_col {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.footer_coltitle {
  margin:0;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#98a2b3;
}

.footer_list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer_link {
  font-size:15px;
  color:#475467;
  text-decoration:none;
}

.footer_bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-top:28px;
}

.footer_legal {
  margin:0;
  font-size:14px;
  color:#98a2b3;
}

.footer_meta {
  display:flex;
  align-items:center;
  gap:24px;
}

.footer_metalink {
  font-size:14px;
  color:#667085;
  text-decoration:none;
}

.footer_ghost {
  pointer-events:none;
  position:absolute;
  left:0;
  right:0;
  bottom:-4vw;
  z-index:1;
  overflow:hidden;
}

.footer_ghostword {
  margin:0;
  text-align:center;
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  font-weight:600;
  letter-spacing:-0.04em;
  line-height:0.8;
  font-size:20vw;
  color:#0f4c3a;
  opacity:0.07;
  white-space:nowrap;
}
</style>