/* ==========================================================================
   blocks.css — 站头 / Hero / 场景区块 / 站尾
   ========================================================================== */

/* ---- 站头 ------------------------------------------------------------------ */
.site-header {
  position: relative;
  z-index: 50;
  padding-block: var(--sp-6);
  background: var(--bg);
}

.site-header__inner {
  position: relative; /* 移动端下拉面板的定位基准 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text);
  flex: 0 0 auto;
}

.brand:hover {
  color: var(--text);
}

.brand__logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(74, 134, 232, 0.5);
}

.brand__name {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.nav__link {
  color: var(--text-muted);
  font-size: var(--fz-sm);
  white-space: nowrap;
  transition: color var(--ease);
}

.nav__link:hover {
  color: var(--text);
}

.nav__link[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

/* 汉堡按钮：桌面端不出现 */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: pointer;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1200px) {
  .nav {
    gap: var(--sp-6);
  }
}

/* 收折断点按顶栏一行的实际需要宽度定，与「正文改单栏」的断点无关 */
@media (max-width: 960px) {
  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) 0;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line-strong);
  }

  .nav.is-open {
    display: flex;
  }

  .nav__link {
    padding: 13px 18px;
    font-size: var(--fz-body);
    border-block-end: 1px solid var(--line-faint);
  }

  .nav__link:last-child {
    border-block-end: 0;
  }

  .nav__link[aria-current="page"] {
    background: rgba(74, 134, 232, 0.12);
    box-shadow: inset 3px 0 0 var(--brand-bright);
  }

  .nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 560px) {
  /* 只收起英文名，下载入口在窄屏仍然是可见的（导航里也有「下载中心」兜底） */
  .brand__latin {
    display: none;
  }

  .site-header__cta {
    padding: 9px 16px;
  }
}

/* ---- Hero 首屏 ------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-13) 88px;
  background: linear-gradient(180deg, #0a0a14 0%, #130f33 55%, #0a0a14 100%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.hero__title {
  font-size: var(--fz-hero);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero__lead {
  font-size: var(--fz-lead);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
}

.hero__trust {
  font-size: var(--fz-sm);
  color: var(--text-faint);
}

/* 手机展示墙 */
.phone-wall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin-block-start: var(--sp-3);
}

@media (max-width: 1024px) {
  .phone-wall {
    gap: var(--sp-7);
  }
}

@media (max-width: 860px) {
  .hero {
    padding-block: var(--sp-10) var(--sp-10);
  }

  .hero__actions {
    gap: var(--sp-3);
  }

  /* 三台并排在这一档已经小到看不清内容，只留中间那台 */
  .phone--side {
    display: none;
  }

  .phone-wall {
    gap: 0;
  }
}

/* ---- 图文行（核心功能 / 源管理 / 功能详解模块） ---------------------------- */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

.feature__title {
  font-size: var(--fz-h3);
  font-weight: 700;
}

.feature__text {
  font-size: var(--fz-body);
  line-height: var(--lh-body);
}

.feature__meta {
  font-size: var(--fz-xs);
  color: var(--text-faint);
}

@media (max-width: 860px) {
  .feature {
    gap: var(--sp-9);
  }

  .feature__title {
    font-size: var(--fz-h4);
  }
}

/* ---- 亮点网格 -------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  /* 卡片按内容收高。设计稿里它们是 hug_contents；用 grid 默认的 stretch 会被
     图卡那一行拉高，文字卡下缘出现大片空白。 */
  align-items: start;
}

/* 图卡固定高度：设计稿是 height:280 + 图片 FILL 居中裁切。
   这里必须给「确定高度」，否则 .shot img 的 height:100% 在 auto 高度父元素上会退回
   图片固有高度，把整张 2412px 的竖屏截图铺开、连带撑高整行。 */
.bento__shot {
  height: 280px;
}

@media (max-width: 860px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento__shot {
    height: 220px;
  }
}

/* ---- 下载面板（首页） ------------------------------------------------------ */
.dl-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-10) 80px;
  border-radius: var(--r-3xl);
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(74, 134, 232, 0.35), 0 0 80px rgba(74, 134, 232, 0.18),
    0 0 120px rgba(255, 0, 110, 0.1);
}

.dl-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
}

.dl-panel__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.dl-panel__note {
  font-size: var(--fz-xs);
  color: var(--text-faint);
}

.dl-log {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
}

.dl-log__title {
  font-size: var(--fz-body);
  font-weight: 600;
  color: var(--pink);
}

.dl-log__item {
  font-size: var(--fz-sm);
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .dl-panel {
    padding: var(--sp-9) var(--sp-5);
  }

  .dl-panel__actions {
    width: 100%;
    gap: var(--sp-3);
  }

  .dl-panel__actions .btn {
    flex: 1 1 100%;
  }
}

/* ---- 页头（内页共用） ------------------------------------------------------ */
.page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-block: var(--sp-13) var(--sp-10);
  text-align: center;
}

@media (max-width: 860px) {
  .page-hero {
    padding-block: var(--sp-10) var(--sp-9);
  }
}

/* ---- 站尾 ------------------------------------------------------------------ */
.site-footer {
  padding-block: var(--sp-11) var(--sp-9);
  background: var(--bg-deep);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-9);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 380px;
}

.site-footer__name {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

.site-footer__desc {
  font-size: var(--fz-xs);
  line-height: var(--lh-body);
  color: var(--text-faint);
}

.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.foot-col__title {
  color: var(--text);
  font-size: var(--fz-sm);
  font-weight: 600;
}

.foot-col__link {
  font-size: var(--fz-xs);
  color: var(--text-faint);
}

.foot-col__link:hover {
  color: var(--text);
}

.site-footer__divider {
  height: 1px;
  background: var(--line-faint);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fz-2xs);
  color: var(--text-faint);
}

@media (max-width: 760px) {
  .site-footer__cols {
    gap: var(--sp-9) var(--sp-12);
  }
}