/* roulang page: index */
:root {
            --primary: #0A3A2F;
            --accent: #00E599;
            --dark: #0D1412;
            --light-bg: #F8FAF9;
            --text-title: #111A16;
            --text-body: #4B5552;
            --border-color: #E2E8E5;
        }
        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: var(--light-bg);
            color: var(--text-body);
            line-height: 1.75;
            overflow-x: hidden;
        }
        .hero-diagonal {
            clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
        }
        @media (max-width: 768px) {
            .hero-diagonal {
                clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
            }
        }
        .card-custom {
            background: #FFFFFF;
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 20px -2px rgba(10,58,47,0.05);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-custom:hover {
            transform: translateY(-4px);
            border-color: var(--accent);
            box-shadow: 0 12px 30px -4px rgba(10,58,47,0.12);
        }
        .badge-pitch {
            background-color: rgba(0, 229, 153, 0.15);
            color: #0A3A2F;
            border: 1px solid rgba(0, 229, 153, 0.3);
        }