---
id: seed:patterns/value-prop-positioning
title: Value proposition positioning
source_type: seed_pattern
priority: warm
---

A value proposition answers three questions in this order: WHO is this for, WHAT do they get, WHY is it better than the alternative. Skipping any of the three produces vague marketing copy. Four working variations:

---

**Headline plus subhead.** Classic hero combination with benefit headline and supporting descriptor.

*Animation & Visual Details:*
- *Entrance*: Headline fades in with scale 0.95 → 1; subhead follows with 0.2s delay
- *Hover*: CTA button has gradient border glow and magnetic pull effect
- *Gradients*: Headline has gradient text fill (accent colors)
- *Radial circles*: Radial glow behind headline words
- *Scroll trigger*: Not applicable (above fold)
- *JS interaction*: Magnetic CTA button that follows cursor within proximity

```html
<section data-amb-section="hero" class="vp-section">
  <div class="container">
    <div class="vp-hero">
      <h1 class="vp-headline">
        <span class="vp-headline-word">Ship</span>
        <span class="vp-headline-word">faster</span>
        <span class="vp-headline-word vp-headline-accent">without</span>
        <span class="vp-headline-word">the chaos</span>
      </h1>
      <p class="vp-subhead">
        For engineering teams tired of deployment friction, Acme is the platform that auto-rolls back failed releases — so every deploy is reversible in one click.
      </p>
      <div class="vp-actions">
        <a href="#" class="vp-cta vp-cta--primary">
          Start free trial
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
        <a href="#" class="vp-cta vp-cta--secondary">Watch demo</a>
      </div>
      <div class="vp-social-proof">
        <span class="vp-proof-avatars">
          <img src="https://placehold.co/24x24" alt="" />
          <img src="https://placehold.co/24x24" alt="" />
          <img src="https://placehold.co/24x24" alt="" />
        </span>
        <span class="vp-proof-text">Join 14,000+ engineering teams</span>
      </div>
    </div>
  </div>
</section>
```

```css
:root {
  --vp-enter-duration: 0.7s;
}

.vp-section {
  padding: clamp(80px, 12vw, 140px) 0 clamp(60px, 8vw, 100px);
  background: linear-gradient(135deg, rgba(99,102,241,0.03) 0%, rgba(124,58,237,0.01) 100%);
}

.vp-hero {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.vp-headline {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3em;
}

.vp-headline-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  color: var(--color-text, #1e293b);
}

.vp-headline.is-visible .vp-headline-word {
  animation: vp-word-enter var(--vp-enter-duration) ease-out forwards;
}

.vp-headline.is-visible .vp-headline-word:nth-child(1) { animation-delay: 0.1s; }
.vp-headline.is-visible .vp-headline-word:nth-child(2) { animation-delay: 0.2s; }
.vp-headline.is-visible .vp-headline-word:nth-child(3) { animation-delay: 0.3s; }
.vp-headline.is-visible .vp-headline-word:nth-child(4) { animation-delay: 0.4s; }

@keyframes vp-word-enter {
  to { opacity: 1; transform: translateY(0); }
}

.vp-headline-accent {
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.vp-headline-accent::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  z-index: -1;
  border-radius: 50%;
}

.vp-subhead {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--color-text-muted, #64748b);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 40px;
  opacity: 0;
  transform: translateY(20px);
}

.vp-headline.is-visible + .vp-subhead {
  animation: vp-subhead-enter 0.5s ease-out 0.5s forwards;
}

@keyframes vp-subhead-enter {
  to { opacity: 1; transform: translateY(0); }
}

.vp-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
  opacity: 0;
}

.vp-headline.is-visible ~ .vp-actions {
  animation: vp-actions-enter 0.4s ease-out 0.7s forwards;
}

@keyframes vp-actions-enter {
  to { opacity: 1; }
}

.vp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vp-cta--primary {
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  color: #fff;
  position: relative;
}

.vp-cta--primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  opacity: 0;
  z-index: -1;
  filter: blur(8px);
  transition: opacity 0.3s ease;
}

.vp-cta--primary:hover::before {
  opacity: 0.6;
}

.vp-cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(99,102,241,0.3);
}

.vp-cta--primary svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.vp-cta--primary:hover svg {
  transform: translateX(4px);
}

.vp-cta--secondary {
  background: #fff;
  color: var(--color-text, #1e293b);
  border: 1px solid #e2e8f0;
}

.vp-cta--secondary:hover {
  border-color: var(--color-accent, #6366f1);
  color: var(--color-accent, #6366f1);
}

.vp-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
}

.vp-headline.is-visible ~ .vp-social-proof {
  animation: vp-proof-enter 0.4s ease-out 0.9s forwards;
}

@keyframes vp-proof-enter {
  to { opacity: 1; }
}

.vp-proof-avatars {
  display: flex;
}

.vp-proof-avatars img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
}

.vp-proof-avatars img:first-child {
  margin-left: 0;
}

.vp-proof-text {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
  .vp-headline-word,
  .vp-subhead,
  .vp-actions,
  .vp-social-proof {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
```

