/* Start:/bitrix/templates/aspro-premier/css/v8b-home.css?178085234321122*/
/* ============================================================= */
/* VISTLAN v8b-home.css — premium upgrades for HERO AI graphic   */
/* and the Импортозамещение (#vl-import) comparison block.       */
/* All rules scoped under #vlan-home-v2. Crawler-safe, no JS.    */
/* (Claude 2026-06-07)                                           */
/* ============================================================= */

/* ===================================================== */
/* TASK A — Richer HERO "Инфраструктура под ИИ" graphic  */
/* ===================================================== */
#vlan-home-v2 .hero-visual-card .vl-ai-viz{position:relative;width:100%;height:auto;display:block;border-radius:var(--r-lg);overflow:hidden}
#vlan-home-v2 .hero-visual-card .vl-ai-viz svg{width:100%;height:auto;display:block}
#vlan-home-v2 .vl-ai-viz .vl-ai-rotor{transform-box:fill-box;transform-origin:center;animation:vlAiSpin 26s linear infinite}
#vlan-home-v2 .vl-ai-viz .vl-ai-rotor--rev{animation:vlAiSpinRev 34s linear infinite}
@keyframes vlAiSpin{to{transform:rotate(360deg)}}
@keyframes vlAiSpinRev{to{transform:rotate(-360deg)}}
#vlan-home-v2 .vl-ai-viz .vl-ai-glowpulse{transform-box:fill-box;transform-origin:center;animation:vlAiGlow 6s ease-in-out infinite}
@keyframes vlAiGlow{0%,100%{opacity:.30;transform:scale(.96)}50%{opacity:.55;transform:scale(1.05)}}

/* ===================================================== */
/* TASK B — "Wow" Импортозамещение block (#vl-import)    */
/* ===================================================== */
#vlan-home-v2 #vl-import .imp-compare{position:relative}
#vlan-home-v2 #vl-import .imp-col--new{position:relative;isolation:isolate}
#vlan-home-v2 #vl-import .imp-col--new::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(130deg,rgba(var(--cyan-rgb),.95),rgba(var(--blue-rgb),.55) 38%,rgba(var(--cyan-rgb),.95) 60%,rgba(var(--blue-rgb),.55) 82%,rgba(var(--cyan-rgb),.95));background-size:300% 300%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2;animation:vlImpBorder 7s linear infinite}
@keyframes vlImpBorder{0%{background-position:0% 50%}100%{background-position:300% 50%}}
#vlan-home-v2 #vl-import .imp-col--new::after{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;background:radial-gradient(70% 60% at 50% 0%,rgba(var(--cyan-rgb),.22),transparent 70%);opacity:.7;animation:vlImpHalo 6s ease-in-out infinite}
@keyframes vlImpHalo{0%,100%{opacity:.45}50%{opacity:.85}}
#vlan-home-v2 #vl-import .imp-arrow{position:relative;overflow:visible}
#vlan-home-v2 #vl-import .imp-flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
#vlan-home-v2 #vl-import .imp-row{transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease);border:1px solid transparent;border-radius:var(--r-md)}
#vlan-home-v2 #vl-import .imp-col--new .imp-row:hover{transform:translateX(4px);border-color:rgba(var(--cyan-rgb),.45);background:rgba(var(--cyan-rgb),.06);box-shadow:0 10px 30px -16px rgba(var(--blue-rgb),.6)}
#vlan-home-v2 #vl-import .imp-col--old .imp-row:hover{transform:translateX(-4px);border-color:rgba(255,120,120,.32);background:rgba(255,120,120,.04)}
#vlan-home-v2 #vl-import .imp-badge--new{position:relative;overflow:hidden}
#vlan-home-v2 #vl-import .imp-badge--new::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:vlImpSheen 4.5s var(--ease) infinite}
@keyframes vlImpSheen{0%{left:-130%}55%,100%{left:160%}}
#vlan-home-v2 #vl-import .imp-col--new .imp-ic--new{animation:vlImpIcPulse 3.4s ease-in-out infinite}
@keyframes vlImpIcPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--cyan-rgb),0)}50%{box-shadow:0 0 0 5px rgba(var(--cyan-rgb),.10)}}
#vlan-home-v2 #vl-import .imp-process{position:relative}
#vlan-home-v2 #vl-import .imp-flowline{position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);border-radius:3px;background:linear-gradient(90deg,rgba(var(--cyan-rgb),0),rgba(var(--cyan-rgb),.55),rgba(var(--blue-rgb),.55),rgba(var(--cyan-rgb),0));background-size:220% 100%;z-index:0;pointer-events:none;animation:vlImpFlowLine 5s linear infinite;opacity:.6}
@keyframes vlImpFlowLine{0%{background-position:120% 0}100%{background-position:-120% 0}}
#vlan-home-v2 #vl-import .imp-step{position:relative;z-index:1;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
#vlan-home-v2 #vl-import .imp-step:hover{transform:translateY(-4px);border-color:rgba(var(--cyan-rgb),.4);box-shadow:0 14px 36px -18px rgba(var(--blue-rgb),.6)}
#vlan-home-v2 #vl-import .imp-step-n{position:relative}
#vlan-home-v2 #vl-import .imp-step-n::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(var(--cyan-rgb),.4);opacity:0;animation:vlImpStepRing 4s ease-out infinite}
#vlan-home-v2 #vl-import .imp-step:nth-child(2) .imp-step-n::after{animation-delay:.8s}
#vlan-home-v2 #vl-import .imp-step:nth-child(3) .imp-step-n::after{animation-delay:1.6s}
#vlan-home-v2 #vl-import .imp-step:nth-child(4) .imp-step-n::after{animation-delay:2.4s}
#vlan-home-v2 #vl-import .imp-step:nth-child(5) .imp-step-n::after{animation-delay:3.2s}
@keyframes vlImpStepRing{0%{opacity:.8;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.55)}}
#vlan-home-v2 #vl-import .imp-chip{transition:transform .3s var(--ease),border-color .3s,background-color .3s}
#vlan-home-v2 #vl-import .imp-chip:hover{transform:translateY(-2px);border-color:rgba(var(--cyan-rgb),.5);background:rgba(var(--cyan-rgb),.08)}
#vlan-home-v2 #vl-import .imp-chip svg{animation:vlImpCheck 5s ease-in-out infinite}
@keyframes vlImpCheck{0%,90%,100%{transform:scale(1)}94%{transform:scale(1.25)}}

