/* roulang page: index */
:root {
            --primary: #0F766E;
            --accent: #EA580C;
            --dark-green: #042F2E;
            --text-main: #0F172A;
            --text-sub: #334155;
            --text-muted: #64748B;
            --border-color: #E2E8F0;
        }
        body {
            color: var(--text-sub);
            background-color: #FFFFFF;
        }
        .bento-hero {
            background: linear-gradient(135deg, rgba(4, 47, 46, 0.92), rgba(15, 118, 110, 0.88)), url('/assets/images/d3d5699ad4f5d84b.webp') center/cover no-repeat;
        }
        .banner-pattern {
            background: linear-gradient(135deg, rgba(15, 118, 110, 0.95), rgba(4, 47, 46, 0.98)), url('/assets/images/844610c9f2194c4b.webp') center/cover no-repeat;
        }
        .coupon-cutout-left, .coupon-cutout-right {
            position: relative;
        }
        .coupon-cutout-left::after {
            content: '';
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #F8FAFC;
        }
        .coupon-cutout-right::after {
            content: '';
            position: absolute;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #F8FAFC;
        }