*JS behavior:*
```javascript
const headline = document.querySelector('.vp-headline');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.5 });
observer.observe(headline);

const ctaBtn = document.querySelector('.vp-cta--primary');
ctaBtn.addEventListener('mousemove', (e) => {
  const rect = ctaBtn.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  const maxMove = 8;
  const moveX = (x / rect.width) * maxMove * 2;
  const moveY = (y / rect.height) * maxMove * 2;
  ctaBtn.style.transform = `translate(${moveX}px, ${moveY}px)`;
});

ctaBtn.addEventListener('mouseleave', () => {
  ctaBtn.style.transform = '';
});
```

---

**Three-column value props.** Feature cards with icons, titles, and benefit statements.

*Animation & Visual Details:*
- *Entrance*: Cards stagger in from translateY(30px), 0.1s between each
- *Hover*: Card lifts with shadow, icon has gradient background intensification
- *Gradients*: Icon backgrounds have gradient fill (accent at 15%)
- *Radial circles*: Radial glow behind each icon
- *Scroll trigger*: IntersectionObserver at 15% threshold
- *JS interaction*: None beyond entrance

```html
<section data-amb-section="features" class="vp-section vp-section--columns">
  <div class="container">
    <div class="vp-header">
      <h2 class="vp-title">Why teams choose Acme</h2>
      <p class="vp-desc">Built for teams that ship daily and can't afford downtime</p>
    </div>
    <div class="vp-columns">
      <article class="vp-card">
        <div class="vp-card-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
        </div>
        <h3 class="vp-card-title">Deploy in seconds</h3>
        <p class="vp-card-text">Push to production without the anxiety. Our system automatically detects failures and rolls back before users notice.</p>
      </article>
      <article class="vp-card">
        <div class="vp-card-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <h3 class="vp-card-title">Zero-downtime safety</h3>
        <p class="vp-card-text">Every deploy creates an instant snapshot. If anything goes wrong, one click reverts to the exact previous state.</p>
      </article>
      <article class="vp-card">
        <div class="vp-card-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
        </div>
        <h3 class="vp-card-title">Works with your stack</h3>
        <p class="vp-card-text">GitHub, GitLab, Bitbucket — we integrate with the tools you already use. No new workflows to learn.</p>
      </article>
    </div>
  </div>
</section>
```

