/* roulang page: index */
:root {
            --brand-red: #E63946;
            --brand-dark: #111317;
            --brand-slate: #1E293B;
            --brand-gray: #64748B;
            --brand-light: #F8F9FA;
            --brand-border: #E2E8F0;
            --brand-card: #FFFFFF;
            --status-green: #10B981;
        }

        body {
            background-color: var(--brand-light);
            color: #334155;
            -webkit-font-smoothing: antialiased;
        }

        .hero-bg-overlay {
            background: linear-gradient(135deg, rgba(17, 19, 23, 0.94) 0%, rgba(30, 41, 59, 0.88) 100%), url('/assets/images/01e5e7631445fa03.jpg') center/cover no-repeat;
        }

        .dark-section-bg {
            background-color: var(--brand-dark);
            background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 28px 28px;
        }

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

        .card-custom:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08);
            border-color: #CBD5E1;
        }

        .signal-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--status-green);
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: pulse-ring 2s infinite;
        }

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

        /* 移动端菜单抽屉过渡 */
        #mobile-menu {
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }
        #mobile-menu.hidden-drawer {
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
        }
        #mobile-menu.visible-drawer {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }