/*
 * Послуги (/poslugy/) — секції сторінки.
 *
 * Джерело: шаблон замовника `Кодекс/service-page-template/service-page.css`,
 * перенесений майже без змін, щоб сторінка лишалась 1-в-1 з погодженим
 * макетом. Що змінено при перенесенні:
 *   • прибрано 39 правил від блоків, яких немає в розмітці
 *     (.service-overview, .service-benefits, .service-scope, .service-process*)
 *     — лишились від попередніх версій шаблону;
 *   • шляхи до зображень переписані на ассети теми (PNG → WebP,
 *     11 МБ → 1.5 МБ);
 *   • токени (:root) не переносились — сторінка тягне їх з css/main.css.
 *
 * Свідомо НЕ чіпав дублі правил (одні й ті самі селектори трапляються
 * у файлі по кілька разів, виграє останній): це фактичний стан, з якого
 * знімався погоджений вигляд, і «причісування» тут ризикує змінити
 * результат непомітно.
 */

/* ── Шаблон сторінки послуги ───────────────────────────────────────────── */
.service-page {
    background-color: var(--color-bg);
    color: var(--color-text-light);
}

/* Єдиний divider після кожного основного блоку сторінки. Border-image не
   конфліктує з декоративними ::before / ::after окремих секцій. */
.service-page > section {
    border-bottom: .5px solid transparent;
    border-image-source: var(--gradient-line);
    border-image-slice: 1;
}

/* ── Кнопки ────────────────────────────────────────────────────────────────
   Глобально в темі живе тільки .btn--primary (header.css, висота 42px);
   .btn, .btn--lg і .btn--outline лежать у css/pages/home.css, тобто на цій
   сторінці не підключені взагалі — саме тому велика кнопка виходила 42px,
   а «Дзвінок» без inline-flex розтягувався на два рядки.
   Тримаємо їх тут, локально, з тією ж специфічністю (0,1,0) і в тому ж
   порядку, що й base.css шаблону: далі по файлу .service-cta__btn так само
   перебиває padding і радіус, як у погодженому макеті.
   Кольори й розміри шрифту — з токенів теми (--fs-button і т.д.). */
.btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    box-sizing:      border-box;
    cursor:          pointer;
    text-decoration: none;
}

.btn--primary {
    font-size:      var(--fs-button);
    line-height:    var(--lh-button);
    letter-spacing: var(--ls-button);
}

/* Велика кнопка з макета: 270 × 56. width, а не тільки min-width — інакше
   .service-cta__btn { min-width: 176px } звузив би її. */
.btn--lg {
    width:         270px;
    min-width:     270px;
    height:        56px;
    min-height:    56px;
    padding:       17px 28px;
    border-radius: 10px;
}

.btn--outline {
    min-width:     270px;
    height:        56px;
    min-height:    56px;
    padding:       14px 34px;
    border:        1px solid color-mix(in srgb, var(--color-sky) 50%, transparent);
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--color-bg-alt) 55%, transparent);
    color:         var(--color-sky);
    font-size:     var(--fs-button);
    line-height:   var(--lh-button);
    transition:    border-color var(--transition),
                   background-color var(--transition),
                   color var(--transition);
}

.btn--outline:hover,
.btn--outline:focus-visible,
.btn--outline:active {
    border-color:     var(--color-sky);
    background-color: var(--surface-soft);
    color:            var(--color-text);
}

.btn--outline .icon { flex: none; }

.service-hero,
.service-premium,
.service-offers,
.service-advantages,
.service-overview,
.service-benefits,
.service-scope,
.service-process,
.service-cta,
.service-faq {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
}

.service-overview__decor,
.service-benefits__decor,
.service-scope__decor,
.service-process__decor,
.service-cta__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.service-hero > .container,
.service-premium > .container,
.service-offers > .container,
.service-advantages > .container,
.service-overview > .container,
.service-benefits > .container,
.service-scope > .container,
.service-process > .container,
.service-cta > .container,
.service-faq > .container {
    position: relative;
    z-index: 1;
}

.service-hero {
    --hero-copy-size: clamp(15px, 1vw, var(--fs-lead));
    padding: 32px 0 64px;
    background: var(--color-bg);
}

.service-hero__visual {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    display: block;
    width: min(100%, 1774px);
    background-image: url("../../img/poslugy-hero.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, .08) 24px,
        rgba(0, 0, 0, .3) 70px,
        rgba(0, 0, 0, .62) 125px,
        rgba(0, 0, 0, .88) 170px,
        #000 200px,
        #000 calc(100% - 200px),
        rgba(0, 0, 0, .88) calc(100% - 170px),
        rgba(0, 0, 0, .62) calc(100% - 125px),
        rgba(0, 0, 0, .3) calc(100% - 70px),
        rgba(0, 0, 0, .08) calc(100% - 24px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, .08) 24px,
        rgba(0, 0, 0, .3) 70px,
        rgba(0, 0, 0, .62) 125px,
        rgba(0, 0, 0, .88) 170px,
        #000 200px,
        #000 calc(100% - 200px),
        rgba(0, 0, 0, .88) calc(100% - 170px),
        rgba(0, 0, 0, .62) calc(100% - 125px),
        rgba(0, 0, 0, .3) calc(100% - 70px),
        rgba(0, 0, 0, .08) calc(100% - 24px),
        transparent 100%
    );
    pointer-events: none;
    transform: translateX(-50%);
}

.service-hero__visual::after {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        linear-gradient(
            90deg,
            var(--color-bg) 0%,
            color-mix(in srgb, var(--color-bg) 92%, transparent) 64px,
            color-mix(in srgb, var(--color-bg) 66%, transparent) 132px,
            color-mix(in srgb, var(--color-bg) 34%, transparent) 202px,
            color-mix(in srgb, var(--color-bg) 10%, transparent) 252px,
            transparent 290px,
            transparent calc(100% - 290px),
            color-mix(in srgb, var(--color-bg) 10%, transparent) calc(100% - 252px),
            color-mix(in srgb, var(--color-bg) 34%, transparent) calc(100% - 202px),
            color-mix(in srgb, var(--color-bg) 66%, transparent) calc(100% - 132px),
            color-mix(in srgb, var(--color-bg) 92%, transparent) calc(100% - 64px),
            var(--color-bg) 100%
        ),
        linear-gradient(
            180deg,
            var(--color-bg) 0%,
            color-mix(in srgb, var(--color-bg) 76%, transparent) 42px,
            color-mix(in srgb, var(--color-bg) 36%, transparent) 106px,
            color-mix(in srgb, var(--color-bg) 10%, transparent) 164px,
            transparent 210px,
            transparent calc(100% - 210px),
            color-mix(in srgb, var(--color-bg) 14%, transparent) calc(100% - 160px),
            color-mix(in srgb, var(--color-bg) 42%, transparent) calc(100% - 98px),
            color-mix(in srgb, var(--color-bg) 82%, transparent) calc(100% - 38px),
            var(--color-bg) 100%
        );
    pointer-events: none;
}

.service-hero::after {
    content: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(
            180deg,
            rgba(3, 22, 49, .1) 0%,
            transparent 26%,
            transparent 78%,
            rgba(3, 22, 49, .72) 100%
        ),
        linear-gradient(
            90deg,
            rgba(3, 22, 49, .98) 0%,
            rgba(3, 22, 49, .86) 28%,
            rgba(3, 22, 49, .4) 50%,
            rgba(3, 22, 49, .06) 68%,
            transparent 80%
        );
    pointer-events: none;
}

