/* Przegląd – styl strony (minimalny, uzupełniający base.css) */
.hero {
  padding: var(--space-12) 0 var(--space-8);
  background: linear-gradient(180deg, rgba(74,124,89,0.06) 0%, rgba(26,31,27,0) 60%);
}
.hero .hero-copy p { max-width: 60ch; }

.section { padding: var(--space-10) 0; }

.breadcrumb { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.breadcrumb ol { display: flex; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-dim); }
.breadcrumb li::before { content: "\203A"; margin: 0 var(--space-2); color: var(--color-neutral-500); }
.breadcrumb li:first-child::before { content: none; }

.list { display: grid; gap: var(--space-3); }

.cta { text-align: left; }
.cta p { max-width: 65ch; }

.related-links a { text-decoration: none; }
.related-links a:hover { transform: translateY(-2px); }

/* Prosta animacja pojawiania się sekcji */
.section, .hero, .card { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.section.in-view, .hero.in-view, .card.in-view { opacity: 1; transform: translateY(0); }