.hero-section {
    min-height: 100vh;
    padding-top: 4.7rem;
}

.hero-background {
    z-index: 20;
}

.hero-background-image {
    object-fit: cover;
}

.hero-overlay {
    z-index: 21;
    background: radial-gradient(80% 70% at 50% 45%, rgba(3, 10, 28, 0.25), rgba(3, 10, 28, 0.78) 100%);
}

.hero-network-canvas {
    z-index: 22;
    pointer-events: none;
    opacity: 0.7;
    mix-blend-mode: screen;
}

.hero-orbs-overlay {
    z-index: 30;
    pointer-events: none;
}

.hero-content {
    z-index: 25;
}

.hero-title {
    font-size: clamp(3.25rem, 11vw, 9rem);
    line-height: .9;
    letter-spacing: .05em;
    text-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}

.hero-subtitle {
    font-size: .8rem;
    letter-spacing: .55em;
}


.orb-wrap {
    pointer-events: auto;
    z-index: 10;
    will-change: transform;
}

.orb-button {
    pointer-events: auto;
    position: relative;
    overflow: visible;
    transform-origin: center center;
    transition: width .45s cubic-bezier(.22, 1, .36, 1), height .45s cubic-bezier(.22, 1, .36, 1), border-radius .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}

.orb-shell {
    opacity: 1;
    transform: scale(1);
    transition: opacity .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

.orb-core {
    border-radius: 50%;
    overflow: visible;
}

.orb-halo {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 65, 190, .7) 0%, rgba(0, 50, 160, .45) 30%, rgba(0, 35, 120, .2) 52%, transparent 72%);
    filter: blur(10px);
    opacity: .6;
    transform: scale(.92);
    animation: orb-halo 4.6s ease-in-out infinite;
}

/* =========================================================
   DARK CRYSTALLINE / ENERGY PLANET
   ========================================================= */

.orb-surface {
    border-radius: 50%;
    overflow: hidden;
    position: relative;

    /* Deep blue outer shell with a black-hole center */
    background:
        radial-gradient(circle at 50% 50%,
            #000000 0%,
            #01030a 24%,
            #020817 38%,
            #06265f 57%,
            #0753ad 72%,
            #06377f 86%,
            #021b4c 100%);

    box-shadow:
        /* deep blue outer energy */
        0 0 8px rgba(0, 70, 180, .95),
        0 0 18px rgba(0, 75, 200, .8),
        0 0 32px rgba(0, 60, 180, .55),
        0 0 50px rgba(0, 45, 140, .3),

        /* inner dimensional shading */
        inset 5px 5px 12px rgba(50, 140, 255, .25),
        inset -8px -10px 18px rgba(0, 0, 0, .95);

    /* deep blue border */
    border: 1px solid rgba(0, 65, 180, .95);
}

.orb-surface::before {
    content: none;
}

.orb-surface::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;

    background:
        /* black event horizon */
        radial-gradient(circle at 50% 50%,
            #000 0%,
            #000 34%,
            rgba(0, 0, 0, .98) 43%,
            rgba(0, 15, 45, .7) 52%,
            transparent 68%),

        /* subtle blue energy ring */
        radial-gradient(circle at 50% 50%,
            transparent 45%,
            rgba(0, 65, 190, .35) 49%,
            rgba(10, 105, 255, .65) 52%,
            rgba(0, 45, 160, .25) 56%,
            transparent 63%);

    box-shadow: 0 0 12px rgba(0, 80, 220, .35), inset 0 0 14px rgba(0, 0, 0, .95);
    mix-blend-mode: screen;
    opacity: .95;
    animation: blackhole-pulse 4.5s ease-in-out infinite;
}

@keyframes blackhole-pulse {

    0%,
    100% {
        transform: scale(.96);
        opacity: .82;
        filter: blur(.4px);
    }

    50% {
        transform: scale(1.02);
        opacity: 1;
        filter: blur(0);
    }
}