.service-hero > .container {
    display: block;
}

.service-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
        /* Спільний ритм угорі сторінки: надзаголовок → 20 → H1 → 26 → лід. */
    gap: 20px;
    width: 52%;
    max-width: 691px;
    min-width: 0;
}

.service-hero__action-row {
    position: relative;
    display: grid;
    grid-template-columns: 52% minmax(0, 42%);
    align-items: center;
    justify-content: space-between;
    gap: 6%;
    min-height: 56px;
    margin-top: 20px;
}

.service-hero__heading {
    margin: 0;
    max-width: 691px;
    font-size: clamp(40px, 3vw, var(--fs-h1));
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: var(--ls-h1);
    color: var(--color-text-light);
}

.service-hero__heading .is-accent,
.service-overview__heading .is-accent,
.service-benefits__heading .is-accent,
.service-scope__heading .is-accent,
.service-process__heading .is-accent,
.service-cta__heading .is-accent,
.service-faq__heading .is-accent {
    display: inline-block;
    font-weight: 600;
    letter-spacing: -1px;
    background-image: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.service-hero__intro {
    margin: 0;
    max-width: 691px;
    font-size: var(--hero-copy-size);
    line-height: 1.5;
    letter-spacing: var(--ls-lead);
    color: var(--color-text-soft);
}

.service-hero__highlights {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 42%;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateY(0);
}

.service-hero__highlight {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 44px;
    max-width: 100%;
    padding: 8px 20px 8px 14px;
    border: 1px solid rgba(184, 209, 255, .24);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(55, 104, 164, .25) 0%, rgba(12, 45, 87, .34) 46%, rgba(3, 20, 50, .24) 100%);
    color: rgba(224, 236, 255, .84);
    font-family: var(--font-body);
    font-size: var(--hero-copy-size);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--ls-lead);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 -1px 0 rgba(76, 141, 255, .08),
        0 10px 32px rgba(0, 11, 35, .2);
    backdrop-filter: blur(14px) saturate(1.16);
    -webkit-backdrop-filter: blur(14px) saturate(1.16);
}

.service-hero__highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(112deg, rgba(255, 255, 255, .1) 0%, rgba(184, 209, 255, .035) 32%, transparent 58%);
    pointer-events: none;
}

.service-hero__highlight-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    fill: none;
    stroke: rgba(137, 211, 255, .88);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}





.service-premium {
    isolation: isolate;
    padding: 56px 0 72px;
    background-image: radial-gradient(ellipse 390px 220px at 50% 0%, rgba(0, 152, 240, .12) 0%, transparent 70%);
    background-repeat: no-repeat;
}

.service-premium__visual {
    position: absolute;
    z-index: 0;
    display: block;
    background-image: url("../../img/poslugy-premium-bg.webp");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: cover;
    mix-blend-mode: screen;
    pointer-events: none;
}

.service-premium__visual--left {
    bottom: -34%;
    left: -10%;
    width: 72%;
    height: 142%;
    opacity: .24;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .82) 48%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .82) 48%, transparent 100%);
}

.service-premium__visual--right {
    top: -38%;
    right: -12%;
    width: 58%;
    height: 126%;
    opacity: .11;
    transform: rotate(180deg);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .68) 42%, transparent 92%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .68) 42%, transparent 92%);
}

.service-premium__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.service-premium-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--color-sky) 18%, transparent);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(24, 55, 105, .45) 0%, rgba(5, 25, 61, .72) 72%),
        var(--color-bg);
    box-shadow: 0 18px 44px -34px rgba(0, 0, 0, .82);
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.service-premium-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;
    height: 1px;
    background: var(--gradient-accent);
    opacity: .75;
}

.service-premium-card:hover,
.service-premium-card:focus-within {
    border-color: color-mix(in srgb, var(--color-sky) 42%, transparent);
    box-shadow: 0 22px 54px -36px rgba(0, 142, 238, .48);
    transform: translateY(-2px);
}

.service-premium-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.service-premium-card__number {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.6px;
    color: var(--color-sky);
}

.service-premium-card__icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-sky) 30%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-sky);
}

.service-premium-card__icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.service-premium-card__title {
    margin: 0;
    font-size: clamp(19px, 1.35vw, 22px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.35px;
    color: var(--color-text);
}

.service-premium-card__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--color-text-soft);
}

.service-offers {
    isolation: isolate;
    padding: 82px 0 92px;
    overflow: hidden;
    background-color: #061a3a;
    background-image:
        radial-gradient(circle at 50% 16%, rgba(49, 119, 232, .08) 0%, transparent 38%),
        linear-gradient(180deg, rgba(8, 33, 72, .34) 0%, rgba(3, 18, 42, .2) 100%);
}

.service-offers::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(48%, 720px);
    z-index: 0;
    background-image:
        linear-gradient(rgba(72, 145, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72, 145, 255, .07) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .28;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 24%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 24%, #000 100%);
    pointer-events: none;
}

.service-offers > .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.service-offers__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.service-offers__heading {
    max-width: 900px;
    margin: 0;
    font-size: clamp(31px, 3.25vw, 46px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: var(--color-text-light);
}

.service-offers__heading .is-accent {
    display: inline-block;
    font-weight: 600;
    letter-spacing: -1px;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.service-offers__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

.service-offer-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-self: start;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 26px;
    border: 1px solid rgba(107, 161, 235, .17);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(12, 42, 87, .96) 0%, rgba(7, 28, 63, .98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(164, 205, 255, .05),
        0 16px 40px -34px rgba(0, 0, 0, .82);
    transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.service-offer-card::after {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 136, 255, .08) 0%, transparent 70%);
    pointer-events: none;
}

.service-offer-card:hover,
.service-offer-card:focus-within {
    border-color: rgba(107, 174, 255, .32);
    background: linear-gradient(145deg, rgba(14, 48, 98, .98) 0%, rgba(7, 29, 66, .99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(164, 205, 255, .08),
        0 20px 48px -36px rgba(0, 0, 0, .88);
}

.service-offer-card__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.service-offer-card__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(207, 224, 249, .55);
}

.service-offer-card__icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(64, 154, 255, .25);
    border-radius: 8px;
    background: rgba(48, 126, 231, .13);
    color: #69b6ff;
    box-shadow:
        inset 0 0 16px rgba(32, 121, 234, .08),
        0 0 20px rgba(16, 100, 220, .12);
}

.service-offer-card__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(90, 176, 255, .34));
}

.service-offer-card__title {
    margin: 0;
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.8px;
    color: var(--color-text);
}

.service-offer-card__lead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #6ebaff;
}

.service-offer-card__lead::after {
    content: "+";
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-primary-light) 48%, transparent);
    border-radius: 50%;
    color: var(--color-primary-light);
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    transition: transform .45s ease, color var(--transition), border-color var(--transition);
}

.service-offer-card__details {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    gap: 18px;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .65s ease, opacity .35s ease, transform .45s ease;
}

.service-offer-card:hover .service-offer-card__details,
.service-offer-card:focus-within .service-offer-card__details {
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
}

.service-offer-card:hover .service-offer-card__lead::after,
.service-offer-card:focus-within .service-offer-card__lead::after {
    border-color: var(--color-primary-light);
    color: var(--color-text);
    transform: rotate(45deg);
}













.service-offer-card__result {
    margin-top: auto;
    padding: 16px 18px;
    border: 1px solid rgba(79, 144, 235, .13);
    border-left: 2px solid #4c96f5;
    border-radius: 7px;
    background: rgba(22, 66, 127, .22);
}

.service-offer-card__result strong {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #4c8dff;
    text-shadow:
        0 0 6px rgba(76, 141, 255, .78),
        0 0 15px rgba(44, 92, 230, .56);
}

.service-offer-card__result p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--color-text);
}

.service-offer-card__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 13px 22px;
    border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    border-radius: 6px;
    background-color: var(--color-primary);
    background-image: linear-gradient(90deg, #398be8 0%, #66b6ff 100%);
    color: var(--color-text);
    font-size: var(--fs-button);
    line-height: 20px;
    text-decoration: none;
    box-shadow: var(--shadow-btn);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.service-offer-card__link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--transition);
}

.service-offer-card__link:hover,
.service-offer-card__link:focus-visible {
    border-color: color-mix(in srgb, var(--color-text) 35%, transparent);
    box-shadow: 0 12px 30px rgba(28, 92, 219, .34);
    transform: translateY(-1px);
}

.service-offer-card__link:hover svg,
.service-offer-card__link:focus-visible svg {
    transform: translateX(3px);
}

.service-offer-card__link:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
}

.service-advantages {
    isolation: isolate;
    overflow: hidden;
    padding: 86px 0 92px;
    background-color: #061a3a;
    background-image:
        radial-gradient(circle at 50% 14%, rgba(49, 119, 232, .08) 0%, transparent 38%),
        linear-gradient(180deg, rgba(8, 33, 72, .34) 0%, rgba(3, 18, 42, .2) 100%);
}

.service-advantages::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: min(46%, 690px);
    background-image:
        linear-gradient(rgba(72, 145, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72, 145, 255, .06) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .24;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 72%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 72%, transparent 100%);
    pointer-events: none;
}

