/* ============================================
   HOMEPAGE
   ============================================ */

.hero {
  padding: var(--space-8) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--brand-primary-muted) 0%, transparent 60%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hero h1 { margin-bottom: var(--space-4); }
.hero h1 span { color: var(--brand-primary); }
.hero-sub { font-size: var(--text-lg); color: var(--text-secondary); margin-bottom: var(--space-6); max-width: 560px; margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* Quick start panel */
.quick-start { max-width: 640px; margin: 0 auto; }
.quick-start .card { padding: var(--space-6); }
.quick-start-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.quick-start-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .quick-start-row { grid-template-columns: 1fr; } }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.feature-card { text-align: center; }
.feature-icon { font-size: 2rem; margin-bottom: var(--space-3); }
.feature-card h4 { margin-bottom: var(--space-2); }
@media (max-width: 768px) { .feature-grid { grid-template-columns: 1fr; } }

/* Trust strip */
.trust-strip {
  display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-5) 0;
}
.trust-item {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-muted);
}
.trust-item:hover { color: var(--text-secondary); }

/* Pricing preview */
.pricing-toggle { display: flex; justify-content: center; margin-bottom: var(--space-6); }
.pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); max-width: 900px; margin: 0 auto; }
.pricing-card { position: relative; overflow: hidden; }
.pricing-card.featured { border-color: var(--brand-primary); }
.pricing-card.featured::before {
  content: 'Popular'; position: absolute; top: 12px; right: -28px;
  transform: rotate(45deg); background: var(--brand-primary); color: #fff;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  padding: 4px 32px;
}
.pricing-amount { font-size: var(--text-4xl); font-weight: var(--weight-bold); }
.pricing-amount span { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--text-muted); }
.pricing-features { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-5) 0; }
.pricing-feature { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.pricing-feature::before { content: '✓'; color: var(--success); font-weight: var(--weight-bold); }
.pricing-feature.locked { color: var(--text-muted); }
.pricing-feature.locked::before { content: '—'; color: var(--text-muted); }