/* ==========================================================
   中鑫保理 · 电商保理融资方案 H5 落地页
   移动端优先，桌面端居中卡片式呈现
   ========================================================== */

:root{
  --blue-900:#0B47A6;
  --blue-800:#0E52BE;
  --blue-700:#1568D8;
  --blue-600:#1F76DF;
  --blue-500:#2E86F0;
  --blue-400:#5AA8F0;
  --blue-050:#EAF3FE;
  --blue-025:#F2F7FE;

  --ink:#171C28;
  --ink-2:#3C4658;
  --gray:#8A93A3;
  --gray-2:#A9B2C0;
  --line:#E8EDF5;
  --bg:#F3F6FB;
  --white:#fff;

  --danger:#E8443A;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow-card:0 10px 30px rgba(18,52,110,.10);
  --shadow-btn:0 10px 22px rgba(26,102,218,.30);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;
  font-family:var(--font);
  color:var(--ink);
  background:#E9EEF7;
  background-image:
    radial-gradient(1000px 620px at 12% -8%, #CFE2FA 0%, rgba(207,226,250,0) 60%),
    radial-gradient(900px 560px at 92% 4%, #DDE8F9 0%, rgba(221,232,249,0) 62%);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
p,h1,h2,h3,h4{margin:0}

/* 手机容器 */
.phone{
  position:relative;
  width:100%;
  max-width:480px;
  margin:0 auto;
  background:var(--white);
  min-height:100vh;
  overflow:clip;
  box-shadow:0 0 0 1px rgba(12,40,90,.05), 0 24px 70px rgba(15,45,100,.14);
}
@media (max-width:520px){
  .phone{box-shadow:none}
  body{background:#fff;background-image:none}
}

/* ============ 顶部栏 ============ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;
  height:48px;padding:0 8px;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(232,237,245,.9);
}
.topbar-back{
  width:36px;height:36px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--ink);cursor:pointer;
  border-radius:50%;
}
.topbar-back:active{background:#F1F4FA}
.topbar-title{
  flex:1;text-align:center;font-size:16px;font-weight:600;letter-spacing:.02em;color:var(--ink);
}
.topbar-ph{width:36px}

/* ============ 首屏 ============ */
.hero{
  position:relative;
  padding:26px 16px 0;
  background:linear-gradient(168deg,#0C4EB8 0%,#1668D8 34%,#3E93EA 62%,#7FBBF3 84%,#D6E8FB 100%);
  overflow:hidden;
}
.hero-glow{
  position:absolute;inset:auto -30% 34% -30%;height:220px;
  background:radial-gradient(closest-side,rgba(255,255,255,.30),rgba(255,255,255,0));
  pointer-events:none;
}
.hero-head{position:relative;padding-right:96px;min-height:104px}
.eyebrow{
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.86);font-size:14px;letter-spacing:.06em;
  margin-bottom:8px;
}
.eyebrow i{display:block;width:22px;height:1px;background:rgba(255,255,255,.7)}
.hero-title{
  font-size:clamp(25px,7.5vw,31px);line-height:1.16;font-weight:800;color:#fff;letter-spacing:.005em;
  text-shadow:0 2px 12px rgba(4,36,90,.16);
}
.hero-sub{
  margin-top:12px;font-size:16px;color:rgba(255,255,255,.95);font-weight:500;letter-spacing:.02em;
}
.hero-sub2{
  margin-top:5px;font-size:15px;color:rgba(255,255,255,.82);letter-spacing:.06em;
}
.hero-sub2 b{color:rgba(255,255,255,.55);font-weight:400;margin:0 2px}

.hero-badge{
  position:absolute;top:-2px;right:-2px;
  width:82px;height:82px;display:grid;place-items:center;
  border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(3px);
}

/* 数据卡 */
.stat-card{
  position:relative;
  margin-top:20px;
  display:flex;align-items:stretch;
  background:#fff;
  border-radius:var(--radius-lg);
  padding:18px 6px 20px;
  box-shadow:0 14px 34px rgba(9,42,96,.16);
}
.stat{flex:1 1 0;min-width:0;text-align:center;padding:0 4px}
.stat-k{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:2.7em;
  font-size:12.5px;line-height:1.35;color:var(--gray);letter-spacing:.02em;
}
.stat-k2{font-size:11px;line-height:1.35}
.stat-v{
  white-space:nowrap;
  margin-top:8px;
  font-size:30px;line-height:1.06;font-weight:800;color:#0F2B57;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.stat-v em{
  font-style:normal;font-size:13px;font-weight:600;margin-left:1px;color:#4A5A72;
  vertical-align:2px;
}
.stat-v-blue{color:var(--blue-700)}
.stat-qi{font-size:13px;font-weight:600;margin-left:1px;vertical-align:2px;color:var(--blue-700)}
.stat-sep{width:1px;background:linear-gradient(180deg,rgba(232,237,245,0),#E8EDF5 22%,#E8EDF5 78%,rgba(232,237,245,0));margin:4px 0}

/* 首屏 CTA */
.hero-cta{position:relative;margin-top:20px}
.hero-cta .btn-primary{
  background:#fff;color:var(--blue-700);
  box-shadow:0 12px 26px rgba(6,38,92,.20);
}
.hero-cta .btn-primary:active{background:#F4F8FF}

/* 信任标签 */
.trust{
  margin-top:22px;
  display:flex;align-items:center;justify-content:center;gap:26px;
  padding:0 0 26px;
  color:#2C6BB8;
}
.trust-item{
  display:flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:500;letter-spacing:.02em;
  color:#2A66B0;
}
.trust-item svg{opacity:.9}

/* ============ 通用按钮 ============ */
.btn-primary{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:50px;border:0;border-radius:26px;
  background:linear-gradient(96deg,#2E86F0 0%,#1A66DA 100%);
  color:#fff;font-size:17px;font-weight:600;letter-spacing:.04em;
  box-shadow:var(--shadow-btn);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn-primary:active{transform:translateY(1px) scale(.995);box-shadow:0 6px 16px rgba(26,102,218,.26)}
.btn-primary[disabled]{opacity:.62;box-shadow:none;cursor:default}
.btn-sm{height:46px;font-size:16px;border-radius:24px}

/* ============ 区块 ============ */
.sec{padding:26px 16px 0}
.sec-apply{padding-top:22px;background:#fff;scroll-margin-top:54px}

.sec-title{
  display:flex;align-items:center;justify-content:center;
  margin:0 0 18px;
}
.sec-title span{
  position:relative;
  font-size:17px;font-weight:700;color:var(--ink);letter-spacing:.02em;
  padding:0 16px;
}
.sec-title span::before,
.sec-title span::after{
  content:"";position:absolute;top:50%;width:28px;height:1px;
  background:linear-gradient(90deg,rgba(180,192,210,0),#C6D0DE);
}
.sec-title span::before{left:-22px;transform:scaleX(-1)}
.sec-title span::after{right:-22px}

/* ============ 表单 ============ */
.form-card{
  background:#fff;
  border-radius:18px;
  padding:24px 18px 20px;
  box-shadow:0 12px 34px rgba(20,52,104,.09);
  border:1px solid #EFF3F9;
}
.form-head h2{
  font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.01em;
}
.form-head p{
  margin-top:8px;font-size:13.5px;color:var(--gray);line-height:1.55;
}

#applyForm{margin-top:20px}
.field{margin-bottom:16px}
.field label{
  display:block;font-size:14.5px;font-weight:500;color:var(--ink-2);
  margin-bottom:9px;
}
.field label i{color:var(--danger);font-style:normal;margin-right:3px}
.field label .opt{font-size:12.5px;color:var(--gray-2);font-weight:400}

.control{position:relative}
.control input,
.control select{
  width:100%;height:48px;
  padding:0 15px;
  font-size:15.5px;color:var(--ink);
  background:#F7F9FC;
  border:1px solid #E8EDF5;
  border-radius:12px;
  outline:none;
  font-family:inherit;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
  appearance:none;
}
.control input::placeholder{color:#B7C0CE;font-size:15px}
.control input:focus,
.control select:focus{
  background:#fff;border-color:#8EBCF5;
  box-shadow:0 0 0 3px rgba(46,134,240,.12);
}
.control select{color:var(--ink);padding-right:40px}
.control-sel .sel-arrow{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:#9AA6B8;pointer-events:none;
}

.field .err{
  display:none;
  margin-top:7px;font-size:12.5px;color:var(--danger);
}
.field.is-err input,
.field.is-err select{border-color:#F3B4AF;background:#FFF9F8}
.field.is-err .err{display:block}
.field.shake{animation:shake .34s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  50%{transform:translateX(5px)}
  80%{transform:translateX(-3px)}
}

.btn-submit{margin-top:24px}
.btn-submit svg{opacity:.9}

/* 协议勾选 */
.agree{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:16px;padding:0 4px;
  font-size:12.5px;color:var(--gray);line-height:1.6;
}
.cb{
  flex:0 0 auto;width:16px;height:16px;margin-top:2px;
  border:1.4px solid #C7D0DE;border-radius:50%;
  background:#fff;cursor:pointer;position:relative;
  transition:background .16s ease,border-color .16s ease;
}
.cb.on{background:var(--blue-700);border-color:var(--blue-700)}
.cb.on::after{
  content:"";position:absolute;left:5px;top:2px;
  width:4px;height:8px;
  border:1.6px solid #fff;border-top:0;border-left:0;
  transform:rotate(42deg);
}
.agree-txt a{color:var(--blue-700);padding:0 1px}
.agree.is-err .cb{border-color:var(--danger);box-shadow:0 0 0 3px rgba(232,68,58,.10)}
.agree.is-err{animation:shake .34s ease}

/* 提交成功 */
.form-ok{text-align:center;padding:26px 6px 10px}
.ok-icon{
  width:64px;height:64px;margin:0 auto 18px;
  display:grid;place-items:center;
  border-radius:50%;color:#fff;
  background:linear-gradient(140deg,#41B37C,#22915F);
  box-shadow:0 12px 24px rgba(34,145,95,.24);
}
.form-ok h3{font-size:20px;font-weight:700;color:var(--ink)}
.form-ok p{margin-top:10px;font-size:14px;color:var(--gray);line-height:1.75}
.form-ok p b{color:var(--ink-2);font-weight:600}
.ok-tip{
  display:inline-block;margin-top:18px;padding:8px 16px;
  background:#F4F8FE;border-radius:20px;
  font-size:13px;color:var(--blue-700);font-weight:500;
}

/* ============ 合规提醒 ============ */
.compliance{
  margin-top:30px;padding:28px 22px 8px;
  background:linear-gradient(180deg,#F7F9FC,#F3F6FB);
  border-top:1px solid #EEF2F8;
}
.sec-title-line span{font-size:15px;color:#7A8698;font-weight:600}
.cp-list p{
  text-align:center;font-size:13px;line-height:2.05;color:#98A2B3;
  letter-spacing:.01em;
}

/* ============ 页脚 ============ */
.footer{
  padding:10px 22px 26px;
  background:#F3F6FB;
  text-align:center;
  font-size:12.5px;color:#8F9AAB;line-height:2;
}
.footer a{color:#6F7C90}
.footer-copy{margin-top:6px;color:#A6B0C0;font-size:12px}

.safe-bottom{height:0;padding-bottom:env(safe-area-inset-bottom);background:#F3F6FB}

/* ============ 协议滑层 ============ */
.sheet-mask{
  position:fixed;inset:0;z-index:80;
  background:rgba(12,24,44,.44);
  opacity:0;visibility:hidden;
  transition:opacity .26s ease,visibility .26s ease;
  backdrop-filter:blur(1px);
}
.sheet-mask.on{opacity:1;visibility:visible}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  width:100%;max-width:480px;margin:0 auto;
  height:88vh;height:88dvh;
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:20px 20px 0 0;
  transform:translateY(101%);
  transition:transform .32s cubic-bezier(.32,.72,.24,1);
  box-shadow:0 -12px 40px rgba(10,30,66,.20);
}
.sheet.on{transform:translateY(0)}
.sheet-bar{
  position:relative;flex:0 0 auto;
  display:flex;align-items:center;
  height:54px;padding:0 8px;
  border-bottom:1px solid #EFF3F9;
}
.sheet-bar::before{
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;border-radius:2px;background:#E3E9F2;
}
.sheet-close{
  width:40px;height:40px;display:grid;place-items:center;
  border:0;background:#F3F6FA;color:#5C6A7E;cursor:pointer;border-radius:50%;
}
.sheet-close:focus{outline:none}
.sheet-close:focus-visible{outline:2px solid #BFD9F7;outline-offset:-2px}
.sheet-close:active{background:#E7EDF6}
.sheet-title{flex:1;text-align:center;font-size:15.5px;font-weight:600;color:var(--ink)}
.sheet-ph{width:40px}
.sheet-body{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 20px 28px;
  font-size:14px;color:#46505F;line-height:1.85;
}
.sheet-foot{
  flex:0 0 auto;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid #EFF3F9;
  background:rgba(255,255,255,.97);
}

/* 协议正文 */
.sheet-body h1{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.doc-meta{
  margin:0 0 18px;
  text-align:center;font-size:12px;color:#A6B0C0;
}
.sheet-body h2{
  font-size:14.5px;font-weight:700;color:var(--ink);
  margin:22px 0 8px;
  padding-left:9px;position:relative;
}
.sheet-body h2::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:13px;border-radius:2px;
  background:linear-gradient(180deg,#4C9BF2,#1F76DF);
}
.doc-p{margin:0 0 10px;text-align:justify}
.doc-p b{font-weight:600;color:#2C3542}
.doc-ol{margin:0 0 10px;padding-left:20px}
.doc-ol li{margin-bottom:7px;text-align:justify}
.doc-ol li b{font-weight:600;color:#2C3542}

/* ============ 小屏适配 ============ */
@media (max-width:359px){
  .hero{padding:22px 13px 0}
  .hero-head{padding-right:74px;min-height:90px}
  .hero-badge{width:66px;height:66px;border-radius:16px}
  .hero-badge svg{width:42px;height:42px}
  .stat-card{padding:16px 4px 18px}
  .stat-v{font-size:26px}
  .stat-k{font-size:11.5px}
  .trust{gap:14px}
  .trust-item{font-size:12.5px;gap:4px}
  .sec,.sec-apply{padding-left:13px;padding-right:13px}
  .form-card{padding:20px 14px 16px}
}

@media (prefers-reduced-motion:reduce){
  .sheet,.sheet-mask,.btn-primary,.cb{transition:none}
  .field.shake,.agree.is-err{animation:none}
}