What We Do 01

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="whatwedo_component">
  <div class="whatwedo_glow"></div>
  <div class="whatwedo_inner">
    <div class="whatwedo_head">
      <p class="whatwedo_eyebrow">What we do</p>
      <h2 class="whatwedo_title">
        <span class="whatwedo_title_accent">decisions that ship.</span>
      </h2>
      <p class="whatwedo_intro">We build the AI infrastructure that sits between your messy inputs and the moment a customer feels magic — models, pipelines, and interfaces designed to work in production, not just in a demo.</p>
    </div>
    <div class="whatwedo_grid">
      <div class="whatwedo_card">
        <div class="whatwedo_icon">01</div>
        <h3 class="whatwedo_card_title">Applied ML Models</h3>
        <p class="whatwedo_card_text">Custom models fine-tuned on your domain — trained, evaluated, and monitored so accuracy holds up long after launch day.</p>
      </div>
      <div class="whatwedo_card">
        <div class="whatwedo_icon">02</div>
        <h3 class="whatwedo_card_title">Data Pipelines</h3>
        <p class="whatwedo_card_text">Streaming and batch infrastructure that cleans, enriches, and routes your data — resilient by design and built to scale with load.</p>
      </div>
      <div class="whatwedo_card">
        <div class="whatwedo_icon">03</div>
        <h3 class="whatwedo_card_title">Product Interfaces</h3>
        <p class="whatwedo_card_text">The last mile — copilots, dashboards, and APIs that put intelligence directly in the hands of the people who act on it.</p>
      </div>
    </div>
  </div>
</section>

<style>
.whatwedo_component {
  position:relative;
  overflow:hidden;
  background:#05060a;
  padding:120px 24px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

.whatwedo_glow {
  position:absolute;
  left:50%;
  top:-120px;
  transform:translateX(-50%);
  width:560px;
  height:560px;
  border-radius:9999px;
  background:radial-gradient(circle,rgba(0,229,192,0.28) 0%,rgba(0,229,192,0.06) 45%,rgba(5,6,10,0) 72%);
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
}

.whatwedo_inner {
  position:relative;
  z-index:10;
  max-width:1160px;
  margin:0 auto;
}

.whatwedo_head {
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.whatwedo_eyebrow {
  display:inline-block;
  margin:0 0 20px;
  padding:7px 16px;
  border:1px solid rgba(0,229,192,0.2);
  border-radius:9999px;
  background:rgba(0,229,192,0.05);
  color:#00e5c0;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
}

.whatwedo_title {
  margin:0;
  color:#ffffff;
  font-size:clamp(34px,5vw,58px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.02em;
}

.whatwedo_title_accent {
  color:#00e5c0;
}

.whatwedo_intro {
  max-width:600px;
  margin:22px auto 0;
  color:#9aa3b2;
  font-size:17px;
  line-height:1.7;
}

.whatwedo_grid {
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.whatwedo_card {
  display:flex;
  flex-direction:column;
  padding:32px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(12px);
  transition:border-color 0.3s ease,background 0.3s ease;
}

.whatwedo_icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin-bottom:22px;
  border:1px solid rgba(0,229,192,0.2);
  border-radius:14px;
  background:rgba(0,229,192,0.07);
  color:#00e5c0;
  font-size:22px;
  font-weight:700;
}

.whatwedo_card_title {
  margin:0;
  color:#ffffff;
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.01em;
}

.whatwedo_card_text {
  margin:12px 0 0;
  color:#8b93a3;
  font-size:15px;
  line-height:1.65;
}
</style>