/**
 * Сцены лендингов услуг (приёмы 1-6, 9 канваса 3, выбор владельца 13.10.2026, палитра «Глубина»).
 * Плейбук: docs/front/PLAYBOOKS/LANDING-SCENES-PLAYBOOK.md. Образец: include/uslugi/pentesting.php.
 * Поведение (появление, процесс по прокрутке, выноски): js/cds-scenes.js. Без JS всё видно сразу.
 * px, не rem (плейбук #26). Шрифт и цвет текста наследуются от лендинга.
 */
.scn{
  --scn-d1:#0d2a6e;--scn-d2:#06163d;--scn-glow:rgba(0,190,243,.30);
  --scn-l1:#e8f2fa;--scn-l2:#f5f9fd;--scn-lline:#d4e9f5;
  --scn-ink:var(--ds-ink,#0a225e);--scn-cyan:var(--ds-cyan,#00bef3);--scn-sky:var(--ds-cyan-light,#56bcef);
  --scn-deep:var(--ds-cyan-deep,#0078b0);--scn-c800:var(--ds-cyan-800,#005880);
  --scn-on-dk:rgba(255,255,255,.84);--scn-on-dk-2:rgba(255,255,255,.66);--scn-line-dk:rgba(255,255,255,.14);
  --scn-ease:cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;padding:clamp(56px,6vw,96px) 0
}
/* фоны: тёмная сцена со свечением за предметом (--gx/--gy), светлая с белым пятном света */
.scn.scn--dark{color:var(--scn-on-dk);background:radial-gradient(ellipse 55% 75% at var(--gx,74%) var(--gy,48%),var(--scn-glow),transparent 70%),linear-gradient(155deg,var(--scn-d1),var(--scn-d2))}
.scn.scn--light{background:radial-gradient(ellipse 45% 65% at var(--gx,74%) var(--gy,45%),#fff,transparent 72%),var(--scn-l1)}
.scn .scn-w{max-width:calc(var(--ds-container,1226px) + 48px);margin:0 auto;padding:0 24px;position:relative;box-sizing:border-box}
.scn .scn-eb{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--scn-c800)}
.scn.scn--dark .scn-eb{color:var(--scn-sky)}
.scn h2.scn-h{font-size:clamp(28px,3.2vw,44px);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:12px 0 0;color:var(--scn-ink);text-wrap:balance}
.scn.scn--dark h2.scn-h{color:#fff}
.scn .scn-lead{font-size:19px;line-height:1.6;max-width:62ch;margin-top:20px}
.scn .scn-center{text-align:center}
.scn.scn a{color:var(--scn-c800)}
.scn.scn--dark a{color:var(--scn-sky)}

/* кнопки сцены */
.scn a.scn-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:var(--ds-r-md,8px);background:var(--scn-cyan);color:var(--scn-ink);text-decoration:none;font-size:16px;font-weight:600;border:0;box-sizing:border-box;transition:transform .3s var(--scn-ease),box-shadow .3s var(--scn-ease)}
.scn a.scn-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,190,243,.35)}
.scn a.scn-btn .scn-ar{transition:transform .3s var(--scn-ease)}
.scn a.scn-btn:hover .scn-ar{transform:translateX(4px)}
.scn a.scn-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.scn a.scn-btn--ghost:hover{box-shadow:none;border-color:#fff}
.scn a:focus-visible,.scn a.scn-btn:focus-visible{outline:3px solid var(--scn-cyan);outline-offset:3px}

/* движение: предмет «дышит», блоки проявляются при прокрутке (скрываются только если JS включил .scn-rv-on) */
.scn .scn-float{animation:scn-float 7s ease-in-out infinite}
@keyframes scn-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.scn.scn-rv-on .scn-rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--scn-ease),transform .8s var(--scn-ease)}
.scn.scn-rv-on .scn-rv.is-in{opacity:1;transform:none}
.scn.scn-rv-on .scn-d1{transition-delay:.12s}.scn.scn-rv-on .scn-d2{transition-delay:.24s}.scn.scn-rv-on .scn-d3{transition-delay:.36s}

