.container {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
}

.container::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(0, 188, 255, 0.035),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(87, 255, 144, 0.035),
            transparent 25%
        );

    z-index: 0;
}

.container::after {
    content: "";
    position: absolute;

    width: 900px;
    height: 900px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(0, 188, 255, 0.025) 0%,
            transparent 65%
        );

    filter: blur(40px);
    z-index: 0;
}

.hero {
    position: relative;
    z-index: 2;

    width: min(760px, 100%);

    text-align: center;

    padding: 40px;

    animation: hero-enter 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logo-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.logo {
    width: clamp(120px, 18vw, 180px);
    height: auto;

    filter:
        drop-shadow(0 0 20px rgba(0, 188, 255, 0.22))
        drop-shadow(0 0 45px rgba(87, 255, 144, 0.08));

    animation: logo-float 6s ease-in-out infinite;
}

.heading {
    display: block;
    height: auto;
    margin: 0;

    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.055em;

    color: #ffffff;
}

.heading span {
    background: linear-gradient(
        110deg,
        var(--primary),
        var(--secondary)
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.descriptor {
    margin-top: 20px;

    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.02em;

    color: #c9d2dc;
}

.description {
    max-width: 650px;
    margin: 22px auto 0;

    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;

    color: var(--muted);
}

.actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

.button {
    position: relative;
    min-width: 140px;
    padding: 12px 22px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

.button:hover {
    transform: translateY(-3px);
}

.button:active {
    transform: translateY(-1px);
}

.button.primary {
    border-color: rgba(0, 188, 255, 0.5);

    background: linear-gradient(
        110deg,
        rgba(0, 188, 255, 0.16),
        rgba(87, 255, 144, 0.10)
    );

    box-shadow:
        0 0 25px rgba(0, 188, 255, 0.08),
        inset 0 0 20px rgba(0, 188, 255, 0.03);
}

.button.primary:hover {
    border-color: rgba(0, 188, 255, 0.85);

    box-shadow:
        0 8px 30px rgba(0, 188, 255, 0.12),
        inset 0 0 20px rgba(0, 188, 255, 0.06);
}

.button.secondary {
    color: #cbd4dd;
    background: rgba(255, 255, 255, 0.025);
}

.button.secondary:hover {
    color: #ffffff;
    border-color: rgba(87, 255, 144, 0.4);
    background: rgba(87, 255, 144, 0.05);

    box-shadow: 0 8px 30px rgba(87, 255, 144, 0.06);
}

@keyframes hero-enter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logo-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@media (max-width: 600px) {
    .container {
        padding: 48px 20px;
    }

    .logo {
        width: 125px;
    }

    .description {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .actions {
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .button {
        flex: 1;
        min-width: 0;
    }

    .hero::before {
        content: "";
        position: absolute;
        inset: -16px;
        z-index: -1;
        border-radius: 20px;
        background: rgba(6, 10, 16, 0.55);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero,
    .logo {
        animation: none;
    }

    .button {
        transition: none;
    }
}

.orb {
    position: absolute;

    width: 720px;
    height: 720px;

    pointer-events: none;
    z-index: 0;

    overflow: visible;
}

.blob {
    position: absolute;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        var(--primary) 0%,
        #16d8dc 38%,
        #26dfb0 68%,
        var(--secondary) 100%
    );

    box-shadow:
        0 0 55px rgba(0, 188, 255, 0.35),
        0 0 110px rgba(87, 255, 144, 0.18);

    will-change: transform;

    transform-origin: center;
}

.orb-top-left {
    top: -300px;
    left: -300px;
}

.orb-top-left .blob-a {
    width: 530px;
    height: 530px;

    top: 0;
    left: 0;

    z-index: 3;

    background: linear-gradient(
        145deg,
        #007cff 0%,
        var(--primary) 42%,
        #1bd9c4 72%,
        var(--secondary) 100%
    );

    animation: blob-a 18s ease-in-out infinite;
}

.orb-top-left .blob-b {
    width: 350px;
    height: 350px;

    top: 275px;
    left: 275px;

    z-index: 2;

    background: linear-gradient(
        145deg,
        #00aeea 0%,
        #17d7d0 45%,
        var(--secondary) 100%
    );

    animation: blob-b 21s ease-in-out infinite;
}

.orb-top-left .blob-c {
    width: 260px;
    height: 260px;

    top: 350px;
    left: 45px;

    z-index: 4;

    background: linear-gradient(
        145deg,
        #005cff 0%,
        var(--primary) 52%,
        #24d8c1 100%
    );

    animation: blob-c 24s ease-in-out infinite;
}

.orb-bottom-right {
    right: -300px;
    bottom: -300px;
}

.orb-bottom-right .blob-a {
    width: 520px;
    height: 520px;

    right: 0;
    bottom: 0;

    z-index: 4;

    background: linear-gradient(
        135deg,
        #006cff 0%,
        var(--primary) 42%,
        #1bd7cb 75%,
        var(--secondary) 100%
    );

    animation: blob-d 20s ease-in-out infinite;
}

.orb-bottom-right .blob-b {
    width: 410px;
    height: 410px;

    right: 255px;
    bottom: 170px;

    z-index: 2;

    background: linear-gradient(
        135deg,
        var(--secondary) 0%,
        #28dfad 35%,
        #16d5d2 65%,
        var(--primary) 100%
    );

    animation: blob-e 23s ease-in-out infinite;
}

.orb-bottom-right .blob-c {
    width: 275px;
    height: 275px;

    right: 335px;
    bottom: 390px;

    z-index: 3;

    background: linear-gradient(
        135deg,
        #005cff 0%,
        var(--primary) 48%,
        #20ddb8 100%
    );

    animation: blob-f 26s ease-in-out infinite;
}

@keyframes blob-a {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(20px, 15px, 0)
            scale(1.035);
    }
}

@keyframes blob-b {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-18px, 20px, 0)
            scale(1.045);
    }
}

@keyframes blob-c {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(18px, -15px, 0)
            scale(0.96);
    }
}

@keyframes blob-d {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-20px, -18px, 0)
            scale(1.035);
    }
}

