:root{
  --navy:#0c2340; --navy2:#14355c; --navy3:#1b4570;
  --blue:#1e6fe0; --blue-d:#1559bd; --blue-l:#eaf2fd; --cyan:#3aa7ff;
  --ink:#1f2d3d; --muted:#5b6b7c; --bg:#f5f8fc; --line:#e2e9f2;
  --cta:#f97316; --cta-d:#e0630a; --white:#fff;
  --r:10px; --shadow:0 4px 18px rgba(12,35,64,.08); --shadow2:0 8px 30px rgba(12,35,64,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;color:var(--ink);line-height:1.75;font-size:16px;background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{line-height:1.35;color:var(--navy);font-weight:700}
h1{font-size:34px} h2{font-size:28px} h3{font-size:20px}
ul{list-style:none}
button{font-family:inherit}

/* ===== 顶部第一行：信息栏 ===== */
.topbar{background:var(--white);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{width:46px;height:46px;flex:none;object-fit:contain;display:block}
.brand-name{font-size:19px;font-weight:700;color:var(--navy);white-space:nowrap}
.brand-tag{font-size:12.5px;color:var(--muted);margin-top:1px;white-space:nowrap}
.topbar-tel{text-align:right;flex:none}
.topbar-tel .t1{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.topbar-tel .t1 svg{width:20px;height:20px;color:var(--cta)}
.topbar-tel .t1 a{font-size:21px;font-weight:800;color:var(--cta);letter-spacing:.5px}
.topbar-tel .t2{font-size:12.5px;color:var(--muted)}

/* ===== 顶部第二行：主导航（通栏） ===== */
.navbar{background:var(--navy);position:sticky;top:0;z-index:900;box-shadow:0 2px 10px rgba(12,35,64,.25)}
.nav-in{display:flex;align-items:center;justify-content:space-between}
.nav-menu{display:flex;align-items:stretch}
.nav-menu>li{position:relative}
.nav-menu>li>a{display:flex;align-items:center;gap:5px;padding:15px 20px;color:#dce7f5;font-size:15.5px;font-weight:500;white-space:nowrap;transition:.2s}
.nav-menu>li>a:hover,.nav-menu>li>a.on{background:var(--navy3);color:#fff}
.nav-menu svg.caret{width:13px;height:13px;color:#9db8d8}
.nav-drop{position:absolute;top:100%;left:0;min-width:200px;background:#fff;border-radius:0 0 8px 8px;box-shadow:var(--shadow2);overflow:hidden;display:none;border-top:3px solid var(--blue)}
.nav-menu>li:hover .nav-drop{display:block}
.nav-drop a{display:block;padding:11px 18px;color:var(--ink);font-size:14.5px;border-bottom:1px solid #f0f4f9}
.nav-drop a:hover{background:var(--blue-l);color:var(--blue)}
.nav-toggle{display:none;background:none;border:none;color:#fff;padding:14px 18px;cursor:pointer}
.nav-toggle svg{width:26px;height:26px}

/* ===== 首屏 ===== */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('hero.jpg') center/cover no-repeat;opacity:.9}
.hero-mask{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,26,48,.94) 0%,rgba(9,26,48,.82) 42%,rgba(9,26,48,.35) 100%)}
.hero-in{position:relative;padding:88px 0 96px;max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(58,167,255,.15);border:1px solid rgba(58,167,255,.4);color:#a9d4ff;font-size:13.5px;padding:6px 14px;border-radius:100px;margin-bottom:20px}
.hero h1{color:#fff;font-size:42px;line-height:1.3;max-width:640px}
.hero p.sub{margin:18px 0 30px;font-size:17px;color:#c9d9ec;max-width:600px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border-radius:8px;font-size:16px;font-weight:600;transition:.2s;border:1.5px solid transparent;cursor:pointer;min-height:48px}
.btn svg{width:18px;height:18px}
.btn-cta{background:var(--cta);color:#fff}
.btn-cta:hover{background:var(--cta-d);color:#fff;transform:translateY(-1px)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06)}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d);color:#fff}
.btn-line{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-line:hover{background:var(--blue-l)}

/* ===== 数据信任区 ===== */
.stats{background:var(--navy2);border-top:1px solid rgba(255,255,255,.08)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:34px 0}
.stat{text-align:center;color:#fff;padding:6px 10px}
.stat b{display:block;font-size:36px;font-weight:800;color:#5fb0ff;line-height:1.2}
.stat span{font-size:14px;color:#b9cde4}

/* ===== 通用板块 ===== */
.section{padding:64px 0}
.section.gray{background:var(--bg)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 42px}
.sec-head .en{font-size:13px;letter-spacing:3px;color:var(--blue);font-weight:700;text-transform:uppercase}
.sec-head h2{margin:8px 0 10px}
.sec-head p{color:var(--muted);font-size:15.5px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;transition:.25s;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow2);border-color:#c9dcf5}
.card .ic{width:52px;height:52px;border-radius:12px;background:var(--blue-l);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ic svg{width:26px;height:26px;color:var(--blue)}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:14.5px}
.card ul{margin-top:12px}
.card ul li{position:relative;padding-left:18px;font-size:14px;color:var(--muted);margin-bottom:6px}
.card ul li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:2px;background:var(--blue)}
.card .more{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-weight:600;font-size:14.5px}
.tag{display:inline-block;background:var(--blue-l);color:var(--blue);font-size:12.5px;padding:3px 10px;border-radius:100px;margin:0 6px 6px 0}

/* 图文并排 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{border-radius:var(--r);box-shadow:var(--shadow2)}
.split h2{margin-bottom:16px}
.split p{color:var(--muted);margin-bottom:12px}
.check-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:15px}
.check-list svg{width:20px;height:20px;color:var(--blue);flex:none;margin-top:4px}

/* 服务流程 */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.flow .step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;position:relative;counter-increment:step}
.flow .step::before{content:counter(step,decimal-leading-zero);position:absolute;top:16px;right:18px;font-size:30px;font-weight:800;color:#dcebff}
.flow .step h3{font-size:17px;margin-bottom:8px}
.flow .step p{font-size:13.5px;color:var(--muted)}

/* 案例 */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:.25s}
.case:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.case-bd{padding:20px 22px}
.case-bd .y{font-size:12.5px;color:var(--blue);font-weight:700}
.case-bd h3{font-size:16.5px;margin:6px 0 8px;line-height:1.5}
.case-bd p{font-size:13.5px;color:var(--muted)}

/* FAQ */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 22px;background:none;border:none;cursor:pointer;text-align:left;font-size:16px;font-weight:600;color:var(--navy)}
.faq-q svg{width:18px;height:18px;color:var(--blue);flex:none;transition:.25s}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-in{padding:0 22px 20px;color:var(--muted);font-size:14.5px}

/* 底部强转化区 */
.cta-band{background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 60%,#1c4a80 100%);color:#fff;padding:56px 0}
.cta-in{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.cta-in h2{color:#fff;margin-bottom:14px}
.cta-in .pts li{display:flex;gap:10px;align-items:center;margin-bottom:10px;color:#c9d9ec;font-size:15px}
.cta-in .pts svg{width:19px;height:19px;color:#5fb0ff;flex:none}
.cta-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:26px;text-align:center}
.cta-box .lab{font-size:14px;color:#a9c6e8}
.cta-box a.tel{display:block;font-size:30px;font-weight:800;color:#ffb37a;margin:6px 0 14px;letter-spacing:1px}
.cta-box img{width:132px;margin:0 auto 8px;border-radius:8px;background:#fff;padding:6px}
.cta-box .we{font-size:13.5px;color:#a9c6e8}

/* 页头（内页banner） */
.pagehead{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;padding:52px 0 46px;position:relative;overflow:hidden}
.pagehead::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:rgba(58,167,255,.12)}
.pagehead h1{color:#fff;font-size:32px}
.pagehead p{color:#b9cde4;margin-top:10px;max-width:760px;font-size:15.5px}
.crumb{font-size:13.5px;color:#8fb0d8;margin-bottom:14px}
.crumb a{color:#b9d4f5}

/* 内容排版 */
.prose h2{margin:34px 0 14px;font-size:23px}
.prose h3{margin:26px 0 10px;font-size:18px}
.prose p{margin-bottom:14px;color:#37485e}
.prose ul{margin:0 0 16px}
.prose ul li{position:relative;padding-left:20px;margin-bottom:8px;color:#37485e}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--blue)}
.prose table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:14.5px}
.prose th{background:var(--navy);color:#fff;padding:10px 12px;text-align:left;font-weight:600}
.prose td{border:1px solid var(--line);padding:9px 12px;color:#37485e}
.prose tr:nth-child(even) td{background:#f7fafd}

/* 相关推荐 */
.rel{margin-top:48px;border-top:1px dashed var(--line);padding-top:32px}
.rel h3{margin-bottom:16px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel a{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px;font-size:14.5px;color:var(--ink);font-weight:500}
.rel a:hover{border-color:var(--blue);color:var(--blue)}
.rel a span{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px}

/* 页脚 */
.footer{background:#0a1d35;color:#9fb4cd}
.footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:36px;padding:52px 0 40px}
.footer h4{color:#fff;font-size:16px;margin-bottom:16px}
.footer .fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer .fbrand b{color:#fff;font-size:17px}
.footer p{font-size:13.5px;margin-bottom:8px}
.footer ul li{margin-bottom:9px}
.footer ul a{color:#9fb4cd;font-size:14px}
.footer ul a:hover{color:#fff}
.footer .fc{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px;font-size:13.5px}
.footer .fc svg{width:16px;height:16px;color:#5fb0ff;flex:none;margin-top:4px}
.footer img.qr{width:108px;border-radius:8px;background:#fff;padding:5px;margin-top:6px}
.footer-bar{border-top:1px solid rgba(255,255,255,.1);padding:16px 0;font-size:13px;text-align:center;color:#7e95b2}
.footer-bar a{color:#7e95b2}
.footer-bar a:hover{color:#fff}
.footer-bar span{margin:0 10px}

/* 浮动联系条 */
.float-side{position:fixed;right:18px;bottom:90px;z-index:800;display:flex;flex-direction:column;gap:10px}
.float-side a,.float-side .fl-item{width:52px;height:52px;border-radius:12px;background:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow2);position:relative;cursor:pointer}
.float-side svg{width:24px;height:24px;color:#fff}
.float-side .fl-qr{display:none;position:absolute;right:62px;top:50%;transform:translateY(-50%);background:#fff;padding:10px;border-radius:10px;box-shadow:var(--shadow2);width:150px;text-align:center}
.float-side .fl-qr img{width:128px}
.float-side .fl-qr span{font-size:12px;color:var(--muted)}
.float-side .fl-item:hover .fl-qr{display:block}

/* 新闻列表 */
.news-item{display:flex;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:18px;transition:.2s}
.news-item:hover{border-color:#c9dcf5;box-shadow:var(--shadow)}
.news-item .date{flex:none;text-align:center;background:var(--blue-l);border-radius:10px;padding:12px 16px;height:fit-content}
.news-item .date b{display:block;font-size:24px;color:var(--blue)}
.news-item .date span{font-size:12.5px;color:var(--muted)}
.news-item h3{margin-bottom:8px}
.news-item p{font-size:14px;color:var(--muted)}

/* 响应式 */
@media(max-width:1024px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1fr 1fr}
  .cta-in{grid-template-columns:1fr;gap:26px}
}
@media(max-width:768px){
  h1{font-size:28px}.hero h1{font-size:30px}
  .topbar-in{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 0}
  .topbar-tel{text-align:left}
  .nav-toggle{display:block}
  .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;box-shadow:var(--shadow2)}
  .nav-menu.show{display:flex}
  .nav-menu>li>a{padding:14px 20px;border-top:1px solid rgba(255,255,255,.08)}
  .nav-drop{position:static;display:none;box-shadow:none;border-top:none;background:var(--navy2);border-radius:0}
  .nav-menu>li.open .nav-drop{display:block}
  .nav-menu>li:hover .nav-drop{display:none}
  .nav-menu>li.open:hover .nav-drop{display:block}
  .nav-drop a{color:#dce7f5;border-bottom:1px solid rgba(255,255,255,.06)}
  .grid3,.grid2,.case-grid,.rel-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:26px}
  .stats-in{grid-template-columns:repeat(2,1fr);gap:20px 6px}
  .news-item{flex-direction:column}
  .section{padding:46px 0}
  .float-side{right:12px;bottom:70px}
  .float-side a,.float-side .fl-item{width:46px;height:46px}
}
@media(max-width:480px){
  .grid4{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr}
  .hero-in{padding:60px 20px 64px}
  .btn{width:100%}
  .brand-name{font-size:16px}
}