@zhang_jifan/fanui 2.1.0

package/src/components/_marketing.scss

@@ -0,0 +1,982 @@
+// =============================================================================
+// fanUI · 官网 / 落地页组件 (Marketing)
+// -----------------------------------------------------------------------------
+// 面向企业官网、产品落地页、SaaS 首页的成套版式组件。
+// 全部基于同一套主题色令牌与液态玻璃令牌，因此：
+//   · 换主题色 → 渐变、光斑、按钮、图表一起变
+//   · 关液态玻璃 → 所有玻璃卡片自动退回实体表面
+//
+//   .fanui-announcement  顶部公告条
+//   .fanui-hero          首屏（极光背景 + 渐变标题 + 双 CTA + 信任背书）
+//   .fanui-section-head  区块标题组
+//   .fanui-feature       特性卡
+//   .fanui-bento         Bento 网格
+//   .fanui-flow          三步/多步流程
+//   .fanui-marquee       Logo 无缝滚动
+//   .fanui-stat-band     数据带（常用于"客户成果"）
+//   .fanui-pricing       价格表（月付/年付切换）
+//   .fanui-testimonial   客户证言
+//   .fanui-cta           行动号召区块
+//   .fanui-faq           常见问题（原生 details 驱动，无 JS 可用）
+//   .fanui-footer        页脚（多列 + 订阅）
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 顶部公告条
+// -----------------------------------------------------------------------------
+
+.fanui-announcement {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-2") fn.fanui-var("space-4");
+  font-size: fn.fanui-var("font-size-sm");
+  color: fn.fanui-var("primary-fg");
+  background-image: var(--fanui-brand-grad);
+  text-align: center;
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  &__badge {
+    padding: 1px 8px;
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    border-radius: fn.fanui-var("radius-full");
+    background-color: fn.fanui-alpha(#ffffff, 0.22);
+    color: #ffffff;
+  }
+
+  &__close {
+    margin-inline-start: fn.fanui-var("space-2");
+    border: 0;
+    background: transparent;
+    color: inherit;
+    opacity: 0.7;
+    cursor: pointer;
+
+    &:hover { opacity: 1; }
+  }
+
+  &--soft {
+    background-image: none;
+    background-color: fn.fanui-var("primary-soft");
+    color: fn.fanui-var("primary-ink");
+
+    .fanui-announcement__badge { background-color: fn.fanui-alpha(#ffffff, 0.7); color: fn.fanui-var("primary-ink"); }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 首屏 Hero
+// -----------------------------------------------------------------------------
+
+.fanui-hero {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  padding-block: fn.fanui-var("space-24") fn.fanui-var("space-20");
+  text-align: center;
+
+  // 极光背景：两团品牌色光斑 + 网格
+  &__aurora {
+    position: absolute;
+    inset: -20% -10% auto -10%;
+    height: 140%;
+    z-index: -2;
+    pointer-events: none;
+    background:
+      radial-gradient(42% 46% at 24% 26%, var(--fanui-brand-aura-a), transparent 62%),
+      radial-gradient(38% 42% at 76% 22%, var(--fanui-brand-aura-b), transparent 60%),
+      radial-gradient(52% 48% at 50% 84%, fn.fanui-var("primary-soft"), transparent 68%);
+    filter: blur(28px);
+    opacity: 0.9;
+  }
+
+  &__grid {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-image:
+      linear-gradient(fn.fanui-alpha(#64748b, 0.10) 1px, transparent 1px),
+      linear-gradient(90deg, fn.fanui-alpha(#64748b, 0.10) 1px, transparent 1px);
+    background-size: 56px 56px;
+    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
+    mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
+  }
+
+  &__inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: fn.fanui-var("space-5");
+    max-width: 820px;
+    margin-inline: auto;
+  }
+
+  &__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    padding: 5px 12px 5px 6px;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+    border-radius: fn.fanui-var("radius-full");
+    @include mx.fanui-liquid-glass();
+    --fanui-glass-radius: 9999px;
+    --fanui-glass-intensity: 0.6;
+  }
+
+  &__eyebrow-tag {
+    padding: 1px 8px;
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("primary-fg");
+    background-color: fn.fanui-var("primary");
+    border-radius: fn.fanui-var("radius-full");
+  }
+
+  &__title {
+    margin: 0;
+    font-size: clamp(2.25rem, 5.2vw, 4rem);
+    font-weight: fn.fanui-var("font-weight-extrabold");
+    line-height: 1.1;
+    letter-spacing: fn.fanui-var("tracking-tight");
+    color: fn.fanui-var("color-text-strong");
+    text-wrap: balance;
+
+    em {
+      font-style: normal;
+      @include mx.fanui-text-gradient(var(--fanui-brand-grad-a), var(--fanui-brand-grad-b), 100deg);
+    }
+  }
+
+  &__lead {
+    max-width: 620px;
+    margin: 0;
+    font-size: clamp(1rem, 1.4vw, 1.1875rem);
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+    text-wrap: pretty;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: fn.fanui-var("space-3");
+  }
+
+  &__note {
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  // 首屏内的产品截图 / 视频容器
+  &__media {
+    position: relative;
+    width: 100%;
+    max-width: 1080px;
+    margin-top: fn.fanui-var("space-10");
+    border-radius: fn.fanui-var("radius-2xl");
+    overflow: hidden;
+
+    img { display: block; width: 100%; height: auto; }
+
+    // 顶部高光边缘，呼应液态玻璃
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      box-shadow: inset 0 1px 0 fn.fanui-alpha(#ffffff, 0.5);
+    }
+  }
+
+  // 左右分栏版（更适合 B 端产品页）
+  &--split {
+    text-align: start;
+
+    .fanui-hero__inner {
+      flex-direction: row;
+      align-items: center;
+      gap: fn.fanui-var("space-16");
+      max-width: 1200px;
+      text-align: start;
+    }
+
+    .fanui-hero__copy { flex: 1 1 46%; display: flex; flex-direction: column; gap: fn.fanui-var("space-5"); align-items: flex-start; }
+    .fanui-hero__media { flex: 1 1 54%; margin-top: 0; }
+    .fanui-hero__actions { justify-content: flex-start; }
+
+    @include mx.fanui-media-down("md") {
+      .fanui-hero__inner { flex-direction: column; gap: fn.fanui-var("space-10"); }
+      .fanui-hero__copy { align-items: center; text-align: center; }
+      .fanui-hero__actions { justify-content: center; }
+    }
+  }
+
+  &--compact { padding-block: fn.fanui-var("space-16") fn.fanui-var("space-12"); }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 区块标题组
+// -----------------------------------------------------------------------------
+
+.fanui-section-head {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-3");
+  max-width: 680px;
+  margin-bottom: fn.fanui-var("space-10");
+
+  &__eyebrow {
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    letter-spacing: fn.fanui-var("tracking-wider");
+    text-transform: uppercase;
+    color: fn.fanui-var("primary");
+  }
+
+  &__title {
+    margin: 0;
+    font-size: clamp(1.5rem, 3vw, 2.25rem);
+    font-weight: fn.fanui-var("font-weight-bold");
+    line-height: 1.2;
+    letter-spacing: fn.fanui-var("tracking-tight");
+    color: fn.fanui-var("color-text-strong");
+    text-wrap: balance;
+  }
+
+  &__desc {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-md");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &--center {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 特性卡
+// -----------------------------------------------------------------------------
+
+.fanui-feature {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-5");
+  border-radius: fn.fanui-var("radius-xl");
+  @include mx.fanui-transition((transform, box-shadow, border-color), v.$fanui-duration-base);
+
+  &__icon {
+    display: grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: fn.fanui-var("radius-lg");
+    color: fn.fanui-var("primary-fg");
+    background-image: var(--fanui-brand-grad);
+    font-size: fn.fanui-var("font-size-lg");
+    box-shadow: 0 6px 16px -8px fn.fanui-var("primary-glow");
+  }
+
+  &__title {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-md");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__link {
+    margin-top: auto;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("primary");
+    text-decoration: none;
+
+    &::after {
+      content: " →";
+      @include mx.fanui-transition(transform, v.$fanui-duration-fast);
+      display: inline-block;
+    }
+
+    &:hover::after { transform: translateX(3px); }
+  }
+
+  &--plain { padding: 0; }
+
+  &--glass { @include mx.fanui-liquid-glass(); }
+}
+
+// -----------------------------------------------------------------------------
+// 5. Bento 网格
+// -----------------------------------------------------------------------------
+// 通过 --fanui-bento-* 变量声明跨列/跨行，实现富媒体版式。
+
+.fanui-bento {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: fn.fanui-var("space-4");
+
+  > * {
+    grid-column: span var(--fanui-bento-cols, 4);
+    grid-row: span var(--fanui-bento-rows, 1);
+    min-width: 0;
+  }
+
+  &__cell {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-2");
+    padding: fn.fanui-var("space-5");
+    border-radius: fn.fanui-var("radius-xl");
+    @include mx.fanui-liquid-glass();
+    @include mx.fanui-transition(transform, v.$fanui-duration-base);
+
+    &:hover { transform: translateY(-2px); }
+  }
+
+  &__title {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-lg");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__media {
+    margin-top: auto;
+    border-radius: fn.fanui-var("radius-lg");
+    overflow: hidden;
+
+    img { display: block; width: 100%; height: 100%; object-fit: cover; }
+  }
+
+  // 品牌渐变强调格
+  &__cell--brand {
+    background-image: var(--fanui-brand-grad);
+    color: fn.fanui-var("primary-fg");
+    border-color: transparent;
+
+    .fanui-bento__title,
+    .fanui-bento__desc { color: inherit; }
+  }
+
+  &__cell--span-6 { --fanui-bento-cols: 6; }
+  &__cell--span-8 { --fanui-bento-cols: 8; }
+  &__cell--span-12 { --fanui-bento-cols: 12; }
+  &__cell--tall { --fanui-bento-rows: 2; }
+
+  @include mx.fanui-media-down("lg") {
+    > * { --fanui-bento-cols: 6; }
+  }
+
+  @include mx.fanui-media-down("sm") {
+    > * { --fanui-bento-cols: 12; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 6. 流程步骤
+// -----------------------------------------------------------------------------
+
+.fanui-flow {
+  display: grid;
+  grid-template-columns: repeat(var(--fanui-flow-cols, 3), minmax(0, 1fr));
+  gap: fn.fanui-var("space-6");
+  counter-reset: fanui-flow;
+
+  @include mx.fanui-media-down("md") {
+    grid-template-columns: 1fr;
+  }
+
+  &__step {
+    position: relative;
+    counter-increment: fanui-flow;
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-2");
+    padding-top: fn.fanui-var("space-4");
+
+    // 顶部进度线
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: calc(#{fn.fanui-var("space-6")} * -1 + 1px);
+      height: 2px;
+      background-image: linear-gradient(to right, var(--fanui-primary), var(--fanui-primary-vivid));
+      border-radius: fn.fanui-var("radius-full");
+    }
+
+    &:last-child::before { right: 0; }
+  }
+
+  &__index {
+    display: grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("primary-ink");
+    background-color: fn.fanui-var("primary-soft-2");
+    border-radius: fn.fanui-var("radius-full");
+  }
+
+  &__title {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-md");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 7. Logo 无缝滚动
+// -----------------------------------------------------------------------------
+
+.fanui-marquee {
+  display: flex;
+  overflow: hidden;
+  gap: var(--fanui-marquee-gap, #{fn.fanui-var("space-12")});
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
+
+  &__track {
+    display: flex;
+    align-items: center;
+    gap: inherit;
+    flex: 0 0 auto;
+    min-width: 100%;
+    animation: fanui-marquee var(--fanui-marquee-duration, 36s) linear infinite;
+  }
+
+  &:hover &__track { animation-play-state: paused; }
+
+  &__item {
+    display: grid;
+    place-items: center;
+    flex: 0 0 auto;
+    height: 40px;
+    color: fn.fanui-var("color-text-subtle");
+    font-size: fn.fanui-var("font-size-lg");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    letter-spacing: fn.fanui-var("tracking-tight");
+    filter: grayscale(1);
+    opacity: 0.72;
+    @include mx.fanui-transition((filter, opacity, color), v.$fanui-duration-base);
+
+    &:hover {
+      filter: none;
+      opacity: 1;
+      color: fn.fanui-var("color-text");
+    }
+
+    img { max-height: 32px; width: auto; }
+  }
+
+  &--reverse &__track { animation-direction: reverse; }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__track { animation: none; }
+  }
+}
+
+@keyframes fanui-marquee {
+  from { transform: translateX(0); }
+  to   { transform: translateX(calc(-100% - var(--fanui-marquee-gap, 48px))); }
+}
+
+// -----------------------------------------------------------------------------
+// 8. 数据带
+// -----------------------------------------------------------------------------
+
+.fanui-stat-band {
+  display: grid;
+  grid-template-columns: repeat(var(--fanui-stat-cols, 4), minmax(0, 1fr));
+  gap: fn.fanui-var("space-6");
+  padding: fn.fanui-var("space-8");
+  border-radius: fn.fanui-var("radius-2xl");
+  @include mx.fanui-liquid-glass();
+
+  @include mx.fanui-media-down("md") {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-1");
+    text-align: center;
+  }
+
+  &__value {
+    font-size: clamp(1.75rem, 3vw, 2.5rem);
+    font-weight: fn.fanui-var("font-weight-extrabold");
+    line-height: 1.1;
+    letter-spacing: fn.fanui-var("tracking-tight");
+    font-variant-numeric: tabular-nums;
+    @include mx.fanui-text-gradient(var(--fanui-brand-grad-a), var(--fanui-brand-grad-b), 120deg);
+  }
+
+  &__label {
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 9. 价格表
+// -----------------------------------------------------------------------------
+
+.fanui-pricing {
+  // 月付 / 年付切换：由 JS 或 .is-yearly 控制显隐
+  &__switch {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-3");
+    margin: 0 auto fn.fanui-var("space-8");
+  }
+
+  &__save {
+    padding: 2px 8px;
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("success-ink");
+    background-color: fn.fanui-var("success-soft");
+    border-radius: fn.fanui-var("radius-full");
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(var(--fanui-pricing-cols, 3), minmax(0, 1fr));
+    gap: fn.fanui-var("space-5");
+    align-items: start;
+
+    @include mx.fanui-media-down("lg") {
+      grid-template-columns: 1fr;
+      max-width: 460px;
+      margin-inline: auto;
+    }
+  }
+
+  &__plan {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-4");
+    padding: fn.fanui-var("space-6");
+    border-radius: fn.fanui-var("radius-2xl");
+    @include mx.fanui-liquid-glass();
+    @include mx.fanui-transition((transform, box-shadow), v.$fanui-duration-base);
+
+    &:hover { transform: translateY(-3px); }
+  }
+
+  // 推荐方案：品牌渐变描边 + 高亮标签
+  &__plan--featured {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px var(--fanui-primary), var(--fanui-glass-shadow);
+    @include mx.fanui-media("lg") { transform: scale(1.03); }
+
+    &:hover { transform: translateY(-3px) scale(1.03); }
+  }
+
+  &__tag {
+    position: absolute;
+    inset-block-start: -12px;
+    inset-inline-start: fn.fanui-var("space-6");
+    padding: 3px 10px;
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: #fff;
+    background-image: var(--fanui-brand-grad);
+    border-radius: fn.fanui-var("radius-full");
+  }
+
+  &__name {
+    font-size: fn.fanui-var("font-size-md");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__price {
+    display: flex;
+    align-items: flex-end;
+    gap: fn.fanui-var("space-1");
+    font-variant-numeric: tabular-nums;
+
+    strong {
+      font-size: clamp(2rem, 3.4vw, 2.75rem);
+      font-weight: fn.fanui-var("font-weight-extrabold");
+      line-height: 1;
+      letter-spacing: fn.fanui-var("tracking-tight");
+      color: fn.fanui-var("color-text-strong");
+    }
+
+    span {
+      font-size: fn.fanui-var("font-size-sm");
+      color: fn.fanui-var("color-text-subtle");
+      padding-bottom: 4px;
+    }
+  }
+
+  &__features {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-2");
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+
+    li {
+      display: flex;
+      align-items: flex-start;
+      gap: fn.fanui-var("space-2");
+    }
+
+    li::before {
+      content: "✓";
+      flex: 0 0 auto;
+      font-size: fn.fanui-var("font-size-sm");
+      color: fn.fanui-var("primary");
+      font-weight: fn.fanui-var("font-weight-bold");
+    }
+
+    li.is-off { opacity: 0.5; text-decoration: line-through; }
+    li.is-off::before { content: "—"; color: fn.fanui-var("color-text-subtle"); }
+  }
+
+  &__foot { margin-top: auto; }
+
+  // 价格周期显隐
+  .fanui-price--yearly { display: none; }
+  &.is-yearly {
+    .fanui-price--monthly { display: none; }
+    .fanui-price--yearly { display: flex; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 10. 客户证言
+// -----------------------------------------------------------------------------
+
+.fanui-testimonial {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-4");
+  padding: fn.fanui-var("space-6");
+  border-radius: fn.fanui-var("radius-xl");
+  @include mx.fanui-liquid-glass();
+
+  &__quote {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-md");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text");
+    text-wrap: pretty;
+
+    &::before {
+      content: "“";
+      display: block;
+      font-size: 40px;
+      line-height: 0.6;
+      color: fn.fanui-var("primary");
+      opacity: 0.5;
+    }
+  }
+
+  &__person {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-3");
+    margin-top: auto;
+    padding-top: fn.fanui-var("space-3");
+    border-top: 1px solid fn.fanui-var("glass-divider");
+  }
+
+  &__name {
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__role {
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &--brand {
+    background-image: var(--fanui-brand-grad);
+    color: fn.fanui-var("primary-fg");
+    border-color: transparent;
+
+    .fanui-testimonial__quote,
+    .fanui-testimonial__name,
+    .fanui-testimonial__role { color: inherit; }
+
+    .fanui-testimonial__quote::before { color: inherit; opacity: 0.4; }
+    .fanui-testimonial__person { border-top-color: fn.fanui-alpha(#ffffff, 0.25); }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 11. 行动号召
+// -----------------------------------------------------------------------------
+
+.fanui-cta {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: fn.fanui-var("space-4");
+  padding: fn.fanui-var("space-16") fn.fanui-var("space-6");
+  text-align: center;
+  border-radius: fn.fanui-var("radius-2xl");
+  @include mx.fanui-liquid-glass();
+
+  &__glow {
+    position: absolute;
+    inset: -30% -10%;
+    z-index: -1;
+    pointer-events: none;
+    background:
+      radial-gradient(40% 44% at 20% 30%, var(--fanui-brand-aura-a), transparent 60%),
+      radial-gradient(36% 40% at 80% 70%, var(--fanui-brand-aura-b), transparent 58%);
+    filter: blur(30px);
+  }
+
+  &__title {
+    margin: 0;
+    max-width: 640px;
+    font-size: clamp(1.5rem, 3vw, 2.25rem);
+    font-weight: fn.fanui-var("font-weight-bold");
+    letter-spacing: fn.fanui-var("tracking-tight");
+    color: fn.fanui-var("color-text-strong");
+    text-wrap: balance;
+  }
+
+  &__desc {
+    margin: 0;
+    max-width: 520px;
+    font-size: fn.fanui-var("font-size-md");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: fn.fanui-var("space-3");
+    justify-content: center;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 12. 常见问题
+// -----------------------------------------------------------------------------
+
+.fanui-faq {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-2");
+
+  &__item {
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-lg");
+    background-color: fn.fanui-var("color-surface");
+    overflow: hidden;
+    @include mx.fanui-transition((border-color, background-color), v.$fanui-duration-fast);
+
+    &[open] {
+      border-color: fn.fanui-var("primary-border");
+      background-color: fn.fanui-var("primary-soft");
+    }
+  }
+
+  &__q {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+    padding: fn.fanui-var("space-4") fn.fanui-var("space-5");
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+    cursor: pointer;
+    list-style: none;
+
+    &::-webkit-details-marker { display: none; }
+
+    &::after {
+      content: "+";
+      flex: 0 0 auto;
+      font-size: 18px;
+      font-weight: fn.fanui-var("font-weight-normal");
+      color: fn.fanui-var("color-text-muted");
+      @include mx.fanui-transition(transform, v.$fanui-duration-base);
+    }
+  }
+
+  &__item[open] &__q::after { transform: rotate(45deg); }
+
+  &__a {
+    padding: 0 fn.fanui-var("space-5") fn.fanui-var("space-4");
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 13. 页脚
+// -----------------------------------------------------------------------------
+
+.fanui-footer {
+  padding-block: fn.fanui-var("space-16") fn.fanui-var("space-8");
+  border-top: 1px solid fn.fanui-var("color-border");
+  background-color: fn.fanui-var("color-bg-subtle");
+  font-size: fn.fanui-var("font-size-sm");
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 1.6fr repeat(var(--fanui-footer-cols, 3), 1fr);
+    gap: fn.fanui-var("space-8");
+
+    @include mx.fanui-media-down("md") {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  &__brand {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-3");
+    max-width: 320px;
+  }
+
+  &__logo {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    font-size: fn.fanui-var("font-size-lg");
+    font-weight: fn.fanui-var("font-weight-bold");
+    color: fn.fanui-var("color-text-strong");
+    text-decoration: none;
+  }
+
+  &__desc {
+    margin: 0;
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__title {
+    margin: 0 0 fn.fanui-var("space-3");
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-2");
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    a {
+      color: fn.fanui-var("color-text-muted");
+      text-decoration: none;
+      @include mx.fanui-transition(color, v.$fanui-duration-fast);
+
+      &:hover { color: fn.fanui-var("primary"); }
+    }
+  }
+
+  &__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+    margin-top: fn.fanui-var("space-10");
+    padding-top: fn.fanui-var("space-5");
+    border-top: 1px solid fn.fanui-var("color-border-subtle");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &__social {
+    display: flex;
+    gap: fn.fanui-var("space-2");
+
+    a {
+      display: grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      border-radius: fn.fanui-var("radius-full");
+      color: fn.fanui-var("color-text-muted");
+      background-color: fn.fanui-var("color-surface");
+      border: 1px solid fn.fanui-var("color-border");
+      text-decoration: none;
+      @include mx.fanui-transition((color, border-color, transform), v.$fanui-duration-fast);
+
+      &:hover {
+        color: fn.fanui-var("primary");
+        border-color: fn.fanui-var("primary-border");
+        transform: translateY(-2px);
+      }
+    }
+  }
+}