/* ========== 01-HeroBanner ========== */
/* ===== krude-mod.css —  Hero Banner ===== */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;overflow-x:hidden;background:#f5f7fa}

/* ===== Hero 容器 ===== */
.khero{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 60px;position:relative;overflow:hidden;background:linear-gradient(160deg,#E8F4FD 0%,#D0EAF8 25%,#B8DFF3 55%,#C0E4F4 75%,#A8D6EE 100%)}
.khero:after{content:'';position:absolute;top:-20%;left:-10%;width:120%;height:120%;background:radial-gradient(ellipse at 30% 40%,rgba(43,124,211,0.15) 0%,transparent 50%),radial-gradient(ellipse at 70% 30%,rgba(91,160,232,0.12) 0%,transparent 40%);pointer-events:none;z-index:0}

/* ===== 螺旋星系 ===== */
.khero-galaxy-wrap{position:absolute;top:50%;left:140px;width:320px;height:320px;transform:translateY(-50%);z-index:1;pointer-events:none;animation:galaxySpin 60s linear infinite}
@keyframes galaxySpin{0%{transform:translateY(-50%) rotate(0deg)}100%{transform:translateY(-50%) rotate(360deg)}}
.khero-galaxy-wrap svg circle.tk{animation:tkFlash 1.5s ease-in-out infinite}
.khero-galaxy-wrap svg circle.tk:nth-child(2){animation-delay:-0.3s}
.khero-galaxy-wrap svg circle.tk:nth-child(3){animation-delay:-0.6s}
.khero-galaxy-wrap svg circle.tk:nth-child(4){animation-delay:-0.9s}
.khero-galaxy-wrap svg circle.tk:nth-child(5){animation-delay:-1.1s}
.khero-galaxy-wrap svg circle.tk:nth-child(6){animation-delay:-0.15s}
.khero-galaxy-wrap svg circle.tk:nth-child(7){animation-delay:-0.45s}
@keyframes tkFlash{0%,100%{opacity:1}50%{opacity:0.2}}
.khero-galaxy-wrap svg{width:100%;height:100%;display:block}

/* ===== 极光特效 ===== */
.khero-aurora{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.khero-aurora .au{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.45;animation:auDrift 15s ease-in-out infinite}
.khero-aurora .au:nth-child(1){width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,0.4),transparent 70%);top:0;left:-20%;animation-duration:18s;animation-delay:0s}
.khero-aurora .au:nth-child(2){width:500px;height:500px;background:radial-gradient(circle,rgba(140,200,255,0.35),transparent 70%);top:30%;left:55%;animation-duration:14s;animation-delay:-4s}
.khero-aurora .au:nth-child(3){width:500px;height:500px;background:radial-gradient(circle,rgba(200,220,255,0.3),transparent 70%);top:60%;left:10%;animation-duration:20s;animation-delay:-8s}
.khero-aurora .au:nth-child(4){width:500px;height:500px;background:radial-gradient(circle,rgba(180,210,255,0.3),transparent 70%);top:10%;left:30%;animation-duration:16s;animation-delay:-12s}
@keyframes auDrift{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(80px,-40px) scale(1.15)}50%{transform:translate(-40px,60px) scale(0.85)}75%{transform:translate(50px,30px) scale(1.08)}}

