BigStickNewOfficialWebsite-V2/pages/advantages.vue

<script setup>
import { gsap } from 'gsap'
import SiteHeader from '~/components/site/SiteHeader.vue'
import SiteFooter from '~/components/site/SiteFooter.vue'

const pageRoot = ref(null)
const { openConsultation } = useConsultation()
let animationContext

useHead({
  title: '核心优势｜大马棒·云途全域 GEO',
  meta: [
    {
      name: 'description',
      content:
        '了解大马棒·云途全域 GEO 在真人内容生产、全域媒体资源、全链路转化闭环和行业定制服务方面的核心能力。'
    }
  ]
})

const advantages = [
  {
    id: 'human-content',
    number: '01',
    short: '真人内容',
    eyebrow: 'Human content network',
    title: '人，才是 AI 搜索时代最大的护城河',
    summary:
      '行业独家 5 万真人分布式内容生产网络，用 C 端爆款内容思维做 B 端 GEO，建立真实可信的 AI 信任型声量。',
    problem: '批量生成内容看起来相似、缺少真实经验，用户不愿读，AI 也缺少持续引用的信任依据。',
    capability:
      '覆盖职场人、宝妈、学生、本地达人等多元真实身份，让内容带有具体经验、真实语气和行业场景。',
    actions: [
      '覆盖图文、问答、笔记和短视频等全内容形态',
      '根据行业与决策场景匹配真实创作者身份',
      '建立选题、审核、合规和质量复检机制'
    ],
    value: '用户读到的是真人真话，AI 引用的是可信信源。用户和 AI 都在帮品牌说话。',
    metric: '5 万',
    metricLabel: '真人内容生产网络',
    visual: ['真实身份', '真实体验', '场景内容', 'AI 信任']
  },
  {
    id: 'media-network',
    number: '02',
    short: '媒体矩阵',
    eyebrow: 'Trusted media network',
    title: '权威信源，是 AI 引用品牌的前提',
    summary:
      '5000+ 权威媒体与 10 万+ 优质自媒体组成全域矩阵，为品牌补充第三方公信力，并提升 AI 搜索中的引用权重。',
    problem: '企业只在自有渠道反复介绍自己，公开网络缺少独立、稳定且层次丰富的第三方信源。',
    capability:
      '覆盖中央级媒体、行业垂直媒体、地方门户和自媒体达人，根据内容目标匹配不同层级的信源。',
    actions: [
      '多渠道权威背书，补足品牌公开信息',
      '深度合作资源保障发布效率与内容质量',
      '针对 AI 搜索数据源优化内容结构与引用机会'
    ],
    value: '不是单纯购买一个广告位，而是让 AI 基于可信来源，有依据地理解和推荐品牌。',
    metric: '5000+',
    metricLabel: '权威媒体资源',
    visual: ['权威媒体', '垂直信源', '用户讨论', 'AI 引用']
  },
  {
    id: 'closed-loop',
    number: '03',
    short: '全链路',
    eyebrow: 'Full-funnel conversion',
    title: '从第一条内容到第一通咨询，中间没有断层',
    summary:
      '打通“纯曝光—内容资产沉淀—转化闭环”，让每一次公开内容都能进入可追踪、可复盘的业务增长链路。',
    problem:
      '内容、媒体、官网和销售分别由不同团队管理，曝光之后无人承接，线索来源与预算效果难以说清。',
    capability:
      '从品牌曝光、内容沉淀到线索承接统一规划，并持续追踪用户从搜索、阅读到咨询的关键节点。',
    actions: [
      '统一品牌声量与业务获客目标',
      '打通内容、官网、私域和咨询入口',
      '按周期复盘曝光、流量与线索质量并持续优化'
    ],
    value: '预算花在哪里、效果从哪里来，能够被持续追踪；品牌建设与业务转化不再各做一段。',
    metric: '全链路',
    metricLabel: '曝光到咨询可追踪',
    visual: ['品牌曝光', '内容资产', '精准流量', '咨询成交']
  },
  {
    id: 'custom-service',
    number: '04',
    short: '定制服务',
    eyebrow: 'Industry customization',
    title: 'B2B 软件和火锅店，不可能用同一套打法',
    summary:
      '覆盖多类型经营主体，拒绝标准化模板，根据行业、企业阶段、用户决策路径与增长痛点定制 GEO 策略。',
    problem: '通用方案只替换行业名称，没有考虑决策周期、合规要求、信任依据和真实转化动作。',
    capability:
      '服务企业服务、本地生活、电商零售、教育培训和医疗健康等多类型主体，支持一对一专属顾问全程跟进。',
    actions: [
      '基于行业、阶段、预算和目标重新设计策略',
      '专属顾问一对一对接并同步执行进度',
      '灵活组合服务模块，匹配不同规模企业需求'
    ],
    value: '不是从其他行业案例复制一份通用方法论，而是一套只针对当前业务问题的执行方案。',
    metric: '12+',
    metricLabel: '主流行业覆盖',
    visual: ['行业诊断', '策略匹配', '专属执行', '动态优化']
  }
]

