<!-- 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_lead">
      <nav class="hero_meta">
        <p class="hero_eyebrow">Operations Platform</p>
        <p class="hero_pill">New · Q3 Release</p>
      </nav>
      <h1 class="hero_title">
        <span class="hero_title_accent"> command deck</span>
      </h1>
      <p class="hero_sub">Forecasts, inventory and cashflow stitched into a single live view — so your team acts on today's numbers, not last week's spreadsheet.</p>
      <div class="hero_actions">
        <a class="hero_button_primary" href="#demo">Book a live demo</a>
        <a class="hero_button_ghost" href="#pricing">See pricing</a>
      </div>
    </div>
    <div class="hero_side">
      <div class="hero_visual">
        <img class="hero_image" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/hero-duotone-bold-business-29-1-12.webp" alt="Operations team reviewing a live analytics dashboard" />
        <p class="hero_visual_tag">Live sync</p>
      </div>
      <div class="hero_stat">
        <p class="hero_stat_number">41%</p>
        <p class="hero_stat_label">Faster monthly close</p>
      </div>
      <div class="hero_stat_dark">
        <p class="hero_stat_number_light">3,800+</p>
        <p class="hero_stat_label_light">Teams onboarded</p>
      </div>
      <div class="hero_note">
        <p class="hero_note_dot"></p>
        <p class="hero_note_text">No credit card required · SOC 2 Type II certified · Cancel anytime</p>
      </div>
    </div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  background:#7a1420;
  color:#ffffff;
  overflow:hidden;
  padding:120px 32px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}

.hero_glow {
  pointer-events:none;
  position:absolute;
  top:-160px;
  right:-160px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:#9a2030;
  filter:blur(120px);
  opacity:0.6;
  z-index:0;
}

.hero_inner {
  position:relative;
  z-index:1;
  margin:0 auto;
  max-width:1240px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
}

.hero_lead {
  grid-column:span 7;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:#5f0e18;
  border-radius:28px;
  padding:48px;
  border:1px solid rgba(255,255,255,0.08);
}

.hero_meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-bottom:40px;
}

.hero_eyebrow {
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.28em;
  color:#ffd400;
  margin:0;
}

.hero_pill {
  background:#ffd400;
  color:#7a1420;
  border-radius:999px;
  padding:6px 16px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin:0;
}

.hero_title {
  font-family:'Arial Narrow',Arial,sans-serif;
  font-size:5rem;
  font-weight:800;
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:-0.02em;
  margin:0;
}

.hero_title_accent {
  color:#ffd400;
}

.hero_sub {
  margin-top:24px;
  max-width:46ch;
  font-size:1.05rem;
  line-height:1.6;
  color:rgba(255,255,255,0.75);
}

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

.hero_button_primary {
  display:inline-block;
  background:#ffd400;
  color:#7a1420;
  border-radius:999px;
  padding:16px 32px;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  text-decoration:none;
}

.hero_button_ghost {
  display:inline-block;
  border:1px solid rgba(255,255,255,0.3);
  color:#ffffff;
  border-radius:999px;
  padding:16px 32px;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  text-decoration:none;
}

.hero_side {
  grid-column:span 5;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.hero_visual {
  grid-column:span 2;
  position:relative;
  overflow:hidden;
  border-radius:28px;
  min-height:240px;
}

.hero_image {
  width:100%;
  height:100%;
  min-height:240px;
  object-fit:cover;
  display:block;
  filter:saturate(0.85) contrast(1.05);
}

.hero_visual_tag {
  position:absolute;
  bottom:16px;
  left:16px;
  background:rgba(122,20,32,0.85);
  color:#ffd400;
  border-radius:999px;
  padding:6px 16px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin:0;
}

.hero_stat {
  background:#ffd400;
  color:#7a1420;
  border-radius:28px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero_stat_number {
  font-family:'Arial Narrow',Arial,sans-serif;
  font-size:2.6rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
  margin:0;
}

.hero_stat_label {
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
}

.hero_stat_dark {
  background:#5f0e18;
  color:#ffffff;
  border-radius:28px;
  padding:24px;
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero_stat_number_light {
  font-family:'Arial Narrow',Arial,sans-serif;
  font-size:2.6rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
  margin:0;
  color:#ffffff;
}

.hero_stat_label_light {
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.7);
}

.hero_note {
  grid-column:span 2;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:28px;
  padding:16px 24px;
}

.hero_note_dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffd400;
  flex:0 0 auto;
  margin:0;
}

.hero_note_text {
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.75);
  margin:0;
}
</style>