:root {
  --hj-font-sans: 'PingFang SC', 微软雅黑, helvetica, arial, sans-serif;
  --hj-primary: #0f67f8;
  --hj-primary-600: #1d6bff;
  --hj-primary-700: #0a52e6;
  --hj-primary-200: rgba(11, 92, 255, 18%);
  --hj-primary-soft: rgba(11, 92, 255, 10%);
  --hj-primary-gradient: linear-gradient(135deg, #0b5cff 0%, #67b2ff 100%);
  --hj-primary-gradient-soft: linear-gradient(
    135deg,
    rgba(11, 92, 255, 14%),
    rgba(103, 178, 255, 26%)
  );
  --hj-bg: #fff;
  --hj-bg-soft: #f8fbff;
  --hj-bg-footer: #0b1220;
  --hj-text: #091221;
  --hj-text-2: #28292e;
  --hj-text-3: #475569;
  --hj-text-muted: #64748b;
  --hj-border: rgba(15, 23, 42, 8%);
  --hj-border-soft: rgba(15, 23, 42, 6%);
  --hj-radius-8: 8px;
  --hj-radius-12: 12px;
  --hj-radius-14: 14px;
  --hj-radius-16: 16px;
  --hj-radius-20: 20px;
  --hj-radius-22: 22px;
  --hj-shadow-1: 0 12px 30px rgba(11, 92, 255, 25%);
  --hj-shadow-2: 0 18px 45px rgba(2, 8, 23, 12%);
  --hj-shadow-3: 0 18px 35px rgba(2, 8, 23, 10%);
  --el-color-primary: var(--hj-primary);
  --el-color-primary-light-3: rgba(11, 92, 255, 65%);
  --el-color-primary-light-5: rgba(11, 92, 255, 48%);
  --el-color-primary-light-7: rgba(11, 92, 255, 32%);
  --el-color-primary-light-8: rgba(11, 92, 255, 20%);
  --el-color-primary-light-9: rgba(11, 92, 255, 12%);
  --el-color-primary-dark-2: var(--hj-primary-700);
  --el-border-radius-base: var(--hj-radius-8);
  --el-text-color-primary: var(--hj-text);
  --el-text-color-regular: var(--hj-text-2);
  --el-text-color-secondary: var(--hj-text-muted);
  --el-border-color: var(--hj-border);
}

// 响应式容器占位符
%landing-container {
  width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;

  @media screen and (min-width: 992px) {
    padding-left: 240px;
    padding-right: 240px;
  }

  @media screen and (min-width: 1440px) {
    padding-left: calc((100vw - 1440px) / 2);
    padding-right: calc((100vw - 1440px) / 2);
  }

  @media screen and (min-width: 1920px) {
    padding-left: 240px;
    padding-right: 240px;
  }
}