/* worksetup.ru: главная v2 (18.10.2026). Подключается только на главной, после slabs.css. Использует токены tokens.css. */

/* hero */
.wrap.mk-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
.mk-eyebrow{display:inline-block;margin:0 0 14px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.9rem}
.bb-box{min-width:0}
.bb-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bb a{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);text-decoration:none;opacity:.45;transition:opacity .4s,transform .4s,border-color .4s}
.bb.on a,.bb a:hover,.bb a:focus-visible{opacity:1;border-color:var(--lime-400);transform:translateX(-4px)}
.bb small{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:2px}
.bb b{font-weight:600;font-size:.98rem;line-height:1.3}
.bb-out b{color:var(--lime-400)}
[data-tone="paper"] .bb-out b{color:var(--lime-800)}
.bb-arrow{font-size:1.3rem;color:var(--lime-400)}

/* trust без анимаций */
.trust .stat p{max-width:22ch}


/* solutions */
.role-switch{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px}
.role-switch .chip{font:inherit;cursor:pointer;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.role-switch .chip.on{background:var(--ink-900);color:var(--lime-400);border-color:var(--ink-900)}
.sg{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.sg:first-of-type{margin-top:16px}
.sg-head h3{margin:0 0 6px;font-size:1.35rem}
.sg-head p{margin:0;color:var(--muted)}
.sg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.sol{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.sol[hidden],.sg[hidden]{display:none}
.sol h4{margin:0;font-size:1.05rem;line-height:1.3}
.sol-bb{margin:0;color:var(--muted);font-size:.93rem;line-height:1.4}
.sol-tags{display:flex;flex-wrap:wrap;gap:6px}
.sol-kind,.sol-role{font-size:.72rem;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.sol-kind.real{background:var(--lime-400);color:var(--ink-900);border-color:var(--lime-400);font-weight:600}
.sol-cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.sol-cta .btn{flex:1 1 auto;justify-content:center;text-align:center}

/* how */
.mk-steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* projects */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:28px}
.proj{padding:26px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.proj h3{margin:12px 0 16px;font-size:1.3rem}
.proj dl{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;margin:0 0 20px}
.proj dt{color:var(--muted);font-size:.9rem}
.proj dd{margin:0;line-height:1.45}

/* levels */
.lv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:28px}
.lv{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:24px;background:var(--ink-900);color:#EEF0F6}
.lv-n{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--lime-400)}
.lv h3{margin:0;font-size:1.6rem}
.lv p{margin:0;color:#C9CFDC}
.lv-ex small{display:block;color:#9AA3B8;font-size:.78rem;margin-bottom:2px}
.lv-meta{margin-top:auto;display:grid;gap:4px;padding-top:12px;border-top:1px solid #2A3452;font-size:.92rem}

/* about */

/* quick */
.q-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:24px}
.q{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);text-decoration:none}
.q span{color:var(--muted);font-size:.9rem}
.q:hover{border-color:var(--ink-900)}
.q-other{margin:20px 0 0;color:var(--muted);line-height:1.7}
.q-other a{color:var(--text)}

@media (max-width:860px){
  .wrap.mk-hero{grid-template-columns:1fr}
  .sg{grid-template-columns:1fr;gap:14px}
  .proj dl{grid-template-columns:1fr;gap:2px}
  .proj dd{margin-bottom:10px}
}
@media (max-width:480px){
  .bb a{grid-template-columns:1fr;gap:4px}
  .bb-arrow{transform:rotate(90deg);justify-self:start}
  }
@media (prefers-reduced-motion:reduce){.bb a,.pain{transition:none}.bb a{opacity:1}}

/* ---- v3: иконки в «было → стало» ---- */
.bb-in,.bb-out{display:flex;align-items:center;gap:12px;min-width:0}
.bb-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--ink-700);border:1px solid var(--line)}
.bb-ic svg{width:22px;height:22px;fill:none;stroke:#C9CFDC;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bb-out .bb-ic{background:rgba(200,242,91,.12);border-color:rgba(200,242,91,.4)}
.bb-out .bb-ic svg{stroke:var(--lime-400)}
.bb.on .bb-ic{box-shadow:0 0 0 1px rgba(200,242,91,.25),0 6px 18px rgba(200,242,91,.15)}
@media (max-width:480px){.bb-ic{width:36px;height:36px}.bb-ic svg{width:19px;height:19px}}

/* ---- v3: змейка «Узнаёте задачу?» ---- */
#pains #tools .road .card h4{font-weight:600}
#pains #tools .road .pain-other{border:2px dashed var(--text);background:transparent}

/* ---- v3: 3D-сцены в шагах ---- */
.mk-steps li{position:relative}
.st-3d{position:absolute;top:18px;right:0;width:clamp(110px,11vw,150px);height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));animation:st-float 6s ease-in-out infinite}
.mk-steps li:nth-child(2) .st-3d{animation-delay:-1.2s}.mk-steps li:nth-child(3) .st-3d{animation-delay:-2.4s}
.mk-steps li:nth-child(4) .st-3d{animation-delay:-3.6s}.mk-steps li:nth-child(5) .st-3d{animation-delay:-4.8s}
@keyframes st-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---- v3: 3D-стопки экранов в рабочих проектах ---- */
.p3d{height:clamp(220px,22vw,290px);margin:-6px -6px 18px;perspective:1600px;border-radius:18px;background:radial-gradient(120% 90% at 70% 20%,rgba(200,242,91,.22),transparent 60%),var(--ink-900);overflow:hidden;position:relative}
.p3d-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(22deg) rotateY(-26deg) rotateZ(6deg) translate3d(4%,6%,0);transition:transform .6s var(--ease,ease)}
.p3d img{position:absolute;width:72%;aspect-ratio:16/9;object-fit:cover;object-position:top left;border-radius:10px;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 50px rgba(0,0,0,.55)}
.p3d .s1{left:4%;top:6%;transform:translateZ(0)}
.p3d .s2{left:16%;top:22%;transform:translateZ(60px)}
.p3d .s3{left:28%;top:38%;transform:translateZ(120px)}
.proj:hover .p3d-stage{transform:rotateX(14deg) rotateY(-14deg) rotateZ(3deg) translate3d(2%,2%,0)}
@media (prefers-reduced-motion:reduce){.st-3d{animation:none}.p3d-stage{transition:none}}
@media (max-width:1180px){.bb a{gap:8px;padding:12px}.bb-ic{width:34px;height:34px;border-radius:10px}.bb-ic svg{width:18px;height:18px}.bb-in,.bb-out{gap:8px}.bb b{font-size:.92rem}}
.st-3d{width:clamp(120px,12vw,170px)}

