/* roulang page: index */
:root {
      --bg-main: #080c14;
      --bg-card: #0f172a;
      --bg-card-alt: #162035;
      --border-glow: rgba(0, 242, 254, 0.18);
      --border-muted: rgba(255, 255, 255, 0.08);
      --accent-cyan: #00f2fe;
      --accent-cyan-dark: #00c0fa;
      --accent-violet: #8a2be2;
      --accent-purple: #7928ca;
      --accent-amber: #ffb800;
      --text-title: #f8fafc;
      --text-content: #94a3b8;
      --text-sub: #64748b;
    }

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

    /* 科技网格背景纹理 */
    .grid-matrix-bg {
      background-image: radial-gradient(rgba(0, 242, 254, 0.08) 1px, transparent 1px), radial-gradient(rgba(121, 40, 202, 0.05) 1px, transparent 1px);
      background-size: 32px 32px;
      background-position: 0 0, 16px 16px;
    }

    /* 弥散发光与边框效果 */
    .glow-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-glow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glow-card:hover {
      border-color: rgba(0, 242, 254, 0.45);
      box-shadow: 0 10px 30px -8px rgba(0, 242, 254, 0.18);
      transform: translateY(-2px);
    }

    .tech-border {
      border: 1px solid var(--border-muted);
    }

    .tech-border-cyan {
      border-color: var(--border-glow);
    }

    /* 线性渐变字效 */
    .text-gradient-cyan {
      background: linear-gradient(135deg, #ffffff 20%, #00f2fe 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .text-gradient-violet {
      background: linear-gradient(135deg, #00f2fe 0%, #a855f7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* 状态脉冲呼吸灯 */
    .pulse-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #10b981;
      box-shadow: 0 0 8px #10b981;
      animation: pulseAnim 2s infinite;
    }
    @keyframes pulseAnim {
      0% { opacity: 0.6; transform: scale(0.95); }
      50% { opacity: 1; transform: scale(1.2); }
      100% { opacity: 0.6; transform: scale(0.95); }
    }

    /* 自定义滚动条 */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #080c14;
    }
    ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #00f2fe;
    }