/* ===================================================== */
/* Respect reduced motion                                */
/* ===================================================== */
@media(prefers-reduced-motion:reduce){
  #vlan-home-v2 .vl-ai-viz *,
  #vlan-home-v2 #vl-import .imp-col--new::before,
  #vlan-home-v2 #vl-import .imp-col--new::after,
  #vlan-home-v2 #vl-import .imp-badge--new::after,
  #vlan-home-v2 #vl-import .imp-col--new .imp-ic--new,
  #vlan-home-v2 #vl-import .imp-flowline,
  #vlan-home-v2 #vl-import .imp-step-n::after,
  #vlan-home-v2 #vl-import .imp-chip svg{animation:none !important}
  #vlan-home-v2 .vl-ai-viz svg animate,
  #vlan-home-v2 .vl-ai-viz svg animateMotion,
  #vlan-home-v2 .vl-ai-viz svg animateTransform,
  #vlan-home-v2 #vl-import .imp-flow animate,
  #vlan-home-v2 #vl-import .imp-flow animateMotion{display:none}
}

/* ============================================================= */
/* VISTLAN v9 — homepage upgrade (Claude 2026-06-07)             */
/* Merged calculator polish · services/eq alignment · USP stats  */
/* AI globe integration · import flow line · FAQ 2-col · blog ic */
/* All scoped under #vlan-home-v2. prefers-reduced-motion safe.  */
/* ============================================================= */

/* ---------- ITEM 9: hero 44-ФЗ / 223-ФЗ chip reads cleanly ---------- */
#vlan-home-v2 .chip--fz b{font-size:clamp(1.05rem,.8rem + .9vw,1.4rem);letter-spacing:-.01em;white-space:nowrap}
#vlan-home-v2 .chip--fz b .sl{color:var(--cyan);margin:0 1px;font-weight:600}

