/* roulang page: index */
:root {
            --bg-color: #0D1117;
            --surface-color: #161B22;
            --border-color: #30363D;
            --text-main: #F0F6FC;
            --text-dim: #8B949E;
            --accent-green: #2EA043;
            --highlight-green: #3FB950;
            --warning-orange: #F0883E;
            --info-blue: #58A6FF;
            --radius: 4px;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; }
        a { text-decoration: none; color: inherit; transition: 0.3s; }
        ul { list-style: none; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
        
        /* Header */
        header { border-bottom: 1px solid var(--border-color); background: var(--bg-color); position: sticky; top: 0; z-index: 100; }
        .nav-top { font-size: 12px; padding: 8px 0; color: var(--text-dim); display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); }
        .nav-main { padding: 16px 0; display: flex; align-items: center; justify-content: space-between; }
        .logo { font-size: 20px; font-weight: bold; color: var(--highlight-green); }
        .nav-links a { margin-left: 24px; font-weight: 500; font-size: 14px; }
        .nav-links a:hover { color: var(--highlight-green); }
        .btn-cta { background: var(--accent-green); padding: 8px 16px; border-radius: var(--radius); color: #fff; display: inline-block; }
        
        /* Section */
        section { padding: 80px 0; border-bottom: 1px solid var(--border-color); }
        h2 { font-size: 32px; margin-bottom: 40px; text-align: center; }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
        
        /* Cards */
        .card { background: var(--surface-color); border: 1px solid var(--border-color); padding: 24px; border-radius: var(--radius); transition: 0.3s; }
        .card:hover { border-color: var(--accent-green); transform: translateY(-2px); }
        
        /* Components */
        .badge { background: rgba(46, 160, 67, 0.1); color: var(--highlight-green); padding: 4px 8px; border-radius: 4px; font-size: 12px; }
        .footer { padding: 40px 0; color: var(--text-dim); font-size: 14px; text-align: center; }
        
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .grid-3 { grid-template-columns: 1fr; }
        }