/* roulang page: index */
:root {
            --brand-primary: #00D2B4;
            --brand-navy: #0D3268;
            --brand-dark: #0A0E17;
            --brand-accent: #FFB800;
            --text-main: #1A202C;
            --text-muted: #4A5568;
            --bg-light: #F4F6F9;
            --border-light: #E2E8F0;
        }

        html {
            scroll-behavior: smooth;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: var(--bg-light);
            color: var(--text-main);
            line-height: 1.7;
            overflow-x: hidden;
        }

        .hero-mesh {
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(0, 210, 180, 0.12) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(13, 50, 104, 0.15) 0%, transparent 45%);
        }

        .dark-mesh {
            background-color: var(--brand-dark);
            background-image: 
                radial-gradient(circle at 80% 20%, rgba(0, 210, 180, 0.08) 0%, transparent 40%),
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 100% 100%, 40px 40px, 40px 40px;
        }

        .industrial-card {
            background: #FFFFFF;
            border: 1px solid var(--border-light);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px -4px rgba(13, 50, 104, 0.05);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .industrial-card:hover {
            transform: translateY(-4px);
            border-color: rgba(0, 210, 180, 0.5);
            box-shadow: 0 12px 30px -6px rgba(13, 50, 104, 0.12);
        }

        .industrial-card-dark {
            background: #121824;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.25s ease;
        }

        .industrial-card-dark:hover {
            border-color: var(--brand-primary);
            box-shadow: 0 0 25px rgba(0, 210, 180, 0.15);
        }

        .tag-badge {
            background: rgba(0, 210, 180, 0.1);
            color: #008f7a;
            border: 1px solid rgba(0, 210, 180, 0.25);
        }

        .metric-glow {
            text-shadow: 0 0 20px rgba(0, 210, 180, 0.4);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
        }

        .accordion-content.open {
            max-height: 500px;
            transition: max-height 0.4s ease-in-out;
        }