/* roulang page: index */
:root {
      --color-primary: #121316;
      --color-secondary: #2A2D34;
      --color-accent: #D4AF37;
      --color-bg-light: #F7F7F8;
      --color-border: #E5E7EB;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      color: #2A2D34;
      background-color: #FFFFFF;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
      -webkit-font-smoothing: antialiased;
    }
    .code-mask {
      background: radial-gradient(circle at 100% 0%, rgba(212, 175, 55, 0.08) 0%, rgba(18, 19, 22, 0.98) 70%);
    }
    .blueprint-grid {
      background-size: 24px 24px;
      background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    }
    .blueprint-grid-dark {
      background-size: 24px 24px;
      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);
    }
    .nav-blur {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .card-hover-trans {
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
    }
    .card-hover-trans:hover {
      transform: translateY(-4px);
    }