/* ==========================================================================
   星澜 AI 官网 · 页面层（pages.css）
   本文件由 site-dev 维护：index.html / features.html / workflow.html 页面级样式。
   site-pages 请只在文件末尾「追加区」新增页面级样式，不要改动上面的规则。
   ========================================================================== */

/* ==========================================================================
   A. Hero 首屏
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vh, 4.5rem));
  padding-bottom: clamp(5rem, 10vh, 7.5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}

/* Canvas 就绪前的品牌渐变兜底（同样是纯 CSS，无外链图片） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side at 24% 34%, rgba(108, 92, 231, 0.36), transparent 74%),
    radial-gradient(closest-side at 76% 26%, rgba(34, 211, 238, 0.2), transparent 72%),
    radial-gradient(closest-side at 56% 76%, rgba(79, 124, 255, 0.24), transparent 74%),
    radial-gradient(closest-side at 88% 70%, rgba(168, 85, 247, 0.16), transparent 70%);
}

.hero__canvas.is-ready {
  opacity: 1;
}

/* 画布之上的渐变压暗，保证文字对比度 */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 58% at 30% 42%, rgba(7, 7, 14, 0.28), transparent 70%),
    radial-gradient(ellipse 62% 50% at 78% 34%, rgba(7, 7, 14, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(8, 8, 16, 0.5) 0%, rgba(8, 8, 16, 0.04) 26%, rgba(8, 8, 16, 0.08) 62%, var(--bg-1) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.16fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: 100%;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  max-width: 620px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.44em 0.95em 0.44em 0.6em;
  border-radius: var(--r-pill);
  border: 1px solid rgba(139, 92, 246, 0.32);
  background: rgba(108, 92, 231, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--fs-xs);
  font-weight: 560;
  color: #d9d4ff;
  letter-spacing: 0.01em;
}

.hero__eyebrow .dot {
  width: 0.46em;
  height: 0.46em;
  color: var(--c-success);
}

.hero__eyebrow b {
  font-weight: 650;
  color: #fff;
}

.hero__eyebrow .sep {
  width: 1px;
  height: 0.95em;
  background: rgba(255, 255, 255, 0.18);
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  font-weight: 780;
  text-wrap: balance;
}

.hero__title .line {
  display: block;
}

.hero__title .muted {
  color: var(--text-3);
  font-size: 0.62em;
  font-weight: 620;
  letter-spacing: 0.04em;
  display: inline-block;
  margin-top: 0.35em;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.78;
  color: var(--text-2);
  max-width: 54ch;
}

.hero__lead strong {
  color: var(--text-1);
  font-weight: 620;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.4rem;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
}

.hero__meta .ico {
  width: 14px;
  height: 14px;
  color: var(--text-3);
}

/* ---------- Hero 右侧：应用窗口 + 浮动卡 ---------- */
.hero__visual {
  position: relative;
  perspective: 1600px;
  padding-block: 1.2rem;
}

.hero__glow {
  position: absolute;
  z-index: -1;
  inset: 6% -6% 2% -2%;
  border-radius: 50%;
  filter: blur(70px);
  background:
    radial-gradient(closest-side at 40% 40%, rgba(108, 92, 231, 0.5), transparent 78%),
    radial-gradient(closest-side at 72% 68%, rgba(34, 211, 238, 0.36), transparent 76%);
  opacity: 0.75;
  animation: breathe 9s var(--ease-in-out) infinite;
}

/* 窗口下方的一层地面反光 */
.hero__visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 10%;
  right: 10%;
  bottom: -5%;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(108, 92, 231, 0.46), rgba(34, 211, 238, 0.12) 55%, transparent 74%);
  filter: blur(34px);
  pointer-events: none;
}

.hero__window {
  --tilt-persp: 1700px;
  --tilt-base-y: -7deg;
  --tilt-base-x: 3.4deg;
  transition: transform 0.9s var(--ease-expo);
}

.hero__window .app-window__body {
  aspect-ratio: 1344 / 861;
}

/* 浮动卡定位 */
.hero__float-a {
  top: 8%;
  left: -7%;
  animation-delay: -1.2s;
}

.hero__float-b {
  right: -6%;
  bottom: 20%;
  animation-delay: -3.4s;
}

