/* ===== страницы кейсов ===== */
.cp{padding:calc(var(--u)*6) var(--side) calc(var(--u)*4);display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.cph{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*1.2);max-width:calc(var(--u)*70)}
.cpbc{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.5);align-items:center;font-size:calc(var(--u)*.85*var(--k));font-weight:600;color:var(--mut)}
.cpbc a{color:var(--mut);transition:color .2s}.cpbc a:hover{color:var(--fg)}
.cpbc i{font-style:normal;opacity:.6}
.cph h1{font-size:calc(var(--u)*4*var(--k));font-weight:600;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.cph h1 b{font-weight:600;color:var(--mut)}
html[lang^=zh] .cph h1{letter-spacing:.02em;line-height:1.2}
.cph p{font-size:calc(var(--u)*1.2*var(--k));line-height:1.5;color:var(--mut);max-width:calc(var(--u)*56);text-wrap:pretty}
/* сетка карточек */
.cpg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*1.6)}
.cpc{display:flex;flex-direction:column;border-radius:calc(var(--u)*1.8);overflow:hidden;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .4s}
.cpc:hover{transform:translateY(calc(var(--u)*-.3));box-shadow:inset 0 0 0 1px var(--line),0 calc(var(--u)*1.2) calc(var(--u)*3) rgba(11,23,54,.12)}
.cpv{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b1736;max-width:100%}
.cpc .cpv{border-radius:0}

.cpt{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*.9);padding:calc(var(--u)*1.6) calc(var(--u)*1.8) calc(var(--u)*1.8)}
.cpt h3{font-size:calc(var(--u)*1.7*var(--k));font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.cpt p{font-size:calc(var(--u)*.98*var(--k));line-height:1.55;color:var(--mut)}
.cpc .cmore{margin-top:calc(var(--u)*.4)}
.cpc:hover .cmore .ab::after{transform:scale(30)}
.cpc:hover .cmore .ab svg{transform:none}
/* ниши */
.cpn{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(var(--u)*3);align-items:start;padding:calc(var(--u)*2.4);border-radius:calc(var(--u)*1.8);box-shadow:inset 0 0 0 1px var(--line)}
.cpn h2{font-size:calc(var(--u)*2*var(--k));font-weight:600;letter-spacing:-.03em;line-height:1.1}
.cpn p{margin-top:calc(var(--u)*.8);font-size:calc(var(--u)*.98*var(--k));line-height:1.5;color:var(--mut)}
.cpn .cnis{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.45)}
.cpn .cnis span{display:inline-flex;align-items:center;gap:calc(var(--u)*.5);padding:calc(var(--u)*.3) calc(var(--u)*.9) calc(var(--u)*.3) calc(var(--u)*.3);border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font-size:calc(var(--u)*.9*var(--k));font-weight:600;white-space:nowrap}
.cpn .cnis span.more{padding-left:calc(var(--u)*.9);color:var(--mut)}
.cpn .cnis .ni{width:calc(var(--u)*1.8);height:calc(var(--u)*1.8);border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--bg)}
.cpn .cnis .ni svg{width:56%;height:56%}

@media (max-aspect-ratio:5/4){
 .cp{padding-top:calc(var(--u)*9);gap:calc(var(--u)*4)}
 .cph{max-width:none;gap:calc(var(--u)*1.6)}
 .cpbc{font-size:calc(var(--u)*1.25*var(--k))}
 .cph h1{font-size:calc(var(--u)*4.4*var(--k));overflow-wrap:break-word;hyphens:auto}
 .cph p{font-size:calc(var(--u)*1.55*var(--k))}
 .cpg{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*2.4)}
 .cpc{border-radius:calc(var(--u)*2.4)}
 .cpt{padding:calc(var(--u)*2.2) calc(var(--u)*2.2) calc(var(--u)*2.6);gap:calc(var(--u)*1.2)}
 .cpt h3{font-size:calc(var(--u)*2.8*var(--k))}
 .cpt p{font-size:calc(var(--u)*1.5*var(--k))}
 .cmeta span,.ctg span{font-size:calc(var(--u)*1.2*var(--k))}
 .cmeta i,.ctg img{width:calc(var(--u)*2.5);height:calc(var(--u)*2.5)}
 .cmore{font-size:calc(var(--u)*1.45*var(--k));padding-left:calc(var(--u)*1.8)}
 .cmore .ab{width:calc(var(--u)*3.8);height:calc(var(--u)*3.8)}
 .cpn{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*2);padding:calc(var(--u)*2.6);border-radius:calc(var(--u)*2.4)}
 .cpn h2{font-size:calc(var(--u)*3*var(--k))}
 .cpn p{font-size:calc(var(--u)*1.5*var(--k))}
 .cpn .cnis span{font-size:calc(var(--u)*1.3*var(--k))}
 .cpn .cnis .ni{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6)}
 
}
@media (prefers-reduced-motion:reduce){.cpc{transition:none}}
.cpc:hover .cmore{color:#fff}
.cpc .cpt{flex:1}.cpc .cmore{margin-top:auto}
@media (max-aspect-ratio:5/4){.cpc .cmore,.cvn .cmore,.cvn-split .cmore{align-self:stretch!important;width:100%;justify-content:space-between;margin-top:calc(var(--u)*1.6)!important}}
/* кнопки карточек в ряд/карусели — на одном уровне, прижаты к низу */
@media (max-aspect-ratio:5/4){.cpc .cmore{margin-top:auto!important}.cpc .cpt>p{margin-bottom:calc(var(--u)*1.6)}}



.cva{display:flex;flex-direction:column;gap:calc(var(--u)*5)}

/* ---------- A «Кино» ---------- */
.cva-hero{position:relative;display:flex;flex-direction:column;gap:calc(var(--u)*1.4);padding:calc(var(--u)*3) calc(var(--u)*3.4) 0;border-radius:calc(var(--u)*2.4);overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--ac) 55%,#07090f) 0%,#07090f 58%),#07090f}
.cva-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--u)*1)}
.cva-hero .cpbc,.cva-hero .cpbc a{color:rgba(255,255,255,.6)}.cva-hero .cpbc a:hover{color:#fff}
.cva-hero .cmeta span{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff}
.cva-hero .cmeta i{background:#fff;color:#07090f}
.cva-hero h1{margin-top:calc(var(--u)*3);font-size:calc(var(--u)*7.2*var(--k));font-weight:600;letter-spacing:-.055em;line-height:.94;text-wrap:balance;max-width:16ch}
html[lang^=zh] .cva-hero h1{letter-spacing:0;line-height:1.1}
.cva-hero>p{font-size:calc(var(--u)*1.25*var(--k));line-height:1.5;color:rgba(255,255,255,.72);max-width:calc(var(--u)*52)}
.cva-vis{position:relative;aspect-ratio:16/7.5;margin-top:calc(var(--u)*2.4);border-radius:calc(var(--u)*1.6) calc(var(--u)*1.6) 0 0;overflow:hidden;box-shadow:0 calc(var(--u)*-1) calc(var(--u)*4) rgba(0,0,0,.4)}

.cva-stack{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6)}
.cva-stack span{font-size:calc(var(--u)*1.05*var(--k));padding:calc(var(--u)*.4) calc(var(--u)*1.1) calc(var(--u)*.4) calc(var(--u)*.4)}
.cva-stack img{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4)}

@media (max-aspect-ratio:5/4){
 
 .cv2 .cva-vis>.vis{position:relative;inset:auto;aspect-ratio:4/3.2}
 
}

@keyframes cvmq{to{transform:translateX(-50%)}}

.cvn-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);border-radius:calc(var(--u)*2.4);overflow:hidden;background:var(--ac);color:#fff;min-height:calc(var(--u)*28)}
.cvn-tx{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:calc(var(--u)*1.2);padding:calc(var(--u)*3.2)}

