#ecl-connected-hero {
    --ecl-purple: #2a1657;
    --ecl-purple-2: #6849d9;
    --ecl-lilac: #b7a4ff;
    --ecl-yellow: #ffbd10;
    --ecl-ink: #171229;
    --ecl-copy: #655f74;
    --ecl-white: #ffffff;
    --ecl-wash: #f5f6ff;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: clamp(48px, 6vw, 86px) clamp(18px, 5vw, 76px) 30px;
    color: var(--ecl-ink);
    background:
        radial-gradient(circle at 80% 16%, rgba(142, 216, 255, .25), transparent 34%),
        radial-gradient(circle at 56% 54%, rgba(183, 164, 255, .22), transparent 38%),
        linear-gradient(128deg, #ffffff 4%, #f7f5ff 52%, #eef8ff 100%);
    isolation: isolate;
}

#ecl-connected-hero,
#ecl-connected-hero * {
    box-sizing: border-box;
}

#ecl-connected-hero .ecl-connected-hero__backdrop {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(42, 22, 87, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 22, 87, .035) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%, #000);
    mask-image: linear-gradient(90deg, transparent, #000 46%, #000);
}

#ecl-connected-hero .ecl-connected-hero__grid {
    display: grid;
    grid-template-columns: minmax(480px, 1.03fr) minmax(480px, .97fr);
    align-items: center;
    gap: clamp(24px, 4vw, 68px);
    width: min(100%, 1320px);
    margin: 0 auto;
}

#ecl-connected-hero h1 {
    max-width: 690px;
    margin: 0;
    color: var(--ecl-purple);
    font-family: inherit;
    font-size: clamp(46px, 4.2vw, 72px);
    font-weight: 540;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-wrap: balance;
}

#ecl-connected-hero h1 span {
    display: inline;
    background: linear-gradient(transparent 72%, rgba(255, 189, 16, .32) 72%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

#ecl-connected-hero .ecl-connected-hero__intro {
    max-width: 620px;
    margin: 27px 0 0;
    color: var(--ecl-copy);
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.7;
}

#ecl-connected-hero .ecl-connected-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

#ecl-connected-hero .ecl-connected-hero__button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

#ecl-connected-hero .ecl-connected-hero__button:hover,
#ecl-connected-hero .ecl-connected-hero__button:focus-visible {
    transform: translateY(-2px);
}

#ecl-connected-hero .ecl-connected-hero__button--primary {
    color: var(--ecl-purple);
    background: var(--ecl-yellow);
    box-shadow: 0 12px 28px rgba(255, 189, 16, .24);
}

#ecl-connected-hero .ecl-connected-hero__button--secondary {
    border-color: rgba(42, 22, 87, .18);
    color: var(--ecl-purple);
    background: rgba(255, 255, 255, .55);
}

#ecl-connected-hero .ecl-connected-road {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    border-radius: 38px;
}

#ecl-connected-hero .ecl-connected-road__haze {
    position: absolute;
    inset: 5% 0 0;
    background: radial-gradient(ellipse at 56% 52%, rgba(104, 73, 217, .18), transparent 57%);
    filter: blur(22px);
}

#ecl-connected-hero .ecl-connected-road__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

#ecl-connected-hero .ecl-connected-road__base,
#ecl-connected-hero .ecl-connected-road__glow,
#ecl-connected-hero .ecl-connected-road__flow {
    fill: none;
    stroke-linecap: round;
}

#ecl-connected-hero .ecl-connected-road__base {
    stroke: rgba(42, 22, 87, .08);
    stroke-width: 62;
}

#ecl-connected-hero .ecl-connected-road__glow {
    stroke: url(#eclRoadGradientLive);
    stroke-width: 45;
    filter: url(#eclRoadGlowLive);
    opacity: .92;
}

#ecl-connected-hero .ecl-connected-road__flow {
    stroke: rgba(255, 255, 255, .78);
    stroke-width: 8;
    stroke-dasharray: 3 28;
    animation: ecl-connected-road-flow 1.4s linear infinite;
}

#ecl-connected-hero.is-paused .ecl-connected-road__flow {
    animation-play-state: paused;
}

#ecl-connected-hero .ecl-connected-road__runner-halo {
    fill: rgba(255, 189, 16, .22);
}

#ecl-connected-hero .ecl-connected-road__runner {
    fill: var(--ecl-yellow);
    stroke: var(--ecl-white);
    stroke-width: 5;
}

@keyframes ecl-connected-road-flow {
    to { stroke-dashoffset: -31; }
}

#ecl-connected-hero .ecl-connected-stage {
    position: absolute;
    max-width: 150px;
    transform: translate(-50%, -50%);
    color: var(--ecl-copy);
    transition: transform .35s ease, color .35s ease;
}

#ecl-connected-hero .ecl-connected-stage::before {
    display: block;
    width: 10px;
    height: 10px;
    margin-bottom: 9px;
    border: 3px solid var(--ecl-white);
    border-radius: 50%;
    background: var(--ecl-purple-2);
    box-shadow: 0 0 0 5px rgba(104, 73, 217, .14);
    content: "";
    transition: background-color .35s ease, box-shadow .35s ease;
}

#ecl-connected-hero .ecl-connected-stage strong,
#ecl-connected-hero .ecl-connected-stage span {
    display: block;
}

#ecl-connected-hero .ecl-connected-stage strong {
    color: var(--ecl-purple);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

#ecl-connected-hero .ecl-connected-stage span {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
}

#ecl-connected-hero .ecl-connected-stage.is-active {
    color: var(--ecl-purple);
    transform: translate(-50%, -50%) scale(1.06);
}

#ecl-connected-hero .ecl-connected-stage.is-active::before {
    background: var(--ecl-yellow);
    box-shadow: 0 0 0 8px rgba(255, 189, 16, .2);
}

#ecl-connected-hero .ecl-connected-stage--1 { left: 18%; top: 79%; }
#ecl-connected-hero .ecl-connected-stage--2 { left: 37%; top: 62%; }
#ecl-connected-hero .ecl-connected-stage--3 { left: 64%; top: 38%; }
#ecl-connected-hero .ecl-connected-stage--4 { left: 89%; top: 13%; }

#ecl-connected-capabilities {
    --ecl-purple: #2a1657;
    --ecl-purple-2: #6849d9;
    --ecl-yellow: #ffbd10;
    --ecl-white: #ffffff;
    --ecl-wash: #f5f6ff;
    position: relative;
    padding: clamp(42px, 5vw, 70px) clamp(18px, 5vw, 76px);
    color: var(--ecl-purple);
    background: #ffffff;
}

#ecl-connected-capabilities,
#ecl-connected-capabilities * {
    box-sizing: border-box;
}

#ecl-connected-capabilities .ecl-connected-capabilities__inner {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, #f7f5ff, #eef8ff);
    box-shadow: 0 18px 60px rgba(42, 22, 87, .09);
}

#ecl-connected-capabilities .ecl-connected-capabilities__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 10px 14px;
}

#ecl-connected-capabilities .ecl-connected-capabilities__top small,
#ecl-connected-capabilities .ecl-connected-capabilities__top strong {
    display: block;
}

#ecl-connected-capabilities .ecl-connected-capabilities__top small {
    color: var(--ecl-purple-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

#ecl-connected-capabilities .ecl-connected-capabilities__top strong {
    margin-top: 5px;
    color: var(--ecl-purple);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

#ecl-connected-capabilities .ecl-connected-capabilities__replay {
    appearance: none;
    padding: 8px 10px;
    border: 0;
    color: var(--ecl-purple);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#ecl-connected-capabilities .ecl-connected-services {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

#ecl-connected-capabilities .ecl-connected-service {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: var(--ecl-purple);
    background: var(--ecl-wash);
    transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

#ecl-connected-capabilities .ecl-connected-service b {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(104, 73, 217, .1);
    font-size: 11px;
    font-weight: 600;
}

#ecl-connected-capabilities .ecl-connected-service span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

#ecl-connected-capabilities .ecl-connected-service.is-active {
    transform: translateY(-3px);
    border-color: rgba(104, 73, 217, .18);
    background: var(--ecl-white);
    box-shadow: 0 12px 28px rgba(42, 22, 87, .1);
}

#ecl-connected-capabilities .ecl-connected-service.is-active b {
    color: var(--ecl-purple);
    background: var(--ecl-yellow);
}

@media (max-width: 991px) {
    #ecl-connected-hero .ecl-connected-hero__grid {
        grid-template-columns: 1fr;
    }

    #ecl-connected-hero .ecl-connected-hero__copy {
        max-width: 720px;
    }

    #ecl-connected-hero .ecl-connected-road {
        min-height: 420px;
    }

    #ecl-connected-capabilities .ecl-connected-services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    #ecl-connected-hero {
        padding: 112px 18px 42px;
    }

    #ecl-connected-hero h1 {
        font-size: clamp(42px, 12.5vw, 58px);
        line-height: 1.04;
    }

    #ecl-connected-hero .ecl-connected-road {
        min-height: 340px;
        margin-inline: -18px;
    }

    #ecl-connected-hero .ecl-connected-stage {
        max-width: 105px;
    }

    #ecl-connected-hero .ecl-connected-stage span {
        display: none;
    }

    #ecl-connected-capabilities .ecl-connected-capabilities__top {
        align-items: center;
    }

    #ecl-connected-capabilities .ecl-connected-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    #ecl-connected-hero .ecl-connected-road__flow {
        animation: none;
    }

    #ecl-connected-hero .ecl-connected-stage,
    #ecl-connected-capabilities .ecl-connected-service,
    #ecl-connected-hero .ecl-connected-hero__button {
        transition: none;
    }
}