/* ══════════════════════════════════════════════════════════════════════════
   Про нас — /pro-nas/ (templates/pro-nas.php)

   Портовано з `about-page-template/about-page.css` замовника на токени теми.

   ЩО НЕ ПЕРЕНОСИЛОСЬ (уже є спільним і підключене з css/main.css):
     .container, .section-eyebrow / .section-dot, .breadcrumbs*,
     .faq__list / .faq-item*  — той самий акордеон, що на Головній,
     .check-list шаблону      — замінений на .rich-checks (Theme\rich_content).

   ЩО ВЗЯТО З УЖЕ ПРИЙНЯТОЇ СТОРІНКИ, а не з шаблону:
     .btn / .btn--lg / .btn--outline — блок із css/pages/galuzi.css. Глобально
       в темі живе тільки .btn--primary (css/header.css), решта — посторінково;
       це усталений патерн проєкту, не недогляд.
     .service-cta* — CTA-банер один-в-один як на /poslugy/ і /galuzi/, разом із
       його медіа-запитами. У шаблоні замовника він називався .about-cta й мав
       власні значення; свідомо взято версію теми, щоб банер на трьох сторінках
       виглядав однаково.

   ПЕРЕЙМЕНУВАННЯ: блоки сторінки отримали префікс about- за конвенцією теми
   (role-system → .about-role__system, principle-item → .about-principle,
   technology-group → .about-tools__group, cloud-panel → .about-cloud__panel,
   international-* → .about-global__*, transition-* → .about-transition__*).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Кнопки (локально, як на /poslugy/ і /galuzi/) ──────────────────────── */
.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);
}

.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;
}

@media (max-width: 768px) {
    .btn--lg,
    .btn--outline {
            width:     100%;
            min-width: 0;
    }
}

/* Кожна секція — власний контекст позиціонування. У шаблоні замовника це
   давав окремий клас .page-section; у темі роздільники між секціями ставить
   спільний .has-line-bottom, тому position переносимо на самі секції.
   Без цього абсолютний декор (.about-hero__grid, .about-hero__image та ін.)
   рахувався б від початкового контейнера, вилазив за праву межу екрана і
   не потрапляв під overflow: clip нижче — саме так і з'явився
   горизонтальний скрол 1555px при вікні 1440px. */
.about-hero,
.about-intro,
.about-role,
.about-approach,
.about-principles,
.about-tools,
.about-cloud,
.about-global,
.about-transition { position: relative; }

.about-page {
    overflow: clip;
    background:
        radial-gradient(circle at 12% 9%, rgba(0, 152, 240, .1), transparent 26%),
        radial-gradient(circle at 92% 48%, rgba(76, 141, 255, .07), transparent 30%),
        #031c45;
}



.about-page > .page-section {
    border-bottom: .5px solid transparent;
    border-image-source: var(--gradient-line);
    border-image-slice: 1;
}



.about-page h1,
.about-page h2,
.about-page h3 {
    color: var(--color-text);
}



/* Градієнт на БЛОЦІ, а не на .is-accent — той самий прийом, що в
   .coord-hero__title на /poslugy/koordynacziya-system/: акцент тут
   переноситься на власний рядок, і для inline-елемента браузер малював би
   фон по сумарній ширині фрагментів (другий рядок стартував би з середини
   градієнта, блідим). Базовий колір через -webkit-text-fill-color — це і
   є фікс "чому ї/й/є ламаються при background-clip:text" з інших сторінок
   проєкту: без нього кирилічні літери з надрядковими елементами рендеряться
   ламано. */
.about-page h1 {
    max-width: 691px;
    margin: 0;
    font-size: clamp(40px, 3vw, var(--fs-h1));
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: var(--ls-h1);
    color: #edf2ff;
    -webkit-text-fill-color: #edf2ff;
    overflow-wrap: break-word;
}

.about-page h1 .is-accent {
    display: inline-block;
    font-weight: 600;
    background-image: linear-gradient(90deg, #0098f0 0%, #edf2ff 52%, #f2c893 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    opacity: 1;
}



.about-page h2 {
    max-width: 1100px;
    margin: 0;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -1.5px;
}

/* Акцентний фрагмент h2/h3 — той самий прийом, що на /poslugy/koordynacziya-system/
   (.coord-matters__heading .is-accent, .coord-approach__heading .is-accent…):
   базовий текст лишається легким (300), акцент — 600 і градієнт. Тут жоден
   акцент не переноситься на власний рядок, тому градієнт можна лишити на
   самому .is-accent (не на блоці) — простіше й тут безпечно.
   .about-global__origin — окремий випадок: рік заснування ("2005") у
   .is-accent сидить не в заголовку, а в <strong> плашки, тому дописаний
   у той самий селектор. Хіро (h1) сюди не входить — у нього своя,
   блокова версія вище. */
.about-page h2 .is-accent,
.about-page h3 .is-accent,
.about-global__origin .is-accent {
    font-weight: 600;
    background-image: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}



.about-page h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.4px;
}



/* :not(.section-eyebrow) — надзаголовок теж <p>, а колір у нього свій,
   жовтий, із компонента теми. */
.about-page p:not(.section-eyebrow) {
    color: var(--color-text-soft);
}



