.page-home {
  /* 局部变量 */
  --cover-max-width: 1200px;
  --card-min-height: 280px;
  --filter-gap: 0.5rem;

  /* 首屏封面 */
  .home-cover {
    position: relative;
    max-width: var(--cover-max-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-card-bg));
    border-bottom: 2px solid var(--color-accent);
    overflow: hidden;

    .cover-content {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-lg);
      align-items: center;
      justify-content: space-between;
    }

    .cover-text {
      flex: 1 1 300px;
    }

    .cover-heading {
      font-family: var(--font-heading);
      font-weight: var(--fw-bold);
      font-size: clamp(2rem, 6vw, 3.5rem);
      color: var(--color-accent);
      margin: 0 0 var(--space-sm);
      line-height: 1.1;
      letter-spacing: 0.02em;
    }

    .cover-subtitle {
      font-family: var(--font-body);
      font-weight: var(--fw-normal);
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      color: var(--color-white);
      margin: 0 0 var(--space-lg);
      opacity: 0.9;
    }

    .cover-index {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);

      li {
        border-left: 3px solid var(--color-accent);
        padding-left: var(--space-sm);
      }

      a {
        font-family: var(--font-body);
        font-weight: var(--fw-bold);
        font-size: var(--fs-body);
        color: var(--color-white);
        text-decoration: none;
        transition: color var(--transition-fast);

        &:hover,
        &:focus {
          color: var(--color-accent);
        }
      }
    }

    .cover-visual {
      flex: 0 0 auto;
      max-width: 200px;

      img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 200px;
        object-fit: contain;
      }
    }

    .cover-note {
      position: absolute;
      top: var(--space-md);
      right: var(--space-md);
      font-family: var(--font-heading);
      font-weight: var(--fw-bold);
      font-size: var(--fs-small);
      color: var(--color-accent);
      writing-mode: vertical-rl;
      letter-spacing: 0.2em;
      opacity: 0.6;
      pointer-events: none;
      transform: rotate(180deg); /* 使文字从上往下读 */
    }
  }

  /* 筛选按钮栏 */
  .filter-bar {
    max-width: var(--cover-max-width);
    margin: 0 auto;
    padding: var(--space-md) var(--space-md) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--filter-gap);

    .btn-filter {
      background: transparent;
      border: 1px solid var(--color-border);
      color: var(--color-text-light);
      font-family: var(--font-body);
      font-weight: var(--fw-bold);
      font-size: var(--fs-small);
      padding: var(--space-xs) var(--space-md);
      cursor: pointer;
      transition: all var(--transition-fast);
      text-transform: uppercase;
      letter-spacing: 0.05em;

      &:hover,
      &:focus {
        border-color: var(--color-accent);
        color: var(--color-accent);
      }

      &.active {
        background: var(--color-accent);
        color: var(--color-primary);
        border-color: var(--color-accent);
      }
    }
  }

  /* 卡片区域 */
  .home-cards {
    position: relative;
    max-width: var(--cover-max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);

    .cards-bg-wrapper {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;

      .cards-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.15;
      }
    }

    .cards-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-lg);
      align-items: start;

      .card-annual {
        grid-column: 1 / 3; /* 占据两列，突出 */
      }

      .card {
        background: var(--color-card-bg);
        border: 1px solid var(--color-border);
        padding: var(--space-lg);
        transition: transform var(--transition-slow), box-shadow var(--transition-slow);
        min-height: var(--card-min-height);
        display: flex;
        flex-direction: column;
        gap: var(--space-md);

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        }

        .card-icon {
          width: 80px;
          height: 80px;
          flex-shrink: 0;

          .icon-img,
          .icon-svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .card-title {
          font-family: var(--font-heading);
          font-weight: var(--fw-bold);
          font-size: 1.25rem;
          color: var(--color-accent);
          margin: 0;
        }

        .card-desc {
          font-family: var(--font-body);
          font-weight: var(--fw-normal);
          font-size: var(--fs-body);
          color: var(--color-white);
          line-height: 1.6;
          margin: 0;
          flex: 1;
        }

        .card-cta {
          align-self: flex-start;
          margin-top: auto;
        }
      }
    }
  }

  /* 新版指引 */
  .home-guide {
    max-width: var(--cover-max-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    align-items: center;
    border-top: 1px solid var(--color-border);

    .guide-content {
      flex: 1 1 300px;

      .guide-heading {
        font-family: var(--font-heading);
        font-weight: var(--fw-bold);
        font-size: clamp(1.5rem, 4vw, 2rem);
        color: var(--color-accent);
        margin: 0 0 var(--space-md);
      }

      .guide-text {
        font-family: var(--font-body);
        font-weight: var(--fw-normal);
        font-size: var(--fs-body);
        color: var(--color-text-light);
        line-height: 1.8;
        margin: 0 0 var(--space-md);
      }

      .guide-cta {
        display: inline-block;
      }
    }

    .guide-visual {
      flex: 0 0 auto;
      max-width: 200px;

      .guide-svg {
        width: 120px;
        height: 120px;

        svg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  /* 响应式 */
  @media (max-width: 768px) {
    .home-cover {
      .cover-content {
        flex-direction: column;
        align-items: flex-start;
      }

      .cover-visual {
        align-self: flex-end;
        max-width: 120px;
      }

      .cover-note {
        top: var(--space-sm);
        right: var(--space-sm);
      }
    }

    .filter-bar {
      justify-content: center;
    }

    .home-cards {
      .cards-grid {
        grid-template-columns: 1fr;

        .card-annual {
          grid-column: 1 / 2;
        }
      }
    }

    .home-guide {
      flex-direction: column;
      text-align: center;

      .guide-visual {
        margin: 0 auto;
      }
    }
  }

  /* 桌面调整 */
  @media (min-width: 769px) {
    .home-cards {
      .cards-grid {
        .card-subscription,
        .card-mobile {
          grid-column: span 1;
        }
      }
    }

    .home-guide {
      .guide-content {
        order: 1;
      }
      .guide-visual {
        order: 2;
      }
    }
  }
}