/* roulang page: index */
:root {
            --brand-primary: #06b6d4;
            --brand-secondary: #8b5cf6;
            --brand-accent: #f43f5e;
            --bg-deep: #0b0f19;
            --bg-card-dark: #111827;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --border-glow: rgba(6, 182, 212, 0.25);
        }
        html { scroll-behavior: smooth; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; }
        body { background-color: #0b0f19; color: #f8fafc; overflow-x: hidden; }
        .bento-glow { box-shadow: 0 0 35px -5px rgba(6, 182, 212, 0.15); }
        .card-inner-glow { border: 1px solid rgba(255, 255, 255, 0.08); background: radial-gradient(circle at top left, rgba(139, 92, 246, 0.05), transparent 70%), #111827; }
        .hero-bg { background-image: linear-gradient(180deg, rgba(11,15,25,0.7) 0%, rgba(11,15,25,0.95) 100%), url('/assets/images/022e21e1148a1bbc.jpg'); background-size: cover; background-position: center; }
        .deep-gradient-bg { background-image: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.15) 0%, rgba(11, 15, 25, 1) 75%); }
        .text-glow { text-shadow: 0 0 16px rgba(6, 182, 212, 0.4); }
        .accordion-content { transition: max-height 0.3s ease-out, opacity 0.3s ease; }