/* ===== 雷达脉冲环 ===== */
.khero-pulse{position:absolute;top:50%;left:50%;z-index:0;pointer-events:none}
.khero-pulse .pw{position:absolute;top:50%;left:50%;width:300px;height:300px;border:1.5px solid rgba(43,124,211,0.15);border-radius:50%;transform:translate(-50%,-50%) scale(0.3);opacity:0}
.khero-pulse .pw:nth-child(1){animation:pw1 4s ease-out infinite}
.khero-pulse .pw:nth-child(2){animation:pw2 4s ease-out 1.3s infinite}
.khero-pulse .pw:nth-child(3){animation:pw3 4s ease-out 2.6s infinite}
@keyframes pw1{0%{transform:translate(-50%,-50%) scale(0.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
@keyframes pw2{0%{transform:translate(-50%,-50%) scale(0.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
@keyframes pw3{0%{transform:translate(-50%,-50%) scale(0.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}

/* ===== 浮动粒子 ===== */
.khero-particles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.khero-particles .pt{position:absolute;bottom:-20px;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:rgba(43,124,211,var(--o,0.15));left:var(--x,50%);animation:ptUp var(--d,8s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes ptUp{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-110vh) scale(0.3);opacity:0}}

/* ===== 右侧地球 ===== */
.khero-globe-wrap{position:absolute;right:70px;top:50%;transform:translateY(-50%);width:260px;height:260px;z-index:1;pointer-events:none}
.khero-globe-wrap .ring{position:absolute;top:50%;left:50%;border-radius:50%;transform:translate(-50%,-50%)}
.khero-globe-wrap .orbit-ring{width:210px;height:90px;border:1.5px solid rgba(43,124,211,0.18);border-radius:50%;position:absolute;top:50%;left:50%;animation:gOrbitTilt 10s linear infinite}
@keyframes gOrbitTilt{0%{transform:translate(-50%,-50%) rotateX(65deg) rotate(0deg)}100%{transform:translate(-50%,-50%) rotateX(65deg) rotate(360deg)}}
.khero-globe-wrap .orbit-ring::after{content:'';position:absolute;top:-4px;left:50%;width:6px;height:6px;border-radius:50%;background:rgba(43,124,211,0.45);box-shadow:0 0 10px rgba(43,124,211,0.3);margin-left:-3px}
.khero-globe-wrap .earth-body{position:absolute;top:50%;left:50%;width:110px;height:110px;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid rgba(43,124,211,0.20);background:radial-gradient(circle at 35% 35%,rgba(43,124,211,0.04),rgba(26,58,110,0.06));overflow:hidden}
.khero-globe-wrap .earth-spin{position:absolute;top:0;left:0;width:100%;height:100%;animation:earthSpin 8s linear infinite}
@keyframes earthSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.khero-globe-wrap .earth-spin .merid{position:absolute;top:0;left:50%;width:1px;height:100%;background:rgba(43,124,211,0.15);transform:translateX(-50%)}
.khero-globe-wrap .earth-spin .merid:nth-child(1){transform:translateX(-50%) rotate(0deg)}
.khero-globe-wrap .earth-spin .merid:nth-child(2){transform:translateX(-50%) rotate(36deg)}
.khero-globe-wrap .earth-spin .merid:nth-child(3){transform:translateX(-50%) rotate(72deg)}
.khero-globe-wrap .earth-spin .merid:nth-child(4){transform:translateX(-50%) rotate(108deg)}
.khero-globe-wrap .earth-spin .merid:nth-child(5){transform:translateX(-50%) rotate(144deg)}
.khero-globe-wrap .earth-spin .parallel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid rgba(43,124,211,0.12);border-radius:50%}
.khero-globe-wrap .earth-spin .parallel:nth-child(6){width:90px;height:90px}
.khero-globe-wrap .earth-spin .parallel:nth-child(7){width:65px;height:65px}
.khero-globe-wrap .earth-spin .parallel:nth-child(8){width:35px;height:35px}
.khero-globe-wrap .r1{width:200px;height:200px;border:1.5px solid rgba(43,124,211,0.15);animation:gSpin2 14s linear infinite reverse}
.khero-globe-wrap .r2{width:170px;height:170px;border:1.5px dashed rgba(91,160,232,0.10);animation:gSpin1 18s linear infinite}
.khero-globe-wrap .tlt1{width:150px;height:150px;border:1px solid rgba(43,124,211,0.08);animation:gTlt1 20s linear infinite}
.khero-globe-wrap .core{width:70px;height:70px;background:radial-gradient(circle,rgba(43,124,211,0.08) 0%,rgba(91,160,232,0.04) 40%,transparent 70%);animation:gPulse 4s ease-in-out infinite;border:none}
.khero-globe-wrap .star{position:absolute;width:2px;height:2px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(43,124,211,0.3);animation:gTwinkle var(--d,3s) ease-in-out infinite}
@keyframes gSpin1{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes gSpin2{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes gTlt1{0%{transform:translate(-50%,-50%) rotateX(70deg) rotate(0deg)}100%{transform:translate(-50%,-50%) rotateX(70deg) rotate(360deg)}}
@keyframes gPulse{0%,100%{opacity:0.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:0.7;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes gTwinkle{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}50%{opacity:var(--o,0.5);transform:translate(-50%,-50%) scale(1.2)}}

/* ===== 两侧装饰 ===== */
.khero-side-left{position:absolute;left:30px;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;writing-mode:vertical-rl;letter-spacing:8px;font-size:16px;color:rgba(26,58,110,0.25);font-weight:700}
.khero-side-right{position:absolute;right:230px;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;writing-mode:vertical-rl;letter-spacing:6px;font-size:12px;color:rgba(26,58,110,0.20);font-weight:500}

/* ===== 角标装饰 ===== */
.khero-ornament-bl{position:absolute;bottom:15%;left:5%;z-index:1;pointer-events:none}
.khero-dot-lg{width:12px;height:12px;border-radius:50%;background:rgba(26,58,110,0.15)}
.khero-ring-sm{width:30px;height:30px;border:1px solid rgba(26,58,110,0.15);border-radius:50%;margin-top:10px;margin-left:8px}
.khero-ornament-br{position:absolute;bottom:20%;right:6%;z-index:1;pointer-events:none}
.khero-diamond{width:10px;height:10px;border:1px solid rgba(26,58,110,0.15);transform:rotate(45deg)}
.khero-dot-sm{width:5px;height:5px;border-radius:50%;background:rgba(26,58,110,0.18);margin-top:12px;margin-left:auto}
.khero-frame-tl{position:absolute;top:40px;left:40px;z-index:1;pointer-events:none}
.khero-frame-br{position:absolute;bottom:40px;right:40px;z-index:1;pointer-events:none;text-align:right}
.khero-hl{width:40px;height:1.5px;background:rgba(26,58,110,0.18)}
.khero-frame-br .khero-hl{margin-left:auto}
.khero-vl{width:1.5px;height:40px;background:rgba(26,58,110,0.18)}
.khero-frame-br .khero-vl{margin-left:auto;margin-bottom:1px}

/* ===== 徽章与LOGO环 ===== */
.khero-badge{font-size:11px;letter-spacing:5px;color:#2B7CD3;margin-bottom:16px;padding:6px 20px;border:1px solid rgba(43,124,211,0.30);border-radius:20px;background:rgba(255,255,255,0.30);display:inline-block;position:relative;z-index:1;margin-left:160px}
.khero-ring{width:90px;height:90px;border:1.5px solid rgba(43,124,211,0.35);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;position:relative;z-index:1;background:rgba(255,255,255,0.35);margin-left:160px}
.khero-ring-inner{display:flex;align-items:center;justify-content:center}
.khero-ring-inner img{width:44px;height:auto;display:block;animation:kbolt 4s linear infinite}
@keyframes kbolt{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* ===== 标题与副标题 ===== */
.khero-title{font-size:clamp(34px,5vw,62px);font-weight:700;letter-spacing:6px;color:#1a2a3a;position:relative;z-index:1;line-height:1.3;margin:0;margin-left:160px}
.khero-title .khero-glow{display:inline-block;background:linear-gradient(135deg,#1a3a6e 0%,#2B7CD3 50%,#5BA0E8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.khero-sub{font-size:clamp(15px,1.5vw,19px);color:#4a5a6a;letter-spacing:3px;margin:16px 0 0 160px;max-width:700px;position:relative;z-index:1}

/* ===== 统计数字 ===== */
.khero-stats{display:flex;gap:80px;margin-top:50px;position:relative;z-index:1;margin-left:160px}
.khero-stat{text-align:center}
.khero-num{font-size:clamp(30px,2.8vw,42px);font-weight:700;color:#1a3a6e;letter-spacing:3px}
.khero-label{font-size:12px;color:#7890a0;letter-spacing:3px;margin-top:6px}

/* ===== 滚动提示 ===== */
.khero-scroll{margin-top:48px;width:22px;height:38px;border:1.5px solid rgba(43,124,211,0.35);border-radius:10px;position:relative;z-index:1}
.khero-scroll:after{content:'';position:absolute;width:3px;height:8px;background:#2B7CD3;left:50%;top:5px;transform:translateX(-50%);border-radius:2px}

/* ===== 七大洲世界地图 ===== */
.khero-map{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:950px;height:auto;z-index:0;pointer-events:none;opacity:0.45}

/* ===== 响应式 ===== */

/* 小桌面 / 平板横屏 */
@media(max-width:1200px){
  .khero-side-right{right:160px}
  .khero-globe-wrap{right:40px;width:220px;height:220px}
  .khero-globe-wrap .earth-body{width:90px;height:90px}
  .khero-globe-wrap .orbit-ring{width:170px;height:75px}
  .khero-globe-wrap .r1{width:160px;height:160px}
  .khero-globe-wrap .r2{width:135px;height:135px}
}

/* 平板竖屏 */
@media(max-width:1024px){
  .khero-galaxy-wrap{width:260px;height:260px;left:80px}
  .khero-badge,.khero-ring,.khero-title,.khero-sub,.khero-stats{margin-left:100px}
  .khero-sub{margin-right:100px}
  .khero-title{font-size:clamp(28px,4vw,42px)}
  .khero-stats{gap:50px}
}

/* 平板小屏 / 手机横屏 */
@media(max-width:820px){
  .khero-galaxy-wrap{width:200px;height:200px;left:60px}
  .khero-badge,.khero-ring,.khero-title,.khero-sub,.khero-stats{margin-left:80px}
  .khero-sub{margin-right:80px}
  .khero-title{font-size:clamp(24px,3.8vw,36px)}
  .khero-stats{gap:35px}
  .khero-num{font-size:clamp(26px,3vw,34px)}
}

/* 手机大屏 */
@media(max-width:680px){
  .khero-side-left,.khero-side-right,.khero-ornament-bl,.khero-ornament-br,.khero-frame-tl,.khero-frame-br,.khero-bracket,.khero-globe-wrap{display:none}
  .khero{padding:90px 16px 40px;min-height:auto}
  .khero-galaxy-wrap{left:50%;top:30%;width:280px;height:280px;transform:translate(-50%,-50%)}
  .khero-badge,.khero-ring,.khero-title,.khero-sub,.khero-stats{margin-left:0}
  .khero-sub{margin-right:0;max-width:100%}
  .khero-badge{font-size:10px;letter-spacing:3px;margin-bottom:12px}
  .khero-ring{width:72px;height:72px;margin-bottom:16px}
  .khero-ring-inner img{width:36px}
  .khero-title{font-size:clamp(22px,5vw,32px);letter-spacing:3px;text-align:center}
  .khero-title .khero-glow{display:inline}
  .khero-sub{font-size:clamp(13px,3.5vw,16px);text-align:center;margin-top:12px}
  .khero-stats{gap:24px;flex-wrap:wrap;justify-content:center;margin-top:32px}
  .khero-num{font-size:clamp(24px,5vw,30px)}
  .khero-scroll{margin-top:32px}
  .khero-particles .pt{display:none}
  .khero-pulse{display:none}
  .khero-map{opacity:0.25;width:95%}
}

/* 手机小屏 */
@media(max-width:400px){
  .khero{padding:70px 12px 30px}
  .khero-galaxy-wrap{width:200px;height:200px}
  .khero-badge{padding:4px 14px;font-size:9px}
  .khero-ring{width:60px;height:60px;margin-bottom:12px}
  .khero-ring-inner img{width:28px}
  .khero-title{font-size:clamp(18px,5vw,24px);letter-spacing:2px}
  .khero-sub{font-size:12px}
  .khero-stats{gap:16px}
  .khero-num{font-size:clamp(20px,5vw,26px)}
  .khero-stat{min-width:60px}
}

/* 极光在手机上减弱 */
@media(max-width:680px){
  .khero-aurora .au{filter:blur(50px);opacity:0.25}
  .khero-aurora .au:nth-child(1){width:300px;height:300px}
  .khero-aurora .au:nth-child(2){width:300px;height:300px}
  .khero-aurora .au:nth-child(3){width:300px;height:300px}
  .khero-aurora .au:nth-child(4){width:300px;height:300px}
}


/* ========== 02-Banner第二模块 ========== */
/* ===== 第二模块 Banner 样式 ===== */

/* ===== 容器 ===== */
.fd-banner {
  background: linear-gradient(
    180deg,
    #A8D6EE 0%,
    #B4DCF0 6%,
    #C0DCF0 15%,
    #D4E4F7 35%,
    #E8F0FE 55%,
    #f0f5fc 80%,
    #f9fbff 100%
  );
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
  animation: fdFadeScale 0.8s ease-out;
}

/* 左右背景光晕 */
.fd-banner::before {
  content: '';
  position: absolute;
  top: -300px;
  right: -150px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,128,185,0.08), transparent 70%);
  pointer-events: none;
  animation: fdBreath 4s ease-in-out infinite;
}
.fd-banner::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,126,34,0.06), transparent 70%);
  pointer-events: none;
  animation: fdBreath 5s ease-in-out infinite 1s;
}

/* ===== 内容容器 ===== */
.fd-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 50px;
  position: relative;
  z-index: 2;
}

/* ===== 背景装饰 ===== */
.fd-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.fd-bg .fd-shape {
  position: absolute;
  border-radius: 6px;
  opacity: 0.18;
}
.fd-bg .fd-shape.d5 {
  width: 60px; height: 60px;
  top: 80%; left: 10%;
  border: 2px solid rgba(41,128,185,0.08);
  background: transparent !important;
  animation: fdDriftA 15s ease-in-out infinite 2s;
}
.fd-bg .fd-shape.d8 {
  width: 45px; height: 45px;
  top: 20%; left: 3%;
  background: rgba(230,126,34,0.06);
  animation: fdBubbleFloat 7s ease-in-out infinite 3s;
}
.fd-bg .fd-shape.d9 {
  width: 25px; height: 25px;
  top: 40%; left: 8%;
  border: 2px solid rgba(41,128,185,0.06);
  background: transparent !important;
  animation: fdBubbleFloat 4s ease-in-out infinite 1s;
}

/* ===== 左侧内容 ===== */
.fd-hero-text {
  flex: 1;
  animation: fdSlideLeft 0.8s ease-out 0.2s both;
  position: relative;
  z-index: 2;
}

/* 徽章 */
.fd-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26,58,92,0.9);
  color: #fff;
  padding: 6px 20px;
  border-radius: 30px;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.fd-badge::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: fdShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* 标题 */
.fd-hero-title {
  font-size: 42px;
  color: #1a3a5c;
  margin: 0 0 18px;
  font-weight: 800;
  line-height: 1.3;
}
.fd-hero-title span {
  background: linear-gradient(135deg, #e67e22, #d35400, #e67e22);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fdShimmer 4s linear infinite;
}

/* 描述 */
.fd-hero-desc {
  font-size: 16px;
  color: #555;
  line-height: 2;
  margin: 0 0 30px;
  max-width: 520px;
}

/* ===== 按钮 ===== */
.fd-hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.fd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #e67e22, #d35400);
  color: #fff;
  padding: 14px 40px;
  border-radius: 30px;
  font-size: 16px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  box-shadow: 0 6px 20px rgba(230,126,34,0.35);
  position: relative;
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
}
.fd-btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: fdShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
.fd-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(230,126,34,0.45);
}
.fd-btn-second {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.8);
  color: #1a3a5c;
  padding: 14px 40px;
  border-radius: 30px;
  font-size: 16px;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid rgba(26,58,92,0.15);
  transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  backdrop-filter: blur(10px);
  z-index: 2;
  cursor: pointer;
}
.fd-btn-second:hover {
  background: #1a3a5c;
  color: #fff;
  border-color: #1a3a5c;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(26,58,92,0.2);
}

/* ===== 统计数据 ===== */
.fd-stats {
  display: flex;
  gap: 40px;
  margin-top: 35px;
}
.fd-stat {
  border-right: 1px solid rgba(26,58,92,0.12);
  padding-right: 40px;
}
.fd-stat:last-child {
  border: none;
  padding-right: 0;
}
.fd-num {
  font-size: 36px;
  color: #1a3a5c;
  font-weight: 800;
}
.fd-num span {
  background: linear-gradient(180deg, #e67e22, #d35400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fd-lbl {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}

/* ===== 右侧地球 ===== */
.fd-hero-visual {
  flex: 0 0 520px;
  text-align: center;
  position: relative;
  animation: fdSlideRight 0.8s ease-out 0.3s both;
}
.fd-globe {
  position: relative;
  width: 480px;
  height: 480px;
  margin: 0 auto;
}

/* 地球核心光晕 */
.fd-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(116,185,255,0.5), rgba(41,128,185,0.25) 30%, rgba(41,128,185,0.1) 50%, rgba(180,200,230,0) 70%);
  box-shadow: 0 0 50px rgba(41,128,185,0.2), 0 0 100px rgba(41,128,185,0.1);
  animation: fdPulseGlow 3s ease-in-out infinite;
  pointer-events: none;
}

/* 地球自转网格 */
.fd-spin {
  position: absolute;
  top: 50%; left: 50%;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  overflow: hidden;
  animation: fdGlobeSpin 20s linear infinite;
  pointer-events: none;
  z-index: 2;
  mask: radial-gradient(circle, transparent 30%, #000 60%);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 60%);
}
.fd-spin::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 200%; height: 200%;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255,255,255,0.06) 20px, rgba(255,255,255,0.06) 21px),
    repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(255,255,255,0.04) 20px, rgba(255,255,255,0.04) 21px);
  border-radius: 50%;
  animation: fdGlobeSpin 20s linear infinite;
}

/* 轨道环 */
.fd-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.fd-ring.r1 {
  width: 480px; height: 480px;
  border: 1.5px solid rgba(41,128,185,0.12);
  animation: fdSpinR 35s linear infinite;
}
.fd-ring.r2 {
  width: 440px; height: 440px;

  border: 1px dashed rgba(41,128,185,0.08);
  animation: fdSpinR 28s linear infinite reverse;
}
.fd-ring.r3 {
  width: 400px; height: 400px;

  border: 1px solid rgba(41,128,185,0.07);
  animation: fdSpinR 32s linear infinite;
}
.fd-ring.r4 {
  width: 360px; height: 360px;

  border: 1px solid rgba(41,128,185,0.06);
  animation: fdSpinR 22s linear infinite reverse;
}
.fd-ring.r5 {
  width: 320px; height: 320px;

  border: 1.5px solid rgba(230,126,34,0.05);
  animation: fdSpinR 26s linear infinite;
}
.fd-ring.r6 {
  width: 280px; height: 280px;

  border: 1px dotted rgba(41,128,185,0.04);
  animation: fdSpinR 20s linear infinite reverse;
}
.fd-ring.r7 {
  width: 240px; height: 240px;

  border: 2px solid rgba(41,128,185,0.03);
  animation: fdSpinR 30s linear infinite;
}

/* 倾斜环 */
.fd-tilt {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(41,128,185,0.08);
  pointer-events: none;
}
.fd-tilt.t1, .fd-tilt.t2 {
  width: 340px; height: 120px;

  transform: rotateX(70deg);
}
.fd-tilt.t1 { animation: fdTiltSpin 12s linear infinite; }
.fd-tilt.t2 { animation: fdTiltSpin 12s linear infinite reverse; }
.fd-tilt.t3 {
  width: 280px; height: 100px;

  transform: rotateX(70deg);
  animation: fdTiltSpin 15s linear infinite;
}

/* 轨道颗粒 */
.fd-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  pointer-events: none;
}
.fd-dot:nth-child(13) { background: #74b9ff; left: 50%; top: 50%; animation: fdOrbitDot 8s linear infinite; }
.fd-dot:nth-child(14) { background: #2980b9; left: 50%; top: 50%; animation: fdOrbitDot2 11s linear infinite; }
.fd-dot:nth-child(15) { background: #e67e22; left: 50%; top: 50%; animation: fdOrbitDot3 9s linear infinite; }
.fd-dot:nth-child(16) { background: #27ae60; left: 50%; top: 50%; animation: fdOrbitDot4 10s linear infinite 0.5s; }
.fd-dot:nth-child(17) { background: #8e44ad; left: 50%; top: 50%; animation: fdOrbitDot5 7s linear infinite 0.8s; }
.fd-dot:nth-child(18) { background: #e74c3c; left: 50%; top: 50%; animation: fdOrbitDot 12s linear infinite 1.2s; }
.fd-dot:nth-child(19) { background: #f39c12; left: 50%; top: 50%; animation: fdOrbitDot3 6s linear infinite 0.3s; }

/* 星星 */
.fd-star {
  position: absolute;
  border-radius: 50%;
  background: #74b9ff;
  pointer-events: none;
}
.fd-star:nth-child(20) { left: 10%; top: 15%; width: 2px; height: 2px; opacity: 0.3; animation: fdTwinkle 3s ease-in-out infinite; }
.fd-star:nth-child(21) { left: 75%; top: 20%; width: 1px; height: 1px; opacity: 0.5; animation: fdTwinkle 4s ease-in-out infinite 1s; }
.fd-star:nth-child(22) { left: 20%; top: 65%; width: 2px; height: 2px; opacity: 0.4; animation: fdTwinkle 3.5s ease-in-out infinite 2s; }
.fd-star:nth-child(23) { left: 80%; top: 70%; width: 1px; height: 1px; opacity: 0.3; animation: fdTwinkle 2.5s ease-in-out infinite 0.5s; }
.fd-star:nth-child(24) { left: 40%; top: 8%; width: 2px; height: 2px; opacity: 0.3; animation: fdTwinkle 3.2s ease-in-out infinite 0.7s; }
.fd-star:nth-child(25) { left: 60%; top: 55%; width: 1px; height: 1px; opacity: 0.4; animation: fdTwinkle 2.8s ease-in-out infinite 1.5s; }
.fd-star:nth-child(26) { left: 90%; top: 35%; width: 2px; height: 2px; opacity: 0.3; animation: fdTwinkle 3.8s ease-in-out infinite 0.3s; }

/* 品牌标识 */
.fd-brand {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  pointer-events: none;
}
.fd-brand-top {
  font-size: 34px;
  color: #1a3a5c;
  font-weight: 700;
  letter-spacing: 8px;
  line-height: 1.2;
  animation: fdFloat 3s ease-in-out infinite;
  white-space: nowrap;
}
.fd-brand-top img {
  max-width: 280px;
  height: auto;
  vertical-align: middle;
}
.fd-brand-bottom {
  font-size: 16px;
  color: #2980b9;
  font-weight: 600;
  letter-spacing: 5px;
  margin-top: 6px;
}

/* ===== 动画 ===== */
@keyframes fdFadeScale {
  0% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fdSlideLeft {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fdSlideRight {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fdShimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes fdBreath {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.08); }
}
@keyframes fdDriftA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(20px, -10px) rotate(15deg); }
  66% { transform: translate(-10px, 15px) rotate(-10deg); }
}
@keyframes fdBubbleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.15; }
  50% { transform: translateY(-15px) scale(1.2); opacity: 0.25; }
}
@keyframes fdPulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes fdGlobeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fdSpinR {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes fdTiltSpin {
  0% { transform: translate(-50%, -50%) rotateX(70deg) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(70deg) rotate(360deg); }
}
@keyframes fdOrbitDot {
  0% { transform: rotate(0) translateX(220px); }
  100% { transform: rotate(360deg) translateX(220px); }
}
@keyframes fdOrbitDot2 {
  0% { transform: rotate(0) translateX(185px); }
  100% { transform: rotate(360deg) translateX(185px); }
}
@keyframes fdOrbitDot3 {
  0% { transform: rotate(0) translateX(150px); }
  100% { transform: rotate(360deg) translateX(150px); }
}
@keyframes fdOrbitDot4 {
  0% { transform: rotate(0) translateX(130px); }
  100% { transform: rotate(360deg) translateX(130px); }
}
@keyframes fdOrbitDot5 {
  0% { transform: rotate(0) translateX(105px); }
  100% { transform: rotate(360deg) translateX(105px); }
}
@keyframes fdFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes fdTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* ===== 响应式 ===== */

/* 小桌面/平板横屏 */
@media (max-width: 1100px) {
  .fd-hero-visual { flex: 0 0 320px; }
  .fd-hero-title { font-size: 34px; }
  .fd-globe { width: 320px; height: 320px; }
  .fd-core { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
  .fd-spin { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
  .fd-ring.r1 { width: 320px; height: 320px; }
  .fd-ring.r2 { width: 295px; height: 295px; }
  .fd-ring.r3 { width: 270px; height: 270px; }
  .fd-ring.r4 { width: 245px; height: 245px; }
  .fd-ring.r5 { width: 220px; height: 220px; }
  .fd-ring.r6 { width: 195px; height: 195px; }
  .fd-ring.r7 { width: 170px; height: 170px; }
  .fd-tilt.t1, .fd-tilt.t2 { width: 230px; height: 85px; }
  .fd-tilt.t3 { width: 190px; height: 70px; }
  @keyframes fdOrbitDot { 0%{transform:rotate(0) translateX(145px)} 100%{transform:rotate(360deg) translateX(145px)} }
  @keyframes fdOrbitDot2 { 0%{transform:rotate(0) translateX(125px)} 100%{transform:rotate(360deg) translateX(125px)} }
  @keyframes fdOrbitDot3 { 0%{transform:rotate(0) translateX(100px)} 100%{transform:rotate(360deg) translateX(100px)} }
  @keyframes fdOrbitDot4 { 0%{transform:rotate(0) translateX(85px)} 100%{transform:rotate(360deg) translateX(85px)} }
  @keyframes fdOrbitDot5 { 0%{transform:rotate(0) translateX(70px)} 100%{transform:rotate(360deg) translateX(70px)} }
}

/* 平板竖屏 */
@media (max-width: 768px) {
  .fd-banner { padding: 40px 0 60px; }
  .fd-hero-inner { flex-direction: column; gap: 20px; padding: 0 16px; }
  .fd-hero-title { font-size: 28px; text-align: center; }
  .fd-hero-desc { max-width: 100%; text-align: center; }
  .fd-hero-btns { justify-content: center; }
  .fd-badge { margin-left: auto; margin-right: auto; }
  .fd-stats { gap: 20px; justify-content: center; }
  .fd-stat { padding-right: 20px; }
  .fd-stat .fd-num { font-size: 26px; }
  .fd-hero-visual { flex: auto; }
  .fd-globe { width: 300px; height: 300px; }
  .fd-brand-top { font-size: 18px; letter-spacing: 4px; }
  .fd-brand-top img { max-width: 180px; }
  .fd-brand-bottom { font-size: 11px; letter-spacing: 3px; }
  .fd-core { width: 210px; height: 210px; margin: -105px 0 0 -105px; }
  .fd-spin { width: 210px; height: 210px; margin: -105px 0 0 -105px; }
  .fd-ring.r1 { width: 300px; height: 300px; }
  .fd-ring.r2 { width: 275px; height: 275px; }
  .fd-ring.r3 { width: 250px; height: 250px; }
  .fd-ring.r4 { width: 225px; height: 225px; }
  .fd-ring.r5 { width: 200px; height: 200px; }
  .fd-ring.r6 { width: 175px; height: 175px; }
  .fd-ring.r7 { width: 150px; height: 150px; }
  .fd-tilt.t1, .fd-tilt.t2 { width: 210px; height: 80px; }
  .fd-tilt.t3 { width: 175px; height: 65px; }
  @keyframes fdOrbitDot { 0%{transform:rotate(0) translateX(135px)} 100%{transform:rotate(360deg) translateX(135px)} }
  @keyframes fdOrbitDot2 { 0%{transform:rotate(0) translateX(115px)} 100%{transform:rotate(360deg) translateX(115px)} }
  @keyframes fdOrbitDot3 { 0%{transform:rotate(0) translateX(90px)} 100%{transform:rotate(360deg) translateX(90px)} }
  @keyframes fdOrbitDot4 { 0%{transform:rotate(0) translateX(75px)} 100%{transform:rotate(360deg) translateX(75px)} }
  @keyframes fdOrbitDot5 { 0%{transform:rotate(0) translateX(60px)} 100%{transform:rotate(360deg) translateX(60px)} }
}

/* 手机 */
@media (max-width: 480px) {
  .fd-banner { padding: 30px 0 50px; }
  .fd-hero-title { font-size: 24px; }
  .fd-hero-desc { font-size: 14px; }
  .fd-hero-btns { flex-direction: column; align-items: center; }
  .fd-btn-primary, .fd-btn-second { width: 100%; justify-content: center; padding: 12px 30px; font-size: 14px; }
  .fd-stats { gap: 14px; }
  .fd-num { font-size: 22px; }
  .fd-lbl { font-size: 11px; }
  .fd-globe { width: 240px; height: 240px; }
  .fd-brand-top img { max-width: 140px; }
  .fd-core { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
  .fd-spin { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
  .fd-ring.r1 { width: 240px; height: 240px; }
  .fd-ring.r2 { width: 220px; height: 220px; }
  .fd-ring.r3 { width: 200px; height: 200px; }
  .fd-ring.r4 { width: 180px; height: 180px; }
  .fd-ring.r5 { width: 160px; height: 160px; }
  .fd-ring.r6 { width: 140px; height: 140px; }
  .fd-ring.r7 { width: 120px; height: 120px; }
  .fd-tilt.t1, .fd-tilt.t2 { width: 170px; height: 65px; }
  .fd-tilt.t3 { width: 140px; height: 55px; }
  @keyframes fdOrbitDot { 0%{transform:rotate(0) translateX(105px)} 100%{transform:rotate(360deg) translateX(105px)} }
  @keyframes fdOrbitDot2 { 0%{transform:rotate(0) translateX(90px)} 100%{transform:rotate(360deg) translateX(90px)} }
  @keyframes fdOrbitDot3 { 0%{transform:rotate(0) translateX(70px)} 100%{transform:rotate(360deg) translateX(70px)} }
  @keyframes fdOrbitDot4 { 0%{transform:rotate(0) translateX(60px)} 100%{transform:rotate(360deg) translateX(60px)} }
  @keyframes fdOrbitDot5 { 0%{transform:rotate(0) translateX(50px)} 100%{transform:rotate(360deg) translateX(50px)} }
}


/* ========== 03-我们的服务 ========== */
/* ===== homepage-services.css ===== */
/* 主页-我们的服务板块 */

/* ===== Section容器 ===== */
.services {
  background: #fff;
  padding: 80px 0;
  position: relative;
}
.services::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41,128,185,0.15), transparent);
}
.services .wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  position: relative;
  z-index: 2;
}
.services .section-title {
  text-align: center;
  margin-bottom: 50px;
}
.services .section-title h2 {
  font-size: 30px;
  color: #1a3a5c;
  font-weight: 800;
  margin-bottom: 8px;
}
.services .section-title p {
  font-size: 15px;
  color: #888;
  margin: 0;
}

/* ===== 服务网格 ===== */
.serv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* ===== 服务卡片 ===== */
.serv-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 28px 35px;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid #eef2f7;
  position: relative;
  overflow: hidden;
  animation: servFadeUp 0.6s ease-out both;
}
@keyframes servFadeUp { 0%{opacity:0;transform:translateY(30px)} 100%{opacity:1;transform:translateY(0)} }
.serv-card:nth-child(1) { animation-delay: 0.1s; }
.serv-card:nth-child(2) { animation-delay: 0.2s; }
.serv-card:nth-child(3) { animation-delay: 0.3s; }
.serv-card:nth-child(4) { animation-delay: 0.4s; }

/* 顶部渐变条 - 但不遮盖内容 */
.serv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #2980b9, #e67e22);
  transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none !important;  /* 修复：不拦截点击 */
  z-index: 0;
}
.serv-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(26,58,92,0.1);
  border-color: transparent;
}
.serv-card:hover::before {
  height: 100%;
  opacity: 0.03;
}

/* 图标 */
.serv-card .icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e8f4fd, #d0e4f7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 30px;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;  /* 修复：确保z-index正确 */
  z-index: 1;
}
.serv-card:hover .icon {
  transform: scale(1.15) rotate(8deg);
  background: linear-gradient(135deg, #1a3a5c, #2980b9);
  box-shadow: 0 8px 25px rgba(41,128,185,0.15);
}

/* 标题 - 修复：确保不被伪元素遮盖 */
.serv-card h3 {
  font-size: 18px;
  color: #1a3a5c;
  margin-bottom: 10px;
  transition: color 0.3s;
  position: relative;
  z-index: 1;
}
.serv-card:hover h3 { color: #2980b9; }

/* 描述 - 修复：确保不被伪元素遮盖 */
.serv-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.9;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* 链接 - 修复：确保可点击 */
.serv-card .link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  color: #2980b9;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
  z-index: 2;  /* 修复：确保链接在最上层，不被任何伪元素遮挡 */
}
.serv-card .link:hover { color: #e67e22; gap: 10px; }

/* ===== 背景装饰（可选） ===== */
.services .bg-deco { display: none; }

/* ===== 响应式 ===== */
@media (max-width: 991px) {
  .serv-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .serv-card { padding: 32px 22px 28px; }
}
@media (max-width: 767px) {
  .services { padding: 60px 0; }
  .services .section-title h2 { font-size: 24px; }
  .services .section-title { margin-bottom: 35px; }
  .serv-grid { grid-template-columns: 1fr; gap: 16px; }
  .serv-card { padding: 28px 20px 24px; }
}


/* ========== 05-为什么选择克鲁德 ========== */
/* ===== homepage-advantages.css ===== */
/* 主页-为什么选择克鲁德重工 - 特效+兼容修复版 */

/* ===== Section容器 ===== */
.advantages {
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.advantages::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,128,185,0.08), transparent 70%);
  animation: advBreath 6s ease-in-out infinite;
  pointer-events: none;
}
.advantages::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -60px;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,126,34,0.06), transparent 70%);
  animation: advBreath 5s ease-in-out infinite 2s;
  pointer-events: none;
}
@keyframes advBreath { 0%,100%{opacity:0.4;transform:scale(1)} 50%{opacity:0.8;transform:scale(1.05)} }

.advantages .wrap {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  position: relative;
  z-index: 2;
}
.advantages .section-title {
  text-align: center;
  margin-bottom: 50px;
}
.advantages .section-title h2 {
  font-size: 30px;
  color: #1a3a5c;
  font-weight: 800;
  margin-bottom: 8px;
}
.advantages .section-title p {
  font-size: 15px;
  color: #888;
  margin: 0;
}

/* ===== 气泡特效 ===== */
.bg-bubbles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
.bg-bubbles .bub {
  position: absolute;
  border-radius: 50%;
  background: rgba(41,128,185,0.04);
  pointer-events: none;
}
.bg-bubbles .b1 { width: 80px; height: 80px; top: 10%; left: 5%; animation: bubFloat 12s ease-in-out infinite; }
.bg-bubbles .b2 { width: 50px; height: 50px; top: 60%; left: 8%; animation: bubFloat 9s ease-in-out infinite 2s; background: rgba(230,126,34,0.03); }
.bg-bubbles .b3 { width: 60px; height: 60px; top: 25%; right: 12%; animation: bubFloat 11s ease-in-out infinite 1s; }
.bg-bubbles .b4 { width: 40px; height: 40px; top: 70%; right: 8%; animation: bubFloat 8s ease-in-out infinite 3s; background: rgba(230,126,34,0.03); }
.bg-bubbles .b5 { width: 30px; height: 30px; top: 45%; left: 50%; animation: bubFloat 10s ease-in-out infinite 1.5s; background: rgba(41,128,185,0.06); }
.bg-bubbles .b6 { width: 45px; height: 45px; bottom: 15%; left: 40%; animation: bubFloat 13s ease-in-out infinite 2.5s; }
@keyframes bubFloat {
  0%,100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(15px, -20px) scale(1.05); }
  50% { transform: translate(-10px, 10px) scale(0.95); }
  75% { transform: translate(20px, -10px) scale(1.02); }
}

/* ===== 网格 ===== */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1;
}

/* ===== 卡片 ===== */
.adv-card {
  display: flex;
  gap: 22px;
  padding: 32px 28px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8eff8;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(26,58,92,0.04);
  animation: advFadeUp 0.6s ease-out both;
}
@keyframes advFadeUp { 0%{opacity:0;transform:translateY(30px)} 100%{opacity:1;transform:translateY(0)} }
.adv-card:nth-child(1) { animation-delay: 0.1s; }
.adv-card:nth-child(2) { animation-delay: 0.2s; }
.adv-card:nth-child(3) { animation-delay: 0.3s; }
.adv-card:nth-child(4) { animation-delay: 0.4s; }

/* 修复：背景装饰不拦截点击 */
.adv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(41,128,185,0.02), transparent 50%);
  pointer-events: none !important;
  z-index: 0;
}

