/* ==========================================================================
   微信数字员工 · 04 秒哒「五笔学习版」
   学习目标模版的设计语言（`miaoda.cn/apps/app-eb8djhqpnsap`，颜色聚类实测）：
     底 #E1FAF1 薄荷绿 · 主色 #00855D 深翠绿 · 字色 #08211C 墨绿黑
     大圆角无边框卡片 · 浅绿方块图标 · 末位反色卡 · 居中区块标题 · 深绿大 CTA
   与 01/02/03 三站刻意区分：这里是"清新大圆角"，不要细线框、不要衬线标题。
   ========================================================================== */

:root {
  --mint:       #e1faf1;   /* 页面底 */
  --mint-2:     #f2faf6;   /* 浅绿块 */
  --mint-3:     #d2f4e7;
  --green:      #00855d;   /* 主色，全站唯一跳色 */
  --green-deep: #006b4a;
  --green-soft: #b8ead7;
  --ink:        #08211c;   /* 墨绿黑，不用纯黑 */
  --ink-2:      #3d5a51;
  --muted:      #7d9a91;
  --line:       #d5efe3;
  --card:       #ffffff;
  --radius:     22px;
  --radius-sm:  16px;
  --shadow:     0 18px 40px -30px rgba(4, 48, 36, .5);
  --wrap:       1140px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
section[id], article[id], div[id] { scroll-margin-top: 104px; }

body {
  margin: 0;
  background: var(--mint);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 74px 0 0; }

/* ===================== 顶栏 ===================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(225, 250, 241, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 14px; height: 76px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-ico { width: 42px; height: 42px; border-radius: 50%; }
.brand-txt { font-size: 17px; font-weight: 800; letter-spacing: .2px; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 26px; }
.nav a {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: background .2s ease, color .2s ease;
}
.nav a:hover { background: rgba(255, 255, 255, .8); color: var(--ink); }
.nav a.active { background: #fff; color: var(--ink); font-weight: 700; }

.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }

.contact-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: border-color .2s ease, color .2s ease;
}
.contact-btn svg { width: 16px; height: 16px; }
.contact-btn:hover { border-color: var(--green-soft); color: var(--green); }

.dl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 14px; font-weight: 700;
  letter-spacing: .3px;
  transition: background .2s ease, translate .2s ease;
}
.dl-btn svg { width: 16px; height: 16px; }
.dl-btn:hover { background: var(--green-deep); translate: 0 -1px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ===================== 首屏 ===================== */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  padding: 56px 52px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(820px 400px at 86% 4%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(158deg, #eafdf6 0%, #e1faf1 48%, #d5f5e9 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  gap: 46px;
  align-items: center;
}
.hero-body { position: relative; z-index: 2; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  letter-spacing: .3px;
}
.hero-eyebrow i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(0, 133, 93, .16);
}

.hero-title {
  margin-top: 18px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.26;
  letter-spacing: -.4px;
  font-weight: 800;
}
.hero-title em { font-style: normal; color: var(--green); }

.hero-desc {
  margin-top: 22px;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
}

.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 15px; font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 16px 30px -18px rgba(0, 133, 93, .9);
  transition: background .2s ease, translate .2s ease, box-shadow .2s ease;
}
.btn-primary svg { width: 17px; height: 17px; }
.btn-primary:hover { background: var(--green-deep); translate: 0 -1px; box-shadow: 0 20px 34px -18px rgba(0, 133, 93, .95); }

.btn-plain {
  display: inline-flex; align-items: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px; font-weight: 700;
  transition: border-color .2s ease, translate .2s ease;
}
.btn-plain:hover { border-color: var(--green-soft); translate: 0 -1px; }

.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--green-soft);
}
.stat { display: flex; flex-direction: column; }
.stat b { font-size: 27px; font-weight: 800; color: var(--green); line-height: 1.1; letter-spacing: -.5px; }
.stat span { margin-top: 6px; font-size: 13px; color: var(--ink-2); }

