/* Шлифовка 02.11: длина, панель, полоса доверия, мобильные поломки. */
.story{height:620vh}
.pin-s[data-stages="3"]{height:240vh}
.pin-s[data-stages="4"]{height:300vh}
.pin-s[data-stages="5"]{height:380vh}
.pin-s[data-stages="6"]{height:420vh}
.b-polka{height:300vh}
.b-end{height:240vh}
@media (prefers-reduced-motion:reduce){.pin-s[data-stages],.b-polka,.b-end{height:auto}}

.act-cta{margin-top:22px}
.put-plus{max-width:1100px;margin:0 auto;padding:clamp(18px,3vw,40px) max(var(--gutter),3vw) 0;color:var(--on-night-2);font-size:clamp(17px,1.35vw,20px)}

.tnav{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);height:56px;padding:0 max(var(--gutter),3vw);background:rgba(14,14,12,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--night-line);transform:translateY(-100%);transition:transform .3s}
.tnav.on{transform:none}
.tnav a{color:var(--on-night);text-decoration:none}
.tnav-l{font:500 13px/1 var(--f-mono);letter-spacing:.14em;white-space:nowrap}
.tnav-m{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;font-size:15px}
.tnav-m a:hover{color:#C6FF00}
.tnav-b{padding:9px 16px;border-radius:99px;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#16171A!important;font-size:14px;font-weight:600;white-space:nowrap}
.tnav-p{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.tnav-p u{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#C6FF00)}

.b-proof{background:var(--night);color:var(--on-night);padding:clamp(50px,6vw,90px) 0 clamp(30px,4vw,50px)}
.proof-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center}
.proof-n{margin:0}
.proof-n b{display:block;font:500 clamp(64px,9vw,136px)/1 var(--f-display);color:#C6FF00}
.proof-n span{display:block;margin-top:10px;font-size:clamp(18px,1.6vw,23px);line-height:1.35;max-width:26ch}
.proof-ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;display:block}
.proof-k{margin:clamp(30px,4vw,50px) auto 12px;font:500 12px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.b-proof .logos{margin:0}

@media (max-width:899px){
  .otd-stage{grid-template-columns:minmax(0,1fr)}
  .tnav-m{display:none}.tnav-b{margin-left:auto}
  .proof-top{grid-template-columns:minmax(0,1fr)}
  .act::before{content:"";position:absolute;inset:-14px -16px;z-index:-1;border-radius:16px;background:rgba(14,14,12,.78)}
  .act h1,.act h2{font-size:clamp(26px,7vw,34px)}
  .act-cta{margin-top:12px}
  .end-cont{flex-wrap:wrap;position:relative;z-index:5}
}

.acts{filter:none}
.act h1,.act h2{color:#EDE7DA}
.tnav.up{transform:none}
section[id],#sdelali{scroll-margin-top:56px}

/* Демо-день: вид из первого ряда, на экране настоящая работа */
.dp-led{left:0;right:0;width:100%;translate:none;top:10svh;height:60svh}
.led{justify-content:flex-start}
.led b{font-size:clamp(26px,2.9vw,48px)}
.scr{position:absolute;top:13svh;width:clamp(240px,23vw,350px);padding:14px 16px;border-radius:14px;background:rgba(10,14,8,.72);border:1px solid rgba(198,255,0,.4);box-shadow:0 0 40px rgba(198,255,0,.16);text-align:left;backdrop-filter:blur(6px)}
.scr-l{left:6vw}.scr-r{right:6vw}
.scr h4{margin:0 0 8px;font:500 12px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#C6FF00}
.scr ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.scr li{display:flex;justify-content:space-between;gap:10px;font-size:15px;line-height:1.3;color:#fff;opacity:0}
.led.now .scr li{animation:scrIn .4s var(--d) both}
.scr i{font-style:normal;color:#C6FF00;white-space:nowrap}
.scr u{text-decoration:none;color:#FF7A59;white-space:nowrap}
@keyframes scrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dp-fans{background-image:url(/assets/loops/kresla.webp)}
@media (max-width:899px){.scr{display:none}}

/* Программа: одна задача через весь путь */
.tg.tg-hero{z-index:6;background:#C6FF00!important;border-color:#C6FF00!important;color:#16171A;font-size:clamp(15px,1.5vw,21px)!important;font-weight:600;padding:9px 16px!important;box-shadow:0 0 34px rgba(198,255,0,.55);animation:none!important}
.prog-vis .tg:not(.tg-hero){opacity:.62}
.hero-cap{position:absolute;left:0;right:0;top:-10px;margin:0;text-align:center;font:500 clamp(16px,1.4vw,20px)/1.2 var(--f-display);color:#C6FF00}
.hero-cap span{display:none}
.prog-vis[data-stage="0"] .hero-cap span[data-c="0"],.prog-vis[data-stage="1"] .hero-cap span[data-c="1"],.prog-vis[data-stage="2"] .hero-cap span[data-c="2"]{display:inline}
.prog-vis .tc-cr{top:26px}

/* Сейф */
.sb-safe2{opacity:0}

/* Что останется: ноутбук стоит на столе */
.desk-l::before{content:"";position:absolute;left:-14%;right:-14%;bottom:-3%;height:34%;background:radial-gradient(50% 60% at 50% 40%,rgba(230,190,104,.2),transparent 75%);border-top:1px solid rgba(230,190,104,.2);border-radius:50%/18%}
.apps{top:13%;bottom:33%}
.app b{font-size:clamp(9px,.78vw,12px)}

/* Финал */
.of-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.of-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.of-bg video.on{opacity:1}
.of-shade{background:linear-gradient(100deg,rgba(5,5,5,.72) 0%,rgba(5,5,5,.34) 38%,transparent 60%)!important}
.end-txt{left:clamp(24px,5vw,72px);top:9svh;bottom:auto;max-width:560px}
.end-txt h2{text-shadow:0 2px 26px rgba(0,0,0,.7)}

/* Цены: светлая пауза, тарифы лежат тёмными предметами на тёплой бумаге */
.b-ceny{background:#F3EFE6;color:#16171A}
.b-ceny>.wrap-x>.kicker{color:#8A5F0E}
.b-ceny h2{color:#16171A}
.b-ceny>.wrap-x>.lead{color:#3D3A33}
.b-ceny .tier,.b-ceny .cmp-w,.b-ceny .deep{color:var(--on-night)}
.b-ceny .tier-3{color:#16171A}
.b-ceny .deep{background:#141412;border-color:transparent}
.b-ceny .ceny-note{color:#55504A}

/* Карта: сначала горит кораллом, затем становится зелёной */
.map-img{filter:hue-rotate(-62deg) saturate(1.35);transition:filter 1.6s ease 2.4s}
.map.seen .map-img{filter:hue-rotate(0deg) saturate(1)}
.ping{border-color:#FF7A59;transition:border-color 1.6s ease 2.4s}
.map.seen .ping{border-color:#C6FF00}
.map .puma{display:none}
.map-c{position:absolute;left:49.5%;top:58%;translate:-50% 0;margin:0;padding:3px 8px;border-radius:6px;background:rgba(10,14,8,.8);font:500 11px/1.1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#C6FF00;white-space:nowrap}

.nw{white-space:nowrap}
.dp-led{top:13svh}
.dp-pr{bottom:calc(var(--fl,20svh) - 1svh);height:50svh}
.dp-head h2{font-size:clamp(22px,2.2vw,36px)}

/* Финал: команду у лифта видно целиком */
.of-bg{inset:0;transform:translate(calc(var(--cx,0) * -10px),calc(var(--cy,0) * -6px)) scale(calc(1.1 - var(--push,0) * .1))}
.of-img,.of-bg video{object-position:78% 50%}
.of-shade{background:radial-gradient(62% 70% at 16% 24%,rgba(5,5,5,.86) 0,rgba(5,5,5,.5) 60%,transparent 100%)!important}
.end-txt{max-width:min(46vw,640px)}
.end-cont{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.end-cont a{white-space:nowrap}
@media (max-width:899px){
  .end-txt{max-width:none}
  .of-img,.of-bg video{object-position:70% 50%}
  .of-shade{background:linear-gradient(180deg,rgba(5,5,5,.9) 0,rgba(5,5,5,.66) 46%,transparent 72%)!important}
  .dp-pr{height:40svh}
}

@media (max-width:899px){
  .tg:not(.tg-hero){white-space:normal;width:21.5vw;text-align:center;line-height:1.08;border-radius:9px;padding:4px 3px!important;font-size:10px!important}
  .tg.tg-hero{white-space:nowrap;font-size:13px!important;padding:6px 10px!important}
  .tg-off{opacity:0!important}
  .tc-cr,.prog-vis .tc-cr{display:none}
  .hero-cap{top:-26px;font-size:15px}
  .dy-f{display:none}
}

.end-cont a,.end-foot,.end-foot a{text-shadow:0 1px 8px #000,0 0 2px #000}
@media (max-width:899px){.tg.tg-hero{font-size:11.5px!important;padding:5px 8px!important}}

/* Телефон: подсказка свайпа и сцена без мёртвой зоны */
.hint i{display:none}
@media (max-width:899px){
  .story{height:470vh}
  .hint{display:flex!important;flex-direction:column;align-items:center;gap:6px;position:absolute;left:0;right:0;bottom:44px;margin:0;z-index:7;text-align:center;font-size:12px;color:#FBF6EA;letter-spacing:.08em;transition:opacity .25s}
  .hint i{display:block;width:44px;height:44px;border-radius:50%;background:#C6FF00;box-shadow:0 0 26px rgba(198,255,0,.55);position:relative;animation:swipeHint 1.3s ease-in-out infinite}
  .hint i::after{content:"";position:absolute;left:15px;top:17px;width:12px;height:12px;border-left:3px solid #16171A;border-top:3px solid #16171A;transform:rotate(45deg)}
  .act.on .act-cta{margin-bottom:0}
}
@keyframes swipeHint{0%,100%{transform:translateY(8px)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.hint i{animation:none}}