/* roulang page: index */
:root {
            --bg-base: #0B0E14;
            --bg-surface: #111622;
            --bg-elevated: #182030;
            --brand-green: #00D285;
            --brand-green-hover: #00b874;
            --brand-blue: #1E5AFF;
            --brand-orange: #FF7D00;
            --text-main: #FFFFFF;
            --text-body: #E2E8F0;
            --text-muted: #94A3B8;
            --border-subtle: rgba(255, 255, 255, 0.08);
            --border-hover: rgba(0, 210, 133, 0.4);
            --font-stack: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
        }

        html {
            scroll-behavior: smooth;
            background-color: var(--bg-base);
            color: var(--text-body);
            font-family: var(--font-stack);
        }

        body {
            line-height: 1.75;
            overflow-x: hidden;
        }

        .heading-lh {
            line-height: 1.25;
        }

        .custom-glass {
            background: rgba(17, 22, 34, 0.88);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--border-subtle);
        }

        .card-tech {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-subtle);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-tech:hover {
            border-color: var(--brand-green);
            transform: translateY(-3px);
            box-shadow: 0 16px 32px -8px rgba(0, 210, 133, 0.12);
        }

        .btn-brand {
            background-color: var(--brand-green);
            color: #070A0F;
            font-weight: 600;
            transition: all 0.25s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            min-width: 44px;
        }

        .btn-brand:hover {
            background-color: var(--brand-green-hover);
            box-shadow: 0 0 20px rgba(0, 210, 133, 0.35);
            transform: translateY(-1px);
        }

        .btn-outline {
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #FFFFFF;
            background: rgba(255, 255, 255, 0.04);
            transition: all 0.25s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            min-width: 44px;
        }

        .btn-outline:hover {
            border-color: var(--brand-blue);
            background: rgba(30, 90, 255, 0.12);
            color: #FFFFFF;
        }

        /* FAQ Accordion */
        .faq-item input[type="checkbox"]:checked ~ .faq-content {
            max-height: 400px;
            opacity: 1;
            padding-top: 1rem;
        }

        .faq-item input[type="checkbox"]:checked ~ label .faq-icon {
            transform: rotate(180deg);
            color: var(--brand-green);
        }

        .faq-content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
        }

        /* Pulse glow dot */
        .pulse-dot {
            box-shadow: 0 0 0 0 rgba(0, 210, 133, 0.7);
            animation: pulse-ring 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
        }
        @keyframes pulse-ring {
            to {
                box-shadow: 0 0 0 8px rgba(0, 210, 133, 0);
            }
        }

