/* roulang page: index */
:root {
            --primary-accent: #e11d48;
            --primary-hover: #be123c;
            --bg-deep: #0b0f19;
            --surface-card: #141b2d;
            --border-soft: rgba(255, 255, 255, 0.08);
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-deep);
            color: var(--text-main);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
            line-height: 1.68;
            overflow-x: hidden;
        }

        /* 活力斜切背景 */
        .hero-slant {
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
        }

        .hero-banner-glass {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .card-glow {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid var(--border-soft);
        }

        .card-glow:hover {
            transform: translateY(-4px);
            border-color: rgba(225, 29, 72, 0.45);
            box-shadow: 0 16px 32px -8px rgba(225, 29, 72, 0.2);
        }

        .custom-scrollbar::-webkit-scrollbar {
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 9999px;
        }

        .btn-brand-glow {
            box-shadow: 0 4px 18px rgba(225, 29, 72, 0.4);
            transition: all 0.25s ease;
        }
        .btn-brand-glow:hover {
            box-shadow: 0 8px 26px rgba(225, 29, 72, 0.65);
            transform: translateY(-1px);
        }

/* roulang page: category1 */
:root {
      --primary-accent: #e11d48;
      --primary-hover: #be123c;
      --bg-deep: #0b0f19;
      --surface-card: #141b2d;
      --border-soft: rgba(255, 255, 255, 0.08);
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--bg-deep);
      color: var(--text-main);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      overflow-x: hidden;
    }
    .hero-banner-glass {
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .card-glow {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid var(--border-soft);
    }
    .card-glow:hover {
      transform: translateY(-4px);
      border-color: rgba(225, 29, 72, 0.45);
      box-shadow: 0 16px 32px -8px rgba(225, 29, 72, 0.2);
    }
    .btn-brand-glow {
      box-shadow: 0 4px 18px rgba(225, 29, 72, 0.4);
      transition: all 0.25s ease;
    }
    .btn-brand-glow:hover {
      box-shadow: 0 8px 26px rgba(225, 29, 72, 0.65);
      transform: translateY(-1px);
    }

/* roulang page: category2 */
:root {
      --primary-accent: #e11d48;
      --primary-hover: #be123c;
      --bg-deep: #0b0f19;
      --surface-card: #141b2d;
      --border-soft: rgba(255, 255, 255, 0.08);
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--bg-deep);
      color: var(--text-main);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      overflow-x: hidden;
    }
    .hero-slant {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
    }
    .hero-banner-glass {
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .card-glow {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid var(--border-soft);
    }
    .card-glow:hover {
      transform: translateY(-4px);
      border-color: rgba(225, 29, 72, 0.45);
      box-shadow: 0 16px 32px -8px rgba(225, 29, 72, 0.2);
    }
    .btn-brand-glow {
      box-shadow: 0 4px 18px rgba(225, 29, 72, 0.4);
      transition: all 0.25s ease;
    }
    .btn-brand-glow:hover {
      box-shadow: 0 8px 26px rgba(225, 29, 72, 0.65);
      transform: translateY(-1px);
    }

/* roulang page: category3 */
:root {
      --primary-accent: #e11d48;
      --primary-hover: #be123c;
      --bg-deep: #0b0f19;
      --surface-card: #141b2d;
      --border-soft: rgba(255, 255, 255, 0.08);
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--bg-deep);
      color: var(--text-main);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      overflow-x: hidden;
    }
    .hero-slant {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
    }
    .hero-banner-glass {
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .card-glow {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid var(--border-soft);
      background-color: #141b2d;
    }
    .card-glow:hover {
      transform: translateY(-4px);
      border-color: rgba(225, 29, 72, 0.45);
      box-shadow: 0 16px 32px -8px rgba(225, 29, 72, 0.2);
    }
    .btn-brand-glow {
      box-shadow: 0 4px 18px rgba(225, 29, 72, 0.4);
      transition: all 0.25s ease;
    }
    .btn-brand-glow:hover {
      box-shadow: 0 8px 26px rgba(225, 29, 72, 0.65);
      transform: translateY(-1px);
    }
    .stat-number {
      background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #f43f5e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

/* roulang page: category4 */
:root {
      --primary-accent: #e11d48;
      --primary-hover: #be123c;
      --bg-deep: #0b0f19;
      --surface-card: #141b2d;
      --border-soft: rgba(255, 255, 255, 0.08);
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--bg-deep);
      color: var(--text-main);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.68;
      overflow-x: hidden;
    }
    .hero-slant {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);
    }
    .hero-banner-glass {
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .card-glow {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid var(--border-soft);
      background-color: var(--surface-card);
    }
    .card-glow:hover {
      transform: translateY(-4px);
      border-color: rgba(225, 29, 72, 0.45);
      box-shadow: 0 16px 32px -8px rgba(225, 29, 72, 0.2);
    }
    .btn-brand-glow {
      box-shadow: 0 4px 18px rgba(225, 29, 72, 0.4);
      transition: all 0.25s ease;
    }
    .btn-brand-glow:hover {
      box-shadow: 0 8px 26px rgba(225, 29, 72, 0.65);
      transform: translateY(-1px);
    }
    .stat-badge {
      background: linear-gradient(135deg, rgba(225, 29, 72, 0.15), rgba(15, 23, 42, 0.6));
      border: 1px solid rgba(225, 29, 72, 0.3);
    }