/* roulang page: index */
:root {
            --primary-gradient: linear-gradient(135deg, #FF6B00 0%, #0057FF 100%);
            --color-orange: #FF6B00;
            --color-blue: #0057FF;
            --color-dark: #1A1A1A;
            --color-light: #FFFFFF;
            --color-gray: #F4F7FA;
            --color-text: #333333;
            --color-muted: #666666;
            --radius-main: 24px;
            --radius-card: 16px;
            --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: var(--color-text); background: #fafafa; }
        
        /* Layout */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .section { padding: 80px 0; }
        
        /* UI Components */
        .btn { display: inline-block; padding: 12px 28px; border-radius: 50px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; cursor: pointer; }
        .btn-primary { background: var(--primary-gradient); color: white; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,87,255,0.3); }
        
        .card { background: white; padding: 30px; border-radius: var(--radius-card); border: 1px solid rgba(0,0,0,0.05); transition: 0.3s; }
        .card:hover { box-shadow: var(--shadow-soft); }
        
        .badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; background: rgba(0,87,255,0.1); color: var(--color-blue); }

        /* Typography */
        h1, h2, h3 { color: var(--color-dark); line-height: 1.2; }
        .gradient-text { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        /* Navigation */
        .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100; padding: 15px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
        .nav-content { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-weight: 800; font-size: 20px; color: var(--color-dark); text-decoration: none; }
        
        /* Bento Grid Hero */
        .hero-bento { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 40px; }
        .hero-main { grid-column: 1 / 2; background: #fff; padding: 60px; border-radius: var(--radius-main); display: flex; flex-direction: column; justify-content: center; }
        .hero-sub { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
        
        /* Responsive */
        @media (max-width: 768px) {
            .hero-bento { grid-template-columns: 1fr; }
            .hero-main { padding: 30px; }
        }