/* roulang page: index */
:root {
            --color-primary: #1E2522;
            --color-pine: #3A6351;
            --color-terracotta: #C87D55;
            --color-sand: #F9F8F6;
            --color-oatmeal: #F3F0EB;
            --color-basalt: #141816;
            --color-border: #E6E2DC;
            --color-text-main: #222524;
            --color-text-sub: #686C6A;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: var(--color-sand);
            color: var(--color-text-main);
            overflow-x: hidden;
            line-height: 1.65;
        }

        .hero-mesh {
            background-image: radial-gradient(at 0% 0%, rgba(58, 99, 81, 0.08) 0px, transparent 50%),
                              radial-gradient(at 100% 100%, rgba(200, 125, 85, 0.08) 0px, transparent 50%);
        }

        .dark-mesh {
            background-image: radial-gradient(circle at 20% 30%, rgba(58, 99, 81, 0.18) 0%, transparent 60%),
                              radial-gradient(circle at 80% 80%, rgba(200, 125, 85, 0.12) 0%, transparent 60%);
        }

        .touch-action-min {
            min-height: 44px;
            min-width: 44px;
        }