/* roulang page: index */
:root {
            --primary: #10b981;
            --primary-dark: #059669;
            --accent: #f97316;
            --bg-dark: #0b0f19;
            --card-dark: #111827;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --border-light: rgba(226, 232, 240, 0.8);
            --radius-box: 1.25rem;
        }

        body {
            font-family: var(--font-sans);
            color: var(--text-main);
            background-color: #ffffff;
            overflow-x: hidden;
        }

        .hero-industrial {
            background-image: linear-gradient(180deg, rgba(11, 15, 25, 0.88) 0%, rgba(17, 24, 39, 0.96) 100%), url('/assets/images/565681095a687b65.jpg');
            background-size: cover;
            background-position: center;
        }

        .cta-gradient-bg {
            background-image: linear-gradient(135deg, rgba(11, 15, 25, 0.94) 0%, rgba(5, 150, 105, 0.88) 100%), url('/assets/images/c5158285bbf4427d.webp');
            background-size: cover;
            background-position: center;
        }

        .glass-header {
            background: rgba(11, 15, 25, 0.92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .badge-live {
            display: inline-flex;
            align-items: center;
            column-gap: 0.375rem;
            padding: 0.25rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 9999px;
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .pulse-dot {
            width: 0.5rem;
            height: 0.5rem;
            background-color: #10b981;
            border-radius: 9999px;
            animation: pulse-ring 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse-ring {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(1.25); }
        }

        .stat-industrial-box {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
        }

        .card-custom {
            border: 1px solid var(--border-light);
            transition: all 0.3s ease;
        }

        .card-custom:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px -8px rgba(16, 185, 129, 0.12);
            border-color: rgba(16, 185, 129, 0.4);
        }

        .table-radar-grid {
            background-size: 24px 24px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        }