.cvn-tx b{font-size:calc(var(--u)*3.6*var(--k));font-weight:600;letter-spacing:-.04em;line-height:1.02}
.cvn-tx p{font-size:calc(var(--u)*.95*var(--k));line-height:1.5;opacity:.85}
.cvn-tx .cmore{background:#fff;color:#07090f}.cvn-tx .cmore .ab::after{background:#07090f}
.cvn-split:hover .cmore .ab::after{transform:scale(30)}.cvn-split:hover .cmore{color:#fff}.cvn-split:hover .cmore .ab svg{transform:none}
.cvn-im{position:relative;min-height:calc(var(--u)*20)}

@media (max-aspect-ratio:5/4){
 
 .cvn-split{grid-template-columns:minmax(0,1fr);border-radius:calc(var(--u)*2.6)}
 .cvn-im{order:-1;min-height:calc(var(--u)*30)}
 .cvn-tx{padding:calc(var(--u)*2.6)}.cvn-tx b{font-size:calc(var(--u)*3.6*var(--k))}.cvn-tx p{font-size:calc(var(--u)*1.35*var(--k))}
 
}

/* ---- бейдж в бейдже ---- */
.bib{display:inline-flex;align-items:center;align-self:flex-start;gap:calc(var(--u)*.6);padding:calc(var(--u)*.3) calc(var(--u)*1.1) calc(var(--u)*.3) calc(var(--u)*.3);border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font-size:calc(var(--u)*.85*var(--k));font-weight:700;letter-spacing:.02em;line-height:1.2;color:var(--fg)}
.bib i{flex:none;display:grid;place-items:center;width:calc(var(--u)*2);height:calc(var(--u)*2);border-radius:50%;background:var(--ac);color:#fff;box-shadow:0 1px 3px color-mix(in srgb,var(--ac) 40%,transparent)}
.bib i svg{width:55%;height:55%}
.bib.lt{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:#fff}.bib.lt i{background:#fff;color:var(--ac)}

/* следующий кейс: бейдж */
.cvn-tx .bib{margin-bottom:calc(var(--u)*.4)}
/* ---- J ---- */
.cvj{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cvj-row{display:grid;grid-template-columns:calc(var(--u)*24) minmax(0,1fr);gap:calc(var(--u)*3);padding:calc(var(--u)*3) 0;border-bottom:1px solid var(--line);align-items:start}
.cvj-lb{font-size:calc(var(--u)*3.4*var(--k));font-weight:600;letter-spacing:-.045em;line-height:1;color:color-mix(in srgb,var(--fg) 46%,transparent)}
.cvj-txt{font-size:calc(var(--u)*2.2*var(--k));line-height:1.28;font-weight:500;letter-spacing:-.025em;text-wrap:balance;max-width:36ch}

@media (max-aspect-ratio:5/4){
 .bib{font-size:calc(var(--u)*1.15*var(--k));padding:calc(var(--u)*.45) calc(var(--u)*1.5) calc(var(--u)*.45) calc(var(--u)*.45);gap:calc(var(--u)*.8)}
 .bib i{width:calc(var(--u)*2.9);height:calc(var(--u)*2.9)}
 
 .cvj-row{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*1.6);padding:calc(var(--u)*2.6) 0}
 .cvj-lb{font-size:calc(var(--u)*4*var(--k))}
 .cvj-txt{font-size:calc(var(--u)*2.3*var(--k))}
 
}

.cp.cpv-j2{display:block}
.cvj-fill .w{color:color-mix(in srgb,var(--fg) 22%,transparent);transition:color .35s ease}
.cvj-fill .w.on{color:var(--fg)}
.cvj-row.rv .cvj-fill{opacity:1}
.cvz-j2 .cva-hero>p{margin-top:calc(var(--u)*1.2)}
.cvj-num{font-size:calc(var(--u)*2*var(--k))!important;letter-spacing:-.03em!important;margin-top:calc(var(--u)*.1)!important;font-variant-numeric:tabular-nums}
.cvj-feats+.cvj-sum{margin-top:calc(var(--u)*1.2)}
.cvj-ct .cva-stack{gap:calc(var(--u)*.6)}
.cvj.nb{border-top:0}
.cvj.nb .cvj-row:last-child{border-bottom:0}
h2.cvj-lb{font-size:calc(var(--u)*3.4*var(--k));font-weight:600;letter-spacing:-.045em;line-height:1;margin:0}
.cvj-ct{display:flex;flex-direction:column;gap:calc(var(--u)*1.2)}
.cvj-ct .cvj-txt+.cvj-txt{font-size:calc(var(--u)*1.35*var(--k));line-height:1.55;font-weight:400;letter-spacing:0;color:var(--mut);max-width:58ch}
.cvj-txt.sm{font-size:calc(var(--u)*1.35*var(--k));line-height:1.55;font-weight:400;letter-spacing:0;color:var(--mut);max-width:58ch}
.cvj-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*2.4) calc(var(--u)*3)}
.cvj-f{display:flex;align-items:flex-start;gap:calc(var(--u)*1.3)}
.cvj-fi{flex:none;display:grid;place-items:center;width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);border-radius:50%;background:var(--ac);color:#fff;box-shadow:0 0 0 calc(var(--u)*.35) color-mix(in srgb,var(--ac) 18%,transparent)}
.cvj-fi svg{width:48%;height:48%}
.cvj-ln{display:none}
.cvj-f h3{font-size:calc(var(--u)*1.35*var(--k));font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:calc(var(--u)*.4) 0 calc(var(--u)*.5)}
.cvj-f p{font-size:calc(var(--u)*1.02*var(--k));line-height:1.55;color:var(--mut)}

@media (max-aspect-ratio:5/4){
 h2.cvj-lb{font-size:calc(var(--u)*4*var(--k))}
 .cvz-j2 .cva-hero>p{margin-top:calc(var(--u)*1)}
 .cvj-num{font-size:calc(var(--u)*2.6*var(--k))!important}
 .cvj-ct .cvj-txt+.cvj-txt,.cvj-txt.sm{font-size:calc(var(--u)*1.6*var(--k))}
 .cvj-feats{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*2.6)}

 .cvj-f h3{font-size:calc(var(--u)*1.9*var(--k))}.cvj-f p{font-size:calc(var(--u)*1.5*var(--k))}
}

#cvsw .cvsw-m{display:flex;align-items:center;gap:2px;margin-left:6px;padding-left:8px;border-left:1px solid rgba(255,255,255,.2)}
#cvsw .cvsw-m button{padding:8px 9px}
@media (max-aspect-ratio:5/4){
 /* общее: результат — компактные плашки */
 .cvj-feats.res{display:flex;flex-direction:column;gap:calc(var(--u)*.8)}
 .cvj-feats.res .cvj-f{display:flex;flex-direction:row;align-items:center;gap:calc(var(--u)*1.4);padding:calc(var(--u)*1.2) calc(var(--u)*1.6);border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
 .cvj-feats.res .cvj-f>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 calc(var(--u)*1)}
 .cvj-feats.res .cvj-fi{width:calc(var(--u)*4.2);height:calc(var(--u)*4.2);box-shadow:none}
 .cvj-feats.res .cvj-num{font-size:calc(var(--u)*2.2*var(--k))!important;margin:0!important}
 .cvj-feats.res p{font-size:calc(var(--u)*1.3*var(--k))}
 .cvj-feats.sol .cvj-f h3{margin:0}
 
 /* 4 — линия-маршрут */
 .mm4 .cvj-feats.sol{gap:0}
 .mm4 .cvj-feats.sol .cvj-f{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:calc(var(--u)*1.8);padding-bottom:calc(var(--u)*2.6)}
 .mm4 .cvj-feats.sol .cvj-f:last-child{padding-bottom:0}
 .mm4 .cvj-feats.sol .cvj-fi{width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);position:relative;z-index:1}
 .mm4 .cvj-feats.sol .cvj-ln{display:block;position:absolute;left:calc(var(--u)*2.2);top:calc(var(--u)*4.4);bottom:0;width:2px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--fg) 22%,transparent) 0 5px,transparent 5px 10px)}
 .mm4 .cvj-feats.sol .cvj-ln b{position:absolute;inset:0;background:var(--ac);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .15s linear}
 .mm4 .cvj-feats.sol .cvj-f:last-child .cvj-ln{display:none}
 .mm4 .cvj-feats.sol h3{margin:calc(var(--u)*.9) 0 calc(var(--u)*.6)}
}

