/* UzCloud v1.4 Visual Storytelling Layer */

.v14-hidden-title,
.v14-old-primary { display:none !important; }

.v14-divider{
  width:1px;height:38px;flex:0 0 1px;margin:0 16px;
  background:linear-gradient(transparent,rgba(88,240,230,.45),transparent);
}
.v14-scenario-head{
  min-width:190px;max-width:360px;overflow:hidden;
}
.v14-scenario-head strong{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:17px;letter-spacing:.09em;
  background:linear-gradient(90deg,#61f4e9,#dcffff,#8cbcff,#bb90ff,#61f4e9);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:v14Gradient 8s linear infinite,v14Breathe 4.6s ease-in-out infinite;
}
.v14-scenario-head strong.swap{
  animation:v14ScenarioIn .3s cubic-bezier(.2,.8,.2,1),v14Gradient 8s linear infinite,v14Breathe 4.6s ease-in-out infinite;
}
@keyframes v14Gradient{to{background-position:280% 50%}}
@keyframes v14Breathe{
  0%,100%{opacity:.88;filter:drop-shadow(0 0 2px rgba(88,240,230,.12))}
  50%{opacity:1;filter:drop-shadow(0 0 10px rgba(88,240,230,.42))}
}
@keyframes v14ScenarioIn{
  from{opacity:0;transform:translateY(6px);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}

/* Stable three-column geometry incl. long RU labels */
.layout{grid-template-columns:190px minmax(0,1fr) 260px!important;min-width:0}
.left,.center,.right{min-width:0}
.right{overflow:hidden auto!important}
.center{grid-template-rows:minmax(0,1fr) 118px auto!important;gap:9px}
.scene-shell{min-width:0;overflow:hidden}

/* Keep the scene recognizable while focusing */
.scene-shell.focus .scene-layer.current,
.scene-shell.focus .scene-layer.next{
  filter:blur(2px)!important;
}
.scene-shell.focus .scene-focus{
  background:rgba(2,12,18,.13)!important;
}

/* Selected service visuals: all products in current Business Case */
.v14-service-cluster{
  position:absolute;z-index:8;right:3%;top:15%;
  width:min(390px,44%);display:grid;
  grid-template-columns:1.4fr .9fr;grid-template-rows:auto auto auto;
  gap:8px;pointer-events:none;
}
.v14-service-card{
  position:relative;min-height:74px;border-radius:15px;
  border:1px solid rgba(88,240,230,.26);
  background:rgba(3,20,31,.82);backdrop-filter:blur(10px);
  padding:7px;overflow:hidden;opacity:0;
  transform:translateY(8px) scale(.96);
  animation:v14CardIn .38s cubic-bezier(.2,.8,.2,1) forwards;
}
.v14-service-card.primary{
  grid-row:1 / span 2;min-height:158px;
  border-color:rgba(88,240,230,.62);
  box-shadow:inset 0 0 28px rgba(88,240,230,.06),0 16px 34px rgba(0,0,0,.25);
}
.v14-service-card img{
  display:block;width:100%;height:48px;object-fit:contain;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.28));
}
.v14-service-card.primary img{height:118px}
.v14-service-card .role{
  position:absolute;top:6px;left:7px;
  padding:3px 5px;border-radius:6px;background:rgba(2,17,27,.78);
  color:#68f2e7;font-size:7px;letter-spacing:.12em;
}
.v14-service-card strong{
  display:block;text-align:center;margin-top:2px;
  color:white;font-size:10px;line-height:1.05;
}
.v14-service-card.no-image{
  display:flex;align-items:center;justify-content:center;
}
.v14-service-card.no-image strong{font-size:12px}
@keyframes v14CardIn{
  to{opacity:1;transform:none}
}

/* Hide old scattered hotspots; visual cards now explain selected products */
#hotspots{display:none!important}

/* Lower explanation field */
.v14-lower{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:18px;padding:10px 13px;min-width:0;overflow:hidden;
}
.v14-lower label{
  display:block;color:#60eee4;font-size:8px;letter-spacing:.15em;margin-bottom:5px;
}
.v14-story{min-width:0}
.v14-story strong{
  display:block;font-size:14px;color:#f4ffff;margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v14-story p{
  margin:0;color:#a9bdc6;font-size:11px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.v14-portfolio{min-width:0}
#v14Portfolio{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;
}
.v14-portfolio-card{
  position:relative;flex:0 0 86px;height:65px;
  border:1px solid rgba(91,151,174,.20);border-radius:10px;
  background:rgba(4,22,34,.72);overflow:hidden;padding:5px;
  display:flex;align-items:flex-end;
}
.v14-portfolio-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:.25;filter:saturate(.7);
}
.v14-portfolio-card span{
  position:relative;z-index:2;color:#c7d8df;font-size:8px;line-height:1;
  text-shadow:0 1px 4px #001019;
}
.v14-portfolio-card.selected{
  border-color:rgba(88,240,230,.45);
  background:rgba(8,39,50,.84);
}
.v14-portfolio-card.selected img{opacity:.56;filter:saturate(1)}
.v14-portfolio-card.primary{
  border-color:#65f4e9;
  box-shadow:inset 0 0 16px rgba(88,240,230,.10);
}
.v14-portfolio-card.primary img{opacity:.8}

/* Business cases wrap cleanly in RU */
#caseList{display:flex!important;flex-wrap:wrap!important;gap:7px!important;overflow:visible!important}
#caseList button{
  white-space:normal!important;line-height:1.12!important;text-align:left;
}

/* Right panel becomes outcome-focused */
.capability-list,.coverage-title{display:none!important}
.count{margin-top:18px!important}

/* Solution modal */
.solution-actions{grid-template-columns:1fr 1fr!important}
#phoneAction{display:none!important}

@media(max-width:1400px){
  .layout{grid-template-columns:180px minmax(0,1fr) 245px!important}
  .v14-scenario-head{min-width:155px;max-width:260px}
  .v14-scenario-head strong{font-size:15px}
  .v14-service-cluster{width:min(340px,42%)}
  .v14-service-card.primary{min-height:145px}
  .v14-service-card.primary img{height:104px}
}