.hero {
    isolation: isolate;
    background: #030a14;
}

.hero-media {
    opacity: .42;
    mix-blend-mode: screen;
}

.hero-engine {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 22%, var(--icssa-engine-glow), transparent 34%),
        linear-gradient(105deg, rgba(3, 10, 20, .96) 0%, rgba(4, 18, 34, .72) 46%, rgba(3, 10, 20, .88) 100%);
}

.hero-engine__background,
.hero-engine__map,
.hero-engine__hex,
.hero-engine__network,
.hero-engine__logo-target {
    position: absolute;
    inset: 0;
}

.hero-engine__background {
    background-image:
        linear-gradient(90deg, rgba(3, 10, 20, .98) 0%, rgba(3, 10, 20, .72) 38%, rgba(3, 10, 20, .3) 68%, rgba(3, 10, 20, .88) 100%),
        linear-gradient(180deg, rgba(3, 10, 20, .1) 0%, rgba(3, 10, 20, .76) 100%),
        var(--icssa-hero-image);
    background-position: center;
    background-size: cover;
    transform: scale(1.03);
    filter: saturate(.92) contrast(1.08);
}

.hero-engine__map {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .23;
    mix-blend-mode: screen;
}

.hero-engine__hex {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .38;
    mix-blend-mode: screen;
}

.hero-engine__network svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-engine__path,
.hero-engine__branch {
    fill: none;
    stroke: var(--icssa-engine-line);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 10px var(--icssa-engine-glow));
}

.hero-engine__path {
    stroke-width: 2.4;
}

.hero-engine__branch {
    stroke-width: 1.1;
    opacity: .42;
}

.hero-engine__node {
    fill: rgba(255, 255, 255, .42);
    stroke: rgba(83, 216, 245, .46);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: center;
}

.hero-engine__node.is-active {
    fill: var(--icssa-engine-node);
    stroke: var(--icssa-accent-a);
    filter: drop-shadow(0 0 9px var(--icssa-engine-glow));
}

.hero-engine__logo-target {
    display: grid;
    place-items: center end;
    padding-right: max(8vw, calc((100vw - var(--container)) / 2));
    opacity: .94;
}

.hero-engine__logo-target img {
    width: clamp(180px, 22vw, 330px);
    height: auto;
    opacity: .88;
    clip-path: inset(0 calc((1 - var(--icssa-logo-progress, 0)) * 100%) 0 0);
    filter:
        drop-shadow(0 0 18px rgba(83, 216, 245, calc(var(--icssa-logo-progress, 0) * .38)))
        drop-shadow(0 18px 45px rgba(0, 0, 0, .42));
}

.hero-grid {
    z-index: 2;
}

.command-panel {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(20px);
}

@media (max-width: 980px) {
    .hero-engine__logo-target {
        place-items: end center;
        padding: 0 0 28px;
        opacity: .42;
    }
}

@media (max-width: 720px) {
    .hero-engine__map,
    .hero-engine__hex {
        opacity: .2;
    }

    .hero-engine__logo-target {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-engine__background {
        transform: none;
    }

    .hero-engine__path,
    .hero-engine__branch {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }

    .hero-engine__logo-target img {
        clip-path: inset(0 0 0 0);
    }
}