BigStickNewOfficialWebsite-V2/pages/cases/index.vue

<script setup>
import SiteHeader from '~/components/site/SiteHeader.vue'
import SiteFooter from '~/components/site/SiteFooter.vue'
const { ALL_LABEL, bySortAndTime, fetchPublicCategories, fetchPublicContent, normalizeCase } =
  useOfficialContent()

const activeCategory = ref(ALL_LABEL)
const snapshotVisibleCount = ref(3)
const { openConsultation } = useConsultation()

const { data: pageData } = await useAsyncData('public-cases', async () => {
  const [rows, categories] = await Promise.all([
    fetchPublicContent('CASE'),
    fetchPublicCategories().catch(() => ({}))
  ])

  return {
    cases: rows.sort(bySortAndTime).map((item) => normalizeCase(item, new Map())),
    categories: categories || {}
  }
})
useRefreshNuxtDataOnResume('public-cases')

const cases = computed(() => pageData.value?.cases || [])
const caseCategories = computed(() => [
  ALL_LABEL,
  ...Array.from(
    new Set(
      (pageData.value?.categories?.caseIndustries || []).map((item) => item.name).filter(Boolean)
    )
  )
])
const filteredCases = computed(() => {
  if (activeCategory.value === ALL_LABEL) return cases.value
  return cases.value.filter((item) => item.industry === activeCategory.value)
})
const primaryCases = computed(() => {
  if (activeCategory.value === ALL_LABEL) return cases.value.filter((item) => item.isFeatured)
  return filteredCases.value.filter((item) => item.isFullCase)
})
const resultSnapshots = computed(() =>
  filteredCases.value.filter((item) => item.isRecommended === false)
)
const heroPromotion = computed(() => filteredCases.value.filter((item) => item.isRecommended ).slice(0, 3))

useHead({
  title: '客户案例｜大马棒·云途全域 GEO',
  meta: [
    {
      name: 'description',
      content:
        '查看大马棒·云途全域 GEO 在教育培训、企业服务、本地生活和电商零售行业中的真实增长路径与结果数据。'
    }
  ]
})

const visibleSnapshots = computed(() => resultSnapshots.value.slice(0, snapshotVisibleCount.value))
const canLoadMoreSnapshots = computed(
  () => snapshotVisibleCount.value < resultSnapshots.value.length
)
const hasPrimaryCases = computed(() => primaryCases.value.length > 0)
const primaryEmptyKicker = computed(() =>
  activeCategory.value === ALL_LABEL ? '精选案例正在整理' : '完整案例正在整理'
)
const primaryEmptyTitle = computed(() =>
  activeCategory.value === ALL_LABEL
    ? '精选案例尚未上线'
    : `${activeCategory.value}行业的完整案例尚未上线`
)
const primaryEmptySource = computed(() =>
  activeCategory.value === ALL_LABEL ? '案例全部精选空状态' : '行业完整案例空状态'
)

watch(activeCategory, () => {
  snapshotVisibleCount.value = 3
})

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

