/* roulang page: index */
:root {
      --brand-primary: #0A3641;
      --brand-accent: #00A896;
      --brand-dark: #061D24;
      --brand-surface: #F7F9FA;
      --brand-text: #0F2027;
      --brand-muted: #4A5568;
      --brand-border: #E2E8F0;
    }
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    }
    .custom-card-shadow {
      box-shadow: 0 1px 3px rgba(10, 54, 65, 0.05);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card-shadow:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px -4px rgba(10, 54, 65, 0.12);
      border-color: #00A896;
    }
    .grid-dark-pattern {
      background-image: radial-gradient(rgba(0, 168, 150, 0.12) 1px, transparent 1px);
      background-size: 24px 24px;
    }