<template>
  <div class="home-main-page">
    <div class="bg-orb bg-orb--1"></div>
    <div class="bg-orb bg-orb--2"></div>
    <div class="bg-orb bg-orb--3"></div>
    <div class="bg-orb bg-orb--4"></div>
    <!-- 首页头部 -->
    <section class="home-hero">
      <div class="home-hero__inner animate-in">
        <div class="hero-title-row">
          <h1 :class="{ 'home-hero__title--english': isEnglish }">{{ $t('home.heroTitle') }}</h1>
        </div>
        <h2 v-if="$t('home.heroSubtitle')">{{ $t('home.heroSubtitle') }}</h2>
        <!-- <p>{{ $t('home.heroSlogan') }}</p> -->
        <div class="hero-actions">
          <button type="button" class="use-btn" @click="goSolution">{{ $t('home.solutionsBtn') }}</button>
          <div class="outline-btn" @click="contactSales">{{ $t('home.contactSalesBtn') }}</div>
        </div>
      </div>
    </section>
    <!-- AI+解决方案 -->
    <section id="ai-solutions-section" class="ai-solution-section" @mouseenter="stopSolutionCarousel" @mouseleave="startSolutionCarousel">
      <div class="ai-solution-inner">
        <h2 class="section-title">{{ $t('home.aiSolutionsTitle') }}</h2>
        <div class="solution-carousel" :class="{ 'is-rotating': isSolutionRotating }">
          <button type="button" class="carousel-arrow carousel-arrow--prev" @click="prevSolution">
            <i class="el-icon-arrow-left"></i>
          </button>
          <div class="carousel-stage">
            <div
              v-for="item in visibleSolutionCards"
              :key="item.card.title"
              class="solution-card"
              :class="`solution-card--slot-${item.slot}`"
              :style="{ background: item.card.bg, boxShadow: item.card.shadow }"
              @mouseenter="stopSolutionCarousel"
              @mouseleave="startSolutionCarousel"
              @click="setSolutionIndex(item.index)"
            >
              <button
                v-if="item.card.scenarioPath"
                type="button"
                class="solution-card__scenario-link"
                @click.stop="goSolutionScenario(item.card.scenarioPath)"
              >
                {{ $i18n && $i18n.locale === 'en-US' ? 'Scenarios→' : item.card.scenarioLabel }}
              </button>
              <div class="solution-card__front">
                <div class="solution-card__icon" v-html="item.card.icon"></div>
                <h3>{{ item.card.title }}</h3>
                <span></span>
                <p>{{ item.card.subtitle }}</p>
              </div>
              <div class="solution-card__detail">
                <strong>{{ item.card.detailTitle }}</strong>
                <em>{{ item.card.detailSubTitle }}</em>
                <p>{{ item.card.detailDesc }}</p>
                <ul>
                  <li v-for="metric in item.card.metrics" :key="metric.label">
                    <b>{{ metric.value }}</b>
                    <small>{{ metric.label }}</small>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <button type="button" class="carousel-arrow carousel-arrow--next" @click="nextSolution">
            <i class="el-icon-arrow-right"></i>
          </button>
        </div>
        <div class="carousel-dots">
          <button
            v-for="(item, index) in localizedSolutionCards"
            :key="item.title"
            type="button"
            :class="{ active: index === currentSolutionIndex }"
            @click="setSolutionIndex(index)"
          ></button>
        </div>
      </div>
    </section>
    <!-- 成功案例 -->
    <section id="cases-section" class="case-section">
      <div class="case-inner">
        <div class="case-head">
          <h2 class="section-title">{{ $t('home.successCasesTitle') }}</h2>
          <!-- <button type="button" class="case-more" @click="goCases">
            {{ $t('home.moreCases') }}
            <i class="el-icon-right"></i>
          </button> -->
        </div>

        <div class="case-grid">
          <article
            v-for="item in localizedCaseCards"
            :key="item.title"
            class="case-card"
          >
            <div class="case-card__inner">
              <div class="case-card__face case-card__front">
                <img :src="item.image" :alt="item.title">
              </div>
              <div class="case-card__face case-card__back">
                <div class="case-card__content">
                  <h3>{{ item.title }}</h3>
                  <h4>{{ item.name }}</h4>
                  <p>{{ item.desc }}</p>
                  <p class="case-card__summary">{{ item.summary }}</p>
                </div>
              </div>
            </div>
          </article>
        </div>

        <div class="case-cta" :style="{ backgroundImage: `url(${caseCtaBg})` }">
          <div>
            <h2>{{ $t('home.ctaTitle') }}</h2>
            <p>{{ $t('home.ctaDesc') }}</p>
          </div>
          <button type="button" @click="contactSales">{{ $t('home.contactUsArrow') }}</button>
        </div>
      </div>
    </section>
    <!-- 企业动态 -->

    <section id="news" class="news-section">
      <div class="news-glow news-glow--left"></div>
      <div class="news-glow news-glow--right"></div>
      <div class="news-glow news-glow--center"></div>

      <div class="news-inner">
        <div class="news-head">
          <h2 class="section-title">{{ $t('home.companyNewsTitle') }}</h2>
          <button type="button" class="case-more" @click="goNews">{{ $t('home.viewMore') }}</button>
        </div>

        <div class="news-list">
          <article
            v-for="(item, index) in localizedNewsList"
            :key="item.id"
            class="news-card"
            :class="{ 'news-card-active': index === activeNewsIndex }"
            @mouseenter="activeNewsIndex = index"
            @mouseleave="activeNewsIndex = 0"
            @click="goNews"
          >
            <div class="news-card-glow"></div>
            <div class="news-card-border"></div>
            <div class="news-card__content">
              <div class="news-card__meta">
                <span :class="item.tagClass">{{ item.tag }}</span>
                <time>{{ item.date }}</time>
              </div>
              <h2>{{ item.title }}</h2>
              <p>{{ item.desc }}</p>
            </div>
          </article>
        </div>
      </div>
    </section>

    <Talk></Talk>
  </div>
