<div class="eb-caps rose">What We Do</div>
<h2 class="eb-heading">Design Systems That Scale</h2>
<p class="eb-sub">We build component libraries that grow with your product and keep teams aligned.</p>

<div class="eb-caps blue">Our Mission</div>
<h2 class="eb-heading">Making the Web Accessible</h2>
<p class="eb-sub">Every user deserves a seamless experience regardless of ability or device.</p>

<div class="eb-caps amber">Case Study</div>
<h2 class="eb-heading">Rebuilding Checkout</h2>
<p class="eb-sub">How we reduced cart abandonment by 35% through progressive disclosure.</p>

<div class="eb-caps teal">New Feature</div>
<h2 class="eb-heading">Real-Time Collaboration</h2>
<p class="eb-sub">Edit together, see changes instantly, and never lose sync with your team.</p>

.eb-caps {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.eb-caps.rose { color: rgba(244,63,94,.7); }
.eb-caps.blue { color: rgba(59,130,246,.7); }
.eb-caps.amber { color: rgba(245,158,11,.7); }
.eb-caps.teal { color: rgba(20,184,166,.7); }

<div class="eb-pill blue"><i class="ph ph-sparkle"></i> New Release</div>
<h2 class="eb-heading">Version 4.0 Is Here</h2>
<p class="eb-sub">Faster builds, smaller bundles, and a redesigned developer experience.</p>

<div class="eb-pill purple"><i class="ph ph-crown"></i> Premium</div>
<h2 class="eb-heading">Pro Analytics Dashboard</h2>
<p class="eb-sub">Advanced charts, custom reports, and real-time data for power users.</p>

<div class="eb-pill green"><i class="ph ph-check-circle"></i> Verified</div>
<h2 class="eb-heading">SOC 2 Compliant</h2>
<p class="eb-sub">Your data is protected by enterprise-grade security and encryption.</p>

<div class="eb-pill rose"><i class="ph ph-fire"></i> Trending</div>
<h2 class="eb-heading">Most Popular This Week</h2>
<p class="eb-sub">The templates and components developers are using right now.</p>

.eb-pill {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.eb-pill.blue {
  background: rgba(59,130,246,.12);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,.15);
}
.eb-pill i { font-size: 14px; }

<!-- Left line -->
<div class="eb-line amber">About Us</div>
<h2 class="eb-heading">A Decade of Innovation</h2>
<p class="eb-sub">Founded in 2014, we've grown from a garage startup to serving millions globally.</p>

<div class="eb-line teal">Services</div>
<h2 class="eb-heading">What We Offer</h2>
<p class="eb-sub">Full-stack development, design, and consulting for modern web products.</p>

<div class="eb-line rose">Featured Work</div>
<h2 class="eb-heading">Selected Projects</h2>
<p class="eb-sub">A curated collection of our best work from the past year.</p>

<!-- Centered lines on both sides -->
<div class="eb-line-center">Our Process</div>
<h2 class="eb-heading">How We Build</h2>
<p class="eb-sub">A proven four-step methodology that delivers results every time.</p>

.eb-line {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.eb-line::before {
  content: ''; width: 32px; height: 2px;
}
.eb-line.amber::before { background: #f59e0b; }

/* Centered: lines on both sides */
.eb-line-center {
  display: flex; align-items: center; gap: 16px;
}
.eb-line-center::before,
.eb-line-center::after {
  content: ''; height: 1px; width: 32px;
  background: rgba(139,92,246,.3);
}

<!-- Bare icon -->
<div class="eb-icon blue"><i class="ph ph-rocket-launch"></i> Getting Started</div>
<h2 class="eb-heading">Quick Start Guide</h2>
<p class="eb-sub">Go from zero to deployed in under five minutes with our CLI tool.</p>

<div class="eb-icon green"><i class="ph ph-shield-check"></i> Security</div>
<h2 class="eb-heading">Enterprise-Grade Protection</h2>
<p class="eb-sub">End-to-end encryption, SSO, and compliance certifications built in.</p>

<!-- Icon in circle -->
<div class="eb-icon-circle amber"><span class="icon-wrap"><i class="ph ph-lightning"></i></span> Performance</div>
<h2 class="eb-heading">Blazing Fast Delivery</h2>
<p class="eb-sub">Sub-50ms response times with edge caching across 200+ global nodes.</p>

<div class="eb-icon-circle teal"><span class="icon-wrap"><i class="ph ph-puzzle-piece"></i></span> Integrations</div>
<h2 class="eb-heading">Connect Everything</h2>
<p class="eb-sub">100+ native integrations with the tools your team already uses.</p>

.eb-icon {
  display: inline-flex;
  align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eb-icon i { font-size: 16px; }
.eb-icon.blue { color: rgba(59,130,246,.7); }
.eb-icon.blue i { color: #3b82f6; }

/* Circle variant */
.eb-icon-circle .icon-wrap {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center;
  background: rgba(245,158,11,.12);
  color: #f59e0b; font-size: 14px;
}

<div class="eb-gradient">Introducing</div>
<h2 class="eb-heading">The Future of Design</h2>
<p class="eb-sub">AI-powered tools that understand your brand and generate on-brand designs instantly.</p>

<div class="eb-gradient purple">Developer Tools</div>
<h2 class="eb-heading">Built for Speed</h2>
<p class="eb-sub">TypeScript-first SDK with auto-generated types and inline documentation.</p>

<div class="eb-gradient teal">Platform Update</div>
<h2 class="eb-heading">Smarter Analytics</h2>
<p class="eb-sub">ML-driven insights that surface the metrics that matter most to your business.</p>

<div class="eb-gradient sunset">Community</div>
<h2 class="eb-heading">Join 50K+ Creators</h2>
<p class="eb-sub">Connect, learn, and build with the largest community of independent makers.</p>

.eb-gradient {
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-block;
  background: linear-gradient(135deg, #f43f5e, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eb-gradient.purple {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eb-gradient.teal {
  background: linear-gradient(135deg, #14b8a6, #3b82f6);
  /* same clip properties */
}

<!-- With divider line -->
<div class="eb-numbered blue"><span class="eb-num">01</span><span class="eb-num-divider"></span> Discovery</div>
<h2 class="eb-heading">Understanding Your Goals</h2>
<p class="eb-sub">We start by listening. Deep-dive interviews to understand your users, market, and vision.</p>

<div class="eb-numbered rose"><span class="eb-num">02</span><span class="eb-num-divider"></span> Design</div>
<h2 class="eb-heading">Crafting the Experience</h2>
<p class="eb-sub">Wireframes, prototypes, and user testing to validate every design decision.</p>

<div class="eb-numbered green"><span class="eb-num">03</span><span class="eb-num-divider"></span> Development</div>
<h2 class="eb-heading">Building with Precision</h2>
<p class="eb-sub">Clean, tested code delivered in sprints with continuous integration.</p>

<!-- With circle number -->
<div class="eb-numbered blue"><span class="eb-num-circle">01</span> Getting Started</div>
<h2 class="eb-heading">Create Your Account</h2>
<p class="eb-sub">Sign up in seconds, no credit card required. Start building immediately.</p>

.eb-numbered {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.eb-num {
  font-family: 'DM Serif Display', serif;
  font-size: 20px; color: #3b82f6;
}
.eb-num-divider {
  width: 1px; height: 20px;
  background: rgba(59,130,246,.3);
}
.eb-num-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.15);
  color: #93c5fd;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
}

<!-- Dot separators -->
<div class="eb-tags blue">
  <span class="eb-tag-item">Design</span><span class="eb-tag-dot"></span>
  <span class="eb-tag-item">Tutorial</span><span class="eb-tag-dot"></span>
  <span class="eb-tag-item">8 Min Read</span>
</div>
<h2 class="eb-heading">Mastering Color Theory</h2>
<p class="eb-sub">A practical guide to choosing colors that work together and convey the right emotion.</p>

<div class="eb-tags rose">
  <span class="eb-tag-item">Engineering</span><span class="eb-tag-dot"></span>
  <span class="eb-tag-item">Apr 2025</span><span class="eb-tag-dot"></span>
  <span class="eb-tag-item">Advanced</span>
</div>
<h2 class="eb-heading">Optimizing React Renders</h2>
<p class="eb-sub">Techniques for eliminating unnecessary re-renders and keeping your app snappy.</p>

<!-- Slash separators -->
<div class="eb-tags teal">
  <span class="eb-tag-item">Product</span><span class="eb-tag-slash">/</span>
  <span class="eb-tag-item">Announcement</span><span class="eb-tag-slash">/</span>
  <span class="eb-tag-item">2025</span>
</div>
<h2 class="eb-heading">Introducing Teams</h2>
<p class="eb-sub">Collaborate in real-time with shared workspaces, permissions, and audit logs.</p>

<!-- With icons in the tags -->
<div class="eb-tags blue">
  <span class="eb-tag-item"><i class="ph ph-clock"></i> 5 min</span><span class="eb-tag-dot"></span>
  <span class="eb-tag-item"><i class="ph ph-book-open"></i> Guide</span><span class="eb-tag-dot"></span>
  <span class="eb-tag-item"><i class="ph ph-star"></i> Featured</span>
</div>
<h2 class="eb-heading">Getting Started Guide</h2>
<p class="eb-sub">Everything you need to know to be productive in your first 10 minutes.</p>

.eb-tags {
  display: flex;
  align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
}
.eb-tag-item {
  text-transform: uppercase;
  letter-spacing: .06em;
}
.eb-tags.blue .eb-tag-item {
  color: rgba(59,130,246,.6);
}
.eb-tag-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(59,130,246,.3);
}
.eb-tag-slash {
  color: rgba(255,255,255,.1);
  font-size: 13px;
}

<!-- Pulse glow -->
<div class="eb-anim-glow"><i class="ph ph-sparkle"></i> Now Available</div>
<h2 class="eb-heading">Pulse Glow Effect</h2>
<p class="eb-sub">Subtle opacity pulsing draws attention without being distracting. Great for "new" labels.</p>

<!-- Slide in -->
<div class="eb-anim-slide"><i class="ph ph-arrow-right"></i> Latest Update</div>
<h2 class="eb-heading">Slide-In Entrance</h2>
<p class="eb-sub">Eyebrow slides up from below with a fade. Clean entrance for scroll-triggered sections.</p>

<!-- Typewriter -->
<div class="eb-anim-type">What we do best &mdash;</div>
<h2 class="eb-heading">Typewriter Effect</h2>
<p class="eb-sub">Characters appear one by one with a blinking cursor. High-impact for hero sections.</p>

<!-- Underline reveal -->
<div class="eb-anim-underline">Featured Project</div>
<h2 class="eb-heading">Underline Reveal</h2>
<p class="eb-sub">A line scales in from left to right beneath the text. Elegant and minimal animation.</p>

/* Pulse Glow */
.eb-anim-glow {
  color: rgba(168,85,247,.7);
  animation: ebPulse 2s ease-in-out infinite;
}
@keyframes ebPulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

/* Slide In */
.eb-anim-slide {
  animation: ebSlideIn .6s ease-out both;
}
@keyframes ebSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Typewriter */
.eb-anim-type {
  font-family: 'Space Mono', monospace;
  border-right: 2px solid rgba(20,184,166,.5);
  white-space: nowrap; overflow: hidden;
  width: 0;
  animation:
    ebType 2s steps(20) .5s forwards,
    ebBlink .7s step-end infinite;
}
@keyframes ebType { to { width: 22ch; } }
@keyframes ebBlink { 50% { border-color: transparent; } }

/* Underline Reveal */
.eb-anim-underline {
  position: relative; padding-bottom: 4px;
}
.eb-anim-underline::after {
  content: ''; position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: #f59e0b;
  transform: scaleX(0);
  transform-origin: left;
  animation: ebUnderline .8s ease-out .3s forwards;
}
@keyframes ebUnderline { to { transform: scaleX(1); } }