/* ============================================================
   汇聚支付 HuiPay · 聚合支付平台官网
   配色：中国建设银行官网风格（建行蓝）
   建行蓝 #0066B3（主色 / Endeavour）
   logo 深蓝 #004898（Congress Blue）· 深海军蓝 #002B54
   品牌辅助青色 #1DD9E2（Java）· 青色深版 #0E9AA6
   ============================================================ */
:root{
  --navy:#002B54;        /* 深海军蓝：首屏 / 页脚底色 */
  --navy-2:#00407C;      /* 建行 logo 深蓝 */
  --navy-3:#00539B;      /* 中间过渡蓝 */
  --blue:#0066B3;        /* 建行蓝：主色 */
  --blue-d:#004898;      /* 建行蓝深版：按钮渐变起点 */
  --cyan:#1DD9E2;        /* 品牌辅助青：点缀高光 */
  --accent:var(--cyan);  /* 强调色（高光数字 / 强调按钮） */
  --accent-d:#0E9AA6;    /* 强调色深版：浅底上的文字色 */
  --ink:#15263F;
  --muted:#5A6B84;
  --line:#E3E9F2;
  --bg:#F5F8FC;
  --white:#fff;
  --radius:14px;
  --shadow:0 10px 34px rgba(10,27,51,.10);
  --shadow-lg:0 24px 60px rgba(10,27,51,.18);
  --font:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.sec{padding:88px 0;}
.sec.alt{background:var(--bg);}
h1,h2,h3,h4{line-height:1.3;font-weight:700;}
h2{font-size:34px;letter-spacing:.5px;}
:where(h1,h2,h3,h4)[id]{scroll-margin-top:110px;}

/* ---------- 顶部信息条 ---------- */
.topbar{background:var(--navy);color:rgba(255,255,255,.75);font-size:13px;}
.topbar-inner{max-width:1200px;margin:0 auto;padding:8px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.topbar b{color:var(--accent);font-weight:600;}
.tb-right{display:flex;gap:18px;}
.tb-right a:hover{color:var(--cyan);}

/* ---------- 导航 ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s;}
.site-header.scrolled{box-shadow:0 6px 24px rgba(10,27,51,.08);}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:74px;display:flex;align-items:center;gap:28px;}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-mark{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;color:#fff;font-size:20px;font-weight:800;box-shadow:0 6px 16px rgba(0,102,179,.35);}
.brand-name{font-size:19px;font-weight:800;line-height:1.2;}
.brand-name small{display:block;font-size:11px;color:var(--muted);font-weight:400;letter-spacing:2px;}
.main-nav{display:flex;gap:30px;margin-left:auto;}
.main-nav a{font-size:15px;color:var(--ink);position:relative;padding:6px 0;font-weight:500;}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .3s;}
.main-nav a:hover::after,.main-nav a.active::after{width:100%;}
.main-nav a.active{color:var(--blue);}
.header-cta{display:flex;align-items:center;gap:14px;}
.login-link{font-size:14px;color:var(--muted);}
.login-link:hover{color:var(--blue);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;font-size:20px;padding:4px 12px;cursor:pointer;color:var(--ink);}
.m-nav{display:none;}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 30px;border-radius:10px;font-size:15px;font-weight:600;transition:.3s;cursor:pointer;border:none;}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;box-shadow:0 8px 22px rgba(0,102,179,.35);}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,102,179,.45);}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#002E5C;box-shadow:0 8px 22px rgba(29,217,226,.4);}
.btn-accent:hover{transform:translateY(-2px);}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff;background:transparent;}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-dark{background:var(--navy);color:#fff;}
.btn-dark:hover{background:var(--navy-3);}

/* ---------- 首屏 ---------- */
.hero{position:relative;background:radial-gradient(1200px 600px at 78% -10%,#00509C 0%,transparent 60%),radial-gradient(900px 500px at 8% 110%,#002E5C 0%,transparent 55%),linear-gradient(160deg,#002B54 0%,#0C2244 55%,#002B54 100%);color:#fff;overflow:hidden;}
#net-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:96px 24px 110px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero-tag{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(29,217,226,.4);background:rgba(29,217,226,.08);color:var(--cyan);font-size:13px;padding:6px 14px;border-radius:99px;letter-spacing:1px;margin-bottom:22px;}
.hero-tag i{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:blink 1.6s infinite;}
@keyframes blink{50%{opacity:.25;}}
.hero h1{font-size:46px;line-height:1.25;letter-spacing:1px;}
.hero h1 .hl{background:linear-gradient(90deg,var(--accent),#93ECF2);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-desc{margin:22px 0 30px;color:rgba(255,255,255,.72);font-size:16.5px;max-width:520px;}
.hero-desc b{color:var(--accent);font-weight:600;}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;}
.hero-note{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.4);}

/* 首屏数据大屏 */
.dash{position:relative;background:linear-gradient(170deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px;backdrop-filter:blur(8px);box-shadow:var(--shadow-lg);}
.dash-head{display:flex;align-items:center;gap:8px;margin-bottom:18px;}
.dash-head i{width:10px;height:10px;border-radius:50%;}
.dash-head i:nth-child(1){background:#FF5F57;} .dash-head i:nth-child(2){background:#FEBC2E;} .dash-head i:nth-child(3){background:#28C840;}
.dash-head span{margin-left:8px;font-size:12.5px;color:rgba(255,255,255,.55);letter-spacing:1px;}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
.dash-stats>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 12px;}
.dash-stats b{display:block;font-size:22px;color:#fff;font-variant-numeric:tabular-nums;}
.dash-stats b em{font-style:normal;color:var(--cyan);}
.dash-stats span{font-size:12px;color:rgba(255,255,255,.55);}
.dash-chart{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px;margin-bottom:14px;}
.dash-chart figcaption{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:6px;}
.dash-rates .rate{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.75);padding:5px 0;}
.dash-rates em{font-style:normal;width:86px;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;}
.dash-rates em i{width:9px;height:9px;border-radius:3px;}
.dash-rates .bar{flex:1;height:7px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden;}
.dash-rates .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--cyan));width:0;transition:width 1.4s cubic-bezier(.2,.7,.3,1);}
.dash-rates .pct{width:42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--accent);}

/* ---------- 通道轮播 ---------- */
.marquee-sec{background:#002142;padding:30px 0;border-top:1px solid rgba(255,255,255,.06);}
.marquee-sec p{text-align:center;font-size:13px;color:rgba(255,255,255,.4);letter-spacing:3px;margin-bottom:20px;}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee-track{display:flex;gap:18px;width:max-content;animation:scroll 30s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scroll{to{transform:translateX(-50%);}}
.mq-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 22px;color:rgba(255,255,255,.82);font-size:14.5px;white-space:nowrap;transition:.3s;}
.mq-item:hover{border-color:var(--cyan);color:#fff;}
.mq-item i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;}

/* ---------- 通用段落头 ---------- */
.sec-head{max-width:760px;margin-bottom:52px;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:3px;color:var(--blue);font-weight:700;margin-bottom:14px;}
.kicker::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));}
.center .kicker::after{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));}
.kicker.accent{color:var(--accent-d);}
.kicker.accent::before{background:var(--accent);}
.sec-head .dek{color:var(--muted);margin-top:14px;font-size:16px;}