/* 左侧蓝色竖条动画 */
.adv-card::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, #2980b9, #1a3a5c);
  border-radius: 0 3px 3px 0;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none !important;
  z-index: 0;
}
.adv-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(26,58,92,0.1); border-color: #b8d0ed; }
.adv-card:hover::after { height: 75%; }

/* ===== 编号 ===== */
.adv-card .num {
  flex-shrink: 0;
  width: 58px; height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e8f4fd, #d0e4f7);
  color: #2980b9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  z-index: 1;
  animation: numAdvPulse 4s ease-in-out infinite;
}
.adv-card:nth-child(2) .num { animation-delay: 0.5s; }
.adv-card:nth-child(3) .num { animation-delay: 1s; }
.adv-card:nth-child(4) .num { animation-delay: 1.5s; }
@keyframes numAdvPulse { 0%,100%{box-shadow:0 0 0 0 rgba(41,128,185,0.15)} 50%{box-shadow:0 0 0 10px rgba(41,128,185,0.04)} }
.adv-card .num::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(41,128,185,0.08);
  pointer-events: none;
}
.adv-card:hover .num {
  background: linear-gradient(135deg, #1a3a5c, #2980b9);
  color: #fff;
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 8px 25px rgba(41,128,185,0.25);
}

/* ===== 内容 - 修复：z-index确保可读 ===== */
.adv-card .info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.adv-card .info .tag {
  display: inline-block;
  background: linear-gradient(135deg, #eef4fa, #e0eaf5);
  color: #2c5f8a;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 16px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  border: 1px solid rgba(41,128,185,0.08);
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}
.adv-card:hover .info .tag {
  background: linear-gradient(135deg, #1a3a5c, #2980b9);
  color: #fff;
  border-color: transparent;
}
.adv-card .info h4 {
  font-size: 18px;
  color: #1a3a5c;
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.4;
  transition: color 0.3s;
  position: relative;
  z-index: 1;
}
.adv-card:hover .info h4 { color: #2980b9; }
.adv-card .info p {
  font-size: 14px;
  color: #666;
  line-height: 1.9;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ===== 卡片右上角装饰 ===== */
.adv-card .corner {
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.adv-card .corner::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 60px; height: 60px;
  background: linear-gradient(135deg, transparent 50%, rgba(41,128,185,0.06) 50%);
  transform: rotate(45deg);
}

/* ===== 响应式 ===== */
@media (max-width: 991px) {
  .adv-grid { grid-template-columns: 1fr; gap: 18px; }
  .adv-card { padding: 28px 22px; }
}
@media (max-width: 767px) {
  .advantages { padding: 60px 0; }
  .advantages .section-title h2 { font-size: 24px; }
  .advantages .section-title { margin-bottom: 35px; }
  .adv-grid { grid-template-columns: 1fr; gap: 16px; }
  .adv-card { padding: 24px 20px; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .adv-card .num { width: 50px; height: 50px; font-size: 18px; }
}


/* ========== 06-应用解决方案 ========== */
/* ===== homepage-solutions.css ===== */
/* 主页-应用解决方案  */

/* ===== Section容器 ===== */
.solutions {
  background: #fff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.solutions::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #1a3a5c, #2980b9, #e67e22, #2980b9, #1a3a5c);
  background-size: 200% 100%;
  opacity: 0.4;
  animation: solShimmer 4s linear infinite;
}
@keyframes solShimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.solutions::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,128,185,0.05), transparent 70%);
  pointer-events: none;
}
.solutions .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* ===== Section标题 ===== */
.solutions .section-title {
  text-align: center;
  margin-bottom: 50px;
}
.solutions .section-title h2 {
  font-size: 30px;
  color: #1a3a5c;
  font-weight: 800;
  margin-bottom: 8px;
}
.solutions .section-title p {
  font-size: 15px;
  color: #888;
  margin: 0;
}

/* ===== 网格 - 改为4列 ===== */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* ===== 卡片通用 ===== */
.sol-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #edf2f8;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(26,58,92,0.04);
  animation: solFadeUp 0.6s ease-out both;
}
@keyframes solFadeUp { 0%{opacity:0;transform:translateY(30px)} 100%{opacity:1;transform:translateY(0)} }
.sol-card:nth-child(1) { animation-delay: 0.1s; }
.sol-card:nth-child(2) { animation-delay: 0.2s; }
.sol-card:nth-child(3) { animation-delay: 0.3s; }
.sol-card:nth-child(4) { animation-delay: 0.4s; }
.sol-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 30px 60px rgba(26,58,92,0.15);
  border-color: transparent;
}

/* ===== 图标区 ===== */
.sol-card .icon-box {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.sol-card .icon-box::before {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
  animation: solBreath 4s ease-in-out infinite;
}
@keyframes solBreath { 0%,100%{opacity:0.3;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.1)} }
.sol-card .icon-box::after {
  content: '';
  position: absolute;
  bottom: -20%; left: -20%;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
/* 各卡片图标背景色 */
.sol-card:nth-child(1) .icon-box { background: linear-gradient(135deg, #1a3a5c 0%, #2c5f8a 50%, #2980b9 100%); }
.sol-card:nth-child(2) .icon-box { background: linear-gradient(135deg, #1a3a5c 0%, #2c5f8a 50%, #1a6b3c 100%); }
.sol-card:nth-child(3) .icon-box { background: linear-gradient(135deg, #1a3a5c 0%, #2c5f8a 50%, #6a1b9a 100%); }
.sol-card:nth-child(4) .icon-box { background: linear-gradient(135deg, #1a3a5c 0%, #2c5f8a 50%, #d35400 100%); }

.sol-card .badge-sol {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 20px;
  letter-spacing: 1px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 2;
}
.sol-card .icon-box .icon-emoji {
  position: relative;
  z-index: 1;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sol-card:hover .icon-box .icon-emoji { transform: scale(1.2) rotate(-8deg); }

/* ===== 内容区 ===== */
.sol-card .body {
  padding: 28px 26px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sol-card .body h4 {
  font-size: 19px;
  color: #1a3a5c;
  margin-bottom: 12px;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  padding-bottom: 14px;
}
.sol-card .body h4::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, #2980b9, #e67e22);
  border-radius: 2px;
  transition: width 0.5s;
}
.sol-card:hover .body h4::after { width: 60px; }
.sol-card .body p {
  font-size: 14px;
  color: #555;
  line-height: 1.95;
  margin-bottom: 16px;
  flex: 1;
}
.sol-card .body .features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.sol-card .body .features span {
  background: linear-gradient(135deg, #f0f6fe, #e4eef9);
  color: #2c5f8a;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(41,128,185,0.06);
  transition: all 0.3s;
}
.sol-card:hover .body .features span {
  background: #e8f4fd;
  border-color: rgba(41,128,185,0.12);
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(41,128,185,0.08);
}
.sol-card .body .link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2980b9;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #edf2f8;
}
.sol-card .body .link:hover { color: #e67e22; gap: 16px; }

/* ===== 响应式 ===== */
@media (max-width: 991px) {
  .sol-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .sol-grid { grid-template-columns: 1fr; }
  .solutions { padding: 60px 0; }
  .solutions .section-title h2 { font-size: 24px; }
}