.home { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; } .home-hero { text-align: center; padding: 4rem 1rem; } .home-hero h1 { font-size: 3rem; margin-bottom: 1rem; color: #1a1a2e; } .home-subtitle { font-size: 1.2rem; color: #555; max-width: 560px; margin: 0 auto 2rem; line-height: 1.6; } .home-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn { padding: 0.8rem 2rem; border-radius: 8px; font-size: 1rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s; } .btn:hover { opacity: 0.85; } .btn-primary { background: #6c63ff; color: white; } .btn-secondary { background: #f0f0f0; color: #333; } .home-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .feature-card { background: white; border: 1px solid #e8e8e8; border-radius: 12px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .feature-icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; } .feature-card h3 { margin-bottom: 0.5rem; color: #1a1a2e; } .feature-card p { color: #666; font-size: 0.95rem; line-height: 1.5; }