.software-hero {
    min-height: max(760px, 90svh);
    padding: 148px 0 96px;
    overflow: clip;
    isolation: isolate;
}

.software-hero .software-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.software-hero .software-photo {
    position: absolute;
    inset: -60px -24px;
    width: auto;
    height: auto;
    background-size: cover;
    background-position: right center;
    transform-origin: 82% 58%;
}

.software-hero .header-gradients {opacity: 0.55;}
.software-hero > .container {z-index: 3;}
.software-hero .header-content {max-width: 570px;}
.software-hero .header-eyebrow {letter-spacing: 0;}
.software-hero .header-title {font-size: 44px;}
.software-hero .header-text {font-size: 18px; line-height: 1.6;}

.software-network {
    position: absolute;
    z-index: 2;
    right: 28px;
    top: 50%;
    width: min(52%, 820px);
    aspect-ratio: 1000 / 640;
    margin: 0;
    transform: translateY(-43%);
    pointer-events: none;
}

.software-network svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.route-web, .node-web {--connection-color: #71e4ff;}
.route-whatsapp, .node-whatsapp {--connection-color: #57e6ac;}
.route-crm, .node-crm {--connection-color: #ff80c6;}
.route-erp, .node-erp {--connection-color: #f4d57e;}
.node-api {--connection-color: #fff;}

.software-network path {
    stroke: var(--connection-color);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.connection-base {opacity: 0.2;}
.connection-live {opacity: 0.72;}
.is-software-motion .connection-live {stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1;}
.software-network .data-packet {display: none; fill: var(--connection-color);}
.is-software-motion .data-packet.is-visible {display: block;}

.software-node {
    position: absolute;
    width: 104px;
    text-align: center;
    transform: translate(-50%, -26px);
}

.node-web {left: 13%; top: 25%;}
.node-whatsapp {left: 12%; top: 76.5625%;}
.node-api {left: 55%; top: 51.5625%;}
.node-crm {left: 90%; top: 22.65625%;}
.node-erp {left: 90%; top: 79.6875%;}

.system-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border: 1px solid var(--connection-color);
    border-radius: 50%;
    background: rgba(5, 9, 13, 0.92);
    color: var(--connection-color);
    font-size: 23px;
}

.node-api .system-icon {border-radius: 8px;}
.system-label {display: block; width: max-content; max-width: 100%; margin: 8px auto 0; color: #fff; font-size: 13px; line-height: 1.3;}
.is-software-motion .system-icon {opacity: 0.52; border-color: rgba(255, 255, 255, 0.28);}
.is-software-motion .is-reached .system-icon {opacity: 1; border-color: var(--connection-color);}
.is-software-motion .is-current .system-icon {box-shadow: 0 0 16px color-mix(in srgb, var(--connection-color) 25%, transparent);}

@media (max-width: 1199px) {
    .software-hero {min-height: 0; padding: 140px 0 410px;}
    .software-hero .row > .col-lg-6 {width: 100%;}
    .software-hero .header-content {max-width: 700px; margin: 0 auto; text-align: center;}
    .software-hero .header-title {font-size: 40px;}
    .software-hero .header-text {max-width: 650px; margin: 0 auto; font-size: 17px;}
    .software-hero .software-photo {inset: -32px -18px; background-size: auto 470px; background-position: right bottom;}
    .software-network {top: auto; bottom: 34px; right: 50%; width: min(650px, calc(100% - 48px)); transform: translateX(50%);}
}

@media (max-width: 575px) {
    .software-hero {padding: 124px 0 295px;}
    .software-hero .navbar-scroll {padding: 16px 12px;}
    .software-hero .header-title {font-size: 32px;}
    .software-hero .header-text {font-size: 16px; line-height: 1.6;}
    .software-hero .software-photo {background-size: auto 330px;}
    .software-network {bottom: 32px; width: calc(100% - 40px);}
    .software-node {width: 80px; transform: translate(-50%, -20px);}
    .system-icon {width: 40px; height: 40px; font-size: 19px;}
    .system-label {margin-top: 6px; font-size: 11px;}
}

@media (max-width: 359px) {
    .software-hero {padding-top: 110px; padding-bottom: 225px;}
    .software-hero .header-title {font-size: 28px;}
    .software-hero .header-text {font-size: 15px; line-height: 1.5;}
}

@media (prefers-reduced-motion: reduce) {
    .software-hero .software-scene, .software-hero .software-photo {transform: none !important; will-change: auto;}
    .software-network .data-packet {display: none !important;}
}