.vVn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:80px 20px;text-align:center;position:relative;overflow:hidden;margin-bottom:40px;}.vVn::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity:0.3;}.gZ5{position:relative;z-index:1;}.vVn h1{font-size:3rem;margin-bottom:20px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,0.3);}.vVn p{font-size:1.2rem;margin-bottom:30px;opacity:0.9;max-width:800px;margin-left:auto;margin-right:auto;}.znR{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;}.d2Q{background:rgba(255,255,255,0.2);color:white;padding:8px 15px;font-size:0.9rem;border:1px solid rgba(255,255,255,0.3);transition:all 0.3s ease;}.d2Q:hover{background:rgba(255,255,255,0.3);transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,0.2);}.pAf{padding:60px 0;background:#f8f9fa;}.pAf h2{color:#2c3e50;font-weight:700;}.tCS{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;margin-top:40px;}.pfB{flex:1;min-width:200px;max-width:250px;text-align:center;padding:30px 20px;background:white;border-radius:10px;box-shadow:0 5px 20px rgba(0,0,0,0.08);transition:all 0.3s ease;position:relative;}.pfB:hover{transform:translateY(-10px);box-shadow:0 15px 30px rgba(0,0,0,0.15);}.teE{width:50px;height:50px;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:bold;margin:0 auto 20px;}.jd3{font-size:1.3rem;font-weight:600;color:#2c3e50;margin-bottom:15px;}.cXG{color:#7f8c8d;font-size:0.95rem;line-height:1.6;}.kqI{padding:60px 0;}.jne{background:white;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.1);padding:30px;margin-bottom:30px;}.jne h2{color:#2c3e50;font-weight:600;margin-bottom:25px;}.ySv{margin-bottom:25px;}.f6t{background:#f8f9fa;border:1px solid #dee2e6;color:#495057;padding:12px 20px;transition:all 0.3s ease;}.f6t:hover{background:#e9ecef;border-color:#adb5bd;}.f6t.active{background:linear-gradient(135deg,#667eea,#764ba2);color:white;border-color:#667eea;}.f6t i{margin-right:8px;}.lwf{height:400px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:10px;position:relative;overflow:hidden;border:2px dashed #dee2e6;}.uyt{display:flex;flex-wrap:wrap;gap:15px;}.c26{background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;padding:12px 20px;border-radius:8px;font-weight:500;transition:all 0.3s ease;display:flex;align-items:center;gap:8px;}.c26:hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(102,126,234,0.4);}.c26 i{font-size:1rem;}.r_A{background:white;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.1);padding:25px;margin-bottom:20px;}.r_A h3{color:#2c3e50;font-weight:600;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee;}.rB3{background:white;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.1);padding:25px;margin-bottom:20px;}.rB3 h3{color:#2c3e50;font-weight:600;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee;}.sU3{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0;}.sU3:last-child{border-bottom:none;}.x1X{color:#7f8c8d;font-size:0.95rem;}.fm_{color:#2c3e50;font-weight:600;font-size:1.1rem;}.qqF{background:white;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.1);padding:25px;}.qqF h3{color:#2c3e50;font-weight:600;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #eee;}.vLt{height:200px;background:#f8f9fa;border-radius:8px;position:relative;overflow:hidden;}.mGj{position:absolute;width:80px;height:80px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;font-weight:bold;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.2);z-index:10;}.mGj:hover{transform:scale(1.1);z-index:20;}.mGj i{font-size:2rem;margin-bottom:5px;}.mGj.hub{background:linear-gradient(135deg,#ff6b6b,#ee5a52);}.mGj.bridge{background:linear-gradient(135deg,#4ecdc4,#44a08d);}.mGj.switch{background:linear-gradient(135deg,#45b7d1,#3498db);}.mGj.router{background:linear-gradient(135deg,#96ceb4,#27ae60);}.e4Q{position:absolute;height:3px;background:#7f8c8d;transform-origin:0 0;z-index:5;}.e4Q.active{background:#3498db;box-shadow:0 0 10px rgba(52,152,219,0.8);animation:pulse_animation 1.5s infinite;}@keyframes pulse_animation{0%{opacity:0.6;}50%{opacity:1;}100%{opacity:0.6;}}.doy{position:absolute;width:20px;height:20px;border-radius:50%;background:#f39c12;box-shadow:0 0 10px rgba(243,156,18,0.8);z-index:15;animation:move_packet_animation 3s linear infinite;}.doy.data{background:#3498db;box-shadow:0 0 10px rgba(52,152,219,0.8);}.doy.broadcast{background:#e74c3c;box-shadow:0 0 10px rgba(231,76,60,0.8);}@keyframes move_packet_animation{from{transform:translate(0,0);}to{transform:translate(100px,100px);}}@media (max-width:768px){.vVn h1{font-size:2.2rem;}.vVn p{font-size:1rem;}.tCS{flex-direction:column;align-items:center;}.pfB{max-width:100%;width:100%;}.uyt{flex-direction:column;}.c26{width:100%;justify-content:center;}.znR{flex-direction:column;align-items:center;}.d2Q{width:100%;max-width:300px;text-align:center;}}