/* roulang page: index */
:root {
      --brand: #0D3268;
      --brand-dark: #081D3D;
      --accent-gold: #D4A373;
      --surface-bg: #F8F9FA;
      --surface-card: #FFFFFF;
      --surface-dark: #111318;
      --text-main: #1D2129;
      --text-muted: #4E5969;
      --border-light: rgba(0, 0, 0, 0.08);
      --border-dark: rgba(255, 255, 255, 0.12);
      --radius-sm: 8px;
      --radius-lg: 16px;
      --shadow-base: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
      --shadow-hover: 0 12px 30px -4px rgba(13, 50, 104, 0.12);
    }
    
    html {
      scroll-behavior: smooth;
    }
    
    body {
      background-color: var(--surface-bg);
      color: var(--text-main);
      overflow-x: hidden;
    }

    .clip-hero-diagonal {
      clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    }

    @media (max-width: 768px) {
      .clip-hero-diagonal {
        clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
      }
    }

    .glass-dark {
      background: rgba(17, 19, 24, 0.75);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .glass-light {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .trans-standard {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .trans-standard:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }

    /* 隐藏横向滚动条 */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }