:root{
  --bg:#fbfbfd; --bg2:#f2f2f6; --card:#fff; --ink:#0b0b12; --ink2:#45455a; --mute:#6a6a7e;
  --line:#ececf2; --v:#4b2ff0; --v2:#6a3cff; --vsoft:#eeebff; --dark:#0b0b12;
  --r:16px; --r2:16px; --sh:0 1px 2px rgba(20,16,60,.03),0 8px 24px -14px rgba(40,24,120,.12);
  --f-head:"Onest",system-ui,sans-serif; --f-body:"Onest",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.muted{color:var(--mute)}
h1,h2,h3,h4{font-family:var(--f-head);letter-spacing:-.02em;line-height:1.08}

/* header */
.top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:40px;height:76px}
.logo{font:900 38px/1 var(--f-head);letter-spacing:-.12em;padding-right:.12em}
.nav{display:flex;gap:clamp(20px,3vw,44px);flex:1}
.nav a{font:500 15px var(--f-head);color:var(--ink);transition:color .15s;white-space:nowrap}
.nav a:hover,.nav a.on{color:var(--v)}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:16px;height:2px;background:var(--ink);border-radius:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:14px;font:600 16px var(--f-head);padding:17px 32px;border-radius:12px;transition:transform .15s,background .15s,border-color .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:14px 26px;font-size:15px}
.btn-dark{background:var(--dark);color:#fff}.btn-dark:hover{background:#24243a}
.btn-v{background:var(--v);color:#fff;box-shadow:0 12px 30px -10px rgba(75,47,240,.6)}.btn-v:hover{background:#3b20e0}
.btn-ghost{background:#fff;border:1.5px solid #dedee8;padding:16px 30px}.btn-ghost:hover{border-color:var(--ink)}
.arr,.btn svg{transition:transform .15s}.btn:hover .arr{transform:translateX(3px)}

/* hero */
.hero{padding:30px 0 10px}
.hero-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:24px;align-items:center}
.hero-t{display:flex;flex-direction:column;gap:28px;padding:10px 0}
.eyebrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px;color:#55556a}
.pill{flex:none;font:700 13px var(--f-head);padding:6px 12px;border-radius:999px;border:1.5px solid #c9c0fb;color:#3a22d6}
.hero h1{font-size:clamp(52px,7vw,86px);font-weight:900;line-height:.92;letter-spacing:-.045em}
.grad{background:linear-gradient(90deg,var(--v),var(--v2));-webkit-background-clip:text;background-clip:text;color:transparent}
.trust{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.faces{display:flex;padding-left:10px}
.faces a{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--bg);margin-left:-10px;overflow:hidden;background:#d4d4e0;transition:transform .15s}
.faces a:hover{transform:translateY(-3px);z-index:2}
.faces img{width:100%;height:100%;object-fit:cover;object-position:70% 40%;transform:scale(1.6)}
.trust p{color:var(--ink2);font-size:15px;line-height:1.45;max-width:300px}
.row{display:flex;gap:18px;flex-wrap:wrap}
.hero-v{position:relative;height:460px}
.hero-v .glow{position:absolute;inset:-40px -60px -40px 0;background:radial-gradient(closest-side,rgba(120,80,255,.35),rgba(120,80,255,.08) 60%,transparent);pointer-events:none}
.hero-img{position:absolute;inset:10px 0 10px 30px;border-radius:28px;overflow:hidden;background:linear-gradient(140deg,#151129,#2a1458 55%,#0d0b1c);box-shadow:0 40px 80px -30px rgba(60,30,180,.55)}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* services row */
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin-top:28px}
.svc{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid #efeff4;border-radius:16px;padding:24px 28px}
.svc svg{flex:none;color:var(--ink);stroke-width:1.7}
.svc b{font:700 17px var(--f-head);display:block;margin-bottom:2px}
.svc span{color:#5a5a6e;font-size:14px;display:block}

/* sections */
.sec{padding:52px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(34px,4vw,52px);font-weight:900;letter-spacing:-.04em}
.sec-h p{color:var(--mute);max-width:520px}

/* cases */
.cases-h{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.cases-h h2{font-size:52px;font-weight:900;letter-spacing:-.04em;line-height:1}
.chips{display:flex;gap:12px;flex-wrap:wrap;flex:1}
.chip{font:500 14px var(--f-head);padding:9px 18px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);color:#2a2a3a;transition:all .15s}
.chip:hover{border-color:#cfc8ff}
.chip.on{background:var(--v);border-color:var(--v);color:#fff}
.allbtn{display:flex;align-items:center;gap:10px;font:600 16px var(--f-head);color:var(--v)}
.allbtn:hover{color:#2f17c9}
.allbtn svg{transition:transform .2s}.allbtn.up svg{transform:rotate(-90deg)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.ccard{position:relative;display:block;aspect-ratio:3/2;border-radius:16px;overflow:hidden;color:#fff;isolation:isolate}
.ccard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ccard:hover img{transform:scale(1.05)}
.ccard:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,5,12,.88));z-index:1}
.ccard .lvb{position:absolute;left:16px;top:16px;z-index:2;font:600 11px var(--f-head);letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(10,10,20,.45);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
.cc-b{position:absolute;left:22px;right:18px;bottom:18px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.cc-b b{display:block;font:800 24px/1.1 var(--f-head);letter-spacing:-.02em}
.cc-b span{display:block;font-size:15px;color:#e6e6f0;line-height:1.35;margin-top:4px}
.cc-go{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:background .2s,color .2s,transform .2s}
.ccard:hover .cc-go{background:var(--v);color:#fff;transform:rotate(45deg)}
.empty{padding:40px;text-align:center;color:var(--mute);border:1px dashed #dedee8;border-radius:16px}

/* about */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:#fff;border:1px solid #efeff4;border-radius:16px;padding:26px 24px}
.stat b{display:block;font:900 40px/1 var(--f-head);letter-spacing:-.04em;color:var(--v);margin-bottom:8px}
.stat span{font-size:14px;color:var(--ink2);line-height:1.35;display:block}

/* process / contact */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--sh)}
.pc i{font:500 12px var(--f-mono);color:var(--v);font-style:normal}
.pc b{display:block;font:800 19px var(--f-head);margin:10px 0 6px}
.pc span{font-size:14px;color:var(--ink2)}
.svc-big{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-big .pc ul{list-style:none;margin-top:10px}
.svc-big .pc li{font-size:13.5px;color:var(--ink2);margin:5px 0;padding-left:14px;position:relative}
.svc-big .pc li:before{content:"→";position:absolute;left:0;color:var(--v)}
.cta{position:relative;border-radius:32px;background:linear-gradient(135deg,#f3efff,#fbfbfe);border:1px solid var(--line);padding:48px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;overflow:hidden}
.cta h2{font-size:clamp(28px,3.4vw,42px);font-weight:800}
.cta p{color:var(--mute);margin-top:8px}
.tech-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tech-cloud span{font:600 13.5px var(--f-head);padding:9px 15px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.foot{border-top:1px solid var(--line);padding:26px 0;margin-top:60px}
.foot-in{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2)}
.foot-in .muted{margin-left:auto}

.lb{position:fixed;inset:0;z-index:100;background:rgba(8,6,20,.86);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.lb img{max-height:92vh;max-width:92vw;border-radius:16px}

.rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}}

/* ───── fullscreen case ───── */
html.cx-lock,html.cx-lock body{overflow:hidden}
.cx{position:fixed;inset:0;z-index:200;color:#fff;overflow:hidden;--glass:rgba(14,14,26,.52);--gline:rgba(255,255,255,.13)}
.cx-curtain{position:fixed;inset:0;overflow:hidden;background:#07070d}
.cx-cd{position:absolute;inset:0;opacity:0;background:radial-gradient(52vmin 52vmin at 50% 48%,color-mix(in srgb,var(--acc) 24%,transparent),transparent 70%),#07070d}
.cx.closing .cx-bg,.cx.closing .cx-shade,.cx.closing .cx-load,.cx.closing .cx-ui{opacity:0;transition:opacity .25s ease}
.cx-bg{position:fixed;inset:0;overflow:hidden;opacity:0;transition:opacity 1.1s ease}
.cx-bg img{width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.36);transform:scale(1.12)}
.cx.on .cx-bg{opacity:1}
.cx-load{position:fixed;z-index:4;width:min(64vmin,560px);aspect-ratio:1;left:calc(50% - min(32vmin,280px));top:calc(50% - min(32vmin,280px));opacity:0;filter:blur(8px);transition:opacity .45s,filter .45s;pointer-events:none;cursor:pointer;-webkit-mask:radial-gradient(closest-side,#000 72%,transparent 100%);mask:radial-gradient(closest-side,#000 72%,transparent 100%)}
.cx-load.show{opacity:1;filter:none;pointer-events:auto}
.cx-load video,.cx-load img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx-load img{opacity:0;transition:opacity .35s}
.cx-load.still img{opacity:1}
.cx-ui{position:relative;z-index:2}
.cx-emb{width:64px;height:64px;border-radius:18px;overflow:hidden;margin-bottom:14px;background:#07070d;border:1px solid var(--gline);box-shadow:0 10px 30px -8px var(--acc)}
.cx-emb img{width:100%;height:100%;object-fit:cover;transform:scale(1.5)}
.cx-shade{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity .7s;background:radial-gradient(900px 600px at 28% 45%,var(--accsoft),transparent 70%),linear-gradient(180deg,rgba(6,6,14,.45),rgba(6,6,14,.78))}
.cx.on .cx-shade{opacity:1}
.cx-top,.cx-body{transition:opacity .25s}
.cx.swap .cx-top,.cx.swap .cx-body,.cx.closing .cx-top,.cx.closing .cx-body{opacity:0}
.cx-top{position:relative;z-index:3;display:flex;align-items:center;gap:18px;height:76px;padding:0 32px;opacity:0;transform:translateY(-12px);transition:opacity .5s,transform .5s}
.cx.on .cx-top{opacity:1;transform:none}
.cx-x,.cx-pn a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid var(--gline);backdrop-filter:blur(12px);color:#fff;font-size:18px;transition:background .2s,transform .2s}
.cx-x:hover,.cx-pn a:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.cx-crumb{font:500 15px var(--f-head);color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-crumb i{opacity:.4;margin:0 6px;font-style:normal}
.cx-pn{margin-left:auto;display:flex;align-items:center;gap:10px;font:500 13px var(--f-mono);color:rgba(255,255,255,.6)}
.cx-body{position:relative;z-index:2;height:calc(100vh - 76px);display:grid;grid-template-columns:310px minmax(0,1fr) 380px;gap:26px;padding:0 28px 24px}
.cx-root,.cx-info,.cx-mid{min-height:0}
.panel,.cx-root,.cx-info{background:rgba(12,12,22,.58);border:1px solid var(--gline);backdrop-filter:blur(20px);border-radius:24px}
/* левая карточка */
.cx-root{position:relative;z-index:1;display:flex;flex-direction:column;padding:22px;overflow:auto;scrollbar-width:none;opacity:0;transform:translateX(-28px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.cx.on .cx-root{opacity:1;transform:none}
.cx-rh{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.cx-emb{width:84px;height:84px;border-radius:22px;overflow:hidden;background:#07070d;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);box-shadow:0 14px 40px -12px var(--acc)}
.cx-emb img{width:100%;height:100%;object-fit:cover;transform:scale(1.5)}
.cx-badge{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--f-head);color:rgba(255,255,255,.8);padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--gline);transition:.2s}
.cx-badge:hover{border-color:var(--acc);color:#fff}
.cx-badge i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.cx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.cx-tags span{font:500 11.5px var(--f-head);padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--gline);color:rgba(255,255,255,.85)}
.cx-tags span.l{background:var(--acc);border-color:var(--acc);color:var(--acct);font-weight:700}
.cx-root h2{font:900 clamp(28px,2.6vw,38px)/1 var(--f-head);letter-spacing:-.04em}
.cx-tl{font:500 15px/1.4 var(--f-head);color:rgba(255,255,255,.72);margin:10px 0 18px}
.cx-ab{display:none}
.cx-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.cx-kpi div{position:relative;background:rgba(255,255,255,.04);border:1px solid var(--gline);border-radius:14px;padding:12px 12px 11px}
.cx-kpi .ki{position:absolute;right:10px;top:10px;color:color-mix(in srgb,var(--acc) 80%,#fff);opacity:.8}
.cx-kpi b{display:block;font:800 21px/1.1 var(--f-head);color:var(--acc);letter-spacing:-.02em;padding-right:18px}
.cx-kpi span:not(.ki){display:block;font-size:11.5px;line-height:1.3;color:rgba(255,255,255,.6);margin-top:4px}
.cx-btns{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.cbtn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:14px;font:600 15px var(--f-head);transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.cbtn:hover{transform:translateY(-1px)}
.cbtn.acc{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 88%,#fff),var(--acc));color:var(--acct);box-shadow:0 14px 34px -12px var(--acc)}
.cbtn.ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);color:#fff}
.cbtn.ghost:hover{border-color:var(--acc)}
/* центр */
.cx-mid{display:flex;flex-direction:column;padding:6px 4px 0;opacity:0;transition:opacity .6s .1s}
.cx.on .cx-mid{opacity:1}
.cx-mh small{display:block;font:700 11.5px var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.cx-mh h3{font:800 clamp(22px,2vw,28px)/1.15 var(--f-head);letter-spacing:-.02em}
.cx-mh p{font-size:14px;color:rgba(255,255,255,.58);margin-top:8px;max-width:520px}
.cx-tree{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(230px,275px) minmax(190px,250px);column-gap:clamp(40px,5vw,80px);align-items:center;align-content:center;padding:24px 0}
.cx-lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.ln{fill:none;stroke:var(--acc);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;opacity:.45;filter:drop-shadow(0 0 4px var(--acc));transition:opacity .25s,stroke-width .25s}
.ln.l{stroke-dashoffset:0}
.ln.l.fresh{stroke-dashoffset:1}
.ln.l.fresh.go{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.6,0,.2,1) calc(var(--d) * 55ms),opacity .25s,stroke-width .25s}
.ln.on{opacity:1;stroke-width:2.4}
.cx-groups{position:relative;display:flex;flex-direction:column;gap:12px;padding-left:22px}
.cx-groups:before{content:"";position:absolute;left:6px;top:28px;bottom:28px;width:2px;border-radius:2px;background:linear-gradient(var(--acc),color-mix(in srgb,var(--acc) 20%,transparent));opacity:.55;transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.6,0,.2,1) .15s}
.cx.lines .cx-groups:before{transform:scaleY(1)}
.cx-g{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 12px 12px 12px;border-radius:16px;background:rgba(12,12,22,.55);border:1px solid var(--gline);backdrop-filter:blur(14px);color:#fff;opacity:0;transform:translateX(-14px);transition:opacity .45s calc(.2s + var(--d) * 80ms),transform .45s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--d) * 80ms),border-color .25s,background .25s,box-shadow .25s}
.cx.lines .cx-g{opacity:1;transform:none}
.cx-g:before{content:"";position:absolute;left:-21px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#0b0b14;border:2px solid color-mix(in srgb,var(--acc) 70%,transparent);transition:.25s}
.cx-g .ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:background .25s,color .25s}
.cx-g .tx{flex:1;min-width:0}
.cx-g b{display:block;font:700 15px/1.2 var(--f-head)}
.cx-g small{display:block;font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
.chev{flex:none;opacity:.45;transition:transform .2s,opacity .2s}
.cx-g:hover{border-color:rgba(255,255,255,.28)}
.cx-g.on{border-color:var(--acc);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 22%,transparent),rgba(12,12,22,.6));box-shadow:0 0 0 1px var(--acc),0 14px 40px -14px var(--acc)}
.cx-g.on:before{background:var(--acc);border-color:var(--acc);box-shadow:0 0 12px var(--acc)}
.cx-g.on .ic{background:var(--acc);color:var(--acct)}
.cx-g.on .chev{opacity:1;transform:translateX(2px);color:var(--acc)}
.cx-leaves{position:relative;display:flex;flex-direction:column;gap:9px}
.cx-l{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px 7px 7px;border-radius:999px;background:rgba(12,12,22,.5);border:1px solid var(--gline);backdrop-filter:blur(12px);color:#fff;opacity:0;transform:translateX(-12px);transition:border-color .2s,background .2s,transform .2s}
.cx-leaves.in .cx-l{opacity:1;transform:none;transition:opacity .4s calc(.12s + var(--d) * 55ms),transform .45s cubic-bezier(.2,.7,.2,1) calc(.12s + var(--d) * 55ms),border-color .2s,background .2s}
.cx-l .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--f-mono);color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,#0b0b14);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);overflow:hidden}
.cx-l .n img{width:100%;height:100%;object-fit:cover;object-position:top}
.cx-l b{flex:1;min-width:0;font:600 13.5px/1.25 var(--f-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-l:hover,.cx-l.on{border-color:var(--acc);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 20%,transparent),rgba(12,12,22,.6))}
.cx-l.on{transform:translateX(5px)}
.cx-l.on .n{background:var(--acc);color:var(--acct)}
.cx-l.on .chev{opacity:1;color:var(--acc)}
/* правая панель */
.cx-info{position:relative;overflow:auto;padding:24px;opacity:0;transform:translateX(30px);transition:opacity .6s .15s,transform .6s cubic-bezier(.2,.7,.2,1) .15s;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.cx.on .cx-info{opacity:1;transform:none}
.ix-x{display:none}
.ix-in{transition:opacity .22s,transform .35s cubic-bezier(.2,.7,.2,1)}
.ix-new{opacity:0;transform:translateY(12px)}
.ix-out{position:absolute;left:24px;right:24px;top:24px;opacity:0;transform:translateY(-10px);pointer-events:none}
.ix-hd{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ix-ic{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,#0b0b14);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
.ix-hd small{display:block;font:700 11px var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:4px}
.ix-hd b{display:block;font:800 23px/1.15 var(--f-head);letter-spacing:-.02em}
.ix-lead{font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);margin-bottom:14px}
.cx-info h5{font:700 14px var(--f-head);margin:16px 0 8px}
.ix-check{list-style:none}
.ix-check li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82);margin:7px 0}
.ix-check li:before{content:"✓";position:absolute;left:2px;top:0;color:var(--acc);font-weight:800}
.ix-stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ix-stack span{font:500 11.5px var(--f-mono);padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--gline)}
.ix-tl{list-style:none;position:relative;margin-top:6px}
.ix-tl:before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:linear-gradient(color-mix(in srgb,var(--acc) 60%,transparent),color-mix(in srgb,var(--acc) 10%,transparent))}
.ix-tl li{position:relative;display:flex;gap:14px;padding:10px 10px 10px 0;border-radius:14px;cursor:default;transition:background .25s}
.ix-tl li .n{position:relative;z-index:1;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--f-mono);color:var(--acc);background:#0d0d18;border:1.5px solid color-mix(in srgb,var(--acc) 55%,transparent);transition:.25s}
.ix-tl li .b{flex:1;min-width:0;padding-top:6px}
.ix-tl li b{display:block;font:700 15px/1.25 var(--f-head);transition:color .25s}
.ix-tl li .s{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.6);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ix-tl li .x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.ix-tl li .x>div{overflow:hidden}
.ix-tl li .x ul{list-style:none;margin:8px 0 0}
.ix-tl li .x li{display:block;padding:0 0 0 14px;margin:5px 0;font-size:13px;color:rgba(255,255,255,.75);position:relative}
.ix-tl li .x li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:2px;background:var(--acc)}
.ix-tl li .x p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.65);margin-top:8px}
.ix-tl li.on{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 12%,transparent),transparent 80%)}
.ix-tl li.on .n{background:var(--acc);color:var(--acct);border-color:var(--acc);box-shadow:0 0 16px -2px var(--acc)}
.ix-tl li.on b{color:#fff}
.ix-tl li.on .s{-webkit-line-clamp:unset;color:rgba(255,255,255,.82)}
.ix-tl li.on .x{grid-template-rows:1fr}
.ix-tl li:not(.on):hover{background:rgba(255,255,255,.03)}
.ix-det{margin-top:10px}
.ix-det p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 8px}
.ix-det figure{margin:10px 0 4px}
.ix-shot{display:block;width:100%;max-height:260px;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--gline);cursor:zoom-in;background:#0b0b14;transition:transform .2s,border-color .2s}
.ix-shot:hover{transform:scale(1.01);border-color:var(--acc)}
.ix-det figcaption{font-size:11px;color:rgba(255,255,255,.42);margin-top:6px;letter-spacing:.02em}
.ix-tl li.has-shot b:after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-left:8px;vertical-align:middle;opacity:.7}
.lb{z-index:300}

@media (max-width:1280px){
  .cx-body{grid-template-columns:280px minmax(0,1fr) 330px;gap:18px;padding:0 20px 20px}
  .cx-tree{grid-template-columns:minmax(200px,220px) minmax(160px,200px);column-gap:44px}
}
@media (max-width:1024px){
  .cx-top{height:64px;padding:0 16px;gap:12px}
  .cx-x,.cx-pn a{width:40px;height:40px}
  .cx-body{display:block;height:calc(100dvh - 64px);overflow-y:auto;padding:4px 16px 120px;-webkit-overflow-scrolling:touch}
  .cx-root{padding:20px;margin-bottom:24px;overflow:visible}
  .cx-emb{width:68px;height:68px;border-radius:18px}
  .cx-ab{display:block;font-size:14px;line-height:1.55;color:rgba(255,255,255,.7);margin:-6px 0 16px}
  .cx-mid{padding:0}
  .cx-tree{display:block;padding:18px 0 0}
  .cx-lines{display:none}
  .cx-leaves{margin:2px 0 6px 0;padding:2px 0 2px 26px}
  .cx-leaves:after{content:"";position:absolute;left:10px;top:-8px;bottom:20px;width:2px;background:var(--acc);opacity:.6;transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.6,0,.2,1)}
  .cx-leaves.in:after{transform:scaleY(1)}
  .cx-l:before{content:"";position:absolute;left:-16px;top:50%;width:16px;height:2px;margin-top:-1px;background:var(--acc);opacity:.6}
  .cx-info{position:fixed;left:10px;right:10px;bottom:10px;z-index:5;max-height:62vh;padding:20px;background:rgba(14,14,26,.92);opacity:0;transform:translateY(calc(100% + 20px));transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
  .cx.on .cx-info{opacity:0;transform:translateY(calc(100% + 20px))}
  .cx.on .cx-info.show{opacity:1;transform:none}
  .ix-x{display:grid;place-items:center;position:sticky;top:0;float:right;width:32px;height:32px;margin:-6px -4px 0 8px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:13px;z-index:2}
  .ix-out{left:20px;right:20px;top:20px}
}
@media (max-width:640px){.cx-pn span{display:none}.cx-crumb{font-size:14px}}

/* responsive */
@media (max-width:1180px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .svc-big{grid-template-columns:1fr 1fr}.proc{grid-template-columns:1fr 1fr}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .burger{display:flex;margin-left:auto}
  .top-in{gap:16px}
  .hero-v{height:380px}.hero-img{inset:0}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  #ctaTop{display:none}
  .logo{font-size:32px}
  .svc-big,.proc,.stats{grid-template-columns:1fr}
  .hero-v{height:auto;aspect-ratio:4/3}.hero-v .glow{inset:-20px 0}
  .btn{padding:15px 22px;font-size:15px}.btn-ghost{padding:14px 20px}
  .row{gap:10px}.row .btn{flex:1;justify-content:center}
  .cases-h{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.cases-h h2{font-size:40px}
  .allbtn{justify-self:start;order:3}
  .chips{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .cc-b b{font-size:21px}.cc-b span{font-size:14px}
  .svc{padding:18px 20px}
  .cta{padding:28px}
  .sec{padding:40px 0}
}

/* ── Левая карточка проекта v2: обложка, цифры, задачи, состав ── */
.cx-root{padding:0 0 18px;overflow:hidden auto}
.cx-root>*:not(.cr-hero){margin-left:20px;margin-right:20px}
.cr-hero{position:relative;flex:none;height:138px;overflow:hidden;border-radius:23px 23px 0 0;background:linear-gradient(135deg,var(--accd),#07070d)}
.cr-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:crKen 18s ease-in-out infinite alternate}
.cr-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,16,.5) 0,transparent 38%,rgba(12,12,22,.96) 100%),linear-gradient(120deg,color-mix(in srgb,var(--acc) 26%,transparent),transparent 60%)}
.cr-scan{position:absolute;z-index:1;inset:0 auto 0 -40%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-14deg);opacity:0}
.cx.on .cr-scan{animation:crScan 1.5s .35s ease-out 1}
@keyframes crKen{to{transform:scale(1.2) translate(-2%,-3%)}}
@keyframes crScan{0%{left:-40%;opacity:1}100%{left:120%;opacity:0}}
.cr-lvl,.cr-hero .cx-badge,.cr-no{position:absolute;z-index:2}
.cr-lvl{left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px 0 9px;border-radius:999px;font:700 11.5px var(--f-head);letter-spacing:.02em;color:#fff;background:rgba(8,8,16,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.cr-lvl i{display:flex;align-items:flex-end;gap:2px;height:11px}
.cr-lvl u{width:3px;border-radius:2px;background:rgba(255,255,255,.28)}
.cr-lvl u:nth-child(1){height:5px}.cr-lvl u:nth-child(2){height:8px}.cr-lvl u:nth-child(3){height:11px}
.cr-lvl .b1 u:nth-child(-n+1),.cr-lvl .b2 u:nth-child(-n+2),.cr-lvl .b3 u{background:var(--acc);box-shadow:0 0 6px var(--acc)}
.cr-hero .cx-badge{right:12px;top:14px;height:28px;padding:0 11px;background:rgba(8,8,16,.55);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.18)}
.cr-no{right:16px;bottom:10px;font:800 30px/1 var(--f-mono);letter-spacing:-.04em;color:rgba(255,255,255,.16)}
.cr-no small{font-size:12px;font-weight:500;color:rgba(255,255,255,.3);margin-left:2px}
.cr-id{position:relative;z-index:3;display:flex;align-items:flex-end;gap:14px;margin-top:-34px;margin-bottom:12px}
.cr-id .cx-emb{flex:none;width:72px;height:72px;border-radius:20px;margin:0;border:2px solid rgba(12,12,22,.9);outline:1px solid color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 14px 36px -10px var(--acc)}
.cr-id>div:last-child{min-width:0;padding-bottom:2px}
.cx-root .cr-id h2{font:900 27px/1.05 var(--f-head);letter-spacing:-.04em;overflow-wrap:anywhere}
.cr-dom{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font:500 11.5px var(--f-mono);color:rgba(255,255,255,.55);transition:color .2s}
a.cr-dom:hover{color:var(--acc)}
.cr-dom i{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:crPulse 2s infinite}
@keyframes crPulse{70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.cx-root .cx-tl{font:500 13.5px/1.45 var(--f-head);color:rgba(255,255,255,.72);margin-top:0;margin-bottom:12px}
.cx-root .cx-tags{gap:5px;margin-bottom:0}
.cx-root .cx-tags span{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:4px 9px 4px 7px;background:rgba(255,255,255,.045)}
.cx-root .cx-tags svg{color:var(--acc);flex:none}
.cr-sec{display:flex;align-items:center;gap:10px;margin-top:16px;margin-bottom:9px;font:700 10.5px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.cr-sec:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gline),transparent)}
.cr-sec em{order:3;font:500 10.5px var(--f-mono);font-style:normal;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.4)}
.cx-root .cx-kpi{grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:0}
.cx-root .cx-kpi div{grid-column:span 2;padding:10px 10px 9px;border-radius:13px;overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1),border-color .2s;transition-delay:calc(.25s + var(--d)*.08s),calc(.25s + var(--d)*.08s),0s}
.cx.on .cx-root .cx-kpi div{opacity:1;transform:none}
.cx-root .cx-kpi div:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.cx-root .cx-kpi div:first-child{grid-column:span 6;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:12px 14px;background:linear-gradient(120deg,var(--accsoft),rgba(255,255,255,.03) 70%);border-color:color-mix(in srgb,var(--acc) 38%,transparent)}
.cx-root .cx-kpi div:first-child:before{content:"";position:absolute;right:-30px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 40%,transparent),transparent)}
.cx-root .cx-kpi.n2 div:nth-child(2){grid-column:span 6}
.cx-root .cx-kpi.n3 div:nth-child(n+2){grid-column:span 3}
.cx-root .cx-kpi b{font:800 19px/1.1 var(--f-head);padding-right:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-root .cx-kpi div:first-child b{font-size:34px;letter-spacing:-.04em;background:linear-gradient(180deg,#fff,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-root .cx-kpi span:not(.ki){font-size:11px;margin-top:3px}
.cx-root .cx-kpi div:first-child span:not(.ki){font-size:12.5px;margin:0;color:rgba(255,255,255,.75);padding-right:22px}
.cx-root .cx-kpi div:not(:first-child) .ki{display:none}
.cx-root .cx-kpi div:first-child .ki{right:12px;top:50%;margin-top:-8px}
.cr-tasks{list-style:none;display:grid;gap:7px;padding:0}
.cr-tasks li{display:flex;gap:9px;align-items:flex-start;font:500 12.5px/1.4 var(--f-head);color:rgba(255,255,255,.8);opacity:0;transform:translateX(-8px);transition:opacity .45s,transform .45s;transition-delay:calc(.55s + var(--d)*.09s)}
.cx.on .cr-tasks li{opacity:1;transform:none}
.cr-tasks i{flex:none;width:17px;height:17px;margin-top:1px;border-radius:6px;display:grid;place-items:center;color:var(--acct);background:var(--acc);box-shadow:0 4px 12px -4px var(--acc)}
.cr-tasks span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-comp{display:flex;gap:5px;margin-bottom:16px}
.cr-comp button{min-width:0;text-align:left;padding:0;color:#fff;opacity:.72;transition:opacity .2s,transform .2s}
.cr-comp button:hover{opacity:1;transform:translateY(-1px)}
.cr-comp i{display:block;height:5px;border-radius:3px;margin-bottom:7px;background:var(--acc);opacity:calc(1 - var(--d)*.2);transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.7s + var(--d)*.1s)}
.cx.on .cr-comp i{transform:none}
.cr-comp button:hover i{box-shadow:0 0 10px var(--acc);opacity:1}
.cr-comp b{font:800 15px/1 var(--f-head);margin-right:4px}
.cr-comp small{font-size:10.5px;color:rgba(255,255,255,.5)}
.cx-root .cx-btns{flex-direction:row;gap:8px;position:sticky;bottom:0;padding-top:6px}
.cx-root .cx-btns .cbtn{flex:1;height:46px;font-size:14px}
.cx-root .cx-btns.two .ghost{flex:0 0 38%}
@media (max-width:1280px){
  .cx-root>*:not(.cr-hero){margin-left:16px;margin-right:16px}
  .cr-hero{height:120px}
}
@media (max-width:1024px){
  .cx-root{padding:0 0 18px;overflow:hidden}
  .cr-hero{height:150px}
  .cr-id .cx-emb{width:68px;height:68px}
  .cx-root .cx-ab{margin:0 20px 12px;font-size:13.5px}
  .cx-root .cx-btns{position:static}
}
@media (prefers-reduced-motion:reduce){.cr-hero img,.cr-dom i{animation:none}.cx-root .cx-kpi div,.cr-tasks li{opacity:1;transform:none}.cr-comp i{transform:none}}
.cx-root .cx-btns{margin:auto 0 -18px;padding:22px 20px 18px;background:linear-gradient(180deg,transparent,rgba(12,12,22,.94) 34%);z-index:4}
.cr-no{bottom:40px}
.cx-root .cr-id h2.long{font-size:21px}
@media (max-width:1280px){.cx-root .cx-btns{padding:22px 16px 18px}}
@media (max-width:1024px){.cx-root .cx-ab{margin:0 16px 12px}.cx-root .cx-btns{background:none;padding-top:4px}}
.cx-root{padding-bottom:0}
.cx-root .cx-btns{margin-bottom:0;background:linear-gradient(180deg,transparent,rgb(13,13,24) 30%)}
@media (max-width:1024px){.cx-root{padding-bottom:0}.cx-root .cx-btns{background:none;padding-bottom:18px}}

/* ── Тёмная тема главной (оверлей кейса тёмный всегда) ── */
.theme-btn{flex:none;position:relative;width:44px;height:44px;border-radius:12px;border:1.5px solid #dedee8;display:grid;place-items:center;color:var(--ink);overflow:hidden;transition:border-color .2s,background .2s,transform .15s}
.theme-btn:hover{border-color:var(--v);transform:translateY(-1px)}
.theme-btn svg{grid-area:1/1;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.theme-btn .i-sun{transform:rotate(-90deg) scale(.4);opacity:0}
html[data-theme="dark"] .theme-btn .i-sun{transform:none;opacity:1}
html[data-theme="dark"] .theme-btn .i-moon{transform:rotate(90deg) scale(.4);opacity:0}
.top-in .theme-btn{margin-left:auto}.top-in .theme-btn+.btn{margin-left:-24px}
html.theme-anim,html.theme-anim *{transition:background-color .4s,border-color .4s,color .4s,box-shadow .4s!important}
html[data-theme="dark"]{color-scheme:dark;
  --bg:#08080e; --bg2:#151520; --card:#11111a; --ink:#f4f4f9; --ink2:#b6b6c8; --mute:#8d8da2;
  --line:#23232f; --v:#8571ff; --v2:#b08cff; --vsoft:#1c1842; --dark:#f4f4f9;
  --sh:0 1px 2px rgba(0,0,0,.4),0 14px 34px -18px rgba(0,0,0,.8)}
html[data-theme="dark"] body{background:radial-gradient(900px 520px at 78% -8%,rgba(110,80,255,.16),transparent 62%),var(--bg);background-attachment:fixed}
html[data-theme="dark"] .top{background:rgba(8,8,14,.82);backdrop-filter:blur(16px)}
html[data-theme="dark"] .theme-btn{border-color:#2c2c3c}
html[data-theme="dark"] .btn-dark{background:#f4f4f9;color:#0b0b12}html[data-theme="dark"] .btn-dark:hover{background:#fff}
html[data-theme="dark"] .btn-v{background:#6a52ff;box-shadow:0 12px 34px -10px rgba(120,95,255,.75)}html[data-theme="dark"] .btn-v:hover{background:#7a64ff}
html[data-theme="dark"] .btn-ghost{background:rgba(255,255,255,.04);border-color:#2f2f40}html[data-theme="dark"] .btn-ghost:hover{border-color:#f4f4f9}
html[data-theme="dark"] .eyebrow{color:#a3a3b8}
html[data-theme="dark"] .pill{border-color:#4a3cb8;color:#b9adff;background:rgba(120,95,255,.1)}
html[data-theme="dark"] .faces a{background:#23232f}
html[data-theme="dark"] .hero-img{box-shadow:0 40px 90px -30px rgba(110,80,255,.6),0 0 0 1px rgba(255,255,255,.07)}
html[data-theme="dark"] .svc,html[data-theme="dark"] .stat,html[data-theme="dark"] .pc,html[data-theme="dark"] .tech-cloud span{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .svc span{color:#9c9cb2}
html[data-theme="dark"] .chip{color:#d6d6e4}html[data-theme="dark"] .chip:hover{border-color:#4a3cb8}
html[data-theme="dark"] .chip.on{background:#6a52ff;border-color:#6a52ff;color:#fff}
html[data-theme="dark"] .allbtn:hover{color:#b9adff}
html[data-theme="dark"] .ccard{box-shadow:0 0 0 1px rgba(255,255,255,.07)}
html[data-theme="dark"] .empty{border-color:#2f2f40}
html[data-theme="dark"] .cta{background:linear-gradient(135deg,#1a1540,#0f0f19);border-color:#2b2550}
html[data-theme="dark"] .burger{border-color:#2c2c3c}
@media (max-width:960px){
  html[data-theme="dark"] .nav{background:#0c0c14}
  .top-in .theme-btn{margin-left:auto}.top-in .theme-btn+.btn{margin-left:0}.top-in .theme-btn~.burger{margin-left:0}
}

/* ── Обучение в кейсе ── */
.cx-body{transition:opacity .25s,transform .72s cubic-bezier(.65,0,.35,1)}
.cx-help{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid var(--gline);backdrop-filter:blur(12px);color:#fff;font:700 16px var(--f-head);margin-right:6px;transition:background .2s,transform .2s}
.cx-help:hover{background:var(--acc);color:var(--acct);transform:scale(1.06)}
.tr{position:fixed;inset:0;z-index:260;color:#fff;font-family:var(--f-head);--e:cubic-bezier(.65,0,.35,1);--pop:cubic-bezier(.16,1,.3,1)}
/* общее затемнение — только под приветствием; на шагах темнит сама «дырка» */
.tr-dim{position:fixed;inset:0;background:rgba(4,4,10,.8);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .55s ease;pointer-events:none}
.tr.welcome.in .tr-dim{opacity:1}
.tr-hole{position:fixed;left:50%;top:50%;width:0;height:0;opacity:0;border-radius:22px;box-shadow:0 0 0 200vmax rgba(4,4,10,.8),0 0 0 2px var(--acc),0 0 36px 2px color-mix(in srgb,var(--acc) 55%,transparent);transition:left .72s var(--e),top .72s var(--e),width .72s var(--e),height .72s var(--e),opacity .5s ease;pointer-events:none}
.tr.out .tr-hole{opacity:0!important;transition:opacity .45s ease}
.tr-hole:after{content:"";position:absolute;inset:-7px;border-radius:28px;border:2px solid var(--acc);opacity:0;animation:trRing 2.2s ease-out infinite}
@keyframes trRing{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.03)}}
/* приветствие */
.tr-wel{position:fixed;left:50%;top:50%;width:min(440px,calc(100vw - 32px));padding:34px 30px 26px;text-align:center;border-radius:28px;background:linear-gradient(180deg,rgba(28,28,46,.97),rgba(13,13,24,.98));border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 120px -30px #000,0 0 90px -34px var(--acc);transform:translate(-50%,-50%) scale(.96);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,transform .32s ease,visibility 0s .32s}
.tr.welcome.in .tr-wel{visibility:visible;pointer-events:auto;opacity:1;transform:translate(-50%,-50%);transition:none;animation:trCard .8s var(--pop) .12s both}
@keyframes trCard{0%{opacity:0;transform:translate(-50%,-43%) scale(.84);filter:blur(14px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
.tr-wel:before{content:"";position:absolute;inset:0;border-radius:28px;background:radial-gradient(320px 170px at 50% 0,color-mix(in srgb,var(--acc) 30%,transparent),transparent 70%);pointer-events:none}
.tr-wel:after{content:"";position:absolute;inset:-1px;border-radius:29px;padding:1px;background:linear-gradient(140deg,var(--acc),transparent 38%,transparent 62%,color-mix(in srgb,var(--acc) 70%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.65;pointer-events:none}
.tr.welcome.in .tr-wel>*{animation:trUp .6s var(--pop) both}
.tr.welcome.in .tr-emb{animation:trEmb .7s var(--pop) .3s both}
.tr.welcome.in .tr-wel small{animation-delay:.42s}.tr.welcome.in .tr-wel h3{animation-delay:.5s}.tr.welcome.in .tr-wel p{animation-delay:.58s}.tr.welcome.in .tr-wel .tr-row{animation-delay:.68s}
@keyframes trUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes trEmb{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.tr-emb{position:relative;width:84px;height:84px;margin:0 auto 18px;border-radius:24px;overflow:hidden;background:#07070d;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 16px 44px -10px var(--acc)}
.tr-emb img{width:100%;height:100%;object-fit:cover;transform:scale(1.5)}
.tr-wel small{position:relative;display:block;font:700 11.5px var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.tr-wel h3{position:relative;font:900 30px/1.1 var(--f-head);letter-spacing:-.035em;margin:8px 0 12px}
.tr-wel p{position:relative;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);margin-bottom:24px}
.tr-row{position:relative;display:flex;gap:10px;align-items:center}
.tr-next{flex:1;height:48px;border-radius:14px;font:700 15px var(--f-head);color:var(--acct);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 86%,#fff),var(--acc));box-shadow:0 14px 34px -12px var(--acc);transition:transform .15s}
.tr-next:hover{transform:translateY(-1px)}.tr-next span{display:inline-block;transition:transform .2s}.tr-next:hover span{transform:translateX(3px)}
.tr-skip{height:48px;padding:0 18px;border-radius:14px;font:600 14px var(--f-head);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.16);transition:.2s}
.tr-skip:hover{color:#fff;border-color:rgba(255,255,255,.4)}
/* подсказка шага */
.tr-tip{position:fixed;left:0;top:0;width:min(340px,calc(100vw - 24px));padding:16px 18px;border-radius:20px;background:rgba(18,18,30,.97);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px -24px #000,0 0 50px -24px var(--acc);opacity:0;transform:translate(var(--from,0,12px)) scale(.96);pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.tr-tip.in{opacity:1;transform:none;pointer-events:auto;transition:opacity .34s ease,transform .5s var(--pop)}
.tr.out .tr-tip,.tr.out .tr-tap{opacity:0}
.tr-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tr-n{font:500 11.5px var(--f-mono);color:var(--acc)}
.tr-dots{display:flex;gap:4px;flex:1}
.tr-dots i{height:4px;flex:1;max-width:26px;border-radius:2px;background:rgba(255,255,255,.14)}
.tr-dots i.was{background:color-mix(in srgb,var(--acc) 45%,transparent)}.tr-dots i.on{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.tr-close{width:26px;height:26px;border-radius:50%;font-size:11px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
.tr-close:hover{color:#fff;background:rgba(255,255,255,.18)}
.tr-tip b{display:block;font:800 18px/1.2 var(--f-head);letter-spacing:-.02em;margin-bottom:6px}
.tr-tip p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.76);margin-bottom:14px}
.tr-tip .tr-next,.tr-tip .tr-skip{height:42px;font-size:14px;border-radius:12px}
.tr-tap{position:fixed;left:0;top:0;width:34px;height:34px;margin:-4px 0 0 -8px;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));transition:opacity .2s}
.tr-tap.in{opacity:1;transition:opacity .4s .25s;animation:trTap 1.6s ease-in-out .3s infinite}
.tr-tap:before{content:"";position:absolute;left:1px;top:-9px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;opacity:0;animation:trPing 1.6s ease-out .3s infinite}
@keyframes trTap{0%,100%{transform:translate(8px,10px)}45%,60%{transform:none}}
@keyframes trPing{0%,45%{opacity:0;transform:scale(.4)}55%{opacity:.9}100%{opacity:0;transform:scale(1.5)}}
@media (max-width:1024px){.cx-help{width:40px;height:40px}.tr-hole{border-radius:18px}.tr-wel h3{font-size:25px}}
@media (prefers-reduced-motion:reduce){.tr-hole,.tr-tip,.tr-wel,.cx-body,.tr-dim{transition:none}.tr.welcome.in .tr-wel,.tr.welcome.in .tr-wel>*,.tr-tap.in,.tr-hole:after,.tr-tap:before{animation:none}}

/* ── Без правой панели: раздел → пункт → фото на ветке, по клику — подробность ── */
.cx-body{grid-template-columns:310px minmax(0,1fr)}
.cx-tree{grid-template-columns:minmax(220px,270px) minmax(200px,250px) minmax(280px,430px);column-gap:clamp(36px,4.2vw,72px);justify-content:center}
.cx-mh p{max-width:600px}
.ln.p{opacity:1;stroke-width:2.2;stroke-dashoffset:1}
.ln.p.go{stroke-dashoffset:0;transition:stroke-dashoffset .45s cubic-bezier(.6,0,.2,1)}
.cx-l{cursor:pointer}
.cx-shot{position:relative;align-self:center;display:block;width:100%;padding:0;text-align:left;color:#fff;border-radius:22px;overflow:hidden;background:rgba(12,12,22,.62);border:1px solid var(--gline);backdrop-filter:blur(16px);cursor:pointer;opacity:0;transform:translateX(-14px) scale(.97);pointer-events:none;transition:border-color .2s,box-shadow .25s}
.cx-shot.in{opacity:1;transform:none;pointer-events:auto;transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .25s}
.cx-shot:hover{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 24px 60px -24px var(--acc)}
.sh-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#07070d}
.sh-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cx-shot:hover .sh-img img{transform:scale(1.05)}
.sh-img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,12,22,.92))}
.sh-img:before{content:"";position:absolute;z-index:1;right:12px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(8,8,16,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M15 4h5v5M9 20H4v-5M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E") center/16px no-repeat;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);transition:background-color .2s,transform .2s}
.cx-shot:hover .sh-img:before{background-color:var(--acc);transform:scale(1.08)}
.sh-b{display:block;padding:14px 18px 16px}
.sh-b small{display:block;font:600 10.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.sh-b b{display:block;font:800 19px/1.2 var(--f-head);letter-spacing:-.02em}
.sh-b em{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-style:normal;font-size:13px;line-height:1.5;color:rgba(255,255,255,.66);margin-top:6px}
.sh-b i{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font:700 13px var(--f-head);font-style:normal;color:var(--acc)}
.sh-b u{text-decoration:none;transition:transform .2s}.cx-shot:hover .sh-b u{transform:translateX(4px)}
/* подробность пункта */
.dx{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;visibility:hidden;pointer-events:none}
.dx.show{visibility:visible;pointer-events:auto}
.dx-bg{position:absolute;inset:0;background:rgba(4,4,10,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .35s ease}
.dx.show .dx-bg{opacity:1}
.dx-card{position:relative;display:flex;flex-direction:column;width:min(1180px,100%);max-height:min(88vh,820px);border-radius:28px;background:linear-gradient(180deg,rgba(24,24,40,.97),rgba(12,12,22,.98));border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 120px -30px #000,0 0 90px -40px var(--acc);opacity:0;transform:translateY(22px) scale(.96);transition:opacity .25s ease,transform .3s ease}
.dx.show .dx-card{opacity:1;transform:none;transition:opacity .35s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.dx-x{position:absolute;z-index:3;right:14px;top:14px;width:38px;height:38px;border-radius:50%;color:#fff;font-size:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);transition:.2s}
.dx-x:hover{background:var(--acc);color:var(--acct)}
.dx-in{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px}
.dx.swap .dx-in{animation:dxIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes dxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dx-txt{min-height:0;overflow:auto;padding:30px 20px 24px 32px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.dx-txt .ix-hd{padding-right:10px}
.dx-txt .ix-hd b{font-size:26px}
.dx-s{font:600 16px/1.45 var(--f-head);color:rgba(255,255,255,.9);margin-bottom:14px}
.dx-txt .dx-more ul{list-style:none;margin:0 0 12px}
.dx-txt .dx-more li{position:relative;padding-left:16px;margin:7px 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82)}
.dx-txt .dx-more li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:2px;background:var(--acc)}
.dx-txt .dx-more p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.7);margin-bottom:12px}
.dx-txt .ix-det{margin-top:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.dx-txt .ix-det p{font-size:14.5px;line-height:1.65;margin-bottom:10px}
.dx-txt h5{font:700 14px var(--f-head);margin:16px 0 8px}
.dx-fig{min-height:0;margin:0;padding:24px 24px 20px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.dx-fig .ix-shot{width:auto;max-width:100%;max-height:calc(min(88vh,820px) - 150px);object-fit:contain;border-radius:16px}
.dx-fig figcaption{font-size:11.5px;color:rgba(255,255,255,.45)}
.dx-in>.dx-txt:only-child{grid-column:1/-1}
.dx-nav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px 16px;border-top:1px solid rgba(255,255,255,.09)}
.dx[data-mode="about"] .dx-nav{display:none}
.dx-nav span{font:500 12px var(--f-mono);color:rgba(255,255,255,.5)}
.dx-nav button{height:42px;padding:0 18px;border-radius:12px;font:600 14px var(--f-head);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:.2s}
.dx-nav button:hover:not(:disabled){border-color:var(--acc);background:var(--accsoft)}
.dx-nav button:disabled{opacity:.3;cursor:default}
@media (max-width:1280px){
  .cx-body{grid-template-columns:280px minmax(0,1fr)}
  .cx-tree{grid-template-columns:minmax(190px,220px) minmax(160px,200px) minmax(230px,330px);column-gap:36px}
}
@media (max-width:1024px){
  .cx-body{display:block}
  .cx-tree{display:block}
  .cx-shot{display:none;margin:2px 0 10px;border-radius:18px}
  .cx-shot.in{display:block;animation:dxIn .4s cubic-bezier(.16,1,.3,1)}
  .sh-img{aspect-ratio:16/9}
  .sh-b{padding:12px 14px 14px}.sh-b b{font-size:17px}
  .dx{padding:0;place-items:end stretch}
  .dx-card{width:100%;max-height:94dvh;border-radius:24px 24px 0 0;transform:translateY(40px)}
  .dx-in{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
  .dx-txt{overflow:visible;padding:22px 18px 6px}
  .dx-txt .ix-hd{padding-right:44px}.dx-txt .ix-hd b{font-size:21px}
  .dx-fig{padding:8px 18px 18px}
  .dx-fig .ix-shot{max-height:none;width:100%}
  .dx-nav{padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.cx-shot,.dx-card,.dx-bg{transition:none}.dx.swap .dx-in,.cx-shot.in{animation:none}}

/* ── Ветка крупнее и прижата влево ── */
@media (min-width:1025px){
  .cx-tree{justify-content:start;grid-template-columns:minmax(260px,330px) minmax(240px,300px) minmax(320px,520px);column-gap:clamp(40px,4.4vw,84px);padding-left:4px}
  .cx-groups{gap:16px;padding-left:26px}
  .cx-groups:before{left:7px;top:34px;bottom:34px}
  .cx-g{padding:16px 16px 16px 15px;border-radius:19px;gap:15px}
  .cx-g:before{left:-25px;width:12px;height:12px;margin-top:-6px}
  .cx-g .ic{width:48px;height:48px;border-radius:14px}
  .cx-g .ic svg{width:22px;height:22px}
  .cx-g b{font-size:17.5px}
  .cx-g small{font-size:13.5px;margin-top:3px}
  .cx-leaves{gap:11px}
  .cx-l{padding:9px 14px 9px 9px;gap:12px}
  .cx-l .n{width:36px;height:36px;font-size:12.5px}
  .cx-l .n svg{width:17px;height:17px}
  .cx-l b{font-size:15.5px}
  .sh-b{padding:17px 22px 20px}
  .sh-b small{font-size:11.5px}
  .sh-b b{font-size:22px}
  .sh-b em{font-size:14.5px}
  .sh-b i{font-size:14.5px;margin-top:14px}
  .ln{stroke-width:1.8}.ln.on{stroke-width:2.8}.ln.p{stroke-width:2.6}
}
@media (min-width:1025px) and (max-width:1280px){
  .cx-tree{grid-template-columns:minmax(215px,250px) minmax(190px,230px) minmax(240px,340px);column-gap:34px}
  .cx-g{padding:13px}.cx-g .ic{width:42px;height:42px}.cx-g b{font-size:16px}
  .cx-l b{font-size:14.5px}.cx-l .n{width:32px;height:32px}
  .sh-b b{font-size:19px}
}
@media (min-width:1025px) and (max-height:800px){
  .cx-groups{gap:11px}.cx-g{padding:11px 13px}.cx-g .ic{width:40px;height:40px}
  .cx-leaves{gap:7px}.cx-l{padding:6px 12px 6px 7px}.cx-l .n{width:30px;height:30px}
  .sh-img{aspect-ratio:16/8.2}
}
@media (min-width:1600px) and (min-height:860px){
  .cx-tree{grid-template-columns:minmax(300px,380px) minmax(280px,340px) minmax(380px,620px);column-gap:clamp(56px,4.6vw,100px)}
  .cx-groups{gap:18px}
  .cx-g{padding:19px 18px}.cx-g .ic{width:54px;height:54px;border-radius:16px}.cx-g .ic svg{width:25px;height:25px}
  .cx-g b{font-size:19.5px}.cx-g small{font-size:14.5px}
  .cx-leaves{gap:13px}
  .cx-l{padding:11px 16px 11px 11px}.cx-l .n{width:40px;height:40px;font-size:13.5px}.cx-l b{font-size:17px}
  .sh-b b{font-size:25px}.sh-b em{font-size:15.5px}
}

/* видео в подробности и значок «play» на карточке ветки */
.dx-video{display:block;max-width:100%;max-height:calc(min(88vh,820px) - 150px);border-radius:16px;border:1px solid var(--gline);background:#000}
.sh-img.vid:before{width:54px;height:54px;right:auto;top:50%;left:50%;margin:-27px 0 0 -27px;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50%/24px no-repeat;border:0;box-shadow:0 10px 30px -6px var(--acc)}
.cx-shot:hover .sh-img.vid:before{transform:scale(1.1)}
@media (max-width:1024px){.dx-video{max-height:none;width:100%}}

/* длинные ветки (админка на 12–18 разделов): колонка пунктов прокручивается, линии идут только к видимым */
@media (min-width:1025px){
  .cx-leaves{max-height:calc(100vh - 250px);overflow-y:auto;overflow-x:hidden;padding:6px 8px 6px 2px;margin:-6px -8px -6px -2px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--acc) 50%,transparent) transparent;overscroll-behavior:contain}
  .cx-leaves.long{-webkit-mask:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);padding-top:18px;padding-bottom:18px}
  .cx-leaves.long .cx-l{padding-top:7px;padding-bottom:7px}
  .cx-groups{gap:13px}
}
@media (min-width:1025px) and (max-height:800px){.cx-leaves{max-height:calc(100vh - 215px)}}

/* подробность с широким экраном: картинка/видео сверху во всю ширину, текст под ней в две колонки */
@media (min-width:1025px){
  .dx-card.wide{width:min(1240px,100%);max-height:min(94vh,980px)}
  .dx-card.wide .dx-in{display:flex;flex-direction:column;overflow:auto;gap:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
  .dx-card.wide .dx-fig{order:-1;flex:none;padding:22px 64px 6px 22px}
  .dx-card.wide .dx-fig .ix-shot,.dx-card.wide .dx-video{width:100%;max-height:min(58vh,640px);object-fit:contain;object-position:center top}
  .dx-card.wide .dx-txt{overflow:visible;padding:16px 28px 22px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:34px;align-items:start}
  .dx-card.wide .dx-txt>.ix-hd{grid-column:1;grid-row:1;margin-bottom:8px}
  .dx-card.wide .dx-txt>.dx-s{grid-column:1;grid-row:2}
  .dx-card.wide .dx-txt>.ix-stack,.dx-card.wide .dx-txt>.dx-more{grid-column:1}
  .dx-card.wide .dx-txt>.ix-det{grid-column:2;grid-row:1 / span 6;border-top:0;padding-top:4px;margin-top:0}
}
.cr-comp button{overflow:hidden}.cr-comp small{white-space:nowrap}

/* ── Шапка: шрифт Unbounded ── */
.top{--f-nav:"Unbounded",var(--f-head)}
.top .logo{font-family:var(--f-nav);font-weight:800;font-size:30px;letter-spacing:-.06em;padding-right:.06em;background:linear-gradient(120deg,var(--ink) 30%,var(--v) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav a{position:relative;font:500 13px/1 var(--f-nav);letter-spacing:.06em;text-transform:uppercase;padding:8px 0}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--v),var(--v2));transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav a:hover:after,.nav a.on:after{transform:scaleX(1)}
.top .btn-sm{font:600 12.5px var(--f-nav);letter-spacing:.04em;text-transform:uppercase}
@media (max-width:960px){.nav a{font-size:14px;padding:4px 0}.top .logo{font-size:28px}}

/* приписка под кейсами */
.cmore{display:flex;align-items:center;gap:20px;margin-top:20px;padding:22px 26px;border-radius:18px;border:1px dashed color-mix(in srgb,var(--v) 45%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,var(--v) 9%,transparent),transparent 70%)}
.cmore-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--v);background:color-mix(in srgb,var(--v) 14%,transparent)}
.cmore div{flex:1;min-width:0}
.cmore b{display:block;font:800 18px/1.25 var(--f-head);letter-spacing:-.01em;margin-bottom:4px}
.cmore p{color:var(--ink2);font-size:14.5px;line-height:1.5}
.cmore .btn{flex:none}
@media (max-width:720px){.cmore{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}.cmore .btn{width:100%;justify-content:center}}

/* заставка: без анимации blur (тяжело для видео) — только прозрачность и лёгкий масштаб на GPU */
.cx-load{filter:none!important;transform:scale(.94);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.cx-load.show{transform:none}
.cx-load img{transition:opacity .3s ease}