/* ===========================================================
   黄蕾 · 制造业财务数智化 落地页
   设计原则:执行层视角、快速可读、移动优先、无装饰性动画
   =========================================================== */

:root{
  --ink:#14181f;
  --ink-2:#3d4654;
  --ink-3:#6b7686;
  --line:#e3e7ee;
  --bg:#ffffff;
  --bg-2:#f6f8fb;
  --bg-3:#eef2f8;
  --navy:#123a5e;
  --navy-2:#0d2c49;
  --accent:#c9622a;
  --accent-soft:#fdf3ec;
  --radius:10px;
  --wrap:1080px;
  --narrow:680px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

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

h1,h2,h3{line-height:1.3;margin:0 0 .6em}
h2{font-size:1.6rem;letter-spacing:-.01em}
h3{font-size:1.08rem}
p{margin:0 0 1.1em}
strong{font-weight:650}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap.narrow{max-width:var(--narrow)}

section{padding:64px 0}

.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--navy);color:#fff;padding:12px 18px;z-index:100;
}
.skip-link:focus{left:0}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  padding:14px 30px;
  border:0;
  border-radius:var(--radius);
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease;
}
.btn:hover{background:#b0551f}
.btn:focus-visible{outline:3px solid #f0b78f;outline-offset:2px}
.btn-lg{font-size:1.06rem;padding:16px 34px}
.btn-full{width:100%}
.btn[disabled]{background:var(--ink-3);cursor:not-allowed}

/* ---------- 首屏 ---------- */
.hero{
  background:linear-gradient(160deg,var(--navy-2) 0%,var(--navy) 62%,#1a4d78 100%);
  color:#fff;
  padding:78px 0 68px;
}
.hero .eyebrow{
  font-size:.86rem;
  letter-spacing:.04em;
  color:#a9c6de;
  margin:0 0 20px;
}
.hero h1{
  font-size:2.35rem;
  letter-spacing:-.02em;
  margin-bottom:.7em;
  font-weight:700;
}
.hero .hl{color:#ffc38f}
.hero .lede{
  font-size:1.1rem;
  color:#d6e3ee;
  max-width:38em;
  margin-bottom:1.9em;
}
.hero .trust{
  margin:26px 0 0;
  font-size:.86rem;
  color:#9dbad2;
}

/* ---------- 痛点 ---------- */
.pain{background:var(--bg-2);border-bottom:1px solid var(--line)}
.pain blockquote{
  margin:0 0 1.6em;
  padding:26px 28px;
  background:#fff;
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
}
.pain blockquote p{margin-bottom:.9em}
.pain blockquote p:last-child{margin-bottom:0}
.pain .q-tail{
  font-size:1.12rem;
  font-weight:650;
  color:var(--navy);
}

/* ---------- 三个场面 ---------- */
.scenes h2{text-align:center;margin-bottom:1.6em}
.scene-grid{
  list-style:none;
  margin:0 0 1.4em;
  padding:0;
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
}
.scene-grid li{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px;
}
.scene-grid h3{color:var(--navy);margin-bottom:.7em}
.scene-grid p{font-size:.95rem;margin-bottom:.9em;color:var(--ink-2)}
.scene-grid .after{
  margin:0;
  padding-top:12px;
  border-top:1px dashed var(--line);
  color:var(--navy);
  font-size:.93rem;
}
.scenes .note{
  text-align:center;
  font-size:.84rem;
  color:var(--ink-3);
  margin:0;
}

/* ---------- 我是谁 ---------- */
.who{background:var(--bg-3)}
.facts{
  list-style:none;
  margin:2em 0;
  padding:0;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.facts li{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 14px;
  text-align:center;
}
.facts .num{
  display:block;
  font-size:1.5rem;
  font-weight:700;
  color:var(--navy);
  line-height:1.2;
}
.facts .lbl{
  display:block;
  font-size:.82rem;
  color:var(--ink-3);
  margin-top:5px;
}
.quote-client{
  background:var(--accent-soft);
  border-left:4px solid var(--accent);
  padding:20px 24px;
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink-2);
}
.quote-client strong{color:var(--ink);font-size:1.06rem}

/* ---------- 资料包 ---------- */
.pack{background:var(--bg-2);border-top:1px solid var(--line)}
.pack-lede{
  color:var(--ink-2);
  margin-bottom:2em;
  padding-bottom:1.2em;
  border-bottom:1px solid var(--line);
}
.pack-list{
  list-style:none;
  margin:0 0 1.8em;
  padding:0;
}
.pack-list li{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  margin-bottom:14px;
}
.pack-list .tag{
  flex:0 0 auto;
  width:34px;height:34px;
  background:var(--navy);
  color:#fff;
  border-radius:8px;
  font-size:.82rem;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.pack-list h3{margin-bottom:.4em;color:var(--navy)}
.pack-list p{margin:0;font-size:.95rem;color:var(--ink-2)}
.pack-note{
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  padding:15px 18px;
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.93rem;
  color:var(--ink-2);
  margin:0;
}

@media (max-width:560px){
  .pack-list li{padding:17px 16px;gap:13px}
  .pack-list .tag{width:28px;height:28px;font-size:.76rem}
}

/* ---------- 表单 ---------- */
.signup{background:var(--navy-2);color:#fff}
.signup h2{color:#fff}
.form-lede{color:#c4d6e4;margin-bottom:2em}
.field{margin-bottom:18px}
.field label{
  display:block;
  font-size:.92rem;
  font-weight:600;
  margin-bottom:7px;
  color:#e8f0f6;
}
.field .req{color:#ffb37a}
.field .opt{font-weight:400;color:#93aec4;font-size:.84rem}
.field input{
  width:100%;
  font-family:inherit;
  font-size:1rem;
  padding:13px 15px;
  border:1.5px solid #35597c;
  border-radius:var(--radius);
  background:#fff;
  color:var(--ink);
}
.field input:focus{
  outline:0;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(201,98,42,.28);
}
.field input[aria-invalid="true"]{border-color:#ff9f7a}
.err{
  margin:6px 0 0;
  font-size:.85rem;
  color:#ffb9a0;
}
.privacy{
  margin:16px 0 0;
  font-size:.82rem;
  line-height:1.6;
  color:#9dbad2;
}
.form-status{
  margin:16px 0 0;
  font-size:.95rem;
  font-weight:600;
  color:#9ce0b4;
}
.form-status.is-error{color:#ffb9a0}

/* ---------- 页脚 ---------- */
.foot{
  background:#0a2036;
  color:#8fa9c0;
  padding:38px 0;
  font-size:.88rem;
}
.foot p{margin:0 0 .5em}
.foot strong{color:#dbe7f0}
.foot .creds{color:#7d97ae}
.foot .tiny{font-size:.8rem;color:#61798f;margin-top:1em}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  body{font-size:16px}
  section{padding:48px 0}
  .hero{padding:56px 0 50px}
  .hero h1{font-size:1.78rem}
  .hero .lede{font-size:1.02rem}
  h2{font-size:1.38rem}
  .pain blockquote{padding:20px 20px}
  .btn-lg{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- 提交成功:立即下载 + 邀请解锁 ---------- */
.done{color:#fff}
.done-greet{
  font-size:1.24rem;
  font-weight:700;
  margin:0 0 6px;
  color:#fff;
}
.done-sub{margin:0 0 22px;color:#c4d6e4;font-size:.95rem}
.dl-list{display:flex;flex-direction:column;gap:11px;margin-bottom:30px}
.dl-item{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 17px;
  background:#fff;
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink);
  transition:transform .12s ease;
}
.dl-item:hover{transform:translateY(-1px)}
.dl-item:focus-visible{outline:3px solid #f0b78f;outline-offset:2px}
.dl-num{
  flex:0 0 auto;
  width:30px;height:30px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:7px;
  font-size:.8rem;
  font-weight:700;
}
.dl-name{flex:1;font-weight:600;font-size:.98rem;line-height:1.4}
.dl-go{
  flex:0 0 auto;
  font-size:.85rem;
  font-weight:600;
  color:var(--accent);
  white-space:nowrap;
}
.invite{
  border:1px solid #35597c;
  border-radius:var(--radius);
  padding:22px 20px;
  background:rgba(255,255,255,.04);
}
.invite-t{margin:0 0 8px;font-size:1.04rem;font-weight:700;color:#fff}
.invite-p{margin:0 0 20px;font-size:.92rem;line-height:1.7;color:#c4d6e4}
.invite-p strong{color:#ffd7ba;font-weight:600}
.invite-label{margin:0;font-size:.82rem;color:#93aec4}
.invite-code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:2rem;
  font-weight:700;
  letter-spacing:.18em;
  color:#ffb37a;
  margin:4px 0 14px;
}
.invite-link{
  word-break:break-all;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.82rem;
  color:#c4d6e4;
  background:rgba(0,0,0,.22);
  border-radius:7px;
  padding:11px 13px;
  margin-bottom:14px;
}
.done-foot{
  margin:24px 0 0;
  font-size:.85rem;
  line-height:1.7;
  color:#9dbad2;
}
@media (max-width:560px){
  .dl-item{padding:13px 14px;gap:11px}
  .dl-go{font-size:.8rem}
  .invite-code{font-size:1.7rem}
}

/* ---------- 「我是谁」名片:接入真人照片 ---------- */
.who-head{
  display:flex;
  align-items:center;
  gap:20px;
  margin:0 0 2em;
  padding:20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.who-photo{
  flex:0 0 auto;
  width:100px;height:100px;
  /* 新头像 huanglei-avatar.jpg 已按人脸坐标裁好，头顶预留余量，
     可安全用圆形裁切。 */
  border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 0 0 1px var(--line);
}
.who-id{min-width:0}
.who-name{
  margin:0 0 5px;
  font-size:1.22rem;
  font-weight:700;
  color:var(--navy);
  line-height:1.3;
}
.who-role{margin:0 0 3px;font-size:.93rem;color:var(--ink-2);line-height:1.5}
.who-cert{margin:0;font-size:.82rem;color:var(--ink-3);line-height:1.5}
@media (max-width:520px){
  .who-head{gap:15px;padding:16px}
  .who-photo{width:80px;height:80px}
  .who-name{font-size:1.1rem}
  .who-role{font-size:.87rem}
}

/* ---------- 线性图标:统一描边,不用填充,不引入图标字体 ---------- */
.ico{
  width:26px;height:26px;
  display:block;
  margin:0 0 12px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- 资料包:序号牌换成 PDF 图标 + 编号 ---------- */
.pack-list .tag{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  line-height:1;
}
.pack-list .tag b{font-size:.78rem;letter-spacing:.04em}
.ico-pdf{
  width:20px;height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- 数字卡:顶部色条,摆脱纯文字块观感 ---------- */
.facts li{position:relative;overflow:hidden}
.facts li:before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--accent);
  opacity:.8;
}