const comparisonRows = [
  ['核心目标', '抢排名、买点击', '蹭热度、抓眼球', '让品牌在 AI 推荐中被选中'],
  ['内容逻辑', '迎合搜索规则', '什么火就写什么', '真实可信，适配 AI 搜索与用户决策'],
  ['效果周期', '花钱就有，停投归零', '发布后快速沉底', '内容持续被引用，效果不断积累'],
  ['转化链路', '广告点击后进入落地页', '曝光后缺少承接', '曝光—信任—咨询—成交可追踪'],
  ['资产沉淀', '主要沉淀点击数据', '内容零散、不成体系', '形成可复用的品牌数字信任资产']
]

const valueAddedServices = [
  {
    number: '01',
    title: '创始人 / 企业 IP 打造',
    text: '结合品牌调性与创始人特质，搭建差异化人设定位、内容脚本体系与长期更新规划，形成高辨识度的专属 IP。',
    items: ['人设定位', '选题与脚本', '内容生产', '长期运营'],
    image: '/images/lanhu/slices/home-group96-image22@2x.png'
  },
  {
    number: '02',
    title: '短视频与直播获客',
    text: '从短视频批量产出到直播间常态化运营，配置主播、运营、投流与中控团队，覆盖拍摄、剪辑、投放和转化。',
    items: ['短视频生产', '直播运营', '投流优化', '成交承接'],
    image: '/images/lanhu/slices/home-group97-image23@2x.png'
  }
]

const proofStats = [
  ['5 万', '真人内容生产网络'],
  ['5000+', '权威媒体资源'],
  ['1000+', '累计服务客户'],
  ['12+', '覆盖主流行业']
]

function requestDiagnosis(source) {
  openConsultation({ title: '预约免费 GEO 诊断', source })
}

function scrollToAdvantages() {
  document.getElementById('advantage-system')?.scrollIntoView({ behavior: 'smooth' })
}