/* ---------- ITEM 2: services bento — equal description heights ---------- */
#vlan-home-v2 .cell .cell-desc{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:3;line-clamp:3}
#vlan-home-v2 .cell--flagship .cell-desc{-webkit-line-clamp:3;line-clamp:3}
@media(max-width:560px){#vlan-home-v2 .cell .cell-desc{-webkit-line-clamp:4;line-clamp:4}}

/* ---------- ITEM 1: MERGED CALCULATOR — friendly, playful ---------- */
#vlan-home-v2 #vlan-proj-calc .vpc-price-cap{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-top:2px}
#vlan-home-v2 #vlan-proj-calc .vpc-price{font-size:clamp(2rem,1.2rem + 2.6vw,2.9rem);margin:2px 0 2px;
  transition:transform .25s var(--ease)}
#vlan-home-v2 #vlan-proj-calc .vpc-price.bump{transform:scale(1.05)}
#vlan-home-v2 #vlan-proj-calc .vpc-price-hi{font-size:.86rem;color:var(--ink-3);opacity:.85}
#vlan-home-v2 #vlan-proj-calc .vpc-reassure{display:flex;gap:9px;align-items:flex-start;margin:14px 0 2px;
  padding:11px 13px;border-radius:12px;background:rgba(var(--cyan-rgb),.08);
  border:1px solid rgba(var(--cyan-rgb),.22);font-size:.84rem;line-height:1.45;color:var(--ink-2)}
#vlan-home-v2 #vlan-proj-calc .vpc-reassure svg{width:16px;height:16px;color:var(--cyan);flex:none;margin-top:1px}
/* equal-height columns + sticky result on desktop */
#vlan-home-v2 #vlan-proj-calc .vpc-grid{align-items:stretch}
#vlan-home-v2 #vlan-proj-calc .vpc-card,
#vlan-home-v2 #vlan-proj-calc .vpc-result{height:100%}
/* playful slider thumb + filled track feel */
#vlan-home-v2 #vlan-proj-calc input[type=range]{cursor:pointer}
#vlan-home-v2 #vlan-proj-calc input[type=range]::-webkit-slider-thumb{transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
#vlan-home-v2 #vlan-proj-calc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);box-shadow:0 0 0 6px rgba(var(--cyan-rgb),.18)}
#vlan-home-v2 #vlan-proj-calc .vpc-num{transition:border-color .2s,box-shadow .2s}
#vlan-home-v2 #vlan-proj-calc .vpc-num:focus{border-color:rgba(var(--cyan-rgb),.6);box-shadow:0 0 0 3px rgba(var(--cyan-rgb),.14);outline:none}
/* gentle pulse on the schematic stage when it redraws */
#vlan-home-v2 #vlan-proj-calc .vpc-stage{transition:box-shadow .3s var(--ease)}
#vlan-home-v2 #vlan-proj-calc .vpc-stage.redraw{box-shadow:0 0 0 1px rgba(var(--cyan-rgb),.4),0 0 26px -6px rgba(var(--cyan-rgb),.4)}
/* CTA a touch bigger / inviting */
#vlan-home-v2 #vlan-proj-calc .vpc-cta{font-size:1.04rem;padding:16px 26px}

/* ---------- ITEM 4: USP stat cluster — more plates + rich animation ---------- */
#vlan-home-v2 .usp-visual{overflow:hidden}
#vlan-home-v2 .usp-visual .usp-aura{position:absolute;inset:-30% -20% auto -20%;height:80%;z-index:0;pointer-events:none;
  background:radial-gradient(55% 70% at 30% 0%,rgba(var(--cyan-rgb),.22),transparent 70%),
             radial-gradient(50% 65% at 85% 10%,rgba(var(--blue-rgb),.28),transparent 72%);
  filter:blur(8px);animation:vlUspAura 9s ease-in-out infinite alternate}
@keyframes vlUspAura{0%{transform:translate3d(-2%,0,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.08)}}
#vlan-home-v2 .usp-visual .big,
#vlan-home-v2 .usp-visual .usp-sub,
#vlan-home-v2 .usp-visual .usp-stats{position:relative;z-index:1}
#vlan-home-v2 .usp-visual .big span{display:inline-block;animation:vlUspFloat 6s ease-in-out infinite}
@keyframes vlUspFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#vlan-home-v2 .usp-visual .usp-sub{color:var(--ink-2);margin:8px 0 22px;font-size:.95rem}
#vlan-home-v2 .usp-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
#vlan-home-v2 .usp-stat{position:relative;overflow:hidden;padding:15px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transform:translateY(14px) scale(.97);
  transition:transform .6s var(--ease),opacity .6s var(--ease),border-color .35s,box-shadow .35s}
