/* ===========================================================
   blocks.css — 页级区块：Header / Footer / Hero / 痛点对照 /
   功能行 / 画廊 / 下载卡 / CTA 带。同一块的响应式写在块内。
   =========================================================== */

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 12, 14, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__row {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
  font-weight: 700;
  font-size: var(--t-body-lg);
  letter-spacing: .01em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }

.site-nav { display: flex; gap: var(--s-6); margin-left: var(--s-6); }
.site-nav a {
  color: var(--text-body);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 6px 2px;
  border-radius: var(--r-sm);
}
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--text); position: relative; }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: var(--brand-mark);
}

.site-header__cta { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.site-header__cta .pill { font-size: var(--t-meta); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--card-line);
  color: var(--text);
  margin-left: auto;
}
.nav-toggle svg { width: 20px; height: 20px; margin: auto; }

/* 移动抽屉：hidden 由 JS 切换；无 JS 时桌面样式也不受影响 */
.mobile-nav {
  position: fixed;
  inset: 72px 0 0;
  z-index: 49;
  background: var(--bg);
  padding: var(--s-8) var(--gutter) var(--s-12);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  overflow-y: auto;
}
.mobile-nav a {
  padding: 14px 12px;
  border-radius: var(--r-card);
  color: var(--text);
  font-size: var(--t-body-lg);
  font-weight: 600;
}
.mobile-nav a[aria-current="page"] { background: var(--brand-surface); color: var(--brand-mark); }
.mobile-nav .btn { margin-top: var(--s-4); }
.mobile-nav .pill { align-self: flex-start; margin-top: var(--s-3); }

@media (max-width: 1024px) {
  .site-nav, .site-header__cta .pill { display: none; }
  .site-header__cta .btn { display: none; }   /* CTA 入口挪进抽屉，不能凭空消失 */
  .nav-toggle { display: grid; }
}

/* ============ Footer ============ */
.site-footer { background: var(--bg-sunken); }
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-10);
  padding-block: 76px var(--s-10);
}
.footer-brand { display: flex; flex-direction: column; gap: var(--s-4); max-width: 320px; }
.footer-brand img { width: 40px; height: 40px; }
.footer-brand p { font-size: var(--t-sm); line-height: 1.7; color: var(--text-muted); }

.footer-col h4 {
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .08em;
  margin-bottom: var(--s-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-col a { color: var(--text-body); font-size: var(--t-sm); }
.footer-col a:hover { color: var(--text); }

.footer-mark { padding: var(--s-10) 0 var(--s-8); }
.footer-mark::before {
  content: "";
  display: block;
  width: 56px; height: 4px;
  border-radius: 2px;
  background: var(--brand-mark);
  margin-bottom: var(--s-4);
}
.footer-mark span {
  font-family: var(--font-num);
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--footer-mark);
}
.footer-bottom {
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-6);
}
.footer-bottom p { font-size: var(--t-meta); color: var(--text-muted); }
.footer-bottom a { color: var(--text-body); }

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; padding-block: 56px var(--s-8); }
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--s-8); }
  .footer-bottom { flex-direction: column; gap: var(--s-2); }
}

/* ============ 首页 Hero：左文案 + 右视觉浮层 ============ */
.hero {
  background: linear-gradient(180deg, #1B1214 0%, var(--bg) 100%);
  padding-block: var(--s-20) var(--s-16);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-12);
  align-items: center;
}
.hero__badge { margin-bottom: var(--s-6); }
.hero__copy .lede { margin-top: var(--s-5); }
.hero__cta {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-8);
  flex-wrap: wrap;
}
.hero__trust {
  margin-top: var(--s-5);
  font-size: var(--t-meta);
  color: var(--text-muted);
}

.hero-shot { position: relative; }
.hero-shot__main {
  border-radius: var(--r-cta);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--card-line-strong), 0 32px 80px rgba(0, 0, 0, .5);
}
.hero-shot__main img { width: 100%; }
.hero-shot__phone {
  position: absolute;
  left: -6%;
  bottom: -64px;
  width: clamp(140px, 15vw, 200px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--card-line-strong);
}
.hero-shot__phone img { width: 100%; }
.hero-shot__chip {
  position: absolute;
  right: 6%;
  top: 10%;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: rgba(146, 204, 254, .14);
  box-shadow: inset 0 0 0 1px rgba(146, 204, 254, .3);
  color: var(--brand-mark);
  font-size: var(--t-eyebrow);
  font-weight: 500;
}