.orb-ring {
    border-radius: 50%;
    border: 1px solid rgba(65, 155, 255, .8);
    opacity: 0;
    transform: scale(1);
    box-shadow: 0 0 6px rgba(0, 120, 255, .8), 0 0 14px rgba(0, 80, 255, .45);
    animation: orb-ring 3.4s ease-out infinite;
}

.orb-spark {
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px color-mix(in oklab, var(--primary) 90%, transparent);
    opacity: 0;
}

.orb-spark-0 {
    animation: orb-spark-0 3.6s ease-in-out 0s infinite;
}

.orb-spark-1 {
    animation: orb-spark-1 4.6s ease-in-out .7s infinite;
}

.orb-spark-2 {
    animation: orb-spark-2 5.6s ease-in-out 1.4s infinite;
}

.orb-lava-button {
    --lava-orange: #ff6a00;
    --lava-light: #ffb057;
}

.orb-halo-lava {
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(255, 180, 70, .65) 0%,
            rgba(255, 105, 20, .38) 35%,
            rgba(255, 55, 0, .18) 55%,
            transparent 75%);

    filter: blur(10px);
    opacity: .65;
    transform: scale(.94);
    animation: orb-halo-lava 5.2s ease-in-out infinite;
}

/* =========================================================
   MOLTEN VOLCANIC LAVA BALL
   ========================================================= */

.orb-lava-surface {
    border-radius: 50%;
    overflow: hidden;
    position: relative;

    background:
        radial-gradient(
            circle at 32% 25%,
            #ff8a00 0%,
            #f45100 18%,
            #d82f00 38%,
            #9e1d00 58%,
            #5c0d00 78%,
            #260500 100%
        );

    box-shadow:
        0 0 10px rgba(255, 70, 0, .95),
        0 0 24px rgba(255, 55, 0, .75),
        0 0 45px rgba(255, 40, 0, .45),
        inset 6px 6px 12px rgba(255, 120, 20, .3),
        inset -10px -12px 20px rgba(35, 3, 0, .95);
}

.orb-lava-surface::before {
    content: "";
    position: absolute;
    inset: -3%;
    border-radius: 50%;

    background:
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 18%,
            rgba(255, 70, 0, .15) 19%,
            rgba(255, 120, 0, .95) 20%,
            rgba(255, 190, 40, 1) 21%,
            rgba(255, 65, 0, .95) 22%,
            transparent 23%,
            transparent 34%,

            rgba(255, 80, 0, .12) 35%,
            rgba(255, 110, 0, .95) 36%,
            rgba(255, 190, 35, 1) 37%,
            rgba(255, 55, 0, .9) 38%,
            transparent 39%,
            transparent 52%,

            rgba(255, 70, 0, .1) 53%,
            rgba(255, 105, 0, .95) 54%,
            rgba(255, 175, 25, 1) 55%,
            rgba(255, 50, 0, .9) 56%,
            transparent 57%
        ),

        linear-gradient(
            42deg,
            transparent 0%,
            transparent 27%,
            rgba(255, 80, 0, .1) 28%,
            rgba(255, 115, 0, .95) 29%,
            rgba(255, 190, 30, 1) 30%,
            rgba(255, 55, 0, .9) 31%,
            transparent 32%,

            transparent 62%,
            rgba(255, 85, 0, .12) 63%,
            rgba(255, 120, 0, 1) 64%,
            rgba(255, 180, 25, 1) 65%,
            rgba(255, 50, 0, .9) 66%,
            transparent 67%
        ),

        linear-gradient(
            165deg,
            transparent 0%,
            transparent 42%,
            rgba(255, 65, 0, .1) 43%,
            rgba(255, 115, 0, .95) 44%,
            rgba(255, 180, 25, 1) 45%,
            rgba(255, 50, 0, .9) 46%,
            transparent 47%,

            transparent 73%,
            rgba(255, 90, 0, .1) 74%,
            rgba(255, 125, 0, 1) 75%,
            rgba(255, 185, 30, 1) 76%,
            rgba(255, 55, 0, .9) 77%,
            transparent 78%
        );

    mix-blend-mode: screen;
    filter: blur(.35px);
    opacity: .9;

    animation: lava-crack-pulse 3.8s ease-in-out infinite;
}