</template>

<script>
import { reqNewsList } from '@/api/newsapi/newsapi'
import Talk from '@/views/homePage/dialog/talk/index.vue'

export default {
  name: 'HomeMainPage',
  components: {
    Talk
  },
  data() {
    return {
      solutionTimer: null,
      solutionAnimationTimer: null,
      isSolutionRotating: false,
      currentSolutionIndex: 0,
      activeNewsIndex: 0,
      caseCtaBg: require('./img/case/case-hero-bg.jpg'),
      caseCards: [
        {
          name: '中国中铁 · 慧投标智能体',
          title: '智慧工程',
          desc: 'AI驱动投标全流程，从标书解读到报价编制，中标率提升显著',
          summary: '项目概况:为中国中铁打造慧投标智能体+慧途大模型，建立联合创新中心与AI应用创新平台。覆盖投标全流程——标书智能解读、资审自动匹配、报价辅助决策、标书智能编制，实现投标工作从人海战术到AI赋能的跨越式升级。',
          image: require('./img/case/china-railway-bidding-case.jpg'),
          imageEn: require('./img/case/china-railway-huitobid-case-en.png')
        },
        {
          name: '南宁林业局',
          title: '智慧采伐',
          desc: '从采伐审批到科学监管——空间智能融合，让数据真正服务林区治理。',
          summary: '项目概况:为南宁林业局打造林业空间采伐智审系统，融合GIS空间分析、卫星遥感、无人机与传感器多源数据，实现空间与属性数据的一体化智能审核。采伐范围自动核验合规性，审查报告一键生成，审批周期从数天压缩至分钟级，人机协同让每一步决策都有据可依。',
          image: require('./img/case/nanning-forestry-case.jpg'),
          imageEn: require('./img/case/nanning-forestry-smart-harvesting-case-en.png')
        },
        {
          name: '北港大数据',
          title: 'AI赋能，数智升级',
          desc: '从投标到决策，从合同到管理——全链路AI智能体，让业务快人一步',
          summary: '项目概况:为北港大数据打造覆盖招投标、投研分析、合同审查的全链路AI智能体解决方案。以投标智能体引擎实现标书秒级生成、中标率显著提升；以投策智能体引擎将数周研报压缩至分钟级，支撑精准投资决策；以合同智能审查将审查效率提升60%以上，风险漏检率降至3%以下。三款产品无缝衔接，真正打通企业从业务承接到风险管控的数字化闭环',
          image: require('./img/case/beigang-big-data-case.jpg'),
          imageEn: require('./img/case/beibu-gulf-port-big-data-case-en.png')
        }
      ],
      newsList: [],
      solutionCards: [
        {
          title: '群智协作',
          subtitle: '多智能体协同',
          detailTitle: '群智协作',
          detailSubTitle: '多智能体协同',
          detailDesc: '多个AI智能体按角色分工，自主完成信息采集、数据分析、逻辑推理与结论生成的全流程协作。支持动态任务分配与上下文共享，将复杂业务决策从"人串联"变为"智能体并行"，大幅压缩高知识密度工作的完成周期。',
          metrics: [
            { value: '10倍+', label: '知识工作效率提升' },
            { value: '多源', label: '信息实时融合' },
            { value: '高复杂度', label: '决策场景适配' }
          ],
          bg: 'linear-gradient(145deg, rgba(208, 236, 249, 0.72) 0%, rgba(168, 216, 244, 0.64) 44%, rgba(124, 196, 238, 0.58) 100%)',
          shadow: '0 18px 54px rgba(80, 150, 220, 0.2), 0 4px 16px rgba(80, 150, 220, 0.08)',
          scenarioLabel: '投策智能体→',
          scenarioPath: '/homePage/agentStore/decisionCase',
          icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="18" r="6"/><circle cx="10" cy="34" r="5"/><circle cx="38" cy="34" r="5"/><line x1="20" y1="23" x2="13" y2="30"/><line x1="28" y1="23" x2="35" y2="30"/><circle cx="36" cy="14" r="3.5"/><circle cx="12" cy="14" r="3.5"/></svg>'
        },
        {
          title: '空间觉醒',
          subtitle: 'GIS智能分析',
          detailTitle: '空间觉醒',
          detailSubTitle: 'GIS智能分析',
          detailDesc: '融合地理信息系统、卫星遥感影像、无人机航拍等多维空间数据，AI自动识别地物边界、叠加分析空间关系、校验合规约束。将传统需要人工逐层比对的地理空间判断，升级为分钟级自动完成的空间智能决策。',
          metrics: [
            { value: '分钟级', label: '空间分析' },
            { value: '90%+', label: '违规识别准确率' },
            { value: '70%', label: '人力成本节省' }
          ],
          bg: 'linear-gradient(145deg, rgba(200, 238, 218, 0.72) 0%, rgba(152, 216, 184, 0.64) 44%, rgba(104, 194, 150, 0.58) 100%)',
          shadow: '0 18px 54px rgba(60, 150, 100, 0.18), 0 4px 16px rgba(60, 150, 100, 0.08)',
          icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="24" r="18"/><ellipse cx="24" cy="24" rx="10" ry="18"/><line x1="6" y1="24" x2="42" y2="24"/><path d="M8 16h32"/><path d="M8 32h32"/><path d="M24 6v36"/></svg>'
        },
        {
          title: '先见一步',
          subtitle: '智能预测引擎',
          detailTitle: '先见一步',
          detailSubTitle: '智能预测引擎',
          detailDesc: '融合机理模型与数据驱动模型，通过实时采集设备运行参数，AI自主识别早期异常特征并精准预测剩余使用寿命。在故障真正发生前72小时发出预警，让运维从"事后抢修"转变为"事前防御"，最大化保障生产连续性。',
          metrics: [
            { value: '95%+', label: '故障预警准确率' },
            { value: '60%', label: '非计划停机减少' },
            { value: '72小时', label: '预测提前量' }
          ],
          bg: 'linear-gradient(145deg, rgba(214, 240, 224, 0.72) 0%, rgba(168, 222, 190, 0.64) 44%, rgba(122, 204, 158, 0.58) 100%)',
          shadow: '0 18px 54px rgba(60, 150, 100, 0.18), 0 4px 16px rgba(60, 150, 100, 0.08)',
          icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 38l10-12 8 6 10-16 8 10"/><polyline points="36,22 42,26 38,32"/><line x1="6" y1="40" x2="42" y2="40"/><path d="M6 8v32"/></svg>'
        },
        {
          title: '洞察入微',
          subtitle: '机器视觉检测',
          detailTitle: '洞察入微',
          detailSubTitle: '机器视觉检测',
          detailDesc: '基于深度学习的高速产线全幅面缺陷检测能力，覆盖表面处理、涂层喷涂、焊接装配等全流程质检环节。不是抽样检查，而是每一寸产品都经过AI逐像素比对，在毫秒级时间内完成缺陷识别与分类，确保出厂品质零妥协。',
          metrics: [
            { value: '毫秒级', label: '检测速度' },
            { value: '95%', label: '漏检率降低' },
            { value: '99.5%+', label: '识别准确率' }
          ],
          bg: 'linear-gradient(145deg, rgba(192, 222, 239, 0.72) 0%, rgba(136, 194, 224, 0.64) 44%, rgba(80, 166, 208, 0.58) 100%)',
          shadow: '0 18px 54px rgba(40, 110, 170, 0.18), 0 4px 16px rgba(40, 110, 170, 0.08)',
          icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 24s8-14 20-14 20 14 20 14-8 14-20 14S4 24 4 24z"/><circle cx="24" cy="24" r="7"/><circle cx="24" cy="24" r="3"/><line x1="24" y1="6" x2="24" y2="10"/><line x1="24" y1="38" x2="24" y2="42"/></svg>'
        },
        {
          title: '一问即达',
          subtitle: '智能问答知识库',
          detailTitle: '一问即达',
          detailSubTitle: '智能问答知识库',
          detailDesc: '基于企业私有知识库构建的AI问答引擎，支持自然语言直接查询业务数据、技术规范、制度文件。每条回答自动标注权威来源，信息可追溯、可验证。让专家级知识不再锁在文档里，而是像问同事一样即问即答。',
          metrics: [
            { value: '<3秒', label: '响应速度' },
            { value: '90%', label: '专家知识覆盖率' },
            { value: '5倍', label: '决策效率提升' }
          ],
          bg: 'linear-gradient(145deg, rgba(224, 208, 242, 0.72) 0%, rgba(200, 176, 230, 0.64) 44%, rgba(170, 142, 216, 0.58) 100%)',
          shadow: '0 18px 54px rgba(130, 80, 180, 0.18), 0 4px 16px rgba(130, 80, 180, 0.08)',
          icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="8" width="36" height="28" rx="4"/><path d="M6 16h36"/><circle cx="24" cy="28" r="3"/><path d="M18 28h1"/><path d="M29 28h1"/><path d="M18 42h12"/></svg>'
        },
        {
          title: '全程守护',
          subtitle: '设备智能监控',
          detailTitle: '全程守护',
          detailSubTitle: '设备智能监控',
          detailDesc: '为每台设备构建独立监控策略，通过三维可视化实时呈现运行状态。AI自动识别异常并高亮定位故障点，同步输出详细诊断建议和排查步骤。将运维人员从"盯屏找问题"解放出来，让系统主动告诉你问题在哪、怎么修。',
          metrics: [
            { value: '1000+', label: '监控点位支持' },
            { value: '<1秒', label: '告警响应' },
            { value: '40%', label: '运维成本降低' }
          ],
          bg: 'linear-gradient(145deg, rgba(251, 230, 200, 0.72) 0%, rgba(245, 205, 160, 0.64) 44%, rgba(238, 180, 120, 0.58) 100%)',
          shadow: '0 18px 54px rgba(190, 130, 50, 0.18), 0 4px 16px rgba(190, 130, 50, 0.08)',
          icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="10" width="32" height="22" rx="3"/><path d="M18 36h12"/><line x1="24" y1="32" x2="24" y2="36"/><path d="M16 20l4 4 6-8"/><circle cx="38" cy="12" r="4"/></svg>'
        },
        {
          title: '触文即懂',
          subtitle: '智能文档解析',
          detailTitle: '触文即懂',
          detailSubTitle: '智能文档解析',
          detailDesc: '支持PDF、Word、扫描件等多种格式一键解析，AI自动提取关键条款、资质要求、评分细则等核心信息并结构化呈现。不是简单的OCR文字识别，而是理解文档语义、判断信息重要性、标注风险点，让冗长文档的核心内容一目了然。',
          metrics: [
            { value: '98%+', label: '解析准确率' },
            { value: '85%', label: '人工核查时间减少' },
            { value: '零遗漏', label: '关键信息' }
          ],
          bg: 'linear-gradient(145deg, rgba(200, 214, 242, 0.72) 0%, rgba(158, 180, 230, 0.64) 44%, rgba(116, 146, 216, 0.58) 100%)',
          shadow: '0 18px 54px rgba(60, 80, 160, 0.18), 0 4px 16px rgba(60, 80, 160, 0.08)',
          scenarioLabel: '合同智能审查→',
          scenarioPath: '/homePage/agentStore/contractCase',
          icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6h16l10 10v26a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z"/><polyline points="28,6 28,16 38,16"/><line x1="14" y1="24" x2="34" y2="24"/><line x1="14" y1="31" x2="30" y2="31"/></svg>'
        },
        {
          title: '端侧即算',
          subtitle: '边缘AI推理',
          detailTitle: '端侧即算',
          detailSubTitle: '边缘AI推理',
          detailDesc: '将AI推理能力部署在生产现场边缘侧，通过轻量化算法实现毫秒级实时决策。数据无需回传云端，在本地即可完成从感知到判断的全流程，确保数据不出厂、响应零延迟。冗余架构设计保障7×24小时持续运行，产线检测永不中断。',
          metrics: [
            { value: '<50ms', label: '推理延迟' },
            { value: '本地', label: '数据处理不出厂' },
            { value: '7×24h', label: '持续运行' }
          ],
          bg: 'linear-gradient(145deg, rgba(216, 204, 240, 0.72) 0%, rgba(184, 164, 226, 0.64) 44%, rgba(150, 124, 212, 0.58) 100%)',
          shadow: '0 18px 54px rgba(90, 60, 160, 0.18), 0 4px 16px rgba(90, 60, 160, 0.08)',
          icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="10" y="10" width="28" height="28" rx="4"/><rect x="16" y="16" width="16" height="16" rx="2"/><line x1="18" y1="6" x2="18" y2="10"/><line x1="24" y1="6" x2="24" y2="10"/><line x1="30" y1="6" x2="30" y2="10"/><line x1="18" y1="38" x2="18" y2="42"/><line x1="24" y1="38" x2="24" y2="42"/><line x1="30" y1="38" x2="30" y2="42"/></svg>'
        }
      ]
    }
  },
  computed: {
    showTalkVisible() {
      return this.$store.state.product.showTalk
    },
    isEnglish() {
      return this.$i18n && this.$i18n.locale === 'en-US'
    },
    localizedSolutionCards() {
      const keyMap = {
        '群智协作': 'collaboration',
        '空间觉醒': 'spatial',
        '先见一步': 'predictive',
        '洞察入微': 'vision',
        '一问即达': 'qa',
        '全程守护': 'protection',
        '触文即懂': 'document',
        '端侧即算': 'edge'
      }
      const metricKeys = ['first', 'second', 'third']
      return this.solutionCards.map((card) => {
        const key = keyMap[card.title]
        if (!key) return card
        return {
          ...card,
          title: this.$t(`home.solutionCards.${key}.title`),
          subtitle: this.$t(`home.solutionCards.${key}.subtitle`),
          detailTitle: this.$t(`home.solutionCards.${key}.detailTitle`),
          detailSubTitle: this.$t(`home.solutionCards.${key}.detailSubTitle`),
          detailDesc: this.$t(`home.solutionCards.${key}.detailDesc`),
          metrics: card.metrics.map((metric, index) => {
            const metricKey = metricKeys[index]
            if (!metricKey) return metric
            return {
              ...metric,
              value: this.$t(`home.solutionCards.${key}.metrics.${metricKey}.value`),
              label: this.$t(`home.solutionCards.${key}.metrics.${metricKey}.label`)
            }
          })
        }
      })
    },
    localizedCaseCards() {
      const keys = ['railway', 'forestry', 'beigang']
      const isEn = this.$i18n && this.$i18n.locale === 'en-US'
      return this.caseCards.map((card, index) => {
        const key = keys[index]
        if (!key) return card
        return {
          ...card,
          name: this.$t(`home.cases.${key}.name`),
          title: this.$t(`home.cases.${key}.title`),
          desc: this.$t(`home.cases.${key}.desc`),
          summary: this.$t(`home.cases.${key}.summary`),
          image: isEn && card.imageEn ? card.imageEn : card.image
        }
      })
    },
    localizedNewsList() {
      const isEnglish = this.$i18n && this.$i18n.locale === 'en-US'
      return this.newsList.map((item) => {
        const tag = isEnglish
          ? (item.tagEn || item.tagZh || this.$t('home.news.tag'))
          : (item.tagZh || item.tagEn || this.$t('home.news.tag'))
        const title = isEnglish
          ? (item.titleEn || item.titleZh || '')
          : (item.titleZh || item.titleEn || '')
        const desc = isEnglish
          ? (item.descEn || item.descZh || '')
          : (item.descZh || item.descEn || '')
        const date = isEnglish
          ? (item.dateEn || item.dateZh || '')
          : (item.dateZh || item.dateEn || '')

        return {
          ...item,
          tag,
          title,
          desc,
          date
        }
      })
    },
    visibleSolutionCards() {
      const slots = [-3, -2, -1, 0, 1, 2, 3]
      const len = this.localizedSolutionCards.length
      return slots.map((slot) => {
        const index = (this.currentSolutionIndex + slot + len) % len
        return {
          slot,
          index,
          card: this.localizedSolutionCards[index]
        }
      })
    }
  },
  watch: {
    showTalkVisible(value) {
      if (value) {
        this.stopSolutionCarousel()
      } else {
        this.startSolutionCarousel()
      }
    }
  },
  mounted() {
    this.startSolutionCarousel()
    this.getHomeNewsList()
  },
  beforeDestroy() {
    this.stopSolutionCarousel()
    if (this.solutionAnimationTimer) {
      window.clearTimeout(this.solutionAnimationTimer)
      this.solutionAnimationTimer = null
    }
  },
  methods: {
    navigateTo(path) {
      if (this.$route.path === path) return
      this.$router.push(path).catch((error) => {
        if (!error || error.name !== 'NavigationDuplicated') {
          throw error
        }
      })
    },
    goSolution() {
      const target = this.$el && this.$el.querySelector('#ai-solutions-section')
      if (!target) return
      target.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      })
    },
    goSolutionScenario(path) {
      this.navigateTo(path)
    },
    contactSales() {
      this.$store.commit('setShowTalk', true)
    },
    goCases() {
      this.navigateTo('/homePage/agentStore')
    },
    goNews() {
      this.navigateTo('/homePage/news')
    },
    buildHomeNewsParams() {
      return {
        url_link: window.location.href,
        current_page: '1',
        page_size: '2',
        title: '',
        article_type: '',
        status: '1'
      }
    },
    getNewsTagClass(index) {
      return index % 2 === 0 ? 'news-tag--blue' : 'news-tag--green'
    },
    normalizeHomeNewsItem(row, index) {
      return {
        id: row.id,
        tagClass: this.getNewsTagClass(index),
        tagZh: row.article_type_zh || row.article_type || '',
        tagEn: row.article_type_en || '',
        dateZh: row.publish_time_zh || row.publish_time || row.publishTime || '',
        dateEn: row.publish_time_en || '',
        titleZh: row.title_zh || row.title || '',
        titleEn: row.title_en || '',
        descZh: row.summary_zh || row.summary || row.desc || row.description || '',
        descEn: row.summary_en || ''
      }
    },
    getResponseList(res) {
      if (Array.isArray(res.data)) return res.data
      if (res.data && Array.isArray(res.data.data)) return res.data.data
      if (res.data && Array.isArray(res.data.list)) return res.data.list
      if (Array.isArray(res.list)) return res.list
      return []
    },
    async getHomeNewsList() {
      try {
        const res = await reqNewsList(this.buildHomeNewsParams())
        if (res && (res.status === true || res.status === 'true')) {
          this.newsList = this.getResponseList(res)
            .slice(0, 2)
            .map((item, index) => this.normalizeHomeNewsItem(item, index))
        }
      } catch (error) {
        this.newsList = []
      }
    },

    nextSolution() {
      this.switchSolution(1)
    },
    prevSolution() {
      this.switchSolution(-1)
    },
    setSolutionIndex(index) {
      if (index === this.currentSolutionIndex) return
      this.switchSolution(index - this.currentSolutionIndex)
      this.restartSolutionCarousel()
    },
    switchSolution(step) {
      if (this.solutionAnimationTimer) {
        window.clearTimeout(this.solutionAnimationTimer)
      }
      this.isSolutionRotating = false
      this.$nextTick(() => {
        this.isSolutionRotating = true
        this.solutionAnimationTimer = window.setTimeout(() => {
          this.isSolutionRotating = false
          this.solutionAnimationTimer = null
        }, 720)
      })
      this.currentSolutionIndex = (this.currentSolutionIndex + step + this.solutionCards.length) % this.solutionCards.length
    },
    startSolutionCarousel() {
      if (this.solutionTimer) return
      this.solutionTimer = window.setInterval(this.prevSolution, 2200)
    },
    stopSolutionCarousel() {
      if (!this.solutionTimer) return
      window.clearInterval(this.solutionTimer)
      this.solutionTimer = null
    },
    restartSolutionCarousel() {
      this.stopSolutionCarousel()
      this.startSolutionCarousel()
    }
  }
}
</script>