.hero__float-c {
  left: 6%;
  bottom: -3.5%;
  animation-delay: -2.1s;
}

.hero__float-a .float-card__sub,
.hero__float-b .float-card__sub,
.hero__float-c .float-card__sub {
  margin-top: 1px;
}

/* ---------- 滚动指示 ---------- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(0.6rem, 2vh, 1.6rem);
  translate: -50% 0;
  z-index: 3;
}

/* ==========================================================================
   B. 跑马灯条（Hero 下方）
   ========================================================================== */
.strip-marquee {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   C. 数据条
   ========================================================================== */
.stats-section {
  padding-block: var(--section-y-sm);
}

.stats-section .stats {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ==========================================================================
   D. 核心能力
   ========================================================================== */
.capabilities {
  position: relative;
}

.capabilities__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}

/* 首卡跨 2 列（大屏） */
.capabilities__grid .feature-card--wide {
  grid-column: span 2;
}

.capabilities__foot {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-10);
}

@media (max-width: 1100px) {
  .capabilities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .capabilities__grid {
    grid-template-columns: 1fr;
  }
  .capabilities__grid .feature-card--wide {
    grid-column: auto;
  }
}

/* ==========================================================================
   E. 四阶段流水线
   ========================================================================== */
.pipeline {
  position: relative;
  overflow: hidden;
}

.pipeline__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(900px 480px at 50% 0%, rgba(108, 92, 231, 0.13), transparent 66%);
}

.pipeline .container {
  position: relative;
  z-index: 1;
}

/* 阶段卡（时间轴下方细节） */
.pipeline__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}

.pipeline-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.026);
  transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}

.pipeline-card:hover {
  border-color: rgba(34, 211, 238, 0.3);
  background: rgba(255, 255, 255, 0.045);
}

.pipeline-card__k {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  color: var(--c-cyan);
  opacity: 0.75;
}

.pipeline-card__t {
  font-size: 0.96rem;
  font-weight: 620;
}

.pipeline-card__d {
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-3);
}

@media (max-width: 900px) {
  .pipeline__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pipeline__cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   F. 产品截图展示（深/浅切换 + Tab）
   ========================================================================== */
.showcase {
  position: relative;
}

.showcase__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding: 0.55rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.showcase__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.showcase__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 38px;
  padding-inline: 1.05em;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 560;
  color: var(--text-3);
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.showcase__tab .ico {
  width: 15px;
  height: 15px;
}

.showcase__tab:hover {
  color: var(--text-1);
}

.showcase__tab[aria-selected="true"] {
  color: #fff;
  background: var(--grad-brand-strong);
  box-shadow: 0 6px 18px -8px rgba(108, 92, 231, 0.9);
}

/* 深/浅色切换 */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}

.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 32px;
  padding-inline: 0.85em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 560;
  color: var(--text-3);
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.theme-switch button[aria-pressed="true"] {
  color: var(--text-1);
  background: var(--surface-3);
}

.theme-switch .ico {
  width: 14px;
  height: 14px;
}

.showcase__stage {
  position: relative;
  margin-top: var(--sp-6);
  padding: clamp(0.6rem, 1.6vw, 1.1rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.showcase__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(760px 380px at 50% -10%, rgba(108, 92, 231, 0.16), transparent 62%);
}

.showcase__frame {
  position: relative;
  z-index: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1344 / 861;
  background: var(--bg-2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* 浅色截图时舞台底色变浅一点 */
.showcase__stage[data-shot-theme="light"] {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
}

.showcase__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: var(--sp-6);
  align-items: end;
  margin-top: var(--sp-5);
}

.showcase__caption {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.showcase__caption h3 {
  font-size: var(--fs-h3);
}

.showcase__caption p {
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--text-3);
  max-width: 52ch;
}

.showcase__points {
  display: grid;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.showcase__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
}

.showcase__points .ico {
  color: var(--c-success);
  width: 15px;
  height: 15px;
  margin-top: 0.22em;
  flex: none;
}

.showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.55s var(--ease-out), transform 0.8s var(--ease-expo);
}

.showcase__img.is-active {
  opacity: 1;
  transform: none;
}

/* 截图切换时避免闪烁：两层叠放 */
.showcase__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-expo);
}

