/* ============================================
   ДЕКОРАТИВНЫЕ ФОНОВЫЕ ИЗОБРАЖЕНИЯ
   Белый фон изображений скрывается через
   mix-blend-mode: multiply
   ============================================ */


/* --- FEATURES --- */
.features {
    position: relative;
    overflow: hidden;
}

.features::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -80px;
    width: 450px;
    height: 450px;
    background: url('../img/bg-features-tools.png') no-repeat center / contain;
    opacity: 0.06;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.features::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -60px;
    width: 380px;
    height: 380px;
    background: url('../img/bg-features-docs.png') no-repeat center / contain;
    opacity: 0.05;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.features .container {
    position: relative;
    z-index: 1;
}

/* --- FAQ --- */
.faq {
    position: relative;
    overflow: hidden;
}

.faq::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translateY(-50%);
    width: 400px;
    height: 400px;
    background: url('../img/bg-faq-question.png') no-repeat center / contain;
    opacity: 0.05;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.faq .container {
    position: relative;
    z-index: 1;
}

/* --- REVIEWS --- */
.reviews {
    position: relative;
    overflow: hidden;
}

.reviews::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -80px;
    width: 450px;
    height: 450px;
    background: url('../img/bg-reviews-building.png') no-repeat center / contain;
    opacity: 0.05;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.reviews .container {
    position: relative;
    z-index: 1;
}

/* --- PRICING --- */
.pricing {
    position: relative;
    overflow: hidden;
}

.pricing::before {
    content: '';
    position: absolute;
    top: 40px;
    left: -100px;
    width: 420px;
    height: 420px;
    background: url('../img/bg-pricing-layers.png') no-repeat center / contain;
    opacity: 0.05;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.pricing .container {
    position: relative;
    z-index: 1;
}

/* --- FOOTER --- */
.footer {
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../img/bg-footer-pattern.png') repeat center / 400px;
    opacity: 0.04;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

.footer .container {
    position: relative;
    z-index: 1;
}

/* --- ЛОГОТИП --- */
.navbar-logo img,
.footer-logo img {
    height: 32px;
    width: auto;
}

.footer-logo img {
    height: 26px;
    filter: brightness(0) invert(1);
}

/* ============================================
   АДАПТИВНОСТЬ ДЕКОРАЦИЙ
   ============================================ */
@media (max-width: 1024px) {
    .hero::before,
    .hero::after,
    .features::before,
    .features::after,
    .faq::before,
    .reviews::after,
    .pricing::before {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .hero::before,
    .hero::after,
    .features::before,
    .features::after,
    .faq::before,
    .reviews::after,
    .pricing::before {
        width: 220px;
        height: 220px;
        opacity: 0.03;
    }
}

@media (max-width: 480px) {
    .hero::before,
    .hero::after,
    .features::before,
    .features::after,
    .faq::before,
    .reviews::after,
    .pricing::before,
    .footer::before {
        display: none;
    }
}