/* 页面专属：.page-home */
.page-home {
  --hero-bg: #0D0D2B;
  --card-border: #4B0082;
  --timeline-line: #00BFFF;
  --export-glow: #FFA500;
}

.page-home .breadcrumb {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  background: transparent;
  color: var(--color-text, #B0B0FF);
  border-bottom: 1px solid var(--color-border, #4B0082);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.page-home .breadcrumb__item::after {
  content: "›";
  margin-left: 0.25rem;
  color: var(--color-text, #B0B0FF);
}
.page-home .breadcrumb__item:last-child::after { content: ""; }
.page-home .breadcrumb__link { color: var(--color-secondary, #00BFFF); text-decoration: none; }
.page-home .breadcrumb__link:hover { color: var(--color-accent, #FFA500); }

/* 首屏 */
.page-home .hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  padding: 2rem 1rem 3rem;
  color: var(--color-heading, #FFFFFF);
}
.page-home .hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.page-home .hero__text { display: flex; flex-direction: column; gap: 1rem; }
.page-home .hero__title { font-family: var(--font-heading, monospace); font-size: 1.8rem; margin: 0; color: var(--color-heading, #FFFFFF); text-shadow: 0 0 8px var(--color-primary, #8A2BE2); }
.page-home .hero__subtitle { font-size: 0.9rem; color: var(--color-secondary, #00BFFF); letter-spacing: 0.05em; }
.page-home .hero__desc { font-size: 0.95rem; line-height: 1.6; max-width: 34em; color: var(--color-text, #E0E0FF); }
.page-home .hero__cta { align-self: flex-start; }
.page-home .hero__visual { position: relative; }
.page-home .hero__img { width: 100%; height: auto; display: block; border: 2px solid var(--color-primary, #8A2BE2); object-fit: cover; aspect-ratio: 800/600; }
.page-home .hero__overlay-line {
  position: absolute; top: 10%; right: -5%; width: 120%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-secondary, #00BFFF), transparent);
  transform: rotate(-8deg); pointer-events: none;
}
.page-home .hero__diagonal {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--color-dark, #0D0D2B) 40%, transparent 60%);
  z-index: 1; pointer-events: none;
}

/* 四大核心功能 */
.page-home .features {
  padding: 3rem 1rem;
  background: var(--color-light, #F0F0FF);
  color: var(--color-dark, #0D0D2B);
}
.page-home .features__heading { text-align: center; margin-bottom: 0.5rem; }
.page-home .features__desc { text-align: center; color: #555; margin-bottom: 2rem; }
.page-home .features__grid { grid-template-columns: 1fr; gap: 1.5rem; max-width: var(--max-width, 1200px); margin: 0 auto; }
.page-home .features__card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; background: #FFFFFF; border: 1px solid var(--card-border); transition: box-shadow 0.3s, transform 0.3s; }
.page-home .features__card:hover { box-shadow: 0 8px 24px rgba(138,43,226,0.15); transform: translateY(-4px); }
.page-home .card__icon { display: flex; align-items: center; justify-content: center; }
.page-home .card__title { font-family: var(--font-heading, monospace); font-size: 1.2rem; margin: 0; color: var(--color-primary, #8A2BE2); }
.page-home .card__text { font-size: 0.9rem; line-height: 1.6; color: #333; }
.page-home .card__img { width: 100%; height: auto; aspect-ratio: 400/300; object-fit: cover; border: 1px solid var(--color-border, #4B0082); }

/* 版本动态 */
.page-home .timeline {
  padding: 3rem 1rem;
  background: var(--color-dark, #0D0D2B);
  color: var(--color-heading, #FFFFFF);
  position: relative;
}
.page-home .timeline__heading { text-align: center; margin-bottom: 0.5rem; }
.page-home .timeline__note { display: inline-block; transform: rotate(-2deg); color: var(--color-accent, #FFA500); font-size: 0.8rem; margin-left: 0.5rem; }
.page-home .timeline__visual { max-width: 600px; margin: 1rem auto; }
.page-home .timeline__img { width: 100%; height: auto; aspect-ratio: 1200/800; object-fit: cover; border: 1px solid var(--color-border, #4B0082); }
.page-home .timeline__list { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; margin: 2rem auto 1.5rem; position: relative; }
.page-home .timeline__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(138,43,226,0.1); border-left: 3px solid var(--timeline-line); }
.page-home .timeline__version { font-family: var(--font-pixel, monospace); font-weight: bold; color: var(--color-secondary, #00BFFF); min-width: 3rem; }
.page-home .timeline__label { flex: 1; font-size: 0.9rem; color: var(--color-text, #E0E0FF); }
.page-home .timeline__date { font-size: 0.8rem; color: var(--color-text, #B0B0FF); white-space: nowrap; }
.page-home .timeline__copy { font-size: 0.75rem; padding: 0.25rem 0.75rem; white-space: nowrap; }
.page-home .timeline__bar { height: 4px; background: linear-gradient(90deg, var(--color-accent, #FFA500), var(--color-secondary, #00BFFF)); margin-top: 0.5rem; animation: pulseBar 3s infinite alternate; }
@keyframes pulseBar { from { opacity: 0.6; width: 60%; } to { opacity: 1; width: 100%; } }
.page-home .timeline__more { display: block; width: fit-content; margin: 0 auto; }

/* 一键导出 */
.page-home .export {
  padding: 3rem 1rem;
  background: var(--color-light, #F0F0FF);
  color: var(--color-dark, #0D0D2B);
}
.page-home .export__inner { max-width: var(--max-width, 1200px); margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; }
.page-home .export__heading { margin: 0; }
.page-home .export__desc { max-width: 36em; line-height: 1.6; color: #333; }
.page-home .export__visual { max-width: 500px; width: 100%; }
.page-home .export__img { width: 100%; height: auto; aspect-ratio: 600/400; object-fit: cover; border: 2px solid var(--color-primary, #8A2BE2); }
.page-home .export__btn { margin-top: 0.5rem; }
.page-home .btn--pulse { animation: pulseGlow 2s infinite; }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 6px var(--export-glow); } 50% { box-shadow: 0 0 20px var(--export-glow), 0 0 30px var(--color-primary, #8A2BE2); } }

/* 信任声明 */
.page-home .trust {
  padding: 1.5rem 1rem;
  background: var(--color-dark, #0D0D2B);
  text-align: center;
}
.page-home .trust__text { font-size: 0.9rem; color: var(--color-text, #E0E0FF); max-width: 48em; margin: 0 auto; border-top: 1px solid var(--color-border, #4B0082); padding-top: 1rem; }

/* 返回顶部（共享 class，页内专属微调） */
.page-home .scroll-top { display: none; }
.page-home .scroll-top[data-visible] { display: flex; }

/* 共享类引用确保不污染 */
.page-home .btn--accent {
  background: var(--color-accent, #FFA500);
  color: #0D0D2B;
  border: none;
  padding: 0.5rem 1rem;
  font-family: var(--font-body, sans-serif);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.page-home .btn--accent:hover { opacity: 0.85; }

.page-home .tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  font-family: var(--font-pixel, monospace);
  background: var(--color-success, #32CD32);
  color: #0D0D2B;
  text-transform: uppercase;
}

/* 媒体查询：桌面提升 */
@media (min-width: 768px) {
  .page-home .hero { padding: 3rem 2rem 5rem; }
  .page-home .hero__grid { grid-template-columns: 1fr 1fr; }
  .page-home .hero__title { font-size: 2.5rem; }
  .page-home .hero__subtitle { font-size: 1rem; }
  .page-home .features { padding: 4rem 2rem; }
  .page-home .features__grid { grid-template-columns: 1fr 1fr; }
  .page-home .timeline { padding: 4rem 2rem; }
  .page-home .timeline__list { max-width: 700px; }
  .page-home .export { padding: 4rem 2rem; }
  .page-home .export__inner { flex-direction: row; text-align: left; }
  .page-home .export__visual { order: 2; }
}

@media (min-width: 1024px) {
  .page-home .hero__title { font-size: 3rem; }
  .page-home .features__grid { grid-template-columns: repeat(2, 1fr); }
}
<<</PAGE_CSS>>>