/* roulang page: index */
:root {
            --canvas: #F8F9FA;
            --primary: #0A2540;
            --accent: #00D4B2;
            --bronze: #C5A880;
            --dark-canvas: #0B0F17;
            --text-main: #1A1F36;
            --text-muted: #4F566B;
            --border-line: #E3E8EE;
        }
        body {
            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: var(--canvas);
            color: var(--text-main);
            overflow-x: hidden;
        }
        .hero-clip-diagonal {
            clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
        }
        @media (max-width: 768px) {
            .hero-clip-diagonal {
                clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
            }
        }
        .text-accent { color: var(--accent); }
        .bg-accent { background-color: var(--accent); }
        .text-bronze { color: var(--bronze); }
        .border-line { border-color: var(--border-line); }
        .card-shadow {
            box-shadow: 0 20px 40px -15px rgba(10, 37, 64, 0.05);
        }
        .tech-dots {
            background-image: radial-gradient(#00D4B2 1px, transparent 1px);
            background-size: 24px 24px;
        }