.about-hero {
    min-height: 760px;
    padding: 32px 0 64px;
    isolation: isolate;
    display: flex;
    /* По верху, а не по центру: інакше відстань від крихт до надзаголовка
       залежала б від кількості тексту нижче й стрибала між сторінками. */
    align-items: flex-start;
    background:
        radial-gradient(ellipse at 78% 48%, rgba(28, 106, 216, .25), transparent 36%),
        radial-gradient(ellipse at 95% 0%, rgba(0, 169, 255, .14), transparent 35%),
        linear-gradient(120deg, #031c45 10%, #041a3e 55%, #020e25 100%);
}



.about-hero__image {
    position: absolute;
    z-index: -2;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
    opacity: .78;
}



.about-hero__image img {
    display: block;
    width: min(1959px, 100vw);
    height: auto;
    max-width: none;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 5%, #000 17%, #000 83%, rgba(0, 0, 0, .18) 95%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 7%, #000 21%, #000 79%, rgba(0, 0, 0, .2) 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 5%, #000 17%, #000 83%, rgba(0, 0, 0, .18) 95%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 7%, #000 21%, #000 79%, rgba(0, 0, 0, .2) 93%, transparent 100%);
    mask-composite: intersect;
    filter: saturate(.92) contrast(1.02);
}



.about-hero__image::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, #031c45 0%, rgba(3, 28, 69, .94) 8%, rgba(3, 28, 69, .42) 22%, transparent 38%),
        linear-gradient(270deg, #020e25 0%, rgba(2, 14, 37, .84) 7%, rgba(2, 14, 37, .28) 18%, transparent 31%),
        linear-gradient(180deg, #031c45 0%, rgba(3, 28, 69, .76) 7%, transparent 22%),
        linear-gradient(0deg, #031c45 0%, rgba(3, 28, 69, .9) 8%, transparent 25%);
}



.about-hero::after {
    position: absolute;
    z-index: -1;
    right: -7%;
    bottom: -14%;
    width: min(760px, 58vw);
    aspect-ratio: 1;
    content: "";
    border: 1px solid rgba(79, 158, 255, .16);
    border-radius: 50%;
    box-shadow: 0 0 100px rgba(0, 136, 255, .08), inset 0 0 100px rgba(0, 136, 255, .05);
}



.about-hero__grid {
    position: absolute;
    z-index: -1;
    right: -8%;
    bottom: -30%;
    width: 70%;
    height: 85%;
    opacity: .2;
    transform: perspective(700px) rotateX(62deg) rotateZ(-7deg);
    transform-origin: bottom right;
    background-image: linear-gradient(rgba(57, 113, 235, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 113, 235, .2) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, transparent, #000 28%, #000 78%, transparent);
}



.about-hero__layout {
    display: block;
}



.about-hero__content {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
        /* Спільний ритм угорі сторінки: надзаголовок → 20 → H1 → 26 → лід. */
    gap: 20px;
    max-width: 1180px;
}



.about-hero__content::before {
    position: absolute;
    z-index: -1;
    top: -54px;
    left: -74px;
    width: min(900px, 82vw);
    height: 610px;
    pointer-events: none;
    content: "";
    opacity: .86;
    background: radial-gradient(ellipse at 34% 45%, rgba(0, 8, 25, .94) 0%, rgba(1, 14, 37, .8) 42%, rgba(2, 20, 49, .4) 68%, transparent 100%);
    filter: blur(20px);
}



.about-hero__content h1,
.about-hero__lead,
.about-hero__text {
    text-shadow: 0 3px 18px rgba(0, 5, 20, .72);
}



.about-hero__lead {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0;
    font-size: var(--fs-lead);
    line-height: 1.5;
    letter-spacing: var(--ls-lead);
}



.about-hero__lead strong {
    color: #dce8fb;
    font-weight: 500;
}



.about-hero__text {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--line-height);
}



.about-hero__text strong {
    color: #eef5ff;
    font-weight: 600;
}



.about-hero__description {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 740px;
}



.about-hero__description::before {
    position: absolute;
    z-index: 0;
    inset: -34px -54px -30px -48px;
    pointer-events: none;
    content: "";
    opacity: .96;
    border-radius: 48%;
    background: radial-gradient(ellipse at 38% 48%, rgba(0, 5, 18, .98) 0%, rgba(0, 8, 25, .91) 40%, rgba(1, 14, 37, .68) 66%, transparent 100%);
    filter: blur(17px);
}



.about-hero__description + .btn {
    position: relative;
    z-index: 2;
}



.about-hero__stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 20px;
}



.about-stat {
    position: relative;
    min-height: 96px;
    padding: 16px 17px 15px;
    overflow: hidden;
    border: 1px solid rgba(190, 218, 255, .2);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(106, 166, 227, .14), rgba(10, 42, 82, .25) 52%, rgba(2, 17, 43, .31));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        inset 0 -1px 0 rgba(51, 133, 222, .08),
        0 12px 30px rgba(0, 8, 31, .22);
    backdrop-filter: blur(16px) saturate(1.18);
    -webkit-backdrop-filter: blur(16px) saturate(1.18);
}



.about-stat::before {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: .5px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(180, 225, 255, .68), transparent);
}



.about-stat::after {
    position: absolute;
    top: -45px;
    right: -34px;
    width: 92px;
    height: 92px;
    content: "";
    border-radius: 50%;
    background: rgba(35, 142, 255, .12);
    filter: blur(22px);
}



.about-stat strong,
.about-cloud__panel strong {
    display: block;
    margin-bottom: 8px;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.1;
    background: var(--gradient-stat);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}



.about-stat span {
    color: var(--color-text-soft);
    font-size: 12.5px;
    line-height: 1.38;
}



.about-stat:last-child strong {
    font-size: 19px;
    letter-spacing: -.02em;
}



.about-split {
    display: flex;
    flex-direction: column;
    gap: clamp(42px, 5vw, 64px);
    align-items: center;
}



.about-intro__content {
    display: flex;
    width: 100%;
    max-width: 980px;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}



.about-intro__visual {
    position: relative;
    width: min(1500px, 100%);
    min-width: 0;
    margin: 0;
    overflow: visible;
    isolation: isolate;
}



.about-intro__visual::before {
    position: absolute;
    z-index: -1;
    inset: 8% 6%;
    content: "";
    border-radius: 50%;
    background: rgba(12, 103, 201, .18);
    filter: blur(54px);
}



.about-intro__visual-main {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 4%, #000 15%, #000 85%, rgba(0, 0, 0, .12) 96%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .14) 5%, #000 16%, #000 84%, rgba(0, 0, 0, .14) 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 4%, #000 15%, #000 85%, rgba(0, 0, 0, .12) 96%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .14) 5%, #000 16%, #000 84%, rgba(0, 0, 0, .14) 95%, transparent 100%);
    mask-composite: intersect;
    filter: saturate(.92) contrast(1.02);
}



.about-split__copy {
    display: flex;
    max-width: 900px;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 0;
}



.about-split__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}



.about-intro__content .about-split__heading h2 {
    max-width: 900px;
}



.about-split__copy p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--line-height);
}



.about-split__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    color: var(--color-text);
    font-weight: 500;
}



.about-split__link::after {
    position: absolute;
}



.section-heading {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 850px;
    margin-bottom: 60px;
}



.section-heading > p:last-child {
    max-width: 700px;
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
}



.section-heading--center {
    margin-inline: auto;
    text-align: center;
}



.section-heading--center .section-eyebrow {
    justify-content: center;
}



.about-global__story {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
}



.about-global__origin {
    display: flex;
    padding: 30px;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background: radial-gradient(ellipse, rgba(29, 113, 205, .16), transparent 72%);
}