.showcase__frame img[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .showcase__panel {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 560px) {
  .showcase__bar {
    border-radius: var(--r-lg);
    justify-content: center;
  }
  .showcase__tabs {
    justify-content: center;
  }
}

/* 展示区补充：无浅色截图提示 / 右侧徽标 */
.showcase__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.showcase__aside {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* 流水线门禁提示 */
.pipeline__rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

@media (max-width: 860px) {
  .pipeline__rules {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   G. 安全与数据边界
   ========================================================================== */
.boundary {
  position: relative;
}

.boundary__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: var(--sp-12);
}

.boundary__points {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.boundary-point {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}

.boundary-point:hover {
  border-color: var(--line);
  background: var(--surface-1);
}

.boundary-point__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #a5f3fc;
  background: rgba(34, 211, 238, 0.09);
  border: 1px solid rgba(34, 211, 238, 0.22);
}

.boundary-point__icon .ico {
  width: 19px;
  height: 19px;
}

.boundary-point h3 {
  font-size: 0.98rem;
  font-weight: 620;
  margin-bottom: 0.3rem;
}

.boundary-point p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-3);
}

/* 数据流图示 */
.flow-card {
  position: relative;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: radial-gradient(600px 320px at 30% 0%, rgba(108, 92, 231, 0.16), transparent 68%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: var(--shadow-lg);
}

.flow-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.flow-card__legend {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.flow-card__legend .dot {
  animation: none;
  box-shadow: none;
  width: 7px;
  height: 7px;
}

.flow {
  display: grid;
  gap: var(--sp-3);
}

.flow__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.72rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

.flow__row:hover {
  border-color: var(--line-strong);
  transform: translateX(2px);
}

.flow__row--local {
  border-color: rgba(34, 211, 238, 0.2);
  background: rgba(34, 211, 238, 0.045);
}

.flow__row--server {
  border-color: rgba(251, 191, 36, 0.18);
  background: rgba(251, 191, 36, 0.035);
}

.flow__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-2);
}

.flow__ico .ico {
  width: 16px;
  height: 16px;
}

.flow__row--local .flow__ico {
  color: #a5f3fc;
  background: rgba(34, 211, 238, 0.1);
}

.flow__row--server .flow__ico {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.1);
}

.flow__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.flow__label b {
  font-size: 0.88rem;
  font-weight: 600;
}

.flow__label span {
  font-size: var(--fs-2xs);
  color: var(--text-3);
}

.flow__tag {
  font-size: var(--fs-2xs);
  font-weight: 620;
  letter-spacing: 0.05em;
  color: var(--text-3);
  white-space: nowrap;
}

.flow__row--local .flow__tag {
  color: var(--c-cyan);
}

.flow__row--server .flow__tag {
  color: var(--c-warning);
}

.flow__arrow {
  display: flex;
  justify-content: center;
  color: var(--text-4);
}

.flow__arrow .ico {
  width: 14px;
  height: 14px;
  rotate: 90deg;
}

.flow-card__note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-3);
}

@media (max-width: 1000px) {
  .boundary__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   H. 下载 CTA 区（首页）
   ========================================================================== */
.download-teaser {
  position: relative;
}

.download-teaser__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  text-align: start;
}

.download-teaser__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}

.download-teaser__item:hover {
  border-color: rgba(34, 211, 238, 0.4);
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-3px);
}

.download-teaser__os {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 0.96rem;
  font-weight: 620;
}

.download-teaser__os .ico {
  width: 18px;
  height: 18px;
  color: var(--text-2);
}

.download-teaser__req {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-3);
}

.download-teaser__req b {
  color: var(--text-2);
  font-weight: 600;
}

.download-teaser__note {
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.2rem;
}

.download-teaser__note .ico {
  width: 14px;
  height: 14px;
}

@media (max-width: 860px) {
  .download-teaser__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   I. 教程入口
   ========================================================================== */
.tutorial-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.tutorial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014));
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}

.tutorial-card:hover {
  border-color: rgba(139, 92, 246, 0.38);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.tutorial-card__k {
  font-size: var(--fs-2xs);
  font-weight: 620;
  letter-spacing: var(--tracking-wide);
  color: var(--c-purple-2);
}

.tutorial-card__t {
  font-size: 1.05rem;
  font-weight: 650;
}

.tutorial-card__d {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-3);
}