/* иконки решения и результата: серые, загораются цветом кейса при прокрутке (все экраны) */
.cvz-j2 .cvj-fi{background:color-mix(in srgb,var(--fg) 9%,var(--bg));color:color-mix(in srgb,var(--fg) 45%,transparent);box-shadow:0 0 0 calc(var(--u)*.35) transparent;transition:background .5s var(--ease),color .5s var(--ease),box-shadow .6s var(--ease)}
.cvz-j2 .cvj-f.lit .cvj-fi{background:var(--ac);color:#fff;box-shadow:0 0 0 calc(var(--u)*.35) color-mix(in srgb,var(--ac) 18%,transparent)}
@media (max-aspect-ratio:5/4){.cvz-j2 .cvj-feats.res .cvj-fi,.cvz-j2 .cvj-feats.res .cvj-f.lit .cvj-fi{box-shadow:none}}

/* переключатель вариантов (только предпросмотр) */
#cvsw{position:fixed;z-index:96;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:4px;max-width:calc(100vw - 16px);border-radius:999px;background:#0B0B0C;color:#fff;font:600 12px/1 Manrope,system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#cvsw span{opacity:.6;margin:0 4px 0 6px}
#cvsw select{font:inherit;color:#fff;background:#1d2029;border:0;border-radius:999px;padding:8px 10px;max-width:46vw;cursor:pointer}
#cvsw button{font:inherit;color:#fff;background:none;border:0;padding:8px 12px;border-radius:999px;cursor:pointer}
#cvsw button.on{background:#2563EB}

@media (max-aspect-ratio:5/4){
 .cva{gap:calc(var(--u)*5)}
 
 /* A */
 .cva-hero{padding:calc(var(--u)*2.6) calc(var(--u)*2.4) 0;border-radius:calc(var(--u)*2.6);gap:calc(var(--u)*1.8)}
 .cva-hero .cpbc{font-size:calc(var(--u)*1.2*var(--k))}
 .cva-hero h1{font-size:calc(var(--u)*6*var(--k));margin-top:calc(var(--u)*2)}
 .cva-hero>p{font-size:calc(var(--u)*1.55*var(--k))}
 .cva-vis{aspect-ratio:4/3.4;margin-left:calc(var(--u)*-2.4);margin-right:calc(var(--u)*-2.4);border-radius:0}
 
 .cva-stack span{font-size:calc(var(--u)*1.3*var(--k))}.cva-stack img{width:calc(var(--u)*2.8);height:calc(var(--u)*2.8)}
 
 #cvsw{bottom:auto;top:calc(min(2.35vw,1.2vh)*6.6 + 44px)}
}


/* палитра проекта: полосы как в брендбуке, выбранная шире */
.cvpal{display:flex;gap:calc(var(--u)*.5);height:calc(var(--u)*17)}
.cvpal-s{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:calc(var(--u)*1.2);border:0;border-radius:calc(var(--u)*1.2);background:var(--c);color:var(--t);font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:flex-grow .7s var(--ease)}
.cvpal-s.on{flex-grow:2.4}
.cvpal-n{font-size:calc(var(--u)*1*var(--k));font-weight:600;line-height:1.2}
.cvpal-h{display:flex;flex-direction:column;gap:calc(var(--u)*.2);font-variant-numeric:tabular-nums}
.cvpal-h b{font-size:calc(var(--u)*1.25*var(--k));font-weight:700;letter-spacing:.02em}
.cvpal-h i{font-style:normal;font-size:calc(var(--u)*.8*var(--k));opacity:.7;white-space:nowrap}
.cvpal-s:not(.on) .cvpal-h i{opacity:0}
.cvpal-s:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.cvpal-hint{margin-top:calc(var(--u)*.8);font-size:calc(var(--u)*.85*var(--k));color:var(--mut)}
@media (max-aspect-ratio:5/4){
 .cvpal{flex-direction:column;height:auto;gap:calc(var(--u)*.6)}
 .cvpal-s{flex:none;flex-direction:row;align-items:center;min-height:calc(var(--u)*6.4);padding:calc(var(--u)*1.4) calc(var(--u)*1.8);border-radius:calc(var(--u)*1.6)}
 .cvpal-s.on{min-height:calc(var(--u)*9)}
 .cvpal-n{font-size:calc(var(--u)*1.5*var(--k))}
 .cvpal-h{align-items:flex-end;margin-left:auto}
 .cvpal-s:not(.on) .cvpal-h i{display:none}
 .cvpal-h b{font-size:calc(var(--u)*1.6*var(--k))}
 .cvpal-h i{font-size:calc(var(--u)*1.1*var(--k))}
 .cvpal-hint{font-size:calc(var(--u)*1.2*var(--k))}
}
@media (prefers-reduced-motion:reduce){.cvpal-s{transition:none}}
/* узкие экраны: заголовок «Следующий кейс» всегда в ширину карточки (длинные слова вроде «SEO‑агентства») */
.cvn-tx{container-type:inline-size}
@media (max-aspect-ratio:5/4){.cvn-tx b{font-size:min(calc(var(--u)*3.6*var(--k)),10.6cqw)}}
/* узкие экраны: заголовки всех кейсов одного размера и всегда в ширину (без подгонки скриптом) */
.cva-hero{container-type:inline-size}
@media (max-aspect-ratio:5/4){.cva-hero h1{font-size:min(calc(var(--u)*6*var(--k)),10.4cqw);max-width:none}}