
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Poppins', sans-serif; background: #f5f5f5; color: #333; line-height: 1.6; }
        header { background: linear-gradient(90deg, #6a1b9a, #ab47bc); padding: 20px; text-align: center; color: #fff; }
        header h1 { font-size: 2.5em; font-weight: 700; }
        header p { font-size: 1.1em; font-weight: 300; }
        nav { background: #fff; padding: 15px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; }
        nav a { color: #333; text-decoration: none; margin: 0 15px; font-weight: 600; transition: color 0.3s; }
        nav a:hover { color: #6a1b9a; }
        .container { max-width: 1100px; margin: 0 auto; padding: 20px; }
        .hero { text-align: center; padding: 50px 20px; background: linear-gradient(90deg, #6a1b9a, #ab47bc); background-size: cover; background-position: center; animation: fadeIn 1s ease-in; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .hero h2 { font-size: 3em; font-weight: 700; color: #fff; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
        .hero p { font-size: 1.2em; max-width: 700px; margin: 0 auto; color: #fff; font-weight: 300; }
        .cta-span { display: inline-block; background: #6a1b9a; color: #fff; padding: 15px 30px; font-size: 1.2em; font-weight: 600; border-radius: 50px; margin-top: 20px; cursor: pointer; transition: transform 0.3s, background 0.3s; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
        .cta-span:hover { background: #4a148c; transform: scale(1.05); }
        .cta-span.centered { display: block; margin: 20px auto; width: fit-content; }
        .section { padding: 30px 20px; background: #fff; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .section h3 { font-size: 2em; text-align: center; color: #6a1b9a; font-weight: 600; margin-bottom: 15px; }
        .features, .content, .faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; justify-content: center; }
        .feature-card, .content-card, .faq-card { background: #fdfdfd; padding: 20px; border-radius: 10px; text-align: center; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
        .feature-card:hover, .content-card:hover, .faq-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
        .feature-card h4, .content-card h4, .faq-card h4 { font-size: 1.4em; color: #333; font-weight: 600; }
        .feature-card p, .content-card p, .faq-card p { font-size: 1em; color: #666; }
        footer { background: #222; padding: 20px; text-align: center; font-size: 0.9em; color: #fff; }
        footer a { color: #6a1b9a; text-decoration: none; margin: 0 8px; font-weight: 600; }
        footer a:hover { color: #fff; }
        .warning { background: #e1bee7; color: #333; padding: 15px; border-radius: 8px; margin: 20px 0; text-align: center; font-weight: 500; }
        @media (max-width: 768px) {
            .hero h2 { font-size: 2em; }
            .hero p { font-size: 1em; }
            .section h3 { font-size: 1.6em; }
            .cta-span { padding: 12px 25px; font-size: 1em; }
        }
    