/* Meaningful hero illustration: Understand AI → Check the source → Recognise bias. */
.enact-hero-concepts .visual-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    will-change: transform;
}

.enact-hero-concepts .visual-card small {
    display: block;
    margin: 12px 0 0;
    color: #172033;
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: .01em;
}

.enact-hero-concepts .card-a { animation: enact-float-a 6.5s ease-in-out infinite; }
.enact-hero-concepts .card-b { animation: enact-float-b 7.5s ease-in-out .4s infinite; }
.enact-hero-concepts .card-c { animation: enact-float-c 6.8s ease-in-out .8s infinite; }

.concept-icon {
    position: relative;
    display: block;
    width: 58px;
    height: 45px;
}

.network-icon::before,
.network-icon::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    height: 2px;
    background: #b8b0fa;
    transform-origin: center;
}
.network-icon::before { top: 20px; transform: rotate(25deg); }
.network-icon::after { top: 21px; transform: rotate(-28deg); }
.network-icon i {
    position: absolute;
    z-index: 1;
    width: 13px;
    height: 13px;
    border: 3px solid #5846e8;
    border-radius: 50%;
    background: #fff;
    animation: enact-node-pulse 3s ease-in-out infinite;
}
.network-icon i:nth-child(1) { left: 0; top: 3px; }
.network-icon i:nth-child(2) { right: 0; top: 0; animation-delay: .45s; }
.network-icon i:nth-child(3) { left: 8px; bottom: 0; animation-delay: .9s; }
.network-icon i:nth-child(4) { right: 7px; bottom: 3px; animation-delay: 1.35s; }

.source-icon {
    width: 43px;
    height: 43px;
    border: 5px solid #008e7d;
    border-radius: 50%;
}
.source-icon::before {
    content: "";
    position: absolute;
    right: -14px;
    bottom: -8px;
    width: 22px;
    height: 5px;
    border-radius: 4px;
    background: #008e7d;
    transform: rotate(45deg);
}
.source-icon::after {
    content: "✓";
    position: absolute;
    inset: 2px 0 0 7px;
    color: #008e7d;
    font-size: 1.45rem;
    font-weight: 900;
}

.bias-icon {
    width: auto;
    height: auto;
    color: #d83273;
    font-size: 2.6rem;
    line-height: 1;
    transform-origin: 50% 25%;
    animation: enact-balance 5s ease-in-out infinite;
}

.enact-hero-concepts .visual-person {
    overflow: hidden;
    animation: enact-person-breathe 6s ease-in-out infinite;
}
.person-head {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 82px;
    height: 92px;
    border-radius: 46% 46% 42% 42%;
    background: #322477;
    transform: translateX(-50%);
}
.person-body {
    position: absolute;
    left: 50%;
    bottom: -45px;
    width: 205px;
    height: 185px;
    border-radius: 48% 48% 20% 20%;
    background: #322477;
    transform: translateX(-50%);
}
.person-thought {
    position: absolute;
    top: 29px;
    right: 35px;
    width: 48px;
    height: 36px;
}
.person-thought i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    animation: enact-thought 2.4s ease-in-out infinite;
}
.person-thought i:nth-child(1) { left: 0; bottom: 0; }
.person-thought i:nth-child(2) { left: 15px; bottom: 9px; animation-delay: .25s; }
.person-thought i:nth-child(3) { left: 32px; bottom: 19px; animation-delay: .5s; }

.hero-orb { animation: enact-orb-drift 12s ease-in-out infinite alternate; }
.hero-orb.orb-two { animation-delay: -4s; animation-direction: alternate-reverse; }

@keyframes enact-float-a { 0%,100% { transform: rotate(-8deg) translate3d(0,0,0); } 50% { transform: rotate(-5deg) translate3d(4px,-14px,0); } }
@keyframes enact-float-b { 0%,100% { transform: rotate(5deg) translate3d(0,0,0); } 50% { transform: rotate(2deg) translate3d(-5px,-11px,0); } }
@keyframes enact-float-c { 0%,100% { transform: rotate(8deg) translate3d(0,0,0); } 50% { transform: rotate(4deg) translate3d(-4px,-13px,0); } }
@keyframes enact-node-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes enact-balance { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes enact-person-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes enact-thought { 0%,100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes enact-orb-drift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(18px,14px,0) scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
    .enact-hero-concepts .visual-card,
    .enact-hero-concepts .visual-person,
    .enact-hero-concepts .network-icon i,
    .enact-hero-concepts .bias-icon,
    .enact-hero-concepts .person-thought i,
    .hero-orb {
        animation: none !important;
    }
}