/* roulang page: index */
:root {
            --brand-primary: #0052D9;
            --brand-primary-dark: #003cab;
            --brand-primary-light: #EBF2FF;
            --accent-green: #00A870;
            --accent-orange: #FF7D00;
            --accent-gold: #D4AF37;
            --dark-bg: #0A1628;
            --dark-surface: #10213A;
            --text-main: #1D2129;
            --text-muted: #4E5969;
            --border-color: #E5E8ED;
        }

        html {
            scroll-behavior: smooth;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
            color: var(--text-main);
        }

        .hero-gold-gradient {
            background: linear-gradient(135deg, #09121F 0%, #152238 60%, #1A2E4C 100%);
        }

        .gold-border-glow {
            border: 1px solid rgba(212, 175, 55, 0.4);
            box-shadow: 0 0 25px rgba(212, 175, 55, 0.15);
        }

        .badge-vip-gold {
            background: linear-gradient(135deg, #D4AF37 0%, #FFDF73 50%, #AA820A 100%);
            color: #1a1300;
        }

        .card-custom-shadow {
            box-shadow: 0 6px 24px rgba(0, 82, 217, 0.06);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-custom-shadow:hover {
            box-shadow: 0 16px 36px rgba(0, 82, 217, 0.12);
            transform: translateY(-4px);
        }

        .nav-link {
            transition: color 0.2s ease;
        }
        .nav-link:hover {
            color: var(--brand-primary);
        }

        .step-line::after {
            content: '';
            position: absolute;
            top: 2rem;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #E5E8ED;
            z-index: 1;
        }
        @media (max-width: 768px) {
            .step-line::after {
                display: none;
            }
        }