<template>
  <div class="contract-case-page">
    <div class="decor decor--blue" />
    <div class="decor decor--purple" />

    <section class="case-hero" :style="{ backgroundImage: `url(${bannerImg})` }">
      <div class="case-container">
        <div class="case-hero__content">
          <h1>{{ $t('casePages.contract.heroTitle') }}</h1>
          <p>
            {{ $t('casePages.contract.heroDesc') }}
          </p>
        </div>
      </div>
    </section>

    <section class="case-tabs">
      <div class="case-container">
        <button
          v-for="tab in localizedTabs"
          :key="tab.id"
          type="button"
          class="tab-item"
          :class="{ 'tab-active': activeTab === tab.id }"
          @click="scrollToSection(tab.id)"
        >
          {{ tab.label }}
        </button>
      </div>
    </section>

    <main class="case-main">
      <section id="scenarios" class="case-section">
        <div class="case-container">
          <div class="section-heading">
            <h2>{{ $t('casePages.contract.scenariosTitle') }}</h2>
            <p>{{ $t('casePages.contract.scenariosDesc') }}</p>
          </div>
          <div class="case-scenario-grid">
            <article class="case-feature-card scenario-card">
              <div class="case-feature-card__visual case-feature-card__visual--illustration visual-blue">
                <svg viewBox="0 0 400 200" fill="none">
                  <circle cx="320" cy="40" r="60" fill="#3b82f6" opacity="0.1" />
                  <circle cx="80" cy="160" r="40" fill="#6366f1" opacity="0.1" />
                  <g transform="translate(120, 40)">
                    <rect x="0" y="20" width="120" height="140" rx="8" fill="#e0e7ff" stroke="#3b82f6" stroke-width="2" />
                    <line x1="20" y1="45" x2="100" y2="45" stroke="#3b82f6" stroke-width="2" opacity="0.3" />
                    <line x1="20" y1="65" x2="100" y2="65" stroke="#3b82f6" stroke-width="2" opacity="0.3" />
                    <line x1="20" y1="85" x2="80" y2="85" stroke="#3b82f6" stroke-width="2" opacity="0.3" />
                    <rect x="15" y="10" width="120" height="140" rx="8" fill="#c7d2fe" stroke="#3b82f6" stroke-width="2" />
                    <line x1="35" y1="35" x2="115" y2="35" stroke="#3b82f6" stroke-width="2" opacity="0.5" />
                    <line x1="35" y1="55" x2="115" y2="55" stroke="#3b82f6" stroke-width="2" opacity="0.5" />
                    <line x1="35" y1="75" x2="95" y2="75" stroke="#3b82f6" stroke-width="2" opacity="0.5" />
                    <rect x="30" y="0" width="120" height="140" rx="8" fill="white" stroke="#3b82f6" stroke-width="2" />
                    <line x1="50" y1="25" x2="130" y2="25" stroke="#3b82f6" stroke-width="2" />
                    <line x1="50" y1="45" x2="130" y2="45" stroke="#3b82f6" stroke-width="2" />
                    <line x1="50" y1="65" x2="110" y2="65" stroke="#3b82f6" stroke-width="2" />
                    <circle cx="135" cy="25" r="8" fill="#10b981" />
                    <path d="M 131 25 L 134 28 L 139 22" stroke="white" stroke-width="2" stroke-linecap="round" />
                    <circle cx="135" cy="45" r="8" fill="#10b981" />
                    <path d="M 131 45 L 134 48 L 139 42" stroke="white" stroke-width="2" stroke-linecap="round" />
                    <circle cx="135" cy="65" r="8" fill="#f59e0b" />
                    <line x1="131" y1="65" x2="139" y2="65" stroke="white" stroke-width="2" stroke-linecap="round" />
                  </g>
                  <g class="magnifier" transform="translate(60, 60)">
                    <circle cx="25" cy="25" r="20" fill="none" stroke="#3b82f6" stroke-width="3" />
                    <line x1="40" y1="40" x2="55" y2="55" stroke="#3b82f6" stroke-width="4" stroke-linecap="round" />
                    <circle cx="25" cy="25" r="12" fill="#3b82f6" opacity="0.1" />
                  </g>
                </svg>
              </div>
              <div class="case-feature-card__head">
                <span class="case-icon-gradient">
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414A1 1 0 0119 9.414V19a2 2 0 01-2 2z" />
                  </svg>
                </span>
                <h3>{{ $t('casePages.contract.scenarios.0.title') }}</h3>
              </div>
              <p>{{ $t('casePages.contract.scenarios.0.desc') }}</p>
            </article>

            <article class="case-feature-card scenario-card">
              <div class="case-feature-card__visual case-feature-card__visual--illustration visual-purple">
                <svg viewBox="0 0 400 200" fill="none">
                  <circle cx="100" cy="50" r="50" fill="#8b5cf6" opacity="0.1" />
                  <circle cx="300" cy="150" r="60" fill="#ec4899" opacity="0.1" />
                  <g transform="translate(140, 30)">
                    <path d="M 60 0 L 120 20 L 120 80 Q 120 120 60 140 Q 0 120 0 80 L 0 20 Z" fill="#ddd6fe" stroke="#8b5cf6" stroke-width="2" opacity="0.6" />
                    <path d="M 60 15 L 105 30 L 105 75 Q 105 105 60 120 Q 15 105 15 75 L 15 30 Z" fill="#c4b5fd" stroke="#8b5cf6" stroke-width="2" opacity="0.8" />
                    <path d="M 60 30 L 90 40 L 90 70 Q 90 90 60 100 Q 30 90 30 70 L 30 40 Z" fill="white" stroke="#8b5cf6" stroke-width="2" />
                    <rect x="48" y="55" width="24" height="20" rx="2" fill="#8b5cf6" />
                    <path d="M 52 55 L 52 48 Q 52 42 60 42 Q 68 42 68 48 L 68 55" fill="none" stroke="#8b5cf6" stroke-width="3" />
                    <circle cx="60" cy="65" r="3" fill="white" />
                  </g>
                  <g class="risk-dots">
                    <circle cx="80" cy="100" r="6" fill="#ef4444" />
                    <circle cx="80" cy="100" r="10" fill="#ef4444" opacity="0.3" />
                    <circle cx="320" cy="80" r="6" fill="#f59e0b" />
                    <circle cx="320" cy="80" r="10" fill="#f59e0b" opacity="0.3" />
                    <circle cx="280" cy="140" r="6" fill="#10b981" />
                    <circle cx="280" cy="140" r="10" fill="#10b981" opacity="0.3" />
                  </g>
                </svg>
              </div>
              <div class="case-feature-card__head">
                <span class="case-icon-gradient">
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                </span>
                <h3>{{ $t('casePages.contract.scenarios.1.title') }}</h3>
              </div>
              <p>{{ $t('casePages.contract.scenarios.1.desc') }}</p>
            </article>

            <article class="case-feature-card scenario-card">
              <div class="case-feature-card__visual case-feature-card__visual--illustration visual-green">
                <svg viewBox="0 0 400 200" fill="none">
                  <circle cx="350" cy="60" r="50" fill="#10b981" opacity="0.1" />
                  <circle cx="50" cy="140" r="40" fill="#14b8a6" opacity="0.1" />
                  <g transform="translate(80, 40)">
                    <rect x="0" y="0" width="100" height="130" rx="6" fill="white" stroke="#10b981" stroke-width="2" />
                    <text x="10" y="20" font-size="10" fill="#10b981" font-weight="bold">V1.0</text>
                    <line x1="15" y1="35" x2="85" y2="35" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
                    <line x1="15" y1="50" x2="85" y2="50" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
                    <line x1="15" y1="65" x2="75" y2="65" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
                    <line x1="15" y1="80" x2="85" y2="80" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
                    <line x1="15" y1="95" x2="65" y2="95" stroke="#10b981" stroke-width="1.5" opacity="0.5" />
                    <line x1="15" y1="50" x2="85" y2="50" stroke="#ef4444" stroke-width="2" />
                  </g>
                  <g transform="translate(220, 40)">
                    <rect x="0" y="0" width="100" height="130" rx="6" fill="white" stroke="#14b8a6" stroke-width="2" />
                    <text x="10" y="20" font-size="10" fill="#14b8a6" font-weight="bold">V2.0</text>
                    <line x1="15" y1="35" x2="85" y2="35" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
                    <line x1="15" y1="50" x2="85" y2="50" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
                    <line x1="15" y1="65" x2="85" y2="65" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
                    <line x1="15" y1="80" x2="75" y2="80" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
                    <line x1="15" y1="95" x2="85" y2="95" stroke="#14b8a6" stroke-width="1.5" opacity="0.5" />
                    <rect x="13" y="63" width="74" height="4" fill="#10b981" opacity="0.3" />
                  </g>
                  <g class="compare-arrow" transform="translate(185, 90)">
                    <path d="M 0 15 L 20 15 M 15 10 L 20 15 L 15 20" stroke="#6366f1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                  </g>
                  <g class="diff-tags">
                    <rect x="90" y="48" width="30" height="8" rx="2" fill="#ef4444" opacity="0.2" />
                    <text x="95" y="54" font-size="8" fill="#ef4444" font-weight="bold">{{ $t('casePages.contract.deleted') || '删除' }}</text>
                    <rect x="230" y="63" width="30" height="8" rx="2" fill="#10b981" opacity="0.2" />
                    <text x="235" y="69" font-size="8" fill="#10b981" font-weight="bold">{{ $t('casePages.contract.added') || '新增' }}</text>
                  </g>
                </svg>
              </div>
              <div class="case-feature-card__head">
                <span class="case-icon-gradient">
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                  </svg>
                </span>
                <h3>{{ $t('casePages.contract.scenarios.2.title') }}</h3>
              </div>
              <p>{{ $t('casePages.contract.scenarios.2.desc') }}</p>
            </article>
          </div>
        </div>
      </section>

      <section id="solution" class="case-section solution-section">
        <div class="case-container">
          <div class="section-heading">
            <h2>{{ $t('casePages.contract.solutionTitle') }}</h2>
            <p>{{ $t('casePages.contract.solutionDesc') }}</p>
          </div>
          <div class="solution-grid">
            <div class="solution-column">
              <div class="column-title column-title--danger">
                <span>
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M4.93 19h14.14c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.2 16c-.77 1.33.19 3 1.73 3z" />
                  </svg>
                </span>
                <h3>{{ $t('casePages.contract.challengeTitle') }}</h3>
              </div>
              <article v-for="item in localizedProblems" :key="item.title" class="solution-item solution-item--danger">
                <span class="solution-icon">
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                  </svg>
                </span>
                <div>
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.desc }}</p>
                </div>
              </article>
            </div>

            <div class="solution-column">
              <div class="column-title column-title--primary">
                <span>
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </span>
                <h3>{{ $t('casePages.contract.abilityTitle') }}</h3>
              </div>
              <article v-for="item in localizedSolutions" :key="item.title" class="solution-item solution-item--primary">
                <span class="solution-icon">
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                  </svg>
                </span>
                <div>
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.desc }}</p>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>

      <section id="highlights" class="case-section">
        <div class="case-container">
          <div class="section-heading">
            <h2>{{ $t('casePages.contract.highlightsTitle') }}</h2>
            <p>{{ $t('casePages.contract.highlightsDesc') }}</p>
          </div>
          <div class="case-highlight-grid">
            <article v-for="(item, index) in localizedHighlights" :key="item.title" class="case-highlight-card">
              <span class="highlight-num">{{ index + 1 }}</span>
              <div>
                <h3>{{ item.title }}</h3>
                <p>{{ item.desc }}</p>
              </div>
            </article>
          </div>
        </div>
      </section>
    </main>

  </div>
