Pricing 04

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="pricing_component">
  <div class="pricing_glow"></div>
  <div class="pricing_inner">
    <div class="pricing_header">
      <p class="pricing_eyebrow">Pricing</p>
      <h2 class="pricing_title">
        <span class="pricing_title_accent">ambition</span>
      </h2>
      <p class="pricing_sub">Start free, upgrade when your team outgrows it. Every plan includes our core inference engine and unlimited seats.</p>
    </div>
    <div class="pricing_grid">
      <div class="pricing_card">
        <p class="pricing_plan">Starter</p>
        <p class="pricing_desc">For solo builders validating an idea.</p>
        <div class="pricing_price_row">
          <h3 class="pricing_price">$0</h3>
          <p class="pricing_period">/month</p>
        </div>
        <ul class="pricing_features">
          <li class="pricing_feature">✓  10K inference calls / month</li>
          <li class="pricing_feature">✓  1 project workspace</li>
          <li class="pricing_feature">✓  Community support</li>
          <li class="pricing_feature">✓  Basic analytics dashboard</li>
        </ul>
        <a class="pricing_cta_ghost" href="#">Start for free</a>
      </div>
      <div class="pricing_card_featured">
        <p class="pricing_badge">Most popular</p>
        <p class="pricing_plan_f">Growth</p>
        <p class="pricing_desc_f">For teams shipping to production.</p>
        <div class="pricing_price_row_f">
          <h3 class="pricing_price_f">$49</h3>
          <p class="pricing_period_f">/month</p>
        </div>
        <ul class="pricing_features_f">
          <li class="pricing_feature_f">✓  2M inference calls / month</li>
          <li class="pricing_feature_f">✓  Unlimited workspaces</li>
          <li class="pricing_feature_f">✓  Priority email & chat support</li>
          <li class="pricing_feature_f">✓  Advanced analytics + webhooks</li>
          <li class="pricing_feature_f">✓  99.9% uptime SLA</li>
        </ul>
        <a class="pricing_cta_solid" href="#">Start 14-day trial</a>
      </div>
      <div class="pricing_card">
        <p class="pricing_plan">Enterprise</p>
        <p class="pricing_desc">For orgs with scale and compliance needs.</p>
        <div class="pricing_price_row">
          <h3 class="pricing_price">Custom</h3>
        </div>
        <ul class="pricing_features">
          <li class="pricing_feature">✓  Unlimited inference volume</li>
          <li class="pricing_feature">✓  Dedicated GPU clusters</li>
          <li class="pricing_feature">✓  SSO, SCIM & audit logs</li>
          <li class="pricing_feature">✓  Dedicated solutions engineer</li>
          <li class="pricing_feature">✓  Custom SLAs & on-prem option</li>
        </ul>
        <a class="pricing_cta_ghost" href="#">Talk to sales</a>
      </div>
    </div>
  </div>
</section>

<style>
.pricing_component {
  position:relative;
  overflow:hidden;
  background:#05060a;
  padding:140px 24px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}

.pricing_glow {
  pointer-events:none;
  position:absolute;
  left:50%;
  top:-140px;
  width:900px;
  height:620px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(0,229,192,0.28),rgba(0,229,192,0.06) 55%,transparent 78%);
  filter:blur(130px);
  border-radius:9999px;
  z-index:0;
}

.pricing_inner {
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
}

.pricing_header {
  max-width:720px;
  margin:0 auto 72px;
  text-align:center;
}

.pricing_eyebrow {
  margin:0 0 20px;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:#00e5c0;
}

.pricing_title {
  margin:0;
  font-size:clamp(38px,5vw,60px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.03em;
  color:#ffffff;
}

.pricing_title_accent {
  color:#00e5c0;
}

.pricing_sub {
  max-width:520px;
  margin:22px auto 0;
  font-size:17px;
  line-height:1.6;
  color:#9aa3b2;
}

.pricing_grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}

.pricing_card {
  display:flex;
  flex-direction:column;
  padding:36px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-sizing:border-box;
}

.pricing_plan {
  margin:0;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#c6ccd8;
}

.pricing_desc {
  margin:10px 0 26px;
  font-size:14px;
  line-height:1.55;
  color:#8b93a3;
}

.pricing_price_row {
  display:flex;
  align-items:flex-end;
  gap:6px;
}

.pricing_price {
  margin:0;
  font-size:52px;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.03em;
  color:#ffffff;
}

.pricing_period {
  margin:0 0 6px;
  font-size:15px;
  color:#8b93a3;
}

.pricing_features {
  list-style:none;
  padding:0;
  margin:30px 0;
  display:flex;
  flex-direction:column;
  gap:15px;
  flex-grow:1;
}

.pricing_feature {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  color:#c6ccd8;
  before-content:'✓';
}

.pricing_cta_ghost {
  margin-top:auto;
  display:block;
  padding:15px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.16);
  background:transparent;
  color:#ffffff;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  text-align:center;
  transition:border-color 0.2s ease,background 0.2s ease;
}

.pricing_card_featured {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:36px;
  border-radius:20px;
  border:1px solid rgba(0,229,192,0.4);
  background:rgba(0,229,192,0.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 60px rgba(0,229,192,0.15),inset 0 0 0 1px rgba(0,229,192,0.08);
  box-sizing:border-box;
}

.pricing_badge {
  position:absolute;
  right:28px;
  top:28px;
  margin:0;
  padding:5px 12px;
  border-radius:9999px;
  background:#00e5c0;
  color:#05060a;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.pricing_plan_f {
  margin:0;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#00e5c0;
}

.pricing_desc_f {
  margin:10px 0 26px;
  font-size:14px;
  line-height:1.55;
  color:#a7b0c0;
}

.pricing_price_row_f {
  display:flex;
  align-items:flex-end;
  gap:6px;
}

.pricing_price_f {
  margin:0;
  font-size:52px;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.03em;
  color:#ffffff;
}

.pricing_period_f {
  margin:0 0 6px;
  font-size:15px;
  color:#a7b0c0;
}

.pricing_features_f {
  list-style:none;
  padding:0;
  margin:30px 0;
  display:flex;
  flex-direction:column;
  gap:15px;
  flex-grow:1;
}

.pricing_feature_f {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  color:#e6e9f0;
}

.pricing_cta_solid {
  margin-top:auto;
  display:block;
  padding:15px;
  border-radius:12px;
  border:none;
  background:#00e5c0;
  color:#05060a;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  text-align:center;
  box-shadow:0 8px 30px rgba(0,229,192,0.28);
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
</style>