<style scoped lang="scss">
.home-main-page {
  min-height: 100vh;
  background-color: #f0f7ff !important;
  background-image: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%, #f5f8ff 100%) !important;
  color: #111827;
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
}

.home-main-page > :not(.bg-orb) {
  position: relative;
  z-index: 1;
}

.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

.bg-orb--1 {
  width: 400px;
  height: 400px;
  background: #3b82f6;
  top: -100px;
  left: -100px;
}

.bg-orb--2 {
  width: 500px;
  height: 500px;
  background: #3b82f6;
  bottom: -150px;
  right: -150px;
}

.bg-orb--3 {
  width: 300px;
  height: 300px;
  background: #ec4899;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg-orb--4 {
  width: 350px;
  height: 350px;
  background: #f59e0b;
  bottom: 30%;
  right: 20%;
}

body.dark-theme .home-main-page {
  background: #0f172a !important;
}

body.dark-theme .bg-orb {
  opacity: 0.4;
}

.home-hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 96px;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin-top: 90px;
  text-align: center;

  h1 {
    margin: 0;
    color: #111827;
    font-size: 72px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .home-hero__title--english {
    font-size: clamp(40px, 5vw, 58px);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  h2 {
    margin: 20px 0 0;
    font-size: 72px;

    font-weight: 800;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  p {
    margin: 28px auto 0;
    // max-width: 760px;
    color: #4b5563;
    font-size: 18px;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.08em;
  }
}

.hero-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .home-hero__inner .home-hero__title--english {
    font-size: clamp(32px, 9vw, 48px);
    white-space: normal;
  }
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}

.use-btn,
.outline-btn {
  min-width: 128px;
  height: 48px;
  padding: 0 32px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.use-btn {
  border: 0;
  color: #fff;
  background: #000;
  box-shadow: 0 12px 28px rgba(37, 90, 255, 0.22);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(37, 90, 255, 0.3);
  }
}

.outline-btn {
  // border: 1px solid rgba(37, 90, 255, 0.24);
  color: #000;
  // background: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background: #fff;
    transform: translateY(-2px);
  }
}

