/* roulang page: index */
:root {
            --bg-deep: #080C14;
            --bg-secondary: #0D1527;
            --card-glass: rgba(15, 23, 42, 0.72);
            --border-glass: rgba(255, 255, 255, 0.08);
            --glow-blue: 0 0 24px rgba(30, 111, 255, 0.35);
            --glow-green: 0 0 20px rgba(0, 229, 153, 0.3);
        }
        body {
            background-color: var(--bg-deep);
            color: #94A3B8;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }
        .glow-card {
            background: var(--card-glass);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid var(--border-glass);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .glow-card:hover {
            border-color: rgba(30, 111, 255, 0.38);
            transform: translateY(-4px);
            box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6), var(--glow-blue);
        }
        .glow-btn-primary {
            background: linear-gradient(135deg, #1E6FFF 0%, #00B2FE 100%);
            box-shadow: 0 0 20px rgba(30, 111, 255, 0.4);
            transition: all 0.25s ease;
        }
        .glow-btn-primary:hover {
            box-shadow: 0 0 28px rgba(0, 178, 254, 0.65);
            transform: translateY(-2px);
        }
        .glow-btn-accent {
            background: linear-gradient(135deg, #00E599 0%, #00C880 100%);
            box-shadow: var(--glow-green);
            transition: all 0.25s ease;
        }
        .glow-btn-accent:hover {
            box-shadow: 0 0 28px rgba(0, 229, 153, 0.65);
            transform: translateY(-2px);
        }
        .code-pattern {
            background-image: radial-gradient(rgba(30, 111, 255, 0.12) 1px, transparent 1px);
            background-size: 28px 28px;
        }