@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@500;600&display=swap');

.hz-wl-edge, .hz-wl-edge * { box-sizing: border-box; }
.hz-wl-edge {
  --hz-orange: #ec682e; --hz-orange-soft: rgba(236, 104, 46, 0.12);
  --hz-navy: #071d33; --hz-blue: #0b2f4d; --hz-cyan: #39c6ff;
  --hz-red: #ff4d4f; --hz-red-soft: rgba(255, 77, 79, 0.15);
  --hz-text: #4b5563; --hz-muted: #64748b; --hz-border: #e5e7eb;
  --hz-soft: #f7f9fc; --hz-white: #ffffff;
  width: 100%; overflow: hidden; background: #ffffff; color: var(--hz-text);
  font-family: 'Open Sans', Arial, sans-serif; line-height: 1.65;
}
.hz-wl-edge h2, .hz-wl-edge h3, .hz-wl-edge p { margin: 0; }
.hz-wl-edge-section { padding: 86px 0; background: var(--hz-soft); }
.hz-wl-edge-container { max-width: 1380px; margin: 0 auto; padding: 0 40px; }
.hz-wl-edge-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--hz-orange); font-family: 'Poppins', Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; }
.hz-wl-edge-eyebrow::before { content: ""; width: 38px; height: 2px; background: var(--hz-orange); display: inline-block; }
.hz-wl-edge-title { max-width: 1080px; margin-bottom: 18px; color: var(--hz-navy); font-family: 'Poppins', Arial, sans-serif; font-size: 44px; line-height: 1.18; font-weight: 500; letter-spacing: -1px; }
.hz-wl-edge-desc { max-width: 1100px; color: var(--hz-text); font-size: 17px; line-height: 1.8; }
.hz-wl-edge-main { margin-top: 46px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 30px; align-items: stretch; }
.hz-wl-edge-visual { position: relative; min-height: 520px; padding: 34px; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 90% 12%, rgba(236, 104, 46, 0.22), transparent 34%), linear-gradient(135deg, #071d33 0%, #0b2f4d 100%); box-shadow: 0 24px 64px rgba(7, 29, 51, 0.16); }
.hz-wl-edge-visual h3 { max-width: 560px; color: #ffffff; font-family: 'Poppins', Arial, sans-serif; font-size: 28px; line-height: 1.25; font-weight: 500; }
.hz-wl-edge-visual p { max-width: 560px; margin-top: 14px; color: rgba(255,255,255,0.74); font-size: 14.5px; line-height: 1.7; }
.hz-wl-edge-flow { position: absolute; left: 34px; right: 34px; bottom: 34px; height: 300px; border-radius: 24px; background: rgba(255,255,255,0.04); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }

/* 缩小节点尺寸避免重叠 */
.hz-wl-node { position: absolute; z-index: 4; width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; box-shadow: inset 0 0 20px rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.2); transition: transform 0.3s ease; }
.hz-wl-node:hover { transform: scale(1.05); }
.hz-wl-node-inner { width: 100%; }
.hz-wl-node strong { display: block; color: #ffffff; font-family: 'Poppins', Arial, sans-serif; font-size: 13px; line-height: 1.25; font-weight: 600; }
.hz-wl-node span { display: block; margin-top: 4px; color: rgba(255,255,255,0.62); font-size: 10px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.5px; }

/* 节点水平分布重构 */
.hz-wl-node.sensor { left: 16px; top: 70px; }
.hz-wl-node.edge { left: 50%; top: 70px; transform: translateX(-50%); background: linear-gradient(145deg, rgba(236,104,46,0.2), rgba(236,104,46,0.05)); border-color: rgba(236,104,46,0.5); box-shadow: 0 0 36px rgba(236,104,46,0.25), inset 0 0 20px rgba(236,104,46,0.15); animation: hz-wl-edge-pulse 2.5s ease-in-out infinite; }
.hz-wl-node.edge:hover { transform: translateX(-50%) scale(1.05); }
.hz-wl-node.edge::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 50%; border: 2px dashed rgba(236,104,46,0.6); animation: hz-wl-spin 8s linear infinite; }
.hz-wl-node.platform { right: 16px; top: 70px; }

@keyframes hz-wl-edge-pulse { 0%, 100% { box-shadow: 0 0 30px rgba(236,104,46,0.2), inset 0 0 20px rgba(236,104,46,0.1); } 50% { box-shadow: 0 0 50px rgba(236,104,46,0.45), inset 0 0 30px rgba(236,104,46,0.25); } }
@keyframes hz-wl-spin { 100% { transform: rotate(360deg); } }

/* 数据流连接线调整 */
.hz-wl-flow-track { position: absolute; top: 124px; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; }
.hz-wl-flow-track.left { left: 126px; width: calc(50% - 181px); }
.hz-wl-flow-track.right { left: calc(50% + 55px); right: 126px; width: auto; }
.hz-wl-data-packet { position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 12px 3px rgba(57,198,255,0.8); opacity: 0; }
.track-1 .hz-wl-data-packet { animation: hz-wl-packet-move 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.track-2 .hz-wl-data-packet { background: #ec682e; box-shadow: 0 0 12px 3px rgba(236,104,46,0.8); animation: hz-wl-packet-move 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 0.5s; }
@keyframes hz-wl-packet-move { 0% { left: 0%; opacity: 0; transform: scale(0.5); } 15% { opacity: 1; transform: scale(1); } 85% { opacity: 1; transform: scale(1); } 100% { left: calc(100% - 10px); opacity: 0; transform: scale(0.5); } }

/* 拦截网与噪音动画优化 */
.hz-wl-filter-barrier { position: absolute; left: 32%; top: 40px; bottom: 100px; width: 2px; background: linear-gradient(to bottom, transparent, var(--hz-red), transparent); box-shadow: 0 0 16px var(--hz-red); z-index: 3; }
.hz-wl-filter-barrier-text { position: absolute; top: -20px; left: -40px; color: var(--hz-red); font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: 0.5px; }

.hz-wl-noise-group { position: absolute; left: calc(16px + 110px + 10px); top: 60px; height: 130px; display: flex; flex-direction: column; justify-content: space-between; z-index: 5; }
.hz-wl-noise { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: var(--hz-red-soft); border: 1px solid rgba(255, 77, 79, 0.3); color: #ff8787; font-size: 11.5px; font-weight: 600; backdrop-filter: blur(4px); animation: hz-wl-noise-block 3s infinite ease-in-out; white-space: nowrap; }
.hz-wl-noise::after { content: '✖'; font-size: 9px; color: var(--hz-red); }
.hz-wl-noise.n1 { animation-delay: 0s; } .hz-wl-noise.n2 { animation-delay: 0.8s; } .hz-wl-noise.n3 { animation-delay: 1.6s; }

/* 缩小横向移动范围，避免溢出 */
@keyframes hz-wl-noise-block { 
  0% { transform: translateX(0px); opacity: 0; } 
  20% { transform: translateX(15px); opacity: 1; } 
  40% { transform: translateX(35px); opacity: 1; border-color: var(--hz-red); } 
  45% { transform: translateX(30px); opacity: 0.8; } 
  60% { transform: translateX(15px); opacity: 0; } 
  100% { transform: translateX(15px); opacity: 0; } 
}

.hz-wl-edge-badges { position: absolute; left: 16px; right: 16px; bottom: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hz-wl-edge-badge { padding: 12px 10px; border-radius: 14px; background: rgba(7, 29, 51, 0.75); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(5px); text-align: center; transition: background 0.3s ease; }
.hz-wl-edge-badge:hover { background: rgba(7, 29, 51, 0.95); border-color: rgba(57,198,255,0.3); }
.hz-wl-edge-badge strong { display: block; margin-bottom: 2px; color: var(--hz-cyan); font-family: 'Poppins', Arial, sans-serif; font-size: 12px; font-weight: 600; }
.hz-wl-edge-badge span { display: block; color: rgba(255,255,255,0.7); font-size: 10.5px; line-height: 1.35; }

.hz-wl-edge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hz-wl-edge-card { min-height: 238px; padding: 26px; border-radius: 22px; background: #ffffff; border: 1px solid var(--hz-border); box-shadow: 0 14px 34px rgba(7, 29, 51, 0.03); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.hz-wl-edge-card:hover { transform: translateY(-6px); border-color: rgba(236,104,46,0.35); box-shadow: 0 22px 52px rgba(7, 29, 51, 0.08); }
.hz-wl-edge-card span.card-num { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 15px; background: var(--hz-orange-soft); color: var(--hz-orange); font-family: 'Poppins', Arial, sans-serif; font-size: 14px; font-weight: 600; }
.hz-wl-edge-card h3 { margin-bottom: 10px; color: var(--hz-navy); font-family: 'Poppins', Arial, sans-serif; font-size: 19px; line-height: 1.32; font-weight: 600; }
.hz-wl-edge-card p { color: var(--hz-text); font-size: 14.5px; line-height: 1.7; }
.hz-wl-edge-strip { margin-top: 30px; padding: 28px 32px; border-radius: 24px; background: #ffffff; border: 1px solid var(--hz-border); box-shadow: 0 14px 34px rgba(7, 29, 51, 0.03); }
.hz-wl-edge-strip h3 { margin-bottom: 18px; color: var(--hz-navy); font-family: 'Poppins', Arial, sans-serif; font-size: 20px; font-weight: 600; }
.hz-wl-protocols { display: flex; flex-wrap: wrap; gap: 10px; }
.hz-wl-protocols span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 8px; background: var(--hz-soft); border: 1px solid var(--hz-border); color: var(--hz-navy); font-family: 'Poppins', Arial, sans-serif; font-size: 13px; font-weight: 500; transition: background 0.2s, color 0.2s; }
.hz-wl-protocols span:hover { background: var(--hz-navy); color: #fff; }
.hz-wl-edge-note { margin-top: 20px; color: var(--hz-muted); font-size: 14px; line-height: 1.65; }

@media (max-width: 1180px) { .hz-wl-edge-title { font-size: 38px; } .hz-wl-edge-main { grid-template-columns: 1fr; } .hz-wl-edge-visual { min-height: 540px; } }
@media (max-width: 768px) { 
  .hz-wl-edge-container { padding: 0 22px; } 
  .hz-wl-edge-section { padding: 62px 0; } 
  .hz-wl-edge-title { font-size: 30px; letter-spacing: -0.7px; } 
  .hz-wl-edge-visual { min-height: 840px; padding: 26px 22px; } 
  
  /* 移动端垂直高度加长以容纳所有元素 */
  .hz-wl-edge-flow { left: 22px; right: 22px; height: 560px; } 
  .hz-wl-node.sensor { left: 50%; top: 20px; transform: translateX(-50%); } 
  .hz-wl-node.edge { left: 50%; top: 240px; } 
  .hz-wl-node.platform { left: 50%; top: 400px; right: auto; transform: translateX(-50%); } 
  .hz-wl-flow-track { display: none; } 
  
  .hz-wl-filter-barrier { left: 20px; right: 20px; top: 165px; bottom: auto; height: 2px; width: auto; background: linear-gradient(to right, transparent, var(--hz-red), transparent); } 
  .hz-wl-filter-barrier-text { top: -20px; left: 50%; transform: translateX(-50%); } 
  .hz-wl-noise-group { flex-direction: row; left: 10px; right: 10px; top: 185px; height: auto; justify-content: center; gap: 8px; } 
  
  @keyframes hz-wl-noise-block { 
    0% { transform: translateY(-10px); opacity: 0; } 
    20% { transform: translateY(10px); opacity: 1; } 
    40% { transform: translateY(20px); opacity: 1; border-color: var(--hz-red); } 
    45% { transform: translateY(15px); opacity: 0.8; } 
    60% { transform: translateY(10px); opacity: 0; } 
    100% { transform: translateY(10px); opacity: 0; } 
  } 
  
  .hz-wl-edge-badges { grid-template-columns: 1fr 1fr; left: 16px; right: 16px; bottom: 16px; gap: 8px; } 
  .hz-wl-edge-grid { grid-template-columns: 1fr; } 
}