.about-global__origin svg {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    color: #74baff;
}



.about-global__origin strong {
    font-size: clamp(56px, 6vw, 80px);
    line-height: 1.15;
    margin: 8px 0;
}



.about-global__origin span {
    color: var(--color-text-soft);
    font-size: 14px;
}



.about-global__origin .about-global__place {
    color: #74baff;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
}



.about-global__copy h3 {
    margin: 0 0 22px;
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 500;
    line-height: 1.4;
    color: #f1f6ff;
}



.about-global__copy p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text-soft);
}



.about-global__milestones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}



.about-global__milestones li {
    position: relative;
    border-top: .5px solid rgba(87, 170, 244, .35);
    padding-top: 24px;
}



.about-global__milestones li::before {
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #74baff;
    box-shadow: 0 0 10px rgba(70, 170, 255, .25);
}



.about-global__milestones strong,
.about-global__milestones span {
    display: block;
    line-height: 1.5;
}



.about-global__milestones strong {
    color: #cfeaff;
    font-weight: 500;
    font-size: 18px;
}



.about-global__milestones span {
    margin-top: 6px;
    color: var(--color-text-soft);
    font-size: 13px;
}
@media (max-width: 760px) {

    .about-global__story,
    .about-global__milestones {
        grid-template-columns: 1fr;
    }

    .about-global__origin {
        padding: 16px;
    }

    .about-global__milestones {
        gap: 24px;
        margin-top: 32px;
    }
}



.about-transition { padding: 120px 0; }


.about-transition__heading { max-width: 1000px; }


.about-transition__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 44px 0 52px; list-style: none; }


.about-transition__flow li { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 25px 0 0; border-top: 1px solid rgba(87, 170, 244, .35); }


.about-transition__flow li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #74baff; box-shadow: 0 0 9px rgba(70, 170, 255, .25); }


