/* roulang page: index */
:root {
            --primary: #FF5722;
            --primary-hover: #F4511E;
            --accent: #00E5FF;
            --bg-dark: #0D1117;
            --card-dark: #161B22;
            --text-dark: #0F172A;
            --text-muted: #64748B;
            --border-light: #E2E8F0;
            --radius-box: 12px;
            --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
            --shadow-card: 0 10px 30px -4px rgba(15, 23, 42, 0.08);
        }
        html { scroll-behavior: smooth; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; line-height: 1.75; }
        .section-padding { padding-top: 5rem; padding-bottom: 5rem; }
        @media (max-width: 768px) {
            .section-padding { padding-top: 3.5rem; padding-bottom: 3.5rem; }
        }
        .hero-bg-overlay {
            background: linear-gradient(135deg, rgba(13, 17, 23, 0.94) 0%, rgba(22, 27, 34, 0.88) 100%), url('/assets/images/26324ca72e280bbd.jpg') center/cover no-repeat;
        }
        .immersive-dark-bg {
            background: radial-gradient(circle at 80% 20%, rgba(0, 229, 255, 0.08) 0%, rgba(13, 17, 23, 1) 70%), url('/assets/images/74adbfc60666080f.webp') center/cover no-repeat;
        }
        .card-interactive {
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }
        .card-interactive:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border-color: #FF5722;
        }
        .accordion-content {
            transition: max-height 0.3s ease-out, opacity 0.25s ease-out;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
        }
        .accordion-content.active {
            max-height: 240px;
            opacity: 1;
        }