/* Features page styling (extracted from template inline CSS) */
.fp { background: var(--bg, #fafafa); }

/* Hero */
.fp-hero { position: relative; padding: 5rem 1.5rem 4rem; overflow: hidden; }
.fp-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent, #4f46e5) 0%, #7c3aed 50%, #ec4899 100%); opacity: 0.08; }
.fp-hero-content { position: relative; max-width: 800px; margin: 0 auto; text-align: center; }
.fp-hero-badge { display: inline-block; background: var(--accent, #4f46e5); color: #fff; padding: 0.5rem 1rem; border-radius: 2rem; font-size: 0.875rem; font-weight: 600; margin-bottom: 1.5rem; }
.fp-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.25rem; color: var(--ink, #1a1a1a); }
.fp-hero p { font-size: 1.125rem; color: var(--muted, #6b7280); max-width: 600px; margin: 0 auto 2rem; line-height: 1.6; }
.fp-hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.fp-hero-stats { display: flex; gap: 3rem; justify-content: center; flex-wrap: wrap; padding-top: 2rem; border-top: 1px solid var(--stroke, #e5e7eb); }
.fp-stat { text-align: center; }
.fp-stat-num { display: block; font-size: 1.75rem; font-weight: 800; color: var(--accent, #4f46e5); }
.fp-stat-label { font-size: 0.875rem; color: var(--muted, #6b7280); }

/* Buttons */
.fp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.75rem; border-radius: 10px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; }
.fp-btn-primary { background: var(--accent, #4f46e5); color: #fff; }
.fp-btn-primary:hover { background: #4338ca; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79,70,229,0.3); }
.fp-btn-secondary { background: var(--card, #fff); color: var(--ink, #1a1a1a); border: 2px solid var(--stroke, #e5e7eb); }
.fp-btn-secondary:hover { border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); }
.fp-btn-ghost { background: transparent; color: var(--accent, #4f46e5); border: 2px solid var(--accent, #4f46e5); }
.fp-btn-ghost:hover { background: var(--accent, #4f46e5); color: #fff; }
.fp-btn-lg { padding: 1rem 2.25rem; font-size: 1.125rem; }

/* How It Works */
.fp-how { padding: 4rem 1.5rem; max-width: 1000px; margin: 0 auto; }
.fp-how h2 { text-align: center; font-size: 1.75rem; font-weight: 700; margin-bottom: 3rem; color: var(--ink, #1a1a1a); }
.fp-how-grid { display: flex; align-items: flex-start; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.fp-how-step { flex: 1; min-width: 200px; max-width: 280px; text-align: center; padding: 1.5rem; }
.fp-how-num { width: 3rem; height: 3rem; background: linear-gradient(135deg, var(--accent, #4f46e5), #7c3aed); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; margin: 0 auto 1rem; }
.fp-how-step h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--ink, #1a1a1a); }
.fp-how-step p { font-size: 0.9375rem; color: var(--muted, #6b7280); line-height: 1.5; }
.fp-how-arrow { font-size: 2rem; color: var(--stroke, #d1d5db); padding-top: 2rem; }

/* Tabs */
.fp-tabs-section { padding: 2rem 1.5rem 4rem; max-width: 900px; margin: 0 auto; }
.fp-tabs { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 2.5rem; }
.fp-tab { padding: 0.875rem 1.5rem; border: 2px solid var(--stroke, #e5e7eb); border-radius: 2rem; background: var(--card, #fff); cursor: pointer; font-weight: 600; font-size: 1rem; color: var(--muted, #6b7280); transition: all 0.2s; }
.fp-tab:hover { border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); }
.fp-tab.active { background: var(--accent, #4f46e5); border-color: var(--accent, #4f46e5); color: #fff; }
.fp-tab-content { display: none; }
.fp-tab-content.active { display: block; }

/* Features List */
.fp-features { display: grid; gap: 1rem; }
.fp-feature { display: flex; gap: 1.25rem; padding: 1.5rem; background: var(--card, #fff); border: 1px solid var(--stroke, #e5e7eb); border-radius: 16px; transition: all 0.2s; }
.fp-feature:hover { border-color: var(--accent, #4f46e5); box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-2px); }
.fp-feature-icon { font-size: 2rem; width: 3.5rem; height: 3.5rem; background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(124,58,237,0.1)); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-feature-text h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--ink, #1a1a1a); }
.fp-feature-text p { font-size: 0.9375rem; color: var(--muted, #6b7280); line-height: 1.5; margin: 0; }

/* Trust */
.fp-trust { padding: 4rem 1.5rem; background: linear-gradient(180deg, transparent, rgba(79,70,229,0.03)); }
.fp-trust h2 { text-align: center; font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--ink, #1a1a1a); }
.fp-trust-sub { text-align: center; color: var(--muted, #6b7280); margin-bottom: 2.5rem; }
.fp-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.fp-trust-card { text-align: center; padding: 2rem 1.5rem; background: var(--card, #fff); border: 1px solid var(--stroke, #e5e7eb); border-radius: 16px; }
.fp-trust-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.fp-trust-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--ink, #1a1a1a); }
.fp-trust-card p { font-size: 0.9375rem; color: var(--muted, #6b7280); line-height: 1.5; margin: 0; }

/* FAQ */
.fp-faq { padding: 4rem 1.5rem; max-width: 700px; margin: 0 auto; }
.fp-faq h2 { text-align: center; font-size: 1.75rem; font-weight: 700; margin-bottom: 2rem; color: var(--ink, #1a1a1a); }
.fp-faq-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.fp-faq-item { background: var(--card, #fff); border: 1px solid var(--stroke, #e5e7eb); border-radius: 12px; overflow: hidden; }
.fp-faq-item summary { padding: 1.125rem 1.25rem; cursor: pointer; font-weight: 600; color: var(--ink, #1a1a1a); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.fp-faq-item summary::after { content: '+'; font-size: 1.25rem; color: var(--muted, #6b7280); }
.fp-faq-item[open] summary::after { content: '−'; }
.fp-faq-item p { padding: 0 1.25rem 1.125rem; margin: 0; color: var(--muted, #6b7280); line-height: 1.6; }

/* CTA */
.fp-cta { padding: 5rem 1.5rem; }
.fp-cta-inner { max-width: 600px; margin: 0 auto; text-align: center; background: linear-gradient(135deg, var(--accent, #4f46e5), #7c3aed); padding: 3.5rem 2rem; border-radius: 24px; color: #fff; }
.fp-cta h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; }
.fp-cta p { opacity: 0.9; margin-bottom: 2rem; }
.fp-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.fp-cta .fp-btn-primary { background: #fff; color: var(--accent, #4f46e5); }
.fp-cta .fp-btn-primary:hover { background: #f0f0f0; }
.fp-cta .fp-btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.fp-cta .fp-btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

@media (max-width: 700px) {
  .fp-how-arrow { display: none; }
  .fp-how-grid { flex-direction: column; align-items: center; }
  .fp-tabs { flex-direction: column; }
  .fp-tab { width: 100%; text-align: center; }
  .fp-feature { flex-direction: column; text-align: center; }
  .fp-feature-icon { margin: 0 auto; }
}