/* roulang page: index */
body { font-family: sans-serif; margin: 0; padding: 0; }
        header, footer { background-color: #f0f0f0; padding: 1em; text-align: center; }
        nav { background-color: #ddd; padding: 0.5em; }
        nav ul { list-style: none; padding: 0; margin: 0; }
        nav ul li { display: inline; margin: 0 1em; }
        main { padding: 1em; }
        section { margin-bottom: 2em; }
        h2 { border-bottom: 1px solid #ccc; padding-bottom: 0.5em; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
        th, td { border: 1px solid #ccc; padding: 0.5em; text-align: left; }
        th { background-color: #eee; }
        .hero { background-color: #eaf7ff; padding: 2em; text-align: center; }
        .hero h1 { font-size: 2.5em; }
        .kpi-container { display: flex; flex-wrap: wrap; justify-content: space-around; }
        .kpi-card { width: 200px; margin: 1em; padding: 1em; border: 1px solid #ccc; text-align: center; }