#vlan-home-v2 .usp-visual.in .usp-stat{opacity:1;transform:none}
#vlan-home-v2 .usp-visual.in .usp-stat:nth-child(1){transition-delay:.05s}
#vlan-home-v2 .usp-visual.in .usp-stat:nth-child(2){transition-delay:.12s}
#vlan-home-v2 .usp-visual.in .usp-stat:nth-child(3){transition-delay:.19s}
#vlan-home-v2 .usp-visual.in .usp-stat:nth-child(4){transition-delay:.26s}
#vlan-home-v2 .usp-visual.in .usp-stat:nth-child(5){transition-delay:.33s}
#vlan-home-v2 .usp-visual.in .usp-stat:nth-child(6){transition-delay:.40s}
#vlan-home-v2 .usp-visual.in .usp-stat:nth-child(7){transition-delay:.47s}
#vlan-home-v2 .usp-visual.in .usp-stat:nth-child(8){transition-delay:.54s}
#vlan-home-v2 .usp-stat:hover{transform:translateY(-3px);border-color:rgba(var(--cyan-rgb),.5);
  box-shadow:0 14px 34px -18px rgba(var(--blue-rgb),.6)}
#vlan-home-v2 .usp-stat .us-glow{position:absolute;inset:auto auto -40% -30%;width:120%;height:120%;
  background:radial-gradient(closest-side,rgba(var(--cyan-rgb),.16),transparent 70%);opacity:0;
  transition:opacity .4s;pointer-events:none}
#vlan-home-v2 .usp-stat:hover .us-glow{opacity:1}
#vlan-home-v2 .usp-stat .us-n,#vlan-home-v2 .usp-stat .us-t{display:block;font-family:var(--font-head);
  font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#vlan-home-v2 .usp-stat .us-n{font-size:clamp(1.5rem,1rem + 1.5vw,1.95rem);
  background:linear-gradient(120deg,var(--cyan),#8fe3f0 45%,var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
#vlan-home-v2 .usp-stat .us-t{font-size:1.15rem}
#vlan-home-v2 .usp-stat .us-l{display:block;margin-top:5px;font-size:.78rem;color:var(--ink-3);line-height:1.35}

/* ---------- ITEM 5: AI globe — integrated, not clipped + richer motion ---------- */
#vlan-home-v2 .ai-block{isolation:isolate}
#vlan-home-v2 .ai-block .ai-globe{position:absolute;top:50%;right:clamp(-90px,-4vw,-30px);
  transform:translateY(-50%);width:clamp(300px,34vw,460px);max-width:60%;height:auto;opacity:.6;
  z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
#vlan-home-v2 .ai-block .vl-container{position:relative;z-index:1}
#vlan-home-v2 .ai-globe .aig-globe{transform-box:fill-box;transform-origin:center;animation:vlGlobeSpin 60s linear infinite}
@keyframes vlGlobeSpin{to{transform:rotate(360deg)}}
#vlan-home-v2 .ai-globe .aig-orbit{transform-box:fill-box;transform-origin:center;animation:vlGlobeSpin 24s linear infinite}
#vlan-home-v2 .ai-globe .aig-orbit2{transform-box:fill-box;transform-origin:center;animation:vlGlobeSpinRev 32s linear infinite}
@keyframes vlGlobeSpinRev{to{transform:rotate(-360deg)}}
#vlan-home-v2 .ai-globe .aig-halo{transform-box:fill-box;transform-origin:center;animation:vlGlobeHalo 7s ease-in-out infinite}
@keyframes vlGlobeHalo{0%,100%{opacity:.45;transform:scale(.97)}50%{opacity:.8;transform:scale(1.05)}}
#vlan-home-v2 .ai-globe .aig-core{transform-box:fill-box;transform-origin:center;animation:vlGlobeHalo 3.4s ease-in-out infinite}
@media(max-width:980px){#vlan-home-v2 .ai-block .ai-globe{display:none}}

/* ---------- ITEM 6: import process — flow line routed through badges only ---------- */
#vlan-home-v2 #vl-import .imp-process{position:relative;align-items:start}
/* move the line up to the centre of the number badges, and only span between them */
#vlan-home-v2 #vl-import .imp-flowline{top:34px;left:10%;right:10%;height:3px;transform:none;
  z-index:0;border-radius:3px}
@media(max-width:760px){
  /* vertical layout: keep the line behind the badge column, never over text */
  #vlan-home-v2 #vl-import .imp-flowline{top:0;bottom:0;left:24px;right:auto;width:3px;height:auto}
}
#vlan-home-v2 #vl-import .imp-step-n{position:relative;z-index:2;background:var(--bg-3,#0F1730)}
#vlan-home-v2 #vl-import .imp-step h4{position:relative;z-index:2}

/* ---------- ITEM 7: blog per-topic icon badge ---------- */
#vlan-home-v2 .blog-card-img{position:relative}
#vlan-home-v2 .blog-card-topic{position:absolute;top:12px;left:12px;z-index:2;width:40px;height:40px;
  border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(10,17,38,.78),rgba(10,17,38,.55));
  border:1px solid rgba(var(--cyan-rgb),.4);backdrop-filter:blur(8px) saturate(140%);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.7);transition:transform .4s var(--ease),border-color .4s}
