/* roulang page: index */
:root {
            --primary: #0284c7;
            --primary-hover: #0369a1;
            --emerald-guard: #059669;
            --warning-alert: #d97706;
            --bg-dark: #0B0E14;
            --bg-card-dark: #121824;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --radius-box: 10px;
        }
        body {
            color: #1e293b;
            background-color: #ffffff;
            letter-spacing: -0.01em;
        }
        .circuit-bg {
            background-image: radial-gradient(rgba(2, 132, 199, 0.12) 1px, transparent 1px);
            background-size: 24px 24px;
        }
        .hero-mesh {
            background: linear-gradient(135deg, rgba(11, 14, 20, 0.96) 0%, rgba(15, 23, 42, 0.94) 100%);
        }
        .card-subtle {
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }
        .card-subtle:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px -6px rgba(2, 132, 199, 0.12);
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .accordion-item.active .accordion-content {
            max-height: 240px;
        }
        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }