.about-hero { background: var(--color-bg); color: var(--color-text); padding: var(--space-10) 0 calc(var(--space-10) + var(--space-4)); }
.about-hero h1 { font-size: var(--font-size-display); color: var(--color-text); max-width: 22ch; }
.about-hero p.lede { margin-top: var(--space-4); font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 56ch; }
.about-badges { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.about-badges span { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); }

.about-narrative { max-width: 68ch; }
.about-narrative p { margin-top: var(--space-4); color: var(--color-text-muted); }
.about-quote { margin-top: var(--space-8); border-left: 3px solid var(--color-accent); padding-left: var(--space-6); }
.about-quote p { font-family: var(--font-family-display); font-size: var(--font-size-headline); color: var(--color-text); font-weight: var(--font-weight-semibold); }
.about-quote cite { display: block; margin-top: var(--space-3); font-style: normal; color: var(--color-text-muted); font-size: var(--font-size-sm); }

.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-8); }
.pillar__num { font-family: var(--font-family-mono); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-accent-text); }
.pillar h3 { font-size: var(--font-size-lg); margin-top: var(--space-2); }
.pillar p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }

.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.status-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.status-card__tag { display: inline-block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em; }
.status-card__tag.live { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); }
.status-card__tag.soon { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
.status-card h3 { font-size: var(--font-size-lg); margin-top: var(--space-3); }
.status-card p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }

@media (max-width: 860px) {
  .pillar-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .status-grid { grid-template-columns: 1fr; }
}