.service-advantages > .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.service-advantages__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.service-advantages__heading {
    max-width: 900px;
    margin: 0;
    font-size: clamp(31px, 3.25vw, 46px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: var(--color-text-light);
}

.service-advantages__heading .is-accent {
    display: inline-block;
    font-weight: 600;
    letter-spacing: -1px;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.service-advantages__grid {
    display: grid;
    grid-template-columns: minmax(0, 1100px);
    justify-content: center;
    gap: 12px;
}

.service-advantage-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 13px;
    align-content: start;
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(107, 161, 235, .16);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(12, 42, 87, .96) 0%, rgba(7, 28, 63, .98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(164, 205, 255, .05),
        0 18px 46px -34px rgba(0, 0, 0, .9);
    transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.service-advantage-card:nth-child(1) {
    min-height: 174px;
    justify-content: flex-start;
    padding-right: clamp(310px, 38%, 410px);
    border-color: color-mix(in srgb, var(--color-primary-light) 24%, transparent);
    background:
        radial-gradient(circle at 81% 48%, rgba(0, 142, 238, .13) 0%, rgba(76, 141, 255, .045) 27%, transparent 44%),
        linear-gradient(118deg, rgba(18, 48, 96, .72) 0%, rgba(7, 30, 67, .94) 54%, rgba(3, 19, 48, .98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(184, 209, 255, .07),
        inset -1px 0 0 rgba(76, 141, 255, .05),
        0 24px 64px -44px rgba(0, 0, 0, .98);
}

.service-advantage-card:nth-child(1)::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 0;
    width: 42%;
    background:
        linear-gradient(90deg, rgba(3, 19, 48, .99) 0%, rgba(3, 19, 48, .5) 25%, rgba(3, 19, 48, .09) 58%, transparent 100%),
        linear-gradient(180deg, rgba(3, 19, 48, .38) 0%, transparent 31%, transparent 64%, rgba(3, 19, 48, .56) 100%),
        url("../../img/poslugy-advantage-1.webp") 58% center / auto 78% no-repeat;
    opacity: .72;
    filter: saturate(.68) brightness(.89) contrast(1.16);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .78) 22%, #000 70%, rgba(0, 0, 0, .22) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .78) 22%, #000 70%, rgba(0, 0, 0, .22) 100%);
    pointer-events: none;
    transition: opacity var(--transition), transform .65s ease, filter var(--transition);
}

.service-advantage-card:nth-child(1):hover::before,
.service-advantage-card:nth-child(1):focus-within::before {
    opacity: .82;
    filter: saturate(.86) brightness(.97) contrast(1.18);
    transform: scale(1.018);
}

.service-advantage-card:nth-child(1):hover,
.service-advantage-card:nth-child(1):focus-within {
    border-color: color-mix(in srgb, var(--color-primary-light) 46%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(184, 209, 255, .1),
        0 28px 70px -44px rgba(44, 92, 230, .68);
}

.service-advantage-card:nth-child(2) {
    min-height: 174px;
    justify-content: flex-start;
    padding-right: clamp(310px, 38%, 410px);
    border-color: color-mix(in srgb, var(--color-primary-light) 24%, transparent);
    background:
        radial-gradient(circle at 81% 48%, rgba(0, 142, 238, .14) 0%, rgba(76, 141, 255, .05) 26%, transparent 44%),
        linear-gradient(118deg, rgba(18, 48, 96, .72) 0%, rgba(7, 30, 67, .94) 54%, rgba(3, 19, 48, .98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(184, 209, 255, .07),
        inset -1px 0 0 rgba(76, 141, 255, .05),
        0 24px 64px -44px rgba(0, 0, 0, .98);
}

.service-advantage-card:nth-child(2)::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 0;
    width: 42%;
    background:
        linear-gradient(90deg, rgba(3, 19, 48, .99) 0%, rgba(3, 19, 48, .48) 25%, rgba(3, 19, 48, .08) 58%, transparent 100%),
        linear-gradient(180deg, rgba(3, 19, 48, .36) 0%, transparent 32%, transparent 65%, rgba(3, 19, 48, .54) 100%),
        url("../../img/poslugy-advantage-2.webp") 57% center / auto 82% no-repeat;
    opacity: .7;
    filter: saturate(.74) brightness(.9) contrast(1.18);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .78) 22%, #000 70%, rgba(0, 0, 0, .22) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .78) 22%, #000 70%, rgba(0, 0, 0, .22) 100%);
    pointer-events: none;
    transition: opacity var(--transition), transform .65s ease, filter var(--transition);
}

.service-advantage-card:nth-child(2):hover::before,
.service-advantage-card:nth-child(2):focus-within::before {
    opacity: .84;
    filter: saturate(.88) brightness(.97) contrast(1.19);
    transform: scale(1.018);
}

.service-advantage-card:nth-child(2):hover,
.service-advantage-card:nth-child(2):focus-within {
    border-color: color-mix(in srgb, var(--color-primary-light) 46%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(184, 209, 255, .1),
        0 28px 70px -44px rgba(44, 92, 230, .68);
}

.service-advantage-card:nth-child(3) {
    min-height: 174px;
    justify-content: flex-start;
    padding-right: clamp(310px, 38%, 410px);
    border-color: color-mix(in srgb, var(--color-primary-light) 24%, transparent);
    background:
        radial-gradient(circle at 81% 46%, rgba(76, 141, 255, .15) 0%, rgba(0, 142, 238, .055) 25%, transparent 43%),
        linear-gradient(118deg, rgba(18, 48, 96, .72) 0%, rgba(7, 30, 67, .94) 54%, rgba(3, 19, 48, .98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(184, 209, 255, .07),
        inset -1px 0 0 rgba(76, 141, 255, .05),
        0 24px 64px -44px rgba(0, 0, 0, .98);
}

.service-advantage-card:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 42%;
    background:
        linear-gradient(90deg, rgba(3, 19, 48, .99) 0%, rgba(3, 19, 48, .48) 25%, rgba(3, 19, 48, .08) 58%, transparent 100%),
        linear-gradient(180deg, rgba(3, 19, 48, .34) 0%, transparent 32%, transparent 65%, rgba(3, 19, 48, .52) 100%),
        url("../../img/poslugy-advantage-3.webp") 57% center / auto 82% no-repeat;
    opacity: .72;
    filter: saturate(.76) brightness(.91) contrast(1.17);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .78) 22%, #000 70%, rgba(0, 0, 0, .22) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .78) 22%, #000 70%, rgba(0, 0, 0, .22) 100%);
    pointer-events: none;
    transition: opacity var(--transition), transform .65s ease, filter var(--transition);
}

.service-advantage-card:nth-child(3):hover::before,
.service-advantage-card:nth-child(3):focus-within::before {
    opacity: .86;
    filter: saturate(.9) brightness(.98) contrast(1.18);
    transform: scale(1.018);
}

.service-advantage-card:nth-child(3):hover,
.service-advantage-card:nth-child(3):focus-within {
    border-color: color-mix(in srgb, var(--color-primary-light) 46%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(184, 209, 255, .1),
        0 28px 70px -44px rgba(44, 92, 230, .68);
}

.service-advantage-card:nth-child(4) {
    min-height: 174px;
    justify-content: flex-start;
    padding-right: clamp(310px, 38%, 410px);
    border-color: color-mix(in srgb, var(--color-primary-light) 24%, transparent);
    background:
        radial-gradient(circle at 81% 48%, rgba(0, 142, 238, .14) 0%, rgba(76, 141, 255, .05) 27%, transparent 44%),
        linear-gradient(118deg, rgba(18, 48, 96, .72) 0%, rgba(7, 30, 67, .94) 54%, rgba(3, 19, 48, .98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(184, 209, 255, .07),
        inset -1px 0 0 rgba(76, 141, 255, .05),
        0 24px 64px -44px rgba(0, 0, 0, .98);
}

.service-advantage-card:nth-child(4)::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 0;
    width: 42%;
    background:
        linear-gradient(90deg, rgba(3, 19, 48, .99) 0%, rgba(3, 19, 48, .5) 25%, rgba(3, 19, 48, .09) 58%, transparent 100%),
        linear-gradient(180deg, rgba(3, 19, 48, .38) 0%, transparent 31%, transparent 64%, rgba(3, 19, 48, .56) 100%),
        url("../../img/poslugy-advantage-4.webp") 57% center / auto 78% no-repeat;
    opacity: .7;
    filter: saturate(.72) brightness(.9) contrast(1.17);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .78) 22%, #000 70%, rgba(0, 0, 0, .22) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .78) 22%, #000 70%, rgba(0, 0, 0, .22) 100%);
    pointer-events: none;
    transition: opacity var(--transition), transform .65s ease, filter var(--transition);
}

.service-advantage-card:nth-child(4):hover::before,
.service-advantage-card:nth-child(4):focus-within::before {
    opacity: .84;
    filter: saturate(.86) brightness(.97) contrast(1.18);
    transform: scale(1.018);
}

.service-advantage-card:nth-child(4):hover,
.service-advantage-card:nth-child(4):focus-within {
    border-color: color-mix(in srgb, var(--color-primary-light) 46%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(184, 209, 255, .1),
        0 28px 70px -44px rgba(44, 92, 230, .68);
}

.service-advantage-card:nth-child(-n + 4) {
    background:
        radial-gradient(circle at 82% 48%, rgba(61, 136, 239, .12) 0%, rgba(27, 90, 183, .04) 28%, transparent 48%),
        linear-gradient(118deg, rgba(13, 44, 90, .98) 0%, rgba(8, 31, 68, .98) 54%, rgba(5, 24, 56, .99) 100%);
}

.service-advantage-card:nth-child(-n + 4)::before {
    width: 40%;
    opacity: .7;
    filter: saturate(.76) brightness(.93) contrast(1.08);
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, .22) 12%,
        rgba(0, 0, 0, .72) 38%,
        #000 76%,
        rgba(0, 0, 0, .72) 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, .22) 12%,
        rgba(0, 0, 0, .72) 38%,
        #000 76%,
        rgba(0, 0, 0, .72) 100%
    );
}

.service-advantage-card:nth-child(-n + 4):hover::before,
.service-advantage-card:nth-child(-n + 4):focus-within::before {
    opacity: .82;
    filter: saturate(.88) brightness(1) contrast(1.1);
}

.service-advantage-card:nth-child(-n + 4):hover,
.service-advantage-card:nth-child(-n + 4):focus-within {
    border-color: rgba(107, 174, 255, .3);
    background:
        radial-gradient(circle at 82% 48%, rgba(61, 136, 239, .15) 0%, rgba(27, 90, 183, .05) 30%, transparent 49%),
        linear-gradient(118deg, rgba(15, 48, 97, .99) 0%, rgba(9, 34, 74, .99) 54%, rgba(5, 25, 59, 1) 100%);
    box-shadow:
        inset 0 1px 0 rgba(164, 205, 255, .08),
        0 22px 52px -36px rgba(0, 0, 0, .94);
    transform: translateY(-1px);
}

.service-advantage-card::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -90px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 132, 239, .07) 0%, transparent 70%);
    pointer-events: none;
}

.service-advantage-card:hover,
.service-advantage-card:focus-within {
    border-color: rgba(107, 174, 255, .3);
    background-color: rgba(10, 39, 82, .98);
    box-shadow:
        inset 0 1px 0 rgba(164, 205, 255, .08),
        0 22px 52px -36px rgba(0, 0, 0, .94);
    transform: translateY(-1px);
}

.service-advantage-card__top {
    position: relative;
    z-index: 2;
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    align-self: start;
    padding-top: 5px;
}

.service-advantage-card__number {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.5px;
    color: #6ebaff;
}

.service-advantage-card__line {
    display: none;
}

.service-advantage-card__title {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0 0 16px;
    font-size: clamp(20px, 1.5vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.45px;
    color: var(--color-text);
}

.service-advantage-card__title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-primary-light) 42%, transparent) 18%,
        color-mix(in srgb, var(--color-sky) 42%, transparent) 50%,
        color-mix(in srgb, var(--color-primary-light) 42%, transparent) 82%,
        transparent 100%
    );
}

.service-advantage-card__text {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    overflow: hidden;
    max-height: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-soft);
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .5s ease, margin-top .4s ease, opacity .3s ease, transform .4s ease;
}

