/* ==========================================================================
   RecArtist 设计系统
   风格取向：深色、克制、以产品截图为主体。参考 screen.studio 的信息密度与
   留白节奏，但配色与品牌走自己的路线（靛蓝 → 紫罗兰渐变）。
   ========================================================================== */

:root {
  /* 背景层次：越靠上层越亮，用亮度差替代边框来分层 */
  --bg-base: #08080c;
  --bg-raised: #0e0e14;
  --bg-card: #121219;
  --bg-elevated: #17171f;
  --bg-input: #0b0b11;

  /* 文字：主/次/弱三级，避免出现纯白造成刺眼 */
  --text-primary: #f4f4f7;
  --text-secondary: #a6a6b4;
  /* 三级文字亮度由对比度反推，不是凭手感调的：
     最亮的常见底色是「半透明标签叠在卡片上」≈ rgb(35,35,41)，
     要在它之上达到 WCAG AA 的 4.5:1，文字灰度至少要 138。取 #8f8f9e 留出余量，
     实测在该底色上 4.90:1、在最深的 #08080c 上 6.27:1。
     原值 #6e6e7d 只有 3.13~3.99，全站 59 处不达标。 */
  --text-tertiary: #8f8f9e;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --brand: #6366f1;
  --brand-bright: #8b8cf9;
  --brand-deep: #4f46e5;
  --accent: #a855f7;
  --accent-cyan: #22d3ee;
  --success: #34d399;
  --warning: #fbbf24;

  --gradient-brand: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --gradient-text: linear-gradient(120deg, #c7c8ff 0%, #ffffff 40%, #d8b4fe 100%);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 24px 70px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 18px 50px rgba(99, 102, 241, 0.22);

  --container: 1200px;
  --gutter: 24px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------ 重置 */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body::before {
  /* 顶部氛围光：给深色页面一个视觉锚点，不是装饰性渐变堆砌 */
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 900px;
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(99, 102, 241, 0.20), transparent 70%),
    radial-gradient(600px 360px at 88% 4%, rgba(168, 85, 247, 0.13), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

img, svg, video { max-width: 100%; display: block; }

/* <picture> 只是格式协商的壳（webp 优先、png 兜底），本身不承载任何视觉。
   用 display: contents 让它不产生盒子，<img> 直接作为父容器的子项参与布局，
   与引入 <picture> 之前的布局完全一致——否则 picture 默认是 inline，
   却包着 display:block 的 img，在 flex / grid 容器里还会改变尺寸计算，
   图片尺寸和间距会莫名其妙地变。 */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(99, 102, 241, 0.4); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------- 布局容器 */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}

.section { padding: 104px 0; position: relative; z-index: 1; }
.section--tight { padding: 72px 0; }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 18px;
}

.section-label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--brand-bright);
  opacity: 0.6;
}

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  margin-bottom: 18px;
}

.section-sub {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------ 导航 */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  background: rgba(8, 8, 12, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}

.nav.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(8, 8, 12, 0.9);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 680;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  /* 触控目标下限：品牌链接近 27px 高，手机上不好点 */
  min-height: 34px;
}

.brand__mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--gradient-brand);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42);
  flex-shrink: 0;
}

.brand__mark svg { width: 17px; height: 17px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
}

.nav__link {
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.nav__link:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.nav__link.is-active { color: var(--text-primary); }

.nav__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* 语言切换：分段控件比下拉更直观，且少一次交互 */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  /* 不能被 flex 挤压：窄屏下压缩会让「中文」折成竖排两行 */
  flex-shrink: 0;
}

.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  /* 触控目标下限：不加这个按钮只有 26px 高 */
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}

.lang-switch button.is-active {
  background: rgba(255, 255, 255, 0.11);
  color: var(--text-primary);
}

.nav__toggle {
  display: none;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  color: var(--text-primary);
  place-items: center;
}

/* ------------------------------------------------------------------ 按钮 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.25s;
}

.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.34);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.46);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn--ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.22); }

.btn--sm { padding: 9px 17px; font-size: 0.875rem; }
.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* ------------------------------------------------------------------ 徽标 */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: var(--text-secondary);
}

.pill--brand {
  border-color: rgba(99, 102, 241, 0.42);
  background: rgba(99, 102, 241, 0.13);
  color: #c9caff;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
  flex-shrink: 0;
}

.dot--muted { background: var(--text-tertiary); box-shadow: none; }

/* ------------------------------------------------------------------ Hero */

.hero {
  padding: 78px 0 64px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero__badge { margin-bottom: 26px; }

.hero__title {
  font-size: clamp(2.4rem, 6vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
  margin-bottom: 24px;
}

.hero__sub {
  max-width: 660px;
  margin: 0 auto 34px;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: var(--text-secondary);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hero__meta {
  font-size: 13.5px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* 产品截图：屏幕外发光 + 透视，是整页视觉重心 */
.hero__shot {
  margin-top: 58px;
  position: relative;
}

.hero__shot::before {
  content: "";
  position: absolute;
  inset: 8% 6% -10% 6%;
  background: radial-gradient(closest-side, rgba(99, 102, 241, 0.34), transparent 78%);
  filter: blur(52px);
  z-index: 0;
}

.hero__frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  padding: 8px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.hero__frame img {
  border-radius: var(--radius-md);
  width: 100%;
}

/* ------------------------------------------------------------ 平台条 */

.platform-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.platform-chip svg { width: 18px; height: 18px; }
.platform-chip--active { border-color: rgba(52, 211, 153, 0.35); color: var(--text-primary); }
.platform-chip--muted { opacity: 0.6; }
.platform-chip small { color: var(--text-tertiary); font-size: 12px; }

/* ------------------------------------------------------------------ 卡片 */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color 0.28s, transform 0.28s var(--ease), background 0.28s;
}

.card--hover:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  background: var(--bg-elevated);
}

.card__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.24);
  margin-bottom: 16px;
  color: var(--brand-bright);
}

.card__icon svg { width: 20px; height: 20px; }
.card__title { font-size: 1.0625rem; font-weight: 640; margin-bottom: 9px; }
.card__text { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.62; }

/* 功能大卡：图 + 文，交替左右 */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 56px;
  align-items: center;
}

.feature-row--reverse .feature-row__media { order: 2; }

.feature-row__media {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 7px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.feature-row__media img { border-radius: var(--radius-md); }

.feature-list { display: grid; gap: 14px; margin-top: 26px; }

.feature-list li {
  display: flex;
  gap: 11px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.feature-list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--success);
}

/* --------------------------------------------------------------- 切换演示 */

.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  margin-bottom: 26px;
}

.tabs button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.22s, color 0.22s;
}

.tabs button.is-active {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

.tab-pane { display: none; }
.tab-pane.is-active { display: block; animation: fadeUp 0.42s var(--ease); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- 对比表 */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.9375rem;
}

.spec-table th,
.spec-table td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.spec-table th {
  background: var(--bg-elevated);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.spec-table tr:last-child td { border-bottom: 0; }
.spec-table td:first-child { color: var(--text-primary); font-weight: 500; }
.spec-table td { color: var(--text-secondary); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}

.tag--ok { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; }
.tag--plan { background: rgba(255, 255, 255, 0.07); color: var(--text-tertiary); }
.tag--brand { background: rgba(99, 102, 241, 0.16); color: #c7c8ff; }

/* ------------------------------------------------------------------ 定价 */

.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.price-card--featured {
  border-color: rgba(99, 102, 241, 0.45);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.09), var(--bg-card) 55%);
  box-shadow: var(--shadow-glow);
}

.price-card__badge {
  position: absolute;
  top: -12px;
  left: 32px;
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--gradient-brand);
  font-size: 12px;
  font-weight: 700;
}

.price-card__name { font-size: 1.125rem; font-weight: 640; margin-bottom: 6px; }
.price-card__desc { color: var(--text-secondary); font-size: 0.875rem; min-height: 42px; }

.price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 22px 0 4px;
}

.price-card__amount strong { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.045em; }
.price-card__amount span { color: var(--text-tertiary); font-size: 0.9375rem; }
.price-card__note { font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 24px; }

.price-card ul { display: grid; gap: 12px; margin-bottom: 28px; }
.price-card li { display: flex; gap: 10px; font-size: 0.9375rem; color: var(--text-secondary); }
.price-card li svg { width: 17px; height: 17px; color: var(--success); flex-shrink: 0; margin-top: 3px; }
.price-card .btn { margin-top: auto; }

/* ------------------------------------------------------------------ FAQ */

.faq { display: grid; gap: 10px; }

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-size: 0.9688rem;
  font-weight: 580;
  text-align: left;
}

.faq__q svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform 0.3s var(--ease);
}

.faq__item.is-open .faq__q svg { transform: rotate(45deg); }

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.34s var(--ease);
}

.faq__a > div {
  padding: 0 22px 21px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.68;
}

.faq__a code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: rgba(255, 255, 255, 0.07);
  padding: 2px 6px;
  border-radius: 5px;
  word-break: break-all;
}

/* ------------------------------------------------------- CTA 与页脚 */

.cta {
  text-align: center;
  padding: 76px 40px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(99, 102, 241, 0.24), transparent 70%),
    var(--bg-card);
}

.cta h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 16px; }
.cta p { color: var(--text-secondary); max-width: 520px; margin: 0 auto 30px; }

.footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 34px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 44px;
  margin-bottom: 44px;
}

.footer__brand p {
  color: var(--text-tertiary);
  font-size: 0.875rem;
  margin-top: 14px;
  max-width: 290px;
  line-height: 1.65;
}

/* 标题层级：footer 各栏目是 <h3>（父级页面最后一级标题是 h2，不能跳级）。
   这里用标签选择器，改 HTML 的标签名必须同步改这里，否则样式静默丢失。 */
.footer h3 {
  font-size: 0.8125rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.footer li { margin-bottom: 11px; }
.footer li a { color: var(--text-secondary); font-size: 0.9375rem; transition: color 0.2s; }
.footer li a:hover { color: var(--text-primary); }

.footer__bottom {
  padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--text-tertiary);
}

/* 页脚的法务 / 联系链接组。
   为什么用 flex + gap 而不是行内「·」分隔符：窄屏上一行放不下时，
   行内分隔符会被挤到下一行的行首，出现孤零零一个「·」（首页 hero__meta 踩过同一个坑）。 */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}

/* ---------------------------------------------------------- 订阅表单 */
/* 原先这里是一个指向 /changelog.html 的假 CTA。换成真实表单后需要一点排版：
   标签在输入框之上（可见标签比 placeholder 更可靠 —— placeholder 一输入就消失，
   而且屏幕阅读器对它的支持并不一致）。 */
.subscribe { margin-top: auto; text-align: left; }

.subscribe__label {
  display: block;
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.subscribe__input {
  width: 100%;
  padding: 10px 13px;
  margin-bottom: 9px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-family: inherit;
}

.subscribe__input:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 1px;
}

/* 消息文字平时不占位（min-height 保证状态出现时表单不会跳一下）。 */
.subscribe__msg {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.subscribe__msg.is-ok { color: #4ade80; }
.subscribe__msg.is-error { color: #fca5a5; }

.subscribe__note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* ----------------------------------------------------------- 下载中心 */

.page-head { padding: 62px 0 44px; position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 16px; }
.page-head p { color: var(--text-secondary); max-width: 620px; font-size: 1.0625rem; }

.platform-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.platform-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 0.28s, transform 0.28s var(--ease);
}

.platform-card--active {
  border-color: rgba(99, 102, 241, 0.42);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.1), var(--bg-card) 52%);
}

.platform-card--soon { opacity: 0.62; }
.platform-card--soon:hover { opacity: 0.82; }

.platform-card__top { display: flex; align-items: center; gap: 13px; }
.platform-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.platform-card--active .platform-card__icon {
  background: rgba(99, 102, 241, 0.16);
  color: var(--brand-bright);
}

.platform-card__icon svg { width: 21px; height: 21px; }
.platform-card__name { font-size: 1.0625rem; font-weight: 640; }
.platform-card__req { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }
.platform-card .btn { margin-top: auto; }

.release {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 26px 28px;
}

.release + .release { margin-top: 14px; }
.release--latest { border-color: rgba(99, 102, 241, 0.34); }

.release__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.release__ver { font-size: 1.25rem; font-weight: 680; letter-spacing: -0.02em; }
.release__title { color: var(--text-secondary); font-size: 0.9688rem; margin-bottom: 14px; }

.release__meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.release__meta span { display: inline-flex; align-items: center; gap: 6px; }
.release__actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 190px; }

.hash-box {
  margin-top: 14px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  word-break: break-all;
  line-height: 1.55;
}

.hash-box strong { color: var(--text-secondary); font-weight: 600; }

.req-list { display: grid; gap: 16px; }
.req-list__row { display: grid; grid-template-columns: 150px 1fr; gap: 20px; font-size: 0.9375rem; }
.req-list__row dt { color: var(--text-tertiary); }
.req-list__row dd { margin: 0; color: var(--text-secondary); }

.note-block {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(251, 191, 36, 0.26);
  background: rgba(251, 191, 36, 0.08);
  font-size: 0.9375rem;
  color: #fde68a;
  line-height: 1.65;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.stat-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 22px 24px;
}

.stat-tile__value { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.035em; }
.stat-tile__label { color: var(--text-tertiary); font-size: 13px; margin-top: 4px; }

/* ------------------------------------------------------------- 更新日志 */

.timeline { position: relative; padding-left: 30px; }

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-strong);
}

.timeline__item { position: relative; padding-bottom: 46px; }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--brand);
}

.timeline__item:first-child::before { background: var(--brand); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }

.timeline__date {
  font-size: 13px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-bottom: 8px;
}

.timeline__title { font-size: 1.25rem; font-weight: 660; margin-bottom: 14px; }

.timeline__notes { display: grid; gap: 11px; }

.timeline__notes li {
  display: flex;
  gap: 11px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.62;
}

.timeline__notes li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 9px;
}

.roadmap-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.roadmap-item:last-child { border-bottom: 0; }

/* ------------------------------------------------------------- 滚动入场 */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------- 工具类 */

.mono { font-family: var(--font-mono); }
.muted { color: var(--text-tertiary); }

/*
 * 只给屏幕阅读器看的文字：视觉上收起，但不脱离无障碍树。
 *
 * ★ 不能用 `display: none` / `visibility: hidden` —— 那两样会把它从无障碍树里
 *   一起摘掉，等于没写。这里用「1px + 裁剪」：元素仍然占位、仍然被读出来，
 *   只是看不见。也刻意**不加** `.hidden` 那种 !important 的 display 覆盖。
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.center { text-align: center; }
.hidden { display: none !important; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stack-sm { display: grid; gap: 10px; }

/*
 * `visually-hidden` 与上面 `.sr-only` 是**同一条规则**。
 *
 * ★ 为什么不直接改用 .sr-only：它在 index.html 的订阅表单里已经用了一次
 *   （`<label class="visually-hidden" for="subscribeEmail">`），而那条 CSS
 *   此前**根本没有定义** —— 也就是说那个 label 一直以"邮箱地址"四个字正常
 *   显示在输入框上方，把整块表单撑高了一截，而没有任何东西会告诉你这件事。
 *   （同一批里 checkout.html 也沿用了这个类名。）
 *
 * ★ 为什么不把 HTML 改成 .sr-only：那样会让"类名 ↔ 定义"的一致性依赖
 *   "下次改 HTML 的人记得有这回事"。两类名并存但**指向同一条声明**，
 *   HTML 里用哪个都对；删掉任何一个之前，先 grep 清楚谁在用它。
 *   ⚠ 代价说清楚：这些样式**不随元素 `hidden` 属性联动**，
 *     未来若要给它们加 `[hidden]` 联动的 display 覆盖，两处都要改。
 */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ 计费周期切换 */

.billing-toggle {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  margin: 0 auto 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
}

.billing-toggle__btn {
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.billing-toggle__btn:hover { color: var(--text-primary); }

.billing-toggle__btn.is-active {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.billing-toggle__btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ 热销卡 */

.price-card--hot {
  border-color: rgba(168, 85, 247, 0.42);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.1), var(--bg-card) 55%);
}

/* 与 .price-card__badge 同为"骑在卡片上沿"的标记，只是靠右：
   .price-card__badge 占左（免费版 "Beta"），热销占右，两者不会同时出现在一张卡上。 */
.price-card__hot-badge {
  position: absolute;
  top: -12px;
  right: 32px;
  padding: 4px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* 非当前计费周期的价格行。原价只在这时露出来 ——
   月付视图下把"年付 $90"当原价划掉是撒谎。 */
.price-card__list {
  margin-bottom: 2px;
  color: var(--text-tertiary);
  font-size: 12.5px;
  text-decoration: line-through;
}

/* 立省徽标。数据来自服务端 catalog（save_cents），不是前端算的差价 ——
   见 pricing.js 头注：年付档是**定价政策**（本批 = 10×月付），划线原价同理，
   两者都是目录里的字段；页面自己算就会在政策变更时静默漂移。
   第二百零六批的数：标准 $9/月 → 年付 $90（划线 $108、立省 $18）。 */
.price-card__save {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.14);
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ 发布提醒行 */

.pricing-subscribe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
}

.pricing-subscribe__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
}

.pricing-subscribe__text strong { font-size: 1rem; font-weight: 640; }
.pricing-subscribe__text span { color: var(--text-secondary); font-size: 0.875rem; }

/* 行内形态：表单不再撑满，且去掉原来的上边距（间距由容器给）。 */
.subscribe--inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
  flex: 1 1 380px;
}

.subscribe--inline .subscribe__input {
  flex: 1 1 220px;
  width: auto;
  margin-bottom: 0;
}

/* 提示消息独占一行：否则窄屏下它会与输入框挤在同一行，把输入框压成一小条。 */
.subscribe--inline .subscribe__msg {
  flex-basis: 100%;
  margin: 0;
}

/* ------------------------------------------------------------------ 定价区脚注 */

.pricing-foot {
  max-width: 760px;
  margin: 24px auto 0;
  color: var(--text-tertiary);
  font-size: 12.5px;
  line-height: 1.75;
  text-align: center;
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
  min-height: 20px;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ------------------------------------------------------------- 响应式 */

@media (max-width: 1024px) {
  .feature-row { grid-template-columns: 1fr; gap: 32px; }
  .feature-row--reverse .feature-row__media { order: 0; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .section { padding: 72px 0; }
  .grid--3 { grid-template-columns: 1fr; }
  .platform-cards { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr; }
  .release { grid-template-columns: 1fr; }
  .release__actions { min-width: 0; }
  .req-list__row { grid-template-columns: 1fr; gap: 6px; }
  .nav__links { display: none; }
  .nav__toggle { display: grid; }
  .nav__links.is-open {
    display: flex;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px var(--gutter) 18px;
    background: rgba(8, 8, 12, 0.98);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px);
  }
  .nav__links.is-open .nav__link { padding: 12px 14px; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 40px; }
  /* 首屏信息行在窄屏会把分隔点「·」甩到下一行开头（孤行分隔符）。
     直接改两行显示并隐藏分隔点，比让它换行更好看也更好读。 */
  .hero__meta { flex-direction: column; gap: 6px; }
  .hero__meta .muted { display: none; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .cta { padding: 48px 22px; }
  .timeline { padding-left: 24px; }
  .roadmap-item { grid-template-columns: 1fr; gap: 8px; }
  .footer__grid { grid-template-columns: 1fr; }
  .spec-table { font-size: 0.875rem; }
  .spec-table th, .spec-table td { padding: 12px 14px; }

  /* 导航挤不下时优先压缩留白，而不是让里面的控件折行 */
  .nav__inner { gap: 10px; }
  .nav__right { gap: 8px; }
  .brand { font-size: 1rem; gap: 8px; }
  .brand__mark { width: 27px; height: 27px; border-radius: 8px; }
  .brand__mark svg { width: 15px; height: 15px; }
  .lang-switch button { padding: 5px 9px; font-size: 12px; }
  .nav__right .btn--sm { padding: 8px 13px; }

  /* 页脚链接原本只有 ~18px 高（行内元素 = 行高），低于 WCAG 2.2 的 24px
     最小触控尺寸。改成 32px 的块级命中区，同时把原来的 11px 外边距收掉，
     整块页脚高度基本不变（原来 20+11=31px/条，现在 32+0）。 */
  .footer li { margin-bottom: 0; }
  .footer li a,
  .footer__bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
}

/* 320~430px（最窄的手机）横向空间算不过来：品牌 + 语言切换 + 下载按钮 + 菜单
   四件套 ≈ 390px > 320px。硬挤的结果是「中文」被压成竖排两行。
   取舍：导航里的「下载」与汉堡菜单里的「下载」重复，且首屏就有大号下载 CTA，
   而语言切换没有替代入口 —— 所以让下载按钮退场，保住语言切换。 */
@media (max-width: 430px) {
  .nav__right .btn--primary { display: none; }
}