/* roulang page: index */
:root {
            --bg-body: #0A0A0A;
            --bg-card: #161616;
            --primary: #6B46C1;
            --secondary: #00D4FF;
            --accent-red: #F56565;
            --accent-green: #48BB78;
            --text-main: #FFFFFF;
            --text-sub: #A0AEC0;
            --border-color: #2D3748;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background-color: var(--bg-body); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        
        /* Layout */
        header { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 10, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); }
        .hero { padding: 4rem 0; min-height: 80vh; display: flex; align-items: center; background: radial-gradient(circle at 70% 30%, rgba(107, 70, 193, 0.15), transparent 50%); }
        section { padding: 5rem 0; }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
        
        /* Components */
        .btn { display: inline-block; padding: 0.8rem 1.8rem; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: none; }
        .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; }
        .btn-primary:hover { opacity: 0.9; transform: translateY(-2px); }
        .card { background: var(--bg-card); padding: 2rem; border-radius: 12px; border: 1px solid var(--border-color); transition: border-color 0.3s ease; }
        .card:hover { border-color: var(--secondary); }
        
        /* Typography */
        h1, h2, h3 { color: #FFFFFF; line-height: 1.2; font-weight: 700; margin-bottom: 1.5rem; }
        h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
        h2 { font-size: clamp(2rem, 4vw, 3rem); text-align: center; }
        p { color: var(--text-sub); margin-bottom: 1rem; }

        /* Navigation */
        .nav-links a { color: var(--text-main); text-decoration: none; padding: 0.5rem 1rem; font-size: 0.95rem; transition: color 0.3s; }
        .nav-links a:hover { color: var(--secondary); }

        /* Footer */
        footer { background: #050505; border-top: 1px solid var(--border-color); padding: 3rem 0; text-align: center; color: var(--text-sub); font-size: 0.9rem; }