function scrollToAdvantage(id) {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

onMounted(async () => {
  if (!pageRoot.value || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
  await nextTick()
  animationContext = gsap.context(() => {
    gsap.to('.advantage-orbit-a', { rotation: 360, duration: 30, repeat: -1, ease: 'none' })
    gsap.to('.advantage-orbit-b', { rotation: -360, duration: 40, repeat: -1, ease: 'none' })
  }, pageRoot.value)
})

onBeforeUnmount(() => animationContext?.revert())
</script>

<template>
  <div ref="pageRoot" class="advantages-page">
    <a class="skip-link" href="#main-content">跳到主要内容</a>
    <SiteHeader />

    <main id="main-content">
      <section class="advantages-hero">
        <div class="advantages-hero-mesh" aria-hidden="true"></div>
        <div class="page-width advantages-hero-grid">
          <div class="advantages-hero-copy">
            <p class="page-eyebrow">核心优势</p>
            <h1>别人在卷流量的时候，<br />我们在卷<span>什么</span></h1>
            <p>
              内容生产、媒体资源、链路闭环、定制能力，四个环节环环相扣，才构成真正可持续的全域增长。
            </p>
            <div class="hero-advantage-links">
              <button
                v-for="advantage in advantages"
                :key="advantage.id"
                type="button"
                @click="scrollToAdvantage(advantage.id)"
              >
                <span>{{ advantage.number }}</span
                >{{ advantage.short }}
              </button>
            </div>
            <div class="hero-actions">
              <button
                class="primary-button"
                type="button"
                @click="requestDiagnosis('核心优势页 Hero')"
              >
                了解合作方式 <AppIcon name="arrow-right" />
              </button>
              <button class="text-action" type="button" @click="scrollToAdvantages">
                查看能力拆解 <AppIcon name="bottom" />
              </button>
            </div>
          </div>

          <div class="advantage-engine" aria-label="四项核心优势协同示意图">
            <div class="advantage-orbit advantage-orbit-a">
              <i v-for="index in 4" :key="`a-${index}`"></i>
            </div>
            <div class="advantage-orbit advantage-orbit-b">
              <i v-for="index in 4" :key="`b-${index}`"></i>
            </div>
            <div class="engine-core">
              <small>YUNTU GEO</small><strong>四项能力</strong><span>协同增长</span>
            </div>
            <button
              v-for="(advantage, index) in advantages"
              :key="`engine-${advantage.id}`"
              type="button"
              class="engine-node"
              :class="`engine-node-${index + 1}`"
              @click="scrollToAdvantage(advantage.id)"
            >
              <span>{{ advantage.number }}</span
              ><strong>{{ advantage.short }}</strong>
            </button>
            <div class="engine-status"><span></span> 能力闭环已建立</div>
          </div>
        </div>
      </section>

      <section class="advantage-intro-section">
        <div class="page-width advantage-intro-grid">
          <header>
            <p class="section-kicker">GEO 不是堆关键词</p>
            <h2>让品牌被看见、被引用、被选择，需要一套完整能力</h2>
            <p>
              单一媒体资源或一次内容爆发都很难形成长期结果。真正有效的
              GEO，需要真实内容、可信信源、转化承接和行业策略共同工作。
            </p>
          </header>
          <div class="intro-sequence">
            <article v-for="advantage in advantages" :key="`intro-${advantage.id}`">
              <span>{{ advantage.number }}</span
              ><strong>{{ advantage.short }}</strong>
              <p>{{ advantage.metric }}</p>
            </article>
          </div>
        </div>
      </section>

      <section id="advantage-system" class="advantage-system">
        <article
          v-for="(advantage, advantageIndex) in advantages"
          :id="advantage.id"
          :key="advantage.id"
          class="advantage-story"
          :class="{ alternate: advantageIndex % 2 === 1 }"
        >
          <div class="page-width advantage-story-grid">
            <div class="advantage-story-copy">
              <p class="story-index">
                {{ advantage.number }} <span>{{ advantage.eyebrow }}</span>
              </p>
              <h2>{{ advantage.title }}</h2>
              <p class="story-summary">{{ advantage.summary }}</p>
              <div class="story-problem">
                <strong>行业常见问题</strong>
                <p>{{ advantage.problem }}</p>
              </div>
              <div class="story-capability">
                <strong>核心能力</strong>
                <p>{{ advantage.capability }}</p>
              </div>
              <strong class="story-actions-title">执行方式</strong>
              <ul>
                <li v-for="(action, actionIndex) in advantage.actions" :key="action">
                  <span>0{{ actionIndex + 1 }}</span
                  >{{ action }}
                </li>
              </ul>
              <blockquote><span>客户价值</span>{{ advantage.value }}</blockquote>
              <button
                type="button"
                class="story-action"
                @click="requestDiagnosis(`${advantage.short}优势板块`)"
              >
                了解这项能力 <AppIcon name="arrow-right" />
              </button>
            </div>

            <div class="advantage-story-visual" :class="`advantage-visual-${advantageIndex + 1}`">
              <header>
                <span>{{ advantage.short }}能力模型</span><small>YUNTU CAPABILITY MAP</small>
              </header>
              <div class="capability-map">
                <div class="capability-center">
                  <small>{{ advantage.number }}</small
                  ><strong>{{ advantage.short }}</strong>
                </div>
                <div
                  v-for="(item, itemIndex) in advantage.visual"
                  :key="item"
                  class="capability-node"
                  :class="`capability-node-${itemIndex + 1}`"
                >
                  <span>0{{ itemIndex + 1 }}</span
                  ><strong>{{ item }}</strong>
                </div>
                <i v-for="line in 4" :key="line" :class="`capability-line line-${line}`"></i>
              </div>
              <div class="capability-metric">
                <strong>{{ advantage.metric }}</strong
                ><span>{{ advantage.metricLabel }}</span>
              </div>
            </div>
          </div>
        </article>
      </section>

      <section class="comparison-section">
        <div class="page-width">
          <header class="center-heading">
            <p class="section-kicker">换一种打法</p>
            <h2>同样在做搜索与内容，结果为什么不同</h2>
            <p>对比的重点不是某个渠道更好，而是目标、内容逻辑、转化链路与资产沉淀方式不同。</p>
          </header>
          <div class="comparison-table-wrap">
            <table>
              <thead>
                <tr>
                  <th>核心维度</th>
                  <th>SEO / SEM</th>
                  <th>普通内容营销</th>
                  <th>云途全域 GEO <span>推荐方式</span></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="row in comparisonRows" :key="row[0]">
                  <th>{{ row[0] }}</th>
                  <td>{{ row[1] }}</td>
                  <td>{{ row[2] }}</td>
                  <td>
                    <strong>{{ row[3] }}</strong>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section class="value-added-section">
        <div class="page-width">
          <header class="value-added-heading">
            <div>
              <p class="section-kicker">可选增值服务</p>
              <h2>如需更深度的增长配套，我们也能做</h2>
            </div>
            <p>在 GEO 核心链路之外，根据品牌阶段补充 IP、短视频和直播能力。</p>
          </header>
          <div class="value-added-list">
            <article
              v-for="(service, index) in valueAddedServices"
              :key="service.title"
              :class="{ reverse: index === 1 }"
            >
              <div class="value-added-image">
                <img :src="service.image" :alt="`${service.title}服务示意图`" /><span>{{
                  service.number
                }}</span>
              </div>
              <div class="value-added-copy">
                <p>增值服务 {{ service.number }}</p>
                <h3>{{ service.title }}</h3>
                <span>{{ service.text }}</span>
                <ul>
                  <li v-for="item in service.items" :key="item">{{ item }}</li>
                </ul>
                <button type="button" @click="requestDiagnosis(`${service.title}板块`)">
                  咨询服务组合 <AppIcon name="arrow-right" />
                </button>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section class="proof-section">
        <div class="page-width proof-layout">
          <header>
            <p class="section-kicker">能力需要结果证明</p>
            <h2>资源规模只是基础，最终要回到业务增长</h2>
            <p>
              已经服务 1000+ 企业客户，覆盖 12+ 主流行业，并在多个复盘项目中持续提升 AI
              可见性、品牌提及和咨询转化表现。
            </p>
            <NuxtLink to="/cases">查看客户案例 <AppIcon name="arrow-right" /></NuxtLink>
          </header>
          <div class="proof-stats">
            <article v-for="(stat, index) in proofStats" :key="stat[1]">
              <span>0{{ index + 1 }}</span
              ><strong>{{ stat[0] }}</strong>
              <p>{{ stat[1] }}</p>
            </article>
          </div>
        </div>
      </section>

      <section class="advantages-cta">
        <div class="advantages-cta-art" aria-hidden="true"></div>
        <div class="page-width advantages-cta-content">
          <p>想知道这套能力适不适合你的行业？</p>
          <h2>聊聊行业、现状和目标，<br />我们免费做一次 GEO 诊断</h2>
          <button
            class="primary-button"
            type="button"
            @click="requestDiagnosis('核心优势页底部 CTA')"
          >
            预约免费诊断 <AppIcon name="arrow-right" />
          </button>
        </div>
      </section>
    </main>

    <SiteFooter />
  </div>
</template>

<style scoped>
.advantages-page {
  --advantage-blue: #237df0;
  overflow: hidden;
  color: #344359;
  background: #fff;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  color: #fff;
  background: #1f70df;
  transform: translateY(-150%);
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0);
}
.page-eyebrow,
.section-kicker {
  margin: 0;
  color: var(--advantage-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.advantages-hero {
  position: relative;
  min-height: 670px;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: #f1f7ff;
}
.advantages-hero-mesh {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 79% 28%, rgba(75, 159, 255, 0.25), transparent 27%),
    radial-gradient(circle at 15% 92%, rgba(98, 201, 235, 0.12), transparent 28%),
    linear-gradient(110deg, #f8fbff, #e7f2ff);
}
.advantages-hero-mesh::after {
  position: absolute;
  inset: 0;
  content: '';
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent 20%, #000);
}
.advantages-hero-grid {
  min-height: 670px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 55px;
  padding: 52px 0 60px;
}
.advantages-hero-copy h1 {
  margin: 15px 0 0;
  color: #37465b;
  font-size: clamp(44px, 4vw, 65px);
  letter-spacing: -0.055em;
  line-height: 1.18;
}
.advantages-hero-copy h1 span {
  color: #1978ef;
}
.advantages-hero-copy > p:nth-of-type(2) {
  max-width: 640px;
  margin: 24px 0 0;
  color: #68788e;
  font-size: 16px;
  line-height: 1.85;
}
.hero-advantage-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 27px;
}
.hero-advantage-links button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(68, 134, 217, 0.2);
  border-radius: 5px;
  color: #55718f;
  background: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  transition: 0.2s;
}
.hero-advantage-links button span {
  margin-right: 7px;
  color: #93aac4;
  font-size: 9px;
}
.hero-advantage-links button:hover {
  border-color: #6ba9f2;
  color: #1e78e7;
  background: #fff;
  transform: translateY(-2px);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 31px;
}
.text-action {
  color: #53667e;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}
.text-action span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  place-items: center;
  border: 1px solid #bbcee4;
  border-radius: 50%;
  color: #237df0;
  transition: 0.2s;
}
.text-action:hover span {
  background: #fff;
  transform: translateY(3px);
}
.advantage-engine {
  position: relative;
  width: min(610px, 100%);
  aspect-ratio: 1.06;
  justify-self: end;
}
.advantage-engine::before {
  position: absolute;
  inset: 6% 2% 0;
  content: '';
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.95) 0 23%,
      rgba(130, 194, 255, 0.21) 24% 47%,
      transparent 48%
    ),
    url('/images/lanhu/slices/hero-geo-visual@2x.png') 70% 47% / 168% auto no-repeat;
  filter: drop-shadow(0 32px 48px rgba(51, 119, 204, 0.18));
  mask-image: radial-gradient(ellipse, #000 50%, transparent 75%);
}
.advantage-orbit {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(51, 133, 232, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.advantage-orbit-a {
  width: 390px;
  height: 390px;
}
.advantage-orbit-b {
  width: 520px;
  height: 520px;
  border-style: dashed;
  opacity: 0.7;
}
.advantage-orbit i {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2782f2;
  box-shadow: 0 6px 16px rgba(35, 124, 232, 0.36);
}
.advantage-orbit i:nth-child(1) {
  top: -6px;
  left: 50%;
}
.advantage-orbit i:nth-child(2) {
  top: 50%;
  right: -6px;
  background: #52c2e7;
}
.advantage-orbit i:nth-child(3) {
  bottom: -6px;
  left: 50%;
  background: #736ff1;
}
.advantage-orbit i:nth-child(4) {
  top: 50%;
  left: -6px;
  background: #4a9ef2;
}
.engine-core {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 12px solid rgba(255, 255, 255, 0.64);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2b82f0, #48b8e8);
  box-shadow: 0 24px 48px rgba(34, 117, 223, 0.29);
  transform: translate(-50%, -50%);
}
.engine-core small {
  font-size: 9px;
  letter-spacing: 0.14em;
  opacity: 0.75;
}
.engine-core strong {
  margin-top: 7px;
  font-size: 21px;
}
.engine-core span {
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.76;
}
.engine-node {
  position: absolute;
  z-index: 5;
  width: 92px;
  height: 82px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px 7px 20px 7px;
  color: #416991;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 15px 34px rgba(55, 112, 184, 0.15);
  backdrop-filter: blur(10px);
  transition: 0.2s;
}
.engine-node:hover {
  color: #1779ec;
  transform: translateY(-4px);
  box-shadow: 0 20px 38px rgba(55, 112, 184, 0.22);
}
.engine-node span {
  color: #96acc4;
  font-size: 9px;
}
.engine-node strong {
  margin-top: 5px;
  font-size: 13px;
}
.engine-node-1 {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}
.engine-node-1:hover {
  transform: translateX(-50%) translateY(-4px);
}
.engine-node-2 {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.engine-node-2:hover {
  transform: translateY(-54%);
}
.engine-node-3 {
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
}
.engine-node-3:hover {
  transform: translateX(-50%) translateY(-4px);
}
.engine-node-4 {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.engine-node-4:hover {
  transform: translateY(-54%);
}
.engine-status {
  position: absolute;
  right: 6%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #74869c;
  font-size: 11px;
}
.engine-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28a3ed;
  box-shadow: 0 0 0 5px rgba(40, 163, 237, 0.12);
}
.advantage-intro-section {
  padding: 112px 0 128px;
}
.advantage-intro-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
  align-items: center;
}
.advantage-intro-grid header h2,
.center-heading h2,
.value-added-heading h2,
.proof-layout header h2 {
  margin: 15px 0 0;
  color: #344359;
  font-size: clamp(32px, 3vw, 48px);
  letter-spacing: -0.045em;
  line-height: 1.28;
}
.advantage-intro-grid header > p:last-child,
.center-heading > p:last-child,
.value-added-heading > p,
.proof-layout header > p:last-of-type {
  max-width: 620px;
  margin: 20px 0 0;
  color: #748398;
  font-size: 14px;
  line-height: 1.8;
}
.intro-sequence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.intro-sequence article {
  min-height: 165px;
  padding: 26px;
  border-radius: 14px 5px 14px 5px;
  background: #f2f7fd;
  transition: 0.24s;
}
.intro-sequence article:hover {
  background: #fff;
  box-shadow: 0 18px 38px rgba(59, 117, 187, 0.12);
  transform: translateY(-4px);
}
.intro-sequence span {
  color: #96abc3;
  font-size: 9px;
}
.intro-sequence strong {
  display: block;
  margin-top: 28px;
  color: #3a5069;
  font-size: 17px;
}
.intro-sequence p {
  margin: 7px 0 0;
  color: #277fec;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.advantage-story {
  scroll-margin-top: 80px;
  padding: 116px 0 132px;
}
.advantage-story.alternate {
  background: #eef7ff;
}
.advantage-story-grid {
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  align-items: center;
  gap: 75px;
}
.alternate .advantage-story-copy {
  order: 2;
}
.alternate .advantage-story-visual {
  order: 1;
}
.story-index {
  margin: 0;
  color: #8ba6c4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.story-index span {
  margin-left: 12px;
  color: #2b80ed;
}
.advantage-story-copy h2 {
  margin: 18px 0 0;
  color: #33455c;
  font-size: clamp(33px, 3vw, 48px);
  letter-spacing: -0.045em;
  line-height: 1.3;
}
.story-summary {
  margin: 19px 0 0;
  color: #64778e;
  font-size: 15px;
  line-height: 1.8;
}
.story-problem,
.story-capability {
  margin-top: 22px;
  padding: 17px 20px;
  border-left: 3px solid #3d8ff1;
  background: #f2f7fd;
}
.alternate .story-problem,
.alternate .story-capability {
  background: rgba(255, 255, 255, 0.68);
}
.story-problem strong,
.story-capability strong {
  color: #3f6d9e;
  font-size: 11px;
}
.story-problem p,
.story-capability p {
  margin: 6px 0 0;
  color: #6e7f93;
  font-size: 12px;
  line-height: 1.65;
}
.story-capability {
  margin-top: 10px;
  border-left-color: #6fb9e9;
}
.story-actions-title {
  display: block;
  margin-top: 24px;
  color: #42556d;
  font-size: 12px;
}
.advantage-story-copy ul {
  display: grid;
  gap: 11px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.advantage-story-copy li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  color: #6e7f93;
  font-size: 12px;
  line-height: 1.6;
}
.advantage-story-copy li span {
  color: #458fe8;
  font-size: 9px;
  font-weight: 700;
}
.advantage-story-copy blockquote {
  margin: 26px 0 0;
  padding: 18px 20px;
  border-radius: 6px;
  color: #536b86;
  background: rgba(45, 126, 230, 0.08);
  font-size: 13px;
  line-height: 1.7;
}
.advantage-story-copy blockquote span {
  display: block;
  margin-bottom: 5px;
  color: #2e7edc;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.story-action {
  margin-top: 24px;
  padding: 0 0 5px;
  border-bottom: 1px solid #8eb9e9;
  color: #247be8;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
}
.story-action b {
  margin-left: 8px;
  transition: margin 0.2s;
}
.story-action:hover b {
  margin-left: 13px;
}
.advantage-story-visual {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 20px 7px 20px 7px;
  background:
    radial-gradient(circle at 72% 28%, rgba(82, 163, 255, 0.28), transparent 24%),
    linear-gradient(145deg, #f2f8ff, #dcecff);
  box-shadow:
    0 28px 60px rgba(58, 122, 201, 0.13),
    inset 0 1px 0 #fff;
}
.advantage-visual-2 {
  background:
    radial-gradient(circle at 27% 72%, rgba(92, 187, 236, 0.25), transparent 24%),
    linear-gradient(145deg, #f2f9ff, #e2edff);
}
.advantage-visual-3 {
  background:
    radial-gradient(circle at 72% 72%, rgba(96, 145, 240, 0.24), transparent 25%),
    linear-gradient(145deg, #f4f8ff, #ddeaff);
}
.advantage-visual-4 {
  background:
    radial-gradient(circle at 30% 27%, rgba(76, 170, 242, 0.25), transparent 24%),
    linear-gradient(145deg, #eef8ff, #e0ecff);
}
.advantage-story-visual > header {
  display: flex;
  justify-content: space-between;
  padding: 25px 28px;
  color: #55779d;
  font-size: 12px;
}
.advantage-story-visual > header small {
  color: #95aac2;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.capability-map {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 410px;
  height: 360px;
  transform: translate(-50%, -50%);
}
.capability-map::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  content: '';
  border: 1px dashed rgba(55, 137, 232, 0.34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.capability-center {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 142px;
  height: 142px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 11px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #3185ee, #50bce7);
  box-shadow: 0 22px 42px rgba(36, 123, 225, 0.28);
  transform: translate(-50%, -50%);
}
.capability-center small {
  font-size: 9px;
  opacity: 0.7;
}
.capability-center strong {
  margin-top: 5px;
  font-size: 17px;
}
.capability-node {
  position: absolute;
  z-index: 3;
  min-width: 110px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 7px;
  color: #4e7198;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 25px rgba(54, 113, 185, 0.11);
  text-align: center;
  backdrop-filter: blur(8px);
}
.capability-node span {
  display: block;
  color: #91a9c3;
  font-size: 8px;
}
.capability-node strong {
  display: block;
  margin-top: 3px;
  font-size: 10px;
}
.capability-node-1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.capability-node-2 {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.capability-node-3 {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.capability-node-4 {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.capability-line {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 135px;
  background: linear-gradient(#5aa1ed, transparent);
  transform-origin: top;
}
.line-1 {
  transform: rotate(180deg);
}
.line-2 {
  transform: rotate(90deg);
}
.line-3 {
  transform: rotate(0);
}
.line-4 {
  transform: rotate(-90deg);
}
.capability-metric {
  position: absolute;
  right: 28px;
  bottom: 24px;
  display: grid;
  justify-items: end;
}
.capability-metric strong {
  color: #2780ed;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.capability-metric span {
  margin-top: 4px;
  color: #7b8da2;
  font-size: 9px;
}
.comparison-section {
  padding: 112px 0 130px;
  background: #eef7ff;
}
.center-heading {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.center-heading > p:last-child {
  margin-right: auto;
  margin-left: auto;
}
.comparison-table-wrap {
  margin-top: 58px;
  overflow-x: auto;
  border-radius: 15px 5px 15px 5px;
  box-shadow: 0 22px 50px rgba(59, 117, 186, 0.1);
}
.comparison-table-wrap table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.9);
}
.comparison-table-wrap th,
.comparison-table-wrap td {
  padding: 22px 24px;
  border-bottom: 1px solid #e1ebf5;
  color: #6d7e92;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}
.comparison-table-wrap thead th {
  color: #48617d;
  background: #e2effd;
  font-size: 11px;
}
.comparison-table-wrap thead th:last-child {
  color: #fff;
  background: #3187ee;
}
.comparison-table-wrap thead span {
  display: block;
  margin-top: 4px;
  font-size: 8px;
  opacity: 0.75;
}
.comparison-table-wrap tbody th {
  color: #415974;
  font-weight: 600;
}
.comparison-table-wrap td:last-child {
  background: rgba(49, 135, 238, 0.05);
}
.comparison-table-wrap td strong {
  color: #267eec;
  font-weight: 600;
}
.value-added-section {
  padding: 116px 0 132px;
}
.value-added-heading {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: 80px;
}
.value-added-heading > p {
  margin-bottom: 6px;
}
.value-added-list {
  display: grid;
  gap: 30px;
  margin-top: 62px;
}
.value-added-list article {
  min-height: 390px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  border-radius: 7px 20px 7px 20px;
  background: #f1f7fd;
}
.value-added-list article.reverse {
  grid-template-columns: 1.1fr 0.9fr;
}
.value-added-list article.reverse .value-added-image {
  order: 2;
}
.value-added-image {
  position: relative;
  overflow: hidden;
  background: #e5f1ff;
}
.value-added-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.value-added-image > span {
  position: absolute;
  top: 24px;
  left: 24px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px 4px 13px 4px;
  color: #fff;
  background: rgba(35, 121, 229, 0.86);
  font-size: 10px;
}
.value-added-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 55px;
}
.value-added-copy > p {
  margin: 0;
  color: #2e80e8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.value-added-copy h3 {
  margin: 16px 0 0;
  color: #374b63;
  font-size: 31px;
}
.value-added-copy > span {
  margin-top: 16px;
  color: #718197;
  font-size: 13px;
  line-height: 1.75;
}
.value-added-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.value-added-copy li {
  padding: 8px 11px;
  border-radius: 5px;
  color: #557598;
  background: rgba(255, 255, 255, 0.75);
  font-size: 10px;
}
.value-added-copy button {
  align-self: flex-start;
  margin-top: 25px;
  padding: 0 0 5px;
  border-bottom: 1px solid #91bce8;
  color: #287ce6;
  background: transparent;
  font-size: 12px;
}
.proof-section {
  padding: 110px 0 126px;
  background: #f2f7fd;
}
.proof-layout {
  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  gap: 85px;
  align-items: center;
}
.proof-layout header > a {
  display: inline-block;
  margin-top: 25px;
  padding-bottom: 5px;
  border-bottom: 1px solid #91bce8;
  color: #287ce6;
  font-size: 12px;
  text-decoration: none;
}
.proof-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.proof-stats article {
  min-height: 185px;
  padding: 29px;
  border-radius: 15px 5px 15px 5px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 #fff;
}
.proof-stats span {
  color: #98adc5;
  font-size: 9px;
}
.proof-stats strong {
  display: block;
  margin-top: 32px;
  color: #277fec;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}
.proof-stats p {
  margin: 6px 0 0;
  color: #718298;
  font-size: 11px;
}
.advantages-cta {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.advantages-cta-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(rgba(247, 251, 255, 0.18), rgba(234, 246, 255, 0.46)),
    url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
}
.advantages-cta-content {
  padding: 75px 0;
  text-align: center;
}
.advantages-cta-content > p {
  margin: 0;
  color: #237df0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.advantages-cta-content h2 {
  margin: 17px 0 0;
  color: #2f75cc;
  font-size: clamp(32px, 3.2vw, 50px);
  letter-spacing: -0.045em;
  line-height: 1.3;
}
.advantages-cta-content .primary-button {
  margin-top: 29px;
}
@media (max-width: 980px) {
  .advantages-hero,
  .advantages-hero-grid {
    min-height: auto;
  }
  .advantages-hero-grid,
  .advantage-intro-grid,
  .advantage-story-grid,
  .value-added-heading,
  .proof-layout {
    grid-template-columns: 1fr;
  }
  .advantages-hero-grid {
    padding-top: 74px;
    padding-bottom: 62px;
  }
  .advantage-engine {
    justify-self: center;
    margin-top: 20px;
  }
  .advantage-intro-grid,
  .proof-layout {
    gap: 45px;
  }
  .advantage-story-grid {
    gap: 50px;
  }
  .alternate .advantage-story-copy,
  .alternate .advantage-story-visual {
    order: initial;
  }
  .advantage-story-visual {
    width: min(650px, 100%);
  }
  .value-added-heading {
    gap: 14px;
  }
  .value-added-heading > p {
    margin: 0;
  }
}
@media (max-width: 600px) {
  .advantages-hero-grid {
    padding-top: 54px;
  }
  .advantages-hero-copy h1 {
    font-size: clamp(37px, 10vw, 49px);
  }
  .advantages-hero-copy > p:nth-of-type(2) {
    font-size: 15px;
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .advantage-engine {
    aspect-ratio: 0.96;
  }
  .advantage-orbit-b {
    width: 340px;
    height: 340px;
  }
  .advantage-orbit-a {
    width: 255px;
    height: 255px;
  }
  .engine-core {
    width: 125px;
    height: 125px;
    border-width: 9px;
  }
  .engine-core strong {
    font-size: 17px;
  }
  .engine-node {
    width: 72px;
    height: 66px;
  }
  .engine-node strong {
    font-size: 11px;
  }
  .advantage-intro-section,
  .advantage-story,
  .comparison-section,
  .value-added-section,
  .proof-section {
    padding-top: 76px;
    padding-bottom: 86px;
  }
  .intro-sequence {
    grid-template-columns: 1fr;
  }
  .intro-sequence article {
    min-height: 140px;
  }
  .advantage-story-copy h2 {
    font-size: 31px;
  }
  .advantage-story-visual {
    min-height: 430px;
  }
  .capability-map {
    width: 310px;
    height: 280px;
  }
  .capability-map::before {
    width: 205px;
    height: 205px;
  }
  .capability-center {
    width: 105px;
    height: 105px;
    border-width: 8px;
  }
  .capability-node {
    min-width: 83px;
    padding: 9px;
  }
  .capability-line {
    height: 100px;
  }
  .capability-metric {
    right: 18px;
    bottom: 17px;
  }
  .capability-metric strong {
    font-size: 21px;
  }
  .value-added-list article,
  .value-added-list article.reverse {
    grid-template-columns: 1fr;
  }
  .value-added-list article.reverse .value-added-image {
    order: initial;
  }
  .value-added-image {
    min-height: 260px;
  }
  .value-added-copy {
    padding: 32px 23px;
  }
  .value-added-copy h3 {
    font-size: 26px;
  }
  .proof-stats {
    grid-template-columns: 1fr;
  }
  .proof-stats article {
    min-height: 145px;
  }
  .advantages-cta {
    min-height: 390px;
  }
  .advantages-cta-content h2 br {
    display: none;
  }
}
</style>