/* Стили только страницы «Управляемый рост». Подключается после site.css. */

/* Главная мысль: путь программы как растущая диаграмма */
.grow{--H:clamp(230px,24vw,300px);position:relative;margin:44px 0 0;container-type:inline-size}
.grow::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--H);pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(230,236,244,.09) 0 1px,transparent 1px 25%);border-bottom:1px solid rgba(227,199,126,.55)}
.grow-line{position:absolute;left:0;top:0;width:100%;height:var(--H);overflow:visible;pointer-events:none;z-index:2}
.grow-area{fill:url(#grow-fill)}
.grow-curve{fill:none;stroke:#E3C77E;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.grow-arrow{position:absolute;z-index:3;left:99%;top:calc(var(--H)*.03);width:0;height:0;pointer-events:none;
  border-left:15px solid #E3C77E;border-top:8px solid transparent;border-bottom:8px solid transparent;
  transform:translate(-9px,-8px) rotate(-30deg);transform-origin:9px 8px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
@supports (rotate:atan2(1px,1px)){.grow-arrow{transform:translate(-9px,-8px);rotate:calc(-1*atan2(calc(var(--H)*.07),5.25cqw))}}
.grow-bars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
.grow-bars li{display:grid;grid-template-rows:var(--H) auto;padding:0 5px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.grow-bars i{position:relative;display:block;align-self:end;height:calc(var(--h)*1%);border-radius:4px 4px 0 0;border-top:2px solid var(--gold);
  background:linear-gradient(180deg,rgba(196,163,90,.5),rgba(196,163,90,.08));transition:background .16s ease,box-shadow .16s ease,filter .16s ease}
.grow-bars i::before{content:"";position:absolute;z-index:3;left:50%;top:-1px;width:11px;height:11px;margin:-6px 0 0 -6px;border-radius:50%;
  background:#E3C77E;border:2px solid #06182F;box-sizing:border-box;transition:transform .16s ease,box-shadow .16s ease}
.grow-bars span{display:block;padding-top:12px;text-align:center;font-weight:700;font-size:clamp(.6rem,.92vw,.82rem);letter-spacing:.05em;text-transform:uppercase;color:#FFFFFF;transition:color .16s ease}
.grow-bars .last i{background:linear-gradient(180deg,#E3C77E,#C4A35A)}
.grow-bars .last span{color:#E3C77E}
.grow-bars li:hover i{background:linear-gradient(180deg,rgba(227,199,126,.95),rgba(196,163,90,.4));box-shadow:0 0 28px rgba(196,163,90,.5)}
.grow-bars .last:hover i{background:#EBD08A}
.grow-bars li:hover i::before{transform:scale(1.5);box-shadow:0 0 0 5px rgba(227,199,126,.25)}
.grow-bars li:hover span{color:#E8CD86}
.grow-bars li:active i{filter:brightness(.88)}

/* Планшет и телефон: те же ступени горизонтальными полосами */
@media (max-width:1000px){
  .grow{margin-top:36px}
  .grow::before,.grow-line,.grow-arrow{display:none}
  .grow-bars{grid-template-columns:minmax(0,1fr);gap:9px}
  .grow-bars li{grid-template-rows:none;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:10px;padding:0}
  .grow-bars span{order:-1;padding:0;text-align:left;font-size:.74rem}
  .grow-bars i{align-self:center;height:16px;width:calc(var(--h)*1% + 4%);border-top:0;border-left:2px solid var(--gold);border-radius:0 4px 4px 0;
    background:linear-gradient(90deg,rgba(196,163,90,.55),rgba(196,163,90,.12))}
  .grow-bars i::before{left:100%;top:50%}
  .grow-bars .last i{background:linear-gradient(90deg,#C4A35A,#E3C77E)}
  .grow-bars li:hover i{background:linear-gradient(90deg,rgba(227,199,126,.95),rgba(196,163,90,.45));box-shadow:0 0 18px rgba(196,163,90,.4)}
  .grow-bars li:active{transform:scale(.985)}
}
@media (max-width:400px){.grow-bars li{grid-template-columns:96px minmax(0,1fr)}.grow-bars span{font-size:.66rem;letter-spacing:.03em}}
@media (prefers-reduced-motion:reduce){.grow-bars i,.grow-bars i::before,.grow-bars span{transition:none}}

/* Первый экран: тёмный, с картинкой-подложкой (как у «Масштаба лидера») */
.hero--urd{background:#0A1A3C}
.hero--urd .hero-art{object-position:right center}
.hero--urd::before{background:linear-gradient(90deg,rgba(8,22,52,.9) 0%,rgba(8,22,52,.78) 36%,rgba(8,22,52,.35) 50%,rgba(8,22,52,0) 62%)}
.hero--urd h1{max-width:none;font-size:clamp(2.1rem,4.7vw,3.6rem)}
.hero--urd .sub{max-width:22ch;font-size:clamp(1.25rem,2.2vw,1.7rem)}
.hero--urd .hero-text{max-width:470px}
.hero--urd .lead{max-width:38ch}
@media (max-width:980px){
  .hero--urd{--ah:clamp(290px,78vw,560px);padding-bottom:calc(var(--ah) - 24px)}
  .hero--urd .hero-art{height:var(--ah);object-position:80% center}
  .hero--urd::before{background:linear-gradient(180deg,#0A1A3C 0,#0A1A3C calc(100% - var(--ah)),rgba(10,26,60,0) calc(100% - var(--ah) + 110px))}
  .hero--urd .hero-text{max-width:560px}
}
@media (max-width:760px){.hero--urd h1{font-size:clamp(1.7rem,9.4vw,2.5rem)!important}}

/* Полоса фактов: плитка «Офлайн или онлайн» в две строки */
.kbar-sec .k--fmt b{font-size:clamp(1.05rem,1.55vw,1.25rem);line-height:1.2}
@media (max-width:640px){.kbar-sec .k--fmt b{font-size:1.2rem;line-height:1.2}}

/* Главная мысль: стремительный феникс справа */
.band-bg--swift{width:90%;opacity:.92}
/* Планшет и телефон: феникс целиком стоит внизу блока, за полосами */
@media (max-width:1000px){
  #vopros .band-bg.band-bg--swift{top:auto;bottom:70px;right:-2%;width:118%;max-width:none;opacity:.8;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 86%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  #vopros.band--art::before{background:linear-gradient(90deg,rgba(6,24,47,.55) 0%,rgba(6,24,47,.25) 55%,rgba(6,24,47,.1) 100%)}
}
@media (max-width:640px){#vopros .band-bg.band-bg--swift{width:168%;right:-3%;bottom:104px;opacity:.66}}
@media (max-width:1000px){
  #vopros .grow-bars i{background:linear-gradient(90deg,rgba(196,163,90,.85),rgba(196,163,90,.4));box-shadow:0 2px 8px rgba(2,10,24,.55)}
  #vopros .grow-bars .last i{background:linear-gradient(90deg,#C4A35A,#E9CF8C)}
  #vopros .grow-bars span{text-shadow:0 1px 6px rgba(2,10,24,.9)}
}

/* Маршрут: пятый этап во всю ширину, выделен золотом */
.stage--gold{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(12px,1.6vw,18px);align-items:stretch;padding:6px 18px 10px;
  background:linear-gradient(135deg,#E9CF8C 0%,#C4A35A 100%);border-color:#E3C77E;box-shadow:0 18px 40px -22px rgba(196,163,90,.75)}
.stage--gold:hover{background:linear-gradient(135deg,#F1DA9E 0%,#D0B068 100%);border-color:#F1DA9E}
.stage--gold .stage-h{border-bottom:0;padding:18px 0 14px}
.stage--gold .stage-h span{color:#5C4612}
.stage--gold .stage-h b{color:#0B2447}
.stage--gold .stage-h i{color:#27364B}
.stage--gold .mod{border-bottom:0;border-left:1px solid rgba(11,36,71,.28);border-radius:0 8px 8px 0;padding:18px 12px;margin-inline:0}
.stage--gold .mod .n{color:#5C4612}
.stage--gold .mod b{color:#0B2447}
.stage--gold .mod span{color:#27364B}
.stage--gold .mod:hover,.stage--gold .mod:focus-visible{background:rgba(11,36,71,.12)}
.stage--gold .mod:hover b,.stage--gold .mod:focus-visible b,.stage--gold .mod:hover .n{color:#0B2447}
@media (max-width:1040px){
  .stage--gold{grid-template-columns:minmax(0,1fr)}
  .stage--gold .stage-h{border-bottom:2px solid rgba(11,36,71,.45)}
  .stage--gold .mod{border-left:0;border-bottom:1px solid rgba(11,36,71,.25);border-radius:8px;padding:14px 12px;margin-inline:-12px}
  .stage--gold .mod:last-child{border-bottom:0}
}

/* Три глубины: светлые контрастные карточки на тёмном фоне */
.depths .m2{background:#FFFFFF;border:1px solid transparent;border-top:4px solid #C4A35A;border-radius:12px;padding:24px 24px 26px;box-shadow:0 20px 36px -22px rgba(2,10,24,.85)}
.depths .m2 h3{color:#4A5A6C}
.depths .m2 b{color:#1B3A5C}
.depths .m2 p{color:#2C3A4A;font-size:.96rem}
.depths .m2--main{background:#FBF3DD;border-color:transparent;border-top-color:#C4A35A;box-shadow:0 0 0 2px #C4A35A,0 22px 38px -20px rgba(2,10,24,.9)}
.depths .m2--main b{color:#8A6D2B}
.depths .m2:hover{background:#FFFDF8;transform:translateY(-5px);box-shadow:0 0 0 2px #C4A35A,0 26px 40px -20px rgba(2,10,24,.9)}
.depths .m2--main:hover{background:#FFF6E0}
.depths .m2:hover b{color:#8A6D2B}

/* Этап 5: один модуль занимает три колонки справа */
.stage--gold .mod{grid-column:2/-1;align-self:center}
.stage--gold .mod b{font-size:1.08rem}
.stage--gold .mod span{font-size:.96rem}
@media (max-width:1040px){.stage--gold .mod{grid-column:auto}}

/* Плитка «Организационная политика»: длинное слово помещается с запасом */
@media (min-width:961px) and (max-width:1060px){.caps2 li.cap-org b{font-size:.93rem}}

/* Для кого: фоновый рисунок немного ярче */
#dlya-kogo .fit-bg{opacity:.86;filter:saturate(1) brightness(1.12)}
#dlya-kogo.fit-sec::before{background:linear-gradient(90deg,rgba(8,28,56,.7) 0%,rgba(8,28,56,.4) 50%,rgba(8,28,56,.22) 100%),linear-gradient(180deg,rgba(8,28,56,.5) 0%,rgba(8,28,56,0) 30%,rgba(8,28,56,.25) 100%)}
@media (max-width:640px){#dlya-kogo .fit-bg{opacity:.5}}

/* Истории компаний временно скрыты: убираем ссылку из меню и разводим по цвету два светлых блока подряд */
#istorii[hidden]{display:none!important}
a[href="#istorii"]{display:none!important}
#programma{background:#F4ECD9}

/* Маршрут: интерактив — линия пути над этапами, крупная цифра этапа, подсветка модулей */
#marshrut .stages{counter-reset:st}
#marshrut .stage{counter-increment:st;position:relative}
#marshrut .stage-h{position:relative;overflow:hidden}
#marshrut .stage-h::after{content:counter(st);position:absolute;right:-4px;top:2px;font-weight:800;font-size:5.2rem;line-height:1;color:rgba(227,199,126,.09);
  transition:color .3s ease,transform .3s ease;pointer-events:none}
#marshrut .stage:hover .stage-h::after{color:rgba(227,199,126,.22);transform:translate(-6px,4px) scale(1.06)}
#marshrut .stage-h>*{position:relative;z-index:1}
#marshrut .stage-h b{transition:color .2s ease}
#marshrut .stage:hover .stage-h b{color:#E8CD86}
#marshrut .stage:hover{box-shadow:0 22px 40px -22px rgba(2,10,24,.9),0 0 0 1px rgba(196,163,90,.5)}
#marshrut .stage--gold .stage-h::after{color:rgba(11,36,71,.1);font-size:4.4rem;top:0}
#marshrut .stage--gold:hover .stage-h::after{color:rgba(11,36,71,.24)}
#marshrut .stage--gold:hover .stage-h b{color:#0B2447}
#marshrut .stage--gold:hover{box-shadow:0 24px 44px -20px rgba(196,163,90,.85)}
/* модули: сдвиг и золотая черта слева */
#marshrut .stage .mod{transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
#marshrut .stage:not(.stage--gold) .mod:hover{transform:translateX(4px);box-shadow:-4px 0 0 #C4A35A}
#marshrut .stage .mod .n{transition:color .18s ease,transform .18s ease;display:inline-block}
#marshrut .stage .mod:hover .n{font-weight:700}
/* линия пути: точки над этапами загораются до того этапа, на который навели */
@media (min-width:1041px){
  #marshrut .stages{padding-top:38px}
  #marshrut .stage:not(.stage--gold)::before{content:"";position:absolute;z-index:2;top:-33px;left:18px;width:16px;height:16px;border-radius:50%;box-sizing:border-box;
    background:#0B2447;border:2px solid #4A6A96;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
  #marshrut .stage:not(.stage--gold)::after{content:"";position:absolute;top:-26px;left:34px;width:calc(100% + clamp(12px,1.6vw,18px) - 16px);height:2px;
    background:linear-gradient(90deg,#C4A35A,#E3C77E) no-repeat left/0 100%,#2A4B76;transition:background-size .45s ease}
  #marshrut .stage:nth-child(4)::after{width:calc(100% - 34px);background:linear-gradient(90deg,#C4A35A,#E3C77E) no-repeat left/0 100%,linear-gradient(90deg,#2A4B76,rgba(42,75,118,0))}
  #marshrut .stage:first-child::before{background:#C4A35A;border-color:#E3C77E}
  #marshrut .stage:not(.stage--gold):hover::before,#marshrut .stage:has(~ .stage:hover)::before{background:#E3C77E;border-color:#F1DA9E;box-shadow:0 0 0 6px rgba(227,199,126,.18),0 0 18px rgba(227,199,126,.6)}
  #marshrut .stage:not(.stage--gold):hover::before{transform:scale(1.25)}
  #marshrut .stage:has(~ .stage:hover)::after{background-size:100% 100%,auto}
  #marshrut .stages:has(.stage:hover) .stage:not(:hover){filter:brightness(.86)}
  #marshrut .stage{transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,filter .25s ease}
}
@media (prefers-reduced-motion:reduce){#marshrut .stage-h::after,#marshrut .stage .mod,#marshrut .stage::before,#marshrut .stage::after{transition:none}}