/* 1. hero-сцена: текст слева, предмет справа, полоса доверия снизу */
.scn.scn-hero .scn-w{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.scn.scn-hero .scn-hero__t{font-size:clamp(34px,4.2vw,56px);font-weight:600;line-height:1.08;letter-spacing:-.015em;color:#fff;margin:16px 0 0;text-wrap:balance}
.scn.scn-hero .scn-lead{color:var(--scn-on-dk)}
.scn.scn-hero .scn-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.scn .scn-hero__obj img{display:block;width:100%;max-width:600px;height:auto;margin-left:auto;filter:drop-shadow(0 40px 50px rgba(0,8,30,.55))}
.scn .scn-trust{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-top:1px solid var(--scn-line-dk)}
.scn .scn-trust div{padding:22px 24px 0 0}
.scn .scn-trust b{display:block;font-size:24px;font-weight:600;color:#fff;line-height:1.2}
.scn .scn-trust span{display:block;font-size:14px;color:var(--scn-on-dk-2);margin-top:4px;max-width:28ch}

/* 2. два сценария: свет снаружи, тьма внутри (секция без своих отступов, фон дают половины) */
.scn.scn-split-sec{padding:0}
.scn .scn-split-head{padding:clamp(48px,5.5vw,80px) 24px 0;text-align:center;background:linear-gradient(90deg,var(--scn-l1) 50%,var(--scn-d1) 50%)}
.scn .scn-split-head h2.scn-h{display:inline-block;background:#fff;padding:18px 32px;border-radius:var(--ds-r-lg,12px);margin:0;box-shadow:0 18px 40px rgba(10,34,94,.18);font-size:clamp(22px,2.4vw,30px)}
.scn .scn-split{display:grid;grid-template-columns:1fr 1fr}
/* содержимое половин стоит по сетке страницы, а не у края экрана */
.scn .scn-split>div{--scn-edge:max(24px,calc((100vw - var(--ds-container,1226px)) / 2));padding:clamp(44px,4.5vw,68px) clamp(32px,4vw,72px) clamp(52px,5vw,80px);display:flex;flex-direction:column}
.scn .scn-split>.scn-split__l{padding-left:var(--scn-edge)}.scn .scn-split>.scn-split__r{padding-right:var(--scn-edge)}
.scn .scn-split__l{background:radial-gradient(ellipse 70% 55% at 50% 30%,#fff,transparent 75%),var(--scn-l1)}
.scn .scn-split__r{color:var(--scn-on-dk);background:radial-gradient(ellipse 70% 55% at 50% 30%,var(--scn-glow),transparent 75%),linear-gradient(155deg,var(--scn-d1),var(--scn-d2))}
.scn .scn-split img{display:block;height:250px;width:auto;max-width:100%;object-fit:contain;margin:0 auto 20px;transition:transform .6s var(--scn-ease)}
.scn .scn-split>div:hover img{transform:translateY(-8px) scale(1.02)}
.scn .scn-split__r img{filter:drop-shadow(0 30px 40px rgba(0,8,30,.55))}
.scn .scn-split__r .scn-eb{color:var(--scn-sky)}
.scn .scn-split h3{font-size:30px;font-weight:600;color:var(--scn-ink);margin:10px 0 0;line-height:1.2}
.scn .scn-split__r h3{color:#fff}
.scn .scn-split p{font-size:17px;margin-top:14px;max-width:48ch}
.scn .scn-split-foot{background:var(--scn-ink);color:var(--scn-on-dk);text-align:center;padding:clamp(32px,3.5vw,48px) 24px}
.scn .scn-split-foot p{max-width:900px;margin:0 auto;font-size:17px;line-height:1.6}
.scn .scn-split-foot b{color:#fff;font-weight:600}

/* 3. процесс по прокрутке страницы (применять редко: часто простые шаги нагляднее) */
/* без overflow:hidden: он делает секцию контейнером прокрутки и ломает sticky у сцены */
.scn.scn-proc{overflow:visible}
.scn.scn-proc .scn-w{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.scn .scn-proc__stage{display:none}
.scn .scn-proc__steps{position:relative}
.scn .scn-proc__st{padding:20px 0}
.scn .scn-proc__st h3,.scn .scn-proc__t{font-size:30px;font-weight:600;color:#fff;margin:10px 0 0;line-height:1.2}
.scn .scn-proc__st p{font-size:18px;margin-top:14px;max-width:44ch}
.scn .scn-proc__st .scn-btn{margin-top:26px}
.scn .scn-proc__img{display:block;width:min(100%,240px);height:auto;margin:0 0 18px;filter:drop-shadow(0 30px 40px rgba(0,8,30,.5))}
/* живой режим (JS, широкий экран): сцена слева липнет, шаги загораются по очереди, по оси бежит линия */
.scn.scn-proc.is-live .scn-proc__stage{display:grid;place-items:center;position:sticky;top:var(--scn-top,120px);height:calc(100vh - var(--scn-top,120px));max-height:640px;align-self:start}
.scn.scn-proc.is-live .scn-proc__stage img{position:absolute;width:min(100%,400px);max-height:440px;height:auto;object-fit:contain;opacity:0;transform:scale(.92) translateY(20px);transition:opacity .6s var(--scn-ease),transform .7s var(--scn-ease);filter:drop-shadow(0 40px 50px rgba(0,8,30,.5))}
.scn.scn-proc.is-live .scn-proc__stage img.is-on{opacity:1;transform:none}
.scn .scn-proc__num{position:absolute;left:0;top:24px;font-size:140px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(86,188,239,.45);font-variant-numeric:tabular-nums}
.scn.scn-proc.is-live .scn-proc__img{display:none}
.scn.scn-proc.is-live .scn-proc__steps{padding:12vh 0 18vh}
.scn.scn-proc.is-live .scn-proc__st{min-height:52vh;padding:0;opacity:.28;transition:opacity .5s var(--scn-ease)}
.scn.scn-proc.is-live .scn-proc__st:last-child{min-height:0}
.scn.scn-proc.is-live .scn-proc__st.is-on{opacity:1}
.scn .scn-proc__rail{display:none}
.scn.scn-proc.is-live .scn-proc__rail{display:block;position:absolute;left:-28px;top:0;bottom:0;width:1px;background:var(--scn-line-dk)}
.scn .scn-proc__rail i{display:block;width:100%;height:0;background:var(--scn-cyan);box-shadow:0 0 12px var(--scn-cyan)}

/* 4. отрасли-витрина: одна крупная, четыре малых, широкая тёмная полоса с требованием */
.scn .scn-inds{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-areas:"a b c" "a d e" "f f f";gap:24px;margin-top:40px}
.scn .scn-ic{position:relative;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--scn-lline),0 10px 30px rgba(10,34,94,.06);transition:transform .45s var(--scn-ease),box-shadow .45s var(--scn-ease)}
.scn .scn-ic:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--scn-lline),0 22px 50px rgba(10,34,94,.14)}
.scn .scn-ic__pic{background:radial-gradient(ellipse 60% 70% at 50% 60%,#fff,var(--scn-l1));display:grid;place-items:center;padding:20px;height:190px;box-sizing:border-box}
.scn .scn-ic__pic img{display:block;height:140px;width:auto;max-width:100%;object-fit:contain;transition:transform .5s var(--scn-ease)}
.scn .scn-ic:hover .scn-ic__pic img{transform:translateY(-8px) scale(1.04)}
.scn .scn-ic__tx{padding:22px 28px 28px}
.scn .scn-ic h3,.scn .scn-ic__h{font-size:20px;font-weight:600;color:var(--scn-ink);margin:0;line-height:1.3}
.scn .scn-ic p{font-size:15px;margin-top:8px;color:#3b4350}
.scn .scn-ic--a{grid-area:a}.scn .scn-ic--b{grid-area:b}.scn .scn-ic--c{grid-area:c}.scn .scn-ic--d{grid-area:d}.scn .scn-ic--e{grid-area:e}
.scn .scn-ic--a .scn-ic__pic{height:auto;flex:1;min-height:280px}
.scn .scn-ic--a .scn-ic__pic img{height:240px}
.scn .scn-ic--a h3,.scn .scn-ic--a .scn-ic__h{font-size:26px}.scn .scn-ic--a p{font-size:17px}
.scn .scn-ic--f{grid-area:f;flex-direction:row;background:var(--scn-ink);color:var(--scn-on-dk)}
.scn .scn-ic--f .scn-ic__pic{background:radial-gradient(ellipse 60% 70% at 50% 60%,var(--scn-glow),transparent 75%),var(--scn-d1);width:38%;height:auto;min-height:220px}
.scn .scn-ic--f .scn-ic__pic img{height:180px}
.scn .scn-ic--f .scn-ic__tx{display:flex;flex-direction:column;justify-content:center;padding:32px 40px}
.scn .scn-ic--f .scn-eb{color:var(--scn-sky)}
.scn .scn-ic--f h3,.scn .scn-ic--f .scn-ic__h{color:#fff;font-size:24px;margin-top:6px}
.scn .scn-ic--f p{color:var(--scn-on-dk);font-size:17px}
.scn .scn-ic--f a{color:var(--scn-sky)}
/* ноутбук (до 1320px): три колонки тесные, две - банки слева на две строки, малые парами */
@media (max-width:1320px) and (min-width:901px){
  .scn .scn-inds{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "a c" "d e" "f f"}
}

/* 5. сравнение двух услуг: свет и глубина, без значка «VS» на шве и без «плохо/хорошо» */
.scn .scn-duel{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(10,34,94,.16)}
.scn .scn-duel>div{padding:36px 40px 40px;display:flex;flex-direction:column}
.scn .scn-duel__x{background:radial-gradient(ellipse 60% 50% at 50% 20%,#fff,transparent 75%),var(--scn-l1)}
.scn .scn-duel__y{color:var(--scn-on-dk);background:radial-gradient(ellipse 60% 50% at 50% 20%,var(--scn-glow),transparent 75%),linear-gradient(155deg,var(--scn-d1),var(--scn-d2))}
.scn .scn-duel img{display:block;height:200px;width:auto;margin:0 auto 20px}
.scn .scn-duel__x img{filter:drop-shadow(0 24px 30px rgba(10,34,94,.16))}
.scn .scn-duel h3{font-size:26px;font-weight:600;margin:0;color:var(--scn-ink)}
.scn .scn-duel__y h3{color:#fff}
.scn .scn-duel dl{margin:20px 0 0}
.scn .scn-duel dl div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--scn-lline)}
.scn .scn-duel__y dl div{border-color:var(--scn-line-dk)}
.scn .scn-duel dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding-top:4px}
.scn .scn-duel dd{margin:0;font-size:17px}
.scn .scn-duel__y dd{color:#fff;font-weight:500}
.scn .scn-duel__y a{color:var(--scn-sky)}
.scn .scn-duel__more{margin-top:auto;padding-top:20px;font-size:15px;font-weight:600}
.scn .scn-duel-q{margin:36px auto 0;max-width:820px;text-align:center;font-size:22px;line-height:1.5;color:var(--scn-ink)}

/* 6. отчёт с выносками: предмет в центре, линии к разделам прорисовываются при появлении */
.scn .scn-callouts{display:grid;grid-template-columns:1fr minmax(260px,420px) 1fr;gap:20px;align-items:center;margin-top:36px}
.scn .scn-callouts__mid img{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 40px rgba(10,34,94,.22))}
.scn .scn-callouts__col{display:grid;gap:56px}
.scn .scn-co{position:relative;background:#fff;border-radius:14px;padding:20px 22px;box-shadow:0 12px 32px rgba(10,34,94,.10)}
.scn .scn-co .scn-eb{font-size:11px}
.scn .scn-co b{display:block;font-size:19px;color:var(--scn-ink);font-weight:600;margin-top:6px}
.scn .scn-co p{font-size:15px;margin-top:6px;color:#3b4350}
.scn .scn-co::after{content:"";position:absolute;top:50%;width:56px;height:1px;background:var(--scn-deep)}
.scn .scn-co::before{content:"";position:absolute;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--scn-cyan);box-shadow:0 0 0 4px rgba(0,190,243,.2)}
.scn .scn-callouts__col--l .scn-co::after{left:100%;transform-origin:left}
.scn .scn-callouts__col--l .scn-co::before{left:calc(100% + 52px)}
.scn .scn-callouts__col--r .scn-co::after{right:100%;transform-origin:right}
.scn .scn-callouts__col--r .scn-co::before{right:calc(100% + 52px)}
.scn.scn-rv-on .scn-co::after{transform:scaleX(0);transition:transform .7s var(--scn-ease) .5s}
.scn.scn-rv-on .scn-co::before{opacity:0;transition:opacity .4s .9s}
.scn.scn-rv-on .scn-co.is-in::after{transform:scaleX(1)}
.scn.scn-rv-on .scn-co.is-in::before{opacity:1}
.scn .scn-callouts-more{margin-top:32px;text-align:center;font-size:16px;font-weight:600}

/* 9. финальная сцена перед формой: страница закольцовывается */
.scn.scn-fin .scn-w{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.scn.scn-fin .scn-fin__t{font-size:clamp(32px,3.8vw,52px);font-weight:600;line-height:1.1;color:#fff;margin:14px 0 0;letter-spacing:-.01em;text-wrap:balance}
.scn.scn-fin .scn-lead{color:var(--scn-on-dk)}
.scn.scn-fin .scn-btn{margin-top:30px}
.scn.scn-fin img{display:block;width:min(100%,460px);height:auto;margin:0 auto;filter:drop-shadow(0 40px 50px rgba(0,8,30,.55))}

@media (max-width:900px){
  .scn.scn-hero .scn-w,.scn .scn-split,.scn.scn-proc .scn-w,.scn.scn-fin .scn-w,.scn .scn-duel,.scn .scn-callouts{grid-template-columns:1fr}
  .scn .scn-hero__obj{order:-1}
  .scn .scn-hero__obj img{max-width:300px;margin:0 auto}
  .scn .scn-trust{grid-template-columns:1fr}.scn .scn-trust div{padding:14px 0 0}
  .scn .scn-split-head{background:var(--scn-l1)}
  .scn .scn-inds{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e" "f"}
  .scn .scn-ic--f{flex-direction:column}.scn .scn-ic--f .scn-ic__pic{width:100%;min-height:0;padding:24px}
  .scn .scn-ic--a .scn-ic__pic{min-height:0}.scn .scn-ic--a .scn-ic__pic img{height:200px}
  .scn .scn-callouts__col{gap:16px}.scn .scn-co::after,.scn .scn-co::before{display:none}
  .scn .scn-callouts__mid img{max-width:280px;margin:0 auto}
  .scn.scn-fin img{max-width:300px}
}
@media (max-width:600px){
  .scn h2.scn-h{font-size:28px}
  .scn .scn-split img{height:180px}
  .scn .scn-split h3{font-size:26px}
  .scn .scn-split-head h2.scn-h{padding:14px 20px;font-size:22px}
  .scn .scn-duel>div{padding:28px 24px 32px}
  .scn .scn-duel dl div{grid-template-columns:1fr;gap:4px}
  .scn .scn-duel img{height:150px}
  .scn .scn-duel-q{font-size:19px}
  .scn.scn-hero .scn-cta{flex-direction:column}
  .scn a.scn-btn{width:100%;height:auto;padding:14px 20px;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .scn *,.scn *::before,.scn *::after{animation:none!important;transition:none!important}
  .scn.scn-rv-on .scn-rv{opacity:1;transform:none}
  .scn.scn-rv-on .scn-co::after{transform:none}.scn.scn-rv-on .scn-co::before{opacity:1}
}