function requestCustomPlan(source) {
  openConsultation({ title: '咨询我的行业增长路径', source })
}
</script>

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

    <main id="main-content">
      <section class="cases-hero">
        <div class="cases-hero-mesh" aria-hidden="true"></div>
        <div class="page-width cases-hero-grid">
          <div class="cases-hero-copy">
            <p class="page-eyebrow">客户案例</p>
            <h1>那些和客户一起，<br />跑通的<span>全域路径</span></h1>
            <p>
              营销不是全平台撒网，而是找到属于行业的那个入口、那条路径。这里记录我们已经验证过的方法和结果。
            </p>
            <div class="hero-proof-line">
              <div><strong>1000+</strong><span>服务客户</span></div>
              <div><strong>12+</strong><span>覆盖行业</span></div>
              <div><strong>全链路</strong><span>从曝光到咨询</span></div>
            </div>
            <button
              class="primary-button"
              type="button"
              @click="requestCustomPlan('客户案例页 Hero')"
            >
              聊聊我的增长路径 <AppIcon name="arrow-right" />
            </button>
          </div>

          <div class="case-collage" aria-label="不同行业案例结果预览">
            <article
              v-for="(snapshot, index) in heroPromotion"
              :key="snapshot.industry"
              :class="`collage-card collage-card-${index + 1}`"
            >
              <img :src="snapshot.cover" :alt="`${snapshot.industry}案例封面`" />
              <div>
                <span>{{ snapshot.industry }}</span
                ><strong>{{ snapshot.metric }}</strong
                ><small>{{ snapshot.metricLabel }}</small>
              </div>
            </article>
            <div class="collage-center">
              <img src="/images/cases/real-growth-path.png" alt="真实增长路径" />
            </div>
          </div>
        </div>
      </section>

      <section class="case-library-section">
        <div class="page-width">
          <header class="case-library-heading">
            <div>
              <p class="section-kicker">按行业查看</p>
              <h2>结果相似，背后的路径并不相同</h2>
            </div>
          </header>

          <div class="case-filters" role="group" aria-label="案例行业筛选">
            <button
              v-for="category in caseCategories"
              :key="category"
              type="button"
              :class="{ active: activeCategory === category }"
              @click="activeCategory = category"
            >
              {{ category }}
            </button>
          </div>

          <Transition name="case-change" mode="out-in">
            <div :key="activeCategory" class="case-results">
              <article
                v-for="caseItem in primaryCases"
                :key="caseItem.id || caseItem.slug"
                class="featured-case"
              >
                <div class="featured-case-image">
                  <img :src="caseItem.cover" :alt="`${caseItem.industry}行业 GEO 案例封面`" />
                  <span
                    >{{ caseItem.industry }} ·
                    {{ caseItem.isFullCase ? '完整案例' : '精选案例' }}</span
                  >
                </div>
                <div class="featured-case-copy">
                  <p>{{ caseItem.client }}</p>
                  <h2>{{ caseItem.title }}</h2>
                  <span class="featured-summary">{{ caseItem.summary }}</span>
                  <div class="featured-metrics">
                    <div v-for="metric in caseItem.metrics" :key="metric[1]">
                      <strong>{{ metric[0] }}</strong
                      ><span>{{ metric[1] }}</span>
                    </div>
                  </div>
                  <NuxtLink
                    v-if="caseItem.isFullCase && caseItem.slug"
                    :to="`/cases/${caseItem.slug}`"
                    >查看完整复盘 <AppIcon name="arrow-right"
                  /></NuxtLink>
                  <button
                    v-else
                    type="button"
                    @click="requestPlan(caseItem.industry, `${caseItem.industry}精选案例`)"
                  >
                    获取同类方案 <AppIcon name="arrow-right" />
                  </button>
                </div>
              </article>

              <div v-if="!hasPrimaryCases" class="case-empty primary-empty">
                <div class="empty-visual" aria-hidden="true"><span></span><span></span><i></i></div>
                <p class="section-kicker">{{ primaryEmptyKicker }}</p>
                <h3>{{ primaryEmptyTitle }}</h3>
                <p>我们可以先结合您的业务情况，分享对应行业的策略思路与可参考指标。</p>
                <button
                  class="primary-button small"
                  type="button"
                  @click="requestPlan(activeCategory, primaryEmptySource)"
                >
                  获取{{ activeCategory }}行业建议 <AppIcon name="arrow-right" />
                </button>
              </div>

              <div v-if="visibleSnapshots.length" class="snapshot-heading">
                <div>
                  <p class="section-kicker">结果快照</p>
                  <h3>更多已确认的行业结果</h3>
                </div>
                <span>完整复盘资料将在获得客户授权后陆续开放</span>
              </div>

              <div v-if="visibleSnapshots.length" class="snapshot-grid">
                <article
                  v-for="(snapshot, index) in visibleSnapshots"
                  :key="`${activeCategory}-${snapshot.title}`"
                  :class="{ wide: index === 0 && activeCategory === ALL_LABEL }"
                >
                  <div class="snapshot-image">
                    <img :src="snapshot.cover" :alt="`${snapshot.industry}结果快照`" /><span>{{
                      snapshot.industry
                    }}</span>
                  </div>
                  <div class="snapshot-copy">
                    <small>{{ snapshot.client }}</small>
                    <h3>{{ snapshot.title }}</h3>
                    <div class="snapshot-result">
                      <strong>{{ snapshot.metric }}</strong
                      ><span>{{ snapshot.metricLabel }}</span>
                    </div>
                    <p>{{ snapshot.secondary }}</p>
                    <button
                      type="button"
                      @click="requestPlan(snapshot.industry, `${snapshot.industry}案例快照`)"
                    >
                      获取同类方案 <AppIcon name="arrow-right" />
                    </button>
                  </div>
                </article>
              </div>
              <button
                v-if="canLoadMoreSnapshots"
                class="case-load-more"
                type="button"
                @click="snapshotVisibleCount += 2"
              >
                加载更多 <AppIcon name="plus" />
              </button>
            </div>
          </Transition>
        </div>
      </section>

      <section class="case-method-section">
        <div class="page-width case-method-grid">
          <header>
            <p class="section-kicker">我们如何复盘</p>
            <h2>不只展示一个漂亮数字</h2>
            <p>
              每篇完整案例都会说明项目开始前是什么状态、为什么选择这条路径、执行了什么，以及结果如何被持续监测。
            </p>
          </header>
          <div class="method-list">
            <article>
              <span>01</span>
              <h3>项目背景</h3>
              <p>业务阶段、行业环境与增长目标。</p>
            </article>
            <article>
              <span>02</span>
              <h3>前期基线</h3>
              <p>品牌提及、推荐排序与转化链路。</p>
            </article>
            <article>
              <span>03</span>
              <h3>解决方案</h3>
              <p>问题库、内容建设、信源分发与监测。</p>
            </article>
            <article>
              <span>04</span>
              <h3>业务结果</h3>
              <p>覆盖率、流量、咨询量与线索质量。</p>
            </article>
          </div>
        </div>
      </section>

      <section class="cases-cta">
        <div class="cases-cta-art" aria-hidden="true"></div>
        <div class="page-width cases-cta-content">
          <p>案例只是参考，策略需要从你的业务出发</p>
          <h2>聊聊行业、现状和目标，<br />找到适合你的那条路径</h2>
          <button
            class="primary-button"
            type="button"
            @click="requestCustomPlan('客户案例页底部 CTA')"
          >
            咨询我的行业增长路径 <AppIcon name="arrow-right" />
          </button>
        </div>
      </section>
    </main>

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

