/* roulang page: index */
:root {
      --primary: #1A162B;
      --deep-bg: #0F0C20;
      --brand-gradient: linear-gradient(135deg, #6C38FF 0%, #00F5D4 100%);
      --accent-red: #FF3366;
      --bg-light: #F8F9FD;
      --text-main: #0D0B1A;
      --text-muted: #4E4B66;
      --card-radius: 20px;
      --btn-radius: 10px;
      --shadow-base: 0 10px 30px -5px rgba(26, 22, 43, 0.05);
      --shadow-hover: 0 20px 40px -8px rgba(108, 56, 255, 0.18);
    }
    
    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-light);
      color: var(--text-muted);
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    .gradient-text {
      background: var(--brand-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .btn-gradient {
      background: var(--brand-gradient);
      color: #FFFFFF;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-gradient:hover {
      box-shadow: 0 10px 25px rgba(108, 56, 255, 0.4);
      transform: translateY(-2px);
    }

    .card-modern {
      background: #FFFFFF;
      border-radius: var(--card-radius);
      box-shadow: var(--shadow-base);
      border: 1px solid rgba(108, 56, 255, 0.08);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .card-modern:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-4px);
      border-color: rgba(108, 56, 255, 0.25);
    }

    .badge-capsule {
      border-radius: 9999px;
      padding: 4px 14px;
      font-size: 13px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .glass-nav {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(26, 22, 43, 0.06);
    }

    /* Terminal/Code snippet styling */
    .code-block {
      background: #141124;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }