/* roulang page: index */
:root {
      --color-dark: #121826;
      --color-navy: #1E293B;
      --color-bronze: #A3704C;
      --color-amber: #C29B38;
      --color-bg-light: #F8F9FA;
      --color-bg-warm: #FDFCFA;
      --color-deep: #0B0F17;
      --color-border: #E2E8F0;
      --radius-sm: 6px;
      --radius-md: 8px;
      --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.04);
      --transition-smooth: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    body {
      color: var(--color-navy);
      background-color: var(--color-bg-light);
      font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    .custom-card {
      background-color: #FFFFFF;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-subtle);
      transition: var(--transition-smooth);
    }
    .custom-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 16px 32px rgba(0, 0, 0, 0.06);
    }
    .btn-bronze {
      background-color: var(--color-bronze);
      color: #FFFFFF;
      transition: var(--transition-smooth);
    }
    .btn-bronze:hover {
      background-color: #8C5E3D;
      transform: translateY(-2px);
    }
    .btn-outline {
      border: 1px solid var(--color-bronze);
      color: var(--color-bronze);
      transition: var(--transition-smooth);
    }
    .btn-outline:hover {
      background-color: var(--color-bronze);
      color: #FFFFFF;
      transform: translateY(-2px);
    }
    .section-title {
      font-size: clamp(1.65rem, 2.8vw, 2.25rem);
      letter-spacing: -0.02em;
      font-weight: 700;
      color: var(--color-dark);
    }
    .accordion-item[open] summary svg {
      transform: rotate(180deg);
    }
    html {
      scroll-behavior: smooth;
    }