/* roulang page: index */
:root {
      --primary-dark: #0B1519;
      --primary-slate: #16262C;
      --primary-teal: #203A43;
      --accent-gold: #C5A880;
      --accent-gold-light: #E0C9A6;
      --bg-light: #F8FAFC;
      --text-main: #0F172A;
      --text-muted: #475569;
      --border-subtle: #E2E8F0;
    }

    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }

    .hero-mask {
      background: linear-gradient(180deg, rgba(11, 21, 25, 0.82) 0%, rgba(15, 32, 39, 0.94) 70%, rgba(11, 21, 25, 1) 100%);
    }

    .gold-gradient-text {
      background: linear-gradient(135deg, #FFF0D4 0%, #C5A880 50%, #A88656 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .gold-badge {
      background: linear-gradient(135deg, rgba(197, 168, 128, 0.2) 0%, rgba(197, 168, 128, 0.05) 100%);
      border: 1px solid rgba(197, 168, 128, 0.4);
    }

    .card-hover {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(15, 32, 39, 0.12);
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease-out;
    }
    .accordion-content.active {
      max-height: 400px;
    }