/* roulang page: index */
:root {
            --primary-gradient: linear-gradient(135deg, #6C5CE7 0%, #A363D9 50%, #FF7675 100%);
            --accent-cyan: #00CEC9;
            --accent-danger: #FF5252;
            --bg-light: #F8FAFC;
            --text-heading: #1A1A2E;
            --text-body: #33334B;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-body);
            overflow-x: hidden;
        }

        .gradient-brand {
            background: var(--primary-gradient);
        }

        .gradient-text {
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-stacked-container {
            perspective: 1200px;
        }

        .card-tilt-primary {
            transform: rotate(-2deg) translateY(-8px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .card-tilt-secondary {
            transform: rotate(3deg) translateY(12px) translateX(15px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .card-tilt-tertiary {
            transform: rotate(-1deg) translateY(35px) translateX(-20px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .hero-stacked-container:hover .card-tilt-primary {
            transform: rotate(0deg) translateY(-14px) scale(1.02);
        }
        .hero-stacked-container:hover .card-tilt-secondary {
            transform: rotate(5deg) translateY(6px) translateX(25px);
        }
        .hero-stacked-container:hover .card-tilt-tertiary {
            transform: rotate(-3deg) translateY(45px) translateX(-30px);
        }

        .pulse-beacon {
            animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }

        @keyframes pulse-ring {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 206, 201, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 206, 201, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 206, 201, 0); }
        }

        /* 隐藏原生滚动条但支持滚动 */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

/* roulang page: category1 */
:root {
      --primary-gradient: linear-gradient(135deg, #6C5CE7 0%, #A363D9 50%, #FF7675 100%);
      --accent-cyan: #00CEC9;
      --accent-danger: #FF5252;
      --bg-light: #F8FAFC;
      --text-heading: #1A1A2E;
      --text-body: #33334B;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-body);
      overflow-x: hidden;
    }
    .gradient-brand {
      background: var(--primary-gradient);
    }
    .badge-geo-glow {
      box-shadow: 0 0 12px rgba(0, 206, 201, 0.45);
    }
    .badge-hot-glow {
      box-shadow: 0 0 12px rgba(255, 82, 82, 0.4);
    }
    .card-hover-shadow {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-hover-shadow:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 35px -10px rgba(108, 92, 231, 0.22);
    }