/* Стили страницы /video-portfolio/ (28.09.2026).
   Лежали прямо в тексте страницы, и WordPress рвал их на абзацы:
   внутри <style> оказывались </p> и <p>, из-за чего часть правил
   не применялась, а валидатор показывал ошибку. */
.vpx{--b:#2B4C8C;--bd:#005DAC;--bg:#EDF1F8;--bg2:#F0F5FF;--brd:#D6DEE9;--ink:#11172D;--soft:#5a6a7a;--grn:#128a4e;--grnbg:#e7f7ee;--grnbd:#b8e6cd;max-width:1160px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);line-height:1.55;}
.vpx *{box-sizing:border-box}
.vpx h2,.vpx h3{line-height:1.15;margin:0;text-wrap:balance}
.vpx a{color:var(--b);text-decoration:none}
.vpx-sec{margin:2px 0 12px}
.vpx-sec h2{font-size:clamp(18px,2.4vw,25px);font-weight:800;letter-spacing:-.01em}
.vpx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.vpx-card{background:#fff;border:1px solid var(--brd);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(20,60,140,.07);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.vpx-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(20,60,140,.14)}
.vpx-head{padding:15px 18px 12px}
.vpx-city{display:inline-block;font-size:12px;font-weight:700;color:var(--b);background:var(--bg);border-radius:999px;padding:4px 12px;margin:0 0 9px}
.vpx-title{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0}
.vpx-media{width:100%;aspect-ratio:16/9;background:#0b1730;line-height:0}
.vpx-frame{width:100%;height:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.vpx-body{padding:14px 18px 16px;display:flex;flex-direction:column;flex:1}
.vpx-badge{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;color:var(--grn);background:var(--grnbg);border:1px solid var(--grnbd);border-radius:8px;padding:6px 11px;margin:0}
.vpx-cta{margin-top:14px;padding-top:14px;border-top:1px solid var(--brd)}
.vpx .vpx-cta a{display:block;text-align:center;background:var(--b)!important;color:#fff!important;font-weight:800;font-size:15px;padding:13px 18px;border-radius:11px;box-shadow:0 8px 18px rgba(43,76,140,.24);transition:background .15s,transform .15s}
.vpx .vpx-cta a:hover{background:var(--bd)!important;transform:translateY(-1px)}
.vpx-why{background:var(--bg);border:1px solid var(--brd);border-radius:20px;padding:34px 30px;margin:44px 0;display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.vpx-why blockquote{margin:0;font-size:clamp(19px,2.4vw,25px);font-weight:700;line-height:1.35}
.vpx-why blockquote b{color:var(--b)}
.vpx-why ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.vpx-why li{display:flex;gap:11px;font-size:15.5px;color:var(--soft)}
.vpx-why li b{color:var(--ink)}
.vpx-tick{flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:var(--grnbg);border:1px solid var(--grnbd);color:var(--grn);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.vpx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
.vpx-step{background:#fff;border:1px solid var(--brd);border-radius:14px;padding:22px 18px}
.vpx-step .n{font-size:12.5px;font-weight:800;color:var(--b);letter-spacing:.07em}
.vpx-step h3{margin:9px 0 7px;font-size:16px;font-weight:750}
.vpx-step p{margin:0;font-size:14px;color:var(--soft)}
.vpx-method-link{margin-top:22px;font-size:16px}
.vpx-final{background:linear-gradient(135deg,#1A5BA8,#1F3F7A);border-radius:20px;padding:clamp(28px,5vw,48px);margin:44px 0 8px;display:flex;gap:30px;align-items:center;flex-wrap:wrap;box-shadow:0 20px 50px rgba(20,60,140,.26)}
.vpx-final .t{flex:1 1 320px}
.vpx .vpx-final h2{color:#ffffff!important;font-size:clamp(23px,3vw,30px);font-weight:800}
.vpx .vpx-final p{color:#dbe6f7!important;font-size:16px;margin:10px 0 0;max-width:52ch}
.vpx-final .c{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.vpx .vpx-bw{display:inline-block;background:#fff!important;color:#2B4C8C!important;font-weight:800;padding:14px 30px;border-radius:11px;font-size:16px}
.vpx .vpx-bs{display:inline-block;background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.65);font-weight:700;padding:11px 22px;border-radius:10px;font-size:14.5px}
.vpx-snote{font-size:13px;color:#c3d4ee!important}
@media(max-width:900px){.vpx-why{grid-template-columns:1fr;gap:22px}.vpx-steps{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.vpx-sec h2{font-size:19px}.vpx-steps{grid-template-columns:1fr}.vpx-grid{grid-template-columns:1fr;gap:16px}}

.vpx-fasad{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#0E1016;cursor:pointer;overflow:hidden}
.vpx-prevyu{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s,opacity .3s}
.vpx-fasad:hover .vpx-prevyu{transform:scale(1.03);opacity:.88}
.vpx-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(229,57,53,.94);box-shadow:0 6px 20px rgba(0,0,0,.34);transition:transform .2s,background .2s}
.vpx-play::after{content:'';position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}
.vpx-fasad:hover .vpx-play{transform:scale(1.08);background:#E53935}
.vpx-fasad:focus-visible .vpx-play{outline:3px solid #fff;outline-offset:3px}
.vpx-dlit{position:absolute;right:9px;bottom:9px;padding:3px 7px;font-size:12.5px;font-weight:600;line-height:1.2;color:#fff;background:rgba(14,16,22,.82);border-radius:6px}
.vpx-media .vpx-frame{display:block;width:100%;aspect-ratio:16/9;border:0}

/* ─── Группировка видеокейсов по нишам (29.09.2026) ───────────────────
   85 карточек шли одной лентой на 28 000 px. Разложены по шести нишам,
   сверху — быстрые ссылки: человек сразу идёт к похожему на свой бизнес. */
.vpx-lid{
    max-width: 860px;
    margin: 0 0 26px;
}
.vpx-lid p{
    font-size: 16.5px;
    line-height: 1.7;
    color: #41485c;
    margin: 0 0 12px;
}
.vpx-nav{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    margin: 0 0 34px;
    background: #f2f7fd;
    border: 1px solid #dde8f6;
    border-radius: 12px;
}
.vpx-nav__t{
    font-size: 14px;
    font-weight: 700;
    color: #5d6584;
    margin-right: 4px;
}
.vpx-nav__l{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid #d3e2f6;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #005DAC !important;
    text-decoration: none !important;
    transition: border-color .15s, background .15s;
}
.vpx-nav__l b{
    font-size: 12.5px;
    color: #8a94a8;
}
.vpx-nav__l:hover{
    border-color: #005DAC;
    background: #eaf2ff;
}
.vpx-nisha{
    margin: 0 0 46px;
    scroll-margin-top: 90px;
}
.vpx-nisha__t{
    font-size: clamp(20px, 2.2vw, 26px) !important;
    margin: 0 0 8px !important;
    text-align: left !important;
}
.vpx-nisha__o{
    font-size: 15.5px;
    line-height: 1.65;
    color: #5d6584;
    max-width: 760px;
    margin: 0 0 22px;
}
@media (max-width: 767.98px){
    .vpx-lid p{ font-size: 15.5px; }
    .vpx-nav{ padding: 12px 12px; gap: 8px; margin-bottom: 26px; }
    .vpx-nav__l{ padding: 6px 11px; font-size: 13px; }
    .vpx-nisha{ margin-bottom: 34px; }
    .vpx-nisha__o{ font-size: 15px; }
}

/* Компактная строка фактов вместо трёх абзацев вводного текста (29.09.2026):
   на телефоне текст занимал целый экран до первого кейса. */
.vpx-fakty{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
}
.vpx-fakty span{
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 14px;
    background: #f2f7fd;
    border: 1px solid #dde8f6;
    border-radius: 999px;
    font-size: 14px;
    color: #41485c;
}
.vpx-fakty b{
    font-size: 16px;
    font-weight: 800;
    color: #005DAC;
}
@media (max-width: 767.98px){
    .vpx-lid p{ font-size: 16px; line-height: 1.6; }
    .vpx-fakty{ gap: 8px; }
    .vpx-fakty span{ padding: 6px 12px; font-size: 13.5px; }
}