/* roulang page: index */
:root {
            --primary: #0B2447;
            --secondary: #19376D;
            --accent: #4D4CEE;
            --accent-green: #17CF97;
            --bg-light: #F7F9FC;
            --card-border: rgba(226, 232, 240, 0.8);
            --card-shadow: 0 10px 30px -10px rgba(11, 36, 71, 0.08);
            --card-hover-shadow: 0 20px 40px -12px rgba(77, 76, 238, 0.18);
        }

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

        .metric-glow {
            box-shadow: 0 0 25px rgba(23, 207, 151, 0.2);
        }

        .hero-bg-overlay {
            background: linear-gradient(135deg, rgba(11, 36, 71, 0.94) 0%, rgba(8, 18, 37, 0.96) 100%), url('/assets/images/4b13a7205ad4a5e4.jpg') center/cover no-repeat;
        }

        .card-custom {
            border: 1px solid var(--card-border);
            box-shadow: var(--card-shadow);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-custom:hover {
            box-shadow: var(--card-hover-shadow);
            transform: translateY(-4px);
            border-color: rgba(77, 76, 238, 0.3);
        }

        .pulse-dot {
            position: relative;
        }
        .pulse-dot::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: inherit;
            animation: pulse-ring 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }
        @keyframes pulse-ring {
            0% { transform: scale(0.95); opacity: 0.8; }
            50% { transform: scale(1.6); opacity: 0; }
            100% { transform: scale(0.95); opacity: 0; }
        }

        .faq-content {
            transition: max-height 0.35s ease-out, opacity 0.25s ease-in-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        .faq-item.active .faq-content {
            max-height: 300px;
            opacity: 1;
        }
        .faq-item.active .faq-chevron {
            transform: rotate(180deg);
        }