#vlan-home-v2 .blog-card-topic svg{width:21px;height:21px;color:var(--cyan)}
#vlan-home-v2 .blog-card:hover .blog-card-topic{transform:translateY(-2px) scale(1.05);border-color:rgba(var(--cyan-rgb),.7)}

/* ---------- ITEM 8: FAQ two columns + smooth open/close ---------- */
#vlan-home-v2 .faq{max-width:1060px;display:grid;grid-template-columns:1fr 1fr;
  gap:12px 18px;align-content:start}
#vlan-home-v2 .faq details{align-self:start}
#vlan-home-v2 .faq summary::after{content:"";width:13px;height:13px;background:none;
  border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(45deg);transition:transform .3s var(--ease);margin-top:-4px}
#vlan-home-v2 .faq details[open] summary::after{transform:rotate(225deg);margin-top:2px}
#vlan-home-v2 .faq details>p{overflow:hidden}
#vlan-home-v2 .faq details[open]>p{animation:vlFaqOpen .35s var(--ease)}
@keyframes vlFaqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:760px){#vlan-home-v2 .faq{grid-template-columns:1fr}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  #vlan-home-v2 .usp-visual .usp-aura,
  #vlan-home-v2 .usp-visual .big span,
  #vlan-home-v2 .ai-globe .aig-globe,
  #vlan-home-v2 .ai-globe .aig-orbit,
  #vlan-home-v2 .ai-globe .aig-orbit2,
  #vlan-home-v2 .ai-globe .aig-halo,
  #vlan-home-v2 .ai-globe .aig-core{animation:none !important}
  #vlan-home-v2 .ai-globe .aig-arcs animate,
  #vlan-home-v2 .ai-globe animateMotion{display:none}
  #vlan-home-v2 .usp-stat{opacity:1;transform:none;transition:none}
  #vlan-home-v2 .faq details[open]>p{animation:none}
}

