BigStickNewOfficialWebsite-V2/pages/solutions.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 activeIndustry = ref('enterprise')
const { openConsultation } = useConsultation()
let animationContext
let observer

useHead({
  title: '行业解决方案｜大马棒·云途全域 GEO',
  meta: [
    {
      name: 'description',
      content:
        '面向企业服务、教育培训、本地生活、医疗健康与电商零售行业，提供基于真实用户决策路径的 GEO 获客转化方案。'
    }
  ]
})

const industries = [
  {
    id: 'enterprise',
    number: '01',
    name: '企业服务',
    short: '企服',
    question: 'SaaS、软件、企服公司最头疼什么？',
    pain: '决策动不动几个月，客户到处比方案，搜一圈下来，你甚至没有进入备选名单。',
    strategyTitle: '不追泛流量，先追“信任”',
    strategy:
      'B 端采购者搜索的是业务问题，而不是品牌名。我们在行业媒体建立背书，在“怎么解决某类问题”的内容中呈现方案，让品牌在客户比选阶段提前出现。',
    actions: [
      '行业媒体深度稿与创始人访谈，拉高品牌专业水位',
      '占住“行业解决方案”“系统怎么选”等高意向长尾问题',
      '持续输出白皮书与案例复盘，积累长期决策信任'
    ],
    metrics: [
      ['+320%', 'AI 搜索曝光'],
      ['80+', '月精准线索']
    ],
    tags: ['长决策链', '专业背书', '方案比选'],
    visual: ['行业问题', '专业内容', '权威信源', '进入比选']
  },
  {
    id: 'education',
    number: '02',
    name: '教育培训',
    short: '教育',
    question: '家长搜完品牌，又会去搜“这家机构靠谱吗”',
    pain: '口碑是否可信、课程是否匹配、真实效果如何，往往直接决定这一次咨询能不能发生。',
    strategyTitle: '把“别人怎么说你”系统管理起来',
    strategy:
      '围绕择校指南、课程比较、避坑经验与真实学习反馈，用贴近家长决策语言的内容覆盖从找方法到选机构的完整路径。',
    actions: [
      '构建真实学员口碑内容矩阵，覆盖主流搜索与内容平台',
      '围绕“机构怎么样”“课程值得吗”等问题精准布局',
      '用场景化内容引导咨询，让搜索流量进入课程承接页'
    ],
    metrics: [
      ['1200+', '长尾问题布局'],
      ['-45%', '有效线索成本']
    ],
    tags: ['口碑验证', '课程比较', '家长决策'],
    visual: ['学习问题', '课程比较', '口碑验证', '报名咨询']
  },
  {
    id: 'local-life',
    number: '03',
    name: '本地生活',
    short: '本地',
    question: '用户就在附近搜，搜完便决定去哪一家',
    pain: '如果品牌没有出现在同城搜索、内容推荐和本地平台中，就等于把到店客户送给隔壁。',
    strategyTitle: '不是做大曝光，而是让附近的人搜得到你',
    strategy:
      '围绕真实消费场景，在本地生活平台、内容社区和短视频渠道建立稳定内容覆盖，让用户从看到、心动到到店之间少走一步。',
    actions: [
      '覆盖本地生活平台内容，占住同城与附近搜索位置',
      '组合同城达人和真实顾客内容，避免脱离体验的假种草',
      '设计到店路径内容，明确位置、场景、产品与消费理由'
    ],
    metrics: [
      ['95%', '品牌词搜索覆盖'],
      ['+170%', '到店咨询量']
    ],
    tags: ['同城搜索', '真实体验', '到店转化'],
    visual: ['附近搜索', '真实体验', '消费理由', '到店行动']
  },
  {
    id: 'healthcare',
    number: '04',
    name: '医疗健康',
    short: '医疗',
    question: '用户先相信你的专业，才敢把健康交给你',
    pain: '负面口碑、过时信息和不准确内容会在搜索结果页持续消耗信任，同时行业推广又受到严格合规约束。',
    strategyTitle: '不做擦边推广，建设合规权威形象',
    strategy:
      '以合规科普为核心，把专业能力转化为用户看得懂、AI 能识别的内容，在用户搜索健康问题时持续呈现准确、稳定的专业声音。',
    actions: [
      '体系化输出合规科普内容，强化专业人设与核心 IP',
      '覆盖用户从“查症状”到“选机构”的全流程问题',
      '系统维护公开口碑，及时纠正过时与不准确信息'
    ],
    metrics: [
      ['合规', '内容审核机制'],
      ['定制', '效果指标体系']
    ],
    tags: ['合规科普', '权威形象', '口碑维护'],
    visual: ['健康提问', '专业科普', '权威验证', '机构选择'],
    note: '医疗健康行业的执行范围与效果指标需依据具体业务资质、地区政策和平台规则单独确认。'
  },
  {
    id: 'ecommerce',
    number: '05',
    name: '电商零售',
    short: '电商',
    question: '平台流量越来越贵，用户却搜不到品牌内容',
    pain: '站内投流成本持续上涨，站外品牌信息稀少，用户被种草后无法完成主动搜索与信任验证。',
    strategyTitle: '填满用户主动搜索品牌时看到的内容',
    strategy:
      '通过种草、测评、使用场景、短视频与直播承接，串起“被种草—主动搜—找到品牌—进入店铺或私域”的完整路径。',
    actions: [
      '全平台种草内容布局，持续提升品牌主动搜索热度',
      '产品测评与使用场景内容，降低用户理解和决策门槛',
      '把搜索流量承接至店铺、直播间与私域，沉淀复购用户'
    ],
    metrics: [
      ['3 万+', '内容资产沉淀'],
      ['60%', '自然流量占比']
    ],
    tags: ['内容种草', '产品测评', '直播承接'],
    visual: ['内容种草', '主动搜索', '场景验证', '店铺转化']
  }
]

const decisionFactors = [
  ['01', '决策周期', '企服客户可能比较数月，本地消费往往几分钟内完成决定。内容节奏不能相同。'],
  ['02', '信任依据', '有人相信行业媒体，有人相信真实体验，也有人更看重资质、专业科普与长期口碑。'],
  ['03', '转化动作', '预约演示、报名试听、到店消费、在线问诊和进入店铺，需要完全不同的承接链路。']
]

const moreIndustries = ['快消品牌', '工业制造', '地产家居', '金融服务', '汽车出行', '法律服务']

function scrollToIndustry(id) {
  activeIndustry.value = id
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

function requestIndustryPlan(industry, source) {
  openConsultation({ title: `获取${industry}行业方案`, source, industry })
}

function requestCustomPlan(source) {
  openConsultation({ title: '咨询定制行业方案', source })
}

onMounted(async () => {
  if (!pageRoot.value) return
  await nextTick()

  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    animationContext = gsap.context(() => {
      gsap.to('.solutions-orbit-a', { rotation: 360, duration: 32, repeat: -1, ease: 'none' })
      gsap.to('.solutions-orbit-b', { rotation: -360, duration: 42, repeat: -1, ease: 'none' })
    }, pageRoot.value)
  }

  observer = new IntersectionObserver(
    (entries) => {
      const visible = entries
        .filter((entry) => entry.isIntersecting)
        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]
      if (visible?.target?.id) activeIndustry.value = visible.target.id
    },
    { rootMargin: '-28% 0px -56% 0px', threshold: [0.1, 0.35, 0.6] }
  )

  industries.forEach((industry) => {
    const element = document.getElementById(industry.id)
    if (element) observer.observe(element)
  })
})