/* ---- v4: змейка — личное / бизнес ---- */
.th-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;color:var(--muted);font-size:.95rem}
.th-dot{opacity:.5}
.pain-badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--text);background:var(--bg)}
.pain-badge.self{background:var(--lime-400);border-color:var(--lime-400);color:var(--ink-900)}
.pain-badge.biz{background:var(--ink-900);border-color:var(--ink-900);color:var(--lime-400)}
#pains #tools .road .mk-th{display:flex;align-items:center;gap:14px;padding:10px 22px 10px 10px}
.mk-th .th-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%}
.mk-th .th-ic svg{width:26px;height:26px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk-th.self .th-ic{background:var(--lime-400)}.mk-th.self .th-ic svg{stroke:var(--ink-900)}
.mk-th.biz .th-ic{background:var(--ink-900)}.mk-th.biz .th-ic svg{stroke:var(--lime-400)}
.mk-th .th-txt{display:flex;flex-direction:column;text-align:left}
.mk-th .th-sub{font-size:.9rem;color:var(--muted)}
#pains #tools .road .pc{padding-bottom:clamp(22px,2.4vw,30px);min-height:270px}
#pains #tools .road .pc .pain-badge{margin-bottom:12px}
#pains #tools .road .pc p{padding-right:4px}
#pains #tools .road .pc .more{position:relative;z-index:1;margin-top:16px}
.pain-3d{position:absolute;right:16px;bottom:10px;width:clamp(110px,10vw,150px);height:auto;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(11,16,32,.25));transition:transform .4s ease}
.pc:hover .pain-3d{transform:translateY(-6px) scale(1.04)}
#pains #tools .road .pc.biz{border-color:color-mix(in srgb,var(--ink-900) 22%,var(--line))}
@media (max-width:700px){.pain-3d{width:92px;right:10px;bottom:8px}#pains #tools .road .pc{min-height:0;padding-bottom:110px}}

/* ---- v4: «С чего начать» — дорога с движущейся разметкой ---- */
#levels{overflow-x:clip}
.lv-wrap{position:relative;margin-top:28px}
.lv-band{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:50%;height:96px;transform:translateY(-50%);background:#1A2238;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.lv-mark{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:repeating-linear-gradient(90deg,var(--lime-400) 0 56px,transparent 56px 100px);background-position-x:var(--off,0px)}
.lv-edge{position:absolute;left:0;right:0;height:3px;background:rgba(255,255,255,.55)}
.lv-edge.t{top:10px}.lv-edge.b{bottom:10px}
.lv-wrap .lv-grid{position:relative;z-index:1;margin-top:0;align-items:start}
.lv-wrap .lv{box-shadow:0 24px 40px rgba(11,16,32,.28);border:1px solid #2A3452}
.lv-wrap .lv:nth-child(1){margin-top:60px}.lv-wrap .lv:nth-child(2){margin-top:30px}
.lv-wrap{padding-bottom:30px}
@media (max-width:860px){
  .lv-band{left:6px;right:auto;top:0;bottom:0;width:56px;height:auto;transform:none}
  .lv-mark{left:50%;right:auto;top:0;bottom:0;width:6px;height:auto;margin:0 0 0 -3px;background:repeating-linear-gradient(180deg,var(--lime-400) 0 46px,transparent 46px 84px);background-position-y:var(--off,0px)}
  .lv-edge{top:0!important;bottom:0!important;width:3px;height:auto}.lv-edge.t{left:6px}.lv-edge.b{left:auto;right:6px}
  .lv-wrap .lv-grid{padding-left:78px}
  .lv-wrap .lv:nth-child(1),.lv-wrap .lv:nth-child(2){margin-top:0}
}
/* v4b: дорога под карточками, карточки ступенями с опорами */
@media (min-width:861px){
  .lv-wrap{padding-bottom:96px}
  .lv-band{top:auto;bottom:0;transform:none}
  .lv-wrap .lv-grid{align-items:end}
  .lv-wrap .lv{position:relative;overflow:visible}
  .lv-wrap .lv:nth-child(1){--mb:24px;margin-top:0}.lv-wrap .lv:nth-child(2){--mb:64px;margin-top:0}.lv-wrap .lv:nth-child(3){--mb:104px}
  .lv-wrap .lv{margin-bottom:var(--mb)}
  .lv-wrap .lv::after{content:"";position:absolute;left:50%;top:100%;width:4px;margin-left:-2px;height:calc(var(--mb) + 48px);background:repeating-linear-gradient(180deg,var(--ink-900) 0 8px,transparent 8px 14px)}
  .lv-wrap .lv::before{content:"";position:absolute;left:50%;top:calc(100% + var(--mb) + 48px - 9px);width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--lime-400);box-shadow:0 0 0 4px #1A2238,0 0 0 6px var(--lime-400);z-index:2}
}

/* ---- v5: отступ и заголовок «Узнаёте задачу?» ---- */
#pains.slab{padding-top:clamp(48px,5vw,80px)}
#pains #tools > h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.02em;margin:0 0 16px}
#pains #tools > .sub{font-size:var(--fs-lead);max-width:52ch;margin-left:auto;margin-right:auto}

/* ---- v5: появление шагов в шахматном порядке и уровней по мере прокрутки ---- */
.mk-js .mk-steps li{opacity:0;transform:translate3d(var(--rx,-48px),36px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.mk-js .mk-steps li:nth-child(even){--rx:48px}
.mk-js .mk-steps li:nth-child(2){transition-delay:.12s}.mk-js .mk-steps li:nth-child(3){transition-delay:.24s}
.mk-js .mk-steps li:nth-child(5){transition-delay:.12s}
.mk-js .mk-steps li.mk-in{opacity:1;transform:none}
.mk-js .lv-wrap .lv{opacity:0;translate:0 70px;scale:.96;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1),scale .9s cubic-bezier(.2,.7,.2,1)}
.mk-js .lv-wrap .lv:nth-child(2){transition-delay:.18s}.mk-js .lv-wrap .lv:nth-child(3){transition-delay:.36s}
.mk-js .lv-wrap .lv.mk-in{opacity:1;translate:0 0;scale:1}
@media (prefers-reduced-motion:reduce){.mk-js .mk-steps li,.mk-js .lv-wrap .lv{opacity:1;transform:none;translate:none;scale:none;transition:none}}

/* ---- v6: сложность уровней ---- */
.lv-cx{display:inline-flex;gap:6px;margin-bottom:4px}
.lv-cx i{width:28px;height:8px;border-radius:4px;background:#2A3452}
.lv-cx i.on{background:var(--lime-400)}