/* ===== 页面专属：.page-home ===== */
.page-home {
  --home-hero-min-height: min(90vh, 640px);
  --home-card-radius: 0;
  --home-chart-max: 480px;
  --home-section-gap: 60px;
  --home-title-underline: 3px solid var(--accent1);
  --home-shadow-card: 8px 8px 0 rgba(0,0,0,0.35);
  --home-shadow-card-hover: 12px 12px 0 rgba(0,0,0,0.45);
  display: block;
  width: 100%;
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--spacing-unit, 16px) var(--section-gap, 48px);
  font-family: var(--body-font, Georgia, 'Times New Roman', serif);
  color: var(--neutral-light, #E0E6ED);
  line-height: 1.6;
}

/* 面包屑 */
.page-home .breadcrumb {
  padding: calc(var(--spacing-unit, 16px) * 0.5) 0;
  font-size: 0.8rem;
  color: var(--meta-color, #8899AA);
  letter-spacing: 0.04em;
  border-bottom: var(--border-thick, 4px solid #2A3F66);
  margin-bottom: var(--spacing-unit, 16px);
  text-transform: uppercase;
}

/* ===== 首屏英雄区 ===== */
.page-home .home-hero {
  position: relative;
  min-height: var(--home-hero-min-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: var(--home-section-gap);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
}

.page-home .home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .home-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) brightness(0.55);
  transform: scale(1.12);
}

.page-home .home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, var(--primary, #0B1D3A) 58%, var(--accent1, #FF6B35) 58%);
  opacity: 0.88;
  mix-blend-mode: multiply;
}

.page-home .home-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  padding: calc(var(--spacing-unit, 16px) * 2) var(--spacing-unit, 16px);
  margin-left: 5%;
}

.page-home .home-hero-title {
  font-family: var(--heading-font, 'Arial Black', Impact, sans-serif);
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.15rem;
  line-height: 1.05;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  position: relative;
  display: inline-block;
}

.page-home .home-hero-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 80%;
  height: 3px;
  background: var(--accent1, #FF6B35);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}

.page-home .home-hero-subtitle {
  font-family: var(--body-font, Georgia, 'Times New Roman', serif);
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  font-weight: 400;
  color: var(--accent2, #00C896);
  letter-spacing: 0.12em;
  margin: 1.2rem 0 0.6rem;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.page-home .home-hero-desc {
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  color: var(--neutral-light, #E0E6ED);
  max-width: 520px;
  margin: 0 0 1.5rem;
  opacity: 0.92;
  line-height: 1.5;
}

.page-home .home-hero-cta {
  display: inline-block;
  padding: 0.75rem 2.2rem;
  font-family: var(--heading-font, 'Arial Black', Impact, sans-serif);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent1, #FF6B35);
  color: #ffffff;
  border: 4px solid #ffffff;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
  transition: transform 0.2s var(--transition, cubic-bezier(0.25,0.46,0.45,0.94)), box-shadow 0.2s var(--transition, cubic-bezier(0.25,0.46,0.45,0.94));
  text-decoration: none;
}

.page-home .home-hero-cta:hover,
.page-home .home-hero-cta:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
}

/* ===== 通用 section 标题 ===== */
.page-home .home-section-title {
  font-family: var(--heading-font, 'Arial Black', Impact, sans-serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 var(--spacing-unit, 16px);
  padding-bottom: calc(var(--spacing-unit, 16px) * 0.6);
  border-bottom: var(--home-title-underline);
  display: inline-block;
}

/* ===== 核心功能网格 ===== */
.page-home .home-features {
  margin-bottom: var(--home-section-gap);
}

.page-home .home-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit, 16px) * 2);
  margin-top: calc(var(--spacing-unit, 16px) * 1.5);
}

/* 卡片粗野主义风格 */
.page-home .home-card {
  background: var(--surface-elevated, #122645);
  border: var(--border-thick, 4px solid #2A3F66);
  box-shadow: var(--home-shadow-card);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--transition, cubic-bezier(0.25,0.46,0.45,0.94)), box-shadow 0.25s var(--transition, cubic-bezier(0.25,0.46,0.45,0.94));
  position: relative;
}

.page-home .home-card:hover,
.page-home .home-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--home-shadow-card-hover);
}

