/* roulang page: index */
:root {
            --primary: #16284F;
            --primary-deep: #0B1329;
            --accent: #0F766E;
            --amber-cta: #D97706;
            --bg-canvas: #F8FAFC;
            --bg-card: #FFFFFF;
            --text-heading: #0F172A;
            --text-body: #334155;
            --text-muted: #64748B;
            --border-soft: #E2E8F0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: var(--bg-canvas);
            color: var(--text-body);
            overflow-x: hidden;
        }

        .hero-pattern {
            background-color: #16284F;
            background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            background-size: 24px 24px;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out, opacity 0.3s ease-out;
            opacity: 0;
        }
        .accordion-content.active {
            max-height: 200px;
            opacity: 1;
        }

        .gradient-border-card {
            border: 1px solid rgba(22, 40, 79, 0.08);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .gradient-border-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 35px -8px rgba(22, 40, 79, 0.1);
            border-color: #0F766E;
        }