.tutorial-card__go {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  transition: color var(--dur-2) var(--ease-out), gap var(--dur-2) var(--ease-out);
}

.tutorial-card:hover .tutorial-card__go {
  color: var(--c-cyan);
  gap: 0.7em;
}

@media (max-width: 900px) {
  .tutorial-cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   J. 子页面（features / workflow）通用版式
   ========================================================================== */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.4rem, 6vw, 4.6rem));
  position: relative;
  overflow: hidden;
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero__glow {
  position: absolute;
  z-index: 0;
  top: -160px;
  right: -100px;
  width: min(640px, 72vw);
  height: 560px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 92, 231, 0.32), rgba(34, 211, 238, 0.1) 58%, transparent 76%);
  filter: blur(54px);
  opacity: 0.9;
}

.page-hero > .container > .breadcrumb {
  margin-bottom: var(--sp-4);
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* 中文标题按词组换行，避免窄屏把「工序」「流水线」这类词拆断 */
.nowrap {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .page-hero .h1 {
    font-size: clamp(1.85rem, 7.6vw, 2.2rem);
    letter-spacing: -0.02em;
  }

  .deep__glow {
    inset: 12% 0 6%;
  }
}

/* 左右交替的深度特性区块 */
.deep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.deep + .deep {
  margin-top: clamp(3.5rem, 8vw, 7rem);
}

.deep--flip {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
}

.deep--flip .deep__copy {
  order: 2;
}

.deep--flip .deep__visual {
  order: 1;
}

.deep__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

.deep__copy .h2 {
  margin-top: var(--sp-1);
}

.deep__list {
  display: grid;
  gap: 0.7rem;
  margin-top: var(--sp-1);
}

.deep__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  font-size: var(--fs-sm);
  line-height: 1.68;
  color: var(--text-2);
}

.deep__list .ico {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 0.18em;
  color: var(--c-cyan);
}

.deep__visual {
  position: relative;
}

.deep__visual .shot {
  border-radius: var(--r-lg);
}

.deep__glow {
  position: absolute;
  z-index: -1;
  inset: 10% -8% 4%;
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(closest-side, rgba(108, 92, 231, 0.34), transparent 75%);
  pointer-events: none;
}

/* 能力总览小卡 */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.cap-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .cap-grid--2 {
    grid-template-columns: 1fr;
  }
}

.cap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
  transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}

.cap:hover {
  border-color: rgba(139, 92, 246, 0.32);
  background: rgba(255, 255, 255, 0.045);
}

.cap__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #d8d3ff;
  background: rgba(108, 92, 231, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.26);
}

.cap__ico .ico {
  width: 18px;
  height: 18px;
}

.cap h3 {
  font-size: 0.96rem;
  font-weight: 620;
}

.cap p {
  font-size: var(--fs-xs);
  line-height: 1.68;
  color: var(--text-3);
}

@media (max-width: 1000px) {
  .deep,
  .deep--flip {
    grid-template-columns: 1fr;
  }
  .deep--flip .deep__copy,
  .deep--flip .deep__visual {
    order: 0;
  }
  .cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cap-grid {
    grid-template-columns: 1fr;
  }
}

/* 对比表（V4 vs 网页版） */
.compare {
  margin-top: var(--sp-10);
}

.compare .table {
  min-width: 640px;
}

.compare .yes {
  color: var(--c-success);
  font-weight: 650;
}

.compare .no {
  color: var(--text-4);
}

/* workflow 页：大阶段块 */
.phase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center;
  padding-block: clamp(2.2rem, 5vw, 4rem);
}

.phase + .phase {
  border-top: 1px solid var(--line-soft);
}

.phase--flip .phase__copy {
  order: 2;
}

.phase--flip .phase__visual {
  order: 1;
}

.phase__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

.phase__no {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-cyan);
}

.phase__no::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.phase__visual {
  position: relative;
}

.phase__visual .shot {
  border-radius: var(--r-lg);
}

.phase__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--sp-1);
}

@media (max-width: 980px) {
  .phase,
  .phase--flip {
    grid-template-columns: 1fr;
  }
  .phase--flip .phase__copy,
  .phase--flip .phase__visual {
    order: 0;
  }
}

