/* roulang page: index */
:root {
            --primary: #06b6d4;
            --primary-hover: #0891b2;
            --secondary: #10b981;
            --accent: #6366f1;
            --bg-dark: #0b0f19;
            --card-dark: #111827;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border-light: rgba(226, 232, 240, 0.8);
            --border-dark: rgba(255, 255, 255, 0.08);
        }
        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
            line-height: 1.75;
            background-color: #0b0f19;
            color: #f8fafc;
            overflow-x: hidden;
        }
        .text-glow {
            text-shadow: 0 0 20px rgba(6, 182, 212, 0.45);
        }
        .bento-card {
            background: linear-gradient(180deg, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.65) 100%);
            border: 1px solid rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(12px);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .bento-card:hover {
            border-color: rgba(6, 182, 212, 0.35);
            transform: translateY(-4px);
            box-shadow: 0 16px 36px -10px rgba(6, 182, 212, 0.15);
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out;
        }
        .accordion-item.active .accordion-content {
            max-height: 500px;
        }
        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }