/* roulang page: index */
:root {
            --primary: #0F3D3E;
            --secondary: #1B6B63;
            --accent: #D97724;
            --bg-light: #F8F7F4;
            --bg-gray: #EFF2F1;
            --bg-dark: #082223;
            --text-heading: #111C1C;
            --text-body: #4A5A59;
            --border-color: #DCE3E2;
        }
        html {
            scroll-behavior: smooth;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
            color: var(--text-heading);
            background-color: var(--bg-light);
        }
        .num-tabular {
            font-variant-numeric: tabular-nums;
        }
        .hero-carousel-slide {
            transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
        }
        .bento-card {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .bento-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 30px -4px rgba(15, 61, 62, 0.12);
            border-color: var(--secondary);
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(15, 61, 62, 0.05);
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #1B6B63;
            border-radius: 3px;
        }

body { font-family: sans-serif; }
        .spec-container { display: flex; flex-wrap: wrap; justify-content: space-around; }
        .spec-card { border: 1px solid #ccc; margin: 10px; padding: 15px; width: 300px; }
        h2 { text-align: center; }
        ul { list-style-type: none; padding: 0; }
        li { margin-bottom: 5px; }