/* ---------- 首屏右侧：功能面板速览 ---------- */
.panel-card {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 24px;
  padding: 24px 22px 20px;
  box-shadow: 0 22px 46px -34px rgba(4, 48, 36, .55);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.panel-badge {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--mint-2);
  color: var(--green);
  font-size: 12px; font-weight: 700;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.key {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 4px;
  border-radius: 12px;
  background: var(--mint-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.key:hover { background: #fff; border-color: var(--green-soft); transform: translateY(-2px); }

.panel-legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.panel-legend span {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-2);
}
.panel-legend i { width: 100%; height: 4px; border-radius: 3px; }

/* ===================== 区块标题（居中，照模版） ===================== */
.sec-head { text-align: center; margin-bottom: 38px; }
.sec-head h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -.3px;
}
.sec-head p { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }

/* ===================== 卡片（大圆角 + 无边框 + 反色） ===================== */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  box-shadow: 0 16px 34px -30px rgba(4, 48, 36, .45);
  transition: box-shadow .3s ease;
}
.card:hover { box-shadow: 0 26px 46px -30px rgba(4, 48, 36, .55); }

.card-ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 17px;
  background: var(--mint-2);
  color: var(--green);
}
.card-ico svg { width: 26px; height: 26px; }

.card-title { margin-top: 18px; font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.card-desc { margin-top: 12px; font-size: 14px; line-height: 1.9; color: var(--ink-2); }

.card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.card-tags span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mint-2);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
}

.card-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
}

/* 反色卡：整块深绿，视觉重音（照模版的第 6 张） */
.card-solid { background: var(--green); box-shadow: 0 22px 44px -28px rgba(0, 133, 93, .8); }
.card-solid:hover { box-shadow: 0 28px 54px -28px rgba(0, 133, 93, .85); }
.card-solid .card-ico { background: rgba(255, 255, 255, .17); color: #fff; }
.card-solid .card-title { color: #fff; }
.card-solid .card-desc { color: rgba(255, 255, 255, .84); }
.card-solid .card-link { color: #fff; }

/* ===================== 工作台 ===================== */
/* ===================== 界面拆解：一屏三栏（04 专属，纯 CSS 手绘） ===================== */
.deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.pane {
  margin: 0;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  padding: 16px 16px 18px;
  box-shadow: 0 24px 50px -34px rgba(4, 48, 36, .55);
}
.pane-bar { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; }
.pane-dots { display: flex; gap: 5px; }
.pane-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-3); }
.pane-dots i:first-child { background: var(--green-soft); }
.pane-name { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }

.pane-body {
  flex: 1;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--mint-2);
  border-radius: var(--radius-sm);
  padding: 14px;
  min-height: 226px;
}
.pane figcaption { margin-top: 13px; padding: 0 4px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }

/* ① 账号行 */
.acc-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 9px 11px; }
.acc-led { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #cfdcd7; }
.acc-led.is-on { background: var(--green); box-shadow: 0 0 0 4px rgba(0, 133, 93, .14); }
.acc-txt { display: flex; flex-direction: column; min-width: 0; }
.acc-txt b { font-size: 13px; font-weight: 800; }
.acc-txt span { font-size: 11px; color: var(--muted); }
.acc-tag {
  margin-left: auto; flex: none; font-style: normal;
  font-size: 10.5px; font-weight: 700; color: var(--green);
  background: var(--mint); border-radius: 999px; padding: 3px 9px;
}
.acc-tag.is-off { color: var(--muted); background: #eef4f1; }

/* ① 会话行 */
.cs-sep { height: 1px; background: var(--line); margin: 3px 2px; }
.cs-row { display: flex; align-items: center; gap: 10px; padding: 2px 3px; }
.cs-ava {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; font-size: 12.5px; font-weight: 800;
}
.cs-ava.is-b { background: var(--green-soft); color: var(--green-deep); }
.cs-ava.is-c { background: var(--ink); color: #fff; }
.cs-txt { display: flex; flex-direction: column; min-width: 0; }
.cs-txt b { font-size: 12.5px; font-weight: 800; }
.cs-txt span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-unread {
  margin-left: auto; flex: none; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--green); color: #fff;
  font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ② 聊天气泡 */
.bubble {
  margin: 0; max-width: 88%;
  background: #fff; color: var(--ink);
  border-radius: 14px 14px 14px 5px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.6;
}
.bubble.me {
  align-self: flex-end;
  background: var(--green); color: #fff;
  border-radius: 14px 14px 5px 14px;
}
.chat-in {
  margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 7px 7px 7px 14px;
}
.chat-in span { font-size: 12px; color: var(--muted); }
.chat-send { position: relative; margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); }
.chat-send::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; transform: translate(-40%, -50%);
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ③ 功能开关行 */
.fn-row { display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 12px; padding: 10px 12px; }
.fn-txt { display: flex; flex-direction: column; min-width: 0; }
.fn-txt b { font-size: 12.5px; font-weight: 800; }
.fn-txt span { font-size: 11px; color: var(--muted); }
.sw { position: relative; margin-left: auto; flex: none; width: 34px; height: 19px; border-radius: 999px; background: #d9e6e1; transition: background .25s ease; }
.sw::after {
  content: ''; position: absolute; top: 2.5px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: transform .25s ease;
}
.sw.on { background: var(--green); }
.sw.on::after { transform: translateX(14px); }
.fn-hint {
  margin-top: auto; text-align: center;
  font-size: 11.5px; color: var(--muted);
  background: var(--mint); border-radius: 10px; padding: 8px 10px;
}

/* ===================== 上手路径（照模版的"闯关地图"） ===================== */
.route-box {
  background: var(--mint-2);
  border-radius: 26px;
  padding: 30px 32px 26px;
}
.route-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-title { font-size: 15px; font-weight: 700; }
.route-badge {
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 12.5px; font-weight: 700;
}

.route-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 34px 0 8px;
}
.route-line::before {
  content: "";
  position: absolute;
  left: 16.6%; right: 16.6%; top: 26px;
  border-top: 2px dashed var(--green-soft);
}
.route-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.route-node i {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px dashed var(--green-soft);
  color: var(--muted);
  font-size: 16px; font-weight: 800; font-style: normal;
}
.route-node.is-on i {
  background: var(--green);
  border-style: solid;
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(0, 133, 93, .14);
}
.route-node b { font-size: 13.5px; font-weight: 700; }
.route-node:not(.is-on) b { color: var(--muted); font-weight: 600; }

.route-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 26px;
  font-size: 13.5px; color: var(--ink-2);
}
.route-pct { color: var(--green); font-weight: 700; }
.route-bar { margin-top: 10px; height: 7px; border-radius: 999px; background: #fff; overflow: hidden; }
.route-bar i { display: block; height: 100%; width: 34%; border-radius: 999px; background: var(--green); }

/* 步骤列表（照模版的关卡列表：当前项描边高亮 + 状态标签） */
.steps { display: grid; gap: 14px; margin-top: 22px; }
.step {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1.5px solid transparent;
  box-shadow: 0 14px 30px -30px rgba(4, 48, 36, .45);
}
.step.is-active { border-color: var(--green); box-shadow: 0 18px 36px -30px rgba(0, 133, 93, .6); }

.step-no {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--mint-2);
  color: var(--muted);
  font-size: 16px; font-weight: 800;
}
.step.is-active .step-no { background: var(--green); color: #fff; }

.step-txt { min-width: 0; }
.step-txt b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15.5px; font-weight: 800; }
.step-txt p { margin-top: 7px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }

.state {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mint-2);
  color: var(--muted);
  font-size: 11.5px; font-weight: 700; font-style: normal;
}
.state-on { background: var(--green); color: #fff; }

/* ===================== 深绿大 CTA ===================== */
.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--green);
  padding: 66px 52px;
  text-align: center;
}
.cta-inner { position: relative; z-index: 2; }
.cta-card h2 { font-size: clamp(25px, 3.4vw, 36px); font-weight: 800; color: #fff; letter-spacing: -.3px; }
.cta-card p { margin-top: 14px; font-size: 15px; color: rgba(255, 255, 255, .86); }

.cta-actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 32px; }

.btn-white {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 32px;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 15px; font-weight: 800;
  transition: translate .2s ease, box-shadow .2s ease;
  box-shadow: 0 18px 32px -20px rgba(0, 0, 0, .5);
}
.btn-white svg { width: 17px; height: 17px; }
.btn-white:hover { translate: 0 -2px; }

