/* �"?�"? Index-only styles (hero animation, orbs) �"?�"? */

#hero-trigger {
    height: 150vh;
    position: relative;
}

#hero-sticky-wrap {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

#hero-card {
    width: 100%;
    height: 100%;
    background: #050c1a;
    position: relative;
    overflow: hidden;
    pointer-events: all;
    clip-path: inset(0px 0px 0px 0px round 0px);
    will-change: clip-path;
}

/* �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?
TWO-ORB SYSTEM
Each orb-wrap moves independently.
Inside each wrap: two layers (blue + green)
that crossfade SIMULTANEOUSLY (no delay)
giving a synchronized blue�?'green�?'blue pulse.
�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */

/* Wrapper handles position & movement */
.orb-wrap {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Both color layers fill the wrapper */
.orb-layer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(108px);
    will-change: opacity;
}

.orb-layer-b {
    background: radial-gradient(circle, #2448FF 0%, transparent 68%);
}

.orb-layer-g {
    background: radial-gradient(circle, #82FD28 0%, transparent 68%);
}

/* �"?�"? Synchronized color pulse (same duration, 0 delay on both orbs) �"?�"? */
/* Blue fades out while green fades in, then reverses */
@keyframes show-blue {
    0% {
        opacity: 0.62;
    }

    35% {
        opacity: 0.62;
    }

    48% {
        opacity: 0;
    }

    85% {
        opacity: 0;
    }

    98% {
        opacity: 0.62;
    }

    100% {
        opacity: 0.62;
    }
}

@keyframes show-green {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 0;
    }

    48% {
        opacity: 0.42;
    }

    85% {
        opacity: 0.42;
    }

    98% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Apply to every orb's layers �?" 9s total, no delay �?' perfectly in sync */
.orb-layer-b {
    animation: show-blue 9s ease-in-out infinite;
}

.orb-layer-g {
    animation: show-green 9s ease-in-out infinite;
}

/* �"?�"? Orb 1: large, starts top-left, moves across �"?�"? */
#orb1 {
    width: 620px;
    height: 620px;
    top: -8vh;
    left: -8vw;
    animation: orb-move-1 12s ease-in-out infinite;
}

/* �"?�"? Orb 2: medium, starts bottom-right, moves in opposite cadence �"?�"? */
#orb2 {
    width: 520px;
    height: 520px;
    bottom: -12vh;
    right: -8vw;
    animation: orb-move-2 15s ease-in-out infinite;
}

@keyframes orb-move-1 {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(52vw, -8vh);
    }

    50% {
        transform: translate(58vw, 50vh);
    }

    75% {
        transform: translate(8vw, 62vh);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes orb-move-2 {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-42vw, -4vh);
    }

    50% {
        transform: translate(-52vw, -46vh);
    }

    75% {
        transform: translate(-8vw, -52vh);
    }

    100% {
        transform: translate(0, 0);
    }
}

#hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .035;
    pointer-events: none;
    z-index: 3;
}

.hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7rem 1.5rem 3rem;
    text-align: center;
}

.hero-badge {
    display: inline-block;
    padding: .35rem 1.1rem;
    margin-bottom: 1.6rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
}

.hero-h1 {
    font-size: clamp(2.8rem, 8.5vw, 7rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.03em;
    color: #fff;
    margin-bottom: 1.5rem;
}

.hero-h1 .grad {
    background: linear-gradient(140deg, #ffffff 0%, rgba(255, 255, 255, .4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-p {
    font-size: clamp(.95rem, 1.8vw, 1.15rem);
    color: rgba(255, 255, 255, .48);
    max-width: 560px;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

.hero-p-line {
    display: inline;
}

@media (min-width: 1024px) {
    .hero-p {
        max-width: min(92vw, 1100px);
    }

    .hero-p-line {
        display: block;
        white-space: nowrap;
    }
}

.hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.scroll-hint {
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .25);
    font-size: 1rem;
    animation: bounce-y 2.2s ease-in-out infinite;
    z-index: 3;
}

@keyframes bounce-y {

    0%,
    100% {
        transform: translateX(-50%) translateY(0)
    }

    50% {
        transform: translateX(-50%) translateY(9px)
    }
}