onBeforeUnmount(() => {
  animationContext?.revert()
  observer?.disconnect()
})
</script>

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

    <main id="main-content">
      <section class="solutions-hero">
        <div class="solutions-hero-mesh" aria-hidden="true"></div>
        <div class="page-width solutions-hero-grid">
          <div class="solutions-hero-copy">
            <p class="page-eyebrow">行业解决方案</p>
            <h1>让每一个行业，<br />都有一套自己的<span>增长打法</span></h1>
            <p>
              深度理解不同行业的增长痛点与用户决策路径，匹配有针对性的内容、信源和获客转化策略。
            </p>
            <div class="hero-industry-links" aria-label="行业快捷导航">
              <button
                v-for="industry in industries"
                :key="industry.id"
                type="button"
                @click="scrollToIndustry(industry.id)"
              >
                {{ industry.name }}
              </button>
            </div>
            <button
              class="primary-button"
              type="button"
              @click="requestCustomPlan('行业解决方案页 Hero')"
            >
              获取专属方案 <AppIcon name="arrow-right" />
            </button>
          </div>

          <div class="solutions-hero-visual" aria-label="五大行业解决方案协同示意图">
            <div class="solutions-orbit solutions-orbit-a">
              <i v-for="industry in industries" :key="`orbit-a-${industry.id}`"></i>
            </div>
            <div class="solutions-orbit solutions-orbit-b">
              <i v-for="index in 4" :key="`orbit-b-${index}`"></i>
            </div>
            <div class="solutions-core">
              <small>YUNTU GEO</small><strong>行业增长引擎</strong><span>策略因行业而不同</span>
            </div>
            <button
              v-for="(industry, index) in industries"
              :key="`node-${industry.id}`"
              type="button"
              class="industry-node"
              :class="`node-${index + 1}`"
              @click="scrollToIndustry(industry.id)"
            >
              <small>0{{ index + 1 }}</small
              ><strong>{{ industry.short }}</strong>
            </button>
            <div class="hero-signal"><span></span> 5 类行业路径已建立</div>
          </div>
        </div>
      </section>

      <section class="difference-section">
        <div class="page-width difference-layout">
          <header class="difference-heading">
            <p class="section-kicker">为什么不能套用同一模板</p>
            <h2>B2B 软件和一家火锅店，<br />用户做决定的方式完全不同</h2>
            <p>
              行业方案的核心不是替换几个关键词，而是重新理解用户在什么场景下提问、依据什么建立信任，以及最后如何行动。
            </p>
          </header>
          <div class="decision-factor-list">
            <article v-for="factor in decisionFactors" :key="factor[0]">
              <span>{{ factor[0] }}</span>
              <div>
                <h3>{{ factor[1] }}</h3>
                <p>{{ factor[2] }}</p>
              </div>
            </article>
          </div>
        </div>
      </section>

      <nav class="industry-sticky-nav" aria-label="行业方案导航">
        <div class="page-width">
          <button
            v-for="industry in industries"
            :key="`sticky-${industry.id}`"
            type="button"
            :class="{ active: activeIndustry === industry.id }"
            @click="scrollToIndustry(industry.id)"
          >
            <span>{{ industry.number }}</span
            >{{ industry.name }}
          </button>
        </div>
      </nav>

      <section class="industry-solutions">
        <article
          v-for="(industry, industryIndex) in industries"
          :id="industry.id"
          :key="industry.id"
          class="industry-solution"
          :class="{ alternate: industryIndex % 2 === 1 }"
        >
          <div class="page-width industry-solution-grid">
            <header class="industry-intro">
              <div class="industry-number">{{ industry.number }}</div>
              <p class="section-kicker">{{ industry.name }}行业</p>
              <h2>{{ industry.question }}</h2>
              <p class="industry-pain">{{ industry.pain }}</p>
              <div class="industry-tags">
                <span v-for="tag in industry.tags" :key="tag">{{ tag }}</span>
              </div>
            </header>

            <div class="industry-strategy">
              <p class="strategy-label">我们的打法</p>
              <h3>{{ industry.strategyTitle }}</h3>
              <p class="strategy-copy">{{ industry.strategy }}</p>
              <strong class="actions-title">具体会做这些事</strong>
              <ul>
                <li v-for="(action, actionIndex) in industry.actions" :key="action">
                  <span>0{{ actionIndex + 1 }}</span
                  >{{ action }}
                </li>
              </ul>
              <p v-if="industry.note" class="compliance-note">{{ industry.note }}</p>
              <button
                class="industry-plan-button"
                type="button"
                @click="requestIndustryPlan(industry.name, `${industry.name}行业方案板块`)"
              >
                获取{{ industry.name }}行业方案 <AppIcon name="arrow-right" />
              </button>
            </div>

            <div class="industry-visual" :class="`industry-visual-${industryIndex + 1}`">
              <div class="industry-visual-header">
                <span>{{ industry.name }}决策路径</span><small>GEO INDUSTRY MAP</small>
              </div>
              <div class="path-map">
                <div class="path-axis"></div>
                <div
                  v-for="(item, itemIndex) in industry.visual"
                  :key="item"
                  class="path-node"
                  :class="`path-node-${itemIndex + 1}`"
                >
                  <span>0{{ itemIndex + 1 }}</span
                  ><strong>{{ item }}</strong>
                </div>
                <div class="path-center">
                  <small>行业策略</small><strong>{{ industry.short }}</strong>
                </div>
              </div>
              <div class="industry-metrics">
                <div v-for="metric in industry.metrics" :key="metric[1]">
                  <strong>{{ metric[0] }}</strong
                  ><span>{{ metric[1] }}</span>
                </div>
              </div>
            </div>
          </div>
        </article>
      </section>

      <section class="more-industries-section">
        <div class="page-width more-industries-grid">
          <header>
            <p class="section-kicker">更多行业</p>
            <h2>没在上面找到你的行业？</h2>
            <p>
              无论企业处于什么行业和发展阶段，我们都会基于品牌现状、用户决策路径与增长目标重新制定策略。
            </p>
            <button
              class="primary-button small"
              type="button"
              @click="requestCustomPlan('更多行业板块')"
            >
              咨询定制方案 <AppIcon name="arrow-right" />
            </button>
          </header>
          <div class="more-industry-list">
            <button
              v-for="(industry, index) in moreIndustries"
              :key="industry"
              type="button"
              @click="requestIndustryPlan(industry, '更多行业入口')"
            >
              <span>0{{ index + 1 }}</span
              ><strong>{{ industry }}</strong
              ><AppIcon name="arrow-right" />
            </button>
          </div>
        </div>
      </section>

      <section class="solutions-cta">
        <div class="solutions-cta-art" aria-hidden="true"></div>
        <div class="page-width solutions-cta-content">
          <p>你的行业，有自己的增长答案</p>
          <h2>先说说业务现状，<br />我们帮你找到最值得投入的路径</h2>
          <span>免费进行一次行业 GEO 可见性与获客链路沟通。</span>
          <button
            class="primary-button"
            type="button"
            @click="requestCustomPlan('行业解决方案页底部 CTA')"
          >
            获取专属行业方案 <AppIcon name="arrow-right" />
          </button>
        </div>
      </section>
    </main>

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

