/* roulang page: index */
:root {
            --primary-teal: #0F4C3A;
            --primary-dark: #0A231C;
            --accent-green: #10B981;
            --accent-orange: #F97316;
            --bg-body: #F8FAFC;
            --text-main: #0F172A;
            --text-muted: #475569;
            --border-light: #E2E8F0;
        }
        body {
            background-color: var(--bg-body);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }
        .hero-pattern {
            background-image: radial-gradient(rgba(16, 185, 129, 0.12) 1px, transparent 1px);
            background-size: 28px 28px;
        }
        .card-elevated {
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .card-elevated:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 25px -5px rgba(15, 76, 58, 0.08), 0 8px 10px -6px rgba(15, 76, 58, 0.04);
        }
        details > summary {
            list-style: none;
        }
        details > summary::-webkit-details-marker {
            display: none;
        }
        details[open] summary svg {
            transform: rotate(180deg);
        }