/* roulang page: index */
:root {
            --pitch-dark: #0B1315;
            --pitch-graphite: #121C1B;
            --pitch-card: #162423;
            --mint-volt: #10F5A1;
            --mint-glow: rgba(16, 245, 161, 0.25);
            --emerald-tech: #059669;
            --cyan-accent: #00F0FF;
            --slate-body: #1F2937;
            --slate-muted: #64748B;
            --light-surface: #F8FAF9;
            --card-border: rgba(16, 185, 129, 0.16);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: var(--slate-body);
            background-color: #FFFFFF;
            overflow-x: hidden;
        }

        .bg-pitch-dark { background-color: var(--pitch-dark); }
        .bg-pitch-graphite { background-color: var(--pitch-graphite); }
        .bg-pitch-card { background-color: var(--pitch-card); }
        .text-mint-volt { color: var(--mint-volt); }
        .border-tech-border { border-color: var(--card-border); }

        .btn-volt {
            background-color: var(--mint-volt);
            color: #06281E;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 20px rgba(16, 245, 161, 0.2);
        }
        .btn-volt:hover {
            transform: translateY(-2px);
            background-color: #27fab0;
            box-shadow: 0 0 30px rgba(16, 245, 161, 0.45);
        }
        .btn-volt:active {
            transform: translateY(0);
        }

        .btn-outline-dark {
            border: 1px solid rgba(255, 255, 255, 0.25);
            color: #FFFFFF;
            transition: all 0.2s ease;
        }
        .btn-outline-dark:hover {
            border-color: var(--mint-volt);
            color: var(--mint-volt);
            background-color: rgba(16, 245, 161, 0.05);
        }

        .skew-hero-img {
            transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
            transition: transform 0.4s ease;
        }
        .skew-hero-img:hover {
            transform: perspective(1000px) rotateY(-2deg) rotateX(0deg);
        }

        .tag-pill {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.025em;
        }

        .tech-grid-pattern {
            background-size: 32px 32px;
            background-image: 
                linear-gradient(to right, rgba(16, 185, 129, 0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
        }

        .dark-tech-pattern {
            background-size: 36px 36px;
            background-image: 
                linear-gradient(to right, rgba(16, 245, 161, 0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(16, 245, 161, 0.04) 1px, transparent 1px);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, opacity 0.25s ease;
            opacity: 0;
        }
        .accordion-content.open {
            max-height: 300px;
            opacity: 1;
        }