/* VitePress 首页模板：首页（hero、特性卡片、接入步骤），尺寸照 VitePress 默认主题的首页。 */

:root {
  --vp-home-hero-name-background: linear-gradient(120deg, #2faf61 30%, #0f7d4a);
  --vp-home-hero-image-background-image: linear-gradient(-45deg, #2faf61 50%, #22b8cf 50%);
  --vp-home-hero-image-filter: blur(44px);
}
html.dark {
  --vp-home-hero-name-background: linear-gradient(120deg, #3dd68c 30%, #2faf61);
}

/* ---------- hero ---------- */
.VPHero { padding: 48px 24px; }
.VPHero-container { display: flex; flex-direction: column; margin: 0 auto; max-width: 1152px; text-align: center; }
.VPHero-main { position: relative; z-index: 10; order: 2; flex-grow: 1; flex-shrink: 0; }
.VPHero-heading { display: flex; flex-direction: column; align-items: center; }
.VPHero-name, .VPHero-text {
  display: block; width: fit-content; max-width: 392px; letter-spacing: -0.4px;
  line-height: 40px; font-size: 32px; font-weight: 700; white-space: pre-wrap;
}
.VPHero-name {
  background: var(--vp-home-hero-name-background); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--vp-c-brand-1);
}
.VPHero-text { color: var(--vp-c-text-1); }
.VPHero-tagline {
  margin: 0 auto; padding-top: 8px; max-width: 392px; line-height: 28px; font-size: 18px; font-weight: 500;
  color: var(--vp-c-text-2);
}
.VPHero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 24px; }
.VPHero-image { order: 1; margin: -76px -24px -48px; }
.VPHero-imageContainer { position: relative; margin: 0 auto; width: 320px; height: 320px; }
.VPHero-imageBg {
  position: absolute; top: 50%; left: 50%; width: 192px; height: 192px; border-radius: 50%;
  background-image: var(--vp-home-hero-image-background-image); filter: var(--vp-home-hero-image-filter);
  opacity: 0.55; transform: translate(-50%, -50%);
}
html.dark .VPHero-imageBg { opacity: 0.4; }
.VPHero-imageSrc { position: absolute; top: 50%; left: 50%; width: 224px; max-width: 100%; height: auto; transform: translate(-50%, -50%); }

@media (min-width: 640px) {
  .VPHero { padding: 80px 48px 64px; }
  .VPHero-name, .VPHero-text { max-width: 576px; line-height: 56px; font-size: 48px; }
  .VPHero-tagline { padding-top: 12px; max-width: 576px; line-height: 32px; font-size: 20px; }
  .VPHero-actions { padding-top: 32px; }
  .VPHero-image { margin: -108px -24px -48px; }
  .VPHero-imageContainer { width: 392px; height: 392px; }
  .VPHero-imageBg { width: 256px; height: 256px; }
  .VPHero-imageSrc { width: 300px; }
}
@media (min-width: 960px) {
  .VPHero { padding: 96px 64px 80px; }
  .VPHero-container { flex-direction: row; text-align: left; }
  .VPHero-main { order: 1; width: calc((100% / 3) * 2); max-width: 592px; }
  .VPHero-heading { align-items: flex-start; }
  .VPHero-name, .VPHero-text { line-height: 64px; font-size: 56px; }
  .VPHero-tagline { margin: 0; line-height: 36px; font-size: 24px; }
  .VPHero-actions { justify-content: flex-start; }
  .VPHero-image { flex-grow: 1; order: 2; margin: 0; min-height: 100%; }
  .VPHero-imageContainer {
    display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; min-height: 376px;
    transform: translate(-32px, -32px);
  }
  .VPHero-imageBg { width: 320px; height: 320px; }
  .VPHero-imageSrc { width: 376px; }
}

/* ---------- 特性卡片 ---------- */
.VPFeatures { position: relative; padding: 0 24px; }
.VPFeatures-container { margin: 0 auto; max-width: 1152px; }
.VPFeatures-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.VPFeature {
  display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--vp-c-bg-soft); border-radius: 12px;
  background-color: var(--vp-c-bg-soft); transition: border-color 0.25s, background-color 0.25s;
}
.VPFeature-icon {
  display: flex; justify-content: center; align-items: center; margin-bottom: 20px; width: 48px; height: 48px;
  border-radius: 6px; background-color: var(--vp-c-default-soft); color: var(--vp-c-brand-1); transition: background-color 0.25s;
}
.VPFeature-icon svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.VPFeature-title { line-height: 24px; font-size: 16px; font-weight: 600; color: var(--vp-c-text-1); }
.VPFeature-details { flex-grow: 1; padding-top: 8px; line-height: 24px; font-size: 14px; font-weight: 500; color: var(--vp-c-text-2); }
.VPFeature-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.VPFeature-tags li {
  padding: 0 10px; border: 1px solid var(--vp-c-divider); border-radius: 12px; background-color: var(--vp-c-bg);
  line-height: 22px; font-size: 12px; font-weight: 500; color: var(--vp-c-text-1);
}

@media (min-width: 640px) {
  .VPFeatures { padding: 0 48px; }
  .VPFeatures-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .VPFeature-wide { grid-column: span 2; }
}
@media (min-width: 960px) {
  .VPFeatures { padding: 0 64px; }
  .VPFeatures-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 接入步骤 ---------- */
.VPSteps { padding: 64px 24px 96px; }
.VPSteps-container { margin: 0 auto; max-width: 1152px; }
.VPSteps-title {
  padding-bottom: 24px; text-align: center; letter-spacing: -0.02em; line-height: 32px; font-size: 24px; font-weight: 600;
  color: var(--vp-c-text-1);
}
.VPSteps-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; counter-reset: none; }
.VPStep { position: relative; padding-left: 48px; }
.VPStep-num {
  position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--vp-c-brand-3); border-radius: 50%; background-color: var(--vp-c-brand-soft);
  font-size: 14px; font-weight: 600; color: var(--vp-c-brand-1);
}
.VPStep-title { line-height: 32px; font-size: 16px; font-weight: 600; color: var(--vp-c-text-1); }
.VPStep-details { padding-top: 4px; line-height: 24px; font-size: 14px; color: var(--vp-c-text-2); }
.VPStep-details a { font-weight: 500; color: var(--vp-c-brand-1); text-decoration: underline; text-underline-offset: 2px; }
.VPStep-details a:hover { color: var(--vp-c-brand-2); }

@media (min-width: 640px) {
  .VPSteps { padding: 80px 48px 112px; }
  .VPSteps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (min-width: 960px) {
  .VPSteps { padding: 96px 64px 128px; }
  .VPSteps-title { padding-bottom: 40px; }
  .VPSteps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .VPStep { padding: 48px 0 0; }
  /* 桌面四步一排，编号之间连一条细线 */
  .VPStep::before {
    content: ""; position: absolute; top: 16px; left: 40px; right: -16px; height: 1px; background-color: var(--vp-c-divider);
  }
  .VPStep:last-child::before { display: none; }
}