.cta-link { color: #fff; font-size: 14.5px; font-weight: 700; opacity: .92; }
.cta-link:hover { opacity: 1; }

.cta-orb { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.cta-orb-a { width: 260px; height: 260px; left: -70px; bottom: -110px; }
.cta-orb-b { width: 200px; height: 200px; right: -54px; top: -76px; }

/* ===================== 页脚 ===================== */
.footer { margin-top: 78px; background: #fff; border-top: 1px solid var(--line); }
.footer-inner { padding: 48px 24px 40px; }

.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; }
.footer-brand img { border-radius: 50%; }

.footer-qr { display: flex; align-items: center; gap: 14px; }
.footer-qr img { border-radius: 14px; border: 1px solid var(--line); }
.footer-qr-cap { display: flex; flex-direction: column; }
.footer-qr-cap b { font-size: 14.5px; font-weight: 800; }
.footer-qr-cap span { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }

.footer-line {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-2);
}

.footer-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; }
.footer-links a { font-size: 13.5px; font-weight: 600; color: var(--green); }

.footer-legal {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  min-height: 20px;
}
.legal-item { font-size: 12.5px; color: var(--muted); }

.footer-copy { margin-top: 16px; font-size: 12.5px; color: var(--muted); }

/* ===================== 悬浮按钮 / 弹窗 ===================== */
.fab {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 70;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 14px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 18px 34px -18px rgba(0, 133, 93, .95);
}
.fab svg { flex: none; }

.modal { position: fixed; inset: 0; z-index: 90; display: none; }
.modal.open { display: block; }
.modal-mask { position: absolute; inset: 0; background: rgba(8, 33, 28, .5); backdrop-filter: blur(3px); }
.modal-panel {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(340px, calc(100vw - 40px));
  padding: 30px 26px 24px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
  box-shadow: 0 30px 60px -24px rgba(4, 48, 36, .6);
}
.modal-close {
  position: absolute; right: 14px; top: 14px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--mint-2);
  color: var(--ink-2);
  cursor: pointer;
}
.modal-close svg { width: 16px; height: 16px; }
.modal-title { font-size: 16px; font-weight: 800; }
.modal-qr { width: 210px; height: 210px; margin: 18px auto 0; border-radius: 16px; border: 1px solid var(--line); }
.modal-hint { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.modal-open { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--green); }