```css
.vp-section--columns {
  padding: clamp(64px, 8vw, 100px) 0;
  background: #fff;
}

.vp-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(40px, 5vw, 60px);
}

.vp-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 12px;
}

.vp-desc {
  font-size: 1.05rem;
  color: var(--color-text-muted, #64748b);
}

.vp-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.vp-card {
  background: #f8fafc;
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vp-card.is-visible {
  animation: vp-card-enter 0.5s ease-out forwards;
}

.vp-card:nth-child(1).is-visible { animation-delay: 0s; }
.vp-card:nth-child(2).is-visible { animation-delay: 0.1s; }
.vp-card:nth-child(3).is-visible { animation-delay: 0.2s; }

@keyframes vp-card-enter {
  to { opacity: 1; transform: translateY(0); }
}

.vp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}

.vp-card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(124,58,237,0.06));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vp-card-icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vp-card:hover .vp-card-icon::before {
  opacity: 1;
}

.vp-card:hover .vp-card-icon {
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(124,58,237,0.1));
}

.vp-card-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-accent, #6366f1);
}

.vp-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 8px;
}

.vp-card-text {
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.6;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .vp-card {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const vpCards = document.querySelectorAll('.vp-card');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });
vpCards.forEach(card => observer.observe(card));
```

---

**Problem-solution contrast.** Side-by-side comparison showing old way vs new way.

*Animation & Visual Details:*
- *Entrance*: Left side slides in from left, right from right, 0.3s delay between
- *Hover*: Rows highlight with gradient background
- *Gradients*: "New way" has gradient left border (accent colors)
- *Radial circles*: Check/x icons have radial background
- *Scroll trigger*: IntersectionObserver at 20% threshold
- *JS interaction*: None beyond entrance

```html
<section data-amb-section="value-prop" class="vp-section vp-section--contrast">
  <div class="container">
    <h2 class="vp-title">The difference is in the details</h2>
    <div class="vp-contrast">
      <div class="vp-contrast-side vp-contrast-side--old">
        <span class="vp-contrast-label">The old way</span>
        <ul class="vp-contrast-list">
          <li class="vp-contrast-item">
            <span class="vp-contrast-icon vp-contrast-icon--bad">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </span>
            <span class="vp-contrast-text">40+ minute average deploy time</span>
          </li>
          <li class="vp-contrast-item">
            <span class="vp-contrast-icon vp-contrast-icon--bad">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </span>
            <span class="vp-contrast-text">Manual rollback takes hours</span>
          </li>
          <li class="vp-contrast-item">
            <span class="vp-contrast-icon vp-contrast-icon--bad">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </span>
            <span class="vp-contrast-text">No visibility into deployment status</span>
          </li>
          <li class="vp-contrast-item">
            <span class="vp-contrast-icon vp-contrast-icon--bad">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </span>
            <span class="vp-contrast-text">Incidents reported by users, not systems</span>
          </li>
        </ul>
      </div>
      <div class="vp-contrast-divider">
        <span class="vp-contrast-vs">VS</span>
      </div>
      <div class="vp-contrast-side vp-contrast-side--new">
        <span class="vp-contrast-label">With Acme</span>
        <ul class="vp-contrast-list">
          <li class="vp-contrast-item">
            <span class="vp-contrast-icon vp-contrast-icon--good">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            <span class="vp-contrast-text">Sub-3-minute deploys, every time</span>
          </li>
          <li class="vp-contrast-item">
            <span class="vp-contrast-icon vp-contrast-icon--good">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            <span class="vp-contrast-text">One-click instant rollback</span>
          </li>
          <li class="vp-contrast-item">
            <span class="vp-contrast-icon vp-contrast-icon--good">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            <span class="vp-contrast-text">Real-time dashboard for every deploy</span>
          </li>
          <li class="vp-contrast-item">
            <span class="vp-contrast-icon vp-contrast-icon--good">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
            </span>
            <span class="vp-contrast-text">Auto-detect and auto-revert failures</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
```

