* {
margin:0;
padding:0;
box-sizing:border-box
}

:root {
--font-family:Figtree,'Figtree Placeholder',sans-serif
}

body {
background-color:#f7f7f7;
color:#1a1a1a;
text-align:center;
overflow-x:hidden;
position:relative;
min-height:100vh;
font-size:18px
}

img {
    max-width:100%;
    height:auto
}

[role="presentation"] {
pointer-events:none
}

.navbar {
    position: sticky;
    top: 0;
    width:90%;
    height:80px;
    background:#ffffffd9;
    border-radius:18px;
    margin:24px auto 0;
    max-width:98vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 48px;
    box-shadow:0 4px 24px #3c3c7814;
    z-index:22;
    position:relative;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px)
}

.logo {
display:flex;
align-items:center;
gap:8px;
font-weight:700;
font-size:18px;
color:#2c2c54;
font-family:var(--font-family)
}

.logo img {
width:160px
}

.initiative a {
    font-family: var(--font-family);
    text-decoration: none;
    font-size:.7rem;
    color: #000;
    display:flex;
    align-items:center;
    gap:8px;
}
.initiative img {
height:3rem;
width:auto;
margin-right:0;
object-fit:contain;
display:block
}

.main-container {
min-height:calc(100vh - 140px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:2;
position:relative
}

.content {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
margin-top:32px;
font-family:var(--font-family)
}

.main-logo {
width:480px;
max-width:40vw;
margin-bottom:25px
}

.content .description {
max-width:65%;
margin-bottom:20px;
font-size:26px;
font-family:var(--font-family);
color:#2c2c54
}

.launching {
font-size:62px;
font-family:var(--font-family);
background:linear-gradient(90deg,#105680 0%,#4a0987 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
color:transparent;
font-weight:900
}

.shape1 {
width:220px
}

.shape2 {
width:260px
}

.shape3 {
width:200px
}

.glow1,.glow2,.glow3 {
width:320px!important;
height:320px!important
}

@media (max-width: 1024px) {
.navbar {
height:70px;
padding:16px 24px;
border-radius:18px
}

.main-logo {
width:340px
}

.launching {
font-size:52px
}

.content .description {
font-size:16px
}
}

@media (max-width: 599px) {
.navbar {
height:60px;
padding:8px;
border-radius:12px
}

.main-logo {
width:220px
}

.launching {
    font-size:30px;
    margin-top:12px
}

.content .description {
    font-size:16px;
    margin:0 24px
    }

    .navbar .logo img {
    width:120px}

    .initiative img{
    height:2rem
        }
    .initiative a {
            font-size:.6rem;
    }
}



.fade-in-pop {
opacity:0;
transform:scale(0.7);
animation:fadeInPop 1s cubic-bezier(.68,-0.55,.27,1.55) forwards
}

@keyframes fadeInPop {
to {
opacity:1;
transform:scale(1)
}
}

.slide-in-down {
opacity:0;
transform:translateY(-60px);
animation:slideInDown 1.1s cubic-bezier(.68,-0.55,.27,1.55) forwards
}

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

.slide-in-left {
opacity:0;
transform:translateX(-60px);
animation:slideInLeft 1.1s cubic-bezier(.68,-0.55,.27,1.55) forwards
}

@keyframes slideInLeft {
to {
opacity:1;
transform:translateX(0)
}
}

.bg-animate-left {
opacity:0;
transform:translateX(-80px);
animation:bgInLeft 1.2s cubic-bezier(.68,-0.55,.27,1.55) forwards
}

@keyframes bgInLeft {
to {
opacity:1;
transform:translateX(0)
}
}

.bg-animate-right {
opacity:0;
transform:translateX(80px);
animation:bgInRight 1.2s cubic-bezier(.68,-0.55,.27,1.55) forwards
}

@keyframes bgInRight {
to {
opacity:1;
transform:translateX(0)
}
}

.bg-animate-bottom {
opacity:0;
transform:translateY(80px);
animation:bgInBottom 1.2s cubic-bezier(.68,-0.55,.27,1.55) forwards
}

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