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

html,
body{
    width:100%;
    overflow-x:hidden;
}

body{
    font-family:'Inter',sans-serif;
    background:
    radial-gradient(circle at top left,
    rgba(255,138,61,0.10),
    transparent 25%),

    radial-gradient(circle at bottom right,
    rgba(122,92,255,0.10),
    transparent 25%),

    #f7f8fc;

    color:#071126;
    min-height:100vh;
}

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

:root{

    --gradient:
    linear-gradient(
        135deg,
        #ff8a3d 0%,
        #ff4f9b 35%,
        #7a5cff 70%,
        #5ac8fa 100%
    );

}

.container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:0 20px;
}

/* HERO */

.hero{
    position:relative;
    padding:60px 0;
}

/* BLUR */

.blur-circle{
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    filter:blur(100px);
    opacity:0.30;
    z-index:-1;
}

.circle-1{
    background:#ff8a3d;
    top:0;
    left:-120px;
}

.circle-2{
    background:#7a5cff;
    bottom:0;
    right:-120px;
}

/* HEADER */

.hero-content{
    text-align:center;
}

.badge{

    width:fit-content;

    margin:0 auto 28px;

    padding:14px 28px;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        rgba(255,138,61,0.14),
        rgba(122,92,255,0.14)
    );

    border:
    1px solid rgba(255,255,255,0.85);

    backdrop-filter:blur(14px);

    font-size:14px;

    font-weight:700;

    color:#ff6b3d;

    letter-spacing:1px;

}

.title{

    font-size:
    clamp(72px,10vw,130px);

    line-height:0.95;

    font-weight:800;

    letter-spacing:-4px;

    margin-bottom:18px;

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.subtitle{

    font-size:
    clamp(34px,4vw,64px);

    line-height:1.1;

    font-weight:800;

    color:#101828;

    margin-bottom:22px;

    letter-spacing:-2px;

}

.gradient-text{

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.description{

    max-width:760px;

    margin:auto;

    font-size:
    clamp(18px,1.5vw,22px);

    line-height:1.8;

    color:#667085;

    font-weight:500;

}

/* HERO IMAGE */

.showcase{
    margin-top:50px;
}

.hero-image-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
}

.hero-image{
    width:100%;
    max-width:1100px;
    object-fit:contain;
}

/* FEATURES */

.bottom-strip{

    margin-top:45px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:14px;

    padding:18px;

    border-radius:32px;

    background:
    rgba(255,255,255,0.72);

    border:
    1px solid rgba(255,255,255,0.65);

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 60px rgba(18,25,38,0.10);

}

.feature-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:22px 14px;

    border-radius:24px;

    transition:0.3s ease;

}

.feature-item:hover{

    background:
    rgba(255,255,255,0.55);

}

.feature-icon{
    font-size:28px;
}

.feature-item span{

    font-size:16px;

    font-weight:600;

    text-align:center;

}

/* WAITLIST */

.waitlist{
    margin-top:40px;
}

.waitlist-form{

    display:grid;

    grid-template-columns:
    repeat(3,minmax(0,1fr));

    gap:18px;

    padding:28px;

    border-radius:32px;

    background:
    rgba(255,255,255,0.72);

    border:
    1px solid rgba(255,255,255,0.65);

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 60px rgba(18,25,38,0.10);

}

.input-field{

    width:100%;

    border:none;

    outline:none;

    padding:20px 22px;

    border-radius:18px;

    background:white;

    font-size:16px;

    color:#101828;

    border:
    1px solid rgba(15,23,42,0.08);

}

.input-field:focus{

    border-color:#7a5cff;

    box-shadow:
    0 0 0 4px rgba(122,92,255,0.10);

}

.textarea-field{

    resize:none;

    min-height:70px;

    height:70px;

    grid-column:
    span 3;

}

.h-captcha{

    grid-column:
    span 3;

    display:flex;

    justify-content:center;

    overflow:hidden;

}

.join-btn{

    grid-column:
    span 3;

    border:none;

    cursor:pointer;

    padding:20px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #ff8a3d,
        #ff4f9b,
        #6a5cff
    );

    color:white;

    font-size:18px;

    font-weight:700;

    transition:0.3s ease;

}

.join-btn:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 16px 40px rgba(122,92,255,0.25);

}

/* NOTE */

.note{

    margin-top:24px;

    text-align:center;

    color:#667085;

    font-size:15px;

}

/* RESPONSIVE */

@media(max-width:992px){

    .bottom-strip{
        grid-template-columns:
        repeat(2,1fr);
    }

}

@media(max-width:768px){

    .container{
        padding:0 14px;
    }

    .title{
        font-size:64px;
        letter-spacing:-2px;
    }

    .subtitle{
        font-size:36px;
    }

    .description{
        font-size:16px;
    }

    .showcase{
        margin-top:35px;
    }

    .bottom-strip{
        grid-template-columns:
        1fr 1fr;
    }

    .waitlist-form{
        grid-template-columns:
        1fr;
    }

    .textarea-field,
    .join-btn,
    .h-captcha{

        grid-column:
        span 1;

    }

    .textarea-field{
        min-height:120px;
        height:auto;
    }

}

@media(max-width:480px){

    .feature-item{
        padding:16px 10px;
    }

    .feature-item span{
        font-size:14px;
    }
    
    .success-message{

    display:none;

    margin-top:20px;

    padding:18px 22px;

    border-radius:18px;

    background:
    rgba(34,197,94,0.10);

    border:
    1px solid rgba(34,197,94,0.25);

    color:#15803d;

    font-size:16px;

    font-weight:600;

    text-align:center;

    }

}