<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <nav class="hero_meta">
    <p class="hero_eyebrow">NORTHBOUND — INFRA STUDIO</p>
    <ul class="hero_metalist">
      <li class="hero_metaitem">52°N</li>
      <li class="hero_metaitem">PAGE 01 / 04</li>
      <li class="hero_metaitem">© 2026</li>
    </ul>
  </nav>
  <div class="hero_wordmark">
    <p class="hero_index">[ 001 ] — SHIPPING INFRA FOR TEAMS THAT MOVE</p>
    <h1 class="hero_title">
      <span class="hero_titleaccent">NORTH</span>
      <span class="hero_titlerest">BOUND</span>
    </h1>
  </div>
  <div class="hero_footer">
    <div class="hero_copy">
      <h2 class="hero_headline">Deploy pipelines that don't break at 3am.</h2>
      <p class="hero_sub">Northbound is the deployment layer for infra-heavy startups — one control plane for every environment, region, and rollback.</p>
    </div>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#start">Start Deploying</a>
      <a class="hero_button_ghost" href="#docs">Read the Docs</a>
    </div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  min-height:100vh;
  box-sizing:border-box;
  background:#141414;
  color:#eae8e4;
  padding:48px 6vw;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.hero_meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border-bottom:1px solid #2c2c2c;
  padding-bottom:18px;
}

.hero_eyebrow {
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  font-weight:600;
  color:#eae8e4;
  margin:0;
}

.hero_metalist {
  display:flex;
  align-items:center;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}

.hero_metaitem {
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#8a8781;
}

.hero_wordmark {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 0;
}

.hero_index {
  font-size:13px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#8a8781;
  margin:0 0 20px 0;
}

.hero_title {
  font-weight:700;
  line-height:0.82;
  letter-spacing:-0.03em;
  font-size:clamp(64px,15vw,240px);
  margin:0;
  text-transform:uppercase;
  color:#eae8e4;
}

.hero_titleaccent {
  color:#e63b2e;
}

.hero_titlerest {
  color:#eae8e4;
}

.hero_footer {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  border-top:1px solid #2c2c2c;
  padding-top:32px;
}

.hero_copy {
  max-width:520px;
}

.hero_headline {
  font-size:clamp(22px,3vw,34px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin:0 0 14px 0;
  color:#eae8e4;
}

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

.hero_actions {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  background:#e63b2e;
  color:#141414;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:16px 30px;
  border-radius:2px;
  text-decoration:none;
  transition:transform .15s ease,background .15s ease;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  background:transparent;
  color:#eae8e4;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:16px 30px;
  border-radius:2px;
  border:1px solid #3a3a3a;
  text-decoration:none;
  transition:border-color .15s ease;
}
</style>