/* roulang page: index */
:root {
      --bg-canvas: #070b14;
      --bg-surface: #0d1527;
      --bg-card: rgba(18, 28, 48, 0.7);
      --primary: #1e6fff;
      --secondary: #00f2fe;
      --border-light: rgba(255, 255, 255, 0.08);
      --border-active: rgba(30, 111, 255, 0.45);
    }
    html {
      scroll-behavior: smooth;
      background-color: var(--bg-canvas);
      color: #ffffff;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    }
    body {
      background-color: #070b14;
      overflow-x: hidden;
    }
    .glass-panel {
      background: rgba(18, 28, 48, 0.65);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .glass-panel:hover {
      border-color: rgba(30, 111, 255, 0.4);
      box-shadow: 0 10px 35px -10px rgba(30, 111, 255, 0.3);
    }
    .glass-nav {
      background: rgba(7, 11, 20, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .btn-glow-primary {
      background: linear-gradient(135deg, #1e6fff 0%, #00d2ff 100%);
      box-shadow: 0 4px 20px rgba(30, 111, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
      transition: all 0.25s ease;
    }
    .btn-glow-primary:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 30px rgba(0, 210, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    .btn-glow-secondary {
      background: rgba(13, 21, 39, 0.7);
      border: 1px solid rgba(0, 242, 254, 0.3);
      backdrop-filter: blur(8px);
      transition: all 0.25s ease;
    }
    .btn-glow-secondary:hover {
      border-color: #00f2fe;
      box-shadow: 0 0 20px rgba(0, 242, 254, 0.25);
      color: #00f2fe;
      transform: translateY(-2px);
    }
    .text-gradient {
      background: linear-gradient(135deg, #ffffff 30%, #00f2fe 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .tech-grid-bg {
      background-size: 40px 40px;
      background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    }
    .status-pulse {
      position: relative;
    }
    .status-pulse::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 50%;
      background: inherit;
      animation: pulse 2s infinite ease-out;
      opacity: 0.8;
    }
    @keyframes pulse {
      0% { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(2.4); opacity: 0; }
    }