/* roulang page: index */
:root {
      --bg-dark: #0B0E14;
      --bg-secondary: #121721;
      --card-surface: #18202F;
      --accent-green: #00F5A0;
      --accent-cyan: #00D9F5;
      --accent-red: #FF5252;
      --border-line: rgba(255, 255, 255, 0.08);
      --text-muted: #94A3B8;
    }
    
    body {
      background-color: var(--bg-dark);
      color: #F8FAFC;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
      overflow-x: hidden;
    }

    .border-glow {
      border: 1px solid var(--border-line);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .border-glow:hover {
      border-color: rgba(0, 245, 160, 0.4);
      box-shadow: 0 0 25px rgba(0, 245, 160, 0.12);
    }

    .btn-brand-primary {
      background-color: var(--accent-green);
      color: #0B0E14;
      font-weight: 700;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-brand-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 24px rgba(0, 245, 160, 0.45);
      background-color: #05ffaa;
    }

    .btn-brand-outline {
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #FFFFFF;
      transition: all 0.25s ease;
    }
    .btn-brand-outline:hover {
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
      background: rgba(0, 217, 245, 0.05);
    }

    .ticker-tape {
      animation: ticker 40s linear infinite;
    }
    @keyframes ticker {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-50%, 0, 0); }
    }

    /* 倾斜错位视窗卡片 */
    .skew-hero-panel {
      transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
      transition: transform 0.5s ease;
    }
    .skew-hero-panel:hover {
      transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    }