```css
.vp-section--contrast {
  padding: clamp(64px, 8vw, 100px) 0;
  background: var(--color-bg-alt, #f8fafc);
}

.vp-section--contrast .vp-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 48px;
}

.vp-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 700px) {
  .vp-contrast {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .vp-contrast-divider {
    transform: rotate(90deg);
  }
}

.vp-contrast-side {
  opacity: 0;
}

.vp-contrast-side--old {
  transform: translateX(-40px);
}

.vp-contrast-side--new {
  transform: translateX(40px);
}

.vp-contrast-side.is-visible {
  animation: vp-contrast-enter 0.5s ease-out forwards;
}

.vp-contrast-side--old.is-visible { animation-delay: 0s; }
.vp-contrast-side--new.is-visible { animation-delay: 0.2s; }

@keyframes vp-contrast-enter {
  to { opacity: 1; transform: translateX(0); }
}

.vp-contrast-label {
  display: inline-block;
  padding: 6px 14px;
  background: #e2e8f0;
  color: var(--color-text-muted, #64748b);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 20px;
  margin-bottom: 20px;
}

.vp-contrast-side--new .vp-contrast-label {
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(124,58,237,0.1));
  color: var(--color-accent, #6366f1);
}

.vp-contrast-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vp-contrast-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.vp-contrast-side--new .vp-contrast-item {
  border-left: 3px solid var(--color-accent, #6366f1);
  background: linear-gradient(135deg, rgba(99,102,241,0.02), transparent);
}

.vp-contrast-item:hover {
  background: rgba(99,102,241,0.03);
}

.vp-contrast-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vp-contrast-icon--bad {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
  position: relative;
}

.vp-contrast-icon--bad::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(239,68,68,0.2) 0%, transparent 70%);
  border-radius: 50%;
}

.vp-contrast-icon--good {
  background: rgba(34,197,94,0.1);
  position: relative;
}

.vp-contrast-icon--good::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(34,197,94,0.2) 0%, transparent 70%);
  border-radius: 50%;
}

.vp-contrast-icon svg {
  width: 16px;
  height: 16px;
}

.vp-contrast-text {
  font-size: 0.95rem;
  color: var(--color-text, #1e293b);
}

.vp-contrast-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
}

.vp-contrast-vs {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted, #64748b);
  padding: 8px 16px;
  background: #fff;
  border-radius: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .vp-contrast-side {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const contrastSides = document.querySelectorAll('.vp-contrast-side');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.2 });
contrastSides.forEach(side => observer.observe(side));
```

---

**Specific outcome callouts.** Metrics-driven value props with animated numbers.

*Animation & Visual Details:*
- *Entrance*: Stats fade in with scale 0.9 → 1, stagger 0.15s
- *Hover*: Stat card has gradient border glow
- *Gradients*: Metric values have gradient text fill
- *Radial circles*: Radial ring around each stat
- *Scroll trigger*: IntersectionObserver at 25% threshold
- *JS interaction*: Count-up animation on viewport entry

```html
<section data-amb-section="stats" class="vp-section vp-section--stats">
  <div class="container">
    <div class="vp-stats-header">
      <h2 class="vp-title">Results you can measure</h2>
      <p class="vp-desc">Real numbers from real customers who've made the switch</p>
    </div>
    <div class="vp-stats-grid">
      <article class="vp-stat-card">
        <div class="vp-stat-ring">
          <svg viewBox="0 0 36 36">
            <circle cx="18" cy="18" r="16" fill="none" stroke="#f1f5f9" stroke-width="2"/>
            <circle cx="18" cy="18" r="16" fill="none" stroke="url(#vp-gradient)" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="30" stroke-linecap="round"/>
            <defs>
              <linearGradient id="vp-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#6366f1"/>
                <stop offset="100%" stop-color="#7c3aed"/>
              </linearGradient>
            </defs>
          </svg>
          <span class="vp-stat-value" data-target="93">0</span><span class="vp-stat-suffix">%</span>
        </div>
        <span class="vp-stat-label">Faster deploys</span>
        <span class="vp-stat-context">Average team goes from 40min to 3min</span>
      </article>
      <article class="vp-stat-card">
        <div class="vp-stat-ring">
          <svg viewBox="0 0 36 36">
            <circle cx="18" cy="18" r="16" fill="none" stroke="#f1f5f9" stroke-width="2"/>
            <circle cx="18" cy="18" r="16" fill="none" stroke="url(#vp-gradient)" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="15" stroke-linecap="round"/>
          </svg>
          <span class="vp-stat-value" data-target="85">0</span><span class="vp-stat-suffix">%</span>
        </div>
        <span class="vp-stat-label">Fewer incidents</span>
        <span class="vp-stat-context">Auto-rollback catches issues before users</span>
      </article>
      <article class="vp-stat-card">
        <div class="vp-stat-ring">
          <svg viewBox="0 0 36 36">
            <circle cx="18" cy="18" r="16" fill="none" stroke="#f1f5f9" stroke-width="2"/>
            <circle cx="18" cy="18" r="16" fill="none" stroke="url(#vp-gradient)" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="10" stroke-linecap="round"/>
          </svg>
          <span class="vp-stat-value" data-target="99">0</span><span class="vp-stat-suffix">.9%</span>
        </div>
        <span class="vp-stat-label">Uptime SLA</span>
        <span class="vp-stat-context">Enterprise-grade reliability guarantee</span>
      </article>
    </div>
  </div>
</section>
```

