/* roulang page: index */
:root {
            --color-primary: #0F2B48;
            --color-secondary: #0D9488;
            --color-accent: #D97706;
            --color-bg: #F8FAFC;
            --color-card: #FFFFFF;
            --color-text-main: #0B1528;
            --color-text-body: #334155;
            --color-text-muted: #64748B;
            --border-soft: rgba(226, 232, 240, 0.9);
            --shadow-subtle: 0 10px 30px -10px rgba(15, 43, 72, 0.08);
            --shadow-hover: 0 20px 35px -10px rgba(13, 148, 136, 0.15);
        }

        body {
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
            background-color: var(--color-bg);
            color: var(--color-text-body);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        .heading-tight {
            line-height: 1.25;
            letter-spacing: -0.02em;
        }

        .card-custom {
            background: #FFFFFF;
            border: 1px solid var(--border-soft);
            border-radius: 1rem;
            box-shadow: var(--shadow-subtle);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
        }

        .card-custom:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(13, 148, 136, 0.3);
        }

        .badge-soft {
            background-color: rgba(13, 148, 136, 0.1);
            color: #0D9488;
            border: 1px solid rgba(13, 148, 136, 0.2);
        }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out, opacity 0.3s ease;
            opacity: 0;
        }

        .faq-item.active .faq-content {
            max-height: 240px;
            opacity: 1;
        }

        .faq-icon {
            transition: transform 0.3s ease;
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }

        .hero-bg-overlay {
            background: linear-gradient(105deg, rgba(10, 25, 47, 0.94) 0%, rgba(15, 43, 72, 0.88) 50%, rgba(13, 148, 136, 0.65) 100%);
        }