/* roulang page: index */
:root {
            --color-dark: #0f141c;
            --color-cyan: #0e7490;
            --color-accent: #d97706;
            --color-bg-alt: #f1f5f9;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            overflow-x: hidden;
            line-height: 1.75;
        }
        .circuit-bg {
            background-color: #0a0f18;
            background-image: radial-gradient(rgba(14, 116, 144, 0.15) 1px, transparent 1px);
            background-size: 24px 24px;
        }
        .gradient-overlay {
            background: linear-gradient(135deg, rgba(15, 20, 28, 0.95) 0%, rgba(10, 15, 24, 0.88) 100%);
        }
        .tech-border {
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .tech-border:hover {
            border-color: rgba(14, 116, 144, 0.5);
            box-shadow: 0 10px 25px -5px rgba(14, 116, 144, 0.1);
            transform: translateY(-2px);
        }
        .accordion-content {
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        .accordion-content.active {
            max-height: 300px;
            opacity: 1;
        }