.about-transition__flow svg { flex: 0 0 42px; width: 42px; height: 42px; fill: none; stroke: #74baff; stroke-width: 1.2; }


.about-transition__flow span { display: block; color: #74baff; font-size: 11px; line-height: 1.5; margin-bottom: 8px; }


.about-transition__flow strong { display: block; color: #f1f6ff; font-size: 17px; font-weight: 500; line-height: 1.5; }


.about-transition__story { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }


.about-transition__story h3 { margin: 0 0 18px; color: #f1f6ff; font-size: 23px; font-weight: 500; line-height: 1.4; }


.about-transition p:not(.section-eyebrow) { color: var(--color-text-soft); font-size: 16px; line-height: 1.75; margin: 0 0 16px; }


.about-transition p:last-child { margin-bottom: 0; }


.about-transition__technology { padding: 28px 30px; border-left: 2px solid rgba(85, 177, 248, .65); background: linear-gradient(90deg, rgba(24, 69, 127, .27), transparent); border-radius: 0 12px 12px 0; }


.about-transition__caption { display: block; color: #74baff; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }


.about-transition__technology strong { color: #d6edff; font-weight: 500; }


.about-transition__ukraine { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 44px; padding-top: 32px; border-top: .5px solid rgba(87, 170, 244, .24); }


.about-transition__ukraine ul { display: grid; gap: 13px; list-style: none; padding: 0; margin: 0; }


.about-transition__ukraine li { position: relative; padding-left: 26px; color: #d6edff; font-size: 14px; line-height: 1.6; }


.about-transition__ukraine li::before { content: "✓"; position: absolute; left: 0; color: #74baff; }
@media (max-width: 760px) {

    .about-transition { padding: 72px 0; }

    .about-transition__flow, .about-transition__story, .about-transition__ukraine { grid-template-columns: 1fr; }

    .about-transition__flow { gap: 24px; margin: 32px 0; }

    .about-transition__technology { padding: 22px; }

    .about-transition__story h3 { font-size: 21px; }
}



.about-faq {
    background: linear-gradient(180deg, rgba(0, 9, 29, .22), rgba(0, 9, 29, .48));
}



.about-role {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 44%, rgba(15, 105, 208, .16), transparent 37%),
        linear-gradient(180deg, rgba(0, 9, 29, .24), rgba(0, 9, 29, .56));
}



.about-role__heading {
    max-width: 930px;
    margin-bottom: 32px;
}



.about-role__heading > p:last-child {
    max-width: 760px;
    margin-inline: auto;
}



.about-role__system {
    position: relative;
    min-height: clamp(500px, 43vw, 610px);
    isolation: isolate;
}



.about-role__system::before {
    position: absolute;
    z-index: -1;
    top: 15%;
    left: 50%;
    width: 68%;
    height: 68%;
    content: "";
    border-radius: 50%;
    background: rgba(9, 102, 219, .16);
    filter: blur(72px);
    transform: translateX(-50%);
}



.about-role__connectors {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}



.about-role__connectors path {
    fill: none;
    stroke: rgba(54, 175, 255, .68);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 5px rgba(20, 154, 255, .6));
}



.about-role__connectors circle {
    fill: #79d8ff;
    filter: drop-shadow(0 0 7px #1baaff);
}



.about-role__participant {
    position: absolute;
    z-index: 3;
    display: flex;
    width: 190px;
    align-items: center;
    gap: 14px;
    color: rgba(229, 241, 255, .84);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.35;
    text-transform: uppercase;
}



.about-role__participant--architecture { top: 15%; left: 0; }


.about-role__participant--structure { bottom: 15%; left: 0; }


.about-role__participant--mep { top: 15%; right: 0; justify-content: flex-end; }


.about-role__participant--team { right: 0; bottom: 15%; justify-content: flex-end; }



.about-role__participant-icon {
    display: grid;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    place-items: center;
    border: .5px solid rgba(68, 173, 255, .54);
    border-radius: 50%;
    background: rgba(5, 27, 65, .28);
    box-shadow: 0 0 24px rgba(16, 134, 255, .1), inset 0 0 18px rgba(54, 166, 255, .05);
}



.about-role__participant-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #72caff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.25;
}



.about-role__participant--mep,
.about-role__participant--team {
    flex-direction: row-reverse;
    text-align: right;
}



.about-role__model {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: min(74%, 900px);
    margin: 0;
    transform: translate(-50%, -50%);
}



.about-role__model img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
    filter: saturate(.9) contrast(1.04) drop-shadow(0 28px 46px rgba(0, 4, 22, .34));
}



.about-role__model figcaption {
    position: absolute;
    bottom: 9%;
    left: 50%;
    display: flex;
    min-width: 190px;
    padding: 10px 24px;
    flex-direction: column;
    align-items: center;
    border: .5px solid rgba(76, 185, 255, .56);
    border-radius: 6px;
    background: rgba(3, 20, 50, .68);
    box-shadow: 0 0 25px rgba(29, 146, 255, .16), inset 0 0 18px rgba(78, 181, 255, .05);
    backdrop-filter: blur(10px);
    transform: translateX(-50%);
    text-transform: uppercase;
}



.about-role__model figcaption strong {
    color: #f4f8ff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .24em;
}



.about-role__model figcaption span {
    margin-top: 3px;
    color: #68bfff;
    font-size: 9px;
    letter-spacing: .2em;
}



.about-role__process {
    position: relative;
    display: grid;
    margin: 20px 0 0;
    padding: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
}



.about-role__process::before {
    position: absolute;
    top: 23px;
    right: 4%;
    left: 4%;
    height: .5px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(31, 162, 255, .72) 12%, rgba(71, 191, 255, .84) 50%, rgba(31, 162, 255, .72) 88%, transparent);
    box-shadow: 0 0 8px rgba(38, 157, 255, .32);
}



.about-role__step {
    position: relative;
    min-width: 0;
    padding: 64px clamp(12px, 1.5vw, 22px) 0;
}



.about-role__step + .about-role__step {
    border-left: .5px solid rgba(100, 162, 236, .12);
}



.about-role__step-number {
    position: absolute;
    z-index: 1;
    top: 0;
    left: clamp(12px, 1.5vw, 22px);
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: .5px solid rgba(79, 185, 255, .62);
    border-radius: 50%;
    background: #061d48;
    box-shadow: 0 0 18px rgba(29, 157, 255, .15), inset 0 0 12px rgba(39, 152, 255, .06);
    color: #78cfff;
    font-size: 11px;
    letter-spacing: .12em;
}



.about-role__step h3 {
    min-height: 54px;
    margin: 0;
    color: #f1f6ff;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 500;
    line-height: 1.45;
}



.about-role__step p {
    margin: 14px 0 0;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 1.65;
}







.about-approach {
    position: relative;
    overflow: hidden;
}



.about-approach::after {
    position: absolute;
    z-index: -1;
    top: 28%;
    left: 50%;
    width: 72%;
    height: 48%;
    content: "";
    border-radius: 50%;
    background: rgba(10, 89, 190, .09);
    filter: blur(90px);
    transform: translateX(-50%);
}



.about-approach__heading {
    max-width: 940px;
    margin-bottom: 34px;
}



.about-approach__heading > p:last-child {
    max-width: 790px;
    margin-inline: auto;
}



.about-approach__logic {
    display: flex;
    max-width: 1020px;
    margin: 0 auto 54px;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.4vw, 22px);
    color: rgba(198, 222, 251, .7);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}



.about-approach__logic span {
    white-space: nowrap;
}



.about-approach__logic i {
    color: #4cbcff;
    font-size: 16px;
    font-style: normal;
    text-shadow: 0 0 10px rgba(44, 172, 255, .6);
}



.about-approach__process {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}



.about-approach__process::before {
    position: absolute;
    z-index: 0;
    top: 170px;
    right: 2%;
    left: 2%;
    height: .5px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(47, 175, 255, .7) 9%, rgba(91, 204, 255, .86) 50%, rgba(47, 175, 255, .7) 91%, transparent);
    box-shadow: 0 0 9px rgba(35, 159, 255, .34);
}



.about-approach__stage {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 0 clamp(14px, 1.8vw, 26px);
}



.about-approach__stage + .about-approach__stage {
    border-left: .5px solid rgba(91, 153, 227, .11);
}



.about-approach__visual {
    display: grid;
    height: 140px;
    margin-bottom: 28px;
    place-items: center;
    color: #66c9ff;
}



.about-approach__visual svg {
    width: 100%;
    max-width: 240px;
    height: 140px;
    overflow: visible;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}



.about-approach__visual .visual-grid {
    stroke: rgba(88, 154, 232, .12);
    stroke-width: .7;
}



.about-approach__visual .visual-muted {
    stroke: rgba(133, 177, 228, .28);
    stroke-width: 1;
}



.about-approach__visual .visual-primary {
    stroke: #48baff;
    stroke-width: 1.6;
    filter: drop-shadow(0 0 5px rgba(41, 171, 255, .55));
}



.about-approach__visual .visual-secondary {
    stroke: rgba(105, 220, 255, .72);
    stroke-width: 1.2;
}



.about-approach__visual .visual-alert {
    stroke: #ff805e;
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(255, 101, 72, .5));
}



.about-approach__visual .visual-clearance,
.about-approach__visual .visual-dash {
    stroke: rgba(92, 197, 255, .48);
    stroke-width: 1;
    stroke-dasharray: 5 6;
}



.about-approach__visual .visual-dot {
    fill: #8ddfff;
    stroke: none;
    filter: drop-shadow(0 0 6px #32aaff);
}



.about-approach__number {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 18px;
    background: #061f4d;
    color: rgba(61, 171, 255, .1);
    font-size: 58px;
    font-weight: 300;
    letter-spacing: -.05em;
    line-height: .9;
    -webkit-text-stroke: .7px rgba(83, 190, 255, .62);
    text-shadow: 0 0 18px rgba(35, 160, 255, .14);
}



.about-approach__stage h3 {
    min-height: 58px;
    margin: 0;
    color: #f1f6ff;
    font-size: clamp(17px, 1.25vw, 20px);
    font-weight: 500;
    line-height: 1.45;
}



.about-approach__stage p {
    margin: 14px 0 0;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 1.7;
}



.about-approach__cta {
    display: flex;
    width: min(100%, 620px);
    height: auto;
    min-height: 60px;
    margin: 34px auto 0;
    padding-inline: 34px;
    white-space: normal;
    text-align: center;
}











.about-principles {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(3, 24, 59, .18), rgba(2, 17, 44, .52)),
        radial-gradient(ellipse at 54% 12%, rgba(27, 100, 178, .13), transparent 58%);
}



.about-principles::after {
    position: absolute;
    z-index: 0;
    top: 2%;
    right: 7%;
    width: 58%;
    height: 54%;
    content: "";
    pointer-events: none;
    background: url("../../img/about-principles-node.webp") center / cover no-repeat;
    opacity: .075;
    -webkit-mask-image: radial-gradient(ellipse, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse, #000 0%, transparent 72%);
}



.about-principles > .container {
    position: relative;
    z-index: 1;
}



.about-principles__layout {
    display: grid;
    align-items: start;
    gap: clamp(42px, 5.4vw, 82px);
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}







.about-principles__heading {
    max-width: 590px;
    margin: 0 0 30px;
}



.about-principles__heading h2 {
    max-width: 570px;
    font-size: clamp(34px, 3.65vw, 50px);
}



.about-principles__heading > p:last-child {
    max-width: 550px;
    font-size: 15px;
    line-height: 1.7;
}













































.about-principles__list {
    position: relative;
    display: grid;
    margin: 2px 0 0;
    padding: 0 0 0 26px;
    gap: 12px;
    list-style: none;
}



.about-principles__list::before {
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 8px;
    width: .5px;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(44, 168, 255, .6) 10%, rgba(44, 168, 255, .6) 90%, transparent);
}



.about-principle {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 142px;
    padding: 21px 58px 21px 22px;
    align-items: start;
    border: 1px solid rgba(86, 157, 236, .2);
    border-radius: 11px;
    gap: 15px;
    grid-template-columns: 34px 1fr;
    background: linear-gradient(104deg, rgba(21, 67, 125, .58), rgba(13, 49, 101, .64));
    box-shadow: inset 0 1px 0 rgba(218, 237, 255, .045), 0 8px 24px rgba(0, 7, 27, .16);
}



.about-principle::before {
    position: absolute;
    top: 50%;
    left: -22px;
    width: 7px;
    height: 7px;
    content: "";
    border: 1px solid rgba(91, 196, 255, .74);
    border-radius: 50%;
    background: #0b4d93;
    box-shadow: 0 0 9px rgba(38, 167, 255, .36);
    transform: translate(-50%, -50%);
}



.about-principle__number {
    padding-top: 2px;
    color: #60b8f3;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.4;
}



.about-principle__content h3 {
    margin: 0;
    color: #f1f6ff;
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 500;
    line-height: 1.35;
}



.about-principle__content > p {
    margin: 8px 0 0;
    color: rgba(200, 218, 242, .74);
    font-size: 12.5px;
    line-height: 1.55;
}



.about-principle__content .about-principle__proof {
    margin-top: 9px;
    padding-left: 11px;
    color: rgba(213, 232, 251, .78);
    border-left: 1px solid rgba(67, 182, 255, .54);
    font-size: 11.5px;
}



.about-principle__metrics {
    display: flex;
    margin: 11px 0 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 7px 16px;
    list-style: none;
}



.about-principle__metrics li {
    color: #6fc8ff;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
}







.about-principles__conclusion {
    max-width: 1040px;
    margin: 54px auto 0;
    text-align: center;
}



.about-principles__conclusion strong {
    display: block;
    color: #eef6ff;
    font-size: clamp(19px, 1.8vw, 25px);
    font-weight: 500;
    line-height: 1.4;
}



.about-principles__conclusion > ul {
    display: grid;
    margin: 27px 0 0;
    padding: 24px 0 0;
    border-top: .5px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(69, 176, 255, .54), transparent) 1;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
}



