/* roulang page: index */
:root {
            --primary: #5B21B6;
            --primary-hover: #4C1D95;
            --accent: #FB923C;
            --accent-hover: #F97316;
            --bg-dark: #0B0F19;
            --card-dark: #1E293B;
            --slate-light: #F8FAFC;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: #F8FAFC;
            color: #1E293B;
            line-height: 1.7;
            overflow-x: hidden;
        }

        .hero-mesh {
            background-image: radial-gradient(rgba(91, 33, 182, 0.15) 1px, transparent 0), radial-gradient(rgba(251, 146, 60, 0.1) 1px, transparent 0);
            background-size: 28px 28px;
            background-position: 0 0, 14px 14px;
        }

        .dark-mesh {
            background-image: radial-gradient(rgba(91, 33, 182, 0.25) 1px, transparent 0);
            background-size: 32px 32px;
        }

        .transition-base {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-stack-main {
            transform: scale(1.03) translateY(0);
            z-index: 30;
        }
        .card-stack-left {
            transform: scale(0.95) rotate(-3deg) translate(-28px, 12px);
            z-index: 10;
        }
        .card-stack-right {
            transform: scale(0.95) rotate(3deg) translate(28px, 16px);
            z-index: 20;
        }

        @media (max-width: 1024px) {
            .card-stack-left, .card-stack-right {
                transform: none !important;
                margin-top: 1rem;
            }
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out;
        }
        .accordion-content.open {
            max-height: 480px;
        }