/* ============================================================
   index1 前台模板 · 浅蓝科技风整站重做
   v11：Header / Hero / 核心能力 / 优势 / CTA / Footer 全部重排
   配色沿用后台大屏的浅蓝科技体系，保持全站统一
   ============================================================ */
:root{
  --ft-brand:#0ea5e9;
  --ft-brand2:#2563eb;
  --ft-brand-l:#e0f2fe;
  --ft-brand-ll:#f0f6fc;
  --ft-text:#0f172a;
  --ft-text2:#5b6b7f;
  --ft-text3:#8a99ab;
  --ft-line:#dbeafe;
  --ft-r:16px;
  --ft-rs:10px;
  --ft-hd:64px;
}
*{box-sizing:border-box;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",
              "Helvetica Neue",Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
  color:var(--ft-text);
  background:#fff;
}
a{color:var(--ft-brand);text-decoration:none;transition:color .15s;}
a:hover{color:var(--ft-brand2);text-decoration:none;}
img{max-width:100%;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#b9d9f2;border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:#8ec5e8;}
::-webkit-scrollbar-track{background:transparent;}

.hp-wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
/* header 高度由 52px(3.25em) 调整为 64px，这里同步补偿，
   否则「功能介绍」「关于我们」等页面顶部内容会被 header 压住 12px */
#page-wrapper{padding-top:var(--ft-hd)!important;}

/* ============================================================
   1. Header（覆盖 main.css 的默认样式）
   ============================================================ */
#header{
  position:fixed!important;
  top:0;left:0;width:100%;
  height:var(--ft-hd)!important;
  line-height:var(--ft-hd)!important;
  background:rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 var(--ft-line),0 2px 16px rgba(14,165,233,.06)!important;
  z-index:10000;
}
#header.alt{background:rgba(255,255,255,.92)!important;color:var(--ft-text)!important;}
#header h1{
  position:absolute!important;
  left:24px;top:0;
  height:var(--ft-hd)!important;
  line-height:var(--ft-hd)!important;
  margin:0;padding:0;
  display:flex;align-items:center;
}
#header h1 a{display:flex;align-items:center;height:100%;}
#header h1 img{max-height:34px!important;width:auto;display:block;}
/* 站点名（logo 旁） */
#header h1 a:after{
  content:"";
  display:none;
}

/* 主导航 */
#header nav#nav{
  position:absolute!important;
  left:230px;right:270px;top:0;
  height:var(--ft-hd)!important;
  line-height:var(--ft-hd)!important;
  text-align:center;
}
#header nav#nav>ul{margin:0;padding:0;}
#header nav#nav>ul>li{display:inline-block;margin:0 2px;}
#header nav#nav>ul>li>a:not(.button){
  color:#41506b!important;
  font-size:14px;
  font-weight:500;
  height:36px!important;
  line-height:36px!important;
  padding:0 14px!important;
  border-radius:8px;
  position:relative;
  transition:all .18s;
}
#header nav#nav>ul>li>a:not(.button):hover{
  color:var(--ft-brand2)!important;
  background:var(--ft-brand-ll)!important;
}
/* 当前页高亮 */
#header nav#nav>ul>li>a:not(.button):hover:after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ft-brand),var(--ft-brand2));
}

/* 右侧按钮 */
#header nav#navRight{
  position:absolute!important;
  right:24px;top:0;
  height:var(--ft-hd)!important;
  line-height:var(--ft-hd)!important;
  display:flex;align-items:center;
}
#header nav#navRight>ul{margin:0;padding:0;display:flex;align-items:center;gap:8px;}
#header nav#navRight>ul>li{margin:0!important;}
#header .button{
  height:36px!important;
  line-height:36px!important;
  padding:0 18px!important;
  border-radius:var(--ft-rs)!important;
  font-size:14px!important;
  font-weight:500;
  margin:0!important;
  transition:all .18s!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
#header .button.login_btn{
  background:#fff!important;
  color:var(--ft-brand2)!important;
  border:1px solid #bfdbfe!important;
}
#header .button.login_btn:hover{background:var(--ft-brand-ll)!important;border-color:var(--ft-brand)!important;}
#header .button.register_btn{
  background:linear-gradient(135deg,var(--ft-brand),var(--ft-brand2))!important;
  background-color:var(--ft-brand)!important;
  color:#fff!important;
  border:none!important;
  box-shadow:0 4px 14px rgba(14,165,233,.30)!important;
}
#header .button.register_btn:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 20px rgba(14,165,233,.42)!important;
  opacity:1!important;
}

/* 汉堡按钮（仅移动端显示） */
.hp-burger{
  display:none;
  position:absolute;
  right:20px;top:14px;
  width:36px;height:36px;
  border:1px solid var(--ft-line);
  border-radius:9px;
  background:#fff;
  color:var(--ft-brand2);
  font-size:16px;
  cursor:pointer;
  z-index:10001;
}

/* ============================================================
   2. Hero
   ============================================================ */
.hp-hero{
  position:relative;
  padding:92px 0 90px;
  background:linear-gradient(180deg,#f5faff 0%,#e8f4fe 55%,#f7fbff 100%);
  overflow:hidden;
}
.hp-grid-bg{
  position:absolute;left:0;right:0;top:0;bottom:0;
  background-image:
    linear-gradient(var(--ft-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--ft-line) 1px,transparent 1px);
  background-size:44px 44px;
  opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 30%,#000 0%,transparent 72%);
}
.hp-hero-glow{
  position:absolute;border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
}
.hp-glow-1{width:420px;height:420px;background:rgba(14,165,233,.20);top:-120px;left:-80px;}
.hp-glow-2{width:360px;height:360px;background:rgba(37,99,235,.16);bottom:-140px;right:-60px;}

.hp-hero-inner{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:48px;
}
.hp-hero-txt{flex:1 1 520px;min-width:0;}
.hp-hero-img{flex:0 0 380px;position:relative;text-align:center;}
.hp-hero-img img{position:relative;z-index:2;max-width:100%;max-height:420px;width:auto;}
.hp-hero-ring{
  position:absolute;left:50%;top:50%;
  width:300px;height:300px;margin:-150px 0 0 -150px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(14,165,233,.18),transparent 68%);
  border:1px solid rgba(14,165,233,.20);
}

.hp-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid #bfdbfe;
  color:var(--ft-brand2);
  font-size:13px;font-weight:500;
  box-shadow:0 2px 10px rgba(14,165,233,.12);
}
.hp-tag i{font-size:12px;}

.hp-hero h1{
  margin:20px 0 18px;
  font-size:46px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.5px;
  color:var(--ft-text);
  background:linear-gradient(120deg,#0f172a 20%,#2563eb 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hp-lead{
  font-size:16px;line-height:1.85;color:var(--ft-text2);margin:0 0 10px;
}
.hp-lead span{
  color:var(--ft-brand2);font-weight:600;
  padding:0 2px;
}
.hp-sub{font-size:15px;color:var(--ft-text3);margin:0 0 30px;}

.hp-hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.hp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 28px;
  border-radius:var(--ft-rs);
  font-size:15px;font-weight:600;
  transition:all .18s;
}
.hp-btn-main{
  background:linear-gradient(135deg,var(--ft-brand),var(--ft-brand2));
  color:#fff;
  box-shadow:0 6px 18px rgba(14,165,233,.34);
}
.hp-btn-main:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,165,233,.44);}
.hp-btn-ghost{
  background:#fff;color:var(--ft-brand2);
  border:1px solid #bfdbfe;
}
.hp-btn-ghost:hover{background:var(--ft-brand-ll);color:var(--ft-brand2);border-color:var(--ft-brand);}
.hp-btn-light{
  background:#fff;color:var(--ft-brand2);
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.hp-btn-light:hover{color:var(--ft-brand2);transform:translateY(-2px);}

/* ============================================================
   3. 数据条
   ============================================================ */
.hp-stats{
  background:#fff;
  border-bottom:1px solid var(--ft-line);
  padding:0;
  margin-top:-1px;
}
.hp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.hp-stat{
  padding:30px 12px;
  text-align:center;
  border-right:1px solid #eef4fb;
}
.hp-stat:last-child{border-right:none;}
.hp-stat b{
  display:block;
  font-size:26px;font-weight:800;
  background:linear-gradient(135deg,var(--ft-brand),var(--ft-brand2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.5px;
}
.hp-stat span{display:block;margin-top:6px;font-size:13px;color:var(--ft-text3);}

/* ============================================================
   4. 通用区块
   ============================================================ */
.hp-sec{padding:80px 0;background:#fff;}
.hp-sec-alt{background:var(--ft-brand-ll);}
.hp-sec-head{text-align:center;margin-bottom:48px;}
.hp-eyebrow{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:2px;
  color:var(--ft-brand);
  margin-bottom:10px;
}
.hp-sec-head h2{
  margin:0 0 12px;
  font-size:32px;font-weight:800;color:var(--ft-text);letter-spacing:-.3px;
}
.hp-sec-head p{margin:0;font-size:15px;color:var(--ft-text3);}

/* 核心能力卡片 */
.hp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.hp-card{
  background:#fff;
  border:1px solid var(--ft-line);
  border-radius:var(--ft-r);
  overflow:hidden;
  transition:all .22s;
  box-shadow:0 2px 12px rgba(15,23,42,.04);
}
.hp-card:hover{
  transform:translateY(-6px);
  border-color:#93c5fd;
  box-shadow:0 14px 34px rgba(14,165,233,.16);
}
.hp-card-img{
  height:170px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#f2f8ff,#e3f0fd);
  border-bottom:1px solid var(--ft-line);
  overflow:hidden;
}
.hp-card-img img{max-height:130px;width:auto;transition:transform .3s;}
.hp-card:hover .hp-card-img img{transform:scale(1.05);}
.hp-card-body{padding:22px 24px 26px;}
.hp-card-body h3{
  margin:0 0 6px;font-size:19px;font-weight:700;color:var(--ft-text);
}
.hp-card-sub{
  display:inline-block;margin-bottom:12px;
  font-size:12px;font-weight:600;
  color:var(--ft-brand2);
  background:var(--ft-brand-l);
  padding:3px 10px;border-radius:6px;
}
.hp-card-body p{margin:0;font-size:14px;line-height:1.8;color:var(--ft-text2);}

/* 优势 */
.hp-adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.hp-adv{
  background:#fff;
  border:1px solid var(--ft-line);
  border-radius:var(--ft-r);
  padding:30px 24px;
  text-align:center;
  transition:all .22s;
  box-shadow:0 2px 12px rgba(15,23,42,.04);
}
.hp-adv:hover{
  transform:translateY(-6px);
  border-color:#93c5fd;
  box-shadow:0 14px 34px rgba(14,165,233,.16);
}
.hp-adv-ic{
  width:56px;height:56px;margin:0 auto 18px;
  border-radius:15px;
  background:linear-gradient(135deg,var(--ft-brand),var(--ft-brand2));
  color:#fff;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(14,165,233,.30);
}
.hp-adv h4{margin:0 0 10px;font-size:17px;font-weight:700;color:var(--ft-text);}
.hp-adv p{margin:0;font-size:13.5px;line-height:1.8;color:var(--ft-text2);}

/* ============================================================
   5. CTA
   ============================================================ */
.hp-cta{
  position:relative;
  padding:76px 0 80px;
  background:linear-gradient(135deg,#0b2a4a 0%,#123a63 45%,#1e40af 100%);
  overflow:hidden;
  text-align:center;
}
.hp-cta-glow{
  position:absolute;left:50%;top:-160px;
  width:700px;height:400px;margin-left:-350px;
  background:radial-gradient(ellipse at center,rgba(14,165,233,.38),transparent 70%);
  filter:blur(40px);
  pointer-events:none;
}
.hp-cta .hp-wrap{position:relative;z-index:2;}
.hp-cta h2{
  margin:0 0 40px;font-size:32px;font-weight:800;color:#fff;letter-spacing:-.3px;
}
.hp-cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.hp-cta-card{
  display:block;
  padding:32px 26px;
  border-radius:var(--ft-r);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:all .22s;
  text-align:center;
}
.hp-cta-card:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(125,211,252,.5);
  transform:translateY(-5px);
  text-decoration:none;
}
.hp-cta-ic{
  width:52px;height:52px;margin:0 auto 16px;
  border-radius:14px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:#7dd3fc;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.hp-cta-card h4{margin:0 0 10px;font-size:17px;font-weight:700;color:#fff;}
.hp-cta-card p{margin:0;font-size:13.5px;line-height:1.8;color:rgba(226,240,255,.78);}
.hp-cta-bottom{margin-top:42px;}

/* ============================================================
   6. Footer
   ============================================================ */
.hp-footer{
  background:#0a1628;
  color:rgba(226,240,255,.72);
  font-size:14px;
}
.hp-footer-top{
  display:flex;gap:56px;
  padding:56px 24px 40px;
}
.hp-footer-brand{flex:0 0 320px;}
.hp-footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.hp-footer-logo img{max-height:32px;width:auto;filter:brightness(0) invert(1);opacity:.95;}
.hp-footer-logo span{font-size:18px;font-weight:700;color:#fff;}
.hp-footer-desc{margin:0 0 20px;line-height:1.8;font-size:13.5px;color:rgba(226,240,255,.55);}
.hp-footer-contact{list-style:none;margin:0;padding:0;}
.hp-footer-contact li{
  display:flex;align-items:flex-start;gap:9px;
  margin-bottom:10px;font-size:13.5px;line-height:1.6;
}
.hp-footer-contact li i{color:var(--ft-brand);margin-top:4px;}
.hp-footer-contact a{color:rgba(226,240,255,.72);}
.hp-footer-contact a:hover{color:#7dd3fc;}

.hp-footer-links{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.hp-fcol h5{
  margin:0 0 16px;font-size:14px;font-weight:700;color:#fff;
}
.hp-fcol p{margin:0 0 9px;}
.hp-fcol a{color:rgba(226,240,255,.62);font-size:13.5px;}
.hp-fcol a:hover{color:#7dd3fc;}
.hp-fcol-qr .hp-qr{
  width:96px;height:96px;
  background:#fff;border-radius:10px;
  padding:6px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}
.hp-fcol-qr .hp-qr img{max-width:100%;max-height:100%;}
.hp-qr-txt{font-size:12.5px;color:rgba(226,240,255,.55);}

.hp-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 0;
}
.hp-footer-bottom p{
  margin:0;text-align:center;
  font-size:13px;color:rgba(226,240,255,.45);
}

/* ============================================================
   7. 旧 class 兼容（功能介绍 / 关于我们 等页面仍在用）
   ============================================================ */
.box_item{
  background:#fff!important;
  border:1px solid var(--ft-line)!important;
  border-radius:var(--ft-r)!important;
  box-shadow:0 2px 12px rgba(15,23,42,.05)!important;
}
.banner_text h1,.banner_text h2{color:var(--ft-text)!important;font-weight:800;}
.banner_text p{color:var(--ft-text2)!important;}
.btn,.button{
  border-radius:var(--ft-rs)!important;
  background:linear-gradient(135deg,var(--ft-brand),var(--ft-brand2))!important;
  background-color:var(--ft-brand)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 4px 14px rgba(14,165,233,.28)!important;
}

/* ============================================================
   8. 响应式
   ============================================================ */
@media (max-width:1080px){
  #header nav#nav{left:200px;right:250px;}
  .hp-cards{grid-template-columns:repeat(3,1fr);gap:18px;}
  .hp-adv-grid{grid-template-columns:repeat(2,1fr);}
  .hp-hero-img{flex:0 0 300px;}
  .hp-hero h1{font-size:38px;}
}
@media (max-width:900px){
  /* 移动端：隐藏主导航，改用汉堡展开 */
  .hp-burger{display:block;}
  #header nav#nav{
    display:none;
    left:0!important;right:0!important;
    top:var(--ft-hd)!important;
    height:auto!important;line-height:normal!important;
    background:#fff;
    border-bottom:1px solid var(--ft-line);
    box-shadow:0 12px 26px rgba(15,23,42,.10);
    text-align:left!important;
    padding:8px 0;
  }
  #header.hp-nav-open nav#nav{display:block;}
  #header nav#nav>ul>li{display:block;margin:0;}
  #header nav#nav>ul>li>a:not(.button){
    display:block!important;
    height:44px!important;line-height:44px!important;
    padding:0 22px!important;
    border-radius:0!important;
  }
  #header nav#nav>ul>li>a:not(.button):hover:after{display:none;}
  #header nav#navRight{right:66px!important;}
  #header .button{padding:0 14px!important;font-size:13px!important;}
  #header .button.login_btn{display:none!important;}

  .hp-hero{padding:72px 0 56px;}
  .hp-hero-inner{flex-direction:column;gap:28px;text-align:center;}
  .hp-hero-txt{flex:1 1 auto;}
  .hp-hero-img{flex:0 0 auto;order:2;}
  .hp-hero-img img{max-height:240px;}
  .hp-hero h1{font-size:32px;margin:16px 0 14px;}
  .hp-hero-btns{justify-content:center;}
  .hp-hero-ring{width:210px;height:210px;margin:-105px 0 0 -105px;}

  .hp-stats-grid{grid-template-columns:repeat(2,1fr);}
  .hp-stat{border-bottom:1px solid #eef4fb;}
  .hp-stat:nth-child(2n){border-right:none;}

  .hp-sec{padding:56px 0;}
  .hp-sec-head{margin-bottom:32px;}
  .hp-sec-head h2{font-size:25px;}
  .hp-cards{grid-template-columns:1fr;}
  .hp-adv-grid{grid-template-columns:1fr;}

  .hp-cta{padding:52px 0 56px;}
  .hp-cta h2{font-size:25px;margin-bottom:28px;}
  .hp-cta-grid{grid-template-columns:1fr;}

  .hp-footer-top{flex-direction:column;gap:32px;padding:40px 24px 30px;}
  .hp-footer-brand{flex:1 1 auto;}
  .hp-footer-links{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .hp-wrap{padding:0 16px;}
  .hp-hero h1{font-size:27px;}
  .hp-btn{height:42px;padding:0 20px;font-size:14px;}
  .hp-stats-grid{grid-template-columns:1fr;}
  .hp-stat{border-right:none;}
  .hp-footer-links{grid-template-columns:1fr;}
}