/* Features page specific styles (kept minimal; relies on base.css) */
.hero {
  padding: var(--space-16) 0 var(--space-12);
  background: linear-gradient(180deg, rgba(255, 184, 77, 0.07) 0%, rgba(26, 26, 36, 0.4) 100%);
  border-bottom: 1px solid var(--color-neutral-700);
}
.hero .subtitle {
  color: var(--color-text-secondary);
  max-width: 70ch;
}
.hero-ctas { margin-top: var(--space-6); }

.breadcrumbs { margin-bottom: var(--space-6); }

.section-features { padding: var(--space-12) 0; }
.feature-grid { align-items: stretch; }
.feature-media { margin-bottom: var(--space-4); }

.section-cta { padding: var(--space-12) 0 var(--space-16); }
.section-cta .card { gap: var(--space-4); }

/* Simple reveal animation for cards */
@media (prefers-reduced-motion: no-preference) {
  .card { opacity: 0; transform: translateY(12px); transition: opacity var(--transition-slow), transform var(--transition-slow); }
  .card.is-visible { opacity: 1; transform: translateY(0); }
}