/* roulang page: index */
:root {
            --brand-primary: #0A5A52;
            --brand-primary-light: #0E766C;
            --brand-accent: #10B981;
            --brand-accent-orange: #F97316;
            --dark-obsidian: #0A1118;
            --dark-surface: #101E27;
            --text-heading: #0F172A;
            --text-body: #334155;
            --text-muted: #64748B;
            --bg-neutral: #F8FAFC;
            --border-light: #E2E8F0;
            --radius-md: 0.75rem;
            --radius-lg: 1.25rem;
            --shadow-subtle: 0 4px 20px -2px rgba(10, 25, 41, 0.06);
            --shadow-float: 0 20px 35px -5px rgba(10, 25, 41, 0.12);
        }
        * { box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: var(--text-body);
            background-color: #FFFFFF;
            line-height: 1.75;
            letter-spacing: 0.015em;
            overflow-x: hidden;
        }
        .text-gradient {
            background: linear-gradient(135deg, #0A5A52 0%, #10B981 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero-clip-badge {
            clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
        }
        .glass-header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .hero-diagonal {
            transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .hero-diagonal:hover {
            transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
        }
        details > summary {
            list-style: none;
        }
        details > summary::-webkit-details-marker {
            display: none;
        }
        details[open] summary .faq-icon {
            transform: rotate(180deg);
        }