/* ============================================================
   云麦智联 · 白沟站 — 设计稿 1:1 还原
   设计系统：暖白底 + 深蓝 #014DB2 + 大圆角胶囊语言
   画布宽度 1440 · 内容区 1160（左右 140）
   ============================================================ */
:root {
  --bg: #F9F9F9;            /* 页面底色 */
  --ink: #0A1628;           /* 深色标题 / 页脚底 */
  --blue: #014DB2;          /* 主色 */
  --blue-soft: #EAF1FC;     /* 眉标胶囊底 / 要素标签底 */
  --blue-tint: #EEF4FB;     /* 浅蓝分区底 */
  --body: #4A5568;          /* 正文 */
  --muted: #6B7280;         /* 次要文字 */
  --border: #EBEDEF;        /* 卡片描边 */
  --tag-border: #D6E1F2;    /* 标签 / 链路卡描边 */
  --cta-sub: #BBD0F2;       /* CTA / 深色卡副文 */
  --footer-muted: #8CA3C7;  /* 页脚次要 */
  --footer-dim: #6E86A8;    /* 页脚更弱 */
  --footer-line: #2A3A52;   /* 页脚分隔线 */
  --amber-bg: #FFF4E5;      /* 提示条底 */
  --amber-text: #8A5200;    /* 提示条文字 */
  --amber-strong: #B25E00;  /* 状态标签文字 */
  --grad-dark: linear-gradient(to right, #014DB2, #001645); /* 深蓝渐变 */
  --font: "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC",
          "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* 内容容器：1440 画布下左右 140 */
.container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- 导航（组件 3:1）---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .bar {
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 60px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-group { display: flex; align-items: center; gap: 12px; }
.logo-group img { height: 40px; width: auto; object-fit: contain; }
.site-tag {
  background: var(--blue-soft);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: color .15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.phone-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  border-radius: 50px;
  padding: 10px 22px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.phone-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- 面包屑 ---------- */
.breadcrumb {
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb .sep { color: #9AA3AD; }
.breadcrumb .current { color: var(--blue); font-weight: 500; }

/* ---------- Hero（首页 72/140/88 · 子页 56/140/72）---------- */
.hero {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-top: 72px;
  padding-bottom: 88px;
}
.hero.page-hero { padding-top: 56px; padding-bottom: 72px; }
.hero-text { flex: 1; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hero.page-hero .hero-text { gap: 18px; }
.eyebrow {
  align-self: flex-start;
  background: var(--blue-soft);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
}
.h1 { font-size: 40px; font-weight: 700; line-height: 56px; color: var(--ink); }
.hero.page-hero .h1 { line-height: 54px; }
.lead { font-size: 15px; line-height: 28px; color: var(--body); }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  border-radius: 50px;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--blue);
  border-radius: 50px;
  padding: 14px 30px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}
.trust-line { font-size: 13px; color: var(--muted); }
.hero-img {
  width: 620px;
  height: 480px;
  border-radius: 32px;
  object-fit: cover;
  flex-shrink: 0;
}
.hero.page-hero .hero-img { width: 540px; height: 440px; }

/* ---------- 通用分区 ---------- */
.section { display: flex; flex-direction: column; }
.section .kicker { font-size: 13px; font-weight: 600; color: var(--blue); }
.section .h2 { font-size: 32px; font-weight: 700; color: var(--ink); }
.section .h2-sm { font-size: 30px; font-weight: 700; color: var(--ink); }
.section .sec-desc { font-size: 15px; color: var(--muted); }

/* 首页 · 数据条（0/140 上 · gap24）*/
.stats { display: flex; gap: 24px; padding-top: 0; }
.stat-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-v { font-size: 24px; font-weight: 700; color: var(--blue); }
.stat-l { font-size: 13px; color: var(--muted); }

/* 首页 · 三类系统卡 */
.sys-row { display: flex; gap: 24px; }
.sys-card {
  flex: 1;
  border-radius: 32px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.sys-card.dark { background: var(--grad-dark); }
.sys-card.light { background: #fff; border: 1px solid var(--border); }
.sys-card .icon { width: 40px; height: 40px; }
.sys-title { font-size: 21px; font-weight: 700; color: var(--ink); }
.sys-card.dark .sys-title { color: #fff; }
.sys-desc { font-size: 14px; line-height: 24px; color: var(--muted); }
.sys-card.dark .sys-desc { color: var(--cta-sub); }
.sys-link { font-size: 13px; font-weight: 600; color: var(--blue); }
.sys-card.dark .sys-link { color: #fff; }
.sys-link:hover { text-decoration: underline; }

/* 首页 · 为什么选我们（浅蓝分区）*/
.tint-section { background: var(--blue-tint); }
.why-head { display: flex; flex-direction: column; gap: 32px; }
.why-row { display: flex; gap: 24px; }
.why-card {
  flex: 1;
  background: #fff;
  border-radius: 32px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.why-t { font-size: 30px; font-weight: 700; color: var(--blue); }
.why-d { font-size: 14px; line-height: 24px; color: var(--body); }

/* 首页 · 五大服务标签 */
.pill-row { display: flex; flex-wrap: wrap; gap: 14px; }
.pill {
  background: #fff;
  border: 1px solid var(--tag-border);
  border-radius: 50px;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

/* 首页 · 六阶段流程 */
.flow-row { display: flex; gap: 12px; }
.flow-step {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow-num { font-size: 13px; font-weight: 600; color: var(--blue); }
.flow-name { font-size: 15px; font-weight: 600; color: var(--ink); }

/* FAQ 卡（组件 3:56）*/
.faq-list { display: flex; flex-direction: column; gap: 20px; }
.faq-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.faq-q svg { width: 20px; height: 20px; flex-shrink: 0; }
.faq-a { font-size: 14px; line-height: 24px; color: var(--muted); }
.faq-more { font-size: 14px; color: var(--blue); }
.faq-more:hover { text-decoration: underline; }
.related { font-size: 14px; font-weight: 500; color: var(--blue); }

/* 子页 · 功能/价值卡片网格 */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.f-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.card-grid.cols-2 .f-card { padding: 28px 26px; }
.f-card .icon { width: 36px; height: 36px; }
.f-card h3 { font-size: 17px; font-weight: 600; color: var(--ink); }
.f-card p { font-size: 13px; line-height: 22px; color: var(--muted); }

/* 直播页 · 五步链路 */
.chain-row { display: flex; gap: 12px; }
.chain-step {
  flex: 1;
  background: #fff;
  border: 1px solid var(--tag-border);
  border-radius: 24px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chain-step.dark { background: var(--grad-dark); border-color: transparent; }
.chain-num { font-size: 13px; font-weight: 600; color: var(--blue); }
.chain-step.dark .chain-num { color: var(--cta-sub); }
.chain-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.chain-step.dark .chain-name { color: #fff; }
.chain-desc { font-size: 12px; line-height: 19px; color: var(--muted); }
.chain-step.dark .chain-desc { color: var(--cta-sub); }

/* 案例页 */
.case-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 56px;
  padding-bottom: 48px;
}
.case-hero .h1 { font-size: 40px; font-weight: 700; }
.case-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.case-head { display: flex; align-items: center; gap: 14px; }
.case-head h2 { font-size: 22px; font-weight: 700; color: var(--ink); flex: 1; }
.status-pill {
  background: var(--amber-bg);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--amber-strong);
  white-space: nowrap;
}
.case-row { display: flex; gap: 18px; align-items: flex-start; }
.case-label {
  width: 130px;
  flex-shrink: 0;
  background: var(--blue-soft);
  border-radius: 12px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
}
.case-value { flex: 1; font-size: 15px; line-height: 24px; color: var(--ink); }
.note-bar {
  background: var(--amber-bg);
  border-radius: 24px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.note-bar svg { width: 20px; height: 20px; flex-shrink: 0; }
.note-bar p { font-size: 14px; line-height: 22px; color: var(--amber-text); }

/* FAQ 页 */
.faq-page-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 56px;
  padding-bottom: 48px;
}
.faq-page-hero .faq-list { gap: 18px; }

/* 分区留白（严格对应画布各分区 padding）*/
.sec-sys { padding-top: 48px; padding-bottom: 88px; gap: 32px; }
.sec-why { padding-top: 72px; padding-bottom: 72px; gap: 32px; }
.sec-services { padding-top: 72px; gap: 20px; }
.sec-flow { padding-top: 72px; padding-bottom: 72px; gap: 24px; }
.sec-features { padding-top: 0; padding-bottom: 72px; gap: 28px; }
.sec-faq { padding-top: 0; padding-bottom: 72px; gap: 20px; }
.sec-chain { padding-top: 72px; padding-bottom: 72px; gap: 28px; }
.sec-case { padding-top: 0; padding-bottom: 72px; gap: 24px; }

/* ---------- 咨询 CTA 条（组件 3:48）---------- */
.cta-bar { background: var(--blue); }
.cta-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 52px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cta-text { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.cta-title { font-size: 28px; font-weight: 700; color: #fff; }
.cta-sub { font-size: 15px; color: var(--cta-sub); }
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 50px;
  padding: 16px 36px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
  flex-shrink: 0;
}
.cta-btn svg { width: 16px; height: 16px; }

/* ---------- 微信咨询二维码 ---------- */
@media (max-width: 1024px) {
  .cta-inner { flex-wrap: wrap; }
}
.cta-qr {
  background: #fff;
  border-radius: 24px;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-qr:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.cta-qr img { width: 104px; height: 104px; border-radius: 12px; }
.cta-qr span { font-size: 12px; font-weight: 500; color: var(--blue); white-space: nowrap; }
.f-qr { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.f-qr img {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  background: #fff;
  padding: 4px;
  flex-shrink: 0;
}
.f-qr-text { display: flex; flex-direction: column; gap: 4px; }
.f-qr-text b { font-size: 13px; font-weight: 600; color: #fff; }
.f-qr-text span { font-size: 12px; color: var(--footer-muted); }

/* ---------- 页脚（组件 3:21）---------- */
.site-footer { background: var(--ink); color: #fff; }
.site-footer .inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 56px 60px 28px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.footer-top { display: flex; justify-content: space-between; gap: 40px; }
.f-brand { width: 380px; display: flex; flex-direction: column; gap: 14px; }
.f-logo-row { display: flex; align-items: center; gap: 10px; }
.f-logo-row img { height: 40px; width: auto; object-fit: contain; }
.f-logo-row span { font-size: 19px; font-weight: 700; color: #fff; }
.f-tagline { font-size: 14px; color: var(--footer-muted); }
.f-company { font-size: 13px; color: var(--footer-dim); }
.f-col { width: 260px; display: flex; flex-direction: column; gap: 12px; }
.f-contact { width: 340px; display: flex; flex-direction: column; gap: 12px; }
.f-head { font-size: 13px; font-weight: 600; color: #fff; }
.f-col a, .f-contact span { font-size: 13px; color: var(--footer-muted); }
.f-col a:hover { color: #fff; }
.footer-line { height: 1px; background: var(--footer-line); }
.footer-copy {
  font-size: 12px;
  color: var(--footer-dim);
  text-align: center;
}

/* ============================================================
   响应式降级（桌面 1:1 还原，窄屏堆叠）
   ============================================================ */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .site-header .bar { padding: 0 24px; }
  .site-footer .inner { padding: 48px 24px 24px; }
  .cta-inner { padding: 44px 24px; }
  .footer-top { flex-wrap: wrap; }
  .f-brand, .f-col, .f-contact { width: auto; min-width: 220px; }
}

@media (max-width: 1024px) {
  .hero, .hero.page-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 56px;
  }
  .hero-img, .hero.page-hero .hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 620 / 480;
  }
  .stats { flex-wrap: wrap; }
  .stat-card { flex: 1 1 calc(50% - 12px); }
  .sys-row, .why-row { flex-wrap: wrap; }
  .sys-card, .why-card { flex: 1 1 calc(33% - 16px); min-width: 240px; }
  .flow-row, .chain-row { flex-wrap: wrap; }
  .flow-step, .chain-step { flex: 1 1 calc(33% - 8px); min-width: 150px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .h1, .case-hero .h1 { font-size: 34px; line-height: 48px; }
  .section .h2 { font-size: 28px; }
  .section .h2-sm { font-size: 26px; }
  .cta-title { font-size: 24px; }
}

@media (max-width: 640px) {
  .stat-card { flex: 1 1 100%; }
  .sys-card, .why-card { flex: 1 1 100%; }
  .flow-step, .chain-step { flex: 1 1 calc(50% - 6px); }
  .card-grid { grid-template-columns: 1fr; }
  .h1, .case-hero .h1 { font-size: 28px; line-height: 40px; }
  .section .h2 { font-size: 24px; }
  .section .h2-sm { font-size: 22px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .case-card { padding: 24px 20px; }
  .case-row { flex-direction: column; gap: 8px; }
  .case-head { flex-direction: column; align-items: flex-start; }
  .cta-btn { padding: 14px 28px; }
  .faq-card { padding: 20px; }
  .site-tag { display: none; }
}

/* ============================================================
   交互层：链接补全 · 悬浮反馈 · 手风琴 · 入场动效 · 回到顶部
   ============================================================ */
html { scroll-behavior: smooth; }

/* 页脚主站链接（原为纯文字）*/
.f-contact a { font-size: 13px; color: var(--footer-muted); }
.f-contact a:hover { color: #fff; }
.footer-copy a { color: var(--footer-muted); }
.footer-copy a:hover { color: #fff; text-decoration: underline; }

/* 键盘焦点可见 */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 导航：下划线滑入 + 吸顶阴影 ---------- */
.site-header { transition: box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 4px 20px rgba(10, 22, 40, .08); }
.nav-links a { position: relative; padding-bottom: 4px; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transition: width .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* ---------- 按钮 / 标签悬浮 ---------- */
.btn-primary, .phone-btn { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn-primary:hover, .phone-btn:hover {
  background: #003D8F;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(1, 77, 178, .28);
}
.btn-ghost { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn-ghost:hover {
  background: var(--blue-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(1, 77, 178, .14);
}
.cta-btn { transition: transform .2s ease, box-shadow .2s ease; }
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.pill { transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.pill:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(1, 77, 178, .10);
}

/* ---------- 卡片悬浮上浮 ---------- */
.stat-card, .sys-card, .why-card, .f-card, .flow-step, .chain-step, .faq-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.stat-card:hover, .why-card:hover, .f-card:hover,
.flow-step:hover, .chain-step:hover, .faq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10, 22, 40, .08);
  border-color: var(--tag-border);
}
.sys-card.light:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10, 22, 40, .08);
}
.sys-card.dark:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(1, 77, 178, .35);
}

/* ---------- FAQ 手风琴（默认展开，点击收起）---------- */
.faq-q { cursor: pointer; user-select: none; }
.faq-q svg { transition: transform .3s ease; }
.faq-card.collapsed .faq-q svg { transform: rotate(-90deg); }
.faq-a {
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
}
.faq-card.collapsed .faq-a { opacity: 0; }

/* ---------- 滚动入场动效 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- 回到顶部 ---------- */
.back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(1, 77, 178, .30);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
  z-index: 60;
}
.back-top.show { opacity: 1; pointer-events: auto; transform: none; }
.back-top:hover { background: #003D8F; }
.back-top svg { width: 20px; height: 20px; }

/* ---------- 尊重系统减少动效设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}