</template>

<script>
export default {
  name: 'ContractCase',
  data() {
    return {
      activeTab: 'scenarios',
      bannerImg: require('@/assets/image/bgimg.png'),
      tabs: [
        { id: 'scenarios', label: '应用场景' },
        { id: 'solution', label: '解决方案' },
        { id: 'highlights', label: '项目亮点' }
      ],
      scenarios: [
        {
          title: '业务合同初审',
          desc: '自动解析购销、服务、租赁、合作类通用业务合同，逐条对标企业风控红线快速筛查风险点，输出初审意见，减轻法务基础审核工作量。',
          icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414A1 1 0 0119 9.414V19a2 2 0 01-2 2z',
          visualClass: 'visual-blue'
        },
        {
          title: '复杂商事合同深度风控',
          desc: '针对投融资、知识产权、工程、保密竞业等高风险专项合同，联动完整法条与司法判例开展多层级风险推演，输出完整风控评估文档。',
          icon: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z',
          visualClass: 'visual-purple'
        },
        {
          title: '多方合同版本比对修订',
          desc: '自动识别甲乙双方多轮修改稿件差异，区分新增、删减、修改条款，高亮标注风险变更内容，辅助商务谈判与法务复核。',
          icon: 'M8 7h12m0 0l-4-4m4 4l-4 4M16 17H4m0 0l4 4m-4-4l4-4',
          visualClass: 'visual-green'
        }
      ],
      problems: [
        {
          title: '文件信息割裂分散',
          desc: '合同、法规、历史判例、内部模板散落在不同存储渠道，无统一检索入口，审核时需跨文件反复核对。',
          icon: 'M4 7v10c0 2.21 3.58 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.58 4 8 4s8-1.79 8-4M4 7c0-2.21 3.58-4 8-4s8 1.79 8 4'
        },
        {
          title: '风控经验难以留存复用',
          desc: '资深法务的审查要点、谈判底线、风险处置经验仅存于个人，人员交接后容易出现标准不统一。',
          icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'
        },
        {
          title: '人工审核耗时长、标准化弱',
          desc: '海量合同逐条人工审阅消耗大量人力，不同法务审核尺度参差不齐，紧急签约场景响应慢。',
          icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
        }
      ],
      solutions: [
        {
          title: '多源文件统一归集解析',
          desc: '批量上传 PDF、Word、扫描件合同，OCR 识别图文内容，统一结构化抽取交易主体、价款、履约、违约等关键信息。',
          icon: 'M4 7v10c0 2.21 3.58 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.58 4 8 4s8-1.79 8-4'
        },
        {
          title: '全条款 AI 智能编审修正',
          desc: '分层扫描合同全部条款，对标法律法规与企业内控规则标记高中低三级风险，配套标准化合规替换条款。',
          icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414A1 1 0 0119 9.414V19a2 2 0 01-2 2z'
        },
        {
          title: '法务知识库沉淀管理',
          desc: '将企业标准模板、审查清单、判例、内部风控制度转化为结构化知识库，沉淀企业专属法务资产。',
          icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253'
        },
        {
          title: '自然语言法务智能问答',
          desc: '支持业务、法务人员以口语化提问查询合规要求、条款写法、风险后果，即时输出专业解答与参考条款。',
          icon: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z'
        }
      ],
      highlights: [
        {
          title: '分级风险自动标注，配套合规整改条款',
          desc: '按重大、一般、提示三级划分风险，精准定位风险对应原文段落，每条风险同步匹配适配企业制度与现行法律的替换条款。'
        },
        {
          title: '多版本合同差异智能比对溯源',
          desc: '上传新旧合同、甲乙双方往来稿件，系统自动高亮新增、删减、变更条款，生成可追溯对比台账。'
        },
        {
          title: '全格式合同兼容识别，扫描件精准解析',
          desc: '支持 Word、PDF、图片扫描件、盖章影像文件上传，内置高精度 OCR 图文识别，覆盖存量和增量合同文件。'
        },
        {
          title: '企业法务知识一键复用，审查标准统一',
          desc: '内置企业专属合同模板库、风控红线清单、行业判例库，新员工可直接复用成熟审查标准。'
        }
      ]
    }
  },
  computed: {
    localizedTabs() {
      return this.tabs.map(tab => ({
        ...tab,
        label: this.$t(`casePages.contract.tabs.${tab.id}`)
      }))
    },
    localizedProblems() {
      return this.getLocalizedList(this.problems, 'casePages.contract.challenges')
    },
    localizedSolutions() {
      return this.getLocalizedList(this.solutions, 'casePages.contract.abilities')
    },
    localizedHighlights() {
      return this.getLocalizedList(this.highlights, 'casePages.contract.highlights')
    }
  },
  mounted() {
    this.$nextTick(() => {
      const scroller = this.getScrollContainer()
      this.resetScrollTop(scroller)
      scroller.addEventListener('scroll', this.handlePageScroll, { passive: true })
      this.handlePageScroll()
    })
  },
  beforeDestroy() {
    this.getScrollContainer().removeEventListener('scroll', this.handlePageScroll)
  },
  methods: {
    getLocalizedList(list, keyPrefix) {
      return list.map((item, index) => ({
        ...item,
        title: this.$t(`${keyPrefix}.${index}.title`),
        desc: this.$t(`${keyPrefix}.${index}.desc`)
      }))
    },
    getScrollContainer() {
      return document.getElementById('homeOut') || window
    },
    resetScrollTop(scroller) {
      if (scroller === window) {
        window.scrollTo(0, 0)
      } else {
        scroller.scrollTop = 0
      }
    },
    getElementTopInScroller(element, scroller) {
      if (scroller === window) {
        return element.getBoundingClientRect().top + window.pageYOffset
      }
      return element.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop
    },
    getScrollerTop(scroller) {
      return scroller === window ? window.pageYOffset : scroller.scrollTop
    },
    scrollToSection(sectionName) {
      this.activeTab = sectionName
      const element = this.$el.querySelector(`#${sectionName}`)
      if (!element) return
      const scroller = this.getScrollContainer()
      const top = this.getElementTopInScroller(element, scroller)
      scroller.scrollTo({ top, behavior: 'smooth' })
    },
    handlePageScroll() {
      const scroller = this.getScrollContainer()
      const scrollerTop = this.getScrollerTop(scroller)
      const offsetTop = scrollerTop + 24
      const currentTab = this.tabs
        .map(tab => {
          const element = this.$el.querySelector(`#${tab.id}`)
          return element ? { id: tab.id, top: this.getElementTopInScroller(element, scroller) } : null
        })
        .filter(Boolean)
        .reverse()
        .find(tab => offsetTop >= tab.top)
      if (currentTab) this.activeTab = currentTab.id
    },
    handleContact() {
      this.$message.info('感谢您的关注，我们将尽快与您联系')
    }
  }
}
</script>

<style scoped>
.contract-case-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.contract-case-page *,
.contract-case-page *::before,
.contract-case-page *::after {
  box-sizing: border-box;
}

.contract-case-page h1,
.contract-case-page h2,
.contract-case-page h3,
.contract-case-page h4,
.contract-case-page p {
  margin-top: 0;
  font-family: inherit;
}

.case-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.decor {
  position: absolute;
  border-radius: 999px;
  filter: blur(64px);
  opacity: 0.12;
  pointer-events: none;
}

.decor--blue {
  top: 80px;
  left: 40px;
  width: 256px;
  height: 256px;
  background: linear-gradient(135deg, #60a5fa, #a855f7);
}

.decor--purple {
  top: 400px;
  right: 80px;
  width: 320px;
  height: 320px;
  background: linear-gradient(135deg, #c084fc, #3b82f6);
}

.case-hero {
  position: relative;
  min-height: min(446px, calc(100vw * 446 / 1551));
  padding: 120px 0 86px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.case-hero__content {
  max-width: 900px;
}

.case-hero h1 {
  margin: 0 0 24px;
  color: #111827;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
}

.case-hero p {
  max-width: 980px;
  margin: 0;
  color: #4b5563;
  font-size: 20px;
  line-height: 1.75;
}

.case-tabs {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.case-tabs .case-container {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
}

.tab-item {
  height: 100%;
  padding: 12px 16px;
  color: #374151;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.tab-item:hover,
.tab-active {
  color: #3b82f6;
  background: #eff6ff;
}

.case-main {
  padding-bottom: 80px;
}

.case-section {
  position: relative;
  padding: 72px 0;
}

.solution-section {
  background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
}

.section-heading {
  margin-bottom: 48px;
  text-align: center;
}

.section-heading h2 {
  margin: 0 0 16px;
  color: #111827;
  font-size: 40px;
  font-weight: 800;
}

.section-heading p {
  margin: 0;
  color: #4b5563;
  font-size: 20px;
}

.case-scenario-grid,
.solution-grid,
.case-highlight-grid {
  display: grid;
  gap: 32px;
}

.contract-case-page .case-scenario-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important;
}

.solution-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.contract-case-page .case-highlight-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 32px !important;
}

.contract-case-page .case-feature-card,
.solution-item,
.contract-case-page .case-highlight-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transition: all 0.3s ease;
}

.contract-case-page .case-feature-card:hover,
.solution-item:hover,
.contract-case-page .case-highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.contract-case-page .case-feature-card {
  display: block !important;
  overflow: hidden !important;
}

.case-feature-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
}

.case-feature-card__visual svg {
  width: 84px;
  height: 84px;
}

.case-feature-card__visual--illustration {
  position: relative;
  height: 192px;
  overflow: hidden;
}

.case-feature-card__visual--illustration > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.magnifier,
.compare-arrow {
  transition: transform 0.3s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.scenario-card:hover .magnifier {
  transform: scale(1.1);
}

.scenario-card:hover .compare-arrow {
  transform: translateX(8px);
}

.scenario-card:hover .risk-dots {
  animation: case-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.scenario-card:hover .diff-tags {
  animation: case-bounce 1s infinite;
}

.visual-blue {
  color: #2563eb;
  background: linear-gradient(135deg, #eff6ff, #e0e7ff);
}

.visual-purple {
  color: #7c3aed;
  background: linear-gradient(135deg, #faf5ff, #fce7f3);
}

.visual-green {
  color: #0d9488;
  background: linear-gradient(135deg, #f0fdf4, #ccfbf1);
}

@keyframes case-pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes case-bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.case-feature-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32px 32px 0;
  margin-bottom: 16px;
}

.case-feature-card h3,
.solution-item h4,
.case-highlight-card h3 {
  margin: 0;
  color: #111827;
  font-size: 20px;
  font-weight: 700;
}

.case-feature-card p,
.solution-item p,
.case-highlight-card p {
  margin: 0;
  color: #4b5563;
  line-height: 1.7;
}

.case-feature-card > p {
  padding: 0 32px 32px;
}

.case-icon-gradient,
.solution-icon,
.column-title span,
.highlight-num {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border-radius: 12px;
}

.case-icon-gradient {
  width: 40px;
  height: 40px;
}

.case-icon-gradient svg {
  width: 20px;
  height: 20px;
}

.column-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.column-title span {
  width: 48px;
  height: 48px;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.column-title--danger span {
  background: linear-gradient(135deg, #ef4444, #f97316);
}

.column-title h3 {
  margin: 0;
  color: #111827;
  font-size: 26px;
  font-weight: 800;
}

.column-title svg,
.solution-icon svg {
  width: 24px;
  height: 24px;
}

.solution-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.solution-item {
  display: flex;
  gap: 20px;
  padding: 24px;
  border-left: 4px solid #60a5fa;
}

.solution-item--danger {
  border-left-color: #f87171;
}

.solution-item--danger .solution-icon {
  background: linear-gradient(135deg, #fee2e2, #ffedd5);
  color: #dc2626;
}

.solution-icon {
  width: 56px;
  height: 56px;
}

.solution-item h4 {
  margin-bottom: 8px;
}

.contract-case-page .case-highlight-card {
  display: flex !important;
  gap: 18px;
  padding: 32px;
}

.highlight-num {
  width: 48px;
  height: 48px;
  font-size: 22px;
  font-weight: 800;
}

.case-highlight-card h3 {
  margin-bottom: 12px;
}

.case-cta {
  padding: 80px 0;
  color: #fff;
  background: linear-gradient(90deg, #334155, #1e293b);
}

.case-cta__inner {
  max-width: 896px;
  text-align: center;
}

.case-cta h2 {
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 800;
}

.case-cta p {
  margin: 0 0 32px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
}

.case-cta button {
  padding: 16px 32px;
  color: #2563eb;
  font-size: 18px;
  font-weight: 700;
  background: #fff;
  border: 0;
  border-radius: 8px;
  transition: all 0.2s;
}

.case-cta button:hover {
  background: #eff6ff;
}

@media (max-width: 1024px) {
  .case-scenario-grid,
  .solution-grid,
  .case-highlight-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .case-hero {
    padding: 72px 0 56px;
  }

  .case-hero h1 {
    font-size: 36px;
  }

  .case-hero p,
  .section-heading p,
  .case-cta p {
    font-size: 16px;
  }

  .case-tabs {
    overflow-x: auto;
  }

  .case-tabs .case-container {
    gap: 12px;
    min-width: max-content;
  }

  .section-heading h2,
  .case-cta h2 {
    font-size: 30px;
  }

  .case-feature-card__head,
  .case-feature-card > p,
  .solution-item,
  .case-highlight-card {
    padding: 24px;
  }
}
</style>
