/* Hero Orbit / Animated Floating Cards */

.hero-orbit-wrap {
    position: relative;
    width: min(520px, 100%);
    margin: 0 auto;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-orbit-bg {
    position: absolute;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.15), transparent 22%),
        linear-gradient(135deg, #00d88c, #169b73);
    box-shadow:
        0 0 0 1px rgba(0,216,140,.28),
        0 0 80px rgba(0,216,140,.22);
    animation: heroPulse 4s ease-in-out infinite;
}

.hero-orbit-ring,
.hero-orbit-ring-2 {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,.13);
    pointer-events: none;
}

.hero-orbit-ring {
    width: 470px;
    height: 470px;
    animation: heroSpin 36s linear infinite;
}

.hero-orbit-ring-2 {
    width: 610px;
    height: 610px;
    opacity: .55;
    animation: heroSpinReverse 52s linear infinite;
}

.hero-person-frame {
    position: relative;
    z-index: 4;
    width: 350px;
    height: 420px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border-radius: 0 0 180px 180px;
}

.hero-person-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    filter: drop-shadow(0 25px 55px rgba(0,0,0,.28));
}

.hero-float-card {
    position: absolute;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 185px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    color: #142019;
    border: 1px solid rgba(0,216,140,.35);
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
    backdrop-filter: blur(16px);
}

.hero-float-card strong {
    display: block;
    font-size: 22px;
    line-height: 1;
    color: #10131a;
}

.hero-float-card span {
    display: block;
    font-size: 13px;
    line-height: 1.25;
    color: #30343d;
    font-weight: 700;
}

.hero-float-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #00b874;
    background: rgba(0,216,140,.10);
    font-size: 24px;
    flex: 0 0 auto;
}

.hero-card-left {
    left: -36px;
    top: 230px;
    animation: floatCardOne 4.8s ease-in-out infinite;
}

.hero-card-top {
    right: -8px;
    top: 70px;
    animation: floatCardTwo 5.4s ease-in-out infinite;
}

.hero-card-right {
    right: -70px;
    bottom: 145px;
    animation: floatCardThree 4.6s ease-in-out infinite;
}

.hero-card-bottom {
    left: 38px;
    bottom: 58px;
    animation: floatCardFour 5.2s ease-in-out infinite;
}

.hero-orbit-icon {
    position: absolute;
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    color: #00d88c;
    font-size: 30px;
    box-shadow: 0 20px 55px rgba(0,0,0,.22);
    backdrop-filter: blur(16px);
}

.hero-icon-1 {
    left: 5px;
    top: 20px;
    color: #ff5db8;
    animation: orbitIconOne 6s ease-in-out infinite;
}

.hero-icon-2 {
    right: 0;
    top: 45px;
    color: #00d88c;
    animation: orbitIconTwo 6.4s ease-in-out infinite;
}

.hero-icon-3 {
    left: -5px;
    bottom: 118px;
    color: #41a9ff;
    animation: orbitIconThree 5.8s ease-in-out infinite;
}

.hero-icon-4 {
    right: 28px;
    bottom: 58px;
    color: #ffd33d;
    animation: orbitIconFour 6.2s ease-in-out infinite;
}

@keyframes heroPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 80px rgba(0,216,140,.22);
    }
    50% {
        transform: scale(1.035);
        box-shadow: 0 0 110px rgba(0,216,140,.34);
    }
}

@keyframes heroSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes heroSpinReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes floatCardOne {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-16px) rotate(1deg); }
}

@keyframes floatCardTwo {
    0%, 100% { transform: translateY(0) rotate(1deg); }
    50% { transform: translateY(14px) rotate(-1deg); }
}

@keyframes floatCardThree {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-14px) rotate(1deg); }
}

@keyframes floatCardFour {
    0%, 100% { transform: translateY(0) rotate(1deg); }
    50% { transform: translateY(12px) rotate(-1deg); }
}

@keyframes orbitIconOne {
    0%, 100% { transform: translate(0,0) rotate(-8deg); }
    50% { transform: translate(10px, -14px) rotate(8deg); }
}

