<!-- 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_grid"></div>
  <div class="hero_inner">
    <div class="hero_eyebrow">
      <div class="hero_eyebrow_dot"></div>
      <p class="hero_eyebrow_text">Now in private beta — join 2,400+ teams</p>
    </div>
    <h1 class="hero_title">
      <span class="hero_title_accent">without the guesswork</span>
    </h1>
    <p class="hero_sub">Orbit gives your product team one platform to evaluate, monitor, and deploy models to production — with observability baked in from prompt to pipeline.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#start">Start building free</a>
      <a class="hero_button_ghost" href="#demo">Book a demo</a>
    </div>
    <p class="hero_note">No credit card required · SOC 2 Type II · Deploy in minutes</p>
  </div>
</section>

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

.hero_glow {
  pointer-events:none;
  position:absolute;
  left:50%;
  top:22%;
  height:720px;
  width:720px;
  transform:translateX(-50%);
  border-radius:9999px;
  filter:blur(120px);
  opacity:0.6;
  background:radial-gradient(circle,#00e5c0 0%,rgba(0,229,192,0.35) 38%,rgba(5,6,10,0) 70%);
}

.hero_grid {
  pointer-events:none;
  position:absolute;
  inset:0;
  opacity:0.05;
  background-image:linear-gradient(#ffffff 1px,transparent 1px),linear-gradient(90deg,#ffffff 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 75%);
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 75%);
}

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

.hero_eyebrow {
  margin-bottom:32px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:9999px;
  border:1px solid rgba(0,229,192,0.25);
  background-color:rgba(255,255,255,0.04);
  padding:8px 16px;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  color:#c7ccd6;
  backdrop-filter:blur(12px);
}

.hero_eyebrow_dot {
  height:7px;
  width:7px;
  border-radius:9999px;
  background-color:#00e5c0;
  box-shadow:0 0 10px 1px #00e5c0;
}

.hero_eyebrow_text {
  margin:0;
}

.hero_title {
  margin:0;
  font-size:clamp(2.6rem,7vw,5rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.03em;
  color:#ffffff;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}

.hero_title_accent {
  color:#00e5c0;
  text-shadow:0 0 40px rgba(0,229,192,0.45);
}

.hero_sub {
  margin-top:28px;
  max-width:600px;
  font-size:clamp(1rem,2.2vw,1.2rem);
  line-height:1.6;
  color:#9aa2b1;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}

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

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  background-color:#00e5c0;
  padding:15px 32px;
  font-size:15px;
  font-weight:600;
  color:#04120f;
  text-decoration:none;
  box-shadow:0 8px 30px rgba(0,229,192,0.35);
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,0.15);
  background-color:rgba(255,255,255,0.03);
  padding:15px 32px;
  font-size:15px;
  font-weight:600;
  color:#ffffff;
  text-decoration:none;
  backdrop-filter:blur(12px);
  transition:border-color 0.2s ease,background-color 0.2s ease;
}

.hero_note {
  margin-top:24px;
  font-size:13px;
  color:#6b7280;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
</style>