/* roulang page: index */
:root {
            --bg-deep: #0D0F12;
            --bg-card: #16191E;
            --cyan: #00F2FE;
            --emerald: #10B981;
            --border-line: #E2E8F0;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: #334155;
            background-color: #F8FAFC;
            overflow-x: hidden;
        }
        .hero-mesh {
            background-image: linear-gradient(to right, rgba(13, 15, 18, 0.95), rgba(13, 15, 18, 0.88)), url('/assets/images/6d88aa5be83524fd.png');
            background-size: cover;
            background-position: center;
        }
        .dark-tech-pattern {
            background-image: linear-gradient(180deg, #0D0F12 0%, #16191E 100%);
        }
        .cyber-grid {
            background-size: 32px 32px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }
        .card-tech-hover {
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .card-tech-hover:hover {
            transform: translateY(-2px);
            border-color: #00F2FE;
            box-shadow: 0 10px 25px -5px rgba(0, 242, 254, 0.08);
        }
        details summary::-webkit-details-marker {
            display:none;
        }
        .tab-btn.active {
            color: #00F2FE;
            border-bottom: 2px solid #00F2FE;
            background: rgba(0, 242, 254, 0.05);
        }