<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <div class="hero_blob"></div>
  <div class="hero_inner">
    <ul class="hero_meta">
      <li class="hero_chip">◍ New · Series A live</li>
      <li class="hero_chip_accent">Ops for growing teams</li>
      <li class="hero_chip">Trusted by 4,200+ crews</li>
    </ul>
    <p class="hero_eyebrow">The playful ops platform</p>
    <h1 class="hero_wordmark">FLOWKIT</h1>
    <h2 class="hero_headline">Run your whole business on one cheerfully organized canvas.</h2>
    <p class="hero_sub">Plan, track, and ship together — no clunky spreadsheets, no chaos, just work that flows.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#start">Start free →</a>
      <a class="hero_button_ghost" href="#demo">Watch 2-min demo</a>
    </div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  overflow:hidden;
  background:#fff8f0;
  padding:120px 24px;
  font-family:'Poppins',-apple-system,'Segoe UI',sans-serif;
  display:flex;
  justify-content:center;
}

.hero_blob {
  pointer-events:none;
  position:absolute;
  right:-96px;
  top:-96px;
  width:420px;
  height:420px;
  border-radius:9999px;
  background:#ff5a5f;
  opacity:0.1;
  filter:blur(80px);
}

.hero_inner {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
  max-width:1120px;
}

.hero_meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 0 32px 0;
  padding:0;
  list-style:none;
}

.hero_chip {
  border:2px solid #1a1a1a;
  background:#ffffff;
  border-radius:9999px;
  padding:6px 16px;
  font-size:14px;
  font-weight:700;
  color:#1a1a1a;
  line-height:1;
}

.hero_chip_accent {
  background:#ff5a5f;
  border-radius:9999px;
  padding:6px 16px;
  font-size:14px;
  font-weight:700;
  color:#ffffff;
  line-height:1;
}

.hero_eyebrow {
  margin:0 0 16px 0;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.25em;
  color:#ff5a5f;
}

.hero_wordmark {
  margin:0;
  font-family:'Poppins',-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(72px,18vw,200px);
  font-weight:900;
  line-height:0.82;
  letter-spacing:-0.04em;
  color:#1a1a1a;
}

.hero_headline {
  margin:24px 0 0 0;
  max-width:720px;
  font-size:clamp(24px,4vw,38px);
  font-weight:800;
  line-height:1.15;
  color:#1a1a1a;
}

.hero_sub {
  margin:20px 0 0 0;
  max-width:560px;
  font-size:18px;
  line-height:1.6;
  color:#5b5750;
  font-weight:500;
}

.hero_actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:40px;
}

.hero_button_primary {
  display:inline-block;
  background:#ff5a5f;
  border-radius:9999px;
  padding:16px 32px;
  font-size:16px;
  font-weight:800;
  color:#ffffff;
  text-decoration:none;
  box-shadow:0 6px 0 #1a1a1a;
  transition:transform 0.15s ease;
}

.hero_button_ghost {
  display:inline-block;
  background:#ffffff;
  border:2px solid #1a1a1a;
  border-radius:9999px;
  padding:14px 30px;
  font-size:16px;
  font-weight:800;
  color:#1a1a1a;
  text-decoration:none;
  transition:transform 0.15s ease;
}
</style>