/* ---------- Bento 核心功能 ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;}
.b-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative;overflow:hidden;transition:.35s;display:flex;flex-direction:column;gap:12px;}
.b-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.b-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:0;transition:.35s;}
.b-card:hover::before{opacity:1;}
.b-card h3{font-size:19px;}
.b-card p{font-size:14.5px;color:var(--muted);flex:1;}
.b-card .more{font-size:13.5px;color:var(--blue);font-weight:600;}
.b-ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:24px;flex-shrink:0;}
.io-blue{background:#E6F1FA;color:var(--blue);}
.io-accent{background:#E3FBFD;color:var(--accent-d);}
.io-cyan{background:#E1F8FA;color:#0E9AA6;}
.io-navy{background:#E8ECF6;color:var(--navy-2);}
.b-2{grid-column:span 4;background:linear-gradient(140deg,var(--navy) 0%,var(--navy-3) 100%);color:#fff;border:none;}
.b-2 p{color:rgba(255,255,255,.65);}
.b-2 .more{color:var(--accent);}
.b-2::before{background:linear-gradient(90deg,var(--accent),var(--cyan));opacity:1;}
.b-1{grid-column:span 2;}
.b-3{grid-column:span 2;}
.b-2 .b-flow{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap;}
.b-flow span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:5px 12px;font-size:12.5px;color:rgba(255,255,255,.85);}
.b-flow i{color:var(--cyan);font-style:normal;}

/* ---------- 一码多付演示（扫码切换） ---------- */
.onecode{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.oc-phone{width:290px;margin:0 auto;background:var(--navy);border-radius:34px;padding:14px;box-shadow:var(--shadow-lg);position:relative;}
.oc-screen{background:linear-gradient(170deg,#F7FAFF,#EAF1FB);border-radius:24px;padding:22px 18px;min-height:430px;}
.oc-status{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:14px;}
.oc-payee{text-align:center;margin-bottom:16px;}
.oc-payee .ava{width:52px;height:52px;border-radius:14px;margin:0 auto 8px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;}
.oc-payee b{font-size:15px;}
.oc-amt{text-align:center;font-size:32px;font-weight:800;color:var(--ink);margin-bottom:14px;font-variant-numeric:tabular-nums;}
.oc-amt small{font-size:16px;color:var(--muted);font-weight:400;}
.oc-qrcode{width:170px;height:170px;margin:0 auto 16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;}
.oc-btn{display:block;text-align:center;background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;border-radius:10px;padding:11px;font-size:14px;font-weight:600;}
.oc-chip{position:absolute;top:-16px;right:-14px;background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#002E5C;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:99px;box-shadow:0 8px 20px rgba(29,217,226,.5);animation:floaty 3.2s ease-in-out infinite;}
@keyframes floaty{50%{transform:translateY(-8px);}}
.oc-steps{margin-top:8px;}
.oc-steps li{display:flex;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line);}
.oc-steps li:last-child{border:none;}
.oc-no{width:34px;height:34px;border-radius:10px;background:#E6F1FA;color:var(--blue);font-weight:800;display:grid;place-items:center;font-size:15px;flex-shrink:0;}
.oc-steps b{display:block;font-size:16px;}
.oc-steps p{font-size:14px;color:var(--muted);}

/* ---------- 通道矩阵 ---------- */
.chan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.chan-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.3s;}
.chan-card:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-4px);}
.chan-card .ci{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:19px;font-weight:800;color:#fff;margin-bottom:14px;}
.chan-card b{font-size:16.5px;display:block;}
.chan-card small{color:var(--muted);font-size:13px;display:block;margin-top:4px;line-height:1.6;}

/* ---------- 对账深色版块 ---------- */
.recon{background:linear-gradient(160deg,#001B36 0%,#003463 60%,#001B36 100%);color:#fff;overflow:hidden;position:relative;}
.recon::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(29,217,226,.12),transparent 70%);top:-180px;right:-120px;}
.recon-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1;}
.recon h2{color:#fff;}
.recon .dek{color:rgba(255,255,255,.65);}
.recon-list li{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.recon-list li:last-child{border:none;}
.r-ico{width:40px;height:40px;border-radius:11px;background:rgba(29,217,226,.12);border:1px solid rgba(29,217,226,.35);color:var(--cyan);display:grid;place-items:center;font-size:17px;flex-shrink:0;}
.recon-list b{display:block;font-size:16px;}
.recon-list small{color:rgba(255,255,255,.55);font-size:13.5px;}
.recon-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;}
.recon-stats>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 10px;text-align:center;}
.recon-stats b{display:block;font-size:24px;color:var(--accent);font-variant-numeric:tabular-nums;}
.recon-stats span{font-size:12px;color:rgba(255,255,255,.55);}
.recon-fig{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px;box-shadow:var(--shadow-lg);}

/* ---------- 流程时间线 ---------- */
.timeline{position:relative;max-width:920px;margin:0 auto;}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue),var(--cyan),var(--accent));transform:translateX(-50%);}
.tl-item{position:relative;width:50%;padding:0 48px 56px 0;}
.tl-item:nth-child(even){left:50%;padding:0 0 56px 48px;}
.tl-dot{position:absolute;top:2px;right:-11px;width:22px;height:22px;border-radius:50%;background:#fff;border:5px solid var(--blue);z-index:1;box-shadow:0 0 0 5px rgba(0,102,179,.15);}
.tl-item:nth-child(even) .tl-dot{right:auto;left:-11px;border-color:var(--cyan);box-shadow:0 0 0 5px rgba(29,217,226,.15);}
.tl-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.3s;}
.tl-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.tl-card .tl-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;color:var(--blue-d);background:#E6F1FA;border-radius:6px;padding:3px 10px;margin-bottom:10px;}
.tl-item:nth-child(even) .tl-tag{color:#0E9AA6;background:#E1F8FA;}
.tl-card h3{font-size:18px;margin-bottom:8px;}
.tl-card p{font-size:14.5px;color:var(--muted);}
.tl-time{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--accent-d);font-weight:600;}

/* ---------- 数字滚动条 ---------- */
.metrics{background:linear-gradient(120deg,var(--blue-d),var(--blue) 55%,#0080D4);color:#fff;padding:56px 0;}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.metrics b{display:block;font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px;}
.metrics b em{font-style:normal;color:var(--accent);}
.metrics span{font-size:14px;color:rgba(255,255,255,.75);letter-spacing:2px;}

/* ---------- FAQ ---------- */
.faq-list{max-width:860px;margin:0 auto;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden;transition:.3s;}
.faq-item[open]{border-color:var(--blue);box-shadow:var(--shadow);}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:20px 24px;font-weight:600;font-size:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.q-badge{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:#E6F1FA;color:var(--blue);display:grid;place-items:center;font-size:14px;font-weight:800;}
.faq-item .sign{margin-left:auto;color:var(--blue);font-size:22px;transition:.3s;flex-shrink:0;}
.faq-item[open] .sign{transform:rotate(45deg);}
.faq-item .a{padding:0 24px 22px 72px;color:var(--muted);font-size:15px;}

/* ---------- CTA ---------- */
.cta-band{background:radial-gradient(700px 300px at 20% 0%,rgba(29,217,226,.18),transparent 60%),linear-gradient(140deg,var(--navy),var(--navy-3));color:#fff;padding:76px 0;}
.cta-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.cta-inner h2{font-size:30px;}
.cta-inner p{color:rgba(255,255,255,.6);margin-top:10px;}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- 页脚 ---------- */
.footer{background:#002142;color:rgba(255,255,255,.62);font-size:14px;}
.footer-inner{max-width:1200px;margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;}
.f-brand{display:flex;align-items:center;gap:12px;color:#fff;font-size:17px;font-weight:700;margin-bottom:16px;}
.footer p{font-size:13.5px;line-height:1.9;}
.footer h4{color:#fff;font-size:15px;margin-bottom:18px;letter-spacing:1px;}
.footer li{margin-bottom:12px;}
.footer li a:hover{color:var(--cyan);}
.keyword-tags{max-width:1200px;margin:0 auto;padding:0 24px 28px;display:flex;flex-wrap:wrap;gap:10px;}
.keyword-tags span{font-size:12px;border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:4px 13px;color:rgba(255,255,255,.42);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1200px;margin:0 auto;font-size:12.5px;color:rgba(255,255,255,.4);}
.footer-bottom a:hover{color:var(--cyan);}

/* ---------- 内页 Banner ---------- */
.page-hero{background:radial-gradient(800px 380px at 80% -20%,#00509C,transparent 60%),linear-gradient(150deg,#002B54,#0D2749);color:#fff;padding:78px 0 66px;position:relative;overflow:hidden;}
.page-hero .crumb{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:16px;}
.page-hero .crumb a:hover{color:var(--cyan);}
.page-hero h1{font-size:38px;}
.page-hero .ph-desc{color:rgba(255,255,255,.65);margin-top:14px;max-width:680px;}

/* ---------- 产品页 ---------- */
.anchor-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:74px;z-index:90;}
.anchor-nav .an-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:8px;overflow-x:auto;}
.anchor-nav a{padding:15px 18px;font-size:14.5px;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;font-weight:500;}
.anchor-nav a:hover,.anchor-nav a.on{color:var(--blue);border-color:var(--blue);}
.prod-block{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:72px 0;}
.prod-block.flip .pb-txt{order:2;}
.pb-txt .num{font-size:13px;letter-spacing:3px;color:var(--accent-d);font-weight:800;}
.pb-txt h2{margin:10px 0 16px;}
.pb-txt .desc{color:var(--muted);margin-bottom:20px;}
.pb-txt ul li{display:flex;gap:10px;padding:7px 0;font-size:15px;color:var(--ink);}
.pb-txt ul li::before{content:"✓";color:var(--blue);font-weight:800;flex-shrink:0;}
.pb-fig{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px;}
.code-block{background:var(--navy);color:#D7E4F7;border-radius:14px;padding:22px 24px;font-family:Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.9;overflow-x:auto;box-shadow:var(--shadow-lg);}
.code-block .c-key{color:#7FB3FF;} .code-block .c-str{color:#7FE3EF;} .code-block .c-cm{color:#5A7396;} .code-block .c-num{color:#7CE8B8;}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.sol-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:.3s;}
.sol-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);border-color:transparent;}
.sol-card .s-ico{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:23px;margin-bottom:16px;}
.sol-card h3{font-size:18px;margin-bottom:10px;}
.sol-card p{font-size:14.5px;color:var(--muted);}

/* ---------- 关于我们 ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.about-vals{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.val-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.3s;}
.val-card:hover{box-shadow:var(--shadow);}
.val-card b{display:block;font-size:16px;margin-bottom:8px;}
.val-card b i{font-style:normal;color:var(--accent-d);margin-right:8px;}
.val-card p{font-size:13.5px;color:var(--muted);}
.milestone{border-left:2px solid var(--line);margin-left:8px;padding-left:32px;}
.ms-item{position:relative;padding-bottom:34px;}
.ms-item::before{content:"";position:absolute;left:-39px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #E3FBFD;box-shadow:0 0 0 3px rgba(29,217,226,.25);}
.ms-item .ms-year{font-size:14px;font-weight:800;color:var(--blue-d);letter-spacing:1px;}
.ms-item h3{font-size:17px;margin:4px 0 6px;}
.ms-item p{font-size:14px;color:var(--muted);max-width:560px;}

/* ---------- 联系我们 ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start;}
.info-card{background:linear-gradient(150deg,var(--navy),var(--navy-3));color:#fff;border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-lg);}
.info-card h3{font-size:20px;margin-bottom:8px;}
.info-card>p{color:rgba(255,255,255,.6);font-size:14px;margin-bottom:24px;}
.info-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);align-items:flex-start;}
.info-row:last-of-type{border:none;}
.info-row .ir-ico{width:40px;height:40px;border-radius:11px;background:rgba(29,217,226,.12);border:1px solid rgba(29,217,226,.3);color:var(--cyan);display:grid;place-items:center;font-size:17px;flex-shrink:0;}
.info-row b{display:block;font-size:15px;}
.info-row span{font-size:13.5px;color:rgba(255,255,255,.6);}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);}
.form-card h3{font-size:20px;margin-bottom:6px;}
.form-card>p{color:var(--muted);font-size:14px;margin-bottom:22px;}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.f-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.f-field.full{grid-column:1/-1;}
.f-field label{font-size:13.5px;font-weight:600;}
.f-field label i{color:#E5484D;font-style:normal;margin-left:2px;}
.f-field input,.f-field select,.f-field textarea{border:1px solid var(--line);border-radius:9px;padding:11px 14px;font-size:14.5px;font-family:inherit;color:var(--ink);background:var(--bg);transition:.25s;outline:none;width:100%;}
.f-field textarea{resize:vertical;min-height:96px;}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,102,179,.12);}
.form-tip{font-size:12.5px;color:var(--muted);background:var(--bg);border:1px dashed var(--line);border-radius:9px;padding:11px 14px;margin-bottom:18px;}
.form-ok{display:none;text-align:center;padding:34px 10px;}
.form-ok.show{display:block;}
.form-ok .ok-ico{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#E7F8EF;color:#0A9B58;font-size:30px;display:grid;place-items:center;}
.map-strip{margin-top:56px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;}

/* ---------- 面包屑（内页头部下方） ---------- */
.crumb-bar{background:var(--bg);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);}
.crumb-bar .wrap{padding:12px 24px;display:flex;gap:8px;align-items:center;}
.crumb-bar a:hover{color:var(--blue);}

/* ---------- 返回顶部 ---------- */
.back-top{position:fixed;right:26px;bottom:30px;width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;border:none;font-size:18px;cursor:pointer;opacity:0;visibility:hidden;transition:.3s;z-index:99;box-shadow:var(--shadow-lg);}
.back-top.show{opacity:1;visibility:visible;}
.back-top:hover{background:var(--blue);}

/* ---------- 滚动显现 ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;} .d4{transition-delay:.32s;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;padding:70px 24px 80px;gap:44px;}
  .hero h1{font-size:36px;}
  .bento{grid-template-columns:repeat(2,1fr);}
  .b-2,.b-1,.b-3{grid-column:span 2;}
  .onecode,.recon-grid,.about-grid,.contact-grid,.prod-block{grid-template-columns:1fr;gap:40px;}
  .prod-block.flip .pb-txt{order:0;}
  .chan-grid{grid-template-columns:repeat(2,1fr);}
  .metrics-grid{grid-template-columns:repeat(2,1fr);gap:32px;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .sol-grid{grid-template-columns:repeat(2,1fr);}
  .timeline::before{left:10px;}
  .tl-item,.tl-item:nth-child(even){width:100%;left:0;padding:0 0 44px 40px;}
  .tl-dot,.tl-item:nth-child(even) .tl-dot{left:0;right:auto;}
  .main-nav{display:none;}
  .header-cta .login-link{display:none;}
}
@media (max-width:640px){
  h2{font-size:26px;}
  .sec{padding:60px 0;}
  .hero h1{font-size:29px;}
  .topbar .tb-left{display:none;}
  .header-cta .btn{padding:9px 18px;font-size:13.5px;}
  .nav-toggle{display:block;margin-left:auto;}
  .header-cta{margin-left:0;}
  .header-inner{gap:14px;}
  .header-inner .brand{margin-right:auto;}
  .m-nav{display:flex;flex-direction:column;background:#fff;border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .4s ease;}
  .m-nav.open{max-height:420px;}
  .m-nav a{padding:14px 24px;border-bottom:1px solid var(--line);font-size:15px;}
  .m-nav a:last-child{border:none;}
  .bento{grid-template-columns:1fr;}
  .b-2,.b-1,.b-3{grid-column:span 1;}
  .chan-grid,.sol-grid,.metrics-grid,.footer-inner{grid-template-columns:1fr;}
  .dash-stats{grid-template-columns:1fr 1fr;}
  .recon-stats{grid-template-columns:1fr 1fr;}
  .f-grid{grid-template-columns:1fr;}
  .oc-phone{width:250px;}
  .cta-inner{flex-direction:column;text-align:center;}
  .faq-item .a{padding-left:24px;}
  .page-hero h1{font-size:28px;}
  .hero-btns .btn{width:100%;}
}