.ai-solution-section {
  position: relative;
  padding: 60px 24px 110px;
  scroll-margin-top: 90px;
  overflow: hidden;
  background: transparent;
}

.ai-solution-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.section-title {
  margin: 0 0 32px;
  color: #111827;
  font-size: 32px;
  line-height: 1.3;
  font-weight: 800;
}

.solution-carousel {
  position: relative;
  overflow: visible;
}

.carousel-stage {
  position: relative;
  min-height: 430px;
  perspective: 1200px;
  overflow: visible;
}

.solution-carousel.is-rotating {
  .solution-card {
    transition-duration: 1.05s;
  }
}

.solution-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 31%;
  min-height: 330px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  cursor: pointer;
  color: rgba(30, 40, 60, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transform: translateX(-50%);
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.05s ease, filter 1.05s ease;
  box-sizing: border-box;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.48), transparent 42%);
    pointer-events: none;
  }

  h3 {
    position: relative;
    z-index: 1;
    margin: 24px 0 8px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 2px;
  }

  span {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 2px;
    margin-bottom: 12px;
    border-radius: 1px;
    background: rgba(30, 40, 60, 0.2);
  }

  p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(30, 40, 60, 0.6);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 1px;
  }

  &:hover {
    filter: brightness(1.05);
  }

  &:hover .solution-card__front {
    opacity: 0;
    transform: translateY(-12px) scale(0.94);
  }

  &:hover .solution-card__detail {
    background-color: #fff;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.solution-card__front {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.28s ease;
}

.solution-card__scenario-link {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  padding: 5px 9px;
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transform: translateY(-4px);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.solution-card:hover .solution-card__scenario-link {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.solution-card__scenario-link:hover {
  color: #1e40af;
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.solution-card__icon {
  position: relative;
  z-index: 1;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(20, 70, 130, 0.82);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(6px);

  ::v-deep svg {
    width: 64px;
    height: 64px;
  }
}

.solution-card__detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 26px 24px 24px;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #1f2937;
  text-align: left;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: all 0.25s ease;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    display: none;
  }

  strong {
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  em {
    margin-bottom: 12px;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
    font-style: normal;
    font-weight: 700;
  }

  p {
    margin: 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.62;
    letter-spacing: 0;
  }

  ul {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  li {
    min-width: 0;
    min-height: 74px;
    padding: 9px 6px 8px;
    border: 1px solid rgba(186, 220, 255, 0.72);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(240, 249, 255, 0.82);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.06);
    text-align: center;

    b {
      display: block;
      max-width: 100%;
      color: #2563eb;
      font-size: 22px;
      line-height: 1.12;
      font-weight: 800;
      letter-spacing: -0.01em;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
    }

    small {
      display: block;
      max-width: 100%;
      margin-top: 7px;
      color: #64748b;
      font-size: 11px;
      line-height: 1.2;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    &::before {
      display: none;
    }
  }
}

.solution-card--slot-0 {
  z-index: 7;
  opacity: 1;
  transform: translateX(-50%) scale(1) rotateY(0);
}

.solution-card--slot--1 {
  z-index: 6;
  opacity: 0.72;
  filter: blur(0.6px);
  transform: translateX(-100%) translateY(28px) scale(0.82) rotateY(9deg);
}

.solution-card--slot-1 {
  z-index: 6;
  opacity: 0.72;
  filter: blur(0.6px);
  transform: translateX(0%) translateY(28px) scale(0.82) rotateY(-9deg);
}

.solution-card--slot--2 {
  z-index: 5;
  opacity: 0.38;
  filter: blur(2px);
  transform: translateX(-145%) translateY(54px) scale(0.66) rotateY(16deg);
}

.solution-card--slot-2 {
  z-index: 5;
  opacity: 0.38;
  filter: blur(2px);
  transform: translateX(45%) translateY(54px) scale(0.66) rotateY(-16deg);
}

.solution-card--slot--3 {
  z-index: 4;
  opacity: 0.16;
  filter: blur(4px);
  transform: translateX(-188%) translateY(76px) scale(0.54) rotateY(22deg);
  pointer-events: none;
}

.solution-card--slot-3 {
  z-index: 4;
  opacity: 0.16;
  filter: blur(4px);
  transform: translateX(88%) translateY(76px) scale(0.54) rotateY(-22deg);
  pointer-events: none;
}

.carousel-arrow {
  position: absolute;
  top: 44%;
  z-index: 8;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: all 0.25s ease;

  &:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  }
}

.carousel-arrow--prev {
  left: -20px;
}

.carousel-arrow--next {
  right: -20px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;

  button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.16);
    cursor: pointer;
    transition: all 0.25s ease;

    &.active {
      width: 28px;
      background: #5b8def;
    }
  }
}

.case-section {
  position: relative;
  padding: 96px 24px 112px;
  background: transparent;
}

.case-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

.case-more {
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2563eb;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  transition: color 0.2s ease, transform 0.2s ease;

  &:hover {
    color: #1d4ed8;
    transform: translateX(4px);
  }
}

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

.case-card {
  min-height: 620px;
  border-radius: 24px;
  perspective: 1400px;
}

.case-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-card:hover .case-card__inner {
  transform: rotateY(180deg);
}

.case-card__face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 24px 60px rgba(37, 99, 235, 0.12);
}

.case-card__front {
  background: #eef7ff;

  img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.case-card:hover .case-card__front img {
  transform: scale(1.06);
}

.case-card__back {
  transform: rotateY(180deg);
  display: flex;
  color: #fff;
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.96), rgba(15, 23, 42, 0.98));

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 16%, rgba(96, 165, 250, 0.32), transparent 32%),
      radial-gradient(circle at 80% 86%, rgba(139, 92, 246, 0.24), transparent 34%);
    pointer-events: none;
  }
}

.case-card__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 40px 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
  }

  h3 {
    margin: 0 0 16px;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 800;
  }

  h4 {
    margin: 0 0 22px;
    color: #e0f2fe;
    font-size: 25px;
    line-height: 1.35;
    font-weight: 700;
  }

  p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 1.72;
  }
}

.case-card__summary {
  opacity: 0.82;
  font-size: 16px !important;
  line-height: 1.68 !important;
}

.case-cta {
  min-height: 168px;
  margin-top: 64px;
  padding: 42px 48px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px rgba(37, 99, 235, 0.12);

  h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 34px;
    line-height: 1.25;
    font-weight: 800;
  }

  p {
    margin: 0;
    color: rgba(17, 24, 39, 0.72);
    font-size: 17px;
    font-weight: 600;
  }

  button {
    flex-shrink: 0;
    height: 44px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #111827;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: transform 0.2s ease, background 0.2s ease;

    &:hover {
      background: #1f2937;
      transform: translateY(-2px);
    }
  }
}

.news-section {
  position: relative;
  padding: 96px 24px 112px;
  overflow: hidden;
  background: transparent;
}

.news-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.42;
  pointer-events: none;
}

.news-glow--left {
  top: 48px;
  left: 48px;
  width: 288px;
  height: 288px;
  background: linear-gradient(135deg, #dbeafe, #e9d5ff);
}

.news-glow--right {
  right: 80px;
  bottom: 80px;
  width: 320px;
  height: 320px;
  background: linear-gradient(135deg, #e9d5ff, #dbeafe);
}

.news-glow--center {
  top: 48%;
  left: 50%;
  width: 380px;
  height: 380px;
  background: #d8b4fe;
  opacity: 0.25;
  transform: translate(-50%, -50%);
}

.news-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

.news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

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

.news-card {
  position: relative;
  min-height: 164px;
  padding: 42px 48px;
  border-radius: 28px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;

  &:hover,
  &.news-card-active {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px rgba(59, 130, 246, 0.14);

    .news-card-glow,
    .news-card-border {
      opacity: 1;
    }
  }
}

.news-card-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle at 48% 50%, rgba(139, 92, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 32%, rgba(236, 72, 153, 0.08) 60%, transparent 100%);
  filter: blur(8px);
  transition: opacity 0.45s ease;
  animation: newsGlowPulse 12s ease-in-out infinite;
}

.news-card-border {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 3px;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.62) 24%, rgba(59, 130, 246, 0.62) 50%, rgba(236, 72, 153, 0.58) 76%, transparent 100%);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.45s ease;
  animation: newsBorderFlow 4s linear infinite;
}

.news-card__content {
  position: relative;
  z-index: 2;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;

  span {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
  }

  time {
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
  }
}

.news-tag--blue {
  color: #1d4ed8;
  background: #dbeafe;
}

.news-tag--green {
  color: #047857;
  background: #d1fae5;
}

.news-card h2 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 25px;
  line-height: 1.35;
  font-weight: 800;
}

.news-card p {
  margin: 0;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.7;
}

@keyframes newsGlowPulse {
  0%, 100% {
    transform: scale(1);
    filter: blur(8px);
  }

  50% {
    transform: scale(1.12);
    filter: blur(16px);
  }
}

@keyframes newsBorderFlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 220% 50%;
  }
}

@keyframes carouselRingSpin {
  0% {
    transform: rotateZ(0deg) scale(0.985);
  }

  45% {
    transform: rotateZ(2.5deg) scale(1.015);
  }

  100% {
    transform: rotateZ(0deg) scale(1);
  }
}

@keyframes centerCardSpin {
  0% {
    transform: translateX(-50%) scale(0.92) rotateY(-18deg) rotateZ(-4deg);
  }

  55% {
    transform: translateX(-50%) scale(1.04) rotateY(10deg) rotateZ(3deg);
  }

  100% {
    transform: translateX(-50%) scale(1) rotateY(0deg) rotateZ(0deg);
  }
}

@keyframes iconRoundSpin {
  0% {
    transform: rotate(0deg) scale(0.9);
  }

  70% {
    transform: rotate(360deg) scale(1.08);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@media (max-width: 900px) {
  .ai-solution-section {
    padding: 40px 16px 72px;
  }

  .carousel-stage {
    height: 360px;
  }

  .solution-card {
    width: 72%;
    height: 330px;
  }

  .solution-card--slot--2,
  .solution-card--slot-2 {
    opacity: 0;
    pointer-events: none;
  }

  .carousel-arrow--prev {
    left: 0;
  }

  .carousel-arrow--next {
    right: 0;
  }

  .case-grid {
    grid-template-columns: 1fr;
  }

  .case-card {
    min-height: 460px;
  }

  .case-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 32px 24px;
  }

  .news-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .news-card {
    padding: 30px 24px;
  }
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