.about-principles__conclusion li {
    display: flex;
    min-height: 44px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(195, 218, 245, .78);
    font-size: 11px;
    line-height: 1.45;
}



.about-principles__conclusion li + li {
    border-left: .5px solid rgba(74, 167, 239, .22);
}



.about-principles__conclusion li span {
    color: #62bdf6;
    font-size: 10px;
    letter-spacing: .08em;
}



.about-tools__layout,
.about-cloud__layout {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr);
    gap: clamp(54px, 8vw, 120px);
    align-items: center;
}



/* :not(.section-eyebrow) — надзаголовок теж <p>, і без винятку це правило
   перебивало його кегль (17px замість 13). */
.about-tools__layout > div > p:last-child:not(.section-eyebrow),
.about-cloud__layout > div:last-child > p:not(.section-eyebrow) {
    font-size: 17px;
    line-height: 1.6;
}



.about-tools .about-tools__layout {
    display: block;
}



.about-tools__heading {
    max-width: 820px;
    margin: 0 auto 48px;
    text-align: center;
}



.about-tools__heading .section-eyebrow {
    justify-content: center;
}



.about-tools__groups {
    display: grid;
    min-width: 0;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 32px;
    align-items: start;
}



.about-tools__group {
    position: relative;
    padding-top: 24px;
    border-top: 1px solid rgba(63, 156, 238, .28);
}



.about-tools__group::before {
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 50%;
    background: #5dbfff;
    box-shadow: 0 0 10px rgba(49, 162, 247, .35);
}



.about-tools__group::after {
    display: block;
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    content: "";
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2374baff' stroke-width='1.2'%3E%3Cpath d='m16 3 12 6-12 6L4 9l12-6ZM4 16l12 6 12-6M4 23l12 6 12-6'/%3E%3C/svg%3E");
    position: absolute;
    top: 19px;
    right: 0;
    opacity: .8;
}



.about-tools__group:nth-child(2)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2374baff' stroke-width='1.2'%3E%3Cpath d='M5 5h19v19H5zM11 11h16v16H11zM15 19l3 3 7-8'/%3E%3C/svg%3E");
}



.about-tools__group:nth-child(3)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2374baff' stroke-width='1.2'%3E%3Cpath d='M3 6h10v10H3zM19 16h10v10H19zM13 10h9v6M19 22h-9v-6'/%3E%3C/svg%3E");
}



.about-tools__group + .about-tools__group {
    padding-left: 30px;
    border-left: .5px solid rgba(85, 170, 240, .24);
}



.about-tools__label {
    display: block;
    margin-bottom: 15px;
    color: #74baff;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-right: 42px;
}



