* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { font-family: 'Poppins', sans-serif; background: #111; color: #fff; overflow-x: hidden; scroll-behavior: smooth; }
    a { color: #66ffcc; text-decoration: none; }
    .container { width: 90%; max-width: 1200px; margin: auto; padding: 40px 0; }

    header { background: #1c1c1c; padding: 20px 0; position: sticky; top: 0; z-index: 999; }
    
    .logo { font-size: 1.8rem; font-weight: 600; color: #66ffcc; }
    nav ul {
        display: flex;
        list-style: none;
        gap: 20px;
        flex-wrap: wrap;
        padding: 0;
        margin: 30px 0 0 0;
        }

        nav li {
        white-space: nowrap;
        }
    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        }

    section { opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out; padding-bottom: 60px; }
    section.visible { opacity: 1; transform: translateY(0); }

    h1, h2, h3, h4 { color: #fff; margin-bottom: 20px; }
    p { margin-bottom: 20px; color: #ccc; }

    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }


    .card { background: #1f1f1f; border: 1px solid #333; padding: 18px; border-radius: 10px; transition: transform 0.3s ease; }
    .card:hover { transform: translateY(-5px); }

    pre { background: #272822; color: #f8f8f2; padding: 10px; overflow-x: auto; border-radius: 8px; margin-bottom: 20px; }
    code { font-family: Consolas, monospace; }
    .code-block {position: relative; margin-bottom: 20px; }

    .copy-btn {position: absolute; top: 8px; right: 8px; background: #66ffcc; border: none; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 0.9rem; transition: 0.2s; }

    .copy-btn:hover {background: #55ddaa; }


    table { border-collapse: collapse; width: 100%; margin-bottom: 20px; }
    th, td { border: 1px solid #333; padding: 8px; text-align: left; }
    th { background-color: #222; }

    .btn-primary { background: #66ffcc; color: #000; padding: 12px 25px; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: transform 0.2s ease, background 0.3s; }
    .btn-primary:hover { transform: scale(1.05); background: #55ddaa; }

    .cta { background: #66ffcc; color: #000; text-align: center; padding: 60px 20px; }
    .cta h2 { color: #000; }
    .cta .btn-primary { background: #000; color: #66ffcc; }

    footer { text-align: center; padding: 20px; font-size: 0.8rem; background: #111; }

    @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 768px) { h1 { font-size: 2rem; } .header-container { flex-direction: column; align-items: flex-start; } nav ul { flex-direction: column; gap: 10px; }}