.orb-lava-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at 22% 35%,
            rgba(20, 2, 0, .75) 0%,
            transparent 24%
        ),
        radial-gradient(
            ellipse at 72% 28%,
            rgba(15, 1, 0, .8) 0%,
            transparent 22%
        ),
        radial-gradient(
            ellipse at 68% 72%,
            rgba(25, 2, 0, .8) 0%,
            transparent 27%
        ),
        radial-gradient(
            ellipse at 28% 78%,
            rgba(10, 1, 0, .75) 0%,
            transparent 22%
        );

    mix-blend-mode: multiply;
    opacity: .9;
}

@keyframes lava-crack-pulse {
    0%,
    100% {
        opacity: .65;
        filter: blur(.7px);
    }

    50% {
        opacity: 1;
        filter: blur(.15px);
    }
}

@keyframes molten-pulse {

    0%,
    100% {
        opacity: .45;
        transform: scale(.98);
    }

    50% {
        opacity: .9;
        transform: scale(1.04);
    }
}

.orb-lava-spin {
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 80, 0, .05) 35deg,
            rgba(255, 120, 15, .55) 70deg,
            transparent 105deg,
            rgba(255, 45, 0, .65) 155deg,
            transparent 200deg,
            rgba(255, 150, 35, .5) 250deg,
            transparent 300deg,
            rgba(255, 60, 0, .55) 335deg,
            transparent 360deg);

    filter: blur(7px);
    mix-blend-mode: screen;
    opacity: .75;
    animation: orb-lava-spin 13s linear infinite;
}

.orb-lava-shadow {
    background:
        radial-gradient(circle at 50% 50%,
            transparent 30%,
            rgba(4, 2, 6, .9) 100%),
        radial-gradient(ellipse at 30% 40%,
            rgba(8, 4, 10, .75) 0%,
            transparent 30%),
        radial-gradient(ellipse at 70% 62%,
            rgba(8, 4, 10, .7) 0%,
            transparent 28%);

    mix-blend-mode: multiply;
    opacity: .9;
}

.orb-lava-glow {
    background:
        radial-gradient(ellipse at 65% 70%,
            rgba(255, 150, 40, .8) 0%,
            transparent 45%),
        radial-gradient(ellipse at 25% 60%,
            rgba(255, 70, 0, .7) 0%,
            transparent 40%);

    mix-blend-mode: screen;
    opacity: .5;
    animation: orb-lava-glow 4.2s ease-in-out infinite;
}

.orb-ember {
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: #ffe0a0;
    box-shadow:
        0 0 8px rgba(255, 220, 130, 1),
        0 0 18px rgba(255, 120, 20, .9);
    opacity: 0;
}

.orb-ember-0 {
    animation: orb-ember-0 3s ease-out 0s infinite;
}

.orb-ember-1 {
    animation: orb-ember-1 3.6s ease-out .9s infinite;
}

.orb-ember-2 {
    animation: orb-ember-2 4.2s ease-out 1.8s infinite;
}

.orb-card {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transform: scale(.72);
    background: transparent;
    transition: opacity .4s ease, transform .6s cubic-bezier(.22, 1, .36, 1), border-radius .55s cubic-bezier(.22, 1, .36, 1);
}

.orb-card-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 18px;
    box-sizing: border-box;
    transition: box-shadow .4s ease, border-color .4s ease;
}


.orb-wrap.is-open {
    z-index: 100;
}

.orb-wrap.is-open .orb-button {
    width: 210px !important;
    height: 262.5px !important;
    border-radius: 20px !important;
}

.orb-wrap.is-open .orb-shell {
    opacity: 0;
    transform: scale(.65);
    pointer-events: none;
}

