/* Страница проекта «BG Logistic»: бренд клиента (тёмно-синий и красный). Подключается после proto.css. */
.pp-bg{--color-theme:#e12d2d;--color-theme-rgb:225,45,45;--color-theme-hover:#b82020;--pp-brand:#2e4c72;--pp-brand-dark:#0f1c2e;--pp-brand-tint:#eaf0f8}
.pp-bg .btn-primary{--bs-btn-bg:#e12d2d;--bs-btn-border-color:#e12d2d;--bs-btn-hover-bg:#b82020;--bs-btn-hover-border-color:#b82020;background:#e12d2d;border-color:#e12d2d;color:#fff}
.pp-bg .btn-primary:hover{background:#b82020;border-color:#b82020}
.pp-bg .pp-hero{background:radial-gradient(1200px 600px at 85% 20%,#4a78b5 0%,transparent 60%),linear-gradient(135deg,#0c1626 0%,#1c3250 55%,#2e4c72 100%)}
.pp-bg .pp-panel--dark{background:linear-gradient(135deg,#0c1626,#27456c)}
.pp-bg .pp-panel--dark .pp-eyebrow{color:#ff8a8a}
.pp-bg .pp-panel--dark .pp-ticks li::before{color:#ff8a8a}
.pp-bg .pp-bit--seo{background:linear-gradient(160deg,#0c1626,#2e4c72)}
.pp-bg .pp-checks li::before{color:#ff9d9d}
.pp-bg .pp-cta__box{background:linear-gradient(120deg,#1c3250,#2e4c72 60%,#4b73a6);background-size:160% 100%}
.pp-bg .pp-cta .btn-light{color:#2e4c72}
.pp-bg .pp-nums b,.pp-bg .pp-mini-stats b{color:#2e4c72}
.pp-bg .pp-tag{background:rgba(46,76,114,.1);color:#2e4c72}
.pp-bg .pp-hero .pp-tag{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16)}
.pp-bg .pp-pin span{background:#e12d2d}
.pp-bg .pp-bit--php{background:#e12d2d}
.pp-browser--hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;background:#0c1626}
.pp-sechead__note{color:var(--color-gray-6);max-width:680px;margin:14px 0 0}

/* архив */
.pp-badge--archive i{background:#f4b740;animation:none;box-shadow:none}
.pp-archive{padding:0 0 clamp(40px,5vw,70px)!important}
.pp-archive__box{display:flex;gap:18px;align-items:flex-start;padding:22px 26px;border-radius:var(--border-radius);background:#fff7e8;border:1px solid #f1d9a7}
.pp-archive__box>i{font-size:26px;color:#b9801b;line-height:1}
.pp-archive__box p{margin:0;line-height:1.55;color:#5a4417}
.pp-hero{margin-bottom:clamp(20px,3vw,40px)}

/* два экрана рядом */
.pp-screens__two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.pp-screens figure{margin:0;min-width:0}
.pp-screens figcaption{margin-top:14px;font-size:14px;color:var(--color-gray-5)}
.pp-screens--plain{background:none;padding-top:0;margin-bottom:0}
.pp-screens .pp-browser img[data-zoom]{cursor:zoom-in;display:block;width:100%;height:auto;aspect-ratio:1600/889;object-fit:cover;object-position:top;transition:transform .8s var(--pp-ease)}
.pp-screens .pp-browser:hover img[data-zoom]{transform:scale(1.02)}

/* bento */
.pp-bg .pp-bit--lang{grid-column:span 7;background:#fff;border:1px solid var(--color-gray-2)}
.pp-bg .pp-bit--php{grid-column:span 3}
.pp-bg .pp-bit--code{grid-column:span 4}
.pp-bg .pp-bit--list{grid-column:span 12}
.pp-bg .pp-bit--list ul{grid-template-columns:repeat(3,1fr)}
.pp-code-note{margin:10px 0 0;font-size:12px;color:rgba(207,227,255,.55)}
.pp-lang{display:flex;align-items:center;gap:24px;margin-top:22px;flex-wrap:wrap}
.pp-lang__sw{display:inline-flex;padding:4px;border-radius:30px;background:var(--color-gray-1)}
.pp-lang__sw span{padding:8px 20px;border-radius:30px;font-weight:600;font-size:14px;transition:.3s;cursor:pointer}
.pp-lang__sw span.on{background:#e12d2d;color:#fff}
.pp-lang__txt{position:relative;flex:1;min-width:220px;min-height:2.6em}
.pp-lang__txt b{display:block;font-family:var(--font-family-header);font-weight:500;font-size:clamp(18px,1.8vw,24px);line-height:1.3;transition:opacity .5s,transform .5s}
.pp-lang__txt [data-en]{position:absolute;left:0;top:0;opacity:0;transform:translateY(10px)}
.pp-lang.en [data-ru]{opacity:0;transform:translateY(-10px)}
.pp-lang.en [data-en]{opacity:1;transform:none}

@media(min-width:992px){.pp-steps--6{grid-template-columns:repeat(6,1fr);gap:18px}}
@media(max-width:1199px){.pp-bg .pp-bit--lang{grid-column:span 12}.pp-bg .pp-bit--php{grid-column:span 4}.pp-bg .pp-bit--code{grid-column:span 8}}
@media(max-width:991px){.pp-bg .pp-bit--list ul{grid-template-columns:1fr}}
@media(max-width:767px){.pp-screens__two{grid-template-columns:1fr}}
@media(max-width:575px){.pp-bg .pp-bit--php,.pp-bg .pp-bit--code{grid-column:span 12}}
@media(prefers-reduced-motion:reduce){.pp-lang__txt b{transition:none}}