<!-- 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_container">
    <div class="hero_eyebrow">
      <div class="hero_dot"></div>
      <p class="hero_eyebrowtext">AI Operations Platform</p>
    </div>
    <h1 class="hero_title">
      <span class="hero_titleplain">Ship intelligent products </span>
      <span class="hero_titleaccent">without the ops overhead</span>
    </h1>
    <p class="hero_subtitle">OptimaFlow unifies your models, pipelines, and monitoring into one control plane — so your team can deploy, observe, and scale AI with confidence.</p>
    <div class="hero_actions">
      <a class="hero_buttonprimary" href="#">Start building free</a>
      <a class="hero_buttonsecondary" href="#">Book a demo</a>
    </div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  overflow:hidden;
  background:#05060a;
  padding:140px 24px;
  display:flex;
  justify-content:center;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}

.hero_glow {
  pointer-events:none;
  position:absolute;
  left:50%;
  top:-160px;
  transform:translateX(-50%);
  width:820px;
  height:820px;
  border-radius:9999px;
  background:radial-gradient(circle at center,rgba(0,229,192,0.35) 0%,rgba(0,229,192,0.10) 40%,rgba(5,6,10,0) 70%);
  opacity:0.7;
  filter:blur(120px);
}

.hero_container {
  position:relative;
  z-index:1;
  width:100%;
  max-width:760px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.hero_eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(0,229,192,0.25);
  background:rgba(0,229,192,0.06);
  border-radius:9999px;
  padding:7px 16px;
  margin-bottom:28px;
}

.hero_dot {
  width:7px;
  height:7px;
  border-radius:9999px;
  background:#00e5c0;
  box-shadow:0 0 12px 2px rgba(0,229,192,0.8);
}

.hero_eyebrowtext {
  font-size:13px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#c7d0dd;
  margin:0;
}

.hero_title {
  color:#ffffff;
  font-weight:800;
  font-size:64px;
  line-height:1.04;
  letter-spacing:-0.03em;
  margin:0;
}

.hero_titleplain {
  color:#ffffff;
}

.hero_titleaccent {
  color:#00e5c0;
}

.hero_subtitle {
  color:#9aa4b2;
  font-size:19px;
  line-height:1.6;
  max-width:560px;
  margin:26px 0 0;
}

.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;
  background:#00e5c0;
  color:#04120f;
  font-size:16px;
  font-weight:600;
  padding:15px 30px;
  border-radius:9999px;
  text-decoration:none;
  box-shadow:0 8px 30px rgba(0,229,192,0.35);
}

.hero_buttonsecondary {
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.03);
  color:#e7ecf3;
  font-size:16px;
  font-weight:600;
  padding:15px 30px;
  border-radius:9999px;
  text-decoration:none;
}
</style>