Timeline 01

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="timeline_component">
  <div class="timeline_glow"></div>
  <div class="timeline_header">
    <p class="timeline_eyebrow">How it works</p>
    <h2 class="timeline_title">
      <span class="timeline_title_accent"> four connected steps</span>
    </h2>
    <p class="timeline_subtitle">A clear path our platform runs for every deployment — no guesswork, no black boxes, just a pipeline you can watch end to end.</p>
  </div>
  <div class="timeline_track">
    <div class="timeline_spine"></div>
    <div class="timeline_step">
      <div class="timeline_node">01</div>
      <div class="timeline_card">
        <p class="timeline_label">Ingest</p>
        <h3 class="timeline_step_title">Connect your data sources</h3>
        <p class="timeline_body">Stream events, warehouses, and files into a single unified layer. Schemas are inferred automatically and validated the moment they arrive.</p>
      </div>
    </div>
    <div class="timeline_step">
      <div class="timeline_node">02</div>
      <div class="timeline_card">
        <p class="timeline_label">Transform</p>
        <h3 class="timeline_step_title">Clean, label and enrich</h3>
        <p class="timeline_body">Deduplicate, normalize and auto-label with our feature engine. Every transformation is versioned so you can reproduce any run to the byte.</p>
      </div>
    </div>
    <div class="timeline_step">
      <div class="timeline_node">03</div>
      <div class="timeline_card">
        <p class="timeline_label">Train</p>
        <h3 class="timeline_step_title">Fine-tune on managed GPUs</h3>
        <p class="timeline_body">Launch training jobs on autoscaling clusters with live metrics. Compare checkpoints side by side and promote the winner in one click.</p>
      </div>
    </div>
    <div class="timeline_step">
      <div class="timeline_node">04</div>
      <div class="timeline_card">
        <p class="timeline_label">Deploy</p>
        <h3 class="timeline_step_title">Ship to a global endpoint</h3>
        <p class="timeline_body">Serve your model behind a low-latency API with autoscaling, canary rollouts and drift alerts baked in. Roll back instantly if anything slips.</p>
      </div>
    </div>
  </div>
</section>

<style>
.timeline_component {
  position:relative;
  overflow:hidden;
  background:#05060a;
  padding:120px 24px;
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
}

.timeline_glow {
  pointer-events:none;
  position:absolute;
  left:50%;
  top:140px;
  width:520px;
  height:520px;
  transform:translateX(-50%);
  border-radius:9999px;
  background:#00e5c0;
  opacity:0.20;
  filter:blur(160px);
}

.timeline_header {
  position:relative;
  z-index:10;
  max-width:720px;
  margin:0 auto 88px auto;
  text-align:center;
}

.timeline_eyebrow {
  margin:0 0 18px 0;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#00e5c0;
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
}

.timeline_title {
  margin:0;
  font-size:46px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#ffffff;
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
}

.timeline_title_accent {
  color:#00e5c0;
}

.timeline_subtitle {
  max-width:540px;
  margin:20px auto 0 auto;
  font-size:17px;
  line-height:1.6;
  color:#9aa3b2;
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
}

.timeline_track {
  position:relative;
  z-index:10;
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:40px;
}

.timeline_spine {
  pointer-events:none;
  position:absolute;
  left:27px;
  top:16px;
  bottom:16px;
  width:2px;
  background:linear-gradient(180deg,#00e5c0 0%,rgba(0,229,192,0.35) 55%,rgba(0,229,192,0) 100%);
}

.timeline_step {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:28px;
}

.timeline_node {
  position:relative;
  z-index:10;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:9999px;
  border:1px solid rgba(0,229,192,0.40);
  background:#0a0c12;
  color:#00e5c0;
  font-size:18px;
  font-weight:700;
  box-shadow:0 0 24px rgba(0,229,192,0.45);
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
}

.timeline_card {
  flex:1 1 auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  padding:28px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.timeline_label {
  margin:0 0 10px 0;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#00e5c0;
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
}

.timeline_step_title {
  margin:0;
  font-size:22px;
  font-weight:700;
  color:#ffffff;
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
}

.timeline_body {
  margin:12px 0 0 0;
  font-size:15px;
  line-height:1.65;
  color:#9aa3b2;
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
}
</style>