.about-tools__group h3 {
    margin: 0 0 16px;
    color: #f1f6ff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}



.about-tools__platforms {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}



.about-tools__platforms li {
    position: relative;
    padding: 11px 14px 11px 25px;
    margin-bottom: 7px;
    border: 1px solid rgba(107, 165, 255, .17);
    border-radius: 9px;
    background: linear-gradient(110deg, rgba(24, 69, 127, .44), rgba(13, 42, 85, .3));
    color: #cfddf7;
    font-size: 14px;
}



.about-tools__platforms li::before {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 4px;
    height: 4px;
    content: "";
    border-radius: 50%;
    background: #66b8f2;
    transform: translateY(-50%);
}



.about-tools__methods {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}



.about-tools__methods li {
    padding: 13px 15px;
    border-left: 2px solid rgba(74, 172, 246, .6);
    border-radius: 0 9px 9px 0;
    background: linear-gradient(90deg, rgba(24, 69, 127, .3), rgba(13, 42, 85, .08));
}



.about-tools__methods strong {
    display: block;
    color: #74baff;
    font-size: 15px;
    font-weight: 500;
}



.about-tools__methods span,
.about-tools__group p {
    display: block;
    margin: 5px 0 0;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 1.6;
}



.about-tools__group .about-tools__note {
    margin-top: 8px;
}
/* 1000px у рефі — не 1024, тому на планшеті проєкту (1024, тестова ширина
   зі скіла design-check) секція ще стояла в десктопному 3-колонковому гріді
   (1.2fr 1fr 1fr): колонки 2 і 3 звужувались до 288px і текст ламався
   ("Програмне забезпечення" на два рядки при чотирьох словах, нотатка під
   картками впритул). Піднято до 1024, щоб планшет отримував той самий
   2-колонковий розклад, що вже перевірений і читається вільно на 950px. */
@media (max-width: 1024px) {

    .about-tools__groups {
        grid-template-columns: 1fr 1fr;
    }

    .about-tools__group--platforms {
        grid-column: 1 / -1;
    }

    .about-tools__platforms {
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
    }

    .about-tools__group + .about-tools__group {
        padding-left: 0;
        border-left: 0;
        padding-top: 24px;
        border-top: .5px solid rgba(85, 170, 240, .24);
    }
}
@media (max-width: 600px) {

    .about-tools__heading {
        margin-bottom: 32px;
        text-align: left;
    }

    .about-tools__heading .section-eyebrow {
        justify-content: flex-start;
    }

    .about-tools__groups,
    .about-tools__platforms {
        grid-template-columns: 1fr;
    }
}











.about-cloud__subtitle {
    margin: 20px 0 16px;
    color: #f1f6ff;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4;
}



.about-cloud .about-cloud__layout {
    align-items: center;
}



.about-cloud .about-cloud__panel {
    padding: 38px 28px 28px;
    border-radius: 18px;
    background: radial-gradient(ellipse at 50% 25%, rgba(17, 120, 224, .18), transparent 64%), rgba(5, 23, 53, .45);
}



.about-cloud__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    color: #74baff;
}



.about-cloud .about-cloud__orbit {
    pointer-events: none;
    opacity: .35;
    top: 35px;
}



.about-cloud__standards {
    position: relative;
    display: grid;
    width: 100%;
    gap: 0;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}



.about-cloud__standards li {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-top: .5px solid rgba(104, 172, 241, .2);
}



.about-cloud__standards b {
    color: #74baff;
    font-size: 13px;
    font-weight: 500;
}



.about-cloud__standards span {
    color: var(--color-text-soft);
    font-size: 12px;
    line-height: 1.5;
}



/* Картки-плашки замість плаского списку — так у рефі. Спільна розмітка
   .rich-checks/.rich-check (main.css) лишається: тут лише додано chrome
   картки (border/фон/радіус/падінг) навколо вже наявних icon+span, а не
   замінено на власну ::before-іконку — inline-SVG від Theme\icon() дає той
   самий візуальний результат (галочка), не дублюючи чужий data-URI. */
.about-cloud .rich-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.about-cloud .rich-check {
    --rich-icon: 13px;

    padding: 14px;
    border: 1px solid rgba(107, 165, 255, .16);
    border-radius: 9px;
    background: linear-gradient(115deg, rgba(24, 69, 127, .32), rgba(13, 42, 85, .13));
    font-size: 14px;
    line-height: 1.55;
}

.about-cloud .rich-check .icon { color: var(--color-sky); }

@media (max-width: 768px) {
    .about-cloud .rich-checks { grid-template-columns: 1fr; }
}



.about-cloud__layout .about-cloud__list-label {
    margin: 24px 0 0;
    color: #f1f6ff;
    font-weight: 500;
}



.about-cloud__list-label + .rich-checks {
    margin-top: 14px;
}



.about-cloud__panel {
    position: relative;
    display: flex;
    min-height: 390px;
    padding: 50px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border: 1px solid rgba(100, 167, 255, .25);
    border-radius: 30px;
    background: radial-gradient(circle, rgba(0, 153, 255, .22), rgba(2, 18, 45, .72) 62%);
}



.about-cloud__panel strong {
    font-size: 76px;
}



.about-cloud__panel > span:not(.about-cloud__orbit) {
    max-width: 280px;
    color: #d6e4ff;
    font-size: 18px;
}



.about-cloud__panel small {
    margin-top: 22px;
    color: #74baff;
    letter-spacing: .16em;
}



.about-cloud__orbit {
    position: absolute;
    border: 1px solid rgba(89, 171, 255, .24);
    border-radius: 50%;
}



.about-cloud__orbit--one { width: 280px; height: 280px; }


.about-cloud__orbit--two { width: 430px; height: 210px; transform: rotate(-24deg); }







.about-faq {
    padding: 92px 0 108px;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(0, 118, 225, .19), transparent 46%),
        linear-gradient(180deg, rgba(0, 9, 29, .45), rgba(0, 13, 37, .76));
}



/* align-items: center бракувало — markup раніше мав зайву обгортку
   .faq__wrp (як на Головній), а тут .faq__head і .faq__list лежать
   прямо в .container; без center вони розтягувались на всю ширину
   flex-стовпця й не центрувались. position/z-index — щоб контент стояв
   НАД .about-faq__art (той — position:absolute, z-index:-1). */
.about-faq > .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}



.faq__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 0;
    text-align: center;
}