<style scoped>
.solutions-page {
  --solutions-blue: #237df0;
  --solutions-ink: #344359;
  overflow: hidden;
  color: var(--solutions-ink);
  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(--solutions-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.solutions-hero {
  position: relative;
  min-height: 670px;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: #f2f7ff;
}
.solutions-hero-mesh {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(76, 159, 255, 0.24), transparent 26%),
    radial-gradient(circle at 18% 92%, rgba(97, 203, 235, 0.11), transparent 28%),
    linear-gradient(108deg, #f8fbff 0%, #eef5ff 53%, #e6f1ff 100%);
}
.solutions-hero-mesh::after {
  position: absolute;
  inset: 0;
  content: '';
  opacity: 0.2;
  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);
}
.solutions-hero-grid {
  min-height: 670px;
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  align-items: center;
  gap: 45px;
  padding-top: 52px;
  padding-bottom: 58px;
}
.solutions-hero-copy h1 {
  max-width: 720px;
  margin: 15px 0 0;
  color: #37465b;
  font-size: clamp(42px, 3.9vw, 64px);
  letter-spacing: -0.055em;
  line-height: 1.2;
}
.solutions-hero-copy h1 span {
  color: #1978ef;
  white-space: nowrap;
}
.solutions-hero-copy > p:nth-of-type(2) {
  max-width: 630px;
  margin: 24px 0 0;
  color: #68788e;
  font-size: 16px;
  line-height: 1.85;
}
.hero-industry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 27px;
}
.hero-industry-links button {
  height: 34px;
  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-industry-links button:hover {
  border-color: #6ba9f2;
  color: #1e78e7;
  background: #fff;
  transform: translateY(-2px);
}
.solutions-hero-copy > .primary-button {
  margin-top: 30px;
}
.solutions-hero-visual {
  position: relative;
  width: min(600px, 100%);
  aspect-ratio: 1.08;
  justify-self: end;
}
.solutions-hero-visual::before {
  position: absolute;
  inset: 8% 2% 1%;
  content: '';
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.96) 0 22%,
      rgba(132, 194, 255, 0.22) 23% 46%,
      transparent 47%
    ),
    url('/images/lanhu/slices/hero-geo-visual@2x.png') 70% 48% / 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%);
}
.solutions-core {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 162px;
  height: 162px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #287ff0, #42b7e9);
  box-shadow:
    0 24px 48px rgba(34, 117, 223, 0.3),
    inset 0 1px 5px rgba(255, 255, 255, 0.65);
  transform: translate(-50%, -50%);
  text-align: center;
}
.solutions-core small {
  font-size: 9px;
  letter-spacing: 0.14em;
  opacity: 0.78;
}
.solutions-core strong {
  margin-top: 8px;
  font-size: 19px;
}
.solutions-core span {
  margin-top: 5px;
  font-size: 10px;
  opacity: 0.76;
}
.solutions-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%);
}
.solutions-orbit-a {
  width: 390px;
  height: 390px;
}
.solutions-orbit-b {
  width: 520px;
  height: 520px;
  border-style: dashed;
  opacity: 0.7;
}
.solutions-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);
}
.solutions-orbit i:nth-child(1) {
  top: -6px;
  left: 50%;
}
.solutions-orbit i:nth-child(2) {
  top: 23%;
  right: 2%;
  background: #52c2e7;
}
.solutions-orbit i:nth-child(3) {
  right: 14%;
  bottom: 9%;
  background: #736ff1;
}
.solutions-orbit i:nth-child(4) {
  bottom: 9%;
  left: 15%;
  background: #4a9ef2;
}
.solutions-orbit i:nth-child(5) {
  top: 24%;
  left: 1%;
  background: #70c9ec;
}
.industry-node {
  position: absolute;
  z-index: 5;
  width: 74px;
  height: 74px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px 7px 20px 7px;
  color: #3f6691;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 14px 32px rgba(55, 112, 184, 0.14),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(10px);
  transition: 0.2s;
}
.industry-node:hover {
  color: #1779ec;
  transform: translateY(-4px);
  box-shadow: 0 19px 36px rgba(55, 112, 184, 0.22);
}
.industry-node small {
  font-size: 9px;
  opacity: 0.55;
}
.industry-node strong {
  margin-top: 4px;
  font-size: 14px;
}
.node-1 {
  top: 7%;
  left: 25%;
}
.node-2 {
  top: 20%;
  right: 4%;
}
.node-3 {
  right: 4%;
  bottom: 20%;
}
.node-4 {
  bottom: 7%;
  left: 27%;
}
.node-5 {
  top: 42%;
  left: 0;
}
.hero-signal {
  position: absolute;
  right: 7%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #74869c;
  font-size: 11px;
}
.hero-signal span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28a3ed;
  box-shadow: 0 0 0 5px rgba(40, 163, 237, 0.12);
}
.difference-section {
  padding: 112px 0 128px;
}
.difference-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 90px;
  align-items: center;
}
.difference-heading h2,
.more-industries-grid h2 {
  margin: 15px 0 0;
  color: #344359;
  font-size: clamp(32px, 3vw, 48px);
  letter-spacing: -0.045em;
  line-height: 1.28;
}
.difference-heading > p:last-child,
.more-industries-grid header > p:nth-of-type(2) {
  max-width: 600px;
  margin: 20px 0 0;
  color: #748398;
  font-size: 15px;
  line-height: 1.8;
}
.decision-factor-list {
  display: grid;
}
.decision-factor-list article {
  min-height: 128px;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #dfe8f2;
}
.decision-factor-list article:first-child {
  border-top: 1px solid #dfe8f2;
}
.decision-factor-list > article > span {
  color: #9eb3ca;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.decision-factor-list h3 {
  margin: 0;
  color: #34475f;
  font-size: 22px;
}
.decision-factor-list p {
  max-width: 560px;
  margin: 8px 0 0;
  color: #77879b;
  font-size: 13px;
  line-height: 1.7;
}
.industry-sticky-nav {
  position: sticky;
  z-index: 18;
  top: 64px;
  border-top: 1px solid rgba(76, 139, 215, 0.08);
  border-bottom: 1px solid rgba(76, 139, 215, 0.12);
  background: rgba(248, 252, 255, 0.94);
  backdrop-filter: blur(16px);
}
.industry-sticky-nav .page-width {
  height: 68px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.industry-sticky-nav button {
  position: relative;
  color: #62758c;
  background: transparent;
  font-size: 13px;
  transition: 0.2s;
}
.industry-sticky-nav button span {
  margin-right: 9px;
  color: #9cafc4;
  font-size: 10px;
}
.industry-sticky-nav button::after {
  position: absolute;
  right: 21%;
  bottom: 0;
  left: 21%;
  height: 2px;
  content: '';
  background: #2780ef;
  transform: scaleX(0);
  transition: transform 0.22s;
}
.industry-sticky-nav button:hover,
.industry-sticky-nav button.active {
  color: #207aeb;
  background: rgba(255, 255, 255, 0.52);
}
.industry-sticky-nav button.active::after {
  transform: scaleX(1);
}
.industry-solution {
  scroll-margin-top: 132px;
  padding: 118px 0 132px;
}
.industry-solution.alternate {
  background: #eef7ff;
}
.industry-solution-grid {
  display: grid;
  grid-template-columns: 0.75fr 0.95fr 1.1fr;
  align-items: center;
  gap: 56px;
}
.industry-number {
  margin-bottom: 38px;
  color: rgba(73, 132, 204, 0.15);
  font-size: 92px;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.8;
}
.industry-intro h2 {
  margin: 18px 0 0;
  color: #33445a;
  font-size: clamp(30px, 2.45vw, 40px);
  letter-spacing: -0.04em;
  line-height: 1.34;
}
.industry-pain {
  margin: 21px 0 0;
  color: #748398;
  font-size: 14px;
  line-height: 1.8;
}
.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.industry-tags span {
  padding: 7px 10px;
  border-radius: 5px;
  color: #557699;
  background: #eef6ff;
  font-size: 10px;
}
.alternate .industry-tags span {
  background: rgba(255, 255, 255, 0.7);
}
.industry-strategy {
  padding: 35px 0;
  border-top: 1px solid #d8e5f2;
  border-bottom: 1px solid #d8e5f2;
}
.strategy-label {
  margin: 0;
  color: #2c7fea;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.industry-strategy h3 {
  margin: 13px 0 0;
  color: #354a63;
  font-size: 25px;
  line-height: 1.4;
}
.strategy-copy {
  margin: 15px 0 0;
  color: #728297;
  font-size: 13px;
  line-height: 1.75;
}
.actions-title {
  display: block;
  margin-top: 24px;
  color: #42556d;
  font-size: 12px;
}
.industry-strategy ul {
  display: grid;
  gap: 13px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.industry-strategy li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  color: #6d7e92;
  font-size: 12px;
  line-height: 1.6;
}
.industry-strategy li span {
  color: #4690eb;
  font-size: 10px;
  font-weight: 700;
}
.compliance-note {
  margin: 20px 0 0;
  padding: 12px 14px;
  border-left: 2px solid #63a6ef;
  color: #6e8198;
  background: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  line-height: 1.65;
}
.industry-plan-button {
  margin-top: 27px;
  padding: 0 0 5px;
  border-bottom: 1px solid #8db9e9;
  color: #247be8;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}
.industry-plan-button b {
  margin-left: 8px;
  transition: margin 0.2s;
}
.industry-plan-button:hover b {
  margin-left: 13px;
}
.industry-visual {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px 7px 20px 7px;
  background:
    radial-gradient(circle at 70% 28%, rgba(81, 161, 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;
}
.industry-visual-2 {
  background:
    radial-gradient(circle at 25% 70%, rgba(104, 187, 242, 0.25), transparent 24%),
    linear-gradient(145deg, #f3f9ff, #e3edff);
}
.industry-visual-3 {
  background:
    radial-gradient(circle at 72% 70%, rgba(85, 190, 226, 0.26), transparent 25%),
    linear-gradient(145deg, #edf9ff, #dfeeff);
}
.industry-visual-4 {
  background:
    radial-gradient(circle at 30% 28%, rgba(98, 157, 237, 0.24), transparent 24%),
    linear-gradient(145deg, #f5f9ff, #e0ebff);
}
.industry-visual-5 {
  background:
    radial-gradient(circle at 72% 30%, rgba(101, 143, 239, 0.25), transparent 25%),
    linear-gradient(145deg, #f2f8ff, #deeaff);
}
.industry-visual-header {
  display: flex;
  justify-content: space-between;
  padding: 24px 27px;
  color: #55779d;
  font-size: 12px;
}
.industry-visual-header small {
  color: #95aac2;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.path-map {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 360px;
  height: 320px;
  transform: translate(-50%, -50%);
}
.path-axis {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 235px;
  height: 235px;
  border: 1px dashed rgba(57, 137, 231, 0.34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.path-axis::before,
.path-axis::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(55, 137, 233, 0.55), transparent);
  transform: translate(-50%, -50%);
}
.path-axis::before {
  width: 310px;
  height: 1px;
}
.path-axis::after {
  width: 1px;
  height: 280px;
}
.path-center {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 112px;
  height: 112px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 9px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #3185ee, #51bce7);
  box-shadow: 0 20px 38px rgba(36, 123, 225, 0.28);
  transform: translate(-50%, -50%);
}
.path-center small {
  font-size: 9px;
  opacity: 0.75;
}
.path-center strong {
  margin-top: 5px;
  font-size: 18px;
}
.path-node {
  position: absolute;
  z-index: 3;
  min-width: 96px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  color: #4e7198;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 25px rgba(54, 113, 185, 0.11);
  text-align: center;
  backdrop-filter: blur(8px);
}
.path-node span {
  display: block;
  color: #91a9c3;
  font-size: 8px;
}
.path-node strong {
  display: block;
  margin-top: 3px;
  font-size: 10px;
}
.path-node-1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.path-node-2 {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.path-node-3 {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.path-node-4 {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.industry-metrics {
  position: absolute;
  right: 25px;
  bottom: 22px;
  display: flex;
  gap: 24px;
}
.industry-metrics div {
  display: grid;
  justify-items: end;
}
.industry-metrics strong {
  color: #2780ed;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.industry-metrics span {
  margin-top: 3px;
  color: #7b8da2;
  font-size: 9px;
}
.more-industries-section {
  padding: 116px 0 130px;
}
.more-industries-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 90px;
  align-items: center;
}
.more-industries-grid .primary-button {
  margin-top: 28px;
}
.more-industry-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.more-industry-list button {
  min-height: 88px;
  display: grid;
  grid-template-columns: 35px 1fr 25px;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-radius: 8px;
  color: #3e536c;
  background: #f2f7fd;
  text-align: left;
  transition: 0.22s;
}
.more-industry-list button:hover {
  color: #1f78e7;
  background: #fff;
  box-shadow: 0 14px 30px rgba(59, 119, 191, 0.12);
  transform: translateY(-3px);
}
.more-industry-list span {
  color: #9fb2c8;
  font-size: 10px;
}
.more-industry-list strong {
  font-size: 15px;
}
.more-industry-list b {
  color: #4a91e8;
  font-size: 18px;
  font-weight: 400;
}
.solutions-cta {
  position: relative;
  min-height: 440px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.solutions-cta-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(rgba(247, 251, 255, 0.18), rgba(234, 246, 255, 0.48)),
    url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
}
.solutions-cta-content {
  padding: 76px 0;
  text-align: center;
}
.solutions-cta-content > p {
  margin: 0;
  color: #237df0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.solutions-cta-content h2 {
  margin: 17px 0 0;
  color: #2f75cc;
  font-size: clamp(32px, 3.2vw, 50px);
  letter-spacing: -0.045em;
  line-height: 1.3;
}
.solutions-cta-content > span {
  display: block;
  margin-top: 14px;
  color: #657891;
  font-size: 15px;
}
.solutions-cta-content .primary-button {
  margin-top: 28px;
}
@media (max-width: 1120px) {
  .solutions-hero-grid {
    gap: 20px;
  }
  .solutions-orbit-b {
    width: 450px;
    height: 450px;
  }
  .solutions-orbit-a {
    width: 340px;
    height: 340px;
  }
  .industry-solution-grid {
    gap: 32px;
  }
  .industry-number {
    font-size: 75px;
  }
  .path-map {
    width: 320px;
  }
}
@media (max-width: 900px) {
  .solutions-hero,
  .solutions-hero-grid {
    min-height: auto;
  }
  .solutions-hero-grid,
  .difference-layout,
  .industry-solution-grid,
  .more-industries-grid {
    grid-template-columns: 1fr;
  }
  .solutions-hero-grid {
    padding-top: 74px;
    padding-bottom: 62px;
  }
  .solutions-hero-visual {
    width: min(590px, 100%);
    justify-self: center;
    margin-top: 20px;
  }
  .difference-layout {
    gap: 48px;
  }
  .industry-sticky-nav {
    top: 58px;
    overflow-x: auto;
  }
  .industry-sticky-nav .page-width {
    width: max-content;
    min-width: 760px;
  }
  .industry-sticky-nav button {
    width: 152px;
  }
  .industry-solution {
    scroll-margin-top: 126px;
    padding-top: 84px;
    padding-bottom: 94px;
  }
  .industry-solution-grid {
    gap: 44px;
  }
  .industry-number {
    margin-bottom: 24px;
  }
  .industry-strategy {
    max-width: 760px;
  }
  .industry-visual {
    width: min(620px, 100%);
    min-height: 520px;
  }
  .more-industries-grid {
    gap: 45px;
  }
}
@media (max-width: 600px) {
  .solutions-hero-grid {
    padding-top: 54px;
  }
  .solutions-hero-copy h1 {
    font-size: clamp(36px, 10vw, 48px);
  }
  .solutions-hero-copy > p:nth-of-type(2) {
    font-size: 15px;
  }
  .solutions-hero-copy > .primary-button {
    margin-top: 25px;
  }
  .solutions-hero-visual {
    aspect-ratio: 0.98;
  }
  .solutions-orbit-b {
    width: 340px;
    height: 340px;
  }
  .solutions-orbit-a {
    width: 255px;
    height: 255px;
  }
  .solutions-core {
    width: 125px;
    height: 125px;
  }
  .solutions-core strong {
    font-size: 15px;
  }
  .industry-node {
    width: 60px;
    height: 60px;
    border-radius: 16px 6px 16px 6px;
  }
  .industry-node strong {
    font-size: 12px;
  }
  .difference-section,
  .more-industries-section {
    padding-top: 76px;
    padding-bottom: 86px;
  }
  .decision-factor-list article {
    grid-template-columns: 42px 1fr;
    gap: 12px;
    padding: 20px 0;
  }
  .industry-solution {
    padding-top: 72px;
    padding-bottom: 82px;
  }
  .industry-number {
    font-size: 62px;
  }
  .industry-intro h2 {
    font-size: 29px;
  }
  .industry-strategy {
    padding: 28px 0;
  }
  .industry-visual {
    min-height: 420px;
  }
  .path-map {
    width: 305px;
    height: 270px;
  }
  .path-axis {
    width: 190px;
    height: 190px;
  }
  .path-axis::before {
    width: 265px;
  }
  .path-axis::after {
    height: 235px;
  }
  .path-center {
    width: 92px;
    height: 92px;
    border-width: 7px;
  }
  .path-node {
    min-width: 80px;
    padding: 9px;
  }
  .industry-metrics {
    right: 18px;
    bottom: 17px;
    gap: 14px;
  }
  .industry-metrics strong {
    font-size: 18px;
  }
  .more-industry-list {
    grid-template-columns: 1fr;
  }
  .more-industry-list button {
    min-height: 72px;
  }
  .solutions-cta {
    min-height: 400px;
  }
  .solutions-cta-content h2 br {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .solutions-page *,
  .solutions-page *::before,
  .solutions-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
</style>