.service-advantage-card:hover .service-advantage-card__text,
.service-advantage-card:focus-within .service-advantage-card__text {
    max-height: 180px;
    margin-top: 14px;
    opacity: 1;
    transform: translateY(0);
}

.service-advantage-card__result {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 0;
    padding-top: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--color-primary-light);
}

.service-advantage-card__result span {
    position: relative;
    display: block;
    flex: 0 0 54px;
    width: 54px;
    height: 12px;
    margin: 0;
    color: transparent;
    font-size: 0;
    transition: transform var(--transition);
}

.service-advantage-card__result span::before {
    content: "";
    position: absolute;
    top: 5.5px;
    left: 0;
    width: 47px;
    height: 1px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(0, 152, 240, .18) 0%, #008eee 32%, #4c8dff 72%, #b8d1ff 100%);
    box-shadow:
        0 0 4px rgba(0, 142, 238, .9),
        0 0 9px rgba(76, 141, 255, .7),
        0 0 16px rgba(44, 92, 230, .46);
}

.service-advantage-card__result span::after {
    content: "";
    position: absolute;
    top: 2.5px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #b8d1ff;
    border-right: 1px solid #b8d1ff;
    filter:
        drop-shadow(0 0 4px rgba(76, 141, 255, .95))
        drop-shadow(0 0 9px rgba(0, 142, 238, .72));
    transform: rotate(45deg);
}

.service-advantage-card:hover .service-advantage-card__result span {
    transform: translateX(2px);
}

.service-advantages__conclusion {
    position: relative;
    max-width: 900px;
    margin: 20px auto 0;
    padding: 28px 24px 0;
    text-align: center;
}

.service-advantages__conclusion::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(560px, 72vw);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(76, 141, 255, .48) 26%, rgba(119, 198, 255, .58) 50%, rgba(76, 141, 255, .48) 74%, transparent 100%);
    transform: translateX(-50%);
}

.service-advantages__conclusion-title {
    margin: 0 0 10px;
    font-size: clamp(21px, 1.7vw, 27px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}

.service-advantages__conclusion-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-soft);
}

.service-advantages__conclusion-text strong {
    font-weight: 600;
    color: var(--color-primary-light);
}

.coordination-process {
    position: relative;
    overflow: hidden;
    padding: 84px 0 88px;
    background:
        radial-gradient(circle at 50% 48%, rgba(44, 92, 230, .1) 0%, transparent 42%),
        linear-gradient(180deg, rgba(4, 24, 57, .98) 0%, rgba(3, 20, 50, 1) 100%);
}

.coordination-process__ambient {
    position: absolute;
    top: 8%;
    left: 50%;
    width: min(920px, 76vw);
    height: 340px;
    background: radial-gradient(ellipse, rgba(0, 142, 238, .09) 0%, rgba(76, 141, 255, .035) 40%, transparent 72%);
    filter: blur(24px);
    transform: translateX(-50%);
    pointer-events: none;
}

.coordination-process > .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.coordination-process__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

/* Акцент переноситься на два рядки, тому градієнт живе на БЛОЦІ заголовка,
   а не на .is-accent — так само, як у .hero__title на Головній. Для
   інлайнового елемента браузер малює фон по СУМАРНІЙ ширині фрагментів, і
   другий рядок стартує з середини градієнта (блідим). Figma кладе градієнт
   на бокс текстового шару, і кожен рядок бере свій відрізок за своїм x.
   Наслідок: колір частин заголовка задається через -webkit-text-fill-color. */
.coordination-process__heading {
    max-width: 980px;
    margin: 0;
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: var(--color-text-light);
    -webkit-text-fill-color: var(--color-text-light);
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
}

.coordination-process__heading .is-accent {
    font-weight: 600;
    letter-spacing: -1px;
    /* Прозорий фарб — крізь нього видно градієнт заголовка. */
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.coordination-process__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.coordination-process__steps::before {
    content: "";
    position: absolute;
    top: 27px;
    right: 8%;
    left: 8%;
    z-index: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(76, 141, 255, .52) 12%, rgba(119, 198, 255, .76) 50%, rgba(76, 141, 255, .52) 88%, transparent 100%);
    box-shadow: 0 0 12px rgba(76, 141, 255, .34);
}

.coordination-process-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 12px;
    text-align: center;
    transition: transform var(--transition);
}

.coordination-process-step__number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border: 1px solid color-mix(in srgb, var(--color-primary-light) 48%, transparent);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.4px;
    color: #b8d1ff;
    background:
        radial-gradient(circle at 38% 30%, rgba(119, 198, 255, .2) 0%, transparent 42%),
        rgba(4, 25, 58, .98);
    box-shadow:
        inset 0 0 0 5px rgba(76, 141, 255, .035),
        0 0 0 6px rgba(3, 20, 50, .96),
        0 0 20px rgba(44, 92, 230, .18);
    transition: border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.coordination-process-step__title {
    max-width: 210px;
    margin: 22px 0 0;
    font-size: clamp(16px, 1.25vw, 19px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.25px;
    color: var(--color-text);
}

.coordination-process-step:hover {
    transform: translateY(-3px);
}

.coordination-process-step:hover .coordination-process-step__number {
    border-color: rgba(119, 198, 255, .9);
    color: #e8f2ff;
    box-shadow:
        inset 0 0 0 5px rgba(76, 141, 255, .07),
        0 0 0 6px rgba(3, 20, 50, .96),
        0 0 14px rgba(0, 142, 238, .48),
        0 0 30px rgba(44, 92, 230, .32);
    transform: scale(1.06);
}

.coordination-process__action {
    display: flex;
    justify-content: center;
}

.coordination-process__btn {
    min-width: 290px;
}@media (max-width: 1024px) {
    .coordination-process__steps {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 720px;
        width: 100%;
        margin-inline: auto;
    }

    .coordination-process__steps::before {
        top: 26px;
        right: auto;
        bottom: 26px;
        left: 25px;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, transparent 0%, rgba(76, 141, 255, .58) 8%, rgba(119, 198, 255, .72) 50%, rgba(76, 141, 255, .58) 92%, transparent 100%);
    }

    .coordination-process-step {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 17px;
        align-items: center;
        min-height: 68px;
        padding: 8px 0;
        text-align: left;
    }

    .coordination-process-step__number {
        width: 51px;
        height: 51px;
    }

    .coordination-process-step__title {
        max-width: none;
        margin: 0;
    }
}/* ── Списки в картках пропозицій і підзаголовки у відповідях FAQ ──────────
   Обидва класи приходять із контенту мета-полів (HTML у БД), тому в
   партіалах теми їх нема — статичний пошук по розмітці їх не знаходить.
   Не видаляти як «невикористані»: на /poslugy/ вони реально в DOM. */
.service-offer-card__list,
.service-offer-card__list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-offer-card__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--color-text-soft);
}

.service-offer-card__list > li,
.service-offer-card__list ul > li {
    position: relative;
    padding-left: 18px;
}

.service-offer-card__list > li::before,
.service-offer-card__list ul > li::before {
    content: "";
    position: absolute;
    top: .65em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--color-secondary);
    box-shadow: 0 0 10px rgba(5, 165, 255, .55);
}