/* 规则表（修改与重生成） */
.rules {
  margin-top: var(--sp-8);
}

/* 锚点小节导航（workflow 页右侧或顶部） */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-6);
}

.anchor-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.42em 0.9em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-size: var(--fs-xs);
  color: var(--text-2);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out);
}

.anchor-nav a:hover {
  color: var(--text-1);
  border-color: rgba(34, 211, 238, 0.4);
  background: var(--surface-2);
}

.anchor-nav .num {
  font-family: var(--font-mono);
  color: var(--c-cyan);
  font-size: 0.95em;
}

/* ==========================================================================
   K. 响应式微调
   ========================================================================== */
@media (max-width: 1180px) {
  .hero__float-a {
    left: 0;
  }
  .hero__float-b {
    right: 0;
  }
  .hero__float-c {
    left: 4%;
  }
}

@media (max-width: 1080px) {
  .hero__glow {
    inset: 5% -1% 3%;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 3rem);
    padding-bottom: 5.5rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(2.4rem, 6vw, 3.6rem);
  }

  .hero__copy {
    max-width: 680px;
    align-items: flex-start;
  }

  .hero__visual {
    width: 100%;
    max-width: 780px;
    margin-inline: auto;
  }

  .hero__window {
    --tilt-base-y: 0deg;
    --tilt-base-x: 0deg;
  }

  .hero__scroll {
    display: none;
  }
}

@media (max-width: 720px) {
  .hero__title {
    font-size: clamp(2.2rem, 9.2vw, 3.2rem);
  }

  .hero__actions {
    width: 100%;
  }

  .hero__actions .magnetic {
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__float-a,
  .hero__float-c {
    display: none;
  }

  .hero__float-b {
    right: -2%;
    bottom: 10%;
    scale: 0.92;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .hero__meta {
    gap: 0.4rem 1rem;
  }
}

/* ==========================================================================
   M. V5.2 新增：三列能力 / 会员价格带 / 双图深度区
   ========================================================================== */
.capabilities__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.price-band {
  position: relative;
  overflow: hidden;
}

.price-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  transition: border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}

.price-card:hover {
  border-color: rgba(139, 92, 246, 0.34);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.price-card--hot {
  border-color: rgba(34, 211, 238, 0.32);
  background: linear-gradient(165deg, rgba(34, 211, 238, 0.09), rgba(108, 92, 231, 0.07));
}

.price-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.98rem;
  font-weight: 650;
  flex-wrap: wrap;
}

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem);
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.05;
  background: var(--grad-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.price-card__price small {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-3);
  -webkit-text-fill-color: var(--text-3);
}

.price-card__desc {
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-3);
}

.price-band__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.8rem;
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-align: center;
}

.price-band__note .link-arrow {
  font-size: var(--fs-xs);
}

/* 深度区双图（两张截图纵向叠放） */
.deep__visual--duo .shot + .shot {
  margin-top: var(--sp-4);
}

@media (max-width: 1100px) {
  .capabilities__grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .price-band__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .capabilities__grid--3 {
    grid-template-columns: 1fr;
  }

  .price-band__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   L. site-pages 页面级样式追加区（只在这条线以下新增，勿改上方）
   ========================================================================== */

/* ==========================================================================
   L. site-pages 页面级样式追加（下载 / 教程 / FAQ / 关于 / 条款）
   --------------------------------------------------------------------------
   仅在本追加区新增，不改动上方 site-dev 已冻结的规则。
   全部消费 tokens.css 的设计变量；零外链、零框架。
   页面范围：download.html / tutorials/*.html / faq.html / about.html / legal.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   L1. 内容页头（page-hero 补充）
   -------------------------------------------------------------------------- */
.page-hero {
  overflow: hidden;
}

.page-hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 24% 14%, rgba(108, 92, 231, 0.26), transparent 72%),
    radial-gradient(36% 44% at 78% 4%, rgba(34, 211, 238, 0.14), transparent 74%);
  filter: blur(8px);
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero__inner {
  max-width: 880px;
}

.page-hero__inner .breadcrumb {
  margin-bottom: var(--sp-4);
}

.page-title {
  margin: var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 740;
  color: var(--text-1);
  max-width: 30ch;
  text-wrap: balance;
}

