body { background: #0a0a0f; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.hero-section { padding: 100px 0 80px; background: linear-gradient(135deg, #0a0a0f 0%, #0d2a1a 100%); }
.hero-title { font-size: 3rem; font-weight: 800; line-height: 1.1; }
.feature-card { background: #14141f; border: 1px solid #2a2a3a; border-radius: 12px; padding: 30px; transition: transform .2s; }
.feature-card:hover { transform: translateY(-4px); border-color: #198754; }
.feature-icon { font-size: 2.5rem; }
.pricing-card { background: #14141f; border: 1px solid #2a2a3a; border-radius: 16px; padding: 40px 30px; text-align: center; }
.pricing-card.featured { border-color: #198754; position: relative; }
.pricing-card.featured::before { content: 'Populaire'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #198754; color: #fff; padding: 4px 20px; border-radius: 20px; font-size: .85rem; font-weight: 600; }
.price-amount { font-size: 3.5rem; font-weight: 800; }
.dashboard-card { background: #14141f; border: 1px solid #2a2a3a; border-radius: 12px; padding: 24px; }
.config-box { background: #0a0a0f; border: 1px solid #2a2a3a; border-radius: 8px; padding: 16px; font-family: 'Courier New', monospace; font-size: .85rem; white-space: pre-wrap; word-break: break-all; max-height: 400px; overflow-y: auto; }
.status-badge { padding: 6px 14px; border-radius: 20px; font-size: .85rem; font-weight: 600; }
@media (max-width: 768px) { .hero-title { font-size: 2rem; } .price-amount { font-size: 2.5rem; } }