.service-offer-card__list ul {
    display: grid;
    gap: 6px;
    margin-top: 8px;
    padding-left: 12px;
    color: var(--color-muted);
}

.service-offer-card__list ul > li::before {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-sky);
    box-shadow: none;
}

.faq-item__answer-title {
    font-weight: 600;
    color: var(--color-text);
}

@media (max-width: 768px) {
    .coordination-process {
        padding: 64px 0;
    }

    .coordination-process > .container {
        gap: 34px;
    }

    .coordination-process__heading {
        font-size: clamp(28px, 8vw, 36px);
        letter-spacing: -1px;
    }

    .coordination-process__btn {
        width: 100%;
        min-width: 0;
    }
}

.service-overview,
.service-benefits,
.service-scope,
.service-process,
.service-faq {
    padding: 120px 0;
}

.service-overview__glow,
.service-benefits__glow,
.service-scope__glow,
.service-process__glow,
.service-cta__glow {
    position: absolute;
    display: block;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background-image: radial-gradient(circle, var(--color-secondary) 0%, transparent 70%);
    opacity: .08;
}

.service-benefits__glow,
.service-process__glow,
.service-cta__glow {
    right: -280px;
    bottom: -320px;
}

.service-overview > .container,
.service-benefits > .container,
.service-scope > .container,
.service-process > .container,
.service-faq > .container {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.service-overview__title,
.service-benefits__title,
.service-scope__title,
.service-process__title,
.service-faq__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    text-align: center;
}

.service-overview__heading,
.service-benefits__heading,
.service-scope__heading,
.service-process__heading,
.service-faq__heading,
.service-cta__heading {
    margin: 0;
    max-width: 1100px;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -1.5px;
    color: var(--color-text-light);
}

.service-cta {
    padding: 88px 0;
    background-color: #061a3a;
    background-image:
        radial-gradient(circle at 50% 28%, rgba(48, 116, 225, .06) 0%, transparent 42%),
        linear-gradient(180deg, rgba(8, 33, 72, .34) 0%, rgba(3, 18, 42, .2) 100%);
}

.service-cta__decor {
    display: none;
}

.service-cta__banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    max-width: 1100px;
    min-height: 430px;
    margin: 0 auto;
    padding: 64px clamp(32px, 6vw, 88px);
    border: 1px solid rgba(115, 173, 247, .24);
    border-radius: 24px;
    background:
        radial-gradient(circle at 16% 4%, rgba(67, 139, 244, .22) 0%, rgba(35, 93, 181, .09) 27%, transparent 51%),
        linear-gradient(155deg, rgba(15, 49, 101, .96) 0%, rgba(7, 30, 68, .98) 58%, rgba(3, 19, 47, .99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(193, 221, 255, .08),
        0 28px 68px -56px rgba(0, 0, 0, .9);
    text-align: center;
}

.service-cta__banner::before,
.service-cta__banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.service-cta__banner::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(100, 164, 246, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 164, 246, .045) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: .12;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 58%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 58%);
}

.service-cta__banner::after {
    right: -120px;
    bottom: -180px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28, 102, 210, .09) 0%, transparent 70%);
}