/* v9 fix: FAQ true 2-column (was display:flex overriding the grid) */
#vlan-home-v2 .faq{display:grid!important;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
#vlan-home-v2 .faq details{width:auto;margin:0}
@media(max-width:760px){#vlan-home-v2 .faq{grid-template-columns:1fr!important}}

/* ===================================================== */
/* РЕАЛИЗОВАННЫЕ ПРОЕКТЫ + ГАЙДЫ teaser (#vl-cases) 2026-06-07 */
/* internal-linking / traffic funnel. Scoped #vlan-home-v2. */
/* ===================================================== */
#vlan-home-v2 #vl-cases .vl-cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
#vlan-home-v2 #vl-cases .vl-case-card{display:flex;flex-direction:column;gap:14px;padding:26px 24px 22px;border-radius:var(--r-lg);background:var(--bg-3);border:1px solid var(--line);text-decoration:none;transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
#vlan-home-v2 #vl-cases .vl-case-card:hover{transform:translateY(-6px);border-color:rgba(var(--cyan-rgb),.45);box-shadow:0 18px 44px -18px rgba(var(--blue-rgb),.5)}
#vlan-home-v2 #vl-cases .vl-case-tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);background:rgba(var(--blue-rgb),.08);border:1px solid rgba(var(--blue-rgb),.18);padding:5px 12px;border-radius:999px}
#vlan-home-v2 #vl-cases .vl-case-title{font-family:var(--font-head);font-weight:700;font-size:1.12rem;line-height:1.32;color:var(--ink);flex:1;margin:0}
#vlan-home-v2 #vl-cases .vl-case-go{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:.9rem;transition:gap .3s var(--ease)}
#vlan-home-v2 #vl-cases .vl-case-card:hover .vl-case-go{gap:11px}
#vlan-home-v2 #vl-cases .vl-cases-all{text-align:center;margin-top:30px}
#vlan-home-v2 #vl-cases .vl-guides{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
#vlan-home-v2 #vl-cases .vl-guides-label{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:.96rem;margin-right:4px}
#vlan-home-v2 #vl-cases .vl-guide-chip{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line-2);color:var(--ink-2);font-size:.88rem;font-weight:600;text-decoration:none;transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
#vlan-home-v2 #vl-cases .vl-guide-chip:hover{color:var(--blue);border-color:rgba(var(--blue-rgb),.4);background:rgba(var(--blue-rgb),.06);transform:translateY(-2px)}
#vlan-home-v2 #vl-cases .vl-guide-all{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:.9rem;text-decoration:none;transition:gap .3s var(--ease)}
#vlan-home-v2 #vl-cases .vl-guide-all:hover{gap:10px}
@media(max-width:860px){#vlan-home-v2 #vl-cases .vl-cases-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){#vlan-home-v2 #vl-cases .vl-cases-grid{grid-template-columns:1fr}#vlan-home-v2 #vl-cases .vl-guides{flex-direction:column;align-items:stretch;text-align:center}}

/* End */


/* Start:/bitrix/templates/aspro-premier/css/vlan-calc.css?17808256659471*/
/* ==========================================================================
 * VISTLAN — Инженерный калькулятор проекта (merged section) — styles
 * Scoped under #vlan-home-v2. Uses existing design tokens. Mobile < 980px.
 * prefers-reduced-motion respected. Brand: navy #0F1A33 / blue #2256AC /
 * cyan #59C7DB.
 * ========================================================================== */

/* ---- tabs (segmented, wrapping, centred) -------------------------------- */
#vlan-home-v2 .vpc-tabwrap{text-align:center}
#vlan-home-v2 .vpc-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:var(--r-lg);
  background:var(--bg-3);border:1px solid var(--line);margin:0 auto clamp(28px,4vw,44px);
  max-width:100%;flex-wrap:wrap;justify-content:center}
#vlan-home-v2 .vpc-tab{appearance:none;border:none;cursor:pointer;background:transparent;
  color:var(--ink-2);font-family:var(--font-head);font-weight:700;font-size:.92rem;
  padding:10px 18px;border-radius:999px;white-space:nowrap;
  transition:color .25s var(--ease),background .25s var(--ease)}
#vlan-home-v2 .vpc-tab:hover{color:var(--ink)}
#vlan-home-v2 .vpc-tab[aria-selected=true]{color:#06122B;
  background:linear-gradient(135deg,var(--cyan),#7fdcf0 40%,var(--blue));
  box-shadow:0 8px 22px -10px rgba(var(--cyan-rgb),.6)}
#vlan-home-v2 .vpc-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- equal-height two-column grid (inputs left, result+schematic right) -- */
#vlan-home-v2 .vpc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;
  align-items:stretch}
#vlan-home-v2 .vpc-card{border-radius:var(--r-xl);padding:clamp(22px,3vw,34px);
  background:var(--bg-2);border:1px solid var(--line-2);
  box-shadow:0 24px 70px -34px rgba(20,33,66,.45);display:flex;flex-direction:column}
#vlan-home-v2 .vpc-step{margin-bottom:24px}
#vlan-home-v2 .vpc-step:last-child{margin-bottom:0}
#vlan-home-v2 .vpc-label{font-family:var(--font-head);color:var(--ink);font-size:1rem;
  font-weight:700;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
#vlan-home-v2 .vpc-label .n{width:24px;height:24px;border-radius:50%;display:inline-grid;
  place-items:center;font-size:.78rem;background:linear-gradient(135deg,var(--cyan),var(--blue));
  color:#06122B;font-weight:800;margin-right:8px;flex:none}
#vlan-home-v2 .vpc-label .lt{display:flex;align-items:center;flex:1}

