<!-- 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_glowtwo"></div>
  <div class="hero_inner">
    <div class="hero_eyebrow">
      <div class="hero_dot"></div>
      <p class="hero_eyebrowtext">New · Built for growing teams</p>
    </div>
    <h1 class="hero_title">
      <span class="hero_titleaccent">Run the business,</span>
      <span class="hero_titlerest"> skip the busywork.</span>
    </h1>
    <p class="hero_sub">One friendly workspace for invoices, clients, and cash flow — so you spend your day building, not chasing spreadsheets.</p>
    <div class="hero_actions">
      <a class="hero_buttonprimary" href="#start">Start free trial</a>
      <a class="hero_buttonghost" href="#demo">Watch 2-min demo</a>
    </div>
    <p class="hero_note">No credit card · Free for your first 3 clients</p>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-color:#fff8f0;
  padding:112px 24px;
  overflow:hidden;
  font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}

.hero_glow {
  position:absolute;
  top:-120px;
  right:8%;
  width:340px;
  height:340px;
  border-radius:9999px;
  background-color:#ff5a5f;
  opacity:0.2;
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
}

.hero_glowtwo {
  position:absolute;
  bottom:-140px;
  left:6%;
  width:300px;
  height:300px;
  border-radius:9999px;
  background-color:#ff5a5f;
  opacity:0.15;
  filter:blur(90px);
  pointer-events:none;
  z-index:0;
}

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

.hero_eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background-color:#ffe3e4;
  color:#ff5a5f;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:9999px;
  padding:8px 16px;
  margin-bottom:28px;
}

.hero_dot {
  width:8px;
  height:8px;
  border-radius:9999px;
  background-color:#ff5a5f;
}

.hero_eyebrowtext {
  margin:0;
}

.hero_title {
  margin:0;
  color:#1a1523;
  font-weight:800;
  font-size:64px;
  line-height:1.02;
  letter-spacing:-0.02em;
  max-width:760px;
}

.hero_titleaccent {
  color:#ff5a5f;
}

.hero_titlerest {
  color:#1a1523;
}

.hero_sub {
  margin:24px 0 0 0;
  color:#5a5462;
  font-size:19px;
  line-height:1.6;
  max-width:560px;
  font-weight:400;
}

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

.hero_buttonprimary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:#ff5a5f;
  color:#ffffff;
  font-size:16px;
  font-weight:600;
  border-radius:9999px;
  padding:16px 32px;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(255,90,95,0.35);
  transition:transform 0.15s ease;
}

.hero_buttonghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:#ffffff;
  color:#1a1523;
  font-size:16px;
  font-weight:600;
  border-radius:9999px;
  padding:16px 32px;
  text-decoration:none;
  border:2px solid #1a1523;
  transition:transform 0.15s ease;
}

.hero_note {
  margin:24px 0 0 0;
  color:#8a8492;
  font-size:14px;
}
</style>