.section-title,
.tut-h2,
.h2,
.faq-group-title {
  text-wrap: balance;
}

.page-title em {
  font-style: normal;
}

.page-lead {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-lead);
  line-height: 1.74;
  color: var(--text-2);
  max-width: 66ch;
}

.page-lead a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-hero__inner .badges-row {
  margin-top: var(--sp-2);
}

.section-title {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.section-lead {
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   L2. 通用宫格 / 卡片补充（.card 组件内排版）
   -------------------------------------------------------------------------- */
.page .grid {
  display: grid;
  gap: var(--sp-4);
}

.page .grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page .grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card > .h4 {
  margin-bottom: var(--sp-2);
}

.card p {
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--text-2);
}

.card p + p {
  margin-top: var(--sp-3);
}

.card .link-arrow {
  margin-top: var(--sp-3);
}

.card__arrow {
  width: 20px;
  height: 20px;
  margin-top: var(--sp-3);
  color: var(--c-cyan);
  transition: translate var(--dur-2) var(--ease-out);
}

.card--hover:hover .card__arrow {
  translate: 4px 0;
}

/* 勾选清单 */
.check-list {
  margin: var(--sp-4) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--text-2);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.9), rgba(108, 92, 231, 0.9));
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.6 4.6L19 7'/></svg>") center / 12px 12px no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.6 4.6L19 7'/></svg>") center / 12px 12px no-repeat;
}

.check-list strong {
  color: var(--text-1);
}

/* --------------------------------------------------------------------------
   L3. 提示框补充（.callout 组件内部结构）
   -------------------------------------------------------------------------- */
.callout__body {
  min-width: 0;
}

.callout__title {
  font-weight: 640;
  color: var(--text-1);
  margin-bottom: 0.35rem;
}

.callout__body p:last-child {
  margin-bottom: 0;
}

.callout__body p + p {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   L4. 表格补充
   -------------------------------------------------------------------------- */
.table--compact th,
.table--compact td {
  padding: 0.62rem 0.9rem;
  font-size: var(--fs-xs);
}

.table--kv th {
  width: 34%;
  color: var(--text-3);
  font-weight: 520;
  white-space: nowrap;
}

.table--data td:first-child {
  color: var(--text-1);
}

.cell-no {
  color: var(--c-success) !important;
  white-space: nowrap;
}

.cell-yes {
  color: var(--c-warning) !important;
}

.table-wrap--narrow {
  max-width: 640px;
}

.table a {
  color: var(--c-cyan);
}

/* --------------------------------------------------------------------------
   L5. 代码块 / 快捷键
   -------------------------------------------------------------------------- */
.code-block {
  margin: var(--sp-4) 0;
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(4, 5, 12, 0.72);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: #c9d1ef;
}

.code-block code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}

.code-block--sm {
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   L6. 文档页布局（教程正文 + 粘性目录）
   -------------------------------------------------------------------------- */
.tutorial-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: var(--section-y-sm);
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-1);
}

.toc-title {
  font-size: var(--fs-2xs);
  font-weight: 640;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-3);
}

.toc-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc-list a {
  display: block;
  padding: 0.44rem 0.6rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-2);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.toc-list a:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

.toc-download {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--c-cyan);
}

.tutorial-body {
  min-width: 0;
}

.tut-section {
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.tut-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.tut-h2,
.tut-h3 {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.tut-h2 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 680;
  color: var(--text-1);
}

.tut-h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-h4);
  font-weight: 640;
  color: var(--text-1);
}

.tutorial-body p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-2);
  margin-bottom: var(--sp-4);
}

.tutorial-body p:last-child {
  margin-bottom: 0;
}

.tutorial-body > .tut-section > p:first-of-type {
  margin-top: 0;
}

.tutorial-body a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.28);
  transition: border-color var(--dur-2) var(--ease-out);
}

.tutorial-body a:hover {
  border-bottom-color: var(--c-cyan);
}

.tutorial-body ul:not([class]),
.tutorial-body ol:not([class]) {
  margin: 0 0 var(--sp-4);
  padding-left: 1.35rem;
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-body);
  line-height: 1.74;
  color: var(--text-2);
}

.tutorial-body ul:not([class]) li::marker,
.tutorial-body ol:not([class]) li::marker {
  color: var(--c-cyan);
}

