#integrationsCont {
    --container-max-width: 1240px;

    /* Center sections like Elementor boxed containers (max-width + auto margins).
       Replaces the old full-bleed vw side-padding approach. */
    #allSectionsCont > .e-con {
        --display: flex;
        --flex-direction: column;
        --padding-top: 0;
        --padding-bottom: 0;
        --padding-left: 0;
        --padding-right: 0;
    }

    #allSectionsCont > .e-con > .e-con-inner {
        width: 100%;
        max-width: min(100%, var(--container-max-width, 1240px));
        margin-left: auto;
        margin-right: auto;
    }

    #allSectionsCont > .e-con > .e-con-inner > section,
    .hero,
    .trusted,
    .techSection,
    .lightSection {
        box-sizing: border-box;
        width: 100%;
        max-width: min(100%, var(--container-max-width, 1240px));
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    --royal: #0b078f;
    --royal-deep: #07045f;
    --gold: #ecb000;
    --paper: #fafafd;
    --lavender: #efefff;
    --ink: #071c27;
    --cyan: #12c2d8;
    --mint: #8cf2da;
    --line: #d9e8e8;
    --pale: #eef9f8;
    --muted: #637b84;

    .hero {
        min-height: 650px;
        padding: 90px 20px;
        display: grid;
        grid-template-columns:1.1fr .9fr;
        gap: 70px;
        align-items: center;
        color: white;
        /*background-color: var(--ink);*/
        /*background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);*/
        background-size: 56px 56px
    }

    .heroCopy {
        position: relative;
        z-index: 2
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--mint);
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .14em
    }

    .eyebrow.dark {
        color: #087f92
    }

    h1 {
        font-size: clamp(48px, 5vw, 72px);
        line-height: 1.03;
        letter-spacing: -.055em;
        margin: 24px 0 22px;
        font-weight: 620
    }

    h1 em {
        display: block;
        font-style: normal;
        color: var(--cyan)
    }

    .heroCopy > p {
        max-width: 610px;
        color: #b5c8ce;
        font-size: 18px;
        line-height: 1.7
    }

    .actions {
        display: flex;
        gap: 12px;
        margin: 34px 0 30px
    }

    .btn {
        min-height: 50px;
        padding: 0 20px;
        border-radius: 9px;
        font-size: 14px;
        transition: transform .2s
    }

    .btn:hover {
        transform: translateY(-2px)
    }

    .primary {
        background: var(--cyan);
        color: var(--ink)
    }

    .ghost {
        border: 1px solid #ffffff3d
    }

    .proof {
        display: flex;
        gap: 25px;
        color: #8facb5;
        font-size: 12px
    }

    .proof span {
        display: flex;
        align-items: center;
        gap: 7px
    }

    .proof svg {
        color: var(--mint)
    }

    .visual {
        width: 470px;
        height: 470px;
        position: relative
    }

    .ring {
        position: absolute;
        border: 1px solid #8cf2da30;
        border-radius: 50%
    }

    .r1 {
        inset: 45px
    }

    .r2 {
        inset: 110px;
        border-color: #12c2d84a
    }

    .core {
        position: absolute;
        left: 151px;
        top: 151px;
        width: 168px;
        height: 168px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: linear-gradient(145deg, #0e3b4a, #071b25);
        border: 1px solid #8cf2da66;
        box-shadow: 0 0 70px #12c2d83d
    }

    .core small {
        font-size: 10px;
        color: #789aa4
    }

    .node {
        position: absolute;
        width: 134px;
        padding: 14px;
        display: flex;
        align-items: center;
        gap: 9px;
        background: #092a37e8;
        border: 1px solid #ffffff24;
        border-radius: 12px;
        box-shadow: 0 14px 40px #0004
    }

    .node span {
        display: flex;
        flex-direction: column
    }

    .node strong {
        font-size: 12px
    }

    .node small {
        margin-top: 4px;
        color: #789aa4;
        font-size: 9px;
        letter-spacing: .09em
    }

    .node svg {
        color: var(--cyan)
    }

    .n1 {
        top: 24px;
        left: 42px
    }

    .n3 {
        left: 0;
        bottom: 56px
    }

    .trusted {
        padding: 38px 20px;
        border-bottom: 1px solid var(--line);
        text-align: center
    }

    .trusted > p {
        color: #7c9299;
        font-size: 10px;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-weight: 800
    }

    .lightSection {
        padding: 110px 20px
    }

    .heading {
        max-width: 760px;
        margin-bottom: 55px
    }

    .heading h2 {
        font-size: clamp(38px, 4vw, 54px);
        line-height: 1.08;
        letter-spacing: -.045em;
        margin: 17px 0
    }

    .heading > p {
        color: var(--muted);
        line-height: 1.7
    }

    .flow {
        display: grid;
        grid-template-columns:1fr 45px 1fr 45px 1fr;
        align-items: stretch
    }

    .flow article {
        min-height: 325px;
        padding: 29px;
        border: 1px solid var(--line);
        border-radius: 16px;
        border-top: 4px solid #119cb4;
        display: flex;
        flex-direction: column;
        box-sizing: border-box
    }

    .flow article > :last-child {
        margin-top: auto;
        padding-top: 22px
    }

    .flow label {
        color: #1195a7;
        font-size: 9px;
        letter-spacing: .14em;
        font-weight: 850
    }

    .flow h3 {
        font-size: 21px;
        margin: 20px 0 10px
    }

    .flow article > p {
        color: #6e848c;
        font-size: 13px;
        line-height: 1.7
    }

    .arrow {
        justify-self: center;
        align-self: center;
        color: #7dcbd0
    }

    .chips {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 8px;
        margin-top: 22px
    }

    .chips span {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px;
        background: var(--pale);
        border-radius: 7px;
        font-size: 9px;
        color: #43636b
    }

    .chips svg {
        width: 16px;
        color: #1195a7
    }

    .bars {
        height: 82px;
        display: flex;
        align-items: end;
        gap: 8px;
        margin-top: 24px;
        border-bottom: 1px solid var(--line)
    }

    .bars i {
        flex: 1;
        background: linear-gradient(var(--cyan), #0879a6);
        border-radius: 3px 3px 0 0
    }

    .bars i:nth-child(1) {
        height: 35%
    }

    .bars i:nth-child(2) {
        height: 55%
    }

    .bars i:nth-child(3) {
        height: 44%
    }

    .bars i:nth-child(4) {
        height: 82%
    }

    .bars i:nth-child(5) {
        height: 65%
    }

    .bars i:nth-child(6) {
        height: 93%
    }

    .result {
        margin-top: 24px;
        padding: 18px;
        background: var(--ink);
        color: white;
        border-radius: 10px;
        display: grid;
        grid-template-columns:auto 1fr;
        align-items: end;
        gap: 0 8px
    }

    .result strong {
        font-size: 28px;
        color: var(--mint)
    }

    .result span {
        font-size: 10px;
        color: #8facb5;
        padding-bottom: 5px
    }

    .result small {
        grid-column: 1/3;
        color: #6ce1bd;
        margin-top: 8px
    }

    @media (max-width: 980px) {
        .hero {
            grid-template-columns:1fr
        }

        .visual {
            margin: auto
        }

        .flow {
            grid-template-columns:1fr;
            gap: 14px
        }

        .arrow {
            transform: rotate(90deg)
        }
    }

    @media (max-width: 640px) {
        .hero {
            padding-top: 60px
        }

        .hero h1 {
            font-size: 43px
        }

        .actions, .proof {
            flex-direction: column
        }

        .visual {
            width: 340px;
            height: 390px;
            transform: scale(.82);
            transform-origin: top left;
            margin-bottom: -60px
        }

        .trusted {
            text-align: left
        }

        .lightSection {
            padding-top: 80px;
            padding-bottom: 80px
        }
    }

    .hero {
        /*background-image: linear-gradient(90deg, #071c27 0%, #071c27f4 48%, #071c27bf 100%), url("/integrations/assets/about2-1024x1024.webp");*/
        background-size: cover;
        background-position: center
    }

    .techSection {
        padding: 110px 20px;
        /*background: linear-gradient(180deg, #f5fbfa 0%, #fff 100%);*/
        position: relative;
        overflow: hidden
    }

    .techSection:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(#087f920b 1px, transparent 1px), linear-gradient(90deg, #087f920b 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(to bottom, #000, transparent 72%)
    }

    .techIntro, .techLayout, .techBadges {
        position: relative
    }

    .techIntro {
        max-width: 820px
    }

    .techIntro h2 {
        font-size: clamp(40px, 4.5vw, 58px);
        line-height: 1.06;
        letter-spacing: -.05em;
        margin: 18px 0 14px
    }

    .techLead {
        color: var(--muted);
        font-size: 17px
    }

    .techLayout {
        display: grid;
        grid-template-columns:.9fr 1.1fr;
        gap: 70px;
        margin-top: 55px
    }

    .techCopy {
        padding-left: 25px;
        border-left: 3px solid var(--cyan)
    }

    .techCopy p {
        color: #536d76;
        font-size: 14px;
        line-height: 1.85;
        margin: 0 0 20px
    }

    .architectureMap {
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #ffffffd9;
        box-shadow: 0 24px 70px #0c50600d
    }

    .architectureMap article {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: white
    }

    .architectureMap article span {
        display: flex;
        flex-direction: column
    }

    .architectureMap article small {
        color: #1195a7;
        font-size: 8px;
        font-weight: 850;
        letter-spacing: .14em
    }

    .architectureMap article strong {
        margin: 5px 0 2px;
        font-size: 14px
    }

    .architectureMap article p {
        margin: 0;
        color: #789099;
        font-size: 10px
    }

    .mapIcon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 10px;
        background: var(--pale);
        color: #1195a7
    }

    .mapIcon svg {
        width: 20px
    }

    .mapCore {
        border-color: #93dfe3 !important;
        background: #f1fbfa !important
    }

    .mapLine {
        height: 36px;
        display: grid;
        place-items: center;
        color: #79c6cc
    }

    .mapLine svg {
        transform: rotate(90deg);
        width: 18px
    }

    .mapSplit {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 10px
    }

    .mapSplit article {
        align-items: flex-start
    }

    .techBadges {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 35px
    }

    .techBadges span {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 10px 13px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
        color: #49646d;
        font-size: 11px
    }

    .techBadges svg {
        width: 14px;
        color: #1195a7
    }

    @media (max-width: 980px) {
        .techLayout {
            grid-template-columns:1fr
        }
    }

    @media (max-width: 640px) {
        .techSection {
            padding: 80px 28px
        }

        .mapSplit {
            grid-template-columns:1fr
        }
    }

    /* Royal rebrand variable overrides (scoped to this section) */
    --ink: #0b078f;
    --cyan: #ecb000;
    --mint: #fff3c4;
    --line: #e6e3ee;
    --pale: #f4f3ff;
    --muted: #4f5069;

    .hero {
        min-height: 610px;
        grid-template-columns:1.05fr .95fr;
        /*background-color: #0b078f;*/
        /*background-image: linear-gradient(90deg, #0b078ff7 0%, #0b078fe8 52%, #262199cf 100%), url("/integrations/assets/about2-1024x1024.webp");*/
        background-position: center;
        background-size: cover;
        margin-top: 93px;
        padding-bottom: 78px
    }

    .hero h1 {
        font-weight: 700;
        letter-spacing: -.045em
    }

    .hero h1 em {
        color: #fff
    }

    .heroCopy > p {
        color: #eeeeff
    }

    .eyebrow {
        color: #ffe18a
    }

    .primary {
        background: #ecb000;
        color: #111
    }

    .ghost {
        background: #fff;
        color: #0b078f;
        border-color: #fff
    }

    .proof {
        color: #d7d6ff
    }

    .proof svg {
        color: #ecb000
    }

    .ring {
        border-color: #ffffff4d
    }

    .r2 {
        border-color: #ecb00085
    }

    .core {
        background: linear-gradient(145deg, #2320a7, #09076d);
        border-color: #ffffffa3;
        box-shadow: 0 0 70px #00000030
    }

    .core small {
        color: #c3c1ef
    }

    .node {
        background: #ffffffee;
        border: 0;
        color: #19192b;
        box-shadow: 0 18px 46px #07055e40
    }

    .node small {
        color: #696982
    }

    .node svg {
        color: #0b078f
    }

    .trusted {
        padding-top: 48px;
        padding-bottom: 48px;
        /*background: #fff*/
    }

    .trusted > p {
        color: #24243d
    }

    .lightSection {
        /*background: #f8f8fb*/
    }

    .heading h2, .techIntro h2 {
        color: #171725;
        font-weight: 700
    }

    .eyebrow.dark, .flow label {
        color: #0b078f
    }

    .flow {
        gap: 18px;
        grid-template-columns:1fr 26px 1fr 26px 1fr
    }

    .flow article {
        border: 0;
        border-top: 0;
        box-shadow: 0 12px 34px #2c28750f;
        border-radius: 18px;
        background: #fff
    }

    .flow article:before {
        content: "";
        display: block;
        width: 42px;
        height: 5px;
        border-radius: 99px;
        background: #ecb000;
        margin-bottom: 22px
    }

    .arrow {
        color: #0b078f
    }

    .chips span {
        background: #f3f2ff
    }

    .chips svg {
        color: #0b078f
    }

    .bars i {
        background: linear-gradient(#7773ee, #0b078f)
    }

    .result {
        background: #0b078f
    }

    .result strong {
        color: #fff
    }

    .result small {
        color: #ffe18a
    }

    .techSection {
        /*background: linear-gradient(120deg, #fff 0%, #fff8e8 48%, #e7e5ff 100%);*/
        padding-top: 115px;
        padding-bottom: 115px
    }

    .techSection:before {
        display: none
    }

    .techCopy {
        border-left-color: #ecb000
    }

    .architectureMap {
        border: 0;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 22px 55px #29228a20
    }

    .architectureMap article {
        border-color: #eceaf6;
        border-radius: 14px
    }

    .architectureMap article small {
        color: #0b078f
    }

    .mapIcon {
        background: #efeeff;
        color: #0b078f
    }

    .mapCore {
        border-color: #bbb8f2 !important;
        background: #f4f3ff !important
    }

    .mapLine {
        color: #0b078f
    }

    .techBadges span {
        border: 0;
        box-shadow: 0 6px 18px #251f8314
    }

    .techBadges svg {
        color: #0b078f
    }

    @media (max-width: 980px) {
        .hero {
            grid-template-columns:1fr
        }

        .flow {
            grid-template-columns:1fr;
            gap: 16px
        }
    }

    @media (max-width: 640px) {
        .hero {
            padding-top: 60px;
            padding-bottom: 70px
        }
    }

    /* Final polish layer */
    .hero {
        position: relative;
        min-height: 690px;
        padding-inline: 20px;
        grid-template-columns:1.05fr .95fr;
        gap: 92px;
        /*background-image: linear-gradient(100deg, #0b078ffb 0%, #0b078ff0 52%, #25209ed5 100%), url("/integrations/assets/about2-1024x1024.webp")*/
    }

    .hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 75% 40%, #756ff046, transparent 34%);
        pointer-events: none
    }

    .heroCopy {
        max-width: 720px
    }

    .eyebrow {
        font-size: 12px;
        letter-spacing: .16em
    }

    .hero h1 {
        color: #fff;
        font-size: clamp(54px, 5vw, 76px);
        line-height: 1.02;
        margin-block: 28px 24px
    }

    .heroCopy > p {
        font-size: 19px;
        line-height: 1.75;
        max-width: 640px;
        color: #eeeeff
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-weight: 750;
        min-height: 54px;
        padding-inline: 24px;
        border-radius: 999px;
        font-size: 15px
    }

    .proof {
        font-size: 14px;
        gap: 28px
    }

    .visual {
        filter: drop-shadow(0 30px 55px #05033b50)
    }

    .core {
        width: 178px;
        height: 178px;
        left: 146px;
        top: 146px;
        gap: 15px;
        background: linear-gradient(145deg, #fff, #f1f0ff);
        border: 1px solid #ffffff;
        box-shadow: 0 0 0 12px #ffffff0a, 0 30px 80px #05033b60
    }

    .coreLogo {
        display: block;
        width: 132px;
        height: auto
    }

    .core small {
        color: #66657d;
        font-size: 10px;
        letter-spacing: .04em
    }

    .node {
        width: 170px;
        min-height: 74px;
        padding: 15px 17px;
        border-radius: 16px
    }

    .node strong {
        font-size: 14px
    }

    .node small {
        font-size: 12px;
        letter-spacing: .04em
    }

    .trusted {
        padding-top: 112px;
        padding-bottom: 112px;
        /*background: linear-gradient(135deg, #fff 0%, #fffdf7 52%, #f0efff 100%);*/
        text-align: left;
        border: 0
    }

    .integrationHeading {
        max-width: 760px;
        margin-bottom: 48px
    }

    .integrationHeading > span {
        display: block;
        color: var(--royal);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .15em;
        text-transform: uppercase
    }

    .integrationHeading h2 {
        max-width: 720px;
        margin: 16px 0 16px;
        font-size: clamp(40px, 4vw, 58px);
        line-height: 1.08;
        letter-spacing: -.045em
    }

    .integrationHeading p {
        margin: 0;
        color: #595a72;
        font-size: 17px;
        line-height: 1.75
    }

    .integrationNarrative {
        max-width: 1040px;
        padding: 42px 48px;
        border-left: 4px solid var(--gold);
        border-radius: 0 22px 22px 0;
        background: #ffffffbd;
        box-shadow: 0 20px 55px #211b7a0d
    }

    .integrationNarrative > p {
        margin: 0;
        color: #33344d;
        font-size: 20px;
        line-height: 1.75;
        letter-spacing: -.018em
    }

    .integrationNarrative > p + p {
        margin-top: 22px;
        color: #57586f;
        font-size: 17px
    }

    .integrationNarrative strong {
        color: var(--royal);
        font-weight: 700
    }

    .integrationProof {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 24px;
        margin-top: 30px;
        padding-top: 25px;
        border-top: 1px solid #e5e2ef
    }

    .integrationProof span {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #44455e;
        font-size: 14px;
        font-weight: 600
    }

    .integrationProof svg {
        width: 17px;
        color: var(--royal)
    }

    .lightSection, .techSection {
        padding-top: 120px;
        padding-bottom: 120px
    }

    .heading {
        margin-bottom: 64px
    }

    .heading h2, .techIntro h2 {
        font-size: clamp(42px, 4vw, 58px)
    }

    .heading > p, .techLead {
        font-size: 17px
    }

    .flow {
        gap: 20px;
        grid-template-columns:1fr 30px 1fr 30px 1fr
    }

    .flow article {
        min-height: 360px;
        padding: 34px;
        border-radius: 22px
    }

    .flow h3 {
        font-size: 23px
    }

    .flow article > p {
        font-size: 15px
    }

    .flow label {
        font-size: 12px
    }

    .chips span {
        font-size: 12px;
        padding: 11px
    }

    .result {
        padding: 22px;
        border-radius: 14px
    }

    .techLayout {
        gap: 86px
    }

    .techCopy p {
        font-size: 16px;
        line-height: 1.85
    }

    .architectureMap {
        padding: 34px;
        border-radius: 24px
    }

    .architectureMap article {
        padding: 20px
    }

    .architectureMap article small {
        font-size: 11px
    }

    .architectureMap article strong {
        font-size: 16px
    }

    .architectureMap article p {
        font-size: 13px
    }

    .techBadges span {
        font-size: 13px;
        padding: 12px 16px
    }

    @media (max-width: 980px) {
        .hero {
            grid-template-columns:1fr;
            gap: 28px
        }

        .visual {
            margin-inline: auto
        }

        .flow {
            grid-template-columns:1fr
        }

        .lightSection, .techSection {
            padding-block: 92px
        }
    }

    @media (max-width: 640px) {
        .hero {
            min-height: auto;
            padding: 64px 24px 74px
        }

        .hero h1 {
            font-size: 45px
        }

        .heroCopy > p {
            font-size: 17px
        }

        .proof {
            flex-direction: column;
            gap: 10px
        }

        .visual {
            width: 330px
        }

        .trusted, .lightSection, .techSection {
            padding: 78px 24px
        }

        .integrationHeading h2 {
            font-size: 38px
        }

        .integrationNarrative {
            padding: 30px 26px
        }

        .integrationNarrative > p {
            font-size: 18px
        }

        .integrationNarrative > p + p {
            font-size: 16px
        }

        .integrationProof {
            flex-direction: column
        }
    }

}