.service-cta__content {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.service-cta__eyebrow {
    margin: 0 0 2px;
}

.service-cta__heading {
    max-width: 880px;
    font-size: clamp(32px, 3.7vw, 50px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -1.35px;
}

.service-cta__text {
    margin: 0;
    max-width: 700px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text-soft);
}

.service-cta__actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.service-cta__btn {
    min-width: 176px;
    min-height: 48px;
    padding: 13px 22px;
    border-radius: 7px;
}

.service-cta__btn.btn--primary {
    border-color: rgba(185, 220, 255, .2);
    background-image: linear-gradient(90deg, #398be8 0%, #68b7ff 100%);
    box-shadow: 0 12px 30px -14px rgba(54, 145, 239, .62);
}

.service-cta__btn.btn--outline {
    border-color: rgba(134, 185, 244, .3);
    background: rgba(13, 46, 94, .4);
    color: var(--color-text-light);
}

.service-cta__btn.btn--outline:hover,
.service-cta__btn.btn--outline:focus-visible {
    border-color: rgba(134, 190, 255, .58);
    background: rgba(22, 68, 132, .52);
}

.service-faq__title {
    margin-bottom: 0;
}

.service-faq {
    isolation: isolate;
    padding: 92px 0 108px;
    background-color: #061a3a;
    background-image:
        radial-gradient(circle at 50% 16%, rgba(49, 119, 232, .07) 0%, transparent 38%),
        linear-gradient(180deg, rgba(8, 33, 72, .34) 0%, rgba(3, 18, 42, .22) 100%);
}

.service-faq::before {
    content: "";
    position: absolute;
    top: 47%;
    right: 209px;
    bottom: auto;
    z-index: 0;
    width: min(68vw, 900px);
    aspect-ratio: 1200 / 760;
    background:
        radial-gradient(ellipse 58% 54% at 61% 52%, rgba(39, 121, 232, .13) 0%, rgba(24, 86, 178, .055) 48%, transparent 78%),
        url("../../img/poslugy-faq-grid.svg") center / contain no-repeat;
    opacity: .25;
    filter: saturate(.76) brightness(.9);
    -webkit-mask-image: radial-gradient(ellipse 66% 68% at 63% 50%, #000 20%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .16) 70%, transparent 94%);
    mask-image: radial-gradient(ellipse 66% 68% at 63% 50%, #000 20%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .16) 70%, transparent 94%);
    transform: rotate(-2deg);
    pointer-events: none;
}

.service-faq::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgba(6, 26, 58, .18) 0%, rgba(6, 26, 58, .46) 50%, rgba(6, 26, 58, .14) 100%);
    pointer-events: none;
}

.service-faq > .container {
    position: relative;
    z-index: 1;
    gap: 40px;
}

.service-faq__title {
    gap: 14px;
}

.service-faq__heading {
    max-width: 820px;
    font-size: clamp(31px, 3.25vw, 46px);
}

/* Список вужчий за контейнер (820px проти 1300px), а заголовок секції
   центрований — без auto-полів список притискався вліво і композиція
   виглядала перекошеною. */
.service-faq .rich-bullets {
    display: grid;
    gap: 6px;
}

/* Єдине, що лишилось від локальних правил FAQ: центрування.
   Вигляд списку й карток тепер повністю зі спільного блоку css/main.css —
   того самого, що на Головній. На Головній список центрує батьківський
   флекс (.faq__wrp), а тут контейнер — звичайний блок, тому auto-поля.
   Список вужчий за контейнер (912 проти 1300), без цього він притискався б
   уліво під центрованим заголовком секції. */
.service-faq .faq__list {
    margin-inline: auto;
}



.faq-numbered-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 24px;
}

.faq-numbered-list li::marker {
    font-weight: 600;
    color: var(--color-primary-light);
}@media (max-width: 768px) {
    .service-faq {
        padding: 64px 0 72px;
    }

    .service-faq::before {
        top: 53%;
        right: -54%;
        bottom: auto;
        width: 126vw;
        opacity: .2;
        -webkit-mask-image: radial-gradient(ellipse 68% 70% at 62% 50%, #000 18%, rgba(0, 0, 0, .54) 48%, rgba(0, 0, 0, .12) 70%, transparent 94%);
        mask-image: radial-gradient(ellipse 68% 70% at 62% 50%, #000 18%, rgba(0, 0, 0, .54) 48%, rgba(0, 0, 0, .12) 70%, transparent 94%);
    }

    .service-faq > .container {
        gap: 34px;
    }

}@media (max-width: 1024px) {
    .service-advantages__grid {
        grid-template-columns: 1fr;
    }

    .service-advantage-card__text {
        max-height: none;
        margin-top: 14px;
        opacity: 1;
        transform: none;
    }

    .service-offer-card__details {
        max-height: none;
        opacity: 1;
        transform: none;
    }

    .service-offer-card__lead::after {
        display: none;
    }

    .service-offers__grid {
        grid-template-columns: 1fr;
    }

    .service-hero > .container {
        display: flex;
        flex-direction: column;
    }

    .service-hero__action-row {
        grid-template-columns: 38% minmax(0, 56%);
        gap: 6%;
        margin-top: 32px;
    }

    .service-hero__highlights {
        position: static;
        width: 100%;
        transform: none;
    }

    .service-hero {
        padding: 40px 0 80px;
    }

    .service-hero__visual {
        background-position: 64% center;
        background-size: 100% auto;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .38) 14%, rgba(0, 0, 0, .82) 26%, #000 38%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .38) 14%, rgba(0, 0, 0, .82) 26%, #000 38%, #000 100%);
    }

    .service-hero::after {
        background-image:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--color-bg) 82%, transparent) 0%,
                color-mix(in srgb, var(--color-bg) 38%, transparent) 28%,
                transparent 50%
            ),
            linear-gradient(
                90deg,
                color-mix(in srgb, var(--color-bg) 98%, transparent) 0%,
                color-mix(in srgb, var(--color-bg) 93%, transparent) 38%,
                color-mix(in srgb, var(--color-bg) 66%, transparent) 68%,
                color-mix(in srgb, var(--color-bg) 24%, transparent) 100%
            );
    }

    .service-hero__content {
        width: 62%;
    }

    .service-faq {
        padding: 80px 0 88px;
    }

    .service-faq > .container {
        gap: 42px;
    }

    .service-overview__heading,
    .service-benefits__heading,
    .service-scope__heading,
    .service-process__heading,
    .service-faq__heading,
    .service-cta__heading {
        font-size: clamp(26px, 4vw, 36px);
    }

    .service-cta__banner {
        align-items: center;
    }
}@media (max-width: 768px) {
    .service-hero {
        padding: 24px 0 48px;
    }

    .service-premium {
        padding: 40px 0 48px;
    }

    .service-offers {
        padding: 64px 0;
    }

    .service-advantages {
        padding: 64px 0;
    }

    .service-advantages > .container {
        gap: 34px;
    }

    .service-advantages::before {
        width: 72%;
        opacity: .34;
    }

    .service-offers::before {
        width: 72%;
        opacity: .38;
    }

    .service-offers > .container {
        gap: 34px;
    }

    .service-offer-card {
        padding: 22px;
    }

    .service-offer-card__link {
        align-self: stretch;
    }

    .service-premium__grid {
        grid-template-columns: 1fr;
    }

    .service-advantages__grid {
        grid-template-columns: 1fr;
    }

    .service-advantage-card {
        padding: 22px;
    }

    .service-advantage-card:nth-child(1) {
        min-height: 0;
        justify-content: flex-start;
        padding-right: 22px;
        padding-bottom: 145px;
    }

    .service-advantage-card:nth-child(1)::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 149px;
        background:
            linear-gradient(180deg, rgba(3, 22, 54, .98) 0%, rgba(3, 22, 54, .14) 34%, rgba(3, 22, 54, .6) 100%),
            url("../../img/poslugy-advantage-1.webp") center 50% / auto 128px no-repeat;
        opacity: .72;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 80%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 80%, transparent 100%);
    }

    .service-advantage-card:nth-child(2) {
        min-height: 0;
        justify-content: flex-start;
        padding-right: 22px;
        padding-bottom: 145px;
    }

    .service-advantage-card:nth-child(2)::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 149px;
        background:
            linear-gradient(180deg, rgba(3, 22, 54, .98) 0%, rgba(3, 22, 54, .13) 34%, rgba(3, 22, 54, .58) 100%),
            url("../../img/poslugy-advantage-2.webp") center 52% / auto 137px no-repeat;
        opacity: .7;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 80%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 80%, transparent 100%);
    }

    .service-advantage-card:nth-child(3) {
        min-height: 0;
        justify-content: flex-start;
        padding-right: 22px;
        padding-bottom: 145px;
    }

    .service-advantage-card:nth-child(3)::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 149px;
        background:
            linear-gradient(180deg, rgba(3, 22, 54, .98) 0%, rgba(3, 22, 54, .12) 34%, rgba(3, 22, 54, .54) 100%),
            url("../../img/poslugy-advantage-3.webp") center 48% / auto 137px no-repeat;
        opacity: .72;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 80%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 80%, transparent 100%);
    }

    .service-advantage-card:nth-child(4) {
        min-height: 0;
        justify-content: flex-start;
        padding-right: 22px;
        padding-bottom: 145px;
    }

    .service-advantage-card:nth-child(4)::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 149px;
        background:
            linear-gradient(180deg, rgba(3, 22, 54, .98) 0%, rgba(3, 22, 54, .14) 34%, rgba(3, 22, 54, .6) 100%),
            url("../../img/poslugy-advantage-4.webp") center 50% / auto 128px no-repeat;
        opacity: .7;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 80%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 80%, transparent 100%);
    }

    .service-advantage-card:nth-child(-n + 4)::before {
        opacity: .82;
        filter: saturate(.82) brightness(.98) contrast(1.09);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 19%, #000 42%, #000 86%, rgba(0, 0, 0, .38) 100%);
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 19%, #000 42%, #000 86%, rgba(0, 0, 0, .38) 100%);
    }


    .service-advantages__conclusion {
        margin-top: 12px;
        padding: 26px 0 0;
    }

    .service-advantage-card__top {
        padding-top: 4px;
    }

    .service-premium__visual--left {
        bottom: -12%;
        left: -34%;
        width: 130%;
        height: 70%;
        opacity: .2;
    }

    .service-premium__visual--right {
        top: -18%;
        right: -52%;
        width: 120%;
        height: 56%;
        opacity: .09;
    }

    .service-overview__cols,
    .service-cta__banner {
        flex-direction: column;
    }

    .service-hero__content,
    .service-overview__content,
    .service-overview__figure,
    .service-cta__content {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .service-hero__action-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        margin-top: 32px;
    }

    .service-hero__highlights {
        transform: none;
    }

    .service-hero__highlight {
        width: 100%;
        border-radius: 18px;
        font-size: 16px;
    }

    .service-hero__heading {
        font-size: clamp(34px, 11vw, 46px);
    }

    .service-hero__intro,
    .service-overview__intro,
    .service-benefits__intro,
    .service-cta__text {
        font-size: 16px;
    }

    .service-hero__visual {
        background-position: 68% bottom;
        background-size: auto 52%;
        opacity: .4;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 16%, rgba(0, 0, 0, .84) 29%, #000 42%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .4) 16%, rgba(0, 0, 0, .84) 29%, #000 42%, #000 100%);
    }

    .service-hero__visual::after {
        background:
            linear-gradient(
                90deg,
                var(--color-bg) 0%,
                color-mix(in srgb, var(--color-bg) 68%, transparent) 36px,
                transparent 96px,
                transparent calc(100% - 96px),
                color-mix(in srgb, var(--color-bg) 68%, transparent) calc(100% - 36px),
                var(--color-bg) 100%
            ),
            linear-gradient(
                180deg,
                var(--color-bg) 0%,
                color-mix(in srgb, var(--color-bg) 52%, transparent) 44px,
                transparent 104px,
                transparent calc(100% - 104px),
                color-mix(in srgb, var(--color-bg) 62%, transparent) calc(100% - 38px),
                var(--color-bg) 100%
            );
    }

    .service-hero::after {
        background-image:
            linear-gradient(
                90deg,
                color-mix(in srgb, var(--color-bg) 97%, transparent) 0%,
                color-mix(in srgb, var(--color-bg) 91%, transparent) 68%,
                color-mix(in srgb, var(--color-bg) 64%, transparent) 100%
            ),
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--color-bg) 82%, transparent) 0%,
                color-mix(in srgb, var(--color-bg) 54%, transparent) 100%
            );
    }

    .service-faq {
        padding: 64px 0 72px;
    }

    .service-faq > .container {
        gap: 34px;
    }

    .service-cta {
        padding: 48px 0;
    }

    .service-cta__banner {
        gap: 28px;
        min-height: 0;
        padding: 28px 24px;
        border-radius: 20px;
    }

    .service-cta__actions,
    .service-cta__btn {
        width: 100%;
    }

    .service-overview__glow,
    .service-benefits__glow,
    .service-scope__glow,
    .service-process__glow,
    .service-cta__glow {
        display: none;
    }
}@media (prefers-reduced-motion: reduce) {
    .coordination-process-step,
    .coordination-process-step__number,
    .service-advantage-card,
    .service-advantage-card:nth-child(1)::before,
    .service-advantage-card:nth-child(2)::before,
    .service-advantage-card:nth-child(3)::before,
    .service-advantage-card:nth-child(4)::before,
    .service-advantage-card__text,
    .service-advantage-card__result span,
    .service-offer-card__details,
    .service-offer-card__lead::after,
    .service-offer-card__link,
    .service-offer-card__link svg,
    .service-premium-card,
    .service-benefit-card,
    .service-scope-card {
        transition: none;
    }

    .service-premium-card:hover,
    .service-premium-card:focus-within,
    .coordination-process-step:hover,
    .coordination-process-step:hover .coordination-process-step__number,
    .service-advantage-card:hover,
    .service-advantage-card:focus-within,
    .service-advantage-card:hover .service-advantage-card__result span,
    .service-offer-card__link:hover,
    .service-offer-card__link:focus-visible,
    .service-offer-card__link:hover svg,
    .service-offer-card__link:focus-visible svg,
    .service-benefit-card:hover,
    .service-benefit-card:focus-within,
    .service-benefit-card:active {
        transform: none;
    }
}