.tutorial-body strong {
  color: var(--text-1);
}

.tutorial-body > .tut-section > .table-wrap,
.tutorial-body > .tut-section > .stepper,
.tutorial-body > .tut-section > .grid,
.tutorial-body > .tut-section > .callout {
  margin-block: var(--sp-5);
}

/* 教程截图（app-window）间距与尺寸 */
.doc-window {
  margin: var(--sp-5) 0 var(--sp-2);
}

.doc-window--sm {
  max-width: 620px;
}

.app-window + .shot__caption,
.doc-window + .shot__caption {
  padding: 0;
  margin: 0 0 var(--sp-5);
  border: 0;
  background: none;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.shot {
  margin: var(--sp-5) 0;
}

.shot__caption {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.shot--flow {
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   L7. FAQ 分组 / 跳转 / 结尾 CTA
   -------------------------------------------------------------------------- */
.faq-wrap {
  max-width: 900px;
}

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.faq-group {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.faq-group + .faq-group {
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
}

.faq-group-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: 680;
  color: var(--text-1);
}

.faq-group-num {
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-xs);
  border: 1px solid rgba(34, 211, 238, 0.3);
  background: rgba(34, 211, 238, 0.08);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-cyan);
}

.faq__q-text {
  min-width: 0;
}

.faq-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-12);
  padding: var(--sp-6) var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(108, 92, 231, 0.32);
  background: linear-gradient(120deg, rgba(108, 92, 231, 0.16), rgba(34, 211, 238, 0.08));
}

.faq-cta h2 {
  font-size: var(--fs-h4);
  color: var(--text-1);
  margin-bottom: var(--sp-2);
}

.faq-cta p {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   L8. 教程中心 / 四阶段步骤条（教程正文内）
   -------------------------------------------------------------------------- */
.tutorial-cards {
  margin-top: 0;
}

.pipeline-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  padding: 0;
  list-style: none;
}

.pipeline-step {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-1);
}

.pipeline-num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-cyan);
}

.pipeline-name {
  font-size: var(--fs-sm);
  font-weight: 620;
  color: var(--text-1);
}

.pipeline-desc {
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   L9. 关于页
   -------------------------------------------------------------------------- */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

.feature-split-text .section-title {
  margin-bottom: var(--sp-4);
}

.feature-split-media .doc-window {
  margin: 0;
}

.about-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.about-contact .section-title {
  margin-bottom: var(--sp-3);
}

.cta-card {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(108, 92, 231, 0.3);
  background: linear-gradient(160deg, rgba(108, 92, 231, 0.16), rgba(34, 211, 238, 0.06));
  box-shadow: var(--shadow-sm);
}

.cta-card-title {
  font-size: var(--fs-h4);
  color: var(--text-1);
  margin-bottom: var(--sp-2);
}

.cta-card p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: var(--sp-4);
}

.cta-card .btn + .btn {
  margin-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   L10. 条款 / 隐私
   -------------------------------------------------------------------------- */
.legal-wrap {
  max-width: var(--container-narrow);
}

.legal-notice {
  margin-bottom: var(--sp-6);
}

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.legal-doc {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.legal-h2 {
  margin: var(--sp-12) 0 var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: var(--tracking-snug);
  font-weight: 700;
  color: var(--text-1);
}

#terms .legal-h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-h4);
  font-weight: 640;
  color: var(--text-1);
}

.legal-doc p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-2);
  margin-bottom: var(--sp-3);
}

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 var(--sp-4);
  padding-left: 1.35rem;
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-body);
  line-height: 1.74;
  color: var(--text-2);
}

.legal-doc li::marker {
  color: var(--c-cyan);
}

.legal-doc strong {
  color: var(--text-1);
}

/* --------------------------------------------------------------------------
   L11. 下载页
   -------------------------------------------------------------------------- */
.dl-detect {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid rgba(108, 92, 231, 0.34);
  background: linear-gradient(110deg, rgba(108, 92, 231, 0.16), rgba(34, 211, 238, 0.06));
}

.dl-detect__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  color: #cfd6ff;
  background: rgba(108, 92, 231, 0.2);
  border: 1px solid rgba(108, 92, 231, 0.36);
}

.dl-detect__icon .ico {
  width: 22px;
  height: 22px;
}

