@import url('developer.css');
@import url('color.css');
@import url('fonts.css');
@import url('style.css');


.header-inner {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(6px);
    border-radius: 24px;
}


.h1-title {
    background: linear-gradient(180deg, #0FD6F9 0%, #001D4A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: 700;
    font-size: clamp(55px, 12vw, 120px);
}

/* Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

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

.animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
    /* Starte invisible */
}

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
    opacity: 0;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

.box {
    background: rgba(0, 191, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
}

.shape {
    position: relative;
}

.shape::before,
.shape::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: linear-gradient(360deg, #0043F8 0%, #0075F8 100%);
    filter: blur(232px);
    border-radius: 250px;
    z-index: 1;
}

.shape::before {
    left: -250px;
    top: 138px;
}

.shape::after {
    right: -350px;
    top: 46px;
}

.shape_center::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: linear-gradient(360deg, #0043F8 0%, #0075F8 100%);
    filter: blur(232px);
    border-radius: 249px;

}