/* 视觉右下的三条数据 chip */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
}
.hero-stats li {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: 20px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 0 0 1px var(--card-line);
}
.hero-stats .num {
  font-size: 26px;
  font-weight: 600;
  color: var(--brand-mark);
  flex: none;
  min-width: 96px;
}
.hero-stats span { font-size: var(--t-sm); color: var(--text-muted); }

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero-shot { max-width: 640px; }
  .hero-shot__phone { display: none; }
  .hero-shot__chip { display: none; }
}

/* ============ 内页 PageHero ============ */
.page-hero {
  background: linear-gradient(180deg, #1B1214 0%, var(--bg) 100%);
  padding: 72px 0 60px;
}
.page-hero h1 { max-width: 900px; }
.page-hero .lede { margin-top: var(--s-4); }
.page-hero .meta { display: block; margin-top: var(--s-5); }

/* ============ 痛点对照 ============ */
.pain { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.pain-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-8);
  border-radius: var(--r-panel);
}
.pain-col--before { background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.pain-col--after {
  background: var(--brand-surface);
  box-shadow: inset 0 0 0 1px var(--brand-line-strong);
}
.pain-col__tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: .1em;
}
.pain-col--before .pain-col__tag { color: var(--text-muted); }
.pain-col--after .pain-col__tag { color: var(--brand-mark); }
.pain-col h3 { font-size: var(--t-body-lg); }
.pain-col ul { display: flex; flex-direction: column; gap: var(--s-3); }
.pain-col li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.7;
}
.pain-col--before li { color: var(--text-muted); }
.pain-col--after li { color: var(--text); }
.pain-col li svg { width: 16px; height: 16px; flex: none; margin-top: 5px; }
.pain-col--before svg { color: var(--text-muted); }
.pain-col--after svg { color: var(--brand-mark); }

@media (max-width: 900px) {
  .pain { grid-template-columns: 1fr; }
  .pain-col { padding: var(--s-6); }
}

/* ============ 能力行（图 + 文） ============ */
.comp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-16);
  align-items: center;
}
.comp-row + .comp-row { margin-top: var(--s-20); }
.comp-row__text h3 { font-size: 26px; line-height: 1.4; }
.comp-row__text > p { margin-top: var(--s-4); }
.tick { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.tick li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--text-body);
}
.tick li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-mark);
  flex: none;
  margin-top: 9px;
}

.comp-row__visual { display: flex; gap: var(--s-5); justify-content: center; }
.comp-row__visual .media { flex: 1 1 0; max-width: 300px; }
.comp-row__visual .media--solo { max-width: 100%; flex: none; width: 100%; }

.comp-row--flip .comp-row__text { order: 2; }
.comp-row--flip .comp-row__visual { order: 1; }

@media (max-width: 1024px) {
  .comp-row { gap: var(--s-10); }
}
@media (max-width: 760px) {
  .comp-row,
  .comp-row--flip { grid-template-columns: 1fr; }
  .comp-row--flip .comp-row__text { order: 1; }
  .comp-row--flip .comp-row__visual { order: 2; }
  .comp-row__visual .media { max-width: none; }
  .comp-row__visual .media--tall { max-width: 260px; }
}

/* ============ 画廊 ============ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
.gallery-grid .media { border-radius: var(--r-card); }
@media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); } }

/* ============ 下载：平台卡 / 版本卡 / 步骤 ============ */
.plat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 26px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--card-line);
}
.plat h3 { font-size: var(--t-body-lg); }
.plat p { font-size: var(--t-sm); line-height: 1.7; color: var(--text-body); flex: 1 1 auto; }
.plat .btn { margin-top: var(--s-2); }

.version-card {
  padding: var(--s-8);
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--card-line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}
.version-card--hot {
  background: var(--brand-surface);
  box-shadow: inset 0 0 0 1px var(--brand-line-strong);
}
.version-card h3 { font-size: 22px; }
.version-card ul { display: flex; flex-direction: column; gap: var(--s-2); }
.version-card li { font-size: var(--t-sm); color: var(--text-body); display: flex; gap: var(--s-2); }
.version-card li::before { content: "·"; color: var(--brand-mark); font-weight: 700; }
.version-card .btn { margin-top: auto; }

@media (max-width: 640px) {
  .version-card { padding: var(--s-6); }
}

/* ============ CTA 带（About 尾 / 通用） ============ */
.cta-band {
  padding: 56px;
  border-radius: var(--r-cta);
  background: linear-gradient(135deg, #2E1A1C 0%, #171013 100%);
  box-shadow: inset 0 0 0 1px var(--brand-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  text-align: center;
}
.cta-band h2 { font-size: 32px; line-height: 44px; }
.cta-band .lede { max-width: 620px; }
.cta-band__btns { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) {
  .cta-band { padding: var(--s-8) var(--s-5); }
  .cta-band h2 { font-size: 26px; line-height: 36px; }
}