/* roulang page: category1 */
:root {
      --bg-base: #0B0E14;
      --bg-surface: #111622;
      --bg-elevated: #182030;
      --brand-green: #00D285;
      --brand-green-hover: #00b874;
      --brand-blue: #1E5AFF;
      --brand-orange: #FF7D00;
      --text-main: #FFFFFF;
      --text-body: #E2E8F0;
      --text-muted: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-hover: rgba(0, 210, 133, 0.4);
      --font-stack: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    }
    html {
      scroll-behavior: smooth;
      background-color: var(--bg-base);
      color: var(--text-body);
      font-family: var(--font-stack);
    }
    body {
      line-height: 1.75;
      overflow-x: hidden;
    }
    .heading-lh {
      line-height: 1.25;
    }
    .card-tech {
      background-color: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-tech:hover {
      border-color: var(--brand-green);
      transform: translateY(-3px);
      box-shadow: 0 16px 32px -8px rgba(0, 210, 133, 0.12);
    }
    .btn-brand {
      background-color: var(--brand-green);
      color: #070A0F;
      font-weight: 600;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
    }
    .btn-brand:hover {
      background-color: var(--brand-green-hover);
      box-shadow: 0 0 20px rgba(0, 210, 133, 0.35);
      transform: translateY(-1px);
    }
    .btn-outline {
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.04);
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
    }
    .btn-outline:hover {
      border-color: var(--brand-blue);
      background: rgba(30, 90, 255, 0.12);
      color: #FFFFFF;
    }
    .faq-item input[type="checkbox"]:checked ~ .faq-content {
      max-height: 420px;
      opacity: 1;
      padding-top: 1rem;
    }
    .faq-item input[type="checkbox"]:checked ~ label .faq-icon {
      transform: rotate(180deg);
      color: var(--brand-green);
    }
    .faq-content {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    .temp-glow {
      background: radial-gradient(circle at 50% 0%, rgba(0, 210, 133, 0.15), transparent 70%);
    }

/* roulang page: category2 */
:root {
        --bg-base: #0B0E14;
        --bg-surface: #111622;
        --bg-elevated: #182030;
        --brand-green: #00D285;
        --brand-green-hover: #00b874;
        --brand-blue: #1E5AFF;
        --brand-orange: #FF7D00;
        --text-main: #FFFFFF;
        --text-body: #E2E8F0;
        --text-muted: #94A3B8;
        --border-subtle: rgba(255, 255, 255, 0.08);
        --border-hover: rgba(0, 210, 133, 0.4);
        --font-stack: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    }
    html {
        scroll-behavior: smooth;
        background-color: var(--bg-base);
        color: var(--text-body);
        font-family: var(--font-stack);
    }
    body {
        line-height: 1.75;
        overflow-x: hidden;
    }
    .heading-lh {
        line-height: 1.25;
    }
    .card-tech {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-tech:hover {
        border-color: var(--brand-green);
        transform: translateY(-3px);
        box-shadow: 0 16px 32px -8px rgba(0, 210, 133, 0.12);
    }
    .card-alert {
        background-color: var(--bg-surface);
        border: 1px solid rgba(255, 125, 0, 0.25);
        transition: all 0.3s ease;
    }
    .card-alert:hover {
        border-color: var(--brand-orange);
        box-shadow: 0 12px 28px -6px rgba(255, 125, 0, 0.18);
    }
    .btn-brand {
        background-color: var(--brand-green);
        color: #070A0F;
        font-weight: 600;
        transition: all 0.25s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }
    .btn-brand:hover {
        background-color: var(--brand-green-hover);
        box-shadow: 0 0 20px rgba(0, 210, 133, 0.35);
        transform: translateY(-1px);
    }
    .btn-outline {
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
        background: rgba(255, 255, 255, 0.04);
        transition: all 0.25s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }
    .btn-outline:hover {
        border-color: var(--brand-blue);
        background: rgba(30, 90, 255, 0.12);
        color: #FFFFFF;
    }
    /* FAQ Accordion */
    .faq-item input[type="checkbox"]:checked ~ .faq-content {
        max-height: 400px;
        opacity: 1;
        padding-top: 1rem;
    }
    .faq-item input[type="checkbox"]:checked ~ label .faq-icon {
        transform: rotate(180deg);
        color: var(--brand-green);
    }
    .faq-content {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
    }

/* roulang page: category3 */
:root {
      --bg-base: #0B0E14;
      --bg-surface: #111622;
      --bg-elevated: #182030;
      --brand-green: #00D285;
      --brand-green-hover: #00b874;
      --brand-blue: #1E5AFF;
      --brand-orange: #FF7D00;
      --text-main: #FFFFFF;
      --text-body: #E2E8F0;
      --text-muted: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-hover: rgba(0, 210, 133, 0.4);
      --font-stack: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    }
    html {
      scroll-behavior: smooth;
      background-color: var(--bg-base);
      color: var(--text-body);
      font-family: var(--font-stack);
    }
    body {
      line-height: 1.75;
      overflow-x: hidden;
    }
    .heading-lh {
      line-height: 1.25;
    }
    .card-tech {
      background-color: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-tech:hover {
      border-color: var(--brand-green);
      transform: translateY(-3px);
      box-shadow: 0 16px 32px -8px rgba(0, 210, 133, 0.12);
    }
    .btn-brand {
      background-color: var(--brand-green);
      color: #070A0F;
      font-weight: 600;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
    }
    .btn-brand:hover {
      background-color: var(--brand-green-hover);
      box-shadow: 0 0 20px rgba(0, 210, 133, 0.35);
      transform: translateY(-1px);
    }
    .btn-outline {
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.04);
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
    }
    .btn-outline:hover {
      border-color: var(--brand-blue);
      background: rgba(30, 90, 255, 0.12);
      color: #FFFFFF;
    }
    /* FAQ手风琴 */
    .faq-item input[type="checkbox"]:checked ~ .faq-content {
      max-height: 400px;
      opacity: 1;
      padding-top: 1rem;
    }
    .faq-item input[type="checkbox"]:checked ~ label .faq-icon {
      transform: rotate(180deg);
      color: var(--brand-green);
    }
    .faq-content {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    /* 移动端菜单抽屉 */
    #mobile-menu {
      transition: transform 0.3s ease-in-out;
    }
    #mobile-menu.translate-x-full {
      transform: translateX(100%);
    }
    #mobile-menu.translate-x-0 {
      transform: translateX(0);
    }

