/* roulang page: index */
:root {
            --primary: #0052D9;
            --primary-accent: #00A389;
            --secondary: #635BFF;
            --bg-body: #F8FAFC;
            --text-main: #0F172A;
            --text-muted: #475569;
            --border-soft: #E2E8F0;
            --radius-box: 16px;
            --shadow-float: 0 16px 36px -12px rgba(15, 23, 42, 0.08);
        }
        html { scroll-behavior: smooth; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background-color: var(--bg-body); color: var(--text-main); }
        .hero-banner {
            background: linear-gradient(135deg, rgba(11, 15, 25, 0.94) 0%, rgba(15, 23, 42, 0.92) 100%), url('/assets/images/a81390e5ccb15d41.webp') center/cover no-repeat;
        }
        .deep-gradient-bg {
            background: radial-gradient(circle at top right, #1a2236 0%, #0B0F19 100%);
        }
        .custom-card-hover {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .custom-card-hover:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px -15px rgba(0, 82, 217, 0.12);
        }
        .glass-header {
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(12px);
        }
        .tab-active {
            border-bottom: 3px solid #0052D9;
            color: #0052D9;
            font-weight: 700;
        }