/* roulang page: index */
:root {
            --color-titanium: #12151A;
            --color-carbon: #1A1E24;
            --color-teal: #00D09C;
            --color-amber: #F59E0B;
            --color-light-bg: #F8FAFC;
            --color-border: #E2E8F0;
        }
        body {
            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: #1A1E24;
            background-color: #FFFFFF;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        .hardware-card {
            background: #FFFFFF;
            border: 1px solid #E2E8F0;
            box-shadow: 0 4px 20px -2px rgba(18, 21, 26, 0.05);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .hardware-card:hover {
            border-color: rgba(0, 208, 156, 0.4);
            transform: translateY(-4px);
            box-shadow: 0 12px 30px -4px rgba(18, 21, 26, 0.1);
        }
        .dark-hardware-card {
            background: #14181E;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.25s ease;
        }
        .dark-hardware-card:hover {
            border-color: rgba(0, 208, 156, 0.5);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -3px rgba(0, 208, 156, 0.15);
        }
        .glow-btn {
            background-color: #00D09C;
            color: #0B0E11;
            font-weight: 600;
            transition: all 0.2s ease;
        }
        .glow-btn:hover {
            background-color: #00be8e;
            box-shadow: 0 0 18px rgba(0, 208, 156, 0.4);
        }
        .amber-badge {
            background-color: rgba(245, 158, 11, 0.12);
            color: #D97706;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }
        .teal-badge {
            background-color: rgba(0, 208, 156, 0.1);
            color: #00A37A;
            border: 1px solid rgba(0, 208, 156, 0.25);
        }
        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out;
        }
        .faq-item.active .faq-content {
            max-height: 240px;
        }
        .faq-item.active .faq-icon {
            transform: rotate(180deg);
            color: #00D09C;
        }