/* roulang page: category4 */
:root {
      --bg-base: #0B0E14;
      --bg-surface: #111622;
      --bg-elevated: #182030;
      --brand-green: #00D285;
      --brand-green-hover: #00b874;
      --brand-blue: #1E5AFF;
      --brand-orange: #FF7D00;
      --text-main: #FFFFFF;
      --text-body: #E2E8F0;
      --text-muted: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-hover: rgba(0, 210, 133, 0.4);
      --font-stack: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    }
    html {
      scroll-behavior: smooth;
      background-color: var(--bg-base);
      color: var(--text-body);
      font-family: var(--font-stack);
    }
    body {
      line-height: 1.75;
      overflow-x: hidden;
    }
    .heading-lh {
      line-height: 1.25;
    }
    .card-tech {
      background-color: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-tech:hover {
      border-color: var(--brand-green);
      transform: translateY(-3px);
      box-shadow: 0 16px 32px -8px rgba(0, 210, 133, 0.12);
    }
    .btn-brand {
      background-color: var(--brand-green);
      color: #070A0F;
      font-weight: 600;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
    }
    .btn-brand:hover {
      background-color: var(--brand-green-hover);
      box-shadow: 0 0 20px rgba(0, 210, 133, 0.35);
      transform: translateY(-1px);
    }
    .btn-outline {
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.04);
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
    }
    .btn-outline:hover {
      border-color: var(--brand-blue);
      background: rgba(30, 90, 255, 0.12);
      color: #FFFFFF;
    }
    .faq-item input[type="checkbox"]:checked ~ .faq-content {
      max-height: 400px;
      opacity: 1;
      padding-top: 1rem;
    }
    .faq-item input[type="checkbox"]:checked ~ label .faq-icon {
      transform: rotate(180deg);
      color: var(--brand-green);
    }
    .faq-content {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    .table-tech th, .table-tech td {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

/* roulang page: category5 */
:root {
      --bg-base: #0B0E14;
      --bg-surface: #111622;
      --bg-elevated: #182030;
      --brand-green: #00D285;
      --brand-green-hover: #00b874;
      --brand-blue: #1E5AFF;
      --brand-orange: #FF7D00;
      --text-main: #FFFFFF;
      --text-body: #E2E8F0;
      --text-muted: #94A3B8;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-hover: rgba(0, 210, 133, 0.4);
      --font-stack: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    }
    html {
      scroll-behavior: smooth;
      background-color: var(--bg-base);
      color: var(--text-body);
      font-family: var(--font-stack);
    }
    body {
      line-height: 1.75;
      overflow-x: hidden;
    }
    .heading-lh {
      line-height: 1.25;
    }
    .card-tech {
      background-color: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-tech:hover {
      border-color: var(--brand-green);
      transform: translateY(-3px);
      box-shadow: 0 16px 32px -8px rgba(0, 210, 133, 0.12);
    }
    .btn-brand {
      background-color: var(--brand-green);
      color: #070A0F;
      font-weight: 600;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
    }
    .btn-brand:hover {
      background-color: var(--brand-green-hover);
      box-shadow: 0 0 20px rgba(0, 210, 133, 0.35);
      transform: translateY(-1px);
    }
    .btn-outline {
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.04);
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
    }
    .btn-outline:hover {
      border-color: var(--brand-blue);
      background: rgba(30, 90, 255, 0.12);
      color: #FFFFFF;
    }
    .faq-item input[type="checkbox"]:checked ~ .faq-content {
      max-height: 400px;
      opacity: 1;
      padding-top: 1rem;
    }
    .faq-item input[type="checkbox"]:checked ~ label .faq-icon {
      transform: rotate(180deg);
      color: var(--brand-green);
    }
    .faq-content {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
    }