/* ============================================================
   聚合支付平台官网 JuHePay · 中国银行风格配色
   主色：中行红 #BA0C2F · 深红 #5C0A18 / #7A0C1F · 点缀：中行金 #C9A227 · 底色：暖白 #F8F5F5
   ============================================================ */
:root{
  --navy:#5C0A18;--navy-2:#6E0A1B;--blue:#BA0C2F;--blue-d:#8E0A24;
  --cyan:#C9A227;--gold:#C9A227;--bg:#F8F5F5;--card:#ffffff;
  --text:#2B2B2B;--muted:#767676;--line:#E8E3E3;--radius:16px;--max:1180px;
  --shadow:0 10px 34px rgba(92,10,24,.10);--shadow-lg:0 24px 60px rgba(60,6,16,.28);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:var(--blue);text-decoration:none;}a:hover{color:var(--blue-d);}
img{max-width:100%;vertical-align:middle;}
ul{list-style:none;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.sec{padding:78px 0;}
.sec-tight{padding:56px 0;}

/* ---------- 顶部导航 ---------- */
.site-header{position:sticky;top:0;z-index:1500;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.header-inner{max-width:var(--max);margin:0 auto;height:66px;padding:0 24px;display:flex;align-items:center;gap:26px;}
.brand{display:flex;align-items:center;gap:10px;font-size:1.16rem;font-weight:800;color:var(--navy);white-space:nowrap;}
.brand img{width:34px;height:34px;}
.brand small{font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:1px;}
.main-nav{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap;}
.main-nav a{color:var(--text);font-size:.94rem;font-weight:500;padding:21px 0;border-bottom:3px solid transparent;}
.main-nav a:hover,.main-nav a.active{color:var(--blue);border-bottom-color:var(--blue);}
.header-actions{display:flex;gap:10px;align-items:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 26px;border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;border:none;transition:.2s;}
.btn-blue{background:var(--blue);color:#fff!important;box-shadow:0 8px 20px rgba(186,12,47,.32);}
.btn-blue:hover{background:var(--blue-d);}
.btn-ghost{background:transparent;color:#fff!important;border:1.5px solid rgba(255,255,255,.55);}
.btn-gold{background:linear-gradient(120deg,#E6C87E,var(--gold));color:#3d2b05!important;font-weight:700;}
.btn-line{background:#fff;color:var(--blue)!important;border:1.5px solid var(--blue);}
.nav-toggle{display:none;margin-left:auto;background:none;border:none;font-size:1.6rem;color:var(--blue);cursor:pointer;}
.m-nav{display:none;background:#fff;border-top:1px solid var(--line);padding:12px 20px;flex-direction:column;gap:6px;}
.m-nav a{padding:11px 14px;border-radius:10px;background:var(--bg);color:var(--text);font-weight:500;}
.m-nav.open{display:flex;}

/* ---------- 首屏：中行红金融风 ---------- */
.hero{position:relative;background:radial-gradient(1100px 500px at 78% -10%,#B3122F 0%,transparent 60%),linear-gradient(128deg,var(--navy) 0%,#7A0C1F 55%,#A8112C 100%);color:#fff;overflow:hidden;}
.hero-net{position:absolute;inset:0;opacity:.5;pointer-events:none;}
.hero-inner{position:relative;max-width:var(--max);margin:0 auto;padding:84px 24px 56px;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.5);color:#EBD59A;padding:5px 16px;border-radius:999px;font-size:.85rem;font-weight:600;margin-bottom:20px;}
.hero h1{font-size:2.55rem;font-weight:800;line-height:1.28;margin-bottom:16px;}
.hero h1 .hl{background:linear-gradient(90deg,#F3D9A0,#D9AE4A);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .lead{font-size:1.02rem;color:#EBD3D7;max-width:560px;margin-bottom:30px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px;}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:38px;border-top:1px solid rgba(255,255,255,.14);padding-top:26px;width:fit-content;}
.hero-stats .num{font-size:1.72rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;}
.hero-stats .num i{font-style:normal;color:var(--gold);font-size:1.1rem;}
.hero-stats .lbl{font-size:.82rem;color:#D3BFC3;}

/* 注册卡片（参考截图右侧白卡） */
.reg-card{position:relative;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:30px 30px 26px;color:var(--text);}
.reg-card h2{font-size:1.18rem;font-weight:800;color:var(--navy);text-align:center;}
.reg-card .sub{text-align:center;color:var(--muted);font-size:.85rem;margin:4px 0 20px;}
.reg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.reg-step{text-align:center;padding:14px 6px;border:1px solid var(--line);border-radius:12px;}
.reg-step .ico{font-size:1.5rem;margin-bottom:6px;}
.reg-step p{font-size:.8rem;color:var(--muted);}
.reg-note{text-align:center;font-size:.78rem;color:var(--muted);margin-top:14px;}
.reg-note a{color:var(--blue);font-weight:600;}

/* ---------- 实时通道监控带（数据可视化） ---------- */
.monitor{background:var(--navy);color:#fff;padding:40px 0 46px;}
.monitor-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.monitor-head h2{font-size:1.3rem;font-weight:800;}
.monitor-head h2 b{color:var(--cyan);}
.monitor-head .live{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:#EBD59A;}
.live-dot{width:9px;height:9px;border-radius:50%;background:#E8C97A;box-shadow:0 0 0 4px rgba(201,162,39,.18);animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(201,162,39,.22)}50%{box-shadow:0 0 0 8px rgba(201,162,39,.06)}}
.monitor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.mch{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 20px;}
.mch .name{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:12px;color:#F2E4E6;}
.mch .pct{color:var(--cyan);font-weight:700;font-variant-numeric:tabular-nums;}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),#E8C97A);width:0;transition:width 1.4s cubic-bezier(.2,.7,.3,1);}
.mch.meta{display:flex;flex-direction:column;justify-content:center;gap:6px;}
.mch.meta .big{font-size:1.5rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;}
.mch.meta .cap{font-size:.8rem;color:#D3BFC3;}

/* ---------- 收款工具（参考截图四卡） ---------- */
.tools{background:#fff;}
.tools-head{text-align:center;margin-bottom:44px;}
.tools-head h2{font-size:1.7rem;font-weight:800;color:var(--navy);}
.tools-head p{color:var(--muted);margin-top:6px;}
.tools-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:20px;}
.tool-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.25s;position:relative;overflow:hidden;background:#fff;display:flex;flex-direction:column;}
.tool-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.tool-card h3{font-size:1.05rem;color:var(--navy);margin-bottom:8px;}
.tool-card p{font-size:.86rem;color:var(--muted);margin-bottom:16px;flex:1;}
.tool-card .go{align-self:flex-start;font-size:.88rem;font-weight:600;color:var(--blue);}
.tool-hero{background:linear-gradient(160deg,#FBF0F2,#FFF8F8);}
.tool-hero .pay-mock{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 12px 30px rgba(186,12,47,.12);}
.pay-mock .amt{font-size:1.7rem;font-weight:800;color:var(--navy);}
.pay-mock .amt small{font-size:.85rem;color:var(--muted);font-weight:500;margin-left:8px;}
.pay-chip-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.pay-chip{font-size:.75rem;font-weight:600;padding:3px 12px;border-radius:99px;background:var(--bg);border:1px solid var(--line);color:var(--blue);}

/* ---------- 产品功能（Bento 网格） ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;}
.bento .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.25s;}
.bento .card:hover{box-shadow:var(--shadow);transform:translateY(-4px);}
.bento .w3{grid-column:span 3;}.bento .w2{grid-column:span 2;}
.card .ico{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.ico-cyan{background:#FAF1E0;color:#A8801F;}
.ico-gold{background:#fbf1dc;color:#b9822a;}
.ico-blue{background:#F8E6EA;color:var(--blue);}
.card h3{font-size:1.06rem;color:var(--navy);margin-bottom:8px;}
.card>p{font-size:.9rem;color:var(--muted);}
.card ul{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;display:grid;gap:6px;}
.card ul li{font-size:.85rem;color:var(--muted);padding-left:18px;position:relative;}
.card ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,var(--gold),var(--blue));}
.card .kw{display:inline-block;margin-top:14px;font-size:.75rem;color:var(--blue);background:#FBEDEF;border-radius:99px;padding:3px 12px;font-weight:600;}

/* ---------- 通道轮播 ---------- */
.ch-sec{background:#fff;}
.marquee{overflow:hidden;position:relative;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:16px;width:max-content;animation:mq 28s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes mq{to{transform:translateX(-50%);}}
.ch-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:12px 22px;font-weight:600;color:var(--navy);font-size:.94rem;white-space:nowrap;}
.ch-pill .dot{width:10px;height:10px;border-radius:50%;}
.d-wx{background:#22c55e;}.d-ali{background:#1677ff;}.d-union{background:#e60012;}.d-rmb{background:#0aa870;}
.d-bank{background:var(--gold);}.d-epay{background:var(--blue);}.d-code{background:#C9A227;}.d-free{background:#D98A2B;}
.marquee-track:hover{filter:none;}

/* ---------- 对账系统（深红版块） ---------- */
.recon{background:linear-gradient(120deg,var(--navy),#7A0C1F);color:#fff;overflow:hidden;}
.recon-inner{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.recon .tag-line{color:#EBD59A;font-weight:700;letter-spacing:2px;font-size:.82rem;margin-bottom:14px;}
.recon h2{font-size:1.65rem;font-weight:800;margin-bottom:14px;}
.recon .desc{color:#EBD3D7;margin-bottom:26px;}
.recon-feats{display:grid;gap:14px;}
.rf{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 18px;}
.rf .ico{font-size:1.3rem;}
.rf h3{font-size:.98rem;margin-bottom:2px;}
.rf p{font-size:.84rem;color:#D3BFC3;}
.recon-img{filter:drop-shadow(0 20px 44px rgba(0,0,0,.4));}

/* ---------- 接入流程时间线 ---------- */
.tl{position:relative;max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.tl::before{content:"";position:absolute;left:3%;right:3%;top:23px;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));}
.tl-item{text-align:center;position:relative;padding-top:0;}
.tl-item .node{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue);font-weight:800;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;}
.tl-item:nth-child(even) .node{border-color:var(--cyan);color:#A8801F;}
.tl-item h3{font-size:1rem;color:var(--navy);margin-bottom:6px;}
.tl-item p{font-size:.85rem;color:var(--muted);}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:860px;margin:0 auto;display:grid;gap:14px;}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 24px;transition:.2s;}
details[open]{box-shadow:var(--shadow);border-color:#EBC9D1;}
details summary{cursor:pointer;font-weight:600;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+";font-size:1.3rem;color:var(--blue);font-weight:700;}
details[open] summary::after{content:"–";}
details .ans{margin-top:10px;color:var(--muted);font-size:.92rem;}

/* ---------- CTA ---------- */
.cta-band{background:linear-gradient(120deg,#7A0C1F,var(--blue));border-radius:20px;color:#fff;padding:52px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;box-shadow:0 20px 50px rgba(122,12,31,.35);}
.cta-band h2{font-size:1.5rem;font-weight:800;margin-bottom:8px;}
.cta-band p{color:#F0DEE1;font-size:.95rem;}

/* ---------- 关于 / 联系通用 ---------- */
.page-hero{background:radial-gradient(900px 380px at 15% -30%,#B3122F 0%,transparent 60%),linear-gradient(120deg,var(--navy),#7A0C1F);color:#fff;padding:72px 0 64px;}
.page-hero h1{font-size:1.95rem;font-weight:800;margin-bottom:10px;}
.page-hero p{color:#EBD3D7;max-width:680px;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.about-grid h2{font-size:1.4rem;color:var(--navy);margin-bottom:14px;}
.about-grid p{color:var(--muted);margin-bottom:12px;}
.about-nums{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;}
.about-nums .n{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;}
.about-nums .n b{display:block;font-size:1.5rem;color:var(--blue);font-variant-numeric:tabular-nums;}
.about-nums .n span{font-size:.84rem;color:var(--muted);}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:46px;}
.contact-grid .card{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 22px;}
.contact-grid .ico{font-size:1.8rem;margin-bottom:12px;}
.contact-grid h3{color:var(--navy);margin-bottom:6px;}
.contact-grid p{color:var(--muted);font-size:.9rem;}
.form-card{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);}
.form-row{margin-bottom:16px;}
.form-row label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--navy);}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;font-size:.94rem;font-family:inherit;background:#fff;color:var(--text);}
.form-row textarea{resize:vertical;min-height:110px;}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:2px solid rgba(186,12,47,.35);border-color:var(--blue);}
.form-note{color:var(--muted);font-size:.82rem;margin-top:12px;}

/* ---------- 选项卡（产品页场景方案） ---------- */
.tabs-nav{display:flex;gap:6px;flex-wrap:wrap;padding:14px 16px 0;}
.tabs-nav button{padding:11px 22px;border:none;background:none;font-size:.94rem;font-weight:600;color:var(--muted);cursor:pointer;border-radius:12px 12px 0 0;border-bottom:3px solid transparent;transition:.2s;}
.tabs-nav button:hover{color:var(--blue);}
.tabs-nav button.active{color:var(--blue);border-bottom-color:var(--blue);background:#FBEDEF;}
.tab-pane{display:none;padding:28px 26px 32px;}
.tab-pane.active{display:block;}
.tab-pane h3{font-size:1.05rem;}
.tab-pane p{font-size:.92rem;}

/* ---------- 页脚 ---------- */
.site-footer{background:#2A0A13;color:#E6D3D6;padding:60px 0 26px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:34px;}
.footer-grid h3{color:#fff;font-size:1rem;margin-bottom:14px;}
.footer-grid p{font-size:.88rem;line-height:1.8;}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 20px;}
.footer-nav a{color:#E6D3D6;font-size:.88rem;}
.footer-nav a:hover{color:var(--gold);}
.footer-tags{display:flex;flex-wrap:wrap;gap:8px;}
.f-tag{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);padding:4px 13px;border-radius:999px;font-size:.78rem;color:#F0DEE1;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem;color:#BFA6AB;}
.footer-bottom a{color:#BFA6AB;}

/* ---------- 回到顶部 ---------- */
.back-top{position:fixed;right:26px;bottom:30px;width:46px;height:46px;border-radius:12px;background:var(--blue);color:#fff;border:none;font-size:1.2rem;cursor:pointer;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 10px 24px rgba(186,12,47,.4);z-index:1600;}
.back-top.show{opacity:1;pointer-events:auto;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .tools-grid{grid-template-columns:1fr 1fr;}
  .bento .w3,.bento .w2{grid-column:span 3;}
  .recon-inner,.about-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .main-nav,.header-actions{display:none;}
  .nav-toggle{display:block;}
  .hero-inner{grid-template-columns:1fr;padding:56px 20px 44px;}
  .hero h1{font-size:1.8rem;}
  .hero-stats{grid-template-columns:repeat(2,auto);gap:20px 40px;}
  .tools-grid{grid-template-columns:1fr;}
  .bento{grid-template-columns:1fr;}
  .bento .w3,.bento .w2{grid-column:span 1;}
  .tl{grid-template-columns:1fr;gap:30px;}
  .tl::before{left:23px;right:auto;top:4%;bottom:4%;width:2px;height:auto;background:linear-gradient(180deg,var(--blue),var(--cyan));}
  .tl-item{display:flex;text-align:left;gap:16px;}
  .tl-item .node{margin:0;flex:none;}
  .sec{padding:52px 0;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .cta-band{padding:38px 24px;}
}