<!-- 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_glow"></div>
  <div class="hero_inner">
    <div class="hero_eyebrow">
      <p class="hero_eyebrow_text">Now in open beta · Series A backed</p>
    </div>
    <h1 class="hero_title">
      <span class="hero_title_accent"> itself</span>
    </h1>
    <p class="hero_subline">Optimaflow connects your billing, CRM and warehouse into one live pipeline — so forecasts update themselves and no deal ever slips through the cracks.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#start">Start free trial</a>
      <a class="hero_button_secondary" href="#demo">Book a demo</a>
    </div>
    <p class="hero_note">No credit card · 2-minute setup · Cancel anytime</p>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background-color:#7a1420;
  padding:7rem 1.5rem;
  min-height:92vh;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.hero_glow {
  pointer-events:none;
  position:absolute;
  top:-18%;
  left:50%;
  transform:translateX(-50%);
  width:70rem;
  height:70rem;
  border-radius:9999px;
  background:radial-gradient(circle,rgba(255,212,0,0.16) 0%,rgba(122,20,32,0) 62%);
  z-index:0;
}

.hero_inner {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:64rem;
}

.hero_eyebrow {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background-color:#ffd400;
  padding:0.5rem 1rem;
  border-radius:9999px;
  margin-bottom:2rem;
}

.hero_eyebrow_text {
  font-size:0.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:#7a1420;
  line-height:1;
  margin:0;
}

.hero_title {
  color:#fff6ec;
  font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:-0.02em;
  font-size:clamp(3rem,9vw,7rem);
  max-width:16ch;
  margin:0;
}

.hero_title_accent {
  color:#ffd400;
}

.hero_subline {
  margin-top:1.75rem;
  font-size:clamp(1.05rem,2vw,1.4rem);
  line-height:1.5;
  color:#f2c9cd;
  max-width:46ch;
  font-weight:500;
}

.hero_actions {
  margin-top:2.5rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem;
}

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  background-color:#ffd400;
  padding:1rem 2rem;
  border-radius:9999px;
  font-size:0.95rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#7a1420;
  text-decoration:none;
  transition:transform 0.15s ease;
}

.hero_button_secondary {
  display:inline-flex;
  align-items:center;
  background-color:transparent;
  border:2px solid rgba(255,255,255,0.22);
  padding:0.9rem 2rem;
  border-radius:9999px;
  font-size:0.95rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#fff6ec;
  text-decoration:none;
  transition:border-color 0.15s ease;
}

.hero_note {
  margin-top:1.5rem;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:#e0a5ac;
  font-weight:600;
}
</style>