/* Мобільні кнопки — як у base.css шаблону: на вузькому екрані велика
   кнопка й аутлайн розтягуються на всю ширину. Правило в кінці файлу,
   щоб перебивати десктопні width: 270px незалежно від порядку секцій. */
@media (max-width: 768px) {
    .btn--lg,
    .btn--outline {
        width:     100%;
        min-width: 0;
    }
}

/* Premium services hero: independent CTA and editorial benefit cards. */
body .site-main .service-hero .service-hero__content {
 width:56%;max-width:720px;gap:26px;
}
body .site-main .service-hero .service-hero__heading {max-width:720px;margin:0;}
body .site-main .service-hero .service-hero__intro {max-width:650px;line-height:1.6;}
body .site-main .service-hero .service-hero__action-row {
 display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-top:28px;
}
body .site-main .service-hero .service-hero__btn {width:270px;max-width:100%;min-width:0;flex:none;}
body .site-main .service-hero .service-hero__highlights.service-hero__highlights {
 position:relative!important;inset:auto!important;transform:none!important;
 margin:40px 0 0!important;width:100%!important;counter-reset:service-benefit;
}
body .site-main .service-hero .service-hero__highlight.service-hero__highlight {
 display:flex!important;flex-direction:column!important;align-items:flex-start!important;
 justify-content:center!important;gap:0!important;min-height:80px!important;
 padding:16px 22px!important;border-radius:16px!important;
 background:linear-gradient(135deg,rgba(21,48,85,.97),rgba(5,24,51,.97))!important;
 border:1px solid rgba(119,198,255,.24)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 32px rgba(0,8,24,.16)!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;counter-increment:service-benefit;
}
body .site-main .service-hero .service-hero__highlight.service-hero__highlight::after {
 display:block!important;content:'0' counter(service-benefit)!important;
 position:absolute!important;top:26px!important;right:24px!important;width:auto!important;height:auto!important;
 background:none!important;filter:none!important;border:0!important;border-radius:0!important;
 font-size:12px;letter-spacing:2px;color:rgba(183,195,222,.65);pointer-events:none;
}
body .site-main .service-hero .service-hero__highlight.service-hero__highlight svg {
 width:44px!important;height:44px!important;flex:0 0 44px!important;box-sizing:border-box;
 padding:10px;border:1px solid rgba(119,198,255,.28);border-radius:12px;
 background:rgba(45,121,232,.10);color:#77c6ff!important;stroke:currentColor;
}
body .site-main .service-hero .service-hero__highlight.service-hero__highlight span {
 font-size:16px!important;line-height:1.5!important;color:#dce8ff!important;font-weight:400!important;
 max-width:340px;
}
body .site-main .service-hero .service-hero__visual::after {
 background:linear-gradient(90deg,#051a3a 0%,rgba(5,26,58,.95) 25%,rgba(5,26,58,.55) 44%,transparent 64%),linear-gradient(180deg,rgba(5,26,58,.15),transparent 40%,#051a3a 100%);
}
@media(max-width:1024px) {
 body .site-main .service-hero .service-hero__content {width:70%;}
 body .site-main .service-hero .service-hero__highlight.service-hero__highlight {padding:20px!important;}
}
@media(max-width:768px) {
 body .site-main .service-hero .service-hero__content {width:100%;max-width:none;gap:22px;}
 body .site-main .service-hero .service-hero__intro {max-width:none;font-size:16px;}
 body .site-main .service-hero .service-hero__action-row {margin-top:24px;}
 body .site-main .service-hero .service-hero__highlights.service-hero__highlights {
 grid-auto-columns:minmax(260px,1fr)!important;margin-top:32px!important;
 }
 body .site-main .service-hero .service-hero__highlight.service-hero__highlight {min-height:80px!important;}
 body .site-main .service-hero .service-hero__visual {opacity:.35;}
}

/* Compact text-only hero benefits; other service cards remain unchanged. */
body .site-main .service-hero .service-hero__highlight.service-hero__highlight {
 align-items:center!important;text-align:center;
}
body .site-main .service-hero .service-hero__highlight.service-hero__highlight svg,
body .site-main .service-hero .service-hero__highlight.service-hero__highlight::after {display:none!important;}
body .site-main .service-hero .service-hero__highlights.service-hero__highlights {margin-top:28px!important;}