```css
.vp-section--stats {
  padding: clamp(64px, 8vw, 100px) 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.03), rgba(124,58,237,0.01));
}

.vp-stats-header {
  text-align: center;
  max-width: 500px;
  margin: 0 auto clamp(48px, 6vw, 64px);
}

.vp-stats-header .vp-title {
  margin-bottom: 12px;
}

.vp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .vp-stats-grid { grid-template-columns: 1fr; }
}

.vp-stat-card {
  text-align: center;
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  border: 1px solid #f1f5f9;
  opacity: 0;
  transform: scale(0.9);
}

.vp-stat-card.is-visible {
  animation: vp-stat-enter 0.5s ease-out forwards;
}

.vp-stat-card:nth-child(1).is-visible { animation-delay: 0s; }
.vp-stat-card:nth-child(2).is-visible { animation-delay: 0.15s; }
.vp-stat-card:nth-child(3).is-visible { animation-delay: 0.3s; }

@keyframes vp-stat-enter {
  to { opacity: 1; transform: scale(1); }
}

.vp-stat-card:hover {
  border-color: rgba(99,102,241,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.04);
}

.vp-stat-ring {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
}

.vp-stat-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.vp-stat-ring::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
}

.vp-stat-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vp-stat-suffix {
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vp-stat-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 4px;
}

.vp-stat-context {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
  .vp-stat-card {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const statCards = document.querySelectorAll('.vp-stat-card');
const statValues = document.querySelectorAll('.vp-stat-value');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.25 });
statCards.forEach(card => observer.observe(card));

const countObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const el = entry.target;
      const target = parseInt(el.dataset.target);
      const duration = 2000;
      const start = performance.now();
      const easeOutQuart = t => 1 - Math.pow(1 - t, 4);

      const animate = (now) => {
        const elapsed = now - start;
        const progress = Math.min(elapsed / duration, 1);
        const eased = easeOutQuart(progress);
        el.textContent = Math.round(eased * target);

        if (progress < 1) {
          requestAnimationFrame(animate);
        } else {
          el.textContent = target;
        }
      };

      requestAnimationFrame(animate);
      countObserver.unobserve(el);
    }
  });
}, { threshold: 0.5 });
statValues.forEach(val => countObserver.observe(val));
```

---

Copy rules: the formula "For {audience}, {product} is the {category} that {differentiator}. Unlike {alternative}, we {key contrast}" works as a starting point. Rewrite to sound human. Lead with the visitor's outcome, not the product's self-image. Name specific outcomes, not vague benefits.

Three tests: could your competitor say this? Would a stranger from the target audience understand it in 5 seconds? Does it name a specific outcome? If any answer is no, rewrite.

Anti-patterns: opening with the company name ("Acme is a..."), opening with the category ("The deployment platform..."), generic descriptors ("powerful", "easy", "innovative").

CSS custom property summary:
```css
:root {
  --vp-enter-duration: 0.7s;
  --color-accent: #6366f1;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
}
```