* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; }
body { line-height: 1.6; color: #333; background-color: #f8f9fa; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
header { background-color: #2c3e50; color: white; padding: 2rem 0; text-align: center; }
header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
header p { font-size: 1.2rem; opacity: 0.9; }
.section { padding: 3rem 0; border-bottom: 1px solid #eee; }
.section-title { font-size: 2rem; text-align: center; margin-bottom: 2rem; color: #2c3e50; }
.advantages { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.advantage-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center; }
.advantage-card i { font-size: 2rem; color: #3498db; margin-bottom: 1rem; }
.conversion-types { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.conversion-types ul { list-style-position: inside; margin-left: 1rem; line-height: 2; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.step-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.step-card h3 { color: #3498db; margin-bottom: 0.5rem; }
.code-block { background: #2d2d2d; color: #f8f8f2; padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; overflow-x: auto; font-family: 'Courier New', monospace; }
.faq { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.faq-item { margin-bottom: 1.5rem; border-bottom: 1px solid #eee; padding-bottom: 1rem; }
.faq-question { font-weight: bold; color: #2c3e50; margin-bottom: 0.5rem; }
.cta { text-align: center; padding: 2rem 0; background-color: #3498db; color: white; margin: 2rem 0; border-radius: 8px; }
.cta-button { display: inline-block; padding: 1rem 2rem; background-color: #2980b9; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; margin-top: 1rem; }
.cta-button:hover { background-color: #1c6ea4; }
footer { text-align: center; padding: 2rem 0; color: #7f8c8d; }
@media (max-width: 768px) {
    header h1 { font-size: 2rem; }
    .section-title { font-size: 1.5rem; }
}