/* ==========================================================================
 * VISTLAN vlan-tools — встраиваемые инженерные калькуляторы
 * Подключается из footer.php. Разметка генерится js/vlan-tools.js
 * внутри .vlt[data-vlt]. Палитра: navy #0F1A33/#142142, cyan #36C9F4,
 * blue #2256AC. Адаптив до 360px. 2026-06-11
 * ========================================================================== */

.vlt{margin:30px 0;font-family:inherit;line-height:1.4}
.vlt,.vlt *{box-sizing:border-box}

.vlt-card{background:#fff;border:1px solid #e3e8f2;border-radius:20px;
  box-shadow:0 22px 60px -30px rgba(15,26,51,.38);overflow:hidden}

/* ---- header ---- */
.vlt-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px 16px;padding:24px 26px 0;flex-wrap:wrap}
.vlt-title{font-size:1.3rem;font-weight:800;color:#142142;line-height:1.25;margin:0}
.vlt-desc{font-size:.9rem;color:#5b6478;margin-top:6px;max-width:560px}
.vlt-badge{flex:none;font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#0d7ea6;background:rgba(54,201,244,.12);
  border:1px solid rgba(54,201,244,.4);border-radius:999px;padding:6px 13px;
  white-space:nowrap;align-self:flex-start}

/* ---- layout ---- */
.vlt-body{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;
  padding:20px 26px 26px;align-items:start}

/* ---- fields ---- */
.vlt-field{margin-bottom:18px}
.vlt-field:last-child{margin-bottom:0}
.vlt-label{font-size:.92rem;font-weight:700;color:#142142;margin-bottom:9px}

.vlt-rangerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vlt input[type=range]{flex:1;min-width:120px;height:6px;border-radius:6px;
  background:#e6ecf6;outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;margin:0;padding:0;border:0}
.vlt input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,#36C9F4,#2256AC);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(20,33,66,.4);cursor:grab}
.vlt input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#36C9F4,#2256AC);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(20,33,66,.4);cursor:grab}
.vlt input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:#e6ecf6}
.vlt input[type=range]:focus-visible{outline:2px solid #36C9F4;outline-offset:3px}

.vlt-num{width:88px;padding:9px 10px;border-radius:10px;border:1px solid #d7deeb;
  background:#f6f8fc;color:#142142;font-weight:700;text-align:center;
  font-size:.98rem;-moz-appearance:textfield;appearance:textfield}
.vlt-num::-webkit-outer-spin-button,.vlt-num::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.vlt-num:focus-visible{outline:2px solid #36C9F4;outline-offset:1px}
.vlt-unit{font-size:.85rem;color:#7b859c;min-width:34px}

/* chips */
.vlt-chips{display:flex;flex-wrap:wrap;gap:8px}
.vlt-chip{appearance:none;-webkit-appearance:none;border:1px solid #d7deeb;
  background:#f6f8fc;color:#3c4660;border-radius:999px;padding:8px 15px;
  font-size:.86rem;font-weight:600;cursor:pointer;line-height:1.2;
  transition:border-color .2s,background .2s,color .2s,box-shadow .2s,transform .15s}
.vlt-chip:hover{border-color:#9fb4d8;color:#142142}
.vlt-chip:active{transform:scale(.97)}
.vlt-chip.on{background:linear-gradient(135deg,#36C9F4,#2256AC);color:#fff;
  border-color:transparent;box-shadow:0 7px 18px -8px rgba(34,86,172,.65)}
.vlt-chip:focus-visible{outline:2px solid #36C9F4;outline-offset:2px}

/* ---- dark result panel ---- */
.vlt-result{background:
    radial-gradient(130% 90% at 100% 0%,rgba(54,201,244,.18),transparent 55%),
    linear-gradient(160deg,#142142,#0F1A33);
  border-radius:16px;padding:22px;color:#e8eefc;display:flex;flex-direction:column;
  position:sticky;top:90px}
.vlt-eyebrow{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:#36C9F4;font-weight:700;margin-bottom:14px}
.vlt-bigs{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:6px}
.vlt-big-l{font-size:.8rem;color:#9fb0d4;margin-bottom:2px}
.vlt-big-v{font-size:clamp(1.5rem,1.15rem + 1.2vw,2.05rem);font-weight:800;
  color:#fff;font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap}
.vlt-big-v .u{font-size:.95rem;color:#36C9F4;font-weight:700}
.vlt-rows{border-top:1px solid rgba(255,255,255,.13);margin-top:12px;padding-top:10px}
.vlt-row{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:4px 0;font-size:.86rem}
.vlt-row .k{color:#9fb0d4}
.vlt-row .v{color:#e8eefc;font-weight:600;text-align:right;white-space:nowrap}
.vlt-note{margin-top:13px;font-size:.84rem;line-height:1.45;color:#bfe9f8;
  background:rgba(54,201,244,.1);border:1px solid rgba(54,201,244,.28);
  border-radius:10px;padding:10px 13px}
.vlt-note.warn{color:#ffd9b8;background:rgba(255,160,70,.1);
  border-color:rgba(255,160,70,.38)}

/* CTA */
.vlt-ctawrap{margin-top:16px}
.vlt-ctawrap .btn{display:inline-block;background:linear-gradient(135deg,#36C9F4,#2256AC);
  color:#fff !important;border:none;border-radius:12px;padding:12px 24px;
  font-weight:700;font-size:.95rem;text-decoration:none;text-align:center;
  box-shadow:0 10px 24px -10px rgba(54,201,244,.55);
  transition:transform .2s,box-shadow .2s}
.vlt-ctawrap .btn:hover{transform:translateY(-1px);text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(54,201,244,.75)}

/* ---- responsive ---- */
@media (max-width:880px){
  .vlt-body{grid-template-columns:1fr}
  .vlt-result{position:static}
}
@media (max-width:480px){
  .vlt-head{padding:18px 16px 0}
  .vlt-body{padding:16px 16px 20px;gap:16px}
  .vlt-result{padding:16px}
  .vlt-title{font-size:1.12rem}
  .vlt-num{width:76px}
  .vlt-chip{padding:7px 12px;font-size:.82rem}
  .vlt-row{font-size:.82rem}
  .vlt-row .v{white-space:normal}
  .vlt-ctawrap .btn{display:block;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .vlt *{transition:none !important;animation:none !important}
}

/* ==== VLSVC: дизайн сервисных страниц (герой, цифры, карточки, шаги) ==== */
.vlsvc-hero{background:linear-gradient(135deg,#0E2A6B 0%,#2563EB 100%);color:#fff;border-radius:18px;padding:26px 30px;margin:6px 0 20px;}
.vlsvc-hero h2{color:#fff!important;margin:0 0 10px!important;border:0!important;}
.vlsvc-hero p{color:#dbe6ff;margin:0;font-size:16px;}
.vlsvc-stats{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0;}
.vlsvc-stat{flex:1 1 150px;background:#fff;border:1px solid #e6ecf5;border-radius:14px;padding:16px 18px;box-shadow:0 2px 12px rgba(12,32,75,.04);}
.vlsvc-stat b{display:block;font-size:26px;color:#2563EB;font-weight:800;line-height:1.1;}
.vlsvc-stat span{color:#5b6b86;font-size:13px;}
.vlsvc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0;}
.vlsvc-card{background:#f6f9ff;border:1px solid #e6ecf5;border-radius:14px;padding:18px 20px;}
.vlsvc-card b{display:block;color:#0E2A6B;margin-bottom:6px;}
.vlsvc-card span{color:#46556f;font-size:15px;}
.vlsvc-steps{counter-reset:vs;margin:18px 0;padding:0;list-style:none;}
.vlsvc-steps li{position:relative;padding:2px 0 16px 52px;min-height:36px;}
.vlsvc-steps li b{color:#0E2A6B;}
.vlsvc-steps li:before{counter-increment:vs;content:counter(vs);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:#2563EB;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}

/* ==== VLSVC-2: карточки смежных услуг + итоговый CTA + кнопка ==== */
.vlsvc-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0;}
.vlsvc-linkcard{display:block;position:relative;background:#fff;border:1px solid #e6ecf5;border-radius:14px;padding:18px 46px 18px 18px;text-decoration:none!important;transition:.15s;box-shadow:0 2px 12px rgba(12,32,75,.04);}
.vlsvc-linkcard:hover{border-color:#2563EB;box-shadow:0 8px 22px rgba(37,99,235,.15);transform:translateY(-2px);}
.vlsvc-linkcard b{display:block;color:#0E2A6B;margin-bottom:4px;}
.vlsvc-linkcard span{color:#5b6b86;font-size:14px;}
.vlsvc-linkcard i{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#2563EB;font-size:24px;font-style:normal;font-weight:700;}
.vlsvc-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,#0E2A6B,#2563EB);border-radius:16px;padding:22px 26px;margin:22px 0;}
.vlsvc-cta__t b{display:block;color:#fff;font-size:18px;margin-bottom:4px;}
.vlsvc-cta__t span{color:#dbe6ff;}
.vlsvc-cta__a{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.vlsvc-cta__alt{color:#dbe6ff;font-size:13.5px;}
.vlsvc-cta__alt a{color:#fff;font-weight:600;}
.vl-cta__btn{display:inline-block;background:#2563EB;color:#fff!important;border-radius:11px;padding:13px 26px;font-weight:700;text-decoration:none!important;cursor:pointer;border:0;}
.vl-cta__btn:hover{background:#1d4fd0;}
.vlsvc-cta .vl-cta__btn{background:#fff;color:#1d4fd0!important;}
.vlsvc-cta .vl-cta__btn:hover{background:#eaf1ff;}

/* ==== VLSVC-3: hero с анимированным SVG ==== */
.vlsvc-hero--2col{display:flex;align-items:center;gap:22px;}
.vlsvc-hero__t{flex:1 1 58%;}
.vlsvc-hero__g{flex:0 0 40%;max-width:270px;margin-left:auto;}
.vlsvc-hero__g svg{width:100%;height:auto;display:block;}
.vlsvc-node{animation:vlsvcPulse 2.6s ease-in-out infinite;transform-origin:center;}
@keyframes vlsvcPulse{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.vlsvc-node{animation:none}}
@media(max-width:680px){.vlsvc-hero--2col{flex-direction:column;}.vlsvc-hero__g{max-width:190px;margin:6px auto 0;}}