.orb-wrap.is-open .orb-card {
    opacity: 1;
    transform: scale(1);
    border-radius: 20px;
}

.orb-wrap.is-open .orb-card-image {
    border: 2px solid rgba(70, 150, 255, .8);
    box-shadow:
        0 0 10px rgba(0, 120, 255, .8),
        0 0 25px rgba(0, 90, 255, .55),
        inset 0 0 12px rgba(0, 120, 255, .2);
}


/* Orange card border */
.orb-wrap:nth-child(2).is-open .orb-card-image,
.orb-wrap:nth-child(5).is-open .orb-card-image {
    border-color: #ff6a00;
    box-shadow:
        0 0 8px rgba(255, 80, 0, .95),
        0 0 20px rgba(255, 90, 0, .75),
        0 0 40px rgba(255, 45, 0, .45),
        inset 0 0 14px rgba(255, 90, 0, .2);
}

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

    34% {
        transform: translate(12px, -55px);
    }

    68% {
        transform: translate(-8px, 40px);
    }

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

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

    34% {
        transform: translate(-10px, 55px);
    }

    68% {
        transform: translate(15px, -45px);
    }

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

@keyframes orb-drift-3 {
    0% {
        transform: translate(0, 0);
    }

    34% {
        transform: translate(22px, -48px);
    }

    68% {
        transform: translate(-18px, 52px);
    }

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

@keyframes orb-drift-4 {
    0% {
        transform: translate(0, 0);
    }

    34% {
        transform: translate(-12px, -55px);
    }

    68% {
        transform: translate(8px, 45px);
    }

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

@keyframes orb-drift-5 {
    0% {
        transform: translate(0, 0);
    }

    34% {
        transform: translate(10px, 55px);
    }

    68% {
        transform: translate(-15px, -40px);
    }

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

@keyframes orb-drift-6 {
    0% {
        transform: translate(0, 0);
    }

    34% {
        transform: translate(-22px, 48px);
    }

    68% {
        transform: translate(18px, -50px);
    }

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

@keyframes orb-halo {

    0%,
    100% {
        opacity: .45;
        transform: scale(.92);
    }

    50% {
        opacity: .85;
        transform: scale(1.08);
    }
}

@keyframes orb-halo-lava {

    0%,
    100% {
        opacity: .4;
        transform: scale(.94);
    }

    50% {
        opacity: .85;
        transform: scale(1.1);
    }
}

@keyframes orb-ring {
    0% {
        transform: scale(1);
        opacity: .6;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

@keyframes orb-spark-0 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        transform: translate(26px, 0);
        opacity: 1;
    }

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

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

    50% {
        transform: translate(-13px, 22.5px);
        opacity: 1;
    }

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

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

    50% {
        transform: translate(-13px, -22.5px);
        opacity: 1;
    }

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

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

    40% {
        opacity: 1;
    }

    100% {
        transform: translate(-14px, -32px) scale(.4);
        opacity: 0;
    }
}

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

    40% {
        opacity: 1;
    }

    100% {
        transform: translate(0, -40px) scale(.4);
        opacity: 0;
    }
}

@keyframes orb-ember-2 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translate(14px, -48px) scale(.4);
        opacity: 0;
    }
}

@keyframes orb-lava-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes orb-lava-glow {

    0%,
    100% {
        opacity: .5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@media (max-width: 767.98px) {

    .hero-network-canvas {
        opacity: .45;
    }

    .hero-title {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .hero-subtitle {
        font-size: .72rem;
        letter-spacing: .35em;
    }

    .orb-wrap.is-open .orb-button {
        width: 150px !important;
        height: 187.5px !important;
    }
}


@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .orb-wrap {
        animation: none !important;
    }

    .orb-halo,
    .orb-halo-lava,
    .orb-ring,
    .orb-spark,
    .orb-ember,
    .orb-lava-spin,
    .orb-lava-glow {
        animation: none !important;
    }
}