/* roulang page: index */
:root {
            --primary: #0E3B32;
            --primary-dark: #082620;
            --night: #081412;
            --accent: #C29F68;
            --accent-warm: #DFBE85;
            --bg-light: #F9F9F6;
            --text-main: #1D2422;
            --text-sub: #50615C;
            --border-light: #E6E9DE;
            --shadow-soft: 0 10px 30px -10px rgba(14, 59, 50, 0.08);
            --shadow-hover: 0 20px 40px -15px rgba(14, 59, 50, 0.16);
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
        body { color: var(--text-main); background-color: #FFFFFF; line-height: 1.8; }
        .hero-banner-bg {
            background-image: linear-gradient(180deg, rgba(8, 20, 18, 0.85) 0%, rgba(14, 59, 50, 0.78) 100%), url('/assets/images/3f6eb69ca1af5ec0.jpg');
            background-size: cover;
            background-position: center;
        }
        .section-alt { background-color: var(--bg-light); }
        .gold-glow { text-shadow: 0 2px 10px rgba(194, 159, 104, 0.35); }
        .card-custom {
            background: #FFFFFF;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-soft);
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .card-custom:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: var(--accent);
        }
        .btn-gold {
            background: linear-gradient(135deg, var(--goldAccent) 0%, var(--goldWarm) 100%);
            color: #081412;
            transition: all 0.3s ease;
        }
        .btn-gold:hover {
            box-shadow: 0 8px 24px rgba(194, 159, 104, 0.4);
            transform: translateY(-1px);
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out;
        }
        .accordion-item.active .accordion-content {
            max-height: 240px;
        }
        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }