body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #19aaaf 0%, #00ffb3 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.logo-container {
    width: 300px;
    height: 300px;
    margin-bottom: 2rem;
    overflow: visible;
    position: relative;
}

.logo {
    width: 100%;
    height: 100%;
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
}

.logo-animated {
    z-index: 2;
}

.logo-fallback {
    z-index: 1;
    filter: invert(1) brightness(1);
    opacity: 0.3;
    animation: logo-fallback-fade-in 1s ease-in 2.5s forwards;
}

@keyframes logo-fallback-fade-in {
    0% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}

.logo-animated path {
    fill: none;
    stroke: white;
    stroke-width: 1;
    opacity: 0;
    /* Start invisible */
}

/* Fly-in animations from different directions */
.f-line-1 {
    animation: fly-from-bottom 1s ease-out 0s forwards;
}

.f-line-2 {
    animation: fly-from-left 1s ease-out 0.05s forwards;
}

.f-line-3 {
    animation: fly-from-top-left 1s ease-out 0.1s forwards;
}

.f-line-4 {
    animation: fly-from-top 1s ease-out 0.15s forwards;
}

.f-line-5 {
    animation: fly-from-top-right 1s ease-out 0.2s forwards;
}

.f-line-6 {
    animation: fly-from-right 1s ease-out 0.25s forwards;
}

.f-line-7 {
    animation: fly-from-right 1s ease-out 0.3s forwards;
}

.f-line-8 {
    animation: fly-from-top 1s ease-out 0.35s forwards;
}

.f-line-9 {
    animation: fly-from-left 1s ease-out 0.4s forwards;
}

.f-line-10 {
    animation: fly-from-bottom 1s ease-out 0.45s forwards;
}

.f-line-11 {
    animation: fly-from-bottom 1s ease-out 0.5s forwards;
}

.f-line-12 {
    animation: fly-from-bottom-left 1s ease-out 0.55s forwards;
}

.f-line-13 {
    animation: fly-from-left 1s ease-out 0.6s forwards;
}

.f-line-14 {
    animation: fly-from-left 1s ease-out 0.65s forwards;
}

.f-line-15 {
    animation: fly-from-top 1s ease-out 0.7s forwards;
}

.f-line-16 {
    animation: fly-from-right 1s ease-out 0.75s forwards;
}

.f-line-17 {
    animation: fly-from-right 1s ease-out 0.8s forwards;
}

.f-line-18 {
    animation: fly-from-top-right 1s ease-out 0.85s forwards;
}

.f-line-19 {
    animation: fly-from-bottom-right 1s ease-out 0.9s forwards;
}

.f-line-20 {
    animation: fly-from-bottom 1s ease-out 0.95s forwards;
}

.f-line-21 {
    animation: fly-from-left 1s ease-out 1s forwards;
}

.f-line-22 {
    animation: fly-from-bottom-left 1s ease-out 1.05s forwards;
}

/* Keyframe animations from different screen edges */
@keyframes fly-from-bottom {
    0% {
        transform: translateY(200px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fly-from-top {
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fly-from-left {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fly-from-right {
    0% {
        transform: translateX(200px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fly-from-top-left {
    0% {
        transform: translate(-150px, -150px);
        opacity: 0;
    }

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

@keyframes fly-from-top-right {
    0% {
        transform: translate(150px, -150px);
        opacity: 0;
    }

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

@keyframes fly-from-bottom-left {
    0% {
        transform: translate(-150px, 150px);
        opacity: 0;
    }

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

@keyframes fly-from-bottom-right {
    0% {
        transform: translate(150px, 150px);
        opacity: 0;
    }

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

h1 {
    font-size: 3rem;
    margin: 1rem 0;
    font-weight: 300;
    letter-spacing: 2px;
}

p {
    font-size: 1.2rem;
    margin: 0.5rem 0;
    opacity: 0.9;
}

.subtitle {
    font-style: italic;
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

.vat {
    font-size: 1rem;
    opacity: 0.7;
}