<script setup>
import SiteHeader from '~/components/site/SiteHeader.vue'
import SiteFooter from '~/components/site/SiteFooter.vue'
import { getCaseBySlug, resultSnapshots } from '~/data/cases'

const route = useRoute()
const { openConsultation } = useConsultation()
const caseStudy = getCaseBySlug(route.params.slug)

if (!caseStudy) {
  throw createError({ statusCode: 404, statusMessage: '案例不存在' })
}

useHead({
  title: `${caseStudy.title}｜客户案例`,
  meta: [{ name: 'description', content: caseStudy.description }]
})

function requestSimilarPlan(source) {
  openConsultation({
    title: '获取教育培训行业增长方案',
    industry: caseStudy.industry,
    source
  })
}
</script>

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

    <main id="main-content">
      <section class="detail-hero">
        <div class="detail-hero-mesh" aria-hidden="true"></div>
        <div class="page-width">
          <nav class="breadcrumb" aria-label="面包屑导航">
            <NuxtLink to="/">首页</NuxtLink><span>/</span><NuxtLink to="/cases">客户案例</NuxtLink
            ><span>/</span><b>{{ caseStudy.industry }}</b>
          </nav>
          <div class="detail-hero-grid">
            <div class="detail-hero-copy">
              <div class="case-meta">
                <span>{{ caseStudy.industry }}</span
                ><span>{{ caseStudy.client }}</span
                ><span>合作周期 {{ caseStudy.duration }}</span>
              </div>
              <h1>{{ caseStudy.title }}</h1>
              <p>{{ caseStudy.description }}</p>
              <button
                class="primary-button"
                type="button"
                @click="requestSimilarPlan('案例详情 Hero')"
              >
                获取同类行业方案 <AppIcon name="arrow-right" />
              </button>
            </div>
            <div class="detail-hero-result">
              <div class="result-label">PROJECT OUTCOME</div>
              <div class="result-orbit">
                <i></i><i></i><i></i>
                <div>
                  <small>核心问题覆盖率</small><strong>88%</strong><span>项目启动前为 11%</span>
                </div>
              </div>
              <div class="result-side result-side-one">
                <strong>+215%</strong><span>官网 AI 来源流量</span>
              </div>
              <div class="result-side result-side-two">
                <strong>+190%</strong><span>精准学员咨询量</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="overview-section">
        <div class="page-width overview-grid">
          <header class="section-heading">
            <p class="section-kicker">01 · 项目背景</p>
            <h2>品牌实力不弱，<br />但没有被 AI 完整理解</h2>
          </header>
          <div class="overview-content">
            <p v-for="paragraph in caseStudy.background" :key="paragraph">{{ paragraph }}</p>
            <aside class="objective-box">
              <strong>客户希望解决</strong>
              <ul>
                <li v-for="objective in caseStudy.objectives" :key="objective">{{ objective }}</li>
              </ul>
            </aside>
          </div>
        </div>
      </section>

      <section class="baseline-section">
        <div class="page-width">
          <header class="center-heading">
            <p class="section-kicker">02 · 前期调研</p>
            <h2>先找到品牌没有进入推荐的原因</h2>
            <p>
              项目组选取 150
              个高频问题进行基线测试，并从推荐表现、信息完整度与转化链路三个层面判断问题。
            </p>
          </header>
          <div class="baseline-grid">
            <article
              v-for="(item, index) in caseStudy.baseline"
              :key="item[0]"
              :class="{ wide: index === 4 }"
            >
              <span>0{{ index + 1 }}</span>
              <h3>{{ item[0] }}</h3>
              <p>{{ item[1] }}</p>
            </article>
          </div>
          <div class="baseline-conclusion">
            <span>综合判断</span>
            <p>品牌并非缺少业务实力，而是缺少面向 AI 搜索场景的结构化内容表达和可信信源覆盖。</p>
          </div>
        </div>
      </section>

      <section class="solution-detail-section">
        <div class="page-width">
          <header class="solution-detail-heading">
            <div>
              <p class="section-kicker">03 · 解决方案</p>
              <h2>围绕家长完整决策路径，重建内容与信任证据</h2>
            </div>
            <p>
              先完善 AI 可以识别的品牌基础认知，再强化推荐类问题中的信任依据，最后打通咨询转化链路。
            </p>
          </header>

          <section class="question-framework">
            <div class="subsection-index">A</div>
            <div class="subsection-copy">
              <p>四维全旅程问题库</p>
              <h3>从 150 个基线问题，扩展为 420+ 条真实提问</h3>
            </div>
            <div class="question-grid">
              <article v-for="(item, index) in caseStudy.questionFramework" :key="item.title">
                <span>0{{ index + 1 }}</span>
                <h4>{{ item.title }}</h4>
                <p>{{ item.content }}</p>
                <strong>{{ item.goal }}</strong>
              </article>
            </div>
          </section>

          <section class="phase-section">
            <div class="subsection-index">B</div>
            <div class="subsection-copy">
              <p>分阶段内容建设</p>
              <h3>先让品牌稳定出现，再争取推荐优先级</h3>
            </div>
            <div class="phase-list">
              <article v-for="phase in caseStudy.phases" :key="phase.number">
                <span>{{ phase.number }}</span>
                <div>
                  <h4>{{ phase.title }}</h4>
                  <p>{{ phase.text }}</p>
                </div>
              </article>
            </div>
          </section>

          <section class="distribution-section">
            <div class="subsection-index">C</div>
            <div class="subsection-copy">
              <p>可信信源分发</p>
              <h3>建立“权威层—讨论层—平台层”矩阵</h3>
            </div>
            <div class="distribution-map">
              <article v-for="(item, index) in caseStudy.distribution" :key="item[0]">
                <span>0{{ index + 1 }}</span>
                <h4>{{ item[0] }}</h4>
                <strong>{{ item[1] }}</strong>
                <p>{{ item[2] }}</p>
              </article>
              <div class="distribution-center">
                <small>同一套</small><strong>品牌事实</strong><span>统一表达</span>
              </div>
            </div>
          </section>

          <section class="monitor-section">
            <div class="subsection-index">D</div>
            <div class="subsection-copy">
              <p>持续监测与迭代</p>
              <h3>每一轮结果，都进入下一轮内容调整</h3>
            </div>
            <div class="monitor-track">
              <span>问题覆盖率</span><span>品牌提及率</span><span>前三推荐率</span
              ><span>信息准确率</span><span>AI 来源流量</span><span>咨询线索质量</span>
            </div>
          </section>
        </div>
      </section>

      <section class="result-section">
        <div class="page-width">
          <header class="center-heading">
            <p class="section-kicker">04 · 项目成果</p>
            <h2>从“几乎不被推荐”到稳定进入家长决策场景</h2>
            <p>以下指标用于展示项目推进前后的变化，不代表对其他项目作出相同效果承诺。</p>
          </header>
          <div class="result-table-wrap">
            <table>
              <thead>
                <tr>
                  <th>核心指标</th>
                  <th>项目前</th>
                  <th>项目后 / 峰值</th>
                  <th>变化说明</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="row in caseStudy.resultTable" :key="row[0]">
                  <th>{{ row[0] }}</th>
                  <td>{{ row[1] }}</td>
                  <td>
                    <strong>{{ row[2] }}</strong>
                  </td>
                  <td>{{ row[3] }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="outcome-grid">
            <article v-for="(outcome, index) in caseStudy.outcomes" :key="outcome[1]">
              <span>0{{ index + 1 }}</span
              ><strong>{{ outcome[0] }}</strong>
              <p>{{ outcome[1] }}</p>
            </article>
          </div>
        </div>
      </section>

      <section class="detail-summary-section">
        <div class="page-width detail-summary-grid">
          <div class="summary-quote">
            <span>项目复盘</span>
            <blockquote>
              GEO 的价值不是再增加一个投放渠道，而是帮助品牌进入用户做决定之前的那一次提问。
            </blockquote>
          </div>
          <div class="summary-copy">
            <p>
              项目累计产出 210+ 篇合规内容，覆盖教育媒体、垂类平台、家长社区与知识问答平台等 15
              类渠道。
            </p>
            <p>
              AI 来源用户的页面停留时长、课程页访问率与咨询意向优于传统广告流量。项目推进至第 4
              个月时，客户启动年度续约沟通，并新增小学段课程的 GEO 推广需求。
            </p>
            <button
              class="primary-button small"
              type="button"
              @click="requestSimilarPlan('案例总结板块')"
            >
              获取同类方案 <AppIcon name="arrow-right" />
            </button>
          </div>
        </div>
      </section>

      <section class="related-section">
        <div class="page-width">
          <header class="related-heading">
            <div>
              <p class="section-kicker">其他行业结果</p>
              <h2>不同路径，同样关注业务结果</h2>
            </div>
            <NuxtLink to="/cases">返回全部案例 <AppIcon name="arrow-right" /></NuxtLink>
          </header>
          <div class="related-grid">
            <article v-for="snapshot in resultSnapshots.slice(0, 3)" :key="snapshot.industry">
              <img :src="snapshot.cover" :alt="`${snapshot.industry}案例结果`" />
              <div>
                <span>{{ snapshot.industry }}</span>
                <h3>{{ snapshot.title }}</h3>
                <strong>{{ snapshot.metric }}</strong>
                <p>{{ snapshot.secondary }}</p>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section class="detail-cta">
        <div class="detail-cta-art" aria-hidden="true"></div>
        <div class="page-width detail-cta-content">
          <p>希望品牌也进入用户的 AI 推荐列表？</p>
          <h2>先做一次可见性诊断，<br />找到最值得优先解决的问题</h2>
          <button
            class="primary-button"
            type="button"
            @click="requestSimilarPlan('案例详情底部 CTA')"
          >
            获取教育行业增长方案 <AppIcon name="arrow-right" />
          </button>
        </div>
      </section>
    </main>

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

<style scoped>
.case-detail-page {
  --detail-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);
}
.section-kicker {
  margin: 0;
  color: var(--detail-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.detail-hero {
  position: relative;
  min-height: 690px;
  isolation: isolate;
  background: #eff6ff;
}
.detail-hero-mesh {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 79% 38%, rgba(72, 156, 255, 0.26), transparent 28%),
    linear-gradient(112deg, #f8fbff, #e6f1ff);
}
.detail-hero-mesh::after {
  position: absolute;
  inset: 0;
  content: '';
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(55, 125, 214, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 125, 214, 0.08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent, #000);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 28px;
  color: #8291a4;
  font-size: 11px;
}
.breadcrumb a {
  color: #71849a;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #247ce9;
}
.breadcrumb b {
  color: #4d6e93;
  font-weight: 600;
}
.detail-hero-grid {
  min-height: 625px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 70px;
  padding: 35px 0 70px;
}
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.case-meta span {
  padding: 7px 10px;
  border: 1px solid rgba(70, 136, 217, 0.18);
  border-radius: 4px;
  color: #597794;
  background: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}
.detail-hero-copy h1 {
  max-width: 780px;
  margin: 22px 0 0;
  color: #344359;
  font-size: clamp(42px, 4vw, 65px);
  letter-spacing: -0.055em;
  line-height: 1.2;
}
.detail-hero-copy > p {
  max-width: 690px;
  margin: 23px 0 0;
  color: #68798e;
  font-size: 15px;
  line-height: 1.85;
}
.detail-hero-copy .primary-button {
  margin-top: 31px;
}
.detail-hero-result {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1;
  justify-self: end;
}
.result-label {
  position: absolute;
  top: 5%;
  right: 6%;
  color: #7895b6;
  font-size: 9px;
  letter-spacing: 0.16em;
}
.result-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 360px;
  border: 1px dashed rgba(48, 132, 232, 0.36);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.result-orbit::before {
  position: absolute;
  inset: 45px;
  content: '';
  border: 1px solid rgba(52, 135, 232, 0.24);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9),
    rgba(128, 195, 255, 0.19) 60%,
    transparent
  );
}
.result-orbit > div {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 13px solid rgba(255, 255, 255, 0.64);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2c82f0, #48b8e8);
  box-shadow: 0 25px 48px rgba(37, 121, 225, 0.29);
  transform: translate(-50%, -50%);
}
.result-orbit small {
  font-size: 10px;
  opacity: 0.8;
}
.result-orbit strong {
  margin-top: 6px;
  font-size: 42px;
  font-variant-numeric: tabular-nums;
}
.result-orbit span {
  margin-top: 3px;
  font-size: 9px;
  opacity: 0.75;
}
.result-orbit i {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2e84ef;
  box-shadow: 0 6px 15px rgba(42, 127, 232, 0.32);
}
.result-orbit i:nth-child(1) {
  top: -7px;
  left: 50%;
}
.result-orbit i:nth-child(2) {
  right: 7%;
  bottom: 18%;
  background: #4fc2e8;
}
.result-orbit i:nth-child(3) {
  bottom: 5%;
  left: 18%;
  background: #776ff0;
}
.result-side {
  position: absolute;
  z-index: 4;
  min-width: 140px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px 4px 12px 4px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 35px rgba(53, 112, 183, 0.13);
  backdrop-filter: blur(10px);
}
.result-side strong {
  display: block;
  color: #277fec;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}
.result-side span {
  color: #74869b;
  font-size: 9px;
}
.result-side-one {
  top: 18%;
  right: 0;
}
.result-side-two {
  bottom: 16%;
  left: 0;
}
.overview-section {
  padding: 116px 0 130px;
}
.overview-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 95px;
  align-items: start;
}
.section-heading {
  position: sticky;
  top: 105px;
}
.section-heading h2,
.center-heading h2,
.solution-detail-heading h2,
.related-heading h2 {
  margin: 15px 0 0;
  color: #344359;
  font-size: clamp(32px, 3vw, 48px);
  letter-spacing: -0.045em;
  line-height: 1.28;
}
.overview-content > p {
  margin: 0 0 20px;
  color: #66788e;
  font-size: 15px;
  line-height: 1.95;
}
.objective-box {
  margin-top: 35px;
  padding: 30px;
  border-radius: 15px 5px 15px 5px;
  background: #eef6ff;
}
.objective-box > strong {
  color: #3c5877;
  font-size: 13px;
}
.objective-box ul {
  display: grid;
  gap: 13px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.objective-box li {
  position: relative;
  padding-left: 18px;
  color: #6b7d92;
  font-size: 13px;
  line-height: 1.65;
}
.objective-box li::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  content: '';
  border-radius: 50%;
  background: #3d8fee;
}
.baseline-section {
  padding: 110px 0 126px;
  background: #eef7ff;
}
.center-heading {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.center-heading > p:last-child {
  max-width: 670px;
  margin: 18px auto 0;
  color: #748498;
  font-size: 14px;
  line-height: 1.8;
}
.baseline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
}
.baseline-grid article {
  min-height: 205px;
  padding: 28px;
  border-radius: 14px 5px 14px 5px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 #fff;
}
.baseline-grid article.wide {
  grid-column: span 4;
  min-height: 135px;
}
.baseline-grid span {
  color: #8ba8c7;
  font-size: 10px;
  font-weight: 700;
}
.baseline-grid h3 {
  margin: 34px 0 0;
  color: #3c526b;
  font-size: 17px;
}
.baseline-grid p {
  margin: 10px 0 0;
  color: #77879a;
  font-size: 12px;
  line-height: 1.65;
}
.baseline-grid article.wide h3 {
  margin-top: 20px;
}
.baseline-conclusion {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 28px;
  margin-top: 25px;
  padding: 27px 30px;
  border-left: 3px solid #358bf0;
  background: rgba(255, 255, 255, 0.58);
}
.baseline-conclusion span {
  color: #2f7edc;
  font-size: 12px;
  font-weight: 700;
}
.baseline-conclusion p {
  margin: 0;
  color: #61768f;
  font-size: 14px;
  line-height: 1.7;
}
.solution-detail-section {
  padding: 116px 0 132px;
}
.solution-detail-heading {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  align-items: end;
  gap: 80px;
}
.solution-detail-heading > p {
  margin: 0 0 6px;
  color: #748398;
  font-size: 14px;
  line-height: 1.8;
}
.question-framework,
.phase-section,
.distribution-section,
.monitor-section {
  display: grid;
  grid-template-columns: 70px 0.62fr 1.38fr;
  gap: 35px;
  padding: 78px 0;
  border-bottom: 1px solid #e0e8f1;
}
.subsection-index {
  color: rgba(65, 126, 199, 0.2);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}
.subsection-copy > p {
  margin: 2px 0 0;
  color: #2c80e9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.subsection-copy h3 {
  margin: 13px 0 0;
  color: #3a4e66;
  font-size: 24px;
  line-height: 1.45;
}
.question-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.question-grid article {
  min-height: 205px;
  padding: 25px;
  border-radius: 13px 4px 13px 4px;
  background: #f1f6fc;
}
.question-grid span {
  color: #93abc4;
  font-size: 9px;
}
.question-grid h4 {
  margin: 25px 0 0;
  color: #3d536d;
  font-size: 17px;
}
.question-grid p {
  margin: 9px 0 0;
  color: #77879b;
  font-size: 11px;
  line-height: 1.6;
}
.question-grid strong {
  display: block;
  margin-top: 16px;
  color: #4b80b9;
  font-size: 10px;
  line-height: 1.55;
}
.phase-list {
  display: grid;
  gap: 15px;
}
.phase-list article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 20px;
  padding: 27px;
  border-left: 2px solid #4b98ef;
  background: #f3f8fd;
}
.phase-list > article > span {
  color: #4089df;
  font-size: 10px;
  font-weight: 700;
}
.phase-list h4 {
  margin: 0;
  color: #3e536b;
  font-size: 17px;
}
.phase-list p {
  margin: 9px 0 0;
  color: #75869a;
  font-size: 12px;
  line-height: 1.7;
}
.distribution-map {
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 12px;
}
.distribution-map article {
  position: relative;
  z-index: 2;
  min-height: 230px;
  padding: 27px 22px;
  border: 1px solid #e0eaf5;
  border-radius: 14px 5px 14px 5px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 32px rgba(60, 118, 189, 0.09);
}
.distribution-map article > span {
  color: #95abc4;
  font-size: 9px;
}
.distribution-map h4 {
  margin: 24px 0 0;
  color: #3d536c;
  font-size: 18px;
}
.distribution-map article strong {
  display: block;
  margin-top: 10px;
  color: #3784df;
  font-size: 11px;
  line-height: 1.6;
}
.distribution-map article p {
  margin: 10px 0 0;
  color: #7a899b;
  font-size: 10px;
  line-height: 1.6;
}
.distribution-center {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: 112px;
  height: 112px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 8px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #3185ee, #50bce7);
  box-shadow: 0 17px 32px rgba(40, 127, 228, 0.25);
  transform: translate(-50%, -36%);
}
.distribution-center small,
.distribution-center span {
  font-size: 8px;
  opacity: 0.73;
}
.distribution-center strong {
  margin: 3px 0;
  font-size: 14px;
}
.monitor-track {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 11px;
}
.monitor-track span {
  padding: 12px 15px;
  border-radius: 5px;
  color: #557596;
  background: #eef6ff;
  font-size: 11px;
}
.result-section {
  padding: 112px 0 130px;
  background: #eef7ff;
}
.result-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);
}
.result-table-wrap table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.88);
}
.result-table-wrap th,
.result-table-wrap td {
  padding: 19px 22px;
  border-bottom: 1px solid #e1ebf5;
  color: #6d7e92;
  font-size: 11px;
  line-height: 1.55;
  text-align: left;
}
.result-table-wrap thead th {
  color: #47617e;
  background: #e3f0fd;
  font-size: 10px;
}
.result-table-wrap tbody th {
  color: #405873;
  font-weight: 600;
}
.result-table-wrap td strong {
  color: #267eec;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.outcome-grid article {
  min-height: 170px;
  padding: 25px;
  border-radius: 13px 4px 13px 4px;
  background: rgba(255, 255, 255, 0.68);
}
.outcome-grid span {
  color: #9bb0c7;
  font-size: 9px;
}
.outcome-grid strong {
  display: block;
  margin-top: 27px;
  color: #287fec;
  font-size: 22px;
}
.outcome-grid p {
  margin: 7px 0 0;
  color: #728298;
  font-size: 11px;
  line-height: 1.6;
}
.detail-summary-section {
  padding: 112px 0 126px;
}
.detail-summary-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 85px;
  align-items: center;
}
.summary-quote {
  padding: 48px;
  border-radius: 7px 20px 7px 20px;
  color: #fff;
  background: linear-gradient(135deg, #236fcf, #42aee3);
  box-shadow: 0 26px 55px rgba(37, 111, 203, 0.2);
}
.summary-quote > span {
  font-size: 10px;
  letter-spacing: 0.13em;
  opacity: 0.72;
}
.summary-quote blockquote {
  margin: 30px 0 0;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.55;
}
.summary-copy p {
  margin: 0 0 20px;
  color: #6d7e92;
  font-size: 14px;
  line-height: 1.85;
}
.summary-copy .primary-button {
  margin-top: 11px;
}
.related-section {
  padding: 108px 0 124px;
  background: #f2f7fd;
}
.related-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.related-heading > a {
  padding-bottom: 5px;
  border-bottom: 1px solid #91bce9;
  color: #287ce4;
  font-size: 12px;
  text-decoration: none;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.related-grid article {
  overflow: hidden;
  border-radius: 14px 5px 14px 5px;
  background: #fff;
  transition:
    transform 0.24s,
    box-shadow 0.24s;
}
.related-grid article:hover {
  box-shadow: 0 20px 40px rgba(60, 119, 189, 0.13);
  transform: translateY(-5px);
}
.related-grid img {
  width: 100%;
  height: 175px;
  display: block;
  object-fit: cover;
}
.related-grid article > div {
  padding: 24px;
}
.related-grid span {
  color: #3b85dd;
  font-size: 9px;
}
.related-grid h3 {
  min-height: 56px;
  margin: 12px 0 0;
  color: #3b4f67;
  font-size: 17px;
  line-height: 1.55;
}
.related-grid strong {
  display: block;
  margin-top: 18px;
  color: #277fec;
  font-size: 23px;
}
.related-grid p {
  margin: 5px 0 0;
  color: #7b8a9c;
  font-size: 10px;
}
.detail-cta {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.detail-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;
}
.detail-cta-content {
  padding: 75px 0;
  text-align: center;
}
.detail-cta-content > p {
  margin: 0;
  color: #237df0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.detail-cta-content h2 {
  margin: 17px 0 0;
  color: #2f75cc;
  font-size: clamp(32px, 3.2vw, 50px);
  letter-spacing: -0.045em;
  line-height: 1.3;
}
.detail-cta-content .primary-button {
  margin-top: 29px;
}
@media (max-width: 980px) {
  .detail-hero-grid,
  .overview-grid,
  .solution-detail-heading,
  .detail-summary-grid {
    grid-template-columns: 1fr;
  }
  .detail-hero-grid {
    gap: 25px;
    padding-top: 58px;
  }
  .detail-hero-result {
    justify-self: center;
  }
  .section-heading {
    position: static;
  }
  .overview-grid {
    gap: 40px;
  }
  .baseline-grid {
    grid-template-columns: 1fr 1fr;
  }
  .baseline-grid article.wide {
    grid-column: span 2;
  }
  .solution-detail-heading {
    gap: 14px;
  }
  .solution-detail-heading > p {
    margin: 0;
  }
  .question-framework,
  .phase-section,
  .distribution-section,
  .monitor-section {
    grid-template-columns: 60px 1fr;
  }
  .question-grid,
  .phase-list,
  .distribution-map,
  .monitor-track {
    grid-column: 2;
  }
  .outcome-grid {
    grid-template-columns: 1fr 1fr;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr;
  }
  .related-grid article:last-child {
    display: none;
  }
}
@media (max-width: 600px) {
  .breadcrumb {
    overflow-x: auto;
    white-space: nowrap;
  }
  .detail-hero-copy h1 {
    font-size: clamp(37px, 10vw, 49px);
  }
  .detail-hero-copy > p {
    font-size: 14px;
  }
  .detail-hero-result {
    aspect-ratio: 0.95;
  }
  .result-orbit {
    width: 310px;
    height: 310px;
  }
  .result-orbit > div {
    width: 150px;
    height: 150px;
    border-width: 10px;
  }
  .result-orbit strong {
    font-size: 34px;
  }
  .result-side {
    min-width: 117px;
    padding: 13px;
  }
  .result-side strong {
    font-size: 20px;
  }
  .overview-section,
  .baseline-section,
  .solution-detail-section,
  .result-section,
  .detail-summary-section,
  .related-section {
    padding-top: 76px;
    padding-bottom: 86px;
  }
  .objective-box {
    padding: 24px 20px;
  }
  .baseline-grid {
    grid-template-columns: 1fr;
  }
  .baseline-grid article.wide {
    grid-column: auto;
  }
  .baseline-conclusion {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .question-framework,
  .phase-section,
  .distribution-section,
  .monitor-section {
    grid-template-columns: 38px 1fr;
    gap: 15px;
    padding: 55px 0;
  }
  .subsection-index {
    font-size: 38px;
  }
  .question-grid {
    grid-template-columns: 1fr;
  }
  .distribution-map {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 70px;
  }
  .distribution-map article {
    min-height: 170px;
  }
  .distribution-center {
    top: 0;
  }
  .monitor-track span {
    padding: 10px;
  }
  .outcome-grid {
    grid-template-columns: 1fr;
  }
  .outcome-grid article {
    min-height: 130px;
  }
  .summary-quote {
    padding: 34px 24px;
  }
  .summary-quote blockquote {
    font-size: 22px;
  }
  .related-heading {
    align-items: start;
    flex-direction: column;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  .related-grid article:last-child {
    display: block;
  }
  .detail-cta {
    min-height: 390px;
  }
  .detail-cta-content h2 br {
    display: none;
  }
}
</style>