/* slider + number row */
#vlan-home-v2 .vpc-scale{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#vlan-home-v2 .vpc-scale input[type=range]{flex:1;min-width:140px;accent-color:var(--cyan);height:6px}
#vlan-home-v2 .vpc-num{width:92px;padding:10px 12px;border-radius:10px;background:var(--bg-3);
  border:1px solid var(--line-2);color:var(--ink);font-family:var(--font-head);
  font-size:1.05rem;text-align:center;-moz-appearance:textfield}
#vlan-home-v2 .vpc-num::-webkit-outer-spin-button,#vlan-home-v2 .vpc-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#vlan-home-v2 .vpc-num:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
#vlan-home-v2 .vpc-unit{font-size:.85rem;color:var(--ink-3);min-width:96px}

/* toggles */
#vlan-home-v2 .vpc-toggles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#vlan-home-v2 .vpc-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-radius:12px;background:var(--bg-3);border:1px solid var(--line);cursor:pointer;
  transition:.2s;font-size:.9rem;color:var(--ink-2);user-select:none;text-align:left;
  font-family:var(--font-body);appearance:none}
#vlan-home-v2 .vpc-opt:hover{border-color:var(--line-2)}
#vlan-home-v2 .vpc-opt.on{border-color:rgba(var(--cyan-rgb),.5);
  background:rgba(var(--cyan-rgb),.08);color:var(--ink)}
#vlan-home-v2 .vpc-opt .box{width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--ink-3);flex:none;display:grid;place-items:center;transition:.2s}
#vlan-home-v2 .vpc-opt.on .box{background:linear-gradient(135deg,var(--cyan),var(--blue));border-color:transparent}
#vlan-home-v2 .vpc-opt .box svg{width:13px;height:13px;color:#06122B;opacity:0;transition:opacity .2s}
#vlan-home-v2 .vpc-opt.on .box svg{opacity:1}
#vlan-home-v2 .vpc-opt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- result + schematic panel (dark, re-scoped light text) -------------- */
#vlan-home-v2 .vpc-result{--ink:#F4F7FF;--ink-2:#C4CEE6;--ink-3:#93A0BE;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.16);
  border-radius:var(--r-xl);padding:clamp(22px,3vw,30px);
  background:radial-gradient(120% 80% at 100% 0%,rgba(var(--blue-rgb),.4),transparent 60%),
    linear-gradient(160deg,#101a3c,#0a1126);
  border:1px solid var(--line-2);box-shadow:0 30px 80px -24px rgba(0,0,0,.6);
  display:flex;flex-direction:column}
#vlan-home-v2 .vpc-rb-eyebrow{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);font-weight:700;display:flex;align-items:center;gap:8px;margin:0 0 12px}
#vlan-home-v2 .vpc-rb-eyebrow svg{width:14px;height:14px}

/* live schematic stage */
#vlan-home-v2 .vpc-stage{border-radius:var(--r-lg);background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);padding:10px;margin-bottom:16px}
#vlan-home-v2 .vpc-stage svg{width:100%;height:auto;display:block}
#vlan-home-v2 .vpc-scene{}
/* schematic primitives */
#vlan-home-v2 .vpc-bldg{fill:rgba(255,255,255,.025);stroke:var(--line-2);stroke-width:1.4}
#vlan-home-v2 .vpc-bldg-line{stroke:rgba(255,255,255,.10);stroke-width:1}
#vlan-home-v2 .vpc-node{fill:rgba(34,86,172,.18);stroke:rgba(var(--cyan-rgb),.45);stroke-width:1.4}
#vlan-home-v2 .vpc-accent{fill:rgba(var(--cyan-rgb),.16);stroke:var(--cyan);stroke-width:1.6}
#vlan-home-v2 .vpc-unit{fill:rgba(255,255,255,.06);stroke:rgba(var(--cyan-rgb),.3);stroke-width:.8}
#vlan-home-v2 .vpc-screen{fill:rgba(var(--cyan-rgb),.18);stroke:rgba(var(--cyan-rgb),.4);stroke-width:.8}
#vlan-home-v2 .vpc-cam-body{fill:rgba(var(--cyan-rgb),.18);stroke:var(--cyan);stroke-width:1.2}
#vlan-home-v2 .vpc-dot{fill:var(--cyan)}
#vlan-home-v2 .vpc-link{stroke:rgba(var(--cyan-rgb),.55);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
#vlan-home-v2 .vpc-link--faint{stroke:rgba(var(--cyan-rgb),.22);stroke-width:1}
#vlan-home-v2 .vpc-lbl{fill:var(--ink-2);font-family:var(--font-body);font-size:11px;font-weight:600}
#vlan-home-v2 .vpc-plus{fill:var(--cyan);font-family:var(--font-head);font-size:16px;font-weight:800}
#vlan-home-v2 .vpc-bolt,#vlan-home-v2 .vpc-fan-blade{stroke:var(--cyan);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
#vlan-home-v2 .vpc-fan{fill:none;stroke:rgba(var(--cyan-rgb),.5);stroke-width:1.4}
#vlan-home-v2 .vpc-cover{fill:rgba(var(--cyan-rgb),.07);stroke:rgba(var(--cyan-rgb),.30);stroke-width:1}
#vlan-home-v2 .vpc-wave{stroke:var(--cyan);stroke-width:1.4;fill:none;stroke-linecap:round}
#vlan-home-v2 .vpc-gauge-bg{stroke:rgba(255,255,255,.12);stroke-width:9;stroke-linecap:round}
#vlan-home-v2 .vpc-gauge-fg{stroke:var(--cyan);stroke-width:9;stroke-linecap:round}
#vlan-home-v2 .vpc-gauge-val{fill:var(--ink);font-family:var(--font-head);font-size:20px;font-weight:800}
#vlan-home-v2 .vpc-flow{fill:#bdf2fb}
#vlan-home-v2 .vpc-spin{animation:vpcSpin 4s linear infinite}
@keyframes vpcSpin{to{transform:rotate(360deg)}}