@keyframes orbitIconTwo {
    0%, 100% { transform: translate(0,0) rotate(8deg); }
    50% { transform: translate(-12px, 12px) rotate(-8deg); }
}

@keyframes orbitIconThree {
    0%, 100% { transform: translate(0,0) rotate(8deg); }
    50% { transform: translate(12px, 10px) rotate(-8deg); }
}

@keyframes orbitIconFour {
    0%, 100% { transform: translate(0,0) rotate(-8deg); }
    50% { transform: translate(-12px, -10px) rotate(8deg); }
}

@media (max-width: 991px) {
    .hero-orbit-wrap {
        min-height: 500px;
        margin-top: 28px;
    }

    .hero-orbit-bg {
        width: 310px;
        height: 310px;
    }

    .hero-orbit-ring {
        width: 390px;
        height: 390px;
    }

    .hero-orbit-ring-2 {
        width: 480px;
        height: 480px;
    }

    .hero-person-frame {
        width: 300px;
        height: 370px;
    }

    .hero-card-left {
        left: 0;
        top: 220px;
    }

    .hero-card-top {
        right: 8px;
        top: 54px;
    }

    .hero-card-right {
        right: 0;
        bottom: 130px;
    }

    .hero-card-bottom {
        left: 22px;
        bottom: 48px;
    }
}

@media (max-width: 576px) {
    .hero-orbit-wrap {
        min-height: 430px;
        transform: scale(.88);
        transform-origin: center top;
        margin-bottom: -35px;
    }

    .hero-orbit-icon {
        width: 58px;
        height: 58px;
        font-size: 25px;
    }

    .hero-float-card {
        min-width: 155px;
        padding: 11px 12px;
        gap: 9px;
    }

    .hero-float-card strong {
        font-size: 18px;
    }

    .hero-float-card span {
        font-size: 11px;
    }

    .hero-float-icon {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }

    .hero-card-left {
        left: -10px;
        top: 208px;
    }

    .hero-card-top {
        right: -18px;
        top: 70px;
    }

    .hero-card-right {
        right: -18px;
        bottom: 116px;
    }

    .hero-card-bottom {
        left: 10px;
        bottom: 40px;
    }
}

/* Face-safe hero floating card position fix */
.hero-person-frame {
    z-index: 9;
}

.hero-float-card {
    z-index: 10;
}

/* Desktop / large screen positions */
.hero-card-left {
    left: -145px !important;
    top: 235px !important;
}

.hero-card-top {
    right: -90px !important;
    top: 86px !important;
}

.hero-card-right {
    right: -125px !important;
    bottom: 145px !important;
}

.hero-card-bottom {
    left: -45px !important;
    bottom: 36px !important;
}

/* Keep cards away from face on laptop/tablet */
@media (max-width: 1199px) {
    .hero-card-left {
        left: -105px !important;
        top: 245px !important;
    }

    .hero-card-top {
        right: -55px !important;
        top: 88px !important;
    }

    .hero-card-right {
        right: -75px !important;
        bottom: 145px !important;
    }

    .hero-card-bottom {
        left: -20px !important;
        bottom: 26px !important;
    }
}

/* Mobile: reduce size and push cards outside face area */
@media (max-width: 576px) {
    .hero-orbit-wrap {
        transform: scale(.82) !important;
        transform-origin: center top !important;
        min-height: 430px !important;
        margin-bottom: -40px !important;
    }

    .hero-float-card {
        min-width: 145px !important;
        max-width: 160px !important;
    }

    .hero-card-left {
        left: -72px !important;
        top: 220px !important;
    }

    .hero-card-top {
        right: -58px !important;
        top: 82px !important;
    }

    .hero-card-right {
        right: -62px !important;
        bottom: 126px !important;
    }

    .hero-card-bottom {
        left: -28px !important;
        bottom: 30px !important;
    }
}

/* Very small phones */
@media (max-width: 390px) {
    .hero-orbit-wrap {
        transform: scale(.76) !important;
        margin-left: -6px !important;
    }

    .hero-card-left {
        left: -62px !important;
    }

    .hero-card-right {
        right: -58px !important;
    }
}