/* roulang page: index */
:root {
            --primary: #5E2BFF;
            --accent: #FF4D2D;
            --teal: #00D2B4;
            --dark: #0E0D14;
            --card-dark: #181622;
            --bg-light: #F7F6FA;
            --bg-alt: #EFECE6;
            --text-dark: #12111A;
            --text-body: #454354;
            --text-muted: #7A778E;
            --border-light: rgba(18, 17, 26, 0.08);
            --border-dark: rgba(255, 255, 255, 0.12);
        }
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--bg-light);
            color: var(--text-body);
            font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
            overflow-x: hidden;
        }
        .container-custom {
            max-width: 1320px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 24px;
            padding-right: 24px;
        }
        @media (max-width: 768px) {
            .container-custom {
                padding-left: 16px;
                padding-right: 16px;
            }
        }
        .card-shadow {
            box-shadow: 0 12px 32px -8px rgba(18, 17, 26, 0.06);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .card-shadow:hover {
            transform: translateY(-4px);
            border-color: rgba(94, 43, 255, 0.4);
            box-shadow: 0 20px 40px -12px rgba(94, 43, 255, 0.16);
        }
        .badge-pill {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 9999px;
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.04em;
        }
        .text-balanced {
            max-width: 68ch;
        }
        .active-tab {
            background-color: var(--primary);
            color: #ffffff;
            border-color: var(--primary);
        }
        .carousel-item {
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }
        .carousel-item.active {
            display: block;
            opacity: 1;
        }