/* Хаб раздела Solutions - /solutions/ (11.11.2026; владелец: «сочной сделать страницу, новые приёмы, телефонов 2-3»).
   Детали (карточки, телефон, экран приложения, провод, отметки) - assets/social.css и assets/sol.css; здесь только своё,
   классы hb-*: герой-переключатель, сетка карточек с мини-схемами, схема «один телефон - четыре способа», плитки.
   Движение: герой листает скрипт страницы (классы hb-on / go), мини-схемы оживают при наведении (transition),
   схема способов - CSS под html.sn-anim и .sn-in, как у остальных схем раздела. */

/* ---------- герой: список сценариев → провод → телефон ---------- */
.hb-list{max-width:320px}
.hb-list .sn-li{padding:8px 14px;gap:11px;border-top-color:transparent;text-decoration:none;color:inherit;transition:background .25s,box-shadow .25s}
.hb-list .so-ic{flex:0 0 30px;width:30px;height:30px;border-radius:9px;transition:background .25s}
.hb-list .so-ic svg{width:15px;height:15px;transition:color .25s}
.hb-list .sn-li code{font-size:13.5px}
.hb-go{flex:0 0 auto;display:flex;margin-left:auto;opacity:0;transform:translateX(-5px);transition:opacity .25s,transform .25s;color:var(--sn-oktx)}
.hb-go svg{width:14px;height:14px}
.hb-it.hb-on{background:#f1faf3;box-shadow:inset 3px 0 0 var(--sn-ok)}
.hb-it.hb-on .so-ic{background:var(--sn-okbg)}
.hb-it.hb-on .so-ic svg{color:var(--sn-oktx)}
.hb-it.hb-on .hb-go{opacity:1;transform:none}
.hb-ph .so-app{opacity:0;transform:translateX(10%);transition:opacity .32s ease,transform .32s ease}
.hb-ph .so-app.hb-on{opacity:1;transform:none;transition-delay:.2s}
/* точка по проводу - на каждое переключение (класс go ставит скрипт), а не по общему циклу схем */
.sn-anim .hb-hero .so-wire b{animation:none}
.sn-anim .hb-hero .so-wire.go b{animation:hb-go .55s ease-out both}
@keyframes hb-go{0%{transform:none;opacity:0}15%{opacity:1}85%{transform:translateX(var(--ww));opacity:1}100%{transform:translateX(var(--ww));opacity:0}}
@media (max-width:560px){.hb-list{max-width:none}}

/* ---------- сетка сценариев ---------- */
.hb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1120px;margin:0 auto}
.hb-card{display:flex;flex-direction:column;border:1px solid var(--sn-line);border-radius:18px;background:#fff;overflow:hidden;text-decoration:none;color:inherit;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s}
.hb-card:hover,.hb-card:focus-visible{transform:translateY(-4px);box-shadow:0 22px 38px -24px rgba(16,16,20,.38);border-color:#c9d2cb}
.hb-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:176px;padding:16px;background:linear-gradient(135deg,#e7f0e9 0%,#ebebe7 100%)}
.hb-body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px;flex:1}
.hb-h{display:flex;align-items:center;gap:10px}
.hb-h .so-ic{flex:0 0 30px;width:30px;height:30px;border-radius:9px}
.hb-h .so-ic svg{width:15px;height:15px}
.hb-body h3{font-size:18px;line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--sn-ink)}
.hb-body p{font-size:14.5px;line-height:1.5;color:var(--sn-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:13px;font-weight:600;color:var(--sn-oktx)}
.hb-more svg{width:13px;height:13px;transition:transform .25s}
.hb-card:hover .hb-more svg{transform:translateX(3px)}
/* детали мини-схем */
.hb-row{display:flex;align-items:center;gap:8px;width:100%;max-width:196px;min-height:30px;padding:6px 10px;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(16,16,20,.08);font-size:11.5px;line-height:1.2;color:var(--sn-ink);white-space:nowrap;transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s}
.hb-row b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.hb-row s{flex:1 1 auto;min-width:14px;height:5px;border-radius:9px;background:#e1e5e0;text-decoration:none}
.hb-row s.w2{max-width:70%}
.hb-row s.w3{max-width:46%}
.hb-row s+b{margin-left:auto}
.hb-row .so-mk{flex:0 0 15px;width:15px;height:15px}
.hb-row .so-mk svg,.hb-fr .so-mk svg{width:8px;height:8px;color:var(--sn-oktx)}
.hb-row .sn-tog{flex:0 0 auto;margin-left:auto;transform:scale(.82);transform-origin:100% 50%}
.hb-row .sn-flag{width:16px;height:16px}
.hb-row>svg{flex:0 0 auto;width:14px;height:14px;color:var(--sn-ink)}
.hb-lock{background:#fafaf7;color:var(--sn-txt)}
.hb-lock b{font-weight:500}
.hb-frames{display:flex;align-items:flex-start;gap:12px}
.hb-fr{position:relative;display:flex;flex-direction:column;gap:5px;width:52px;height:86px;padding:8px 6px;border-radius:9px;background:#f4f4f0;box-shadow:0 0 0 1px var(--sn-line),0 8px 14px -10px rgba(16,16,20,.34);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.hb-fr>i{display:block;flex:0 0 auto;height:7px;border-radius:3px;background:#fff;box-shadow:0 1px 1px rgba(16,16,20,.06)}
.hb-fr>i.bn{height:22px;border-radius:4px;background:linear-gradient(135deg,#dbe8de,#e3e7f3);box-shadow:none}
.hb-fr>i.hl{box-shadow:0 0 0 1.3px var(--sn-ok)}
.hb-fr>i.cta{margin-top:auto;height:9px;background:#0b0b0d}
.hb-fr>i.err{box-shadow:0 0 0 1.3px #f4f4f0,0 0 0 2.6px #dc2626}
.hb-fr>i.ld{height:5px;margin-top:6px;border-radius:9px;overflow:hidden}
.hb-fr>i.ld u{display:block;width:62%;height:100%;border-radius:9px;background:var(--sn-ok);transition:width .5s ease}
.hb-fr>em{position:absolute;left:50%;bottom:-9px;display:flex;margin-left:-9px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,16,20,.2);align-items:center;justify-content:center;font-style:normal}
.hb-fr>em .so-mk{width:14px;height:14px}
.hb-fr>em .so-mk.bad b{background:#fee2e2}
.hb-fr>em .so-mk.bad svg{color:#b91c1c}
.hb-fr>em .sn-flag{width:16px;height:16px;border:0}
/* наведение: строки расходятся, кадры приподнимаются, выключатель включается, полоса доходит */
.hb-card:hover .hb-row:nth-child(1){transform:translateX(-7px)}
.hb-card:hover .hb-row:nth-child(2){transform:translateX(5px)}
.hb-card:hover .hb-row:nth-child(3){transform:translateX(-3px)}
.hb-card:hover .hb-row{box-shadow:0 6px 12px -8px rgba(16,16,20,.28)}
.hb-card:hover .hb-fr:nth-child(1){transform:translateY(-5px) rotate(-3deg)}
.hb-card:hover .hb-fr:nth-child(2){transform:translateY(-8px)}
.hb-card:hover .hb-fr:nth-child(3){transform:translateY(-5px) rotate(3deg)}
.hb-card:hover .hb-fr>i.ld u{width:100%}
.hb-flip{background:#d6d6d0}
.hb-flip::after{transform:none}
.hb-flip,.hb-flip::after{transition:background .3s,transform .3s}
.hb-card:hover .hb-flip{background:var(--sn-ok)}
.hb-card:hover .hb-flip::after{transform:translateX(12px)}
@media (hover:none){.hb-flip{background:var(--sn-ok)}.hb-flip::after{transform:translateX(12px)}.hb-fr>i.ld u{width:100%}}
@media (max-width:1059px){.hb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.hb-body p{white-space:normal}}
@media (max-width:700px){.hb-grid{grid-template-columns:minmax(0,1fr)}.hb-art{height:146px}}

/* ---------- один телефон - четыре способа ---------- */
.hb-hubfig{padding:clamp(28px,4vw,48px) clamp(16px,3vw,40px)}
.hb-hub{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;width:100%;max-width:900px}
.hb-hub>.sn-ph{--w:176px}
.hb-side{display:grid;gap:clamp(18px,3vw,34px)}
.hb-way{display:flex;align-items:center}
.hb-way .so-wire{--ww:44px;flex:0 0 44px}
.hb-way.r .so-wire{transform:scaleX(-1)}
.hb-wayc{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:12px;padding:14px 16px}
.hb-wayc b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--sn-ink)}
.hb-wayc small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--sn-txt)}
@keyframes hb-ring{0%,2%{box-shadow:0 1px 2px rgba(16,16,20,.06)}6%,22%{box-shadow:0 0 0 2px var(--sn-ok),0 14px 26px -18px rgba(22,163,74,.6)}27%,100%{box-shadow:0 1px 2px rgba(16,16,20,.06)}}
@keyframes hb-dot{0%{transform:none;opacity:0}3%{transform:none;opacity:1}11%{transform:translateX(var(--ww));opacity:1}12%,100%{transform:translateX(var(--ww));opacity:0}}
.sn-anim .sn-in .hb-wayc{animation:hb-ring 8s calc(var(--k)*2s + .4s) infinite both}
.sn-anim .sn-in .hb-way .so-wire b{animation:hb-dot 8s calc(var(--k)*2s + .5s) infinite both}
@media (max-width:820px){.hb-hub{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}.hb-hub>.sn-ph{order:-1;--w:150px}.hb-side{width:100%;gap:12px}.hb-way .so-wire{display:none}}

/* ---------- общее у всех сценариев ---------- */
.hb-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(24px,4vw,56px);max-width:1080px;margin:clamp(8px,2vw,20px) auto 0}
.hb-tile{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;text-decoration:none;color:inherit}
.hb-ico{display:block;width:84px;height:70px;margin-bottom:24px;color:#2f2f37;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.hb-tile:hover .hb-ico{transform:translateY(-4px)}
.hb-tile h3{margin-bottom:10px;font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--sn-ink);transition:color .2s}
.hb-tile:hover h3{color:var(--sn-oktx)}
.hb-tile p{max-width:330px;font-size:15.5px;line-height:1.6;color:var(--sn-txt)}
.hb-tiles+.sn-mid{margin-top:clamp(40px,5vw,60px)}
@media (max-width:900px){.hb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hb-tiles{grid-template-columns:minmax(0,1fr);gap:40px}}

/* 12.11 (владелец: «иконки наши красивые нарисуем, как на Status»): значки сценариев - рисованные (lib/drawn.php), без серой плашки;
   кольцо отметки - цвет фона строки, у выбранной строки контур зелёный */
.so-ic.hb-dr,.sn-li .so-ic.hb-dr,.hb-it.hb-on .so-ic.hb-dr{background:none;border-radius:0}
.so-ic.hb-dr .dr-ico{width:100%;height:auto;color:#2f2f37;--dr-ring:#fff;transition:color .25s}
.hb-list .so-ic.hb-dr{flex:0 0 40px;width:40px;height:33px}
.hb-it.hb-on .so-ic.hb-dr .dr-ico{color:var(--sn-oktx);--dr-ring:#f1faf3}
.hb-h .so-ic.hb-dr{flex:0 0 40px;width:40px;height:34px}
.hb-wayc .so-ic.hb-dr{flex:0 0 46px;width:46px;height:38px}