/* Тёмная секция «Возможности» внизу лендинга */
.sec-scroll{background:var(--paper)}
.scr-panel{background:#16161b;color:#f4f4f6;border-radius:28px;padding:56px 48px}
.scr-head{max-width:640px}
.scr-head .eyebrow{color:#9a9aa8}
.scr-head h2{color:#f4f4f6;margin:6px 0 10px;letter-spacing:-.02em;font-size:clamp(26px,3.4vw,40px);line-height:1.1}
.scr-head .lede{color:#b9b9c4;margin:0}
.scr-body{display:grid;grid-template-columns:380px 1fr;gap:40px;margin-top:40px;align-items:start}

/* Левая колонка: список из восьми пунктов, без прилипания */
.scr-nav{align-self:start}
.scr-item{border-top:1px solid rgba(255,255,255,.1);padding:16px 0}
.scr-item:first-child{border-top:0;padding-top:0}
.scr-item-t{display:block;width:100%;text-align:left;background:none;border:0;padding:0;margin:0;color:#f4f4f6;font:inherit;font-size:17px;font-weight:600;opacity:.55;cursor:pointer;transition:opacity .3s}
.scr-item.is-on .scr-item-t{opacity:1}
.scr-item-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.16,1,.3,1)}
.scr-item.is-on .scr-item-b{grid-template-rows:1fr}
.scr-item-x{overflow:hidden}
.scr-item-tx{margin:8px 0 0;font-size:14px;line-height:1.5;color:#b9b9c4}
.scr-facts{list-style:none;margin:10px 0 0;padding:0}
.scr-facts li{position:relative;padding-left:16px;margin-top:6px;font-size:13px;line-height:1.5;color:#d3d3dc}
.scr-facts li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;background:#7c5cff}
.scr-more{display:inline-block;margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.scr-more:hover{border-bottom-color:#fff}

/* Правая колонка: одна сцена со всеми кадрами */
.scr-stage{position:relative;height:440px;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 70% 0%,rgba(124,92,255,.16),transparent 60%),radial-gradient(120% 90% at 0% 100%,rgba(59,130,246,.14),transparent 55%),#1d1d24}




@property --scr-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.scr-shot{position:absolute;inset:28px;margin:0;padding:1px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);opacity:0;transform:translateY(10px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.scr-shot.is-on{opacity:1;transform:none;background:conic-gradient(from var(--scr-ang),#7c5cff,#3b82f6,#ec4899,#7c5cff);animation:scr-spin 6s linear infinite}
@keyframes scr-spin{to{--scr-ang:360deg}}
.scr-shot img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:15px;background:#fff}


/* Узкий экран: одна колонка, сцена уезжает под список */
@media (max-width:900px){
.scr-panel{padding:32px 20px;border-radius:22px}
.scr-body{grid-template-columns:1fr;gap:24px;margin-top:28px}




.scr-stage{height:300px}
.scr-shot{inset:18px}
}
@media (prefers-reduced-motion:reduce){
.scr-shot.is-on{animation:none}
.scr-shot,.scr-item-b,.scr-item-t{transition:none}
}







/* Рамка обнимает сам кадр, а не всю сцену: фигура по размеру картинки, по центру */
.scr-stage .scr-shot { inset: auto; top: 50%; left: 50%; translate: -50% -50%; padding: 2px; max-width: calc(100% - 56px); max-height: calc(100% - 56px); display: block; line-height: 0; }
.scr-stage .scr-shot img { max-height: calc(440px - 60px); width: auto; }
/* Кадр на всю ширину сцены (рамка больше не схлопывается) */
.scr-stage .scr-shot { width: calc(100% - 32px); max-width: none; max-height: calc(100% - 32px); }
.scr-stage .scr-shot img { width: 100%; height: auto; max-height: 400px; object-fit: contain; }
/* Сцена по размеру активного кадра: без фиксированной высоты и пустых полей */
.scr-stage { height: auto !important; min-height: 0 !important; padding: 18px; display: block; }
.scr-stage .scr-shot { position: relative; inset: auto; top: auto; left: auto; translate: none; width: 100%; max-height: none; display: none; }
.scr-stage .scr-shot.is-on { display: block; animation: scr-in .45s cubic-bezier(.16,1,.3,1), scr-spin 6s linear infinite; }
.scr-stage .scr-shot img { max-height: none; }
@keyframes scr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scr-stage .scr-shot.is-on { animation: none; } }
.scr-body > .scr-stage { align-self: center; }