/* roulang page: index */
:root {
            --bg-base: #0B0C10;
            --bg-surface: #14161D;
            --bg-card: #1A1D27;
            --color-primary: #7C3AED;
            --color-primary-glow: rgba(124, 58, 237, 0.35);
            --color-neon: #10B981;
            --color-orange: #F97316;
            --color-silver: #F4F5F7;
            --text-primary: #FFFFFF;
            --text-secondary: #9CA3AF;
            --text-muted: #6B7280;
            --border-line: rgba(255, 255, 255, 0.08);
        }
        body {
            background-color: var(--bg-base);
            color: var(--text-primary);
            font-family: 'Noto Sans SC', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        .font-num {
            font-family: 'Rajdhani', ui-monospace, sans-serif;
        }
        .cut-corner {
            clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
        }
        .cut-corner-both {
            clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
        }
        .glow-card {
            border: 1px solid var(--border-line);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .glow-card:hover {
            border-color: var(--color-primary);
            box-shadow: 0 0 25px var(--color-primary-glow);
            transform: translateY(-4px);
        }
        .tab-btn.active {
            background: linear-gradient(90deg, #7C3AED 0%, #4C1D95 100%);
            border-color: #A78BFA;
            color: #FFFFFF;
        }
        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out;
        }
        .faq-item.open .faq-content {
            max-height: 200px;
        }
        .faq-item.open .faq-icon {
            transform: rotate(180deg);
        }