.dl-detect__text {
  flex: 1 1 auto;
  min-width: 0;
}

.dl-detect__title {
  font-size: var(--fs-body);
  font-weight: 640;
  color: var(--text-1);
  margin-bottom: 0.25rem;
}

.dl-detect__desc {
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-2);
}

.dl-detect__cta {
  flex: none;
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

.dl-grid .download-card {
  height: 100%;
}

.dl-card__arch {
  margin-top: calc(var(--sp-2) * -1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-cyan);
}

.dl-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.dl-grid .download-card {
  min-width: 0;
}

.dl-grid .download-card__head {
  flex-wrap: nowrap;
  align-items: center;
}

.dl-grid .download-card__os {
  white-space: nowrap;
  min-width: 0;
}

.dl-grid .download-card__os .ico {
  flex: none;
}

.dl-grid .download-card__head .badge {
  flex: none;
  white-space: nowrap;
}

/* 元信息行：dt / dd 同一行 */
.dl-grid .download-card__meta > div {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.dl-grid .download-card__meta dt {
  flex: none;
  width: 3.6rem;
  color: var(--text-4);
}

.dl-grid .download-card__meta dd {
  min-width: 0;
  color: var(--text-2);
}

.dl-hash {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
}

.dl-hash__label {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  color: var(--text-4);
}

.dl-hash__value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-3);
  word-break: break-all;
}

.dl-hash__value.is-loaded {
  color: #7cf0c9;
}

.dl-copy {
  flex: none;
  --btn-h: 30px;
  padding-inline: 0.6rem;
  font-size: var(--fs-2xs);
}

.dl-download {
  margin-top: var(--sp-1);
}

.download-card__foot {
  min-width: 0;
}

.dl-file {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-4);
}

.dl-tip {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.page-download.manifest-missing .dl-tip {
  color: var(--c-warning);
}

.dl-table td {
  font-size: var(--fs-xs);
}

.dl-list-sha {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.68rem;
  color: var(--text-3);
}

.dl-list-sha.is-loaded {
  color: #7cf0c9;
}

.dl-portable {
  margin-top: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-1);
  overflow: hidden;
}

.dl-portable[open] {
  border-color: rgba(108, 92, 231, 0.34);
}

.dl-portable__summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
}

.dl-portable__summary::-webkit-details-marker {
  display: none;
}

.dl-portable__summary::after {
  content: "+";
  position: absolute;
  right: var(--sp-5);
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-3);
  font-size: 1.05rem;
  line-height: 1;
  transition: rotate var(--dur-3) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.dl-portable[open] .dl-portable__summary::after {
  content: "−";
  color: var(--c-cyan);
  border-color: rgba(34, 211, 238, 0.35);
}

.dl-portable__title {
  font-size: var(--fs-body);
  font-weight: 640;
  color: var(--text-1);
}

.dl-portable__hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.dl-portable__body {
  padding: 0 var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--sp-4);
}

.dl-portable__body > p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  margin-bottom: var(--sp-4);
}

.dl-license {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--text-3);
}

.dl-install-cta {
  margin-top: var(--sp-8);
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   L12. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .tutorial-layout {
    grid-template-columns: 1fr;
  }

  .toc {
    position: static;
  }

  .toc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3,
  .dl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipeline-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-split,
  .about-contact {
    grid-template-columns: 1fr;
  }

  .feature-split-media {
    order: -1;
  }
}

@media (max-width: 900px) {
  .dl-detect {
    flex-wrap: wrap;
  }

  .dl-detect__cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1080px) and (min-width: 781px) {
  /* 3 个卡片在 2 列布局时，最后一张占满整行，避免右侧留空 */
  .dl-grid > :last-child:nth-child(odd),
  .grid--3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .dl-grid > :last-child:nth-child(odd) .download-card__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .grid--2,
  .grid--3,
  .dl-grid,
  .pipeline-steps {
    grid-template-columns: 1fr;
  }

  .toc-list {
    grid-template-columns: 1fr;
  }

  .legal-h2 {
    font-size: var(--fs-h3);
  }

  .dl-list-sha {
    max-width: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__arrow,
  .toc-list a,
  .dl-portable__summary::after {
    transition: none !important;
  }
}