/* roulang page: index */
:root {
            --brand-dark: #0F172A;
            --brand-primary: #0284C7;
            --brand-teal: #0D9488;
            --brand-light: #F8FAFC;
        }
        html {
            scroll-behavior: smooth;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }
        .coupon-ticket {
            background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
            position: relative;
            mask-image: radial-gradient(circle at 0% 50%, transparent 12px, black 13px), radial-gradient(circle at 100% 50%, transparent 12px, black 13px);
            mask-composite: intersect;
            -webkit-mask-image: radial-gradient(circle at 0% 50%, transparent 12px, black 13px), radial-gradient(circle at 100% 50%, transparent 12px, black 13px);
            -webkit-mask-composite: source-in;
        }
        .hero-bg-overlay {
            background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 20%, rgba(15, 23, 42, 0.85) 60%, rgba(15, 23, 42, 0.65) 100%);
        }