/* roulang page: index */
:root {
      --bg-main: #0B0E14;
      --bg-surface: #121721;
      --color-emerald: #00E599;
      --color-border: #20293A;
    }
    * {
      box-sizing: border-box;
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--bg-main);
      color: #F1F5F9;
      overflow-x: hidden;
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    .grid-pattern {
      background-image: radial-gradient(rgba(0, 229, 153, 0.08) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .custom-border {
      border: 1px solid #20293A;
    }
    .custom-border:hover {
      border-color: rgba(0, 229, 153, 0.35);
    }
    .hero-clip {
      clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }
    @media (max-width: 1024px) {
      .hero-clip {
        clip-path: none;
      }
    }
    button:focus-visible, a:focus-visible, input:focus-visible {
      outline: 2px solid #00E599;
      outline-offset: 2px;
    }