/* price + timeline + specs */
#vlan-home-v2 .vpc-price{font-family:var(--font-head);font-weight:800;color:var(--ink);
  font-size:clamp(1.7rem,1.1rem + 2vw,2.4rem);line-height:1.1;margin:2px 0 4px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#vlan-home-v2 .vpc-price .cur{color:var(--cyan)}
#vlan-home-v2 .vpc-price-hi{font-size:.9rem;color:var(--ink-3)}
#vlan-home-v2 .vpc-bar{height:8px;border-radius:6px;
  background:linear-gradient(90deg,var(--navy),var(--cyan));margin:12px 0 6px;opacity:.85}
#vlan-home-v2 .vpc-time{font-size:.95rem;color:var(--ink-2);margin-top:6px;
  display:flex;align-items:center;gap:8px}
#vlan-home-v2 .vpc-time svg{width:16px;height:16px;color:var(--cyan)}
#vlan-home-v2 .vpc-time b{color:var(--ink);font-family:var(--font-head)}
#vlan-home-v2 .vpc-specs{margin:16px 0 0;border-top:1px solid var(--line);padding-top:14px}
#vlan-home-v2 .vpc-spec{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:6px 0;font-size:.92rem}
#vlan-home-v2 .vpc-spec .k{color:var(--ink-2)}
#vlan-home-v2 .vpc-spec .v{color:var(--ink);font-family:var(--font-head);font-weight:700;
  text-align:right;font-variant-numeric:tabular-nums}
#vlan-home-v2 .vpc-cta{display:block;width:100%;text-align:center;margin-top:18px;justify-content:center}
#vlan-home-v2 .vpc-note{font-size:.74rem;color:var(--ink-3);margin-top:12px;line-height:1.5}
#vlan-home-v2 .vpc-disc{font-size:.72rem;color:var(--ink-3);margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);line-height:1.5}
#vlan-home-v2 .vpc-disc b{color:var(--ink-2)}

/* ---- responsive: single column < 980px --------------------------------- */
@media(max-width:980px){
  #vlan-home-v2 .vpc-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  #vlan-home-v2 .vpc-toggles{grid-template-columns:1fr}
  #vlan-home-v2 .vpc-tab{padding:9px 13px;font-size:.86rem}
}

/* ---- reduced motion ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  #vlan-home-v2 .vpc-tab,#vlan-home-v2 .vpc-opt{transition:none}
  #vlan-home-v2 .vpc-spin{animation:none}
  #vlan-home-v2 .vpc-flow{display:none}
}

/* End */
/* /bitrix/templates/aspro-premier/css/v8b-home.css?178085234321122 */
/* /bitrix/templates/aspro-premier/css/vlan-calc.css?17808256659471 */