/* roulang page: index */
:root {
            --color-primary: #0F766E;
            --color-primary-hover: #0D655E;
            --color-accent: #84CC16;
            --color-orange: #F97316;
            --color-dark: #0B0F17;
            --color-border: #E2E8F0;
        }
        body {
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
            color: #0F172A;
            background-color: #FFFFFF;
            overflow-x: hidden;
        }
        .hero-banner-bg {
            background-image: linear-gradient(to right, rgba(11, 15, 23, 0.92) 0%, rgba(15, 23, 42, 0.85) 60%, rgba(15, 118, 110, 0.7) 100%), url('/assets/images/4079bdaf5401522e.webp');
            background-size: cover;
            background-position: center;
        }
        .pattern-grid {
            background-size: 32px 32px;
            background-image: linear-gradient(to right, rgba(226, 232, 240, 0.4) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(226, 232, 240, 0.4) 1px, transparent 1px);
        }
        .dark-pattern-grid {
            background-size: 32px 32px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out;
        }
        .accordion-item.active .accordion-content {
            max-height: 280px;
        }
        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }
        .accordion-item.active {
            border-left: 3px solid var(--color-primary);
        }