.about-heading { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2rem; }
.about-eyebrow { margin: 0 0 .8rem; color: var(--primary); font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.about-heading h2 { margin: 0; font-family: 'Manrope', sans-serif; font-size: clamp(2rem, 3.7vw, 3.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.13; color: var(--foreground); }
.about-heading h2 span { color: var(--primary); }
.about-experience { display: flex; align-items: center; gap: 1.2rem; max-width: 22rem; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--secondary); }
.about-years { flex-shrink: 0; font-family: 'Manrope', sans-serif; font-size: 3.3rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: var(--primary); }
.about-years span { font-size: .55em; vertical-align: top; }
.about-experience p { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--muted-foreground); }
.about-experience p strong { display: block; font-weight: 700; color: var(--foreground); }
.about-topics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.about-topic { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; padding: 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: .75rem; }
.about-topic-wide { grid-column: span 3; flex-direction: row; }
.about-topic-icon { flex-shrink: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .65rem; color: var(--primary); background: var(--secondary); }
.about-topic-icon svg { width: 1.4rem; height: 1.4rem; }
.about-topic h3 { margin: 0 0 .6rem; color: var(--foreground); font-size: 1rem; line-height: 1.4; font-weight: 800; }
.about-topic p { margin: 0; color: var(--muted-foreground); font-size: .82rem; line-height: 1.8; }
.about-topic p strong { font-weight: 600; color: var(--foreground); }
@media (max-width: 1023px) {
  .about-heading { align-items: flex-start; }
  .about-experience { max-width: 19rem; padding: 1.1rem; gap: 1rem; }
  .about-topic { padding: 1.25rem; }
}
@media (max-width: 767px) {
  .about-heading { flex-direction: column; gap: 1.5rem; }
  .about-experience { max-width: none; width: 100%; }
  .about-topics { grid-template-columns: 1fr; gap: .75rem; }
  .about-topic, .about-topic-wide { grid-column: auto; flex-direction: row; padding: 1.2rem; gap: .9rem; }
  .about-topic h3 { font-size: 1rem; }
  .about-topic p { font-size: .85rem; }
}