@keyframes blob-e {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(20px, -15px, 0)
            scale(0.965);
    }
}

@keyframes blob-f {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-15px, 18px, 0)
            scale(1.04);
    }
}

.particle {
    position: absolute;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #16d8d1 45%,
            var(--secondary)
        );

    box-shadow:
        0 0 25px rgba(0, 188, 255, 0.45),
        0 0 55px rgba(87, 255, 144, 0.20);

    opacity: 0;

    will-change: transform, opacity;
}

.particle-1 {
    width: 72px;
    height: 72px;

    top: 430px;
    left: 420px;

    animation: particle-1 32s ease-in-out infinite;
}

.particle-2 {
    width: 48px;
    height: 48px;

    top: 350px;
    left: 520px;

    animation: particle-2 38s ease-in-out infinite;
    animation-delay: -10s;
}

.particle-3 {
    width: 34px;
    height: 34px;

    top: 500px;
    left: 330px;

    animation: particle-3 42s ease-in-out infinite;
    animation-delay: -18s;
}

.particle-4 {
    width: 24px;
    height: 24px;

    top: 400px;
    left: 480px;

    animation: particle-4 35s ease-in-out infinite;
    animation-delay: -24s;
}

@keyframes particle-1 {
    0%,
    15% {
        opacity: 0;
        transform: translate(0, 0) scale(0.2);
    }

    25% {
        opacity: 1;
        transform: translate(80px, -40px) scale(1);
    }

    45% {
        opacity: 1;
        transform: translate(250px, -150px) scale(1.05);
    }

    65% {
        opacity: 1;
        transform: translate(430px, -90px) scale(0.95);
    }

    80% {
        opacity: 1;
        transform: translate(300px, 70px) scale(0.9);
    }

    92% {
        opacity: 0;
        transform: translate(100px, 40px) scale(0.4);
    }

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

@keyframes particle-2 {
    0%,
    12% {
        opacity: 0;
        transform: translate(0, 0) scale(0.2);
    }

    24% {
        opacity: 1;
        transform: translate(-40px, -80px) scale(1);
    }

    44% {
        opacity: 1;
        transform: translate(-180px, -170px) scale(1.05);
    }

    65% {
        opacity: 1;
        transform: translate(-330px, -220px) scale(0.9);
    }

    82% {
        opacity: 1;
        transform: translate(-260px, -70px) scale(0.8);
    }

    94% {
        opacity: 0;
        transform: translate(-80px, -20px) scale(0.3);
    }

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

@keyframes particle-3 {
    0%,
    18% {
        opacity: 0;
        transform: translate(0, 0) scale(0.2);
    }

    30% {
        opacity: 1;
        transform: translate(-30px, 50px) scale(1);
    }

    52% {
        opacity: 1;
        transform: translate(-160px, 190px) scale(1.1);
    }

    72% {
        opacity: 1;
        transform: translate(-290px, 250px) scale(0.9);
    }

    88% {
        opacity: 0;
        transform: translate(-160px, 130px) scale(0.35);
    }

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

@keyframes particle-4 {
    0%,
    20% {
        opacity: 0;
        transform: translate(0, 0) scale(0.2);
    }

    30% {
        opacity: 1;
        transform: translate(50px, 30px) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(180px, 150px) scale(1.15);
    }

    70% {
        opacity: 1;
        transform: translate(300px, 80px) scale(0.9);
    }

    86% {
        opacity: 0;
        transform: translate(170px, 30px) scale(0.3);
    }

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

@media (max-width: 768px) {
    .orb {
        width: 520px;
        height: 520px;
        opacity: 0.5;
    }

    .orb-top-left {
        top: -290px;
        left: -290px;
    }

    .orb-bottom-right {
        right: -290px;
        bottom: -290px;
    }

    .orb-top-left .blob-a,
    .orb-bottom-right .blob-a {
        width: 390px;
        height: 390px;
    }

    .orb-top-left .blob-b,
    .orb-bottom-right .blob-b {
        width: 270px;
        height: 270px;
    }

    .orb-top-left .blob-c,
    .orb-bottom-right .blob-c {
        width: 230px;
        height: 230px;
    }

    .hero {
        padding: 20px;
    }

    .particle-1 {
        animation-duration: 38s;
    }

    .particle-2 {
        animation-duration: 42s;
    }

    .particle-3 {
        animation-duration: 46s;
    }

    .particle-4 {
        animation-duration: 40s;
    }

    .blob {
        box-shadow:
            0 0 28px rgba(0, 188, 255, 0.18),
            0 0 55px rgba(87, 255, 144, 0.08);
    }

    .particle {
        display: none;
    }
}

.hero {
    position: relative;
    z-index: 2;
}