@font-face{font-family:"VK Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url(/wp-content/uploads/vk-assets/fonts/Unbounded-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"VK Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url(/wp-content/uploads/vk-assets/fonts/Unbounded-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2113}
@font-face{font-family:"VK Unbounded";font-style:normal;font-weight:500 800;font-display:swap;src:url(/wp-content/uploads/vk-assets/fonts/Unbounded-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"VK Golos";font-style:normal;font-weight:400 600;font-display:swap;src:url(/wp-content/uploads/vk-assets/fonts/GolosText-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"VK Golos";font-style:normal;font-weight:400 600;font-display:swap;src:url(/wp-content/uploads/vk-assets/fonts/GolosText-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2113}
@font-face{font-family:"VK Golos";font-style:normal;font-weight:400 600;font-display:swap;src:url(/wp-content/uploads/vk-assets/fonts/GolosText-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.vkc{
  /* Вкурсе: белая бумага, чёрный текст, красный акцент сайта; жёлтый только для меток клиента */
  --ink:#121316;--paper:#ffffff;--soft:#f4f4f6;--muted:#6b6e76;--line:#e6e6ea;--accent:#ef4136;--client:#f5c400;--good:#18a058;
  --display:"VK Unbounded","Arial Black",system-ui,sans-serif;
  --body:"VK Golos",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gut:clamp(16px,5vw,80px);
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-align:left;
}
.vkc *,.vkc *::before,.vkc *::after{box-sizing:border-box}
.vkc img{max-width:100%;height:auto;display:block;border:0}
.vkc h1,.vkc h2,.vkc h3{font-family:var(--display);font-weight:700;line-height:1.12;margin:0;padding:0;text-wrap:balance;letter-spacing:-.01em;color:inherit;text-transform:none}
.vkc h2{font-size:clamp(24px,3.4vw,40px)}
.vkc h3{font-size:clamp(18px,1.6vw,20px);font-weight:600;font-family:var(--body);letter-spacing:0;line-height:1.3}
.vkc p{margin:0;padding:0;font:inherit;color:inherit}
.vkc a{color:inherit;text-decoration:none}
.vkc ul{margin:0;padding:0;list-style:none}
.vkc figure{margin:0;padding:0}
.vkc mark{background:none;color:var(--accent);padding:0}
.vkc .wrap{max-width:1340px;margin:0 auto;padding:0 var(--gut)}
.vkc .num{font-variant-numeric:tabular-nums}
.vkc :focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* обложка */
.vkc .hero{background:var(--ink);color:#fff;overflow:hidden}
.vkc .hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(40px,5vw,72px);align-items:center}
.vkc .crumbs{font-size:13px;color:#9a9ca4;display:flex;gap:8px;flex-wrap:wrap}
.vkc .crumbs a{color:#c9cad0}
.vkc .crumbs a:hover{color:#fff}
.vkc .tags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 24px}
.vkc .tag{border:1px solid #3a3c43;border-radius:999px;padding:6px 14px;font-size:13px;color:#d6d7db;line-height:1.3}
.vkc .tag.client{background:var(--client);border-color:var(--client);color:var(--ink);font-weight:600}
.vkc .hero h1{font-size:clamp(26px,4vw,52px);color:#fff}
.vkc .hero h1 em{font-style:normal;color:var(--accent)}
.vkc .lead{margin-top:20px;color:#c9cad0;font-size:clamp(16px,1.4vw,19px);max-width:600px}
.vkc .big{display:flex;align-items:flex-end;gap:16px;margin-top:clamp(24px,3vw,40px);flex-wrap:wrap}
.vkc .big .value{font:800 clamp(56px,9vw,120px)/.9 var(--display);letter-spacing:-.04em}
.vkc .big .value span{color:var(--accent)}
.vkc .big .caption{font-size:15px;color:#9a9ca4;max-width:210px;padding-bottom:6px;line-height:1.4}
.vkc .ads{position:relative;height:clamp(330px,34vw,440px);width:100%;max-width:520px;justify-self:center}
.vkc .ads figure{position:absolute;background:#fff;border-radius:16px;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.45);transition:transform .3s}
.vkc .ads figure img{border-radius:10px;width:100%}
.vkc .ads .a1{width:44%;left:0;top:9%;transform:rotate(-7deg)}
.vkc .ads .a2{width:38%;left:31%;top:0;transform:rotate(4deg);z-index:2}
.vkc .ads .a3{width:38%;left:60%;top:15%;transform:rotate(10deg)}
.vkc .ads figure:hover{transform:rotate(0) scale(1.04);z-index:5}
.vkc .ads .note{position:absolute;left:5%;bottom:0;background:var(--accent);color:#fff;border-radius:14px;padding:14px 18px;font-size:14px;line-height:1.35;max-width:270px;z-index:4;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.vkc .ads .note b{font:700 22px/1.1 var(--display);display:block;margin-bottom:4px}

/* полоса цифр */
.vkc .kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line)}
.vkc .kpi{padding:26px 20px;border-right:1px solid var(--line)}
.vkc .kpi:first-child{padding-left:0}
.vkc .kpi:last-child{border-right:0}
.vkc .kpi b{display:block;font:700 clamp(22px,2.2vw,30px)/1.1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.vkc .kpi span{display:block;margin-top:8px;font-size:14px;color:var(--muted);line-height:1.4}

/* секции */
.vkc .block{padding:clamp(48px,7vw,88px) 0;border-bottom:1px solid var(--line)}
.vkc .label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px;line-height:1.4}
.vkc .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:start}
.vkc .text{max-width:640px}
.vkc .text p+p{margin-top:16px}
.vkc .goals{display:grid;gap:12px}
.vkc .goals li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;background:var(--soft);border-radius:16px;padding:18px 20px;margin:0}
.vkc .goals li::before{display:none}
.vkc .goals li i{font:700 15px/44px var(--display);font-style:normal;width:44px;height:44px;text-align:center;border-radius:50%;background:var(--paper);border:1px solid var(--line)}
.vkc .goals li b{display:block;font-weight:600}
.vkc .goals li span{color:var(--muted);font-size:15px}

/* шаги */
.vkc .steps{display:grid;gap:20px;margin-top:40px}
.vkc .step{display:grid;grid-template-columns:100px minmax(0,1fr) minmax(0,340px);gap:clamp(20px,3vw,32px);padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:24px;align-items:start}
.vkc .step.win{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.vkc .step .no{font:800 clamp(40px,4vw,56px)/1 var(--display);color:var(--line)}
.vkc .step.win .no{color:var(--accent)}
.vkc .chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;margin-bottom:12px;line-height:1.3}
.vkc .chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.vkc .chip.fail{background:#f1f1f3;color:#6f727a}
.vkc .chip.ok{background:#e4f6ec;color:#12804a}
.vkc .step h3{margin-bottom:10px}
.vkc .step p{color:#33353b}
.vkc .step p+p{margin-top:10px}
.vkc .metric{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.vkc .metric span{background:var(--soft);border-radius:10px;padding:8px 12px;font-size:14px;line-height:1.3}
.vkc .metric b{font-weight:600}
.vkc .step figure{border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.vkc .step figcaption,.vkc .gallery figcaption{font-size:13px;color:var(--muted);padding:10px 14px;background:var(--soft);line-height:1.4}

/* графики */
.vkc .charts{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;margin-top:36px;align-items:start}
.vkc .card{border:1px solid var(--line);border-radius:24px;padding:clamp(20px,2.4vw,28px);background:var(--paper)}
.vkc .card h3{margin-bottom:6px}
.vkc .card .sub{color:var(--muted);font-size:15px;margin-bottom:18px;line-height:1.45}
.vkc svg{display:block;width:100%;height:auto;overflow:visible}
.vkc svg text{font-family:var(--body);fill:var(--ink)}
.vkc svg .muted{fill:var(--muted)}
.vkc svg .grid{stroke:var(--line);stroke-width:1}

/* лаборатория */
.vkc .lab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.vkc .lab .item{background:var(--soft);border-radius:20px;padding:24px;display:grid;gap:10px;align-content:start}
.vkc .lab .q{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.vkc .lab .a{font-size:clamp(17px,1.5vw,19px);font-weight:600;line-height:1.35}
.vkc .lab .item.dark{background:var(--ink);color:#fff;grid-column:1/-1}
.vkc .lab .item.dark .q{color:#9a9ca4}
.vkc .lab .item.dark .a{font:700 clamp(19px,2.2vw,26px)/1.25 var(--display)}

/* таблица */
.vkc .tablewrap{overflow-x:auto;margin-top:24px;-webkit-overflow-scrolling:touch}
.vkc table.t{width:100%;border-collapse:collapse;font-size:15px;margin:0;border:0;min-width:720px}
.vkc table.t th{text-align:left;font-weight:500;color:var(--muted);font-size:13px;padding:10px 12px;border:0;border-bottom:1px solid var(--line);background:none}
.vkc table.t td{padding:14px 12px;border:0;border-bottom:1px solid var(--line);vertical-align:top;background:none;line-height:1.45}
.vkc table.t .r{text-align:right;white-space:nowrap}
.vkc .chcards{display:none}

/* экономика */
.vkc .econ{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;margin-top:36px}
.vkc .econ p{color:#c9cad0}
.vkc .econ .label{color:#ff8a82}
.vkc .econ .eq{font:700 clamp(30px,4.5vw,56px)/1.05 var(--display);letter-spacing:-.03em}
.vkc .econ .eq span{color:var(--accent)}
.vkc .bar120{height:72px;border-radius:14px;background:#2a2c33;position:relative;overflow:hidden;margin:16px 0 10px}
.vkc .bar120 i{position:absolute;left:0;top:0;bottom:0;width:1.6%;min-width:6px;background:var(--accent)}
.vkc .bar120 b{position:absolute;right:18px;top:50%;transform:translateY(-50%);font:600 15px var(--body)}
.vkc .legend{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#9a9ca4}

/* почему сработало */
.vkc .why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px;border-top:1px solid var(--line)}
.vkc .why div{padding:26px 32px 26px 0;border-bottom:1px solid var(--line)}
.vkc .why div:nth-child(odd){border-right:1px solid var(--line)}
.vkc .why div:nth-child(even){padding-left:32px;padding-right:0}
.vkc .why h3{margin-bottom:8px}
.vkc .why p{color:#33353b}
.vkc .gallery{margin-top:36px;max-width:820px}
.vkc .gallery figure{border-radius:20px;overflow:hidden;border:1px solid var(--line)}


/* горизонтальные графики на HTML: читаются на любой ширине */
.vkc .hb{display:grid;gap:14px;padding-top:4px}
.vkc .hb-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center}
.vkc .hb-l{font-size:15px;line-height:1.3}
.vkc .hb-t{position:relative;height:44px;display:flex;align-items:center;background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 25%) left/100% 100% no-repeat;border-left:1px solid var(--line)}
.vkc .hb-t i{height:100%;border-radius:10px;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;min-width:10px;font-style:normal}
.vkc .hb-t i.g{background:#d9dadf}.vkc .hb-t i.r{background:var(--accent);color:#fff}.vkc .hb-t i.gr{background:var(--good);padding:0}.vkc .hb-t i.k{background:var(--ink);color:#fff}
.vkc .hb-t b{font-weight:600;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.vkc .hb-t b.out{margin-left:10px}
.vkc .hb-m{position:absolute;top:-6px;bottom:-6px;border-left:2px solid var(--ink);font-style:normal}
.vkc .hb-m span{position:absolute;right:8px;top:-22px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--accent)}
.vkc .hb-ax{position:relative;height:20px;margin-left:134px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.vkc .hb-ax span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.vkc .hb-ax span:first-child{transform:none}.vkc .hb-ax span:last-child{transform:translateX(-100%)}
.vkc .hb.pf .hb-row:nth-child(2) .hb-t{margin-top:18px}
.vkc .donut{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.vkc .donut svg{width:min(200px,48%);flex:0 0 auto}
.vkc .dl{display:grid;gap:12px;font-size:15px;line-height:1.35}
.vkc .dl li{display:flex;gap:10px;align-items:flex-start;margin:0}
.vkc .dl li::before{display:none}
.vkc .dl i{width:14px;height:14px;border-radius:3px;flex:0 0 auto;margin-top:3px}
@media (max-width:600px){
  .vkc .hb-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .vkc .hb-ax{margin-left:0}
  .vkc .hb.pf .hb-row:nth-child(2) .hb-t{margin-top:0}
  .vkc .hb-m{display:none}
}

/* планшет */
@media (max-width:1024px){
  .vkc .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .vkc .ads{justify-self:start;max-width:560px}
  .vkc .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vkc .kpi{border-bottom:1px solid var(--line);padding-left:20px}
  .vkc .kpi:nth-child(3n+1){padding-left:0}
  .vkc .kpi:nth-child(3n){border-right:0}
  .vkc .kpi:nth-child(n+4){border-bottom:0}
  .vkc .step{grid-template-columns:96px minmax(0,1fr)}
  .vkc .step .no{font-size:38px}
  .vkc .step figure{grid-column:2/3;max-width:460px}
  .vkc .charts{grid-template-columns:minmax(0,1fr)}
  .vkc .charts .card:nth-child(2){max-width:560px}
}
@media (max-width:800px){
  .vkc .two,.vkc .econ{grid-template-columns:minmax(0,1fr)}
  .vkc .lab,.vkc .why{grid-template-columns:minmax(0,1fr)}
  .vkc .why div,.vkc .why div:nth-child(even){padding:22px 0;border-right:0}
}
/* телефон */
@media (max-width:600px){
  .vkc{font-size:16px}
  .vkc .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vkc .kpi,.vkc .kpi:nth-child(3n+1){padding:18px 12px 18px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .vkc .kpi:nth-child(odd){padding-left:0}
  .vkc .kpi:nth-child(even){border-right:0}
  .vkc .kpi:last-child{grid-column:1/-1;border-bottom:0;border-right:0}
  .vkc .step{grid-template-columns:minmax(0,1fr);gap:14px}
  .vkc .step figure{grid-column:auto;max-width:none}
  .vkc .ads{height:clamp(250px,78vw,360px)}
  .vkc .ads .note{left:0;max-width:240px;padding:12px 14px}
  .vkc .ads .note b{font-size:19px}
  .vkc table.t{display:none}
  .vkc .tablewrap{overflow:visible}
  .vkc .chcards{display:grid;gap:12px}
  .vkc .chcard{background:var(--soft);border-radius:18px;padding:18px}
  .vkc .chcard b.n{display:block;font-weight:600;margin-bottom:10px}
  .vkc .chcard dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:0}
  .vkc .chcard dt{font-size:12px;color:var(--muted);margin:0}
  .vkc .chcard dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
  .vkc .chcard p{margin-top:10px;font-size:14px;color:#33353b}
  .vkc .legend{font-size:12px}
  .vkc .bar120{height:60px}
}
@media (max-width:380px){
  .vkc .tag{font-size:12px;padding:5px 11px}
  .vkc .big .caption{max-width:none}
  .vkc .kpi b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.vkc *{transition:none!important}}

/* номер шага не переносится (две широкие цифры) */
.vkc .step .no{white-space:nowrap}
@media (min-width:1025px){.vkc .step{grid-template-columns:120px minmax(0,1fr) minmax(0,340px)}}

/* ===== Библиотека блоков v2: разные сюжеты кейсов ===== */

/* ниша — всегда первой строкой обложки */
.vkc .niche{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 6px;font:600 clamp(16px,1.5vw,20px)/1.3 var(--body);color:#fff}
.vkc .niche span{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:6px;padding:6px 9px;transform:translateY(-2px)}
.vkc .hero .niche+.tags{margin-top:12px}
.vkc .h-light .niche,.vkc .niche.dark{color:var(--ink)}

/* обложка: светлая */
.vkc .hero.h-light{background:var(--soft);color:var(--ink)}
.vkc .hero.h-light h1{color:var(--ink)}
.vkc .hero.h-light .lead{color:#3c3f46}
.vkc .hero.h-light .crumbs,.vkc .hero.h-light .crumbs a{color:var(--muted)}
.vkc .hero.h-light .tag{border-color:#d4d5da;color:#3c3f46}
.vkc .hero.h-light .tag.client{color:var(--ink)}
.vkc .hero.h-light .big .caption{color:var(--muted)}

/* обложка: текст сверху, большой скриншот работы под ним во всю ширину */
.vkc .hero.h-shot .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.7fr);align-items:end;padding-bottom:0}
.vkc .hero.h-shot .shot{grid-column:1/-1;margin-top:clamp(8px,2vw,24px);transform:translateY(clamp(24px,4vw,56px))}
.vkc .hero.h-shot+*{padding-top:clamp(72px,9vw,128px)}
.vkc .hero.h-shot .big{margin-top:0;justify-content:flex-end}

/* обложка: одна гигантская цифра по центру */
.vkc .hero.h-num .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}
.vkc .hero.h-num .crumbs,.vkc .hero.h-num .tags{justify-content:center}
.vkc .hero.h-num .lead{margin-left:auto;margin-right:auto}
.vkc .hero.h-num .mega{font:800 clamp(88px,19vw,260px)/.85 var(--display);letter-spacing:-.05em;color:#fff;margin:clamp(12px,2vw,24px) 0 8px}
.vkc .hero.h-num .mega span{color:var(--accent)}
.vkc .hero.h-num .mega-cap{color:#9a9ca4;font-size:clamp(15px,1.4vw,18px);max-width:520px}
.vkc .hero.h-num h1{max-width:980px;margin-top:clamp(20px,3vw,36px)}

/* обложка: иллюстрация на всю правую половину (картинка ChatGPT или крупный креатив) */
.vkc .hero.h-art{position:relative}
.vkc .hero.h-art .art{position:relative;align-self:stretch;min-height:clamp(300px,34vw,520px);border-radius:28px;overflow:hidden}
.vkc .hero.h-art .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* рамки для скриншотов */
.vkc .browser{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(18,19,22,.28);border:1px solid #d9dade}
.vkc .browser::before{content:"";display:block;height:30px;background:#eceef1 radial-gradient(circle,#ff6159 4.5px,transparent 5px) 14px 50%/14px 14px no-repeat;border-bottom:1px solid #d9dade}
.vkc .browser img{width:100%}
.vkc .phone{background:#121316;border-radius:34px;padding:10px;box-shadow:0 30px 60px rgba(18,19,22,.3);max-width:300px;margin:0 auto}
.vkc .phone img{border-radius:26px;width:100%}
.vkc .browser figcaption,.vkc .phone figcaption{display:none}

/* витрина работ: одна большая + колонка, на телефоне лента со свайпом */
.vkc .showcase{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);margin-top:36px;align-items:start}
.vkc .showcase .side{display:grid;gap:clamp(16px,2vw,28px)}
.vkc .showcase figure{position:relative}
.vkc .showcase .cap,.vkc .shot .cap{display:block;font-size:14px;color:var(--muted);margin-top:10px;line-height:1.45}
.vkc .block.dark .showcase .cap{color:#9a9ca4}
.vkc .showcase.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.vkc .showcase.phones{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}

/* тёмная секция для ритма */
.vkc .block.dark{background:var(--ink);color:#fff;border-bottom:0}
.vkc .block.dark p{color:#c9cad0}
.vkc .block.dark .label{color:#ff8a82}
.vkc .block.soft{background:var(--soft);border-bottom:0}
.vkc .intro{max-width:720px;margin-top:14px;color:var(--muted);font-size:clamp(16px,1.3vw,18px)}
.vkc .block.dark .intro{color:#9a9ca4}

/* таймлайн: недели, месяцы, этапы */
.vkc .timeline{margin-top:40px;display:grid}
.vkc .timeline li{display:grid;grid-template-columns:clamp(96px,13vw,170px) minmax(0,1fr);column-gap:clamp(16px,2.5vw,32px)}
.vkc .timeline .when{font:700 clamp(15px,1.4vw,18px)/1.3 var(--display);color:var(--accent);text-align:right;padding-top:1px}
.vkc .timeline .what{position:relative;padding:0 0 clamp(26px,3vw,40px) 32px;border-left:2px solid var(--line)}
.vkc .timeline li:last-child .what{border-left-color:transparent;padding-bottom:0}
.vkc .timeline .what::before{content:"";position:absolute;left:-9px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--accent);box-sizing:border-box}
.vkc .timeline .what h3{margin-bottom:6px}
.vkc .timeline .what p{color:#33353b}
.vkc .timeline .metric{margin-top:10px}
.vkc .block.dark .timeline .what{border-left-color:#33353b}
.vkc .block.dark .timeline li:last-child .what{border-left-color:transparent}
.vkc .block.dark .timeline .what::before{background:var(--ink)}
.vkc .block.dark .timeline .what p{color:#c9cad0}

/* было → стало */
.vkc .ba{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);margin-top:36px;align-items:stretch}
.vkc .ba>div{border-radius:24px;padding:clamp(22px,3vw,36px)}
.vkc .ba .was{background:var(--soft)}
.vkc .ba .now{background:var(--ink);color:#fff}
.vkc .ba .arrow{display:grid;place-items:center;font:800 28px/1 var(--display);color:var(--accent)}
.vkc .ba h3{font:700 13px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;color:var(--muted)}
.vkc .ba .now h3{color:#ff8a82}
.vkc .ba li{padding:12px 0;border-top:1px solid var(--line);line-height:1.45}
.vkc .ba .now li{border-color:#2c2e34}
.vkc .ba li:first-of-type{border-top:0;padding-top:0}
.vkc .ba li b{font-family:var(--display);font-size:1.15em}
.vkc .ba .was li b{color:var(--muted)}
.vkc .ba .now li b{color:#fff}

/* цитата клиента (только дословно из исходника) */
.vkc .quote{margin-top:36px;padding:clamp(24px,4vw,48px);border-radius:28px;background:var(--soft);position:relative}
.vkc .quote::before{content:"«";position:absolute;top:-6px;left:clamp(18px,3vw,36px);font:800 clamp(90px,10vw,140px)/1 var(--display);color:var(--accent);opacity:.9}
.vkc .quote blockquote{margin:0;padding:clamp(36px,4vw,48px) 0 0;font:500 clamp(19px,2vw,26px)/1.4 var(--body);color:var(--ink);quotes:none;border:0}
.vkc .quote cite{display:block;margin-top:18px;font-style:normal;font-size:15px;color:var(--muted)}
.vkc .quote cite b{color:var(--ink)}

/* воронка: ступени сужаются */
.vkc .funnel{margin-top:36px;display:grid;gap:8px;max-width:900px}
.vkc .funnel li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;border-radius:14px;background:var(--soft);margin:0 auto;width:var(--w,100%);min-width:min(100%,280px)}
.vkc .funnel li:nth-child(1){--w:100%}
.vkc .funnel li:nth-child(2){--w:88%}
.vkc .funnel li:nth-child(3){--w:76%}
.vkc .funnel li:nth-child(4){--w:64%}
.vkc .funnel li:nth-child(5){--w:54%}
.vkc .funnel li:nth-child(6){--w:46%}
.vkc .funnel li:last-child{background:var(--accent);color:#fff}
.vkc .funnel li span{line-height:1.35}
.vkc .funnel li b{font:700 clamp(18px,2vw,24px)/1.1 var(--display);white-space:nowrap}
.vkc .block.dark .funnel li:not(:last-child){background:#22242a}

/* цифра-история: огромное число и объяснение, красная плашка */
.vkc .stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;margin-top:36px;padding:clamp(26px,4vw,52px);border-radius:28px;background:var(--accent);color:#fff}
.vkc .stat .n{font:800 clamp(64px,10vw,150px)/.85 var(--display);letter-spacing:-.05em;white-space:nowrap}
.vkc .stat p{color:#fff;font-size:clamp(17px,1.5vw,20px);max-width:560px}
.vkc .stat p b{font-weight:600}
.vkc .stat.ink{background:var(--ink)}
.vkc .stat.ink .n span{color:var(--accent)}

/* плитки «что сделали» вместо шагов, когда работа параллельная, а не последовательная */
.vkc .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:36px}
.vkc .tiles>div{border:1px solid var(--line);border-radius:22px;padding:clamp(20px,2.4vw,28px);background:var(--paper)}
.vkc .tiles .k{font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:14px}
.vkc .tiles h3{margin-bottom:8px}
.vkc .tiles p{color:#33353b;font-size:16px}
.vkc .tiles .wide{grid-column:span 2}
.vkc .tiles .ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.vkc .tiles .ink p{color:#c9cad0}
.vkc .tiles img{border-radius:12px;margin-top:16px;border:1px solid var(--line)}
.vkc .block.dark .tiles>div{background:#1b1d22;border-color:#2c2e34}
.vkc .block.dark .tiles p{color:#c9cad0}

/* большой скриншот с подписью-стрелками сбоку */
.vkc .spot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:36px}
.vkc .spot.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.vkc .spot.rev>figure{order:2}
.vkc .spot ol{counter-reset:s;display:grid;gap:18px;margin:0;padding:0;list-style:none}
.vkc .spot ol li{counter-increment:s;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;line-height:1.5}
.vkc .spot ol li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font:700 15px/1 var(--display)}
.vkc .spot ol li b{display:block;margin-bottom:2px}

/* ===== адаптив v2 ===== */
@media (max-width:1024px){
  .vkc .hero.h-shot .wrap{grid-template-columns:1fr}
  .vkc .hero.h-shot .big{justify-content:flex-start}
  .vkc .hero.h-art .wrap{grid-template-columns:1fr}
  .vkc .hero.h-art .art{min-height:300px;order:-1}
  .vkc .showcase{grid-template-columns:1fr}
  .vkc .showcase .side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vkc .showcase.trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vkc .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vkc .spot,.vkc .spot.rev{grid-template-columns:1fr}
  .vkc .spot.rev>figure{order:0}
}
@media (max-width:700px){
  .vkc .ba{grid-template-columns:1fr}
  .vkc .ba .arrow{transform:rotate(90deg);padding:10px 0}
  .vkc .stat{grid-template-columns:1fr}
  .vkc .tiles{grid-template-columns:1fr}
  .vkc .tiles .wide{grid-column:auto}
  .vkc .timeline li{grid-template-columns:1fr}
  .vkc .timeline .when{text-align:left;padding:0 0 6px 32px;border-left:2px solid var(--line);position:relative}
  .vkc .timeline .when::before{content:"";position:absolute;left:-9px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--accent);box-sizing:border-box}
  .vkc .timeline .what::before{display:none}
  .vkc .block.dark .timeline .when{border-left-color:#33353b}
  .vkc .block.dark .timeline .when::before{background:var(--ink)}
  .vkc .funnel li{width:100%!important;padding:14px 16px}
  .vkc .showcase .side{grid-template-columns:1fr}
  .vkc .showcase.trio,.vkc .showcase.phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:calc(-1 * var(--gut));padding-right:var(--gut);padding-bottom:8px}
  .vkc .showcase.trio>figure,.vkc .showcase.phones>figure{flex:0 0 78%;scroll-snap-align:start}
  .vkc .hero.h-shot .shot{transform:translateY(24px)}
  .vkc .browser::before{height:22px;background-size:12px 12px}
  .vkc .hero.h-num .mega{font-size:clamp(76px,26vw,120px)}
}

/* правки v2 */
.vkc .block.soft .ba .was,.vkc .block.soft .funnel li:not(:last-child),.vkc .block.soft .quote,.vkc .block.soft .tiles>div:not(.ink){background:#fff}
.vkc .block.dark .metric span{background:#22242a;color:#c9cad0}
.vkc .block.dark .metric b{color:#fff}
.vkc .block.dark h3{color:#fff}
.vkc .funnel{margin-left:auto;margin-right:auto}

/* ===== v3: заголовки секций по центру, без огромных цифр в обложке ===== */
.vkc .block>.wrap>.label,.vkc .block>.wrap>h2,.vkc .block>.wrap>.intro{text-align:center;margin-left:auto;margin-right:auto}
.vkc .block>.wrap>h2{max-width:940px}
.vkc .block>.wrap>.intro{max-width:720px}
.vkc .block>.wrap>figure,.vkc .block>.wrap>.gallery{margin-left:auto;margin-right:auto;max-width:1040px}
.vkc .showcase:has(>figure:only-child){grid-template-columns:1fr;max-width:1040px;margin-left:auto;margin-right:auto}
.vkc .hero .big,.vkc .hero .mega,.vkc .hero .mega-cap{display:none!important}
.vkc .hero.h-shot .wrap{grid-template-columns:minmax(0,1fr)}
.vkc .hero.h-shot h1{max-width:1000px}
.vkc .hero.h-shot .lead{max-width:760px}
.vkc .hero.h-num h1{font-size:clamp(28px,4.4vw,58px)}

/* v4: обложка h-shot — скриншот целиком в рамке, без ухода под следующий блок; высокие скриншоты показываем верх с плавным краем */
.vkc .hero.h-shot .wrap{padding-bottom:clamp(40px,5vw,72px)}
.vkc .hero.h-shot .shot{transform:none!important;margin-top:clamp(20px,3vw,40px)}
.vkc .hero.h-shot+*{padding-top:clamp(48px,7vw,88px)}
.vkc .hero.h-shot .shot .browser{position:relative;max-height:min(72vh,640px);overflow:hidden}
.vkc .hero.h-shot .shot .browser img{width:100%;height:auto;object-fit:cover;object-position:top}
.vkc .hero.h-shot .shot .browser:has(img)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
@media (max-width:700px){.vkc .hero.h-shot .shot .browser{max-height:340px}.vkc .hero.h-shot .shot .browser:has(img)::after{height:56px}}
/* плитки: последняя плитка растягивается, чтобы не оставалось пустой ячейки */
@media (min-width:1025px){.vkc .tiles{grid-auto-flow:row dense}.vkc .tiles>div:last-child{grid-column-end:-1}}