.hero {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #ffffff 0%, #f1f5fb 60%, #e3edf8 100%);
  border: var(--border-width) solid rgba(1, 97, 200, 0.12);
}

.toc {
  position: sticky;
  top: 1.5rem;
  background: #ffffff;
  border: var(--border-width) solid rgba(1, 97, 200, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
}

.quote {
  border-left: 4px solid var(--accent);
  background: #fff5f6;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-md);
}

.image-panel {
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #d7e2f0, #f2f7fd 60%, #ffffff 100%);
  height: 220px;
  border: var(--border-width) solid rgba(1, 97, 200, 0.12);
}

.category-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: var(--border-width) solid rgba(1, 97, 200, 0.12);
}