@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap);

*,*:after,*:before{
    margin:0;
    padding:0;
    box-sizing:border-box;
    text-decoration:none
}
html{
    font-family:sans-serif
}
body{
    background:#050505;
    color:#fff;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-content:center;
    justify-content:center;
    align-items:center;
    height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:0.3s
}
section{
    text-align:center;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    max-width:980px;
    align-items:center;
    gap:4rem;
    align-content:center;
    & ul{
        list-style-type:none;
        display:flex;
        flex-direction:row;
        align-content:center;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        gap:2rem;
        text-transform:uppercase;
        font-size:14px;
        color:#a1a1a1
    }
    & h1{
        text-wrap:balance;
        font-family:'Plus Jakarta',sans-serif;
        --top-padding:-16px;
        font-weight:800;
        margin-top:1rem;
        margin-bottom:1rem;
        clip-path:inset(var(--top-padding) 100% var(--top-padding) 0 round 9999px);
        animation:ship-banner_unclip__24ZI6 2.8s ease-in-out forwards;
        background:linear-gradient(180deg,#fff,#adadad);
        -webkit-background-clip:text;
        -webkit-text-fill-color:#fff0;
        font-size:max(48px,min(5vw,76px));
        line-height:1;
        letter-spacing:-.05em;
        padding:24px;
        position:relative
    }
    & p{
        text-wrap:balance;
        font-family:'Inter',sans-serif;
        font-weight:400;
        letter-spacing:-.3px;
        color:#a1a1a1;
        font-size:1.125rem;
        line-height:1.75rem
    }
}
@keyframes ship-banner_unclip__24ZI6{
    to{
        clip-path:inset(var(--top-padding) 0 var(--top-padding) 0 round 9999px)
    }
}
.stars-left::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:2px;
    height:2px;
    border-radius:50%;
    opacity:1;
    box-shadow:490px 330px #fff,420px 300px #fff,320px 280px #fff,380px 350px #fff,546px 170px #fff,420px 180px #fff,370px 150px #fff,200px 250px #fff,80px 20px #fff,190px 50px #fff,270px 20px #fff,120px 230px #fff,350px -1px #fff,150px 369px #fff;
    z-index:-1;
    transition:0.3s ease;
    animation:2s glowing-stars linear alternate infinite;
    animation-delay:2s
}
.stars-left::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:2px;
    height:2px;
    border-radius:50%;
    opacity:1;
    box-shadow:140px 20px #fff,425px 20px #fff,70px 120px #fff,20px 130px #fff,110px 80px #fff,280px 80px #fff,250px 350px #fff,280px 230px #fff,220px 190px #fff,450px 100px #fff,380px 80px #fff,520px 50px #fff;
    z-index:-1;
    transition:0.3s ease;
    animation:2s glowing-stars linear alternate infinite;
    animation-delay:0.9s
}
.stars-right::before{
    content:"";
    position:absolute;
    top:0;
    width:2px;
    height:2px;
    border-radius:50%;
    opacity:1;
    box-shadow:490px 330px #fff,420px 300px #fff,320px 280px #fff,380px 350px #fff,546px 170px #fff,420px 180px #fff,370px 150px #fff,200px 250px #fff,80px 20px #fff,190px 50px #fff,270px 20px #fff,120px 230px #fff,350px -1px #fff,150px 369px #fff;
    z-index:-1;
    transition:0.3s ease;
    animation:2s glowing-stars linear alternate infinite;
    animation-delay:2s
}
.stars-right::after{
    content:"";
    position:absolute;
    top:0;
    width:2px;
    height:2px;
    border-radius:50%;
    opacity:1;
    box-shadow:140px 20px #fff,425px 20px #fff,70px 120px #fff,20px 130px #fff,110px 80px #fff,280px 80px #fff,250px 350px #fff,280px 230px #fff,220px 190px #fff,450px 100px #fff,380px 80px #fff,520px 50px #fff;
    z-index:-1;
    transition:0.3s ease;
    animation:2s glowing-stars linear alternate infinite;
    animation-delay:0.9s
}
@keyframes glowing-stars{
    0%{
        opacity:0
    }
    50%{
        opacity:1
    }
    100%{
        opacity:0
    }
}
.starlight{
    position:relative
}
.starlight::after{
    content:"";
    position:absolute;
    top:-10rem;
    left:883%;
    rotate:-45deg;
    width:5em;
    height:1px;
    background:linear-gradient(90deg,#ffffff,transparent);
    animation:7s shootingStar linear infinite;
    animation-delay:7s
}
@keyframes shootingStar{
    0%{
        transform:translateX(0) translateY(0);
        opacity:1
    }
    50%{
        transform:translateX(-55em) translateY(0);
        opacity:1
    }
    70%{
        transform:translateX(-70em) translateY(0);
        opacity:0
    }
    100%{
        transform:translateX(0) translateY(0);
        opacity:0
    }
}
@keyframes intro_width__3hQft{
    0%{
        opacity:1
    }
    to{
        width:calc(100% + var(--line-offset));
        opacity:.3
    }
}
@keyframes intro_heightOffset__K101W{
    0%{
        opacity:1
    }
    to{
        height:calc(100% + var(--line-offset));
        opacity:.3
    }
}
@keyframes intro_height__Xk_uP{
    0%{
        opacity:1
    }
    to{
        height:100%;
        opacity:.3
    }
}
.whatsapp{
    padding:1rem;
    background:#0a0a0a;
    color:#b3b3b3;
    border-radius:8px;
    box-shadow:0 0 0 1px rgb(128 128 128 / 40%);
    font-weight:500;
    margin-top:3rem;
    display:inline-flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:center;
    align-items:center;
    justify-content:center;
    gap:1rem;
    position:relative;
    transition:0.5s ease-in-out;
    &:hover{
        background-color:#050505;
        box-shadow:0 0 0 1px rgb(128 128 128 / 90%);
        color:#fff
    }
    & img{
        width:20px
    }
}
.button .dots_border{
    --size_border:calc(100% + 2px);
    overflow:hidden;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:var(--size_border);
    height:var(--size_border);
    background-color:#fff0;
    border-radius:10px;
    z-index:-10
}
.button .dots_border::before{
    content:"";
    position:absolute;
    top:30%;
    left:50%;
    transform:translate(-50%,-50%);
    transform-origin:left;
    transform:rotate(0deg);
    width:100%;
    height:2rem;
    background-color:#fff;
    mask:linear-gradient(transparent 0%,white 120%);
    animation:rotate 4s linear infinite
}
@keyframes rotate{
    to{
        transform:rotate(360deg)
    }
}
.brand {
    font-weight: bold;
    font-size: 5em;
    text-wrap:balance;
    font-family:'Plus Jakarta',sans-serif;
    font-weight:800;
    margin-top:1rem;
    margin-bottom:1rem;
    clip-path:inset(var(--top-padding) 100% var(--top-padding) 0 round 9999px);
    animation:ship-banner_unclip__24ZI6 2.8s ease-in-out forwards;
    background:linear-gradient(180deg,#fff,#adadad);
    -webkit-background-clip:text;
    -webkit-text-fill-color:#fff0;
    font-size:max(48px,min(5vw,76px));
    line-height:1;
    letter-spacing:-.05em;
    padding:24px;
    position:relative
}