/* roulang page: index */
:root {
            --color-primary: #059669;
            --color-primary-dark: #0F5132;
            --color-accent: #F59E0B;
            --color-bg-light: #F8FAFC;
            --color-bg-alt: #EEF2F6;
            --color-dark: #0F172A;
            --color-text: #334155;
            --color-muted: #64748B;
            --color-border: #E2E8F0;
            --radius-default: 0.75rem;
            --shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 25px -5px rgba(5, 150, 105, 0.15);
        }

        html {
            scroll-behavior: smooth;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }

        body {
            color: var(--color-text);
            background-color: var(--color-bg-light);
            line-height: 1.7;
        }

        .hero-overlay {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 81, 50, 0.85) 100%);
        }

        .data-card {
            background: #ffffff;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-default);
            box-shadow: var(--shadow-subtle);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .data-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .badge-live {
            background-color: #FEF3C7;
            color: #D97706;
            border: 1px solid #FCD34D;
        }

        .pulse-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #10B981;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: pulse-ring 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
        }

        @keyframes pulse-ring {
            0% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }
            70% {
                box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .accordion-item.active .accordion-content {
            max-height: 250px;
        }

        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }