<template>
  <div class="landing">
    <div class="space-bg"></div>
    <div ref="starsEl" class="stars" aria-hidden="true"></div>

    <nav class="navbar" :style="navbarStyle">
      <a href="#intro" class="logo-space" @click.prevent="scrollToSel('#intro')">
        <img class="logo-space-img" src="/logo.png" alt="" width="40" height="40" decoding="async" />
        <span class="logo-space-text">{{ data.logo_text || '宇恒一号' }}</span>
      </a>
      <div class="nav-links">
        <template v-for="(link, i) in data.nav_links" :key="i">
          <router-link v-if="isInternalRoute(link.url)" :to="link.url" class="nav-link-item">{{ link.label }}</router-link>
          <a
            v-else
            class="nav-link-item"
            :href="link.url || '#'"
            @click="onAnchorClick($event, link.url)"
          >{{ link.label }}</a>
        </template>
      </div>
    </nav>

    <div class="portal-shell home-portal-shell">
      <div class="portal-inner portal-inner--main">
        <main class="portal-main">
          <!-- 简介：前置，与宣传册同源 -->
          <div id="intro" class="portal-row-split portal-card home-lead intro-card">
            <div class="portal-preview-wrap">
              <h3 class="portal-block-title">产品简介</h3>
              <p class="portal-preview-tip">在右侧选择章节，此处即时展示正文（与完整宣传册同源）</p>
              <div class="portal-preview-body">
                <HomeBrochurePreview :topic="selectedBrochureTopic" @update:topic="selectedBrochureTopic = $event" />
              </div>
            </div>
            <div class="portal-news-panel">
              <h3 class="portal-block-title">宣传册 · 快速入口</h3>
              <div class="portal-news-scroll-wrap">
                <ul class="portal-news-list">
                  <li v-for="(b, idx) in brochureEntryLinks" :key="b.topic">
                    <button
                      type="button"
                      class="portal-news-link-btn"
                      :class="{ active: selectedBrochureTopic === b.topic }"
                      @click="selectedBrochureTopic = b.topic"
                    >{{ b.label }}</button>
                    <span class="portal-news-date">{{ formatBrochureListDate(idx) }}</span>
                  </li>
                </ul>
              </div>
              <router-link
                :to="'/brochure/' + selectedBrochureTopic"
                class="portal-read-all"
              >当前章节完整页 →</router-link>
            </div>
          </div>

          <!-- 视频：紧随简介，放大展示 -->
          <section class="video-section home-lead-video portal-card" id="videos">
            <div class="section-title section-title--lead">
              <h2>产品视频</h2>
              <p>以下为产品介绍视频，点击即可播放</p>
            </div>
            <div class="video-container">
              <div class="video-wrapper">
                <div v-if="activeVideo" class="video-card main-video">
                  <div
                    class="video-thumbnail main-thumb"
                    :style="mainVideoCoverStyle"
                    @click="openVideo(activeVideo)"
                  >
                    <div class="play-button">
                      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                    </div>
                  </div>
                  <div class="video-info">
                    <h3>{{ activeVideo.title }}</h3>
                    <p>{{ activeVideo.desc }}</p>
                  </div>
                </div>
              </div>
              <div class="video-sidebar">
                <div
                  v-for="v in promoVideos"
                  :key="v.id"
                  class="video-card small-video"
                  :class="{ 'is-active': activeVideo && activeVideo.id === v.id }"
                  @click="selectVideo(v)"
                >
                  <div
                    class="video-thumbnail small"
                    :style="{ backgroundImage: 'url(' + v.cover + ')', backgroundSize: 'cover', backgroundPosition: 'center' }"
                    @click.stop="openVideo(v)"
                  >
                    <div class="play-button small">
                      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                    </div>
                  </div>
                  <div class="video-info">
                    <h4>{{ v.title }}</h4>
                    <p>{{ v.desc }}</p>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section class="live-cta-section" id="live">
            <div class="live-cta-card">
              <div class="live-cta-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="36" height="36" focusable="false">
                  <path
                    fill="currentColor"
                    d="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z"
                  />
                </svg>
              </div>
              <div class="live-cta-copy">
                <h2 class="live-cta-title">{{ data.live_room_title || '视频直播' }}</h2>
                <p class="live-cta-desc">
                  直播由管理后台「视频直播开播」推送；开播后首页左上角自动出现画中画，也可进入全屏直播页。观看无需登录。
                </p>
              </div>
              <router-link to="/live" class="live-cta-btn">进入直播页</router-link>
            </div>
          </section>

          <div class="features-space home-features" id="features">
            <div v-for="(f, i) in data.features" :key="i" class="feature-space">
              <div class="feature-icon"><svg viewBox="0 0 24 24"><path :d="featureIconPath(i)"/></svg></div>
              <h3>{{ f.title }}</h3>
              <p>{{ f.desc }}</p>
            </div>
          </div>

    <!-- 统计数据（与 promotion/index.html 一致） -->
    <section class="stats-section portal-card-lite">
      <div class="stats-container">
        <div class="stat-item"><div class="stat-number">50万+</div><div class="stat-label">活跃用户</div></div>
        <div class="stat-item"><div class="stat-number">99.9%</div><div class="stat-label">服务可用性</div></div>
        <div class="stat-item"><div class="stat-number">8+</div><div class="stat-label">核心功能</div></div>
        <div class="stat-item"><div class="stat-number">7×24</div><div class="stat-label">技术支持</div></div>
      </div>
    </section>

    <section class="highlights-section">
      <div class="section-title">
        <h2>为什么选择宇恒一号</h2>
        <p>融合前沿 AI 技术，为您打造前所未有的智能体验</p>
      </div>
      <div class="highlight-grid">
        <div class="highlight-card" v-for="(h, i) in highlightCards" :key="i">
          <div class="highlight-icon"><svg viewBox="0 0 24 24"><path :d="h.icon"/></svg></div>
          <h3>{{ h.title }}</h3>
          <p>{{ h.desc }}</p>
          <router-link v-if="h.to" :to="h.to" class="card-jump-link">跳转宣传册：{{ h.linkLabel }} →</router-link>
        </div>
      </div>
    </section>

    <section class="scenarios-section" id="scenarios">
      <div class="section-title">
        <h2>适用场景</h2>
        <p>宇恒一号广泛应用于各行各业，助力数字化转型升级</p>
      </div>
      <div class="scenarios-grid">
        <div class="scenario-card" v-for="(s, i) in scenarioCards" :key="i">
          <div class="scenario-icon"><svg viewBox="0 0 24 24"><path :d="s.icon"/></svg></div>
          <div class="scenario-content">
            <h4>{{ s.title }}</h4>
            <p>{{ s.desc }}</p>
            <router-link v-if="s.to" :to="s.to" class="card-jump-link subtle">进入宣传册相关章节 →</router-link>
          </div>
        </div>
      </div>
      <div class="brochure-cta">
        <p>以下为宣传册各章节<strong>路由跳转</strong>（非仅展示，可点开逐页浏览）</p>
        <div class="brochure-multi">
          <router-link v-for="b in brochureEntryLinks" :key="b.topic" :to="'/brochure/' + b.topic" class="brochure-chip">{{ b.label }}</router-link>
        </div>
        <router-link to="/brochure/company" class="brochure-btn">从第一章开始阅读</router-link>
      </div>
    </section>

    <section class="testimonials-section" id="testimonials">
      <div class="section-title">
        <h2>用户评价</h2>
        <p>听听来自各行业用户的心声</p>
      </div>
      <div class="testimonials-grid">
        <div class="testimonial-card" v-for="(t, i) in testimonials" :key="i">
          <p class="testimonial-text">"{{ t.text }}"</p>
          <div class="testimonial-author">
            <div class="author-avatar">{{ t.av }}</div>
            <div class="author-info">
              <h5>{{ t.name }}</h5>
              <span>{{ t.role }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="faq-section" id="faq">
      <div class="section-title">
        <h2>常见问题</h2>
        <p>关于宇恒一号，您可能想了解这些</p>
      </div>
      <div class="faq-container">
        <div
          v-for="(item, i) in faqList"
          :key="i"
          class="faq-item"
          :class="{ active: openFaq === i }"
        >
          <div class="faq-question" @click="toggleFaq(i)">
            <h4>{{ item.q }}</h4>
            <div class="faq-icon">+</div>
          </div>
          <div class="faq-answer"><p>{{ item.a }}</p></div>
        </div>
      </div>
    </section>

    <section class="partners-section">
      <h3>技术支持与合作</h3>
      <div class="partners-grid">
        <span class="partner-logo">成都宇信达智能科技</span>
        <span class="partner-logo">宇恒一号</span>
        <span class="partner-logo">AI 智能助手</span>
        <span class="partner-logo">智能解决方案</span>
      </div>
    </section>

    <section v-if="bodyBuilderBlocks.length" class="home-body-builder">
      <BlockRenderer :blocks="bodyBuilderBlocks" />
    </section>

    <section class="contact-section" id="contact">
      <div class="contact-aurora" aria-hidden="true">
        <span class="contact-aurora-blob contact-aurora-blob--a"></span>
        <span class="contact-aurora-blob contact-aurora-blob--b"></span>
      </div>
      <div class="contact-container">
        <header class="contact-head">
          <span class="contact-eyebrow">CONTACT</span>
          <h2 class="contact-title">联系我们</h2>
          <p class="contact-sub">有任何问题或建议，我们随时为您服务</p>
          <div class="contact-title-line" aria-hidden="true"></div>
        </header>
        <div class="contact-info contact-info-grid">
          <div class="contact-card">
            <div class="contact-card-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="28" height="28" focusable="false"><path fill="currentColor" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>
            </div>
            <h5 class="contact-card-label">公司地址</h5>
            <p class="contact-card-body">成都市金牛区华丰路217号<br>2栋2单元12层11号</p>
          </div>
          <div class="contact-card">
            <div class="contact-card-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="28" height="28" focusable="false"><path fill="currentColor" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>
            </div>
            <h5 class="contact-card-label">电子邮箱</h5>
            <a class="contact-card-link" href="mailto:1406339793@qq.com">1406339793@qq.com</a>
          </div>
          <div class="contact-card">
            <div class="contact-card-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="28" height="28" focusable="false"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54A6.98 6.98 0 0 0 19 12c0-3.87-3.13-7-7-7-1.54 0-2.98.5-4.15 1.35l1.44 1.44C11.21 7.18 11.62 7 12 7c2.76 0 5 2.24 5 5 0 .38-.18.79-.48 1.07l1.43 1.32z"/></svg>
            </div>
            <h5 class="contact-card-label">官方网站</h5>
            <a class="contact-card-link" href="https://yuheng.yuxindazhineng.com/" target="_blank" rel="noopener">yuheng.yuxindazhineng.com</a>
          </div>
        </div>
      </div>
    </section>
        </main>
      </div>

      <!-- 视口右侧悬停：关注我们（与主栏网格解耦，固定靠最右） -->
      <aside class="portal-aside portal-aside--fixed" id="social-follow" aria-label="关注我们">
        <div class="portal-aside-inner">
          <h3 class="portal-aside-title">关注我们</h3>
          <p class="portal-aside-hint">扫码或点击查看各平台账号</p>
          <div class="portal-aside-social">
            <button
              v-for="item in socialFollowItems"
              :key="item.id"
              type="button"
              class="portal-social-tile"
              @click="openSocialFollow(item)"
            >
              <span class="portal-social-tile-img">
                <img
                  :src="socialListImgSrc(item)"
                  :alt="item.label"
                  width="72"
                  height="72"
                  loading="lazy"
                  @error="onSocialFollowListImgError(item)"
                />
              </span>
              <span class="portal-social-tile-label">{{ item.label }}</span>
            </button>
          </div>
          <div class="portal-aside-download-row" role="group" aria-label="客户端下载">
            <a
              class="portal-aside-download"
              :href="downloadWindowsHref"
              :download="downloadWindowsFilename"
            >Windows 版下载</a>
            <a
              class="portal-aside-download portal-aside-download--secondary"
              :href="downloadAndroidHref"
              :download="downloadAndroidFilename"
            >安卓版下载</a>
          </div>
        </div>
      </aside>
    </div>

    <footer>
      <div class="footer-content">
        <div class="footer-logo">宇恒一号</div>
        <div class="footer-company">成都宇信达智能科技有限公司</div>
        <div class="footer-links">
          <a href="#intro" @click.prevent="scrollToSel('#intro')">首页</a>
          <a href="#features" @click.prevent="scrollToSel('#features')">功能特性</a>
          <a href="#scenarios" @click.prevent="scrollToSel('#scenarios')">应用场景</a>
          <router-link to="/brochure/company">宣传册</router-link>
          <router-link to="/live">直播</router-link>
          <a href="#faq" @click.prevent="scrollToSel('#faq')">常见问题</a>
          <a href="#contact" @click.prevent="scrollToSel('#contact')">联系我们</a>
          <a href="#videos" @click.prevent="scrollToSel('#videos')">产品视频</a>
        </div>
        <p>{{ data.footer_text || '© 2024 宇恒一号 YUHENG ONE // 成都宇信达智能科技有限公司' }}</p>
        <p class="beian">成都宇信达智能科技有限公司 <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">蜀ICP备2025134957号-1</a></p>
      </div>
    </footer>

    <div class="video-modal" :class="{ active: videoModalOpen }" @click.self="closeVideoModal">
      <div class="modal-content">
        <span class="close-modal" @click="closeVideoModal">&times;</span>
        <video v-if="videoModalOpen" controls playsinline autoplay :src="modalVideoSrc" class="modal-video" />
        <p class="modal-caption">{{ modalCaption }}</p>
      </div>
    </div>

    <div class="social-qr-modal" :class="{ active: socialQrOpen }" @click.self="closeSocialFollow">
      <div class="social-qr-inner">
        <button type="button" class="close-modal" aria-label="关闭" @click="closeSocialFollow">&times;</button>
        <h4 class="social-qr-title">{{ socialQrTitle }}</h4>
        <div class="social-qr-frame">
          <img
            v-show="socialQrOpen && socialQrImage"
            :src="socialQrImage"
            :alt="socialQrTitle"
            class="social-qr-img"
            @error="onSocialQrImgError"
          />
        </div>
        <a
          v-if="socialQrHref"
          class="social-qr-out"
          :href="socialQrHref"
          target="_blank"
          rel="noopener noreferrer"
        >打开 {{ socialQrTitle }} 平台 →</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { apiBase } from '../config'
import BlockRenderer from '../components/blocks/BlockRenderer.vue'
import HomeBrochurePreview from '../components/HomeBrochurePreview.vue'
import { buildPromotionVideos, buildPromotionVideosAsync } from '../data/promotionVideos'
import { PROMOTION_SOCIAL_FOLLOW } from '../data/promotionSocial'
import { getCachedWebSiteId, fetchWebRoutes } from '../api/webPages'

const socialFollowItems = PROMOTION_SOCIAL_FOLLOW

/** 首页门户：宣传册预览当前章节（与 brochureContent 同源） */
const selectedBrochureTopic = ref('company')

/** 「关注我们」列表图标：必须用响应式候选下标驱动 :src，勿在 @error 里只改 DOM，否则重渲染会回到 candidates[0] 裂图 */
const socialListImgIdx = reactive(Object.fromEntries(PROMOTION_SOCIAL_FOLLOW.map((x) => [x.id, 0])))
function socialListImgSrc(item) {
  const list = item.imageCandidates || []
  if (!list.length) return ''
  const i = Math.min(socialListImgIdx[item.id] ?? 0, list.length - 1)
  return list[i]
}

const scrollY = ref(0)
const starsEl = ref(null)

function addStars() {
  const host = starsEl.value
  if (!host) return
  host.innerHTML = ''
  const w = window.innerWidth
  const h = window.innerHeight
  const n = Math.min(220, Math.max(80, Math.floor((w * h) / 10000)))
  const frag = document.createDocumentFragment()
  for (let i = 0; i < n; i++) {
    const star = document.createElement('span')
    star.className = 'star'
    const r = Math.random()
    const size = r < 0.82 ? 1 : r < 0.97 ? 2 : 3
    star.style.width = `${size}px`
    star.style.height = `${size}px`
    star.style.left = `${Math.random() * 100}%`
    star.style.top = `${Math.random() * 100}%`
    star.style.animationDuration = `${2.2 + Math.random() * 4}s`
    star.style.animationDelay = `${Math.random() * 5}s`
    frag.appendChild(star)
  }
  host.appendChild(frag)
}
const openFaq = ref(0)
/** 官网 site_id（bootstrap 已拉路由时此处已有值；产品视频：静态优先，否则 promotion-media API） */
const webSiteId = ref(getCachedWebSiteId() || '')
const promoVideos = ref(buildPromotionVideos(webSiteId.value))
async function refreshPromoVideos() {
  let id = webSiteId.value || ''
  // 避免首屏 watch 早于 /web/routes：无 site_id 时无法回退 API，会死盯静态 404
  if (!id) {
    await fetchWebRoutes()
    id = getCachedWebSiteId() || ''
    if (id) webSiteId.value = id
  }
  try {
    promoVideos.value = await buildPromotionVideosAsync(id)
  } catch {
    promoVideos.value = buildPromotionVideos(id)
  }
}
watch(webSiteId, refreshPromoVideos, { immediate: true })
const activeVideo = ref(null)
watch(
  promoVideos,
  (list) => {
    if (!list.length) return
    const cur = activeVideo.value
    if (!cur || !list.some((v) => v.id === cur.id)) activeVideo.value = list[0]
  },
  { immediate: true, deep: true }
)
const videoModalOpen = ref(false)
const modalVideoSrc = ref('')
const modalCaption = ref('')

const socialQrOpen = ref(false)
const socialQrTitle = ref('')
const socialQrImage = ref('')
const socialQrHref = ref('')
/** 二维码大图：与列表相同的多 URL 回退 */
const socialQrCandidates = ref([])
const socialQrCandidateIdx = ref(0)

const defaultData = () => ({
  logo_text: '宇恒一号',
  /** 侧栏直链：请将安装包放到 web/promotion/downloads/ 下同名文件，部署脚本会同步到站点 */
  download_windows_url: '/promotion/downloads/yuheng-windows.zip',
  download_android_url: '/promotion/downloads/yuheng-android.apk',
  nav_links: [
    { label: '产品简介', url: '#intro' },
    { label: '产品视频', url: '#videos' },
    { label: '直播', url: '/live' },
    { label: '功能特性', url: '#features' },
    { label: '应用场景', url: '#scenarios' },
    { label: '宣传册', url: '/brochure/company' },
    { label: '关注我们', url: '#social-follow' },
    { label: '联系我们', url: '#contact' }
  ],
  title: '宇恒一号',
  subtitle: '',
  description: '',
  download_text: '下载',
  download_url: '#',
  platforms: [],
  version: '',
  launch_year: '发布日期：以官网为准',
  badge_text: '完全免费',
  privacy_text: '隐私保护',
  features: [
    { title: '星际导航', desc: '先进的 AI 导航系统，精准定位您的需求，引领探索之旅' },
    { title: '量子同步', desc: '跨维度数据同步技术，您的数据在多宇宙中保持一致' },
    { title: '星际防护', desc: '来自未来的安全加密协议，守护您的数字资产安全' },
    { title: '光速响应', desc: '量子计算加持，毫秒级响应您的每一个指令' },
    { title: '多维协作', desc: '支持团队协作，跨时空共享智慧与资源' },
    { title: '星际通讯', desc: '智能对话系统，理解上下文，精准回答您的问题' }
  ],
  footer_text: '© 2024 宇恒一号 · 成都宇信达智能科技有限公司',
  body_builder: '',
  /** 直播中转页 /live 「进入直播间」外链；后台「首页编辑」可覆盖 */
  live_room_url: '',
  live_room_title: '视频直播'
})

const data = reactive(defaultData())

const downloadWindowsHref = computed(() => data.download_windows_url || '/promotion/downloads/yuheng-windows.zip')
const downloadAndroidHref = computed(() => data.download_android_url || '/promotion/downloads/yuheng-android.apk')
function basenameFromUrl(u) {
  if (!u || typeof u !== 'string') return ''
  try {
    const path = u.replace(/^[a-z]+:\/\/[^/]+/i, '')
    const seg = path.split('/').filter(Boolean)
    return seg.length ? decodeURIComponent(seg[seg.length - 1].split('?')[0]) : ''
  } catch {
    return ''
  }
}
const downloadWindowsFilename = computed(() => basenameFromUrl(downloadWindowsHref.value) || 'yuheng-windows.zip')
const downloadAndroidFilename = computed(() => basenameFromUrl(downloadAndroidHref.value) || 'yuheng-android.apk')

const navbarStyle = computed(() => {
  const y = scrollY.value
  if (y > 100) {
    return { background: 'rgba(10, 10, 18, 0.98)', boxShadow: '0 2px 20px rgba(0, 0, 0, 0.3)' }
  }
  return { background: 'linear-gradient(180deg, rgba(10,10,18,0.95) 0%, transparent 100%)', boxShadow: 'none' }
})

const mainVideoCoverStyle = computed(() => {
  const v = activeVideo.value
  return {
    backgroundImage: v ? 'url(' + v.cover + ')' : 'none',
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  }
})

const bodyBuilderBlocks = computed(() => {
  const raw = data.body_builder
  if (!raw || typeof raw !== 'string') return []
  try {
    const j = JSON.parse(raw)
    return Array.isArray(j.blocks) ? j.blocks : []
  } catch {
    return []
  }
})

const highlightCards = [
  { title: '智能高效', desc: 'AI 驱动的工作流自动化，化繁为简，大幅提升效率', icon: 'M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79s7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58s9.14-3.47 12.65 0L21 3v7.12z', to: '/brochure/advantages', linkLabel: '核心优势' },
  { title: '安全可靠', desc: '企业级数据保护，隐私加密，您的数据仅属于您自己', icon: 'M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z', to: '/brochure/functions', linkLabel: '功能模块' },
  { title: '双端覆盖', desc: '提供 Windows 与安卓客户端，侧栏一键下载安装包', icon: 'M4.5 9.5C5.88 9.5 7 8.38 7 7S5.88 4.5 4.5 4.5 2 5.62 2 7s1.12 2.5 2.5 2.5zM9 8v8l6-4-6-4zm10.5.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5z', to: '/brochure/intro', linkLabel: '产品介绍' },
  { title: '云端同步', desc: '本地与云端协同，多设备无缝切换', icon: 'M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z', to: '/brochure/functions', linkLabel: '功能模块' },
  { title: '持续进化', desc: '模型与能力持续迭代，越用越智能', icon: 'M12 3L1 9l11 6 9-4.91V17h2V9L12 3z', to: '/brochure/intro', linkLabel: '产品介绍' },
  { title: '免费使用', desc: '基础能力免费开放，无隐藏收费', icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z', to: '/brochure/support', linkLabel: '服务支持' }
]

/** 首行门户轮播：取前若干条亮点宣传册入口 */
const SPOTLIGHT_COUNT = 4
const spotlightSlides = computed(() => highlightCards.slice(0, SPOTLIGHT_COUNT))
const spotlightIndex = ref(0)
const currentSpotlight = computed(() => spotlightSlides.value[spotlightIndex.value] || null)
function spotlightPrev() {
  const n = spotlightSlides.value.length
  if (!n) return
  spotlightIndex.value = (spotlightIndex.value - 1 + n) % n
}
function spotlightNext() {
  const n = spotlightSlides.value.length
  if (!n) return
  spotlightIndex.value = (spotlightIndex.value + 1) % n
}
/** 宣传册列表右侧日期（按条目递减，便于排版对齐） */
function formatBrochureListDate(idx) {
  const d = new Date()
  d.setDate(d.getDate() - idx)
  const mm = String(d.getMonth() + 1).padStart(2, '0')
  const dd = String(d.getDate()).padStart(2, '0')
  return mm + '-' + dd
}

const scenarioCards = [
  { title: '企业办公', desc: '文档管理、数据报表、会议纪要、任务追踪', icon: 'M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 0h-4v2h4v2h-4v2h4v2H8V6h6v2h4V6z', to: '/brochure/scenarios' },
  { title: '数据分析', desc: '销售分析、用户统计、财务对账、批量处理', icon: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z', to: '/brochure/scenarios' },
  { title: '内容创作', desc: '图片生成、海报设计、素材管理、模板应用', icon: 'M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z', to: '/brochure/functions' },
  { title: '电商运营', desc: '商品上架、评价分析、价格监控、库存管理', icon: 'M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9h-4v4h-2v-4H9V9h4V5h2v4h4v2z', to: '/brochure/scenarios' },
  { title: '技术开发', desc: '代码辅助、数据库管理、API 对接、日志分析', icon: 'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z', to: '/brochure/functions' },
  { title: '教育学习', desc: '资料整理、题库管理、成绩分析、知识库构建', icon: 'M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z', to: '/brochure/scenarios' }
]

/** 首页「适用场景」下方：直达各宣传册章节 */
const brochureEntryLinks = [
  { topic: 'company', label: '公司简介' },
  { topic: 'culture', label: '企业文化' },
  { topic: 'intro', label: '产品介绍' },
  { topic: 'advantages', label: '核心优势' },
  { topic: 'functions', label: '功能' },
  { topic: 'ui', label: '界面' },
  { topic: 'usage', label: '使用说明' },
  { topic: 'scenarios', label: '应用场景' },
  { topic: 'cases', label: '案例' },
  { topic: 'support', label: '合作联系' }
]

const testimonials = [
  { text: '宇恒一号彻底改变了我的工作方式！以前处理数据需要几个小时，现在几分钟就能搞定。', name: '李明', role: '某科技公司数据分析师', av: '李' },
  { text: '图片生成与文档能力非常实用，界面也很有科技感。', name: '王芳', role: '互联网公司 UI 设计师', av: '王' },
  { text: '一站式解决文档、数据、自动化需求，对初创团队非常友好。', name: '张强', role: '初创公司 CEO', av: '张' }
]

const faqList = [
  { q: '宇恒一号是完全免费的吗？', a: '基础功能可免费使用；我们也提供更高阶的能力与定制服务，满足不同规模团队需求。' },
  { q: '我的数据安全有保障吗？', a: '我们重视隐私与合规，采用加密与安全实践；您可按部署方式选择数据留存在本地或受控环境。' },
  { q: '支持哪些客户端？', a: '目前提供 Windows 与安卓安装包下载；其他版本如有发布将同步在官网更新。' },
  { q: '如何获取技术支持？', a: '可通过官网邮箱、公众号等渠道联系我们，也可查阅宣传册中的服务与支持章节。' }
]

const featureIconPaths = [
  'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z',
  'M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z',
  'M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z',
  'M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79s7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58s9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z',
  'M12 3L1 9l11 6 9-4.91V17h2V9L12 3zm0 12.18L3.38 9 12 4.82 20.62 9 12 15.18zM5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z',
  'M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'
]
function featureIconPath(i) {
  return featureIconPaths[i % featureIconPaths.length] || featureIconPaths[0]
}

function isInternalRoute(url) {
  return typeof url === 'string' && url.startsWith('/') && !url.startsWith('//')
}

function scrollToSel(sel) {
  document.querySelector(sel)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

function onAnchorClick(e, url) {
  if (url && url.startsWith('#')) {
    e.preventDefault()
    scrollToSel(url)
  }
}

function selectVideo(v) {
  activeVideo.value = v
}

function openVideo(v) {
  modalVideoSrc.value = v.src
  modalCaption.value = v.title
  videoModalOpen.value = true
}

function closeVideoModal() {
  videoModalOpen.value = false
  modalVideoSrc.value = ''
}

function openSocialFollow(item) {
  socialQrTitle.value = item.label
  const list = item.imageCandidates || []
  socialQrCandidates.value = list
  const start = Math.min(socialListImgIdx[item.id] ?? 0, Math.max(0, list.length - 1))
  socialQrCandidateIdx.value = start
  socialQrImage.value = list[start] || ''
  socialQrHref.value = item.href || ''
  socialQrOpen.value = true
}

function closeSocialFollow() {
  socialQrOpen.value = false
  socialQrImage.value = ''
  socialQrHref.value = ''
  socialQrCandidates.value = []
  socialQrCandidateIdx.value = 0
}

/** 当前候选 404/裂图时换下一 URL（与 :src 绑定同一套下标，避免被 Vue 刷回） */
function onSocialFollowListImgError(item) {
  const list = item.imageCandidates || []
  const i = socialListImgIdx[item.id] ?? 0
  if (i + 1 < list.length) {
    socialListImgIdx[item.id] = i + 1
  }
}

function onSocialQrImgError() {
  const list = socialQrCandidates.value
  let i = socialQrCandidateIdx.value
  if (i + 1 < list.length) {
    i += 1
    socialQrCandidateIdx.value = i
    socialQrImage.value = list[i]
  }
}

function toggleFaq(i) {
  openFaq.value = openFaq.value === i ? -1 : i
}

function onScroll() {
  scrollY.value = window.pageYOffset || 0
}

async function fetchHomepage() {
  try {
    const url = apiBase ? `${apiBase}/api/web/homepage` : '/api/web/homepage'
    const res = await fetch(url)
    if (!res.ok) return
    const json = await res.json()
    const base = defaultData()
    Object.assign(data, base, json)
    if (Array.isArray(json.nav_links) && json.nav_links.length) data.nav_links = json.nav_links
    if (Array.isArray(json.platforms) && json.platforms.length) data.platforms = json.platforms
    if (typeof json.download_windows_url === 'string' && json.download_windows_url) data.download_windows_url = json.download_windows_url
    if (typeof json.download_android_url === 'string' && json.download_android_url) data.download_android_url = json.download_android_url
    if (Array.isArray(json.features) && json.features.length) data.features = json.features
    if (typeof json.live_room_url === 'string') data.live_room_url = json.live_room_url
    if (typeof json.live_room_title === 'string' && json.live_room_title.trim()) {
      data.live_room_title = json.live_room_title.trim()
    }
  } catch (_) {}
}

function onDocKeydown(e) {
  if (e.key === 'Escape') {
    closeVideoModal()
    closeSocialFollow()
  }
}

onMounted(() => {
  if (!webSiteId.value) {
    fetchWebRoutes().then(() => {
      webSiteId.value = getCachedWebSiteId() || ''
    })
  }
  fetchHomepage()
  document.title = (data.title || '宇恒一号') + ' - 首页'
  window.addEventListener('scroll', onScroll, { passive: true })
  document.addEventListener('keydown', onDocKeydown)
  nextTick(() => {
    addStars()
    const hash = window.location.hash
    if (hash) {
      setTimeout(() => {
        document.querySelector(hash)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
      }, 150)
    }
  })
})

onUnmounted(() => {
  window.removeEventListener('scroll', onScroll)
  document.removeEventListener('keydown', onDocKeydown)
})
</script>

<style scoped>
.landing {
  font-family: 'Noto Sans SC', sans-serif;
  background: var(--space-dark);
  color: var(--star-white);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
.home-body-builder {
  position: relative;
  z-index: 10;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 20px;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;700;900&family=Noto+Sans+SC:wght@300;400;700&display=swap');

.landing {
  --space-dark: #0a0a12;
  --space-blue: #1e3a5f;
  --nebula-purple: #4a1a6b;
  --star-white: #ffffff;
  --plasma-cyan: #00d4ff;
  --plasma-pink: #ff2d95;
  --success-green: #00ff88;
}

.space-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
  background: radial-gradient(ellipse at 20% 80%, rgba(74,26,107,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(30,58,95,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 0%, var(--space-dark) 100%);
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.stars .star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
  animation: landing-twinkle ease-in-out infinite;
}
@keyframes landing-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.navbar {
  position: fixed; top: 0; left: 0; right: 0; padding: 20px 50px;
  display: flex; justify-content: space-between; align-items: center; z-index: 100;
  transition: background 0.25s, box-shadow 0.25s;
}
.logo-space {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; cursor: pointer;
}
.logo-space-img {
  height: 40px; width: auto; max-height: 40px; object-fit: contain;
  display: block; flex-shrink: 0;
}
.logo-space-text {
  font-family: 'Noto Sans SC', sans-serif; font-size: 22px; font-weight: 800;
  background: linear-gradient(90deg, var(--plasma-cyan), var(--star-white), var(--plasma-pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: 0.15em;
}
.nav-links { display: flex; gap: 28px; flex-wrap: wrap; font-family: 'Noto Sans SC', sans-serif; font-size: 13px; letter-spacing: 0.06em; }
.nav-link-item { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s; }
.nav-link-item:hover { color: var(--plasma-cyan); }
.router-link-active.nav-link-item { color: var(--plasma-cyan); }

.hero {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 100px 20px; position: relative; z-index: 10;
}
.title-container { perspective: 1000px; margin-bottom: 30px; }
.title-3d {
  font-family: 'Exo 2', sans-serif; font-size: clamp(60px, 12vw, 150px); font-weight: 900;
  color: var(--star-white);
  text-shadow: 0 0 20px rgba(0,212,255,0.3);
  animation: float-title 4s ease-in-out infinite; transform-style: preserve-3d;
}
@keyframes float-title {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-15px) rotateX(5deg); }
}
.title-3d span { display: inline-block; animation: glow-text 3s ease-in-out infinite; }
@keyframes glow-text {
  0%, 100% { text-shadow: 0 0 10px rgba(0,212,255,0.5); }
  50% { text-shadow: 0 0 30px rgba(255,45,149,0.8); }
}

.subtitle-space {
  font-family: 'Exo 2', sans-serif; font-size: clamp(14px, 3vw, 22px); letter-spacing: 12px;
  color: var(--plasma-cyan); margin-bottom: 25px; text-transform: uppercase;
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.7; text-shadow: 0 0 10px var(--plasma-cyan); }
  50% { opacity: 1; text-shadow: 0 0 30px var(--plasma-cyan); }
}

.description-space {
  max-width: 700px; text-align: center; color: rgba(255,255,255,0.6);
  line-height: 2; font-size: 16px; margin-bottom: 50px;
}

.download-warp { position: relative; display: inline-block; padding: 0; background: transparent; border: none; cursor: pointer; }
.download-warp .warp-btn {
  position: relative; display: flex; align-items: center; gap: 15px; padding: 22px 50px;
  font-size: 16px; font-weight: 700; color: var(--space-dark);
  background: linear-gradient(135deg, var(--plasma-cyan), var(--plasma-pink));
  border: none; font-family: 'Exo 2', sans-serif; letter-spacing: 2px; text-transform: uppercase;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: all 0.4s ease; text-decoration: none; cursor: pointer;
}
.download-warp .warp-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0,212,255,0.6), 0 0 60px rgba(255,45,149,0.4);
}
.warp-effect {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
  border-radius: 50%; transform: translate(-50%, -50%);
  animation: warp-drive 1.5s ease-out infinite;
}
@keyframes warp-drive { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } }

.orbit-platforms {
  display: flex; gap: 25px; margin-top: 70px; flex-wrap: wrap; justify-content: center; position: relative;
}
.orbit-platforms::before {
  content: ''; position: absolute; top: 50%; left: -50px; right: -50px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--plasma-cyan), transparent); z-index: -1;
}
.orbit-platform {
  width: 90px; height: 90px; background: rgba(30,58,95,0.3); border: 1px solid rgba(0,212,255,0.3);
  border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; transition: all 0.4s ease; position: relative;
  overflow: visible; text-decoration: none; color: inherit;
}
.orbit-platform:hover {
  background: rgba(0,212,255,0.25); border-color: var(--plasma-cyan);
  transform: translateY(-12px) scale(1.08); box-shadow: 0 12px 35px rgba(0,212,255,0.4);
}
.orbit-platform svg { width: 28px; height: 28px; fill: var(--star-white); }
.orbit-platform span { font-size: 10px; color: rgba(255,255,255,0.6); font-family: 'Exo 2', sans-serif; letter-spacing: 1px; }

.mission-info {
  margin-top: 60px; display: flex; gap: 40px; flex-wrap: wrap; justify-content: center;
  font-family: 'Exo 2', sans-serif; font-size: 13px; color: rgba(255,255,255,0.4);
}
.mission-info span { display: flex; align-items: center; gap: 8px; }
.mission-info .mission-badge {
  padding: 4px 12px; background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.3);
  border-radius: 20px; color: var(--plasma-cyan); font-size: 11px;
}

.live-cta-section {
  margin: 48px 0 8px;
  padding: 0 4px;
  position: relative;
  z-index: 10;
}
.live-cta-card {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 28px;
  padding: 22px 26px;
  border-radius: 16px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  background: rgba(12, 18, 36, 0.45);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: live-cta-glow 4s ease-in-out infinite;
}
@keyframes live-cta-glow {
  0%, 100% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(0, 212, 255, 0); }
  50% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 28px rgba(0, 212, 255, 0.12); }
}
.live-cta-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--plasma-cyan);
  background: linear-gradient(145deg, rgba(0, 212, 255, 0.2), rgba(255, 45, 149, 0.12));
  border: 1px solid rgba(0, 212, 255, 0.3);
}
.live-cta-copy {
  flex: 1 1 220px;
  min-width: 0;
  text-align: center;
}
.live-cta-title {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  letter-spacing: 0.1em;
  color: var(--star-white);
  margin: 0 0 8px;
}
.live-cta-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}
.live-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--space-dark);
  background: linear-gradient(135deg, var(--plasma-cyan), var(--plasma-pink));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.live-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 212, 255, 0.35);
}

.features-space {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px;
  max-width: 1200px; margin: 80px auto 0; padding: 0 20px; width: 100%;
}
.feature-space {
  background: linear-gradient(135deg, rgba(30,58,95,0.2) 0%, rgba(10,10,18,0.8) 100%);
  border: 1px solid rgba(0,212,255,0.1); border-radius: 20px; padding: 35px;
  backdrop-filter: blur(10px); transition: all 0.5s ease; position: relative; overflow: hidden;
}
.feature-space:hover {
  transform: translateY(-15px); border-color: rgba(0,212,255,0.4);
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.feature-icon {
  width: 55px; height: 55px;
  background: linear-gradient(135deg, var(--plasma-cyan), var(--plasma-pink));
  border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.feature-icon svg { width: 28px; height: 28px; fill: var(--space-dark); }
.feature-space h3 { font-family: 'Noto Sans SC', sans-serif; font-size: 18px; color: var(--star-white); margin-bottom: 12px; letter-spacing: 0.04em; }
.feature-space p { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.7; }

/* 门户主栏 + 侧栏：加宽主列、减少留白 */
.portal-shell {
  position: relative;
  z-index: 10;
  background: transparent;
  padding: 24px 0 4px;
}
.home-portal-shell {
  padding-top: 64px;
}
.intro-card {
  margin-bottom: 22px;
}
.home-lead .portal-block-title {
  font-size: clamp(1.2rem, 2.4vw, 1.85rem);
  margin-bottom: 16px;
}
.home-lead .portal-preview-tip {
  font-size: 14px;
}
.home-lead .portal-preview-body {
  max-height: min(82vh, 760px);
  font-size: 15px;
  line-height: 1.68;
  padding: 10px 12px 14px;
}
.home-lead-video {
  margin-bottom: 28px;
  padding: 32px 26px 40px !important;
}
.home-lead-video .section-title--lead {
  margin-bottom: 36px;
}
.home-lead-video .section-title--lead h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.4rem);
  letter-spacing: 0.12em;
  font-family: 'Noto Sans SC', sans-serif;
}
.home-lead-video .section-title--lead p {
  font-size: 17px;
  max-width: none;
}
.home-lead-video .main-thumb {
  min-height: min(52vw, 440px);
}
.home-lead-video .video-info h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  font-family: 'Noto Sans SC', sans-serif;
}
.home-features {
  margin-bottom: 28px;
  padding: 8px 8px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(0, 212, 255, 0.1);
}
.portal-aside-download-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.portal-aside-download-row .portal-aside-download {
  margin-top: 0;
}
.portal-aside-download--secondary {
  background: rgba(10, 18, 36, 0.95);
  color: var(--plasma-cyan);
  border: 1px solid rgba(0, 212, 255, 0.5);
  font-family: 'Noto Sans SC', sans-serif;
  letter-spacing: 0.06em;
}
.portal-aside-download--secondary:hover {
  filter: brightness(1.12);
}
/* 主内容区：更宽视口利用；右侧为 fixed 侧栏预留 */
.portal-inner--main {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 10px 24px;
  box-sizing: border-box;
}
@media (min-width: 1025px) {
  .portal-inner--main {
    padding-right: 288px;
  }
}
.portal-main { min-width: 0; }
.portal-block-title {
  font-family: 'Exo 2', 'Noto Sans SC', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--star-white);
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--plasma-cyan);
}
.portal-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 14px;
  padding: 16px 14px 18px;
  margin-bottom: 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.portal-card-lite {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.08);
  border-radius: 14px;
  padding: 18px 14px;
  margin-bottom: 20px;
}
.portal-row-split {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(220px, 0.85fr);
  gap: 16px;
  align-items: stretch;
}
.portal-preview-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.portal-preview-tip {
  margin: 0 0 8px;
  padding-left: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.48);
}
.portal-preview-body {
  max-height: min(72vh, 620px);
  overflow: auto;
  padding: 10px 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.portal-preview-body::-webkit-scrollbar {
  width: 8px;
}
.portal-preview-body::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.35);
  border-radius: 4px;
}
.portal-news-panel { min-width: 0; display: flex; flex-direction: column; }
.portal-news-scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px 4px;
  scrollbar-width: thin;
}
.portal-news-scroll-wrap::-webkit-scrollbar {
  height: 6px;
}
.portal-news-scroll-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.35);
  border-radius: 4px;
}
.portal-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: min(100%, 300px);
}
.portal-news-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
}
.portal-news-list li:last-child { border-bottom: none; }
.portal-news-link-btn {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
  transition: color 0.2s;
}
.portal-news-link-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 2px;
  width: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), var(--plasma-cyan));
  transition: width 0.28s ease;
}
.portal-news-link-btn:hover {
  color: var(--plasma-cyan);
}
.portal-news-link-btn:hover::after {
  width: 100%;
}
.portal-news-link-btn.active {
  color: var(--plasma-cyan);
  font-weight: 600;
}
.portal-news-link-btn.active::after {
  width: 100%;
}
.portal-news-date {
  flex-shrink: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
  font-family: 'Exo 2', monospace;
}
.portal-read-all {
  margin-top: 14px;
  font-size: 13px;
  color: var(--plasma-cyan);
  text-decoration: none;
  align-self: flex-start;
}
.portal-read-all:hover { text-decoration: underline; }

.portal-aside { min-width: 0; }
/* 右侧悬停：固定于视口最右侧，滚动时保持可见 */
.portal-aside--fixed {
  position: fixed;
  right: 0;
  top: 88px;
  z-index: 85;
  width: 276px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px 16px 8px;
  pointer-events: auto;
  box-sizing: border-box;
}
.portal-aside-inner {
  padding: 18px 14px 20px;
  border-radius: 16px 0 0 16px;
  background: rgba(12, 16, 28, 0.92);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-right: none;
  box-shadow: -8px 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}
.portal-aside-title {
  font-family: 'Exo 2', 'Noto Sans SC', sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--star-white);
  margin: 0 0 6px;
  text-align: center;
}
.portal-aside-hint {
  margin: 0 0 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  line-height: 1.5;
}
.portal-aside-social {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.portal-social-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  background: rgba(10, 14, 28, 0.6);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.portal-social-tile:hover {
  border-color: var(--plasma-cyan);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
  transform: translateY(-2px);
}
.portal-social-tile-img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-social-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.portal-social-tile-label {
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
}
.portal-aside-download {
  display: block;
  margin-top: 18px;
  padding: 12px 16px;
  text-align: center;
  border-radius: 10px;
  font-size: 13px;
  font-family: 'Noto Sans SC', sans-serif;
  letter-spacing: 0.06em;
  color: var(--space-dark);
  text-decoration: none;
  background: linear-gradient(135deg, var(--plasma-cyan), var(--plasma-pink));
  transition: filter 0.2s, transform 0.2s;
}
.portal-aside-download:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* 统计 / 亮点 / 场景 … */
.stats-section { padding: 80px 20px; position: relative; z-index: 10; }
.stats-section.portal-card-lite { padding: 22px 14px; margin-bottom: 22px; }
.stats-container {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.stat-item {
  text-align: center; padding: 30px 20px;
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.15) 0%, rgba(10, 10, 18, 0.6) 100%);
  border: 1px solid rgba(0, 212, 255, 0.1); border-radius: 20px; transition: all 0.4s;
}
.stat-item:hover { transform: translateY(-8px); border-color: rgba(0, 212, 255, 0.35); }
.stat-number {
  font-family: 'Exo 2', sans-serif; font-size: 42px; font-weight: 900;
  background: linear-gradient(135deg, var(--plasma-cyan), var(--plasma-pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px;
}
.stat-label { font-size: 14px; color: rgba(255,255,255,0.5); letter-spacing: 2px; }

.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 {
  font-family: 'Noto Sans SC', sans-serif; font-size: clamp(26px, 5vw, 40px); color: var(--star-white);
  margin-bottom: 12px; letter-spacing: 0.08em;
}
.section-title p { color: rgba(255,255,255,0.5); font-size: 16px; max-width: 600px; margin: 0 auto; }

.highlights-section { padding: 80px 20px; position: relative; z-index: 10; }
.highlight-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.highlight-card {
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.25) 0%, rgba(10, 10, 18, 0.8) 100%);
  border: 1px solid rgba(0, 212, 255, 0.15); border-radius: 24px; padding: 36px 28px; text-align: center; transition: all 0.45s;
}
.highlight-card:hover { transform: translateY(-8px); border-color: rgba(0, 212, 255, 0.4); }
.highlight-icon {
  width: 72px; height: 72px; margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 45, 149, 0.2));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.highlight-icon svg { width: 36px; height: 36px; fill: var(--plasma-cyan); }
.highlight-card h3 { font-family: 'Exo 2', sans-serif; font-size: 18px; margin-bottom: 12px; }
.highlight-card p { color: rgba(255,255,255,0.52); font-size: 14px; line-height: 1.75; }

.scenarios-section {
  padding: 80px 20px; position: relative; z-index: 10;
  background: linear-gradient(180deg, transparent 0%, rgba(30, 58, 95, 0.08) 50%, transparent 100%);
}
.scenarios-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px;
}
.scenario-card {
  background: rgba(10, 10, 18, 0.6); border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 16px; padding: 26px; display: flex; align-items: flex-start; gap: 16px; transition: all 0.35s;
}
.scenario-card:hover { border-color: rgba(0, 212, 255, 0.3); background: rgba(30, 58, 95, 0.2); }
.scenario-icon {
  width: 48px; height: 48px; min-width: 48px;
  background: linear-gradient(135deg, var(--plasma-cyan), var(--plasma-pink));
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
.scenario-icon svg { width: 22px; height: 22px; fill: var(--space-dark); }
.scenario-content h4 { font-family: 'Exo 2', sans-serif; font-size: 16px; margin-bottom: 6px; }
.scenario-content p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.6; }
.brochure-cta { text-align: center; margin-top: 40px; }
.brochure-cta p { color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.brochure-multi {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; max-width: 720px; margin-left: auto; margin-right: auto;
}
.brochure-chip {
  display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 12px;
  color: rgba(255,255,255,0.88); text-decoration: none;
  background: rgba(30, 58, 95, 0.35); border: 1px solid rgba(0, 212, 255, 0.25);
  transition: border-color 0.2s, background 0.2s;
}
.brochure-chip:hover { border-color: var(--plasma-cyan); background: rgba(0, 212, 255, 0.12); }
.card-jump-link {
  display: inline-block; margin-top: 14px; font-size: 13px; color: var(--plasma-cyan); text-decoration: none; font-family: 'Exo 2', sans-serif;
}
.card-jump-link:hover { text-decoration: underline; }
.card-jump-link.subtle { font-size: 12px; margin-top: 10px; opacity: 0.95; }
.brochure-btn {
  display: inline-flex; padding: 12px 28px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 45, 149, 0.15));
  border: 1px solid rgba(0, 212, 255, 0.35); color: var(--star-white); text-decoration: none; font-family: 'Exo 2', sans-serif; font-size: 13px;
}
.brochure-btn:hover { border-color: var(--plasma-cyan); }

.testimonials-section { padding: 80px 20px; position: relative; z-index: 10; }
.testimonials-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px;
}
.testimonial-card {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.2) 0%, rgba(10, 10, 18, 0.85) 100%);
  border: 1px solid rgba(0, 212, 255, 0.1); border-radius: 20px; padding: 30px; position: relative;
}
.testimonial-text { color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.author-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--plasma-cyan), var(--plasma-pink));
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--space-dark); font-family: 'Exo 2', sans-serif;
}
.author-info h5 { font-size: 14px; margin-bottom: 2px; }
.author-info span { font-size: 12px; color: rgba(255,255,255,0.4); }

.social-section { padding: 72px 20px; text-align: center; position: relative; z-index: 10; }
.social-title {
  font-family: 'Exo 2', sans-serif; font-size: clamp(20px, 3vw, 26px); margin-bottom: 28px;
  color: var(--star-white); letter-spacing: 4px;
}
.social-links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; align-items: center; }
.social-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px 12px 14px;
  border-radius: 999px;
  background: rgba(10, 18, 32, 0.85);
  border: 1px solid rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.12), inset 0 0 0 1px rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.social-pill:hover {
  transform: translateY(-2px);
  border-color: var(--plasma-cyan);
  box-shadow: 0 0 28px rgba(0, 212, 255, 0.28);
}
.social-pill-icon-wrap {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.social-pill-icon { width: 32px; height: 32px; object-fit: contain; display: block; }
.social-pill-label { font-family: 'Exo 2', 'Noto Sans SC', sans-serif; letter-spacing: 1px; }

.social-qr-modal {
  display: none; position: fixed; inset: 0; z-index: 2100;
  background: rgba(0,0,0,0.88); align-items: center; justify-content: center; backdrop-filter: blur(8px);
}
.social-qr-modal.active { display: flex; }
.social-qr-inner {
  position: relative; width: 90%; max-width: 400px; padding: 28px 24px 24px;
  border-radius: 20px;
  border: 1px solid rgba(0, 212, 255, 0.25);
  background: linear-gradient(165deg, rgba(30, 58, 95, 0.35), rgba(10, 10, 18, 0.96));
  text-align: center;
}
.social-qr-inner .close-modal {
  position: absolute; top: 10px; right: 14px; font-size: 28px; color: rgba(255,255,255,0.55);
  background: none; border: none; cursor: pointer; line-height: 1;
}
.social-qr-inner .close-modal:hover { color: var(--plasma-cyan); }
.social-qr-title { font-family: 'Exo 2', sans-serif; font-size: 18px; margin-bottom: 16px; color: #fff; }
.social-qr-frame {
  margin: 0 auto 16px; padding: 12px; border-radius: 12px;
  background: rgba(255,255,255,0.96); max-width: 280px;
}
.social-qr-img { width: 100%; height: auto; display: block; vertical-align: top; }
.social-qr-out {
  display: inline-block; margin-top: 8px; font-size: 13px; color: var(--plasma-cyan); text-decoration: none;
}
.social-qr-out:hover { text-decoration: underline; }

.faq-section { padding: 80px 20px; position: relative; z-index: 10; }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: rgba(30, 58, 95, 0.15); border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 14px; margin-bottom: 12px; overflow: hidden;
}
.faq-question {
  padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.faq-question h4 { font-family: 'Exo 2', sans-serif; font-size: 14px; letter-spacing: 1px; }
.faq-icon {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 212, 255, 0.15);
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--plasma-cyan); transition: transform 0.25s;
}
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.active .faq-answer { max-height: 240px; }
.faq-answer p { padding: 0 22px 18px; color: rgba(255,255,255,0.55); font-size: 14px; line-height: 1.75; }

.contact-section {
  padding: 88px 20px 100px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}
.contact-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.contact-aurora-blob {
  position: absolute;
  width: min(380px, 55vw);
  height: min(380px, 55vw);
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.38;
  animation: contact-blob-drift 14s ease-in-out infinite;
}
.contact-aurora-blob--a {
  background: rgba(0, 212, 255, 0.28);
  left: 8%;
  top: 12%;
}
.contact-aurora-blob--b {
  background: rgba(255, 45, 149, 0.22);
  right: 5%;
  bottom: 8%;
  animation-delay: -7s;
}
@keyframes contact-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -18px) scale(1.06); }
}
.contact-container {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.contact-head {
  text-align: center;
  margin-bottom: 8px;
}
.contact-eyebrow {
  display: block;
  font-family: 'Exo 2', sans-serif;
  font-size: 11px;
  letter-spacing: 0.45em;
  color: var(--plasma-cyan);
  margin-bottom: 14px;
  animation: contact-eyebrow-glow 3.2s ease-in-out infinite;
}
@keyframes contact-eyebrow-glow {
  0%, 100% { opacity: 0.72; text-shadow: 0 0 10px rgba(0, 212, 255, 0.45); }
  50% { opacity: 1; text-shadow: 0 0 18px rgba(0, 212, 255, 0.85); }
}
.contact-title {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: clamp(26px, 5vw, 40px);
  margin: 0 0 12px;
  letter-spacing: 0.12em;
  background: linear-gradient(
    90deg,
    var(--star-white) 0%,
    var(--plasma-cyan) 35%,
    var(--plasma-pink) 65%,
    var(--star-white) 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: contact-title-shine 5s linear infinite;
}
@keyframes contact-title-shine {
  to { background-position: 220% center; }
}
.contact-sub {
  color: rgba(255, 255, 255, 0.52);
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}
.contact-title-line {
  width: min(200px, 40vw);
  height: 3px;
  margin: 28px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--plasma-cyan), var(--plasma-pink), transparent);
  opacity: 0.85;
  animation: contact-line-pulse 2.8s ease-in-out infinite;
}
@keyframes contact-line-pulse {
  0%, 100% { opacity: 0.55; transform: scaleX(0.92); }
  50% { opacity: 1; transform: scaleX(1); }
}
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
  justify-content: center;
}
.contact-card {
  position: relative;
  text-align: center;
  padding: 28px 20px 30px;
  border-radius: 18px;
  border: 1px solid rgba(0, 212, 255, 0.18);
  background: rgba(12, 16, 30, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  animation: contact-card-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.contact-card:nth-child(1) { animation-delay: 0.06s; }
.contact-card:nth-child(2) { animation-delay: 0.16s; }
.contact-card:nth-child(3) { animation-delay: 0.26s; }
@keyframes contact-card-rise {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.contact-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(0, 212, 255, 0.45),
    rgba(255, 45, 149, 0.15),
    rgba(0, 212, 255, 0.25)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.contact-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0, 212, 255, 0.42);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(0, 212, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.contact-card:hover::before {
  opacity: 0.75;
}
.contact-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 14px;
  color: var(--plasma-cyan);
  background: linear-gradient(145deg, rgba(0, 212, 255, 0.18), rgba(255, 45, 149, 0.1));
  border: 1px solid rgba(0, 212, 255, 0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.contact-card:hover .contact-card-icon {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.25);
}
.contact-card-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.18em;
  margin: 0 0 10px;
  font-family: 'Exo 2', 'Noto Sans SC', sans-serif;
  text-transform: uppercase;
}
.contact-card-body {
  margin: 0;
  font-size: 14px;
  color: var(--star-white);
  line-height: 1.75;
}
.contact-card-link {
  display: inline-block;
  font-size: 14px;
  color: var(--star-white);
  text-decoration: none;
  line-height: 1.65;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  word-break: break-all;
}
.contact-card-link:hover {
  color: var(--plasma-cyan);
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.35);
}
@media (max-width: 900px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.partners-section { padding: 60px 20px; text-align: center; position: relative; z-index: 10; }
.partners-section h3 { font-size: 14px; color: rgba(255,255,255,0.38); letter-spacing: 4px; margin-bottom: 28px; font-family: 'Exo 2', sans-serif; }
.partners-grid { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; opacity: 0.45; }
.partner-logo { font-family: 'Exo 2', sans-serif; font-size: 16px; letter-spacing: 2px; }

/* 视频区 */
.video-section { padding: 80px 20px; position: relative; z-index: 10; background: linear-gradient(180deg, rgba(30, 58, 95, 0.06) 0%, transparent 100%); }
.video-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 380px; gap: 28px; }
.video-card { background: linear-gradient(135deg, rgba(30, 58, 95, 0.2) 0%, rgba(10, 10, 18, 0.85) 100%); border: 1px solid rgba(0, 212, 255, 0.15); border-radius: 18px; overflow: hidden; }
.video-thumbnail { position: relative; aspect-ratio: 16/9; cursor: pointer; background: linear-gradient(135deg, var(--space-blue), var(--nebula-purple)); }
.main-thumb { min-height: 200px; }
.play-button {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; background: rgba(0, 212, 255, 0.92);
  display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform 0.2s;
}
.play-button.small { width: 48px; height: 48px; }
.play-button svg { width: 32px; height: 32px; fill: var(--space-dark); margin-left: 4px; }
.play-button.small svg { width: 22px; height: 22px; }
.video-thumbnail:hover .play-button { transform: translate(-50%, -50%) scale(1.08); }
.video-info { padding: 22px; }
.video-info h3 { font-family: 'Exo 2', sans-serif; font-size: 20px; margin-bottom: 8px; }
.video-info h4 { font-size: 15px; margin-bottom: 6px; }
.video-info p { color: rgba(255,255,255,0.52); font-size: 14px; line-height: 1.6; }
.video-sidebar { display: flex; flex-direction: column; gap: 14px; }
.small-video { display: flex; gap: 12px; padding: 12px; align-items: stretch; cursor: pointer; border-radius: 14px; transition: border 0.2s, background 0.2s; }
.small-video.is-active { border: 1px solid rgba(0, 212, 255, 0.45); background: rgba(0, 212, 255, 0.06); }
.video-thumbnail.small { width: 120px; min-width: 120px; aspect-ratio: 16/9; border-radius: 10px; }

.video-modal {
  display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.88);
  align-items: center; justify-content: center; backdrop-filter: blur(8px);
}
.video-modal.active { display: flex; }
.modal-content { position: relative; width: 90%; max-width: 960px; padding: 28px; border-radius: 16px; border: 1px solid rgba(0, 212, 255, 0.2); background: rgba(10, 10, 18, 0.95); }
.close-modal { position: absolute; top: 8px; right: 16px; font-size: 32px; color: rgba(255,255,255,0.55); cursor: pointer; z-index: 3; line-height: 1; }
.close-modal:hover { color: var(--plasma-cyan); }
.modal-video { width: 100%; max-height: 70vh; border-radius: 8px; margin-top: 8px; background: #000; }
.modal-caption { margin-top: 12px; color: rgba(255,255,255,0.55); font-size: 14px; text-align: center; }

.landing footer {
  padding: 48px 24px 60px; text-align: center; border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 40px; position: relative; z-index: 10;
}
.footer-content { max-width: 1200px; margin: 0 auto; }
.footer-logo {
  font-family: 'Exo 2', sans-serif; font-size: 26px; font-weight: 900;
  background: linear-gradient(90deg, var(--plasma-cyan), var(--plasma-pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px;
}
.footer-company { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
.footer-links a, .footer-links .router-link-active { font-size: 12px; color: rgba(255,255,255,0.42); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--plasma-cyan); }
.footer-links a.router-link-active { color: var(--plasma-cyan); }
.landing footer p { color: rgba(255,255,255,0.32); font-size: 11px; font-family: 'Exo 2', sans-serif; letter-spacing: 2px; }
.landing footer .beian { margin-top: 10px; font-size: 11px; letter-spacing: normal; font-family: 'Noto Sans SC', sans-serif; }
.landing footer .beian a { color: rgba(255,255,255,0.45); text-decoration: none; }
.landing footer .beian a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .portal-inner--main {
    padding-right: 20px;
  }
  .portal-aside--fixed {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 0 16px 20px;
    margin: 0 auto;
  }
  .portal-aside-inner {
    border-radius: 16px;
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-right: 1px solid rgba(0, 212, 255, 0.15);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  }
  .portal-row-split { grid-template-columns: 1fr; }
  .video-container { grid-template-columns: 1fr; }
  .highlight-grid { grid-template-columns: 1fr; }
  .stats-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .navbar { padding: 15px 20px; }
  .stats-container { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
}
</style>
