/* Brand-colored surfaces loaded after page and component styles. */

/* Compact accents should be colorful without a heavy shadow. */
.about-icons span:nth-child(3),
.about-service-card span,
.about-workflow__grid span,
.site-menu.is-open .site-menu__cart span {
    color: #fff;
    background: var(--brand-gradient-action);
    border-color: transparent;
    box-shadow: none;
}

.about-service-card:nth-child(3n + 2) span,
.about-workflow__grid article:nth-child(2) span {
    background: linear-gradient(135deg, #390894, #8b10b8 72%, #fd5b03 135%);
}

.about-service-card:nth-child(3n) span,
.about-workflow__grid article:nth-child(3) span {
    background: linear-gradient(135deg, #7f0aad, #fd5b03);
}

.product-tabs a.is-active::after {
    background: var(--brand-gradient-line);
}

/* Large dark panels: deep purple foundation with a restrained orange edge. */
.one-c-hero__top,
.one-c-service-card__visual--placeholder,
.one-c-expert,
.one-c-detail__hero,
.about-hero,
.about-mission,
.faq-hero,
.its-plan-hero,
.updates-side,
.updates-risk,
.updates-price-notice,
.marking-side,
.marking-price-notice,
.it-support-side,
.it-support-process,
.integration-side,
.integration-price-notice,
.bitrix24-side,
.bitrix24-notice,
.accounting-side,
.accounting-notice,
.onec-side,
.onec-price-notice {
    background: var(--brand-gradient-panel);
}

/* Dark card states on service pages. */
.updates-benefits article:hover,
.updates-compare__card.is-good,
.marking-route__item.is-active,
.marking-benefits article:hover,
.it-support-benefits article:hover,
.it-support-service-card:hover,
.integration-benefits article:hover,
.bitrix24-benefits article:hover,
.onec-fit article:hover {
    color: #fff;
    background: var(--brand-gradient-action);
}

/* Panels with their decorative glow preserved. */
.contacts-hero__panel,
.about-intro__note,
.intro-card {
    background:
        radial-gradient(circle at 95% 8%, rgba(253, 91, 3, .5), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(172, 17, 255, .52), transparent 38%),
        var(--brand-gradient-panel);
}

.contacts-route,
.rich-content blockquote,
.rich-content pre,
.faq-article__footer,
.faq-article-card__media--placeholder,
.its-value,
.its-work {
    background:
        radial-gradient(circle at 92% 10%, rgba(253, 91, 3, .34), transparent 31%),
        radial-gradient(circle at 4% 100%, rgba(172, 17, 255, .42), transparent 34%),
        var(--brand-gradient-panel);
}

.its-plan-card::after {
    background:
        radial-gradient(circle at 88% 10%, rgba(253, 91, 3, .4), transparent 30%),
        radial-gradient(circle at 5% 100%, rgba(172, 17, 255, .5), transparent 34%),
        var(--brand-gradient-panel);
}

.its-material-grid article > span {
    background: linear-gradient(135deg, var(--its-card-accent), #7f0aad 74%, #fd5b03 135%);
}