<style scoped>
.cases-page {
  --case-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(--case-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.cases-hero {
  position: relative;
  min-height: 660px;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: #f1f7ff;
}
.cases-hero-mesh {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 80% 25%, rgba(76, 158, 255, 0.22), transparent 27%),
    radial-gradient(circle at 14% 90%, rgba(97, 200, 235, 0.11), transparent 28%),
    linear-gradient(110deg, #f8fbff, #e8f2ff);
}
.cases-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: 60px 60px;
  mask-image: linear-gradient(90deg, transparent 20%, #000);
}
.cases-hero-grid {
  min-height: 660px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 70px;
  padding: 52px 0 60px;
}
.cases-hero-copy h1 {
  margin: 15px 0 0;
  color: #37465b;
  font-size: clamp(44px, 4vw, 65px);
  letter-spacing: -0.055em;
  line-height: 1.18;
}
.cases-hero-copy h1 span {
  color: #1978ef;
  white-space: nowrap;
}
.cases-hero-copy > p:nth-of-type(2) {
  max-width: 620px;
  margin: 24px 0 0;
  color: #68788e;
  font-size: 16px;
  line-height: 1.85;
}
.hero-proof-line {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 29px;
}
.hero-proof-line div {
  display: grid;
}
.hero-proof-line strong {
  color: #257dec;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.hero-proof-line span {
  margin-top: 4px;
  color: #8290a2;
  font-size: 10px;
}
.cases-hero-copy .primary-button {
  margin-top: 31px;
}
.case-collage {
  position: relative;
  width: min(650px, 100%);
  aspect-ratio: 1.05;
  justify-self: end;
}
.case-collage::before {
  position: absolute;
  inset: 6% 7%;
  content: '';
  border: 1px dashed rgba(62, 140, 231, 0.28);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9),
    rgba(151, 205, 255, 0.18) 48%,
    transparent 69%
  );
}
.collage-card {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 17px 6px 17px 6px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 42px rgba(55, 113, 184, 0.17);
  backdrop-filter: blur(10px);
}
.collage-card img {
  width: 100%;
  height: 110px;
  display: block;
  object-fit: cover;
}
.collage-card > div {
  display: grid;
  padding: 13px 15px;
}
.collage-card span {
  color: #7890aa;
  font-size: 9px;
}
.collage-card strong {
  margin-top: 4px;
  color: #267eec;
  font-size: 21px;
}
.collage-card small {
  color: #6f8095;
  font-size: 9px;
}
.collage-card-1 {
  top: 3%;
  left: 7%;
  width: 210px;
  transform: rotate(-3deg);
}
.collage-card-2 {
  top: 9%;
  right: 2%;
  width: 190px;
  transform: rotate(3deg);
}
.collage-card-3 {
  bottom: 2%;
  left: 2%;
  width: 195px;
  transform: rotate(2deg);
}
.collage-card-4 {
  right: 4%;
  bottom: 4%;
  width: 215px;
  transform: rotate(-2deg);
}
.collage-center {
  position: absolute;
  z-index: 04;
  top: 50%;
  left: 50%;
  width: min(230px, 68%);
  aspect-ratio: 1838 / 1300;
  overflow: hidden;
  border-radius: 18px;
  transform: translate(-50%, -50%);
}
.collage-center img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.case-library-section {
  padding: 112px 0 130px;
}
.case-library-heading {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: 80px;
}
.case-library-heading h2,
.case-method-grid h2 {
  margin: 15px 0 0;
  color: #344359;
  font-size: clamp(32px, 3vw, 48px);
  letter-spacing: -0.045em;
  line-height: 1.28;
}
.case-library-heading > p,
.case-method-grid header > p:last-child {
  max-width: 590px;
  margin: 0 0 5px;
  color: #748398;
  font-size: 14px;
  line-height: 1.8;
}
.case-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 43px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e0e9f3;
}
.case-filters button {
  height: 38px;
  padding: 0 18px;
  border-radius: 5px;
  color: #62758b;
  background: #f1f6fc;
  font-size: 12px;
  transition: 0.2s;
}
.case-filters button:hover,
.case-filters button.active {
  color: #fff;
  background: #287ff0;
  box-shadow: 0 8px 18px rgba(39, 126, 238, 0.2);
  transform: translateY(-1px);
}
.case-results {
  margin-top: 45px;
}
.featured-case {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  min-height: 480px;
  overflow: hidden;
  border-radius: 7px 22px 7px 22px;
  background: #eaf4ff;
  box-shadow: 0 28px 60px rgba(60, 123, 201, 0.13);
}
.featured-case + .featured-case {
  margin-top: 28px;
}
.featured-case-image {
  position: relative;
  min-height: 480px;
  overflow: hidden;
}
.featured-case-image::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(90deg, transparent 60%, rgba(234, 244, 255, 0.8));
}
.featured-case-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.05);
}
.featured-case-image > span {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 28px;
  padding: 9px 12px;
  border-radius: 4px;
  color: #fff;
  background: rgba(31, 107, 205, 0.82);
  font-size: 10px;
  backdrop-filter: blur(8px);
}
.featured-case-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 54px 50px 36px;
}
.featured-case-copy > p {
  margin: 0;
  color: #5181b9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.featured-case-copy h2 {
  max-width: 600px;
  margin: 16px 0 0;
  color: #33465d;
  font-size: clamp(30px, 2.7vw, 43px);
  letter-spacing: -0.045em;
  line-height: 1.32;
}
.featured-summary {
  margin-top: 17px;
  color: #708197;
  font-size: 13px;
  line-height: 1.75;
}
.featured-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.featured-metrics div {
  padding-top: 14px;
  border-top: 1px solid #cadced;
}
.featured-metrics strong {
  display: block;
  color: #287fec;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.featured-metrics span {
  display: block;
  margin-top: 5px;
  color: #8392a4;
  font-size: 9px;
}
.featured-case-copy > a,
.featured-case-copy > button {
  align-self: flex-start;
  margin-top: 29px;
  padding-bottom: 5px;
  border-radius: 0;
  border-bottom: 1px solid #82b3ea;
  color: #247be8;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.featured-case-copy > a b {
  margin-left: 8px;
}
.snapshot-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-top: 80px;
}
.snapshot-heading h3 {
  margin: 12px 0 0;
  color: #35475d;
  font-size: 30px;
}
.snapshot-heading > span {
  max-width: 390px;
  color: #8795a6;
  font-size: 11px;
  text-align: right;
}
.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-top: 32px;
}
.snapshot-grid article {
  min-height: 310px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  border-radius: 15px 5px 15px 5px;
  background: #f2f7fd;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s;
}
.snapshot-grid article:hover {
  background: #fff;
  box-shadow: 0 20px 42px rgba(61, 119, 189, 0.13);
  transform: translateY(-5px);
}
.snapshot-grid article.wide {
  grid-column: 1 / -1;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 355px;
}
.snapshot-image {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
.snapshot-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s;
}
.snapshot-grid article:hover img {
  transform: scale(1.04);
}
.snapshot-image span {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 10px;
  border-radius: 4px;
  color: #fff;
  background: rgba(33, 111, 208, 0.8);
  font-size: 9px;
}
.snapshot-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}
.snapshot-copy > small {
  color: #7e93aa;
  font-size: 9px;
}
.snapshot-copy h3 {
  margin: 11px 0 0;
  color: #384c64;
  font-size: 20px;
  line-height: 1.45;
}
.snapshot-result {
  display: grid;
  margin-top: 22px;
}
.snapshot-result strong {
  color: #287fec;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.snapshot-result span {
  color: #7f8fa2;
  font-size: 10px;
}
.snapshot-copy > p {
  margin: 9px 0 0;
  color: #607997;
  font-size: 11px;
}
.snapshot-copy button {
  align-self: flex-start;
  margin-top: 21px;
  padding: 0 0 4px;
  border-bottom: 1px solid #9bc1e9;
  color: #2a7de5;
  background: transparent;
  font-size: 11px;
}
.case-load-more {
  min-width: 150px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 42px auto 0;
  border: 1px solid #bad2ea;
  border-radius: 5px;
  color: #527497;
  background: #fff;
  font-size: 12px;
  transition: 0.2s;
}
.case-load-more:hover {
  color: #247be8;
  border-color: #73aae4;
  transform: translateY(-2px);
}
.case-empty {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  border-radius: 18px 6px 18px 6px;
  background: #f1f7fd;
  text-align: center;
}
.empty-visual {
  position: relative;
  width: 120px;
  height: 90px;
  margin-bottom: 28px;
}
.empty-visual span {
  position: absolute;
  width: 65px;
  height: 55px;
  border: 1px solid #9dc5ee;
  border-radius: 9px 3px 9px 3px;
  background: rgba(255, 255, 255, 0.75);
}
.empty-visual span:first-child {
  top: 4px;
  left: 9px;
  transform: rotate(-8deg);
}
.empty-visual span:nth-child(2) {
  right: 6px;
  bottom: 4px;
  transform: rotate(8deg);
}
.empty-visual i {
  position: absolute;
  z-index: 2;
  top: 28px;
  left: 45px;
  width: 30px;
  height: 30px;
  border: 7px solid #fff;
  border-radius: 50%;
  background: #3b8fea;
  box-shadow: 0 9px 18px rgba(51, 135, 232, 0.24);
}
.case-empty h3 {
  margin: 14px 0 0;
  color: #3b4d63;
  font-size: 27px;
}
.case-empty > p:nth-of-type(2) {
  max-width: 500px;
  margin: 12px 0 0;
  color: #7c8b9d;
  font-size: 13px;
  line-height: 1.7;
}
.case-empty .primary-button {
  margin-top: 25px;
}
.case-change-enter-active,
.case-change-leave-active {
  transition:
    opacity 0.18s,
    transform 0.22s;
}
.case-change-enter-from {
  opacity: 0;
  transform: translateY(10px);
}
.case-change-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}
.case-method-section {
  padding: 108px 0 122px;
  background: #eef7ff;
}
.case-method-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 85px;
  align-items: center;
}
.case-method-grid header > p:last-child {
  margin-top: 20px;
}
.method-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.method-list article {
  min-height: 180px;
  padding: 28px;
  border-radius: 14px 5px 14px 5px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 #fff;
}
.method-list span {
  color: #8da8c6;
  font-size: 10px;
  font-weight: 700;
}
.method-list h3 {
  margin: 26px 0 0;
  color: #38506b;
  font-size: 19px;
}
.method-list p {
  margin: 8px 0 0;
  color: #7a899b;
  font-size: 12px;
  line-height: 1.6;
}
.cases-cta {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.cases-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;
}
.cases-cta-content {
  display: grid;
  justify-items: center;
  padding: 75px 0;
  text-align: center;
}
.cases-cta-content > p {
  width: 100%;
  margin: 0;
  color: #237df0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.cases-cta-content h2 {
  margin: 17px 0 0;
  color: #2f75cc;
  font-size: clamp(32px, 3.2vw, 50px);
  letter-spacing: -0.045em;
  line-height: 1.3;
}
.cases-cta-content .primary-button {
  margin-top: 29px;
}
@media (max-width: 980px) {
  .cases-hero,
  .cases-hero-grid {
    min-height: auto;
  }
  .cases-hero-grid {
    grid-template-columns: 1fr;
    padding-top: 74px;
    padding-bottom: 64px;
  }
  .case-collage {
    width: min(650px, 100%);
    justify-self: center;
    margin-top: 10px;
  }
  .case-library-heading,
  .case-method-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .case-library-heading > p {
    margin: 0;
  }
  .featured-case {
    grid-template-columns: 1fr;
  }
  .featured-case-image {
    min-height: 360px;
  }
  .featured-case-image::after {
    background: linear-gradient(transparent 65%, #eaf4ff);
  }
  .featured-case-copy {
    padding: 42px;
  }
  .snapshot-grid {
    grid-template-columns: 1fr;
  }
  .snapshot-grid article.wide {
    grid-column: auto;
    grid-template-columns: 0.9fr 1.1fr;
    min-height: 310px;
  }
}
@media (max-width: 600px) {
  .cases-hero-grid {
    padding-top: 54px;
  }
  .cases-hero-copy h1 {
    font-size: clamp(37px, 10vw, 49px);
  }
  .cases-hero-copy > p:nth-of-type(2) {
    font-size: 15px;
  }
  .hero-proof-line {
    gap: 22px;
  }
  .case-collage {
    aspect-ratio: 0.93;
  }
  .collage-card {
    width: 155px;
  }
  .collage-card img {
    height: 82px;
  }
  .collage-card-1 {
    left: 0;
  }
  .collage-card-2 {
    right: 0;
  }
  .collage-card-3 {
    left: 0;
  }
  .collage-card-4 {
    right: 0;
  }
  .collage-center {
    width: 76%;
  }
  .case-library-section {
    padding-top: 76px;
    padding-bottom: 86px;
  }
  .case-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 14px;
  }
  .case-filters button {
    flex: 0 0 auto;
  }
  .featured-case-image {
    min-height: 260px;
  }
  .featured-case-copy {
    padding: 30px 22px 34px;
  }
  .featured-metrics {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .featured-metrics div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .snapshot-heading {
    align-items: start;
    flex-direction: column;
  }
  .snapshot-heading > span {
    text-align: left;
  }
  .snapshot-grid article,
  .snapshot-grid article.wide {
    grid-template-columns: 1fr;
  }
  .snapshot-image {
    min-height: 210px;
  }
  .snapshot-copy {
    padding: 25px 22px;
  }
  .case-method-section {
    padding-top: 76px;
    padding-bottom: 84px;
  }
  .method-list {
    grid-template-columns: 1fr;
  }
  .method-list article {
    min-height: 145px;
  }
  .cases-cta {
    min-height: 390px;
  }
  .cases-cta-content h2 br {
    display: none;
  }
}
</style>