.node-family {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    border-top: 1px solid rgba(20, 21, 31, 0.045);
    background:
        radial-gradient(
            circle at 14% 43%,
            rgba(103, 76, 255, 0.075),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(103, 76, 255, 0.04),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #fafafd 0%,
            #f7f7fa 100%
        );
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}

.node-family__glow {
    display: none;
}

.node-family__container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 32px;
    min-height: 100svh;
    padding-top: 64px;
    padding-bottom: 38px;
}

.node-family__stage {
    display: grid;
    grid-template-columns:
        minmax(570px, 1.12fr)
        minmax(430px, 0.88fr);
    align-items: center;
    gap: clamp(55px, 6vw, 110px);
    min-height: 0;
}

.node-family__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 590px;
    opacity: 1;
    filter: none;
    transform:
        translateY(0)
        scale(1);
    will-change: auto;
    backface-visibility: hidden;
    transition:
        opacity 270ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.node-family__visual::after {
    position: absolute;
    z-index: 0;
    right: 4%;
    bottom: 7%;
    left: 8%;
    height: 18%;
    content: "";
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(8, 9, 15, 0.34) 0%,
            rgba(8, 9, 15, 0.2) 38%,
            rgba(48, 35, 110, 0.08) 58%,
            transparent 76%
        );
    filter: blur(22px);
    pointer-events: none;
    transform: translateY(10px) scaleX(0.92);
    transition: opacity 360ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.node-family__visual:hover::after {
    opacity: 0.86;
    transform: translateY(15px) scaleX(0.95);
}

.node-family__image-glow {
    position: absolute;
    z-index: 0;
    right: 4%;
    bottom: 5%;
    width: 88%;
    height: 42%;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(74, 52, 170, 0.14) 0%,
            rgba(74, 52, 170, 0.055) 43%,
            transparent 72%
        );
    filter: none;
}

.node-family__image {
    position: relative;
    z-index: 2;
    display: block;
    width: min(112%, 920px);
    max-width: none;
    max-height: 680px;
    object-fit: contain;
    user-select: none;
    filter:
        drop-shadow(
            0 22px 22px rgba(11, 12, 19, 0.12)
        );
    backface-visibility: hidden;
    transition:
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.node-family__visual:hover .node-family__image {
    transform:
        translateY(-5px)
        scale(1.008);
}

.node-family__content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 570px;
    opacity: 1;
    filter: none;
    transform: translateY(0);
    will-change: auto;
    backface-visibility: hidden;
    transition:
        opacity 270ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.node-family__label {
    margin-bottom: 22px;
    color: var(--purple);
    font-family:
        ui-monospace,
        "SFMono-Regular",
        Consolas,
        monospace;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.node-family__title {
    color: var(--text);
    font-size: clamp(45px, 4.15vw, 67px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.055em;
}

.node-family__subtitle {
    margin-top: 9px;
    color: #16171d;
    font-size: clamp(26px, 2.15vw, 37px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.045em;
}

.node-family__description {
    max-width: 520px;
    margin-top: 28px;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.018em;
}

.node-specifications {
    width: 100%;
    max-width: 530px;
    margin-top: 32px;
}

.node-specification {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.82fr)
        minmax(190px, 1.18fr);
    align-items: center;
    gap: 25px;
    min-height: 46px;
    border-bottom: 1px solid rgba(20, 21, 31, 0.09);
}

.node-specification:last-child {
    border-bottom: 0;
}

.node-specification dt {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #353740;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.node-specification dt svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.node-specification dd {
    color: #17181e;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.node-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.node-status__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--purple-light);
    box-shadow:
        0 0 0 5px rgba(102, 73, 255, 0.07),
        0 0 13px rgba(102, 73, 255, 0.27);
}

.node-family__navigation {
    --indicator-x: 0px;
    --indicator-y: 0px;
    --indicator-width: 25%;
    --indicator-height: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    min-height: 80px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.91);
    box-shadow: 0 16px 42px rgba(24, 25, 37, 0.035);
    isolation: isolate;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.node-family__indicator {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: var(--indicator-width);
    height: var(--indicator-height);
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(237, 233, 255, 0.91) 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(99, 68, 255, 0.11),
        0 0 31px rgba(91, 55, 255, 0.13),
        0 9px 25px rgba(91, 55, 255, 0.07);
    pointer-events: none;
    transform:
        translate3d(
            var(--indicator-x),
            var(--indicator-y),
            0
        );
    will-change: transform;
    backface-visibility: hidden;
    transition:
        transform 160ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 160ms ease;
}

.node-family__indicator::after {
    position: absolute;
    right: 22%;
    bottom: 0;
    left: 22%;
    height: 2px;
    content: "";
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--purple),
            transparent
        );
    box-shadow:
        0 0 12px rgba(91, 55, 255, 0.55),
        0 0 23px rgba(91, 55, 255, 0.26);
}

.node-family__navigation.no-indicator-animation
.node-family__indicator {
    transition: none;
}

.node-family__tab {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 0;
    min-height: 80px;
    padding: 14px 22px;
    appearance: none;
    color: #33353d;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition:
        color 350ms ease,
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.node-family__tab:last-child {
    border-right: 0;
}

.node-family__tab svg {
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        color 350ms ease,
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.node-family__tab:hover,
.node-family__tab.is-passing {
    color: var(--purple);
}

.node-family__tab:hover svg,
.node-family__tab.is-passing svg {
    color: var(--purple);
    transform:
        translateY(-2px)
        scale(1.05);
}

.node-family__tab.is-active {
    color: #15161c;
}

.node-family__tab.is-active svg {
    color: var(--purple);
    transform:
        translateY(-2px)
        scale(1.06);
}

.node-family__tab.is-active::after {
    display: none;
}

.node-family__stage.is-animating .node-family__visual,
.node-family__stage.is-animating .node-family__content,
.node-family__stage.is-animating .node-family__indicator {
    will-change: transform, opacity;
}

.node-family__stage.is-leaving .node-family__visual {
    opacity: 0;
    filter: none;
    transform:
        translate3d(0, -42px, 0)
        scale(0.985);
}

.node-family__stage.is-leaving .node-family__content {
    opacity: 0;
    filter: none;
    transform:
        translate3d(0, -32px, 0);
}

.node-family__stage.is-entering .node-family__visual {
    opacity: 0;
    filter: none;
    transform:
        translate3d(0, 44px, 0)
        scale(0.985);
    transition: none;
}

.node-family__stage.is-entering .node-family__content {
    opacity: 0;
    filter: none;
    transform:
        translate3d(0, 34px, 0);
    transition: none;
}

@media (max-width: 1250px) {
    .node-family__container {
        padding-top: 55px;
    }

    .node-family__stage {
        grid-template-columns:
            minmax(490px, 1.07fr)
            minmax(390px, 0.93fr);
        gap: 48px;
    }

    .node-family__visual {
        min-height: 540px;
    }

    .node-family__image {
        width: min(116%, 790px);
        max-height: 600px;
    }

    .node-family__title {
        font-size: clamp(40px, 4vw, 58px);
    }

    .node-family__subtitle {
        font-size: clamp(24px, 2.1vw, 32px);
    }

    .node-family__tab {
        gap: 12px;
        padding-right: 14px;
        padding-left: 14px;
        font-size: 13px;
    }
}

@media (max-width: 980px) {
    .node-family {
        min-height: auto;
    }

    .node-family__container {
        min-height: auto;
        padding-top: 68px;
        padding-bottom: 34px;
    }

    .node-family__stage {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .node-family__visual {
        order: 1;
        width: 100%;
        min-height: 470px;
    }

    .node-family__image {
        width: min(820px, 110%);
        max-height: 560px;
    }

    .node-family__content {
        order: 2;
        width: 100%;
        max-width: 720px;
    }

    .node-family__navigation {
        grid-template-columns: repeat(2, 1fr);
    }

    .node-family__tab:nth-child(2) {
        border-right: 0;
    }

    .node-family__tab:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(20, 21, 31, 0.075);
    }
}

@media (max-width: 620px) {
    .node-family__container {
        gap: 25px;
        padding-top: 46px;
    }

    .node-family__visual {
        min-height: 320px;
    }

    .node-family__image {
        width: 128%;
        max-width: none;
        max-height: 400px;
    }

    .node-family__label {
        margin-bottom: 17px;
        font-size: 10px;
    }

    .node-family__title {
        font-size: clamp(36px, 11vw, 51px);
    }

    .node-family__subtitle {
        margin-top: 10px;
        font-size: clamp(22px, 7vw, 30px);
    }

    .node-family__description {
        margin-top: 21px;
        font-size: 14px;
    }

    .node-specifications {
        margin-top: 26px;
    }

    .node-specification {
        grid-template-columns: 1fr;
        gap: 7px;
        min-height: auto;
        padding: 13px 0;
    }

    .node-specification dd {
        padding-left: 34px;
    }

    .node-family__navigation {
        grid-template-columns: 1fr;
    }

    .node-family__tab {
        justify-content: flex-start;
        min-height: 66px;
        padding-right: 25px;
        padding-left: 25px;
        border-right: 0;
        border-bottom: 1px solid rgba(20, 21, 31, 0.075);
    }

    .node-family__tab:last-child {
        border-bottom: 0;
    }

    .node-family__indicator::after {
        top: 20%;
        right: auto;
        bottom: 20%;
        left: 0;
        width: 2px;
        height: auto;
        background:
            linear-gradient(
                180deg,
                transparent,
                var(--purple),
                transparent
            );
    }
}