.page-home .home-card-imgwrap {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: var(--border-thick, 4px solid #2A3F66);
  background: var(--neutral-dark, #1A2A4A);
}

.page-home .home-card-imgwrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.page-home .home-card:hover .home-card-imgwrap img,
.page-home .home-card:focus-within .home-card-imgwrap img {
  transform: scale(1.04);
}

.page-home .home-card-title {
  font-family: var(--heading-font, 'Arial Black', Impact, sans-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent1, #FF6B35);
  margin: var(--spacing-unit, 16px) var(--spacing-unit, 16px) 0.4rem;
  line-height: 1.2;
}

.page-home .home-card-text {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  color: var(--neutral-light, #E0E6ED);
  margin: 0 var(--spacing-unit, 16px) var(--spacing-unit, 16px);
  flex: 1;
  opacity: 0.88;
}

.page-home .home-card-btn {
  align-self: flex-start;
  margin: auto var(--spacing-unit, 16px) var(--spacing-unit, 16px);
  padding: 0.5rem 1.6rem;
  font-family: var(--heading-font, 'Arial Black', Impact, sans-serif);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent2, #00C896);
  color: var(--primary, #0B1D3A);
  border: 3px solid var(--accent2, #00C896);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
  transition: transform 0.2s var(--transition, cubic-bezier(0.25,0.46,0.45,0.94)), box-shadow 0.2s var(--transition, cubic-bezier(0.25,0.46,0.45,0.94));
  text-decoration: none;
  cursor: pointer;
}

.page-home .home-card-btn:hover,
.page-home .home-card-btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(0,0,0,0.4);
  background: #ffffff;
  color: var(--primary, #0B1D3A);
  border-color: #ffffff;
}

/* 收藏按钮特殊样式 */
.page-home [data-favorite="toggle"] {
  background: transparent;
  border: 3px solid var(--accent1, #FF6B35);
  color: var(--accent1, #FF6B35);
  box-shadow: 4px 4px 0 rgba(255,107,53,0.25);
}

.page-home [data-favorite="toggle"]:hover,
.page-home [data-favorite="toggle"]:focus-visible {
  background: var(--accent1, #FF6B35);
  color: #ffffff;
  border-color: var(--accent1, #FF6B35);
  box-shadow: 7px 7px 0 rgba(255,107,53,0.4);
}

/* ===== 数据对比展示区 ===== */
.page-home .home-comparison {
  margin-bottom: var(--home-section-gap);
  position: relative;
  padding: calc(var(--spacing-unit, 16px) * 2) 0;
}

.page-home .home-comparison::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  right: -20%;
  bottom: 0;
  background: var(--neutral-dark, #1A2A4A);
  clip-path: polygon(0 0, 100% 2%, 98% 100%, 2% 98%);
  z-index: -1;
  opacity: 0.5;
}

.page-home .home-comparison-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-unit, 16px);
  align-items: center;
}

.page-home .home-comparison-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--surface-elevated, #122645);
  border: var(--border-thick, 4px solid #2A3F66);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.35);
  padding: var(--spacing-unit, 16px);
  max-width: var(--home-chart-max);
  margin: 0 auto;
}

.page-home .home-svg-chart {
  display: block;
  width: 100%;
  height: auto;
  max-width: 400px;
}

.page-home .home-comparison-text {
  padding: var(--spacing-unit, 16px);
}

.page-home .home-comparison-heading {
  font-family: var(--heading-font, 'Arial Black', Impact, sans-serif);
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent2, #00C896);
  margin: 0 0 0.8rem;
  line-height: 1.2;
}

.page-home .home-comparison-text p {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  color: var(--neutral-light, #E0E6ED);
  margin: 0 0 1rem;
  opacity: 0.9;
}

.page-home .home-comparison-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-home .home-comparison-list li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 0.9rem;
  color: var(--neutral-light, #E0E6ED);
}

.page-home .home-comparison-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent1, #FF6B35);
  font-size: 1rem;
}

/* ===== 信任与辅助 ===== */
.page-home .home-support {
  margin-top: calc(var(--home-section-gap) * 0.6);
  border-top: var(--border-thick, 4px solid #2A3F66);
  padding-top: var(--spacing-unit, 16px);
}

.page-home .home-support-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-unit, 16px);
  align-items: center;
  text-align: center;
}

.page-home .home-support-statement {
  font-size: 0.8rem;
  color: var(--meta-color, #8899AA);
  max-width: 680px;
  line-height: 1.5;
  margin: 0;
}

.page-home .home-support-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit, 16px) * 0.75);
  justify-content: center;
}

.page-home .home-support-links .tag {
  display: inline-block;
  padding: 0.3rem 1rem;
  font-family: var(--heading-font, 'Arial Black', Impact, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent2, #00C896);
  border: 2px solid var(--accent2, #00C896);
  box-shadow: 3px 3px 0 rgba(0,200,150,0.2);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.page-home .home-support-links .tag:hover,
.page-home .home-support-links .tag:focus-visible {
  background: var(--accent2, #00C896);
  color: var(--primary, #0B1D3A);
  box-shadow: 5px 5px 0 rgba(0,200,150,0.35);
}

/* ===== 桌面 >= 768px ===== */
@media (min-width: 768px) {
  .page-home {
    padding-left: calc(var(--header-width, 140px) + var(--spacing-unit, 16px));
    padding-right: calc(var(--spacing-unit, 16px) * 1.5);
  }

  .page-home .home-hero-content {
    margin-left: 8%;
    padding: calc(var(--spacing-unit, 16px) * 3) var(--spacing-unit, 16px);
  }

  .page-home .home-features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--spacing-unit, 16px) * 1.5);
  }

  .page-home .home-card {
    min-height: 520px;
  }

  .page-home .home-comparison-inner {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-unit, 16px) * 1.5);
  }

  .page-home .home-comparison-chart {
    margin: 0;
  }

  .page-home .home-comparison-text {
    padding: calc(var(--spacing-unit, 16px) * 1.5);
  }

  .page-home .home-support-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ===== 大桌面 >= 1024px ===== */
@media (min-width: 1024px) {
  .page-home .home-hero-content {
    margin-left: 10%;
    max-width: 800px;
  }

  .page-home .home-features-grid {
    gap: calc(var(--spacing-unit, 16px) * 2);
  }

  .page-home .home-card {
    min-height: 560px;
  }

  .page-home .home-comparison-inner {
    gap: calc(var(--spacing-unit, 16px) * 2.5);
  }
}

/* ===== 窄屏微调 < 480px ===== */
@media (max-width: 479px) {
  .page-home {
    padding-left: var(--spacing-unit, 16px);
    padding-right: var(--spacing-unit, 16px);
  }

  .page-home .home-hero {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    min-height: 440px;
  }

  .page-home .home-hero-overlay {
    background: linear-gradient(180deg, var(--primary, #0B1D3A) 65%, var(--accent1, #FF6B35) 65%);
  }

  .page-home .home-hero-content {
    margin-left: 0;
    padding: var(--spacing-unit, 16px);
  }

  .page-home .home-card-imgwrap {
    aspect-ratio: 16 / 9;
  }

  .page-home .home-comparison::before {
    left: -10%;
    right: -10%;
  }
}
<<</PAGE_CSS>>>