/* ===================== 响应式 ===================== */
@media (max-width: 1080px) {
  .nav { margin-left: 12px; }
  .hero { grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; padding: 46px 40px; }
  .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }

  .nav.open {
    display: flex;
    position: absolute;
    left: 24px; right: 24px; top: 76px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 24px 44px -26px rgba(4, 48, 36, .5);
  }
  .nav.open a { padding: 12px 14px; border-radius: 14px; }
  .contact-btn { display: none; }

  .hero { grid-template-columns: minmax(0, 1fr); padding: 40px 30px; }
  .panel-card { order: -1; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .section { padding: 56px 0 0; }
  .hero { padding: 32px 22px; border-radius: 24px; }
  .hero-stats { gap: 22px 30px; flex-wrap: wrap; }
  .stat b { font-size: 23px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .deck { grid-template-columns: minmax(0, 1fr); }
  .route-box { padding: 24px 20px 22px; }
  .route-node b { font-size: 12px; }
  .step { padding: 18px 18px; gap: 13px; }
  .cta-card { padding: 48px 24px; border-radius: 24px; }
  .brand-txt { font-size: 15.5px; }
  .dl-btn { padding: 9px 16px; font-size: 13px; }
  .fab { right: 16px; bottom: 16px; padding: 12px; }
  .fab span { display: none; }
  .footer-inner { padding: 40px 24px 34px; }
}

/* ==========================================================================
   渐变主题覆盖层（2026-09-16 追加 · 用户要求"颜色改成渐变"）
   思路：同一色系三色渐变「深绿 → 翠绿 → 亮薄荷青」，按钮/小元件统一 135deg，
   页面底做成带一丝青蓝的柔光渐变，长页面也有层次。
   只覆盖颜色，不动任何尺寸/布局 —— 追加在文件末尾，同选择器后写者胜。
   -------------------------------------------------------------------------- */
:root {
  --grad-page:    linear-gradient(180deg, #eafdf6 0%, #e0f9f0 28%, #d8f4f1 58%, #ddeffb 100%);
  --grad-brand:   linear-gradient(135deg, #00a172 0%, #00855d 50%, #00bb8c 100%);
  --grad-brand-h: linear-gradient(135deg, #00b681 0%, #00996c 50%, #14cfa2 100%);
  --grad-deep:    linear-gradient(140deg, #00694b 0%, #00855d 40%, #00a87b 72%, #17c79a 100%);
  --grad-soft:    linear-gradient(160deg, #eafdf6 0%, #d9f7ec 58%, #cdeef4 100%);
  --grad-text:    linear-gradient(100deg, #00855d 0%, #00b98a 55%, #0fa6bb 100%);
  --grad-card:    linear-gradient(168deg, #ffffff 0%, #fcfffe 58%, #f2fbf7 100%);
}

/* 页面底：整页铺满的柔光渐变（薄荷绿 → 淡青蓝）
   ⚠️ 不要用 background-attachment: fixed —— 渐变会被当成视口大小的图块重复平铺，
   长页面出现横向色带。就让渐变随页面高度铺满即可。 */
body { background: var(--grad-page); background-repeat: no-repeat; }

/* 顶栏玻璃层跟着底色走 */
.topbar { background: rgba(229, 251, 244, .82); }

/* 卡片不再死白，带一点底色余温 */
.card, .key, .step, .pane { background: var(--grad-card); }

/* 路线框 / 窗口内层：浅绿渐变，和白卡拉开层次 */
.route-box { background: var(--grad-soft); }
.pane-body { background: linear-gradient(165deg, #f4fdf9 0%, #edfaf6 56%, #e9f6fa 100%); }

/* 首屏：双色柔光（右上白光 + 左下青蓝光斑） */
.hero {
  background:
    radial-gradient(760px 380px at 88% 2%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(520px 320px at 4% 98%, rgba(15, 166, 187, .18) 0%, rgba(15, 166, 187, 0) 70%),
    linear-gradient(158deg, #eafdf6 0%, #ddf8ef 46%, #d5f1f5 100%);
}

/* 大标题第二行改渐变字 */
.hero-title em {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 按钮：全部改渐变 */
.dl-btn, .btn-primary { background: var(--grad-brand); }
.dl-btn:hover, .btn-primary:hover { background: var(--grad-brand-h); }
.btn-primary:hover { box-shadow: 0 20px 34px -18px rgba(0, 133, 93, .95); }

/* 末位反色卡 / 深绿大 CTA：深绿渐变 + 顶部高光 + 一角青蓝 */
.card-solid {
  background:
    radial-gradient(420px 260px at 88% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 62%),
    var(--grad-deep);
}
.cta-card {
  background:
    radial-gradient(620px 360px at 84% -6%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(460px 300px at 6% 108%, rgba(15, 166, 187, .30) 0%, rgba(15, 166, 187, 0) 70%),
    var(--grad-deep);
}

/* 小元件统一渐变 */
.route-badge, .state-on, .step.is-active .step-no,
.route-node.is-on i, .cs-ava, .cs-unread, .chat-send, .sw.on, .bubble.me, .fab {
  background: var(--grad-brand);
}
.pane-dots i:first-child { background: var(--grad-brand); }

/* 进度条：横向渐变 + 一点青 */
.route-bar i { background: linear-gradient(90deg, #00855d 0%, #00bb8c 58%, #0fa6bb 100%); }

/* 面板卡加一圈极淡的绿描边，白卡不再"平" */
.pane { box-shadow: 0 24px 50px -34px rgba(4, 48, 36, .55), inset 0 0 0 1px rgba(0, 168, 123, .10); }
.step.is-active { border-color: #00a87b; }

/* 页脚：白 → 极浅薄荷 */
.footer { background: linear-gradient(180deg, #ffffff 0%, #f5fcf8 100%); }

/* 品牌头像加一圈渐变光环 */
.brand-ico { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 168, 123, .38); }