.faq__head h2 {
    max-width: 820px;
    font-size: clamp(31px, 3.25vw, 46px);
}
@media (max-width: 1100px) {

    .about-tools__layout,
    .about-cloud__layout {
        grid-template-columns: 1fr;
    }


    .about-hero__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 860px;
    }


    .about-role__participant {
        width: 160px;
        gap: 10px;
        font-size: 10px;
    }


    .about-role__participant-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }


    .about-role__step {
        padding-inline: 12px;
    }


    .about-role__step-number {
        left: 12px;
    }


    .about-approach__stage {
        padding-inline: 14px;
    }


    .about-approach__stage h3 {
        font-size: 16px;
    }


    .about-principles__layout {
        gap: 34px;
        grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    }


    


    .about-principle {
        min-height: 148px;
        padding-right: 52px;
    }


    .about-tools__layout,
    .about-cloud__layout {
        gap: 50px;
    }


    .about-cloud__panel {
        order: 2;
        min-height: 340px;
    }
}
@media (max-width: 760px) {


    .about-hero {
        min-height: auto;
        padding: 88px 0 68px;
    }


    .about-hero__image {
        inset: 0;
        opacity: .48;
    }


    .about-hero__image img {
        width: 100vw;
    }


    .about-split {
        gap: 42px;
    }


    .about-intro__visual {
        width: calc(100% + 24px);
        margin-left: -12px;
    }


    .about-hero h1 {
        font-size: clamp(34px, 11vw, 46px);
    }


    .about-hero__lead {
        font-size: 16px;
    }


    .about-hero__content::before {
        top: -38px;
        left: -36px;
        width: calc(100% + 72px);
        height: 570px;
        opacity: .92;
        filter: blur(16px);
    }


    .about-hero__description::before {
        inset: -26px -24px -28px;
        opacity: 1;
        filter: blur(14px);
    }


    .about-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 28px;
    }


    .about-stat {
        min-height: 94px;
        padding: 15px;
    }


    .about-stat:last-child {
        grid-column: span 2;
    }


    .about-split__copy {
        padding-top: 0;
    }


    


    .about-principles__heading {
        margin-bottom: 26px;
    }


    .about-principles__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    


    .about-principles__list {
        padding-left: 22px;
    }


    .about-principle {
        min-height: 0;
        padding: 20px 48px 20px 17px;
        gap: 9px;
        grid-template-columns: 28px 1fr;
    }


    .about-principle__number {
        font-size: 11px;
    }


    .about-principle__content h3 {
        font-size: 17px;
    }


    .about-principle__metrics {
        gap: 8px 14px;
    }


    .about-principles__conclusion {
        margin-top: 44px;
    }


    .about-principles__conclusion > ul {
        grid-template-columns: 1fr;
    }


    .about-principles__conclusion li {
        justify-content: flex-start;
        padding: 14px 0;
        text-align: left;
    }


    .about-principles__conclusion li + li {
        border-top: .5px solid rgba(74, 167, 239, .2);
        border-left: 0;
    }


    .about-role__heading {
        margin-bottom: 28px;
    }


    .about-role__system {
        display: grid;
        min-height: 0;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .about-role__system::before {
        top: 4%;
        width: 100%;
        height: 52%;
    }


    .about-role__connectors {
        display: none;
    }


    .about-role__model {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% + 24px);
        margin: 0 0 10px -12px;
        grid-column: 1 / -1;
        grid-row: 1;
        transform: none;
    }


    .about-role__model figcaption {
        bottom: 8%;
        min-width: 166px;
        padding: 8px 18px;
    }


    .about-role__participant,
    .about-role__participant--mep,
    .about-role__participant--team {
        position: relative;
        inset: auto;
        width: auto;
        min-height: 82px;
        padding: 13px 10px;
        justify-content: flex-start;
        flex-direction: row;
        border-top: .5px solid rgba(77, 170, 255, .24);
        font-size: 9px;
        text-align: left;
        transform: none;
    }


    .about-role__participant--architecture { grid-column: 1; grid-row: 2; }

    .about-role__participant--structure { grid-column: 2; grid-row: 2; }

    .about-role__participant--mep { grid-column: 1; grid-row: 3; }

    .about-role__participant--team { grid-column: 2; grid-row: 3; }


    .about-role__participant-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }


    .about-role__process {
        display: grid;
        margin-top: 46px;
        gap: 0;
        grid-template-columns: 1fr;
    }


    .about-role__process::before {
        top: 10px;
        right: auto;
        bottom: 18px;
        left: 22px;
        width: .5px;
        height: auto;
        background: linear-gradient(180deg, transparent, rgba(48, 177, 255, .74) 8%, rgba(48, 177, 255, .74) 92%, transparent);
    }


    .about-role__step {
        min-height: 150px;
        padding: 0 0 32px 72px;
    }


    .about-role__step + .about-role__step {
        border-left: 0;
    }


    .about-role__step-number {
        top: 0;
        left: 0;
    }


    .about-role__step h3 {
        min-height: 0;
        font-size: 18px;
    }


    .about-approach__heading {
        margin-bottom: 30px;
    }


    .about-approach__logic {
        display: grid;
        margin-bottom: 46px;
        gap: 7px;
        grid-template-columns: 1fr;
        justify-items: center;
    }


    .about-approach__logic i {
        line-height: 1;
        transform: rotate(90deg);
    }


    .about-approach__process {
        grid-template-columns: 1fr;
    }


    .about-approach__process::before {
        top: 0;
        right: auto;
        bottom: 0;
        left: 29px;
        width: .5px;
        height: auto;
        background: linear-gradient(180deg, transparent, rgba(47, 175, 255, .75) 5%, rgba(47, 175, 255, .75) 95%, transparent);
    }


    .about-approach__stage {
        min-height: 0;
        padding: 0 0 54px 78px;
    }


    .about-approach__stage + .about-approach__stage {
        border-left: 0;
    }


    .about-approach__visual {
        height: 128px;
        margin-bottom: 14px;
        justify-content: start;
    }


    .about-approach__visual svg {
        width: min(100%, 250px);
        height: 128px;
    }


    .about-approach__number {
        position: absolute;
        top: 0;
        left: 0;
        width: 58px;
        margin: 0;
        background: #061d48;
        font-size: 42px;
        text-align: center;
    }


    .about-approach__stage h3 {
        min-height: 0;
        font-size: 19px;
    }


    


    .about-cloud__panel {
        min-height: 300px;
        padding: 28px;
    }


    .about-cloud__panel strong {
        font-size: 58px;
    }
}



/* Shared rhythm for the editorial sections; hero and CTA retain their layouts. */
.about-page > :is(.about-intro, .about-role, .about-approach, .about-principles, .about-tools, .about-cloud, .about-global, .about-transition) {
    padding-block: clamp(72px, 7vw, 120px);
}



.about-page :is(.section-heading, .about-tools__heading) h2,
.about-cloud h2 {
    font-size: clamp(31px, 3.25vw, 46px);
    line-height: 1.12;
    font-weight: 300;
    letter-spacing: -1.35px;
}



.about-tools__heading h2 {
    margin-bottom: 22px;
}



.about-page :is(.about-cloud__subtitle, .about-global__copy h3, .about-transition__story h3) {
    margin-bottom: 18px;
    font-size: clamp(20px, 1.7vw, 24px);
    line-height: 1.4;
}



.about-page :is(.about-global__copy, .about-transition__story, .about-transition__ukraine) p {
    font-size: 16px;
    line-height: 1.65;
}



.about-principle {
    padding-right: 22px;
}



.about-principle__content > p {
    font-size: 14px;
    line-height: 1.6;
}



.about-principle__content .about-principle__proof {
    font-size: 13px;
}



@media (max-width: 760px) {

    .about-page :is(.section-heading, .about-tools__heading) h2,
    .about-cloud h2 {
        font-size: clamp(26px, 8vw, 36px);
        letter-spacing: -1px;
    }

    .about-principle { padding-right: 17px; }
}



/* Responsive refinements scoped to the About page. */
.about-page .container > *,
.about-tools__groups > *,
.about-transition__story > *,
.about-transition__ukraine > * {
    min-width: 0;
}


.about-page .btn {
    max-width: 100%;
    white-space: normal;
    height: auto;
    min-height: 48px;
}


.about-page .btn .icon { flex-shrink: 0; }


.about-page .faq-item__answer { max-width: none; }
@media (min-width: 761px) and (max-width: 1100px) {

    .about-approach__process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 20px;
    }

    .about-approach__process::before { display: none; }

    .about-approach__stage { padding: 0 18px 24px; border-bottom: .5px solid rgba(91,153,227,.2); }

    .about-approach__stage:nth-child(3) { border-left: 0; }

    .about-approach__stage h3 { font-size: 20px; }

    .about-approach__logic { flex-wrap: wrap; gap: 12px; }

    .about-role__process { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }

    .about-role__process::before { display: none; }

    .about-role__step:nth-child(4) { border-left: 0; }

    .about-principles__layout { grid-template-columns: 1fr; gap: 28px; }

    .about-principles__heading { max-width: 800px; }

    .about-principles__heading h2 { max-width: 800px; }

    .about-principles__list { max-width: none; }

    .about-transition__flow { gap: 20px; }

    .about-transition__flow li { flex-direction: column; }
}
@media (max-width: 760px) {

    .about-hero { padding-top: 28px; }

    .about-page h1 { font-size: clamp(30px, 7.8vw, 46px); line-height: 1.12; }

    .about-page .is-accent { letter-spacing: inherit; }

    .about-page .section-heading { gap: 16px; margin-bottom: 32px; }

    .about-page .section-heading > p:last-child { font-size: 16px; }

    .about-hero__stats { gap: 10px; }

    .about-stat { min-width: 0; }

    .about-page .about-approach__cta { width: 100%; padding: 16px 20px; }

    .about-page .faq-item__toggle { min-height: 56px; padding: 16px; gap: 12px; }

    .about-page .faq-item__answer { padding: 0 16px 20px; }

    .about-page .faq-item__question { font-size: 15px; }

    .about-page .faq-item__answer p { font-size: 15px; }

    .about-page .about-cloud__panel { order: 0; min-height: 0; }

    .about-page .service-cta__actions { width: 100%; max-width: none; }

    .about-page .service-cta__banner { gap: 28px; }

    .about-page .service-cta__banner h2 { font-size: clamp(26px, 7vw, 36px); }
}
@media (max-width: 380px) {

    .about-stat { padding: 12px; }

    .about-stat strong { font-size: 24px; }

    .about-role__participant { overflow-wrap: anywhere; }

    .about-role__step { padding-left: 60px; }

    .about-approach__stage { padding-left: 62px; }

    .about-approach__number { width: 48px; font-size: 36px; }

    .about-principle { grid-template-columns: 23px minmax(0, 1fr); padding-left: 12px; }

    .about-cloud__standards li { grid-template-columns: 78px minmax(0, 1fr); }
}



.about-page .about-faq {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-bottom: clamp(190px, 23vw, 340px);
}


.about-faq__art {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 50%;
    width: min(1450px, 100%);
    transform: translateX(-50%);
    pointer-events: none;
    opacity: .32;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
}


.about-faq__art img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
@media (max-width: 600px) {

    .about-page .about-faq { padding-bottom: 165px; }

    .about-faq__art { width: 135%; max-width: none; opacity: .25; }
}

/* ── CTA-банер: двоколонковий grid, як у рефі (about-cta__banner) ───────
   Клас лишився .service-cta* (той самий, що на /poslugy/ і /galuzi/), але
   вигляд переписаний під шаблон замовника за прямим фідбеком: текст ліворуч,
   вертикальний стовпець кнопок праворуч, без скляного decor/glow і без
   dot-grid підкладки — увесь цей шар прибраний разом з розміткою в cta.php.
   Брейкпоінти рефу (1100/600) зведені до брейкпоінтів проєкту (1024/768). */
.service-cta {
    position: relative;
    padding: 88px 0;
    background: radial-gradient(circle at 80% 50%, rgba(20, 125, 232, .2), transparent 34%);
}

.service-cta > .container {
    position: relative;
    z-index: 1;
}

.service-cta__banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 60px;
    padding: clamp(38px, 5vw, 72px);
    border: 1px solid rgba(108, 161, 237, .25);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(18, 66, 120, .54), rgba(2, 16, 42, .74));
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 28px 70px rgba(0, 8, 28, .28);
}

.service-cta__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.service-cta__eyebrow { margin: 0; }

.service-cta__heading {
    margin: 0;
    max-width: 820px;
    font-size: clamp(32px, 3.7vw, 50px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -1.35px;
    color: var(--color-text-light);
}

.service-cta__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-cta__text {
    max-width: 660px;
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text-soft);
}

.service-cta__actions {
    display: flex;
    flex-direction: column;
    align-self: center;
    min-width: 250px;
    gap: 12px;
}

.service-cta__btn {
    width: 100%;
    min-width: 0;
    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);
}

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

    .service-cta__actions {
        align-self: stretch;
        min-width: 0;
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    .service-cta { padding: 72px 0; }

    .service-cta__banner {
        gap: 28px;
        padding: 28px 22px;
        border-radius: 18px;
    }

    .service-cta__heading { font-size: clamp(26px